/* ============================================================
   SIGN-UM MASTER STYLESHEET
   OneUI 7 Design System — Authentic Edition
   Version: 4.0

   Rebuilt from scratch against the true OneUI 7 spec:
   ✦ Pill buttons  (border-radius: 50px) — #1 trait
   ✦ Bubbly cards  (border-radius: 20–24px)
   ✦ Generous sizing: 44px default, 52px large
   ✦ Typography: 15–16px body, 32px H1, 26px H2
   ✦ OneUI palette: #1259C3 / #F4F4F4 / #1A1A1A
   ✦ Pretendard → Inter font stack
   ✦ Subtle shadows: 0 2px 8px rgba(0,0,0,0.08)
   ✦ 4px spacing grid, 12px compact gap

   Load order:
   1. master.css  ← this file
   2. [page].css  ← page-specific overrides
   ============================================================ */

/* ============================================================
   FONT IMPORTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {

    /* ── Brand / Primary ──────────────────────────────────── */
    --brand-primary:       #1259C3;
    --brand-primary-hover: #0f4fa8;
    --brand-primary-deep:  #0d47a1;
    --brand-accent:        #4E8FF5;   /* dark-mode primary    */

    /* ── Semantic Colors ──────────────────────────────────── */
    --color-success:       #2e7d32;
    --color-success-mid:   #43a047;
    --color-success-bg:    #e8f5e9;
    --color-danger:        #D32F2F;
    --color-danger-mid:    #ef5350;
    --color-danger-bg:     #ffebee;
    --color-warning:       #e65100;
    --color-warning-mid:   #f57c00;
    --color-warning-bg:    #fff3e0;
    --color-info:          #0277bd;
    --color-info-mid:      #039be5;
    --color-info-bg:       #e1f5fe;

    /* ── OneUI Color Palette ──────────────────────────────── */
    --oneui-bg:             #F4F4F4;
    --oneui-surface:        #FFFFFF;
    --oneui-primary:        #1259C3;
    --oneui-text-primary:   #1A1A1A;
    --oneui-text-secondary: #6B6B6B;
    --oneui-border:         #E0E0E0;
    --oneui-destructive:    #D32F2F;

    /* ── Neutrals ─────────────────────────────────────────── */
    --gray-0:    #ffffff;
    --gray-50:   #fafafa;
    --gray-100:  #f4f4f4;
    --gray-150:  #ebebeb;
    --gray-200:  #e0e0e0;
    --gray-300:  #c7c7c7;
    --gray-400:  #a0a0a0;
    --gray-500:  #6b6b6b;
    --gray-600:  #555555;
    --gray-700:  #3a3a3a;
    --gray-800:  #2c2c2c;
    --gray-900:  #1a1a1a;
    --gray-950:  #111111;

    /* ── Gradients ────────────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #1259C3 0%, #0d47a1 100%);
    --gradient-success: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
    --gradient-danger:  linear-gradient(135deg, #ef5350 0%, #D32F2F 100%);
    --gradient-warning: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
    --gradient-info:    linear-gradient(135deg, #039be5 0%, #0277bd 100%);

    /* ── Semantic Surface Tokens ──────────────────────────── */
    --color-page-bg:          #F4F4F4;
    --color-surface:          #FFFFFF;
    --color-surface-raised:   #FFFFFF;
    --color-surface-sunken:   #F4F4F4;
    --color-surface-muted:    #fafafa;
    --color-surface-overlay:  rgba(0, 0, 0, 0.40);

    --color-border:           #E0E0E0;
    --color-border-subtle:    rgba(224, 224, 224, 0.75);
    --color-border-focus:     #1259C3;

    --color-text-primary:     #1A1A1A;
    --color-text-secondary:   #6B6B6B;
    --color-text-tertiary:    #9E9E9E;
    --color-text-disabled:    #BDBDBD;
    --color-text-inverse:     #ffffff;
    --color-text-heading:     #1A1A1A;
    --color-text-label:       #3a3a3a;

    /* ── Typography ───────────────────────────────────────── */
    /* Rethink Sans for main text, Space Mono for code.
       Falls back to system fonts.                        */
    --font-sans: 'Rethink Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Space Mono', 'Fira Code', monospace;

    /* OneUI 7 type scale */
    --text-2xs:  0.75rem;     /* 12px — small/helper      */
    --text-xs:   0.8125rem;   /* 13px — label/caption     */
    --text-sm:   0.9375rem;   /* 15px — body default      */
    --text-base: 1rem;        /* 16px — body large        */
    --text-lg:   1.0625rem;   /* 17px — H4                */
    --text-xl:   1.25rem;     /* 20px — H3                */
    --text-2xl:  1.625rem;    /* 26px — H2                */
    --text-3xl:  2rem;        /* 32px — H1                */
    --text-4xl:  2.5rem;      /* 40px — display           */
    --text-5xl:  3rem;        /* 48px — hero              */

    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;
    --font-extrabold:800;

    /* Line heights */
    --leading-h1:      1.30;
    --leading-h2:      1.35;
    --leading-heading: 1.40;
    --leading-normal:  1.40;
    --leading-relaxed: 1.50;
    --leading-body:    1.60;

    /* Letter spacing */
    --tracking-tighter: -0.03em;
    --tracking-tight:   -0.01em;
    --tracking-normal:   0em;
    --tracking-wide:     0.01em;
    --tracking-wider:    0.03em;
    --tracking-widest:   0.08em;

    /* ── Spacing (4px grid) ───────────────────────────────── */
    --space-0:   0;
    --space-px:  1px;
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-7:   1.75rem;   /* 28px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */

    /* Semantic aliases */
    --space-compact:    var(--space-3);  /* 12px — between elements  */
    --space-section:    var(--space-6);  /* 24px — section gap       */
    --space-section-lg: var(--space-8);  /* 32px — large section gap */
    --space-card:       var(--space-5);  /* 20px — card padding      */
    --space-card-lg:    var(--space-6);  /* 24px — large card pad    */

    /* ── Border Radius — OneUI bubbly scale ──────────────── */
    --radius-none: 0;
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   14px;    /* input/small                  */
    --radius-xl:   16px;    /* input default / small card   */
    --radius-2xl:  20px;    /* card default                 */
    --radius-3xl:  24px;    /* card large / modal           */
    --radius-4xl:  32px;    /* navbar, sheet                */
    --radius-pill: 50px;    /* ★ buttons — OneUI #1 trait   */
    --radius-full: 9999px;  /* circle / oval                */

    /* ── Component Heights ────────────────────────────────── */
    --btn-height-sm:   34px;
    --btn-height:      44px;
    --btn-height-lg:   52px;
    --btn-height-xl:   60px;

    --input-height-sm: 42px;
    --input-height:    52px;

    --table-row-height: 48px;
    --navbar-height:    64px;

    /* ── Shadows — subtle, never harsh ───────────────────── */
    --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl:  0 16px 40px rgba(0,0,0,0.14);
    --shadow-2xl: 0 24px 64px rgba(0,0,0,0.18);
    --shadow-inner: inset 0 2px 6px rgba(0,0,0,0.06);

    --shadow-primary: 0 4px 16px rgba(18,89,195,0.30);
    --shadow-success: 0 4px 16px rgba(46,125,50,0.28);
    --shadow-danger:  0 4px 16px rgba(211,47,47,0.28);
    --shadow-warning: 0 4px 16px rgba(230,81,0,0.28);

    /* ── Transitions ──────────────────────────────────────── */
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --duration-75:  75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;

    --transition-fast:   all var(--duration-150) var(--ease-in-out);
    --transition-base:   all var(--duration-200) var(--ease-in-out);
    --transition-slow:   all var(--duration-300) var(--ease-in-out);
    --transition-spring: all var(--duration-300) var(--ease-spring);

    /* ── Z-index ──────────────────────────────────────────── */
    --z-base:     0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-navbar:   500;
    --z-overlay:  1000;
    --z-modal:    1100;
    --z-popover:  1200;
    --z-toast:    1300;
    --z-tooltip:  1400;
    --z-max:      9999;

    /* ── Layout ───────────────────────────────────────────── */
    --sidebar-width:  270px;
    --container-xl:   1280px;
    --container-2xl:  1440px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);          /* 15px */
    font-weight: var(--font-normal);
    line-height: var(--leading-body);   /* 1.6 */
    color: var(--color-text-secondary);
    background: var(--color-page-bg);
    min-height: 100vh;
    letter-spacing: var(--tracking-tight);
    overflow-x: hidden;
}

