/*
 * ═══════════════════════════════════════════════════════════════════
 *  NhaBex App v3 — Material Design 3 Design Tokens
 *  app-v2/assets/css/md3-tokens.css
 *
 *  Seed color: #02A586 (NhaBex green)
 *  Mapped from NhaBex --nb-* tokens to MD3 --md-sys-* system
 *  Loaded BEFORE md3-components.css
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─── 1. COLOR SYSTEM (Light Theme) ───────────────────────────── */
:root {

  /* ── Primary (NhaBex Green #02A586) ── */
  --md-sys-color-primary:              #02A586;
  --md-sys-color-on-primary:           #ffffff;
  --md-sys-color-primary-container:    #EEF4F3;
  --md-sys-color-on-primary-container: #0D503F;
  --md-sys-color-primary-hover:        #2FA88D;
  --md-sys-color-primary-10:           rgba(2, 165, 134, 0.10);
  --md-sys-color-primary-20:           rgba(2, 165, 134, 0.20);

  /* ── Secondary (Muted Teal) ── */
  --md-sys-color-secondary:              #4B8B7A;
  --md-sys-color-on-secondary:           #ffffff;
  --md-sys-color-secondary-container:    #D1ECE5;
  --md-sys-color-on-secondary-container: #0A2E24;

  /* ── Tertiary (NhaBex Blue #3498db) ── */
  --md-sys-color-tertiary:              #3498db;
  --md-sys-color-on-tertiary:           #ffffff;
  --md-sys-color-tertiary-container:    #e8f4fb;
  --md-sys-color-on-tertiary-container: #003258;

  /* ── Error (NhaBex Red #e74c3c) ── */
  --md-sys-color-error:                #e74c3c;
  --md-sys-color-on-error:             #ffffff;
  --md-sys-color-error-container:      #fde8e8;
  --md-sys-color-on-error-container:   #93000a;

  /* ── Warning (NhaBex Orange #f39c12) ── */
  --md-sys-color-warning:              #f39c12;
  --md-sys-color-on-warning:           #ffffff;
  --md-sys-color-warning-container:    #fef3cd;
  --md-sys-color-on-warning-container: #7a4e00;

  /* ── Success (NhaBex Green Dark #2FA88D) ── */
  --md-sys-color-success:              #2FA88D;
  --md-sys-color-on-success:           #ffffff;
  --md-sys-color-success-container:    #D1ECE5;
  --md-sys-color-on-success-container: #0A2E24;

  /* ── Surface & Background (clean white, brand text #232323) ── */
  --md-sys-color-surface:                  #FFFFFF;
  --md-sys-color-on-surface:               #232323;
  --md-sys-color-on-surface-variant:       #6B7280;
  --md-sys-color-surface-dim:              #E8EAED;
  --md-sys-color-surface-bright:           #FFFFFF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low:    #FAFBFC;
  --md-sys-color-surface-container:        #F8FAFB;
  --md-sys-color-surface-container-high:   #F1F3F5;
  --md-sys-color-surface-container-highest:#E8EAED;
  --md-sys-color-inverse-surface:          #1F2933;
  --md-sys-color-inverse-on-surface:       #F1F5F9;
  --md-sys-color-inverse-primary:          #02A586;

  /* ── Outline (neutral) ── */
  --md-sys-color-outline:              #9CA3AF;
  --md-sys-color-outline-variant:      #E5E7EB;

  /* ── Surface Variant ── */
  --md-sys-color-surface-variant:     #E5E7EB;

  /* ── Primary RGB (for rgba() usage) ── */
  --md-sys-color-primary-rgb:         60, 189, 161;

  /* ── Scrim & Shadow ── */
  --md-sys-color-scrim:               rgba(0, 0, 0, 0.32);
  --md-sys-color-shadow:              rgba(0, 0, 0, 0.08);

  /* ── Accent Highlight (vivid green for gradients / CTAs) ── */
  --md-sys-color-accent-vivid:         #49D2B6;
  --md-sys-color-accent-vivid-light:   #6EDCC8;

  /* ── Tech Blue Accent ── */
  --md-sys-color-accent-blue:           #2563EB;
  --md-sys-color-accent-blue-container: #DBEAFE;

  /* ── Flat solid presets (replaces gradients for modern flat look) ── */
  --md-sys-gradient-primary:   var(--md-sys-color-primary);
  --md-sys-gradient-primary-r: var(--md-sys-color-primary);
  --md-sys-gradient-icon-bg:   var(--md-sys-color-primary-container);

  /* ── Company color override (injected by PHP) ── */
  --company-color:                     var(--md-sys-color-primary);
  --md-sys-color-company:              var(--company-color);
  --md-sys-color-on-company:           #ffffff;
}


