@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');


/* Flat Icon CDN - Flaticon */
@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-thin-rounded/css/uicons-thin-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-regular-straight/css/uicons-regular-straight.css');
@import url('https://cdn-uicons.flaticon.com/uicons-bold-straight/css/uicons-bold-straight.css');
@import url('https://cdn-uicons.flaticon.com/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css');

/* Global Flaticon alignment fix — overrides CDN's baseline-aligned inline-block */
.fi {
    vertical-align: middle !important;
}

:root {
    /* ── Primary Brand ── */
    --primary-color:     #FFE255;
    --primary-rgb:       255, 226, 85;
    --primary-hover:     #F5D200;
    --primary-dark:      #B8960C;
    --primary-filter:    23, 75, 70;
    --secondary:         #1A1A1A;

    --rgba-primary-1: rgba(255, 226, 85, 0.1);
    --rgba-primary-2: rgba(255, 226, 85, 0.2);
    --rgba-primary-3: rgba(255, 226, 85, 0.3);
    --rgba-primary-4: rgba(255, 226, 85, 0.4);
    --rgba-primary-5: rgba(255, 226, 85, 0.5);
    --rgba-primary-6: rgba(255, 226, 85, 0.6);
    --rgba-primary-7: rgba(255, 226, 85, 0.7);
    --rgba-primary-8: rgba(255, 226, 85, 0.8);
    --rgba-primary-9: rgba(255, 226, 85, 0.9);

    /* ── Accent ── */
    --accent-color: #EC407A;
    --accent-rgb:   236, 64, 122;

    /* ── Semantic State Colors ── */
    --danger-color:  #EF5350;
    --success-color: #66BB6A;
    --info-color:    #3B82F6;
    --warning-color: #FFE255;

    --danger-rgb:  239, 83, 80;
    --success-rgb: 102, 187, 106;
    --info-rgb:    66, 165, 245;
    --warning-rgb: 255, 179, 0;

    /* ── Named Color Palette ── */
    --deep-purple-color: #7E57C2;
    --red-color:         #EF5350;
    --orange-color:      #FF7043;
    --blue-color:        #3B82F6;
    --green-color:       #66BB6A;
    --amber-color:       #FFE255;
    --pink-color:        #EC407A;
    --indigo-color:      #3F51B5;
    --blue-grey-color:   #78909C;
    --brown-color:       #8D6E63;
    --cyan-color:        #00BCD4;
    --light-green-color: #8BC34A;
    --purple-color:      #AB47BC;
    --grey-color:        #616161;

    /* ── Neutral Scale ── */
    --neutral-50:  #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;

    /* ── Blue Accent ── */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;

    /* ── Green Accent ── */
    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    /* ── Orange / Warning ── */
    --orange-50:  #fff7ed;
    --orange-100: #ffedd5;
    --orange-500: #f97316;
    --orange-600: #ea580c;

    /* ── Pink Accent ── */
    --pink-50:  #fff0f5;
    --pink-100: #ffe0eb;
    --pink-200: #ffc2d1;
    --pink-300: #ff99b3;
    --pink-400: #ff6f99;
    --pink-500: #ff4780;
    --pink-600: #e3366f;
    --pink-700: #c12d5d;
    --pink-800: #9e244b;
    --pink-900: #7c1b3a;

    /* ── Dark Scale ── */
    --dark-900: #263238;
    --dark-800: #37474F;
    --dark-700: #455a64;
    --dark-600: #546E7A;

    /* ── Lenovo / Legacy Brand ── */
    --lenovo-color:  #E31D1A;
    --lenovo-red:    #E1251B;
    --deep-red-1:    #871C23;
    --deep-red-2:    #64131E;
    --mid-red-1:     #B8252E;
    --mid-red-2:     #F26A52;
    --mid-red-3:     #FFB9A2;
    --pale-red-1:    #FFB9A2;
    --pale-red-2:    #F0C7BF;
    --deep-purple-1: #7A126B;
    --deep-purple-2: #4D144A;
    --pale-purple-1: #D9C1D8;
    --pale-purple-2: #F1E1ED;
    --deep-blue-1:   #294E95;
    --deep-blue-2:   #11244F;
    --pale-blue-1:   #EAEEF5;
    --pale-blue-2:   #C9D0F0;
    --dark-gray:     #4E444E;
    --mid-gray:      #ABA8B1;
    --pale-gray:     #E6E2E4;
    --white:         #FFFFFF;
    --black:         #1E0013;

    /* ── Brand / Social Colors ── */
    --brand-facebook-color:    #3b5998;
    --brand-twitter-color:     #1da1f2;
    --brand-dribbble-color:    #ea4c89;
    --brand-google-plus-color: #ea4335;
    --brand-linkedin-color:    #007bb5;
    --brand-whatsapp-color:    #4fce5d;
    --brand-gmail-color:       #D44638;
    --brand-pinterest-color:   #E60023;
    --brand-instagram-color:   #A2292E;
    --brand-microsoft-color:   #00A4EF;

    /* ── Semantic Tokens ── */
    --text-primary:   var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-tertiary:  var(--neutral-500);
    --text-disabled:  var(--neutral-400);
    --text-label:     #6b7280;
    --text-light:     rgba(30, 61, 91, 0.5);
    --text-muted:     #9ca3af;
    --bg-subtle:      var(--neutral-50);
    --bg-muted:       var(--neutral-100);
    --border-light:   var(--neutral-200);
    --border-medium:  var(--neutral-300);

    /* ── Typography ── */
    --font-family-title: Poppins, sans-serif;
    --font-family-base:  Poppins, sans-serif;

    /* ── Layout & Shape ── */
    --border-radius:           12px;
    --border-radius-sm:         8px;
    --border-radius-lg:        18px;
    --border-radius-xl:        22px;
    --border-radius-button:    38px;
    --border-radius-50percent: 50%;
    --border-color:            rgba(59, 112, 170, 0.1);

    /* ── Elevation & FX ── */
    --box-shadow:  0px 10px 30px 0px rgba(59, 112, 170, 0.15);
    --bg-gradient: linear-gradient(180deg, #f0f4f8 0%, #fff 100%);

    /* ── Surface & Color Roles ── */
    --body-bg:            #fff;
    --body-color:         #1b1b1b;
    --dark:               #000;
    --bg-white:           #fff;
    --bg-light:           #f8fafc;
    --title:              #1e3d5b;
    --banner-bg:          #ebf2f9;
    --card-bg:            #fff;
    --theme-text-color:   #fff;
    --light:              #f0f4f8;
    --input-bg:           #f8fafc;
    --input-border-color: rgba(59, 112, 170, 0.15);
}

/* ============================================
   GLOBAL CARD STYLING - Override Bootstrap & Clean UI
   ============================================ */

.card {
    border-radius: 20px !important;
    border: 1px solid var(--border-color, #ececec);
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(32, 32, 32, 0.07);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.card:hover {
    box-shadow: 0 4px 24px 0 rgba(32, 32, 32, 0.12);
}

.card-header,
.card-header:first-child,
.card-header:last-child {
    border-radius: 20px 20px 0 0 !important;
    padding: 1.25rem 1.5rem;
    background: var(--card-bg, #fff);
    border-bottom: 1px solid var(--border-color, #ececec);
    font-weight: 600;
    color: var(--heading-color, inherit);
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    border-radius: 0 0 20px 20px;
    padding: 1rem 1.5rem;
    background: var(--off-white, #f9f9f9);
    border-top: 1px solid var(--border-color, #ececec);
}

.mt-spacer {
    margin-bottom: 2.5rem;
}

/* ============================================
   DROPDOWN HEIGHT — match form-control inputs
   (theme overrides form-control padding to 0.84rem, making inputs ~3.18rem tall)
   ============================================ */

/* Native select elements used as form-controls */
select.form-control {
    height: calc(1.5rem + 1.68rem + 2px);
    padding-top: 0.84rem;
    padding-bottom: 0.84rem;
}

/* Select2 single-select — match the same height */
.select2 .select2-selection--single {
    height: calc(1.5rem + 1.68rem + 2px) !important;
    border-color: #e4e9f0;
}

.select2 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5rem + 1.68rem + 2px) !important;
}

.select2 .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5rem + 1.68rem) !important;
}

@media (min-width: 992px) {
    .card {
        margin-bottom: 2.5rem;
    }
}

.text-muted {
    --bs-text-opacity: 1;
    color: #212529bf !important;
}

.fi {
    vertical-align: middle !important;
}