body.has-navbar { padding-top: var(--navbar-height); }

img, svg, video, canvas, audio, iframe, embed, object {
    display: block; max-width: 100%;
}

input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ============================================================
   3. TYPOGRAPHY — OneUI 7 Spec
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-bold);
    color: var(--color-text-heading);
    letter-spacing: var(--tracking-tight);
}

/* H1: 32px / 700 / 1.3 */
h1 { font-size: var(--text-3xl);  line-height: var(--leading-h1); }

/* H2: 26px / 700 / 1.35 */
h2 { font-size: var(--text-2xl);  line-height: var(--leading-h2); }

/* H3: 20px / 600 / 1.4 */
h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-heading);
}

/* H4: 17px / 600 / 1.4 */
h4 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-heading);
}

/* H5 / H6: 15px / 600 */
h5, h6 { font-size: var(--text-sm); font-weight: var(--font-semibold); }

/* Body: 15px / 400 / 1.6 */
p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-body);
}

/* Label / Caption: 13px / 400–500 / 1.5 */
label, .label, .caption {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-label);
    line-height: var(--leading-relaxed);
}

/* Small / Helper: 12px / 400 / 1.4 */
small, .helper-text {
    font-size: var(--text-2xs);
    color: var(--color-text-tertiary);
    line-height: var(--leading-normal);
}

strong { font-weight: var(--font-semibold); color: var(--color-text-primary); }

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface-sunken);
    color: var(--brand-primary);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   4. NAVBAR (Bootstrap Hybrid Overrides)
   ============================================================ */
.navbar.fixed-top {
    height: var(--navbar-height); /* 64px */
    z-index: var(--z-navbar);
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-sm);
    padding: 0; 
}

.navbar .container-fluid {
    height: 100%;
    max-width: var(--container-2xl);
    padding: 0 var(--space-6);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    color: var(--color-text-primary) !important;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.navbar-brand img {
    display: block;
    flex-shrink: 0;
    height: 60px;
    width: auto;
    margin-right: 0;
}

.navbar-brand-divider {
    color: var(--color-text-tertiary);
    font-weight: var(--font-medium);
}

.navbar-brand-title {
    line-height: 1;
    white-space: nowrap;
}

/* User Info Pill */
.user-info {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-label);
}

/* Notification Bell Circle */
.notification-bell {
    position: relative;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    color: var(--color-text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.notification-bell:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background: rgba(18, 89, 195, 0.05);
}

.notification-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: var(--color-danger);
    color: white;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-bold);
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--color-surface-raised);
}

/* Style the Bootstrap Dropdown button */
.navbar .btn-outline-light {
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    font-weight: var(--font-semibold);
    background: var(--color-surface-raised);
}

.navbar .btn-outline-light:hover {
    background: var(--color-surface-hover) !important;
    color: var(--color-text-primary) !important;
}

/* Fix dropdown item hover state */
.navbar .dropdown-item:hover {
    background-color: var(--color-surface-hover);
    color: var(--brand-primary);
}
.navbar .dropdown-item.text-danger:hover {
    background-color: #fee2e2;
    color: var(--color-danger) !important;
}

/* ============================================================
   5. CARDS — 20–24px radius, 20–24px padding
   ============================================================ */
.card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);   /* 20px */
    padding: var(--space-card);         /* 20px */
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Large variant — 24px radius, 24px padding */
.card-lg {
    border-radius: var(--radius-3xl);   /* 24px */
    padding: var(--space-card-lg);      /* 24px */
}

.card-flat {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: none;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-card);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-muted);
    margin: calc(-1 * var(--space-card))
            calc(-1 * var(--space-card))
            var(--space-5);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.card.no-pad { padding: 0; }
.card.no-pad > .card-header {
    margin: 0;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.card-title {
    font-size: var(--text-lg);           /* 17px / H4 */
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
    display: flex; align-items: center; gap: var(--space-3);
    margin: 0;
}

.card-title i {
    font-size: 20px;                     /* section header icon */
    color: var(--brand-primary);
    flex-shrink: 0;
}

.card-body { padding: var(--space-card); }

.card-footer {
    padding: var(--space-4) var(--space-card);
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface-muted);
    margin: var(--space-card) calc(-1 * var(--space-card)) calc(-1 * var(--space-card));
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* ── Stat Card ──────────────────────────────────────────────── */
.stat-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);   /* 20px */
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    position: relative; overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.stat-card.success::before { background: var(--gradient-success); }
.stat-card.danger::before  { background: var(--gradient-danger);  }
.stat-card.warning::before { background: var(--gradient-warning); }
.stat-card.info::before    { background: var(--gradient-info);    }