/* ─── 2. TYPOGRAPHY SYSTEM ─────────────────────────────────────── */
:root {
  /* ── Font Family ── */
  --md-sys-typescale-font: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ── Display (Roboto Light per brand manual) ── */
  --md-sys-typescale-display-large-size:   2.25rem;     /* 36px */
  --md-sys-typescale-display-large-weight: 300;
  --md-sys-typescale-display-large-height: 2.75rem;     /* 44px */
  --md-sys-typescale-display-large-tracking: 0;

  --md-sys-typescale-display-medium-size:   1.75rem;    /* 28px */
  --md-sys-typescale-display-medium-weight: 300;
  --md-sys-typescale-display-medium-height: 2.25rem;

  --md-sys-typescale-display-small-size:    1.5rem;     /* 24px */
  --md-sys-typescale-display-small-weight:  300;
  --md-sys-typescale-display-small-height:  2rem;

  /* ── Headline (Roboto Light per brand manual) ── */
  --md-sys-typescale-headline-large-size:   2rem;       /* 32px */
  --md-sys-typescale-headline-large-weight: 300;
  --md-sys-typescale-headline-large-height: 2.5rem;

  --md-sys-typescale-headline-medium-size:  1.75rem;    /* 28px */
  --md-sys-typescale-headline-medium-weight:300;
  --md-sys-typescale-headline-medium-height:2.25rem;

  --md-sys-typescale-headline-small-size:   1.5rem;     /* 24px */
  --md-sys-typescale-headline-small-weight: 300;
  --md-sys-typescale-headline-small-height: 2rem;

  /* ── Title (Roboto Medium per brand manual) ── */
  --md-sys-typescale-title-large-size:      1.375rem;   /* 22px */
  --md-sys-typescale-title-large-weight:    500;
  --md-sys-typescale-title-large-height:    1.75rem;

  --md-sys-typescale-title-medium-size:     1rem;       /* 16px */
  --md-sys-typescale-title-medium-weight:   500;
  --md-sys-typescale-title-medium-height:   1.5rem;
  --md-sys-typescale-title-medium-tracking: 0.15px;

  --md-sys-typescale-title-small-size:      0.875rem;   /* 14px */
  --md-sys-typescale-title-small-weight:    500;
  --md-sys-typescale-title-small-height:    1.25rem;
  --md-sys-typescale-title-small-tracking:  0.1px;

  /* ── Body ── */
  --md-sys-typescale-body-large-size:       1rem;       /* 16px */
  --md-sys-typescale-body-large-weight:     400;
  --md-sys-typescale-body-large-height:     1.5rem;
  --md-sys-typescale-body-large-tracking:   0.5px;

  --md-sys-typescale-body-medium-size:      0.875rem;   /* 14px */
  --md-sys-typescale-body-medium-weight:    400;
  --md-sys-typescale-body-medium-height:    1.25rem;
  --md-sys-typescale-body-medium-tracking:  0.25px;

  --md-sys-typescale-body-small-size:       0.75rem;    /* 12px */
  --md-sys-typescale-body-small-weight:     400;
  --md-sys-typescale-body-small-height:     1rem;
  --md-sys-typescale-body-small-tracking:   0.4px;

  /* ── Label (Roboto Medium per brand manual) ── */
  --md-sys-typescale-label-large-size:      0.875rem;   /* 14px */
  --md-sys-typescale-label-large-weight:    500;
  --md-sys-typescale-label-large-height:    1.25rem;
  --md-sys-typescale-label-large-tracking:  0.1px;

  --md-sys-typescale-label-medium-size:     0.75rem;    /* 12px */
  --md-sys-typescale-label-medium-weight:   500;
  --md-sys-typescale-label-medium-height:   1rem;
  --md-sys-typescale-label-medium-tracking: 0.5px;

  --md-sys-typescale-label-small-size:      0.6875rem;  /* 11px */
  --md-sys-typescale-label-small-weight:    500;
  --md-sys-typescale-label-small-height:    1rem;
  --md-sys-typescale-label-small-tracking:  0.5px;
}


/* ─── 3. ELEVATION SYSTEM ──────────────────────────────────────── */
:root {
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --md-sys-elevation-2: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --md-sys-elevation-3: 0 2px 6px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --md-sys-elevation-4: 0 2px 8px rgba(0,0,0,0.10), 0 6px 16px rgba(0,0,0,0.06);
  --md-sys-elevation-5: 0 4px 12px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.06);
  --md-sys-elevation-premium: 0 1px 3px rgba(0,0,0,0.04);
}


/* ─── 4. SHAPE SYSTEM ──────────────────────────────────────────── */
:root {
  --md-sys-shape-none:         0;
  --md-sys-shape-extra-small:  4px;
  --md-sys-shape-small:        8px;
  --md-sys-shape-medium:       12px;
  --md-sys-shape-large:        16px;
  --md-sys-shape-extra-large:  28px;
  --md-sys-shape-full:         9999px;
  --md-sys-shape-premium:      16px;
}


/* ─── 5. MOTION SYSTEM ─────────────────────────────────────────── */
:root {
  /* ── Duration ── */
  --md-sys-motion-duration-short-1: 50ms;
  --md-sys-motion-duration-short-2: 100ms;
  --md-sys-motion-duration-short-3: 150ms;
  --md-sys-motion-duration-short-4: 200ms;
  --md-sys-motion-duration-medium-1: 250ms;
  --md-sys-motion-duration-medium-2: 300ms;
  --md-sys-motion-duration-medium-3: 350ms;
  --md-sys-motion-duration-medium-4: 400ms;
  --md-sys-motion-duration-long-1: 450ms;
  --md-sys-motion-duration-long-2: 500ms;
  --md-sys-motion-duration-long-3: 550ms;
  --md-sys-motion-duration-long-4: 600ms;
  --md-sys-motion-duration-extra-long: 800ms;

  /* ── Easing ── */
  --md-sys-motion-easing-standard:         cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decel:   cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accel:   cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-emphasized:       cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-legacy:           cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── 6. SPACING SYSTEM ────────────────────────────────────────── */
:root {
  --md-sys-spacing-0:  0;
  --md-sys-spacing-1:  4px;
  --md-sys-spacing-2:  8px;
  --md-sys-spacing-3:  12px;
  --md-sys-spacing-4:  16px;
  --md-sys-spacing-5:  20px;
  --md-sys-spacing-6:  24px;
  --md-sys-spacing-7:  28px;
  --md-sys-spacing-8:  32px;
  --md-sys-spacing-9:  36px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-14: 56px;
  --md-sys-spacing-16: 64px;
  --md-sys-spacing-20: 80px;
}


/* ─── 7. LAYOUT ────────────────────────────────────────────────── */
:root {
  --md-sys-layout-top-app-bar-h:  56px;
  --md-sys-layout-bottom-nav-h:   64px;
  --md-sys-layout-fab-size:       56px;
  --md-sys-layout-fab-size-small: 40px;
  --md-sys-layout-fab-size-large: 96px;
  --md-sys-layout-max-width:      480px;   /* mobile-centric app */
  --md-sys-layout-gutter:         16px;
}


/* ─── 8. ICON SIZES ────────────────────────────────────────────── */
:root {
  --md-sys-icon-size-sm:   18px;
  --md-sys-icon-size-md:   24px;
  --md-sys-icon-size-lg:   36px;
  --md-sys-icon-size-xl:   48px;
}


/* ─── 9. Z-INDEX LAYERS ───────────────────────────────────────── */
:root {
  --md-sys-z-default:       1;
  --md-sys-z-sticky:        100;
  --md-sys-z-app-bar:       200;
  --md-sys-z-bottom-nav:    200;
  --md-sys-z-drawer:        300;
  --md-sys-z-bottom-sheet:  400;
  --md-sys-z-dialog:        500;
  --md-sys-z-snackbar:      600;
  --md-sys-z-fab:           700;
  --md-sys-z-tooltip:       800;
  --md-sys-z-scrim:         900;
}


/* ─── 10. BASE RESET & TYPOGRAPHY ──────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--md-sys-typescale-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  line-height: var(--md-sys-typescale-body-medium-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── Typography Classes ── */
.md3-display-large {
  font-size: var(--md-sys-typescale-display-large-size);
  font-weight: var(--md-sys-typescale-display-large-weight);
  line-height: var(--md-sys-typescale-display-large-height);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}
.md3-display-medium {
  font-size: var(--md-sys-typescale-display-medium-size);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  line-height: var(--md-sys-typescale-display-medium-height);
}
.md3-display-small {
  font-size: var(--md-sys-typescale-display-small-size);
  font-weight: var(--md-sys-typescale-display-small-weight);
  line-height: var(--md-sys-typescale-display-small-height);
}
.md3-headline-large {
  font-size: var(--md-sys-typescale-headline-large-size);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  line-height: var(--md-sys-typescale-headline-large-height);
}
.md3-headline-medium {
  font-size: var(--md-sys-typescale-headline-medium-size);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  line-height: var(--md-sys-typescale-headline-medium-height);
}
.md3-headline-small {
  font-size: var(--md-sys-typescale-headline-small-size);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  line-height: var(--md-sys-typescale-headline-small-height);
}
.md3-title-large {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: var(--md-sys-typescale-title-large-weight);
  line-height: var(--md-sys-typescale-title-large-height);
}
.md3-title-medium {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  line-height: var(--md-sys-typescale-title-medium-height);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.md3-title-small {
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--md-sys-typescale-title-small-weight);
  line-height: var(--md-sys-typescale-title-small-height);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
}
.md3-body-large {
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: var(--md-sys-typescale-body-large-weight);
  line-height: var(--md-sys-typescale-body-large-height);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
.md3-body-medium {
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  line-height: var(--md-sys-typescale-body-medium-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.md3-body-small {
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: var(--md-sys-typescale-body-small-weight);
  line-height: var(--md-sys-typescale-body-small-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.md3-label-large {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  line-height: var(--md-sys-typescale-label-large-height);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.md3-label-medium {
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  line-height: var(--md-sys-typescale-label-medium-height);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
.md3-label-small {
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  line-height: var(--md-sys-typescale-label-small-height);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
}

/* ── Material Symbols base ── */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: var(--md-sys-icon-size-md);
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}
.material-symbols-rounded.icon-sm   { font-size: var(--md-sys-icon-size-sm); }
.material-symbols-rounded.icon-lg   { font-size: var(--md-sys-icon-size-lg); }
.material-symbols-rounded.icon-xl   { font-size: var(--md-sys-icon-size-xl); }
.material-symbols-rounded.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Color utility classes ── */
.md3-color-primary       { color: var(--md-sys-color-primary); }
.md3-color-secondary     { color: var(--md-sys-color-secondary); }
.md3-color-tertiary      { color: var(--md-sys-color-tertiary); }
.md3-color-error         { color: var(--md-sys-color-error); }
.md3-color-warning       { color: var(--md-sys-color-warning); }
.md3-color-success       { color: var(--md-sys-color-success); }
.md3-color-on-surface    { color: var(--md-sys-color-on-surface); }
.md3-color-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }

/* ── Responsive breakpoints (mobile-first) ── */
/* sm: 576px, md: 768px, lg: 1024px, xl: 1280px */