.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.stat-value {
    font-size: var(--text-3xl);         /* 32px */
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
}

.stat-label {
    font-size: var(--text-2xs);         /* 12px */
    font-weight: var(--font-medium);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    margin-top: var(--space-1);
}

/* ============================================================
   6. BUTTONS — OneUI 7 Spec
   ============================================================
   ★ ALL buttons use border-radius: 50px (pill)
   Large:   52px / 24px pad / 16px font
   Default: 44px / 20px pad / 15px font
   Small:   34px / 14px pad / 13px font
   Icon:    44×44px circle / 20px icon
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height);          /* 44px */
    padding: 0 20px;
    border-radius: var(--radius-pill);  /* 50px — the OneUI trait */
    border: none;
    font-family: var(--font-sans);
    font-size: var(--text-sm);          /* 15px */
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-normal);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
    position: relative; overflow: hidden;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
}

/* Shimmer sweep */
.btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,255,255,0.22) 50%,
        transparent 65%
    );
    transform: translateX(-100%);
    transition: transform 0.5s var(--ease-smooth);
}
.btn:hover::after { transform: translateX(100%); }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn:disabled, .btn[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ── Sizes ────────────────────────────────────────────────── */
.btn-sm {
    height: var(--btn-height-sm);       /* 34px */
    padding: 0 14px;
    font-size: var(--text-xs);          /* 13px */
}

.btn-lg {
    height: var(--btn-height-lg);       /* 52px */
    padding: 0 24px;
    font-size: var(--text-base);        /* 16px */
}

.btn-xl {
    height: var(--btn-height-xl);       /* 60px */
    padding: 0 32px;
    font-size: var(--text-base);
}

.btn-block { width: 100%; justify-content: center; }

/* ── Solid variants ───────────────────────────────────────── */
.btn-primary {
    background: var(--brand-primary);
    color: white;
    box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
    background: var(--brand-primary-hover);
    box-shadow: 0 6px 20px rgba(18,89,195,0.40);
    color: white;
}

.btn-success {
    background: var(--color-success);
    color: white;
    box-shadow: var(--shadow-success);
}
.btn-success:hover {
    background: var(--color-success-mid);
    box-shadow: 0 6px 20px rgba(46,125,50,0.36);
    color: white;
}

.btn-danger {
    background: var(--color-danger);
    color: white;
    box-shadow: var(--shadow-danger);
}
.btn-danger:hover {
    background: var(--color-danger-mid);
    box-shadow: 0 6px 20px rgba(211,47,47,0.36);
    color: white;
}

.btn-warning {
    background: var(--color-warning-mid);
    color: white;
    box-shadow: var(--shadow-warning);
}
.btn-warning:hover {
    background: var(--color-warning);
    box-shadow: 0 6px 20px rgba(230,81,0,0.36);
    color: white;
}

.btn-info {
    background: var(--color-info);
    color: white;
    box-shadow: 0 4px 16px rgba(2,119,189,0.28);
}
.btn-info:hover {
    background: var(--color-info-mid);
    box-shadow: 0 6px 20px rgba(2,119,189,0.36);
    color: white;
}

/* ── Ghost / Outline ──────────────────────────────────────── */
.btn-ghost {
    background: var(--color-surface-raised);
    border: 1.5px solid var(--color-border);
    color: var(--color-text-label);
    box-shadow: var(--shadow-xs);
}
.btn-ghost:hover {
    background: var(--color-surface-sunken);
    border-color: var(--gray-400);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}

.btn-outline-primary {
    background: rgba(18,89,195,0.05);
    border: 1.5px solid rgba(18,89,195,0.45);
    color: var(--brand-primary);
}
.btn-outline-primary:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.btn-outline-danger {
    background: rgba(211,47,47,0.05);
    border: 1.5px solid rgba(211,47,47,0.45);
    color: var(--color-danger);
}
.btn-outline-danger:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
}

.btn-outline-success {
    background: rgba(46,125,50,0.05);
    border: 1.5px solid rgba(46,125,50,0.45);
    color: var(--color-success);
}
.btn-outline-success:hover {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

/* ── Icon Button — 44×44 circle, 20px icon ─────────────────── */
.btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px; height: 44px;
    padding: 0;
    border-radius: var(--radius-full);  /* 50% — perfect circl  e */
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
    font-size: 20px;                    /* 20px icon */
}

.btn-icon:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background: rgba(18,89,195,0.05);
    box-shadow: var(--shadow-sm);
}

.btn-icon.sm { width: 34px; height: 34px; font-size: 16px; }
.btn-icon.lg { width: 52px; height: 52px; font-size: 24px; }

/* ── Close Button ───────────────────────────────────────────── */
.btn-close {
    width: 32px; height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    color: #6c757d;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   7. FORMS — OneUI 7 Spec
   ============================================================
   Default input:  52px / 16px pad / 15px / 16px radius
   Small input:    42px / 14px pad / 14px / 14px radius
   Textarea:       auto min 80px / 14px pad / 15px / 16px radius
   ============================================================ */
.form-group {
    display: flex; flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.form-label {
    font-size: var(--text-xs);          /* 13px */
    font-weight: var(--font-medium);
    color: var(--color-text-label);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-relaxed);
}

.form-label .required {
    color: var(--color-danger);
    margin-left: 2px;
}

.form-control,
.form-select {
    width: 100%;
    height: var(--input-height);        /* 52px */
    padding: 0 16px;
    background: var(--color-surface-raised);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);    /* 16px */
    font-family: var(--font-sans);
    font-size: var(--text-sm);          /* 15px */
    font-weight: var(--font-normal);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
    transition: var(--transition-fast);
    outline: none;
    appearance: none;
}

.form-control::placeholder { color: var(--color-text-disabled); }

.form-control:hover { border-color: var(--gray-400); }

.form-control:focus,
.form-select:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 4px rgba(18,89,195,0.12);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 4px rgba(211,47,47,0.10);
}

.form-control.is-valid {
    border-color: var(--color-success);
    box-shadow: 0 0 0 4px rgba(46,125,50,0.10);
}

/* Textarea */
textarea.form-control {
    height: auto;
    min-height: 80px;
    padding: 14px 16px;
    resize: vertical;
    line-height: var(--leading-relaxed);
}

/* Small input — 42px / 14px pad / 14px / 14px radius */
.form-control.sm,
.form-control-sm {
    height: var(--input-height-sm);     /* 42px */
    padding: 0 14px;
    font-size: 0.875rem;                /* 14px */
    border-radius: var(--radius-lg);    /* 14px */
}

/* Select */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B6B6B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    padding-right: 44px;
    cursor: pointer;
}

/* Input Group */
.input-group {
    display: flex; align-items: stretch; position: relative;
}

.input-group .form-control {
    flex: 1;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.input-group .form-control:not(:first-child) {
    border-radius: 0; border-left: none;
}
.input-group .form-control:last-child {
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.input-group-text {
    display: flex; align-items: center;
    padding: 0 16px;
    background: var(--color-surface-sunken);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.input-group .btn {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* Search input — pill style */
.search-input-wrapper {
    position: relative;
    display: flex; align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 18px;
    color: var(--color-text-disabled);
    pointer-events: none;
    font-size: 18px;
}

.search-input-wrapper .form-control {
    padding-left: 48px;
    border-radius: var(--radius-pill);  /* pill search */
}

/* Form hints */
.form-hint       { font-size: var(--text-2xs); color: var(--color-text-tertiary); }
.form-hint.error { color: var(--color-danger); }

/* Form Check */
.form-check {
    display: flex; align-items: center;
    gap: var(--space-3); cursor: pointer;
}

.form-check-input {
    width: 20px; height: 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface-raised);
    transition: var(--transition-fast);
    appearance: none; cursor: pointer; flex-shrink: 0;
}

.form-check-input:checked {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: center; background-size: 12px;
}

.form-check-input[type="radio"]         { border-radius: var(--radius-full); }
.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='4' fill='%23fff'/%3e%3c/svg%3e");
    background-size: 10px;
}

.form-check-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-label);
    cursor: pointer; user-select: none;
}

/* ============================================================
   8. BADGES — pill shaped
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);  /* pill badge */
    font-size: var(--text-2xs);         /* 12px */
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    line-height: var(--leading-normal);
}

.badge-primary   { background: rgba(18,89,195,0.10);   color: var(--brand-primary);       }
.badge-success   { background: var(--color-success-bg); color: var(--color-success);        }
.badge-danger    { background: var(--color-danger-bg);  color: var(--color-danger);         }
.badge-warning   { background: var(--color-warning-bg); color: var(--color-warning);        }
.badge-info      { background: var(--color-info-bg);    color: var(--color-info);           }
.badge-secondary { background: var(--gray-150);         color: var(--gray-600);             }
.badge-light     { background: var(--color-surface-sunken); color: var(--color-text-label); }

.badge-solid-primary { background: var(--brand-primary);    color: white; }
.badge-solid-success { background: var(--color-success);    color: white; }
.badge-solid-danger  { background: var(--color-danger);     color: white; }
.badge-solid-warning { background: var(--color-warning-mid);color: white; }
.badge-solid-info    { background: var(--color-info);       color: white; }

.badge-dot         { width: 8px; height: 8px; border-radius: var(--radius-full); padding: 0; flex-shrink: 0; }
.badge-dot.primary { background: var(--brand-primary); }
.badge-dot.success { background: var(--color-success); }
.badge-dot.danger  { background: var(--color-danger);  }
.badge-dot.warning { background: var(--color-warning); }

/* ============================================================
   9. ALERTS
   ============================================================ */
.alert {
    display: flex; align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-2xl);   /* 20px */
    border-left: 4px solid transparent;
    font-size: var(--text-sm);
    animation: slide-down 0.25s var(--ease-out);
}

.alert i, .alert .alert-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.alert-content { flex: 1; }

.alert-title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: inherit;
}

.alert-primary { background: rgba(18,89,195,0.07);    border-color: var(--brand-primary); color: var(--brand-primary-deep); }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success);      }
.alert-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger);       }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning);      }
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info);         }

/* ============================================================
   10. MODALS
   ============================================================ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: var(--color-surface-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-overlay);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-5);
    animation: fade-in var(--duration-200) var(--ease-out);
}

.modal-dialog {
    width: 100%; max-width: 540px;
    animation: modal-slide-in var(--duration-300) var(--ease-spring);
    margin: 1.75rem auto;
}

/* Properly map to Bootstrap's native sizing classes */
@media (min-width: 576px) {
    .modal-sm { max-width: 400px; }
}
@media (min-width: 992px) {
    .modal-lg { max-width: 800px; }
}
@media (min-width: 1200px) {
    .modal-xl { max-width: 1140px; } /* Gives plenty of room for PDF side-by-side */
}
.modal-fullscreen { max-width: 96vw; }

.modal-content {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-3xl);   /* 24px */
    box-shadow: var(--shadow-2xl);
    /* Flex column so header/footer are sticky, body scrolls */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}

.modal-header {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0; /* never scroll — stays pinned at top */
}

.modal-header.modal-header-centered {
    justify-content: center;
    text-align: center;
    position: relative;
}

.modal-header.modal-header-centered .modal-title {
    flex: 0 1 auto;
    text-align: center;
}

.modal-header.modal-header-centered .btn-close {
    position: absolute;
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
}

.modal-title {
    font-size: var(--text-xl);          /* 20px / H3 */
    font-weight: var(--font-bold);
    color: var(--color-text-heading);
    margin: 0; flex: 1;
}

.modal-body {
    padding: var(--space-6);
    flex: 1 1 auto;          /* grows to fill, allows shrink */
    overflow-y: auto;        /* only the body scrolls */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}
.modal-body::-webkit-scrollbar       { width: 4px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

.modal-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface-muted);
    flex-shrink: 0; /* never scroll — stays pinned at bottom */
}

/* Bootstrap overrides */
.modal {
    backdrop-filter: blur(8px);
    overflow-x: hidden;
    overflow-y: auto !important; /* allow the outer backdrop to scroll on very small screens */
}
.modal .modal-content {
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-3xl) !important;
    box-shadow: var(--shadow-2xl) !important;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}
.modal .modal-header {
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-5) var(--space-6);
    flex-shrink: 0;
}
.modal .modal-footer {
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border-subtle);
    padding: var(--space-4) var(--space-6);
    flex-shrink: 0;
}
.modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
/* Native Bootstrap scrollable dialog variant */
.modal-dialog-scrollable { max-height: calc(100vh - 3.5rem); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; }
.modal-dialog-scrollable .modal-body    { overflow-y: auto; }
/* Fullscreen modal — manages own scroll */
.modal-fullscreen .modal-content { max-height: 100vh; border-radius: 0 !important; }
.modal-fullscreen .modal-body    { overflow-y: auto; }
/* Mobile: tighter margins */
@media (max-width: 768px) {
    .modal-dialog  { margin: var(--space-3); }
    .modal-content { max-height: calc(100vh - 1.5rem); }
}

/* ============================================================
   11. TABLES — OneUI 7 Spec
   ============================================================
   Row height: 48px | Cell padding: 10px 16px
   ============================================================ */
.table-wrapper {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);   /* 20px */
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);          /* 15px */
}

.table thead tr {
    background: var(--color-surface-sunken);
    border-bottom: 1.5px solid var(--color-border);
}

.table thead th {
    padding: 10px 16px;
    height: var(--table-row-height);    /* 48px */
    text-align: left;
    font-size: var(--text-2xs);         /* 12px */
    font-weight: var(--font-bold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    white-space: nowrap;
}

.table tbody tr {
    border-bottom: 1px solid var(--color-border-subtle);
    transition: var(--transition-fast);
}

.table tbody tr:last-child { border-bottom: none; }

.table tbody tr:hover { background: rgba(18,89,195,0.03); }

.table tbody td {
    padding: 10px 16px;
    height: var(--table-row-height);    /* 48px */
    color: var(--color-text-secondary);
    vertical-align: middle;
    font-size: var(--text-sm);
}

/* ============================================================
   12. DROPDOWNS
   ============================================================ */
.dropdown-menu,
.dropdown-menu.show {
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-2xl) !important;  /* 20px */
    box-shadow: var(--shadow-xl) !important;
    padding: var(--space-2) !important;
    min-width: 200px;
    animation: fade-up var(--duration-150) var(--ease-out);
}

.dropdown-item {
    display: flex; align-items: center;
    gap: var(--space-3) !important;
    padding: 10px var(--space-4) !important;
    border-radius: var(--radius-md) !important;   /* 12px */
    font-size: var(--text-sm) !important;         /* 15px */
    font-weight: var(--font-medium) !important;
    color: var(--color-text-label) !important;
    transition: var(--transition-fast) !important;
    cursor: pointer;
    margin-bottom: 2px !important;
}

.dropdown-item i {
    font-size: 18px;                    /* inline icon */
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.dropdown-item:hover {
    background: rgba(18,89,195,0.07) !important;
    color: var(--brand-primary) !important;
}

.dropdown-item:hover i { color: var(--brand-primary); }

.dropdown-item.danger:hover {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger) !important;
}
.dropdown-item.danger:hover i { color: var(--color-danger); }

.dropdown-divider {
    border-color: var(--color-border) !important;
    margin: var(--space-2) !important;
}

/* ============================================================
   13. PAGINATION — pill pages
   ============================================================ */
.pagination {
    display: flex; align-items: center;
    gap: var(--space-2);
    list-style: none; padding: 0; margin: 0;
    flex-wrap: wrap;
}

.page-item .page-link {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill) !important;
    border: 1.5px solid var(--color-border) !important;
    background: var(--color-surface-raised) !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    transition: var(--transition-fast) !important;
    cursor: pointer;
}

.page-item .page-link:hover {
    background: rgba(18,89,195,0.07) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    transform: translateY(-1px);
}

.page-item.active .page-link {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: white !important;
    box-shadow: var(--shadow-primary) !important;
}

.page-item.disabled .page-link {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* ============================================================
   14. NAVIGATION TABS — pill style
   ============================================================ */
.nav-tabs-glass {
    display: flex; align-items: center;
    gap: var(--space-2);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    box-shadow: var(--shadow-xs);
    overflow-x: auto; scrollbar-width: none;
    flex-wrap: nowrap;
}
.nav-tabs-glass::-webkit-scrollbar { display: none; }

.nav-tab {
    display: inline-flex; align-items: center;
    gap: var(--space-2);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
}

.nav-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-sunken);
}

.nav-tab.active {
    background: var(--brand-primary);
    color: white;
    box-shadow: var(--shadow-primary);
}

/* ============================================================
   15. TOAST NOTIFICATIONS
   ============================================================
   Two patterns:
   A) Custom: .toast.toast-success / danger / etc.
   B) Bootstrap: .toast + .toast-header / .toast-body
                 + .bg-*-subtle modifiers
   ============================================================ */

/* Container */
.toast-container {
    position: fixed;
    bottom: var(--space-6); right: var(--space-6);
    z-index: var(--z-toast);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    max-width: 360px; width: 100%;
    pointer-events: none;
}

/* Base shell */
.toast {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);   /* 20px */
    box-shadow: var(--shadow-lg);
    overflow: hidden; position: relative;
    pointer-events: all;
    min-width: 300px;
}

/* Left accent stripe */
.toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: var(--radius-full) 0 0 var(--radius-full);
}

/* ── A. Custom icon-toast ────────────────────────────────── */
.toast:not(:has(.toast-header)) {
    display: flex; align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    animation: toast-in var(--duration-300) var(--ease-spring);
}

.toast-success::before { background: var(--color-success); }
.toast-danger::before  { background: var(--color-danger);  }
.toast-warning::before { background: var(--color-warning); }
.toast-info::before    { background: var(--brand-primary); }

.toast-icon {
    font-size: 20px; flex-shrink: 0; margin-top: 1px;
}

.toast-success .toast-icon { color: var(--color-success); }
.toast-danger  .toast-icon { color: var(--color-danger);  }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-info    .toast-icon { color: var(--brand-primary); }

.toast-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
}

.toast-message {
    font-size: var(--text-2xs);
    color: var(--color-text-tertiary);
    margin-top: 3px;
    line-height: var(--leading-relaxed);
}

/* ── B. Bootstrap overrides ──────────────────────────────── */
.toast .toast-header {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 10px var(--space-5);
    background: transparent;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.toast .toast-header .btn-close {
    margin-left: auto;
    width: 24px; height: 24px;
    font-size: 12px; opacity: 0.45;
    transition: opacity var(--duration-150) var(--ease-in-out);
}
.toast .toast-header .btn-close:hover { opacity: 1; }

.toast .toast-body {
    padding: 10px var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* Colour variants */
.toast.bg-success-subtle {
    background: var(--color-success-bg) !important;
    border-color: rgba(46,125,50,0.25) !important;
}
.toast.bg-success-subtle::before { background: var(--color-success); }
.toast.bg-success-subtle .toast-header {
    background: rgba(46,125,50,0.08) !important;
    color: var(--color-success);
    border-bottom-color: rgba(46,125,50,0.15) !important;
}

.toast.bg-danger-subtle {
    background: var(--color-danger-bg) !important;
    border-color: rgba(211,47,47,0.25) !important;
}
.toast.bg-danger-subtle::before { background: var(--color-danger); }
.toast.bg-danger-subtle .toast-header {
    background: rgba(211,47,47,0.08) !important;
    color: var(--color-danger);
    border-bottom-color: rgba(211,47,47,0.15) !important;
}

.toast.bg-warning-subtle {
    background: var(--color-warning-bg) !important;
    border-color: rgba(230,81,0,0.25) !important;
}
.toast.bg-warning-subtle::before { background: var(--color-warning); }
.toast.bg-warning-subtle .toast-header {
    background: rgba(230,81,0,0.08) !important;
    color: var(--color-warning);
    border-bottom-color: rgba(230,81,0,0.15) !important;
}

.toast.bg-info-subtle,
.toast.bg-primary-subtle {
    background: var(--color-info-bg) !important;
    border-color: rgba(18,89,195,0.25) !important;
}
.toast.bg-info-subtle::before,
.toast.bg-primary-subtle::before { background: var(--brand-primary); }
.toast.bg-info-subtle .toast-header,
.toast.bg-primary-subtle .toast-header {
    background: rgba(18,89,195,0.08) !important;
    color: var(--brand-primary);
    border-bottom-color: rgba(18,89,195,0.15) !important;
}

/* Animations */
.toast.showing { animation: toast-in  var(--duration-300) var(--ease-spring); }
.toast.hide    { animation: toast-out var(--duration-200) var(--ease-in) forwards; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0)    scale(1);    }
    to   { opacity: 0; transform: translateX(40px) scale(0.95); }
}

/* Dark mode */
body.dark-theme .toast.bg-success-subtle {
    background: rgba(46,125,50,0.15) !important;
    border-color: rgba(46,125,50,0.25) !important;
}
body.dark-theme .toast.bg-success-subtle .toast-header { color: #81c784; background: rgba(46,125,50,0.12) !important; }

body.dark-theme .toast.bg-danger-subtle {
    background: rgba(239,83,80,0.15) !important;
    border-color: rgba(239,83,80,0.25) !important;
}
body.dark-theme .toast.bg-danger-subtle .toast-header  { color: #ef9a9a; background: rgba(239,83,80,0.12) !important; }

body.dark-theme .toast.bg-warning-subtle {
    background: rgba(230,81,0,0.15) !important;
    border-color: rgba(230,81,0,0.25) !important;
}
body.dark-theme .toast.bg-warning-subtle .toast-header { color: #ffcc80; background: rgba(230,81,0,0.12) !important; }

body.dark-theme .toast.bg-info-subtle,
body.dark-theme .toast.bg-primary-subtle {
    background: rgba(78,143,245,0.15) !important;
    border-color: rgba(78,143,245,0.25) !important;
}
body.dark-theme .toast.bg-info-subtle .toast-header,
body.dark-theme .toast.bg-primary-subtle .toast-header { color: #90caf9; background: rgba(78,143,245,0.12) !important; }

/* Responsive */
@media (max-width: 576px) {
    .toast-container {
        left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
        max-width: none; width: auto;
    }
    .toast { min-width: unset; width: 100%; }
}

/* ============================================================
   16. LOADING STATES
   ============================================================ */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-max);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--space-4);
}

.spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--brand-primary);
    border-radius: var(--radius-full);
    animation: spin var(--duration-500) linear infinite;
}

.spinner-sm { width: 20px; height: 20px; border-width: 2px; }
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }

.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-150) 25%,
        var(--gray-200)  50%,
        var(--gray-150) 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: shimmer 1.5s infinite;
}

/* ============================================================
   17. PAGE HEADER
   ============================================================ */
.page-header {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);   /* 20px */
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-xs);
    display: flex; align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.page-title {
    font-size: var(--text-3xl);         /* 32px / H1 */
    font-weight: var(--font-bold);
    color: var(--color-text-heading);
    margin: 0;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-h1);
}

.page-subtitle {
    font-size: var(--text-xs);          /* 13px */
    color: var(--color-text-tertiary);
    margin: var(--space-1) 0 0;
}

.page-actions {
    display: flex; align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ============================================================
   18. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
    background: var(--gray-300);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ============================================================
   19. UTILITIES
   ============================================================ */

/* Display */
.d-none        { display: none !important; }
.d-flex        { display: flex !important; }
.d-grid        { display: grid !important; }
.d-block       { display: block !important; }
.d-inline      { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flex */
.flex-col      { flex-direction: column !important; }
.flex-row      { flex-direction: row !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-1        { flex: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.items-start   { align-items: flex-start !important; }
.items-center  { align-items: center !important; }
.items-end     { align-items: flex-end !important; }
.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }

/* Gap */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }

/* Padding */
.p-0  { padding: 0 !important; }
.p-3  { padding: var(--space-3) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-5  { padding: var(--space-5) !important; }
.p-6  { padding: var(--space-6) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }

/* Margin */
.m-0   { margin: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-5  { margin-bottom: var(--space-5) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mt-0  { margin-top: 0 !important; }
.mt-3  { margin-top: var(--space-3) !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Text */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

.text-2xs { font-size: var(--text-2xs)  !important; }
.text-xs  { font-size: var(--text-xs)   !important; }
.text-sm  { font-size: var(--text-sm)   !important; }
.text-base{ font-size: var(--text-base) !important; }
.text-lg  { font-size: var(--text-lg)   !important; }
.text-xl  { font-size: var(--text-xl)   !important; }
.text-2xl { font-size: var(--text-2xl)  !important; }
.text-3xl { font-size: var(--text-3xl)  !important; }

.fw-normal   { font-weight: var(--font-normal)   !important; }
.fw-medium   { font-weight: var(--font-medium)   !important; }
.fw-semibold { font-weight: var(--font-semibold) !important; }
.fw-bold     { font-weight: var(--font-bold)     !important; }

.uppercase { text-transform: uppercase !important; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Color */
.text-primary   { color: var(--brand-primary)       !important; }
.text-success   { color: var(--color-success)        !important; }
.text-danger    { color: var(--color-danger)         !important; }
.text-warning   { color: var(--color-warning)        !important; }
.text-info      { color: var(--color-info)           !important; }
.text-muted     { color: var(--color-text-tertiary)  !important; }
.text-white     { color: white                       !important; }
.text-dark      { color: var(--color-text-primary)   !important; }

/* Border Radius */
.rounded-sm   { border-radius: var(--radius-sm)   !important; }
.rounded-md   { border-radius: var(--radius-md)   !important; }
.rounded-lg   { border-radius: var(--radius-lg)   !important; }
.rounded-xl   { border-radius: var(--radius-xl)   !important; }
.rounded-2xl  { border-radius: var(--radius-2xl)  !important; }
.rounded-3xl  { border-radius: var(--radius-3xl)  !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Shadow */
.shadow-none { box-shadow: none             !important; }
.shadow-xs   { box-shadow: var(--shadow-xs) !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow-md   { box-shadow: var(--shadow-md) !important; }
.shadow-lg   { box-shadow: var(--shadow-lg) !important; }
.shadow-xl   { box-shadow: var(--shadow-xl) !important; }

/* Misc */
.overflow-hidden   { overflow: hidden !important; }
.overflow-auto     { overflow: auto !important; }
.overflow-y-auto   { overflow-y: auto !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.w-full            { width: 100% !important; }
.h-full            { height: 100% !important; }
.cursor-pointer    { cursor: pointer !important; }
.select-none       { user-select: none !important; }

.divider {
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    margin: var(--space-4) 0;
}

/* ============================================================
   20. ANIMATIONS
   ============================================================ */
@keyframes fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-slide-in {
    from { opacity: 0; transform: scale(0.94) translateY(-16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(18,89,195,0.40); }
    70%  { box-shadow: 0 0 0 10px rgba(18,89,195,0); }
    100% { box-shadow: 0 0 0 0 rgba(18,89,195,0); }
}

.animate-fade-in { animation: fade-in  var(--duration-300) var(--ease-out); }
.animate-fade-up { animation: fade-up  var(--duration-300) var(--ease-out); }
.animate-spin    { animation: spin     var(--duration-500) linear infinite; }

/* ============================================================
   21. FOCUS & ACCESSIBILITY
   ============================================================ */
:focus-visible {
    outline: 2.5px solid var(--brand-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   22. LAYOUT
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container-2xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container-fluid { width: 100%; padding: 0 var(--space-6); }

/* ============================================================
   23. DARK THEME
   ============================================================
   OneUI Dark: #1C1C1C bg / #2C2C2C surface / #4E8FF5 primary
               #F0F0F0 text / #9E9E9E secondary / #3A3A3A border
   ============================================================ */
body.dark-theme {
    color-scheme: dark;

    --brand-primary:       #4E8FF5;
    --brand-primary-hover: #6ba3f7;
    --brand-primary-deep:  #3b82f6;

    --color-danger:        #EF5350;
    --color-danger-mid:    #ff6b6b;

    --color-page-bg:          #1C1C1C;
    --color-surface:          #2C2C2C;
    --color-surface-raised:   #2C2C2C;
    --color-surface-sunken:   #1C1C1C;
    --color-surface-muted:    #242424;
    --color-surface-overlay:  rgba(0, 0, 0, 0.65);

    --color-border:           #3A3A3A;
    --color-border-subtle:    rgba(58, 58, 58, 0.75);
    --color-border-focus:     #4E8FF5;

    --color-text-primary:     #F0F0F0;
    --color-text-secondary:   #9E9E9E;
    --color-text-tertiary:    #6B6B6B;
    --color-text-disabled:    #4A4A4A;
    --color-text-inverse:     #1A1A1A;
    --color-text-heading:     #F0F0F0;
    --color-text-label:       #C8C8C8;

    /* Darker semantic bg tints */
    --color-success-bg:  rgba(46,125,50,0.18);
    --color-danger-bg:   rgba(239,83,80,0.18);
    --color-warning-bg:  rgba(230,81,0,0.18);
    --color-info-bg:     rgba(2,119,189,0.18);

    /* Deeper shadows */
    --shadow-xs:  0 1px 4px rgba(0,0,0,0.30);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.36);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.42);
    --shadow-lg:  0 8px 28px rgba(0,0,0,0.48);
    --shadow-xl:  0 16px 48px rgba(0,0,0,0.55);
    --shadow-2xl: 0 24px 64px rgba(0,0,0,0.65);
    --shadow-primary: 0 4px 16px rgba(78,143,245,0.35);
}

body.dark-theme .navbar {
    background: rgba(44, 44, 44, 0.96);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

body.dark-theme .form-control,
body.dark-theme .form-select {
    background: #333333;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
body.dark-theme .form-control::placeholder { color: var(--color-text-disabled); }
body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus {
    background: #333333;
    box-shadow: 0 0 0 4px rgba(78,143,245,0.18);
}

body.dark-theme .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239E9E9E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body.dark-theme .dropdown-menu,
body.dark-theme .dropdown-menu.show {
    background: #2C2C2C !important;
    border-color: var(--color-border) !important;
}

body.dark-theme .alert-success { color: #81c784; }
body.dark-theme .alert-danger  { color: #ef9a9a; }
body.dark-theme .alert-warning { color: #ffcc80; }
body.dark-theme .alert-info    { color: #81d4fa; }
body.dark-theme .alert-primary { color: #90caf9; }

/* ============================================================
   24. NOTIFICATIONS
   ============================================================ */

/* Bell */
@keyframes bell-ring {
    0%, 100% { transform: rotate(0deg);   }
    15%       { transform: rotate(14deg);  }
    30%       { transform: rotate(-12deg); }
    45%       { transform: rotate(9deg);   }
    60%       { transform: rotate(-6deg);  }
    75%       { transform: rotate(3deg);   }
}

.notification-bell.bell-ring i,
.notification-bell.bell-ring .bell-icon {
    display: inline-block;
    animation: bell-ring 0.6s var(--ease-in-out);
    transform-origin: top center;
}

@keyframes badge-pop {
    0%   { transform: scale(1);    }
    40%  { transform: scale(1.40); }
    70%  { transform: scale(0.88); }
    100% { transform: scale(1);    }
}

.notification-badge.badge-pop {
    animation: badge-pop 0.4s var(--ease-spring);
}

/* Modal */
#notificationsModal .modal-content {
    border-radius: var(--radius-3xl) !important;
}
#notificationsModal .modal-header { padding: var(--space-5) var(--space-6); }
#notificationsModal .modal-title  {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-heading);
}
#notificationsModal .modal-body {
    padding: var(--space-4);
    max-height: 60vh;
    overflow-y: auto;
    background: var(--color-surface-sunken);
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}
#notificationsModal .modal-body::-webkit-scrollbar       { width: 4px; }
#notificationsModal .modal-body::-webkit-scrollbar-track { background: transparent; }
#notificationsModal .modal-body::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
}
#notificationsModal .modal-footer { padding: var(--space-3) var(--space-6); }

/* Item */
@keyframes notif-slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0);    }
}

.notification-item {
    display: flex; align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-bottom: var(--space-2);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid transparent;
    border-radius: var(--radius-2xl);   /* 20px */
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: var(--transition-base);
    animation: notif-slide-in 0.3s var(--ease-out);
}

.notification-item:last-child { margin-bottom: 0; }

.notification-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border);
}

.notification-item.notification-unread {
    border-left-color: var(--brand-primary);
    background: rgba(18,89,195,0.03);
}
.notification-item.notification-unread:hover { background: rgba(18,89,195,0.06); }

.notification-item.notification-read { opacity: 0.70; }
.notification-item.notification-read:hover { opacity: 1; }

.notification-item-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    background: var(--color-surface-sunken);
    color: var(--color-text-tertiary);
}

.notification-item-icon.primary { background: rgba(18,89,195,0.10);   color: var(--brand-primary);   }
.notification-item-icon.success { background: var(--color-success-bg); color: var(--color-success);   }
.notification-item-icon.danger  { background: var(--color-danger-bg);  color: var(--color-danger);    }
.notification-item-icon.warning { background: var(--color-warning-bg); color: var(--color-warning);   }
.notification-item-icon.info    { background: var(--color-info-bg);    color: var(--color-info);      }

.notification-item-body { flex: 1; min-width: 0; }

.notification-item-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0 0 3px;
    line-height: var(--leading-normal);
    display: flex; align-items: center; gap: var(--space-2);
}

.notification-item-title .unread-dot {
    width: 7px; height: 7px;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    flex-shrink: 0;
}

.notification-item-text {
    font-size: var(--text-2xs);
    color: var(--color-text-secondary);
    margin: 0 0 4px;
    line-height: var(--leading-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item-meta {
    font-size: var(--text-2xs);
    color: var(--color-text-tertiary);
    display: flex; align-items: center; gap: var(--space-2);
}

.notification-item .notification-actions {
    opacity: 0;
    transition: opacity var(--duration-150) var(--ease-in-out);
    flex-shrink: 0;
}
.notification-item:hover .notification-actions { opacity: 1; }

.mark-read-btn {
    font-size: var(--text-2xs);
    font-weight: var(--font-medium);
    color: var(--brand-primary);
    background: none; border: none; padding: 0;
    cursor: pointer;
    transition: color var(--duration-150) var(--ease-in-out);
    text-decoration: none;
}
.mark-read-btn:hover { color: var(--brand-primary-hover); text-decoration: underline; }

/* Filter tabs */
.notification-filters {
    display: flex; gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.notification-filters::-webkit-scrollbar { display: none; }

.notification-filter-btn {
    display: inline-flex; align-items: center;
    gap: var(--space-2);
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-pill);  /* pill filter tabs */
    border: 1.5px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap; flex-shrink: 0;
}

.notification-filter-btn:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
}

.notification-filter-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
    box-shadow: var(--shadow-primary);
}

.notification-filter-btn .filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    font-size: 10px; font-weight: var(--font-bold);
    background: var(--color-danger);
    color: white; line-height: 1;
}
.notification-filter-btn.active .filter-count {
    background: rgba(255,255,255,0.28);
}

/* Empty state */
.notification-empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-5);
    text-align: center;
    background: var(--color-surface-sunken);
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-2xl);
}

.notification-empty-state .empty-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-full);
    background: var(--gray-150);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: var(--color-text-disabled);
}

.notification-empty-state .empty-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.notification-empty-state p {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin: 0;
}

/* Dark mode */
body.dark-theme .notification-item {
    background: var(--color-surface-raised);
    border-color: var(--color-border-subtle);
}
body.dark-theme .notification-item:hover {
    background: #333333;
    border-color: var(--color-border);
}
body.dark-theme .notification-item.notification-unread {
    background: rgba(78,143,245,0.06);
    border-left-color: var(--brand-primary);
}
body.dark-theme .notification-badge {
    border-color: var(--color-surface-raised);
}
body.dark-theme #notificationsModal .modal-body {
    background: var(--color-surface-sunken);
}
body.dark-theme .notification-empty-state {
    background: var(--color-surface-sunken);
    border-color: var(--color-border);
}

/* Responsive */
@media (max-width: 576px) {
    #notificationsModal .modal-dialog {
        margin: var(--space-3);
        max-width: calc(100% - var(--space-6));
    }
    #notificationsModal .modal-body { padding: var(--space-3); max-height: 70vh; }
    .notification-item { padding: var(--space-3); }
    .notification-item .notification-actions { opacity: 1; }
    .notification-item .dropdown-menu {
        position: fixed !important;
        top: auto !important; bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        transform: none !important;
        border-radius: var(--radius-3xl) var(--radius-3xl) 0 0 !important;
        margin: 0; max-width: 100%;
        padding: var(--space-3) !important;
    }
}

/* ============================================================
   25. RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 768px) {
    :root { --navbar-height: 56px; }

    .navbar {
        padding: 0 var(--space-4);
        border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    }

    .page-header {
        padding: var(--space-4) var(--space-5);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .page-title { font-size: var(--text-2xl); }

    .modal-dialog      { max-width: 100%; margin: var(--space-3); }
    .modal-content     { border-radius: var(--radius-2xl) !important; }
    .card, .card-lg    { border-radius: var(--radius-xl); }
    .card-body         { padding: var(--space-4); }

    .toast-container {
        bottom: var(--space-4); right: var(--space-4); left: var(--space-4);
        max-width: 100%;
    }

    .container { padding: 0 var(--space-4); }
    .hidden-mobile { display: none !important; }
    .show-mobile   { display: flex !important; }
}

@media (max-width: 480px) {
    .table-wrapper { overflow-x: auto; }
    .stat-value    { font-size: var(--text-2xl); }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
}

/* ============================================================
   26. PRINT
   ============================================================ */
@media print {
    .navbar, .toast-container, .loading-overlay,
    .btn-close, .no-print { display: none !important; }

    body {
        background: white !important;
        color: black !important;
        padding: 0 !important;
        font-size: 14px !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        border-radius: 8px !important;
    }
}