/* ═══════════════════════════════════════════════════════════════════════════
   GATE CONTROL SYSTEM — THEME.CSS
   Premas Biotech Pvt. Ltd. | IMT Manesar
   ─────────────────────────────────────────────────────────────────────────
   THIS IS THE ONLY FILE YOU NEED TO EDIT TO CHANGE LOOK & FEEL.
   All colors, fonts, shadows, border-radius, and spacing tokens live here.
   Both guard.html and hr-admin.html import this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME (default)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"],
:root {
  /* ── Brand ── */
  --color-teal:          #00C4B4;
  --color-teal-dark:     #00796B;
  --color-teal-dim:      rgba(0, 196, 180, 0.12);
  --color-teal-border:   rgba(0, 196, 180, 0.25);
  --color-teal-glow:     rgba(0, 196, 180, 0.08);

  --color-amber:         #FFB300;
  --color-amber-dark:    #F57F17;
  --color-amber-dim:     rgba(255, 179, 0, 0.12);
  --color-amber-border:  rgba(255, 179, 0, 0.25);

  --color-navy:          #1B2A4A;

  /* ── Status ── */
  --color-green:         #00E676;
  --color-green-dark:    #00C853;
  --color-green-dim:     rgba(0, 230, 118, 0.12);
  --color-green-border:  rgba(0, 230, 118, 0.25);

  --color-red:           #FF5252;
  --color-red-dark:      #D50000;
  --color-red-dim:       rgba(255, 82, 82, 0.12);
  --color-red-border:    rgba(255, 82, 82, 0.25);

  --color-blue:          #448AFF;
  --color-blue-dim:      rgba(68, 138, 255, 0.12);

  /* ── Backgrounds ── */
  --bg-page:             #0A1628;
  --bg-surface:          #111E33;
  --bg-surface-2:        #162440;
  --bg-surface-3:        #1C2D4A;
  --bg-overlay:          rgba(10, 22, 40, 0.95);

  /* ── Text ── */
  --text-primary:        #E8EDF5;
  --text-secondary:      #94A3B8;
  --text-muted:          #4A5568;
  --text-inverse:        #0A1628;

  /* ── Borders ── */
  --border-default:      rgba(255, 255, 255, 0.07);
  --border-subtle:       rgba(255, 255, 255, 0.04);
  --border-strong:       rgba(255, 255, 255, 0.15);

  /* ── Shadows ── */
  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:           0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg:           0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:           0 16px 64px rgba(0, 0, 0, 0.6);

  /* ── Topbar ── */
  --topbar-bg:           rgba(10, 22, 40, 0.96);
  --topbar-border:       rgba(255, 255, 255, 0.07);
  --topbar-height:       52px;

  /* ── Sidebar (HR Admin) ── */
  --sidebar-bg:          #0D1A2E;
  --sidebar-width:       240px;
  --sidebar-border:      rgba(255, 255, 255, 0.06);

  /* ── Cards ── */
  --card-bg:             #111E33;
  --card-border:         rgba(255, 255, 255, 0.07);
  --card-hover-border:   rgba(0, 196, 180, 0.25);

  /* ── Inputs ── */
  --input-bg:            rgba(255, 255, 255, 0.05);
  --input-border:        rgba(255, 255, 255, 0.1);
  --input-focus-border:  #00C4B4;
  --input-focus-shadow:  rgba(0, 196, 180, 0.12);
  --input-text:          #E8EDF5;
  --input-placeholder:   #4A5568;

  /* ── Dropdown ── */
  --dropdown-bg:         #162440;
  --dropdown-border:     rgba(0, 196, 180, 0.2);
  --dropdown-hover:      rgba(0, 196, 180, 0.08);
  --dropdown-shadow:     0 16px 48px rgba(0, 0, 0, 0.6);

  /* ── Tables ── */
  --table-header-bg:     #162440;
  --table-row-hover:     rgba(255, 255, 255, 0.03);
  --table-row-alt:       rgba(255, 255, 255, 0.02);
  --table-border:        rgba(255, 255, 255, 0.05);

  /* ── Badges ── */
  --badge-in-bg:         rgba(0, 230, 118, 0.12);
  --badge-in-text:       #00E676;
  --badge-out-bg:        rgba(255, 82, 82, 0.12);
  --badge-out-text:      #FF5252;
  --badge-emp-bg:        rgba(0, 196, 180, 0.12);
  --badge-emp-text:      #00C4B4;
  --badge-vis-bg:        rgba(255, 179, 0, 0.12);
  --badge-vis-text:      #FFB300;
  --badge-pending-bg:    rgba(255, 179, 0, 0.15);
  --badge-pending-text:  #FFB300;
  --badge-approved-bg:   rgba(0, 230, 118, 0.12);
  --badge-approved-text: #00E676;
  --badge-rejected-bg:   rgba(255, 82, 82, 0.12);
  --badge-rejected-text: #FF5252;

  /* ── Scrollbar ── */
  --scrollbar-track:     #0A1628;
  --scrollbar-thumb:     #1C2D4A;
  --scrollbar-thumb-hover: #263d5e;

  /* ── Emergency ── */
  --emergency-bg:        #1A0A0A;
  --emergency-accent:    #FF5252;
  --emergency-border:    rgba(255, 82, 82, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Brand ── */
  --color-teal:          #00796B;
  --color-teal-dark:     #004D40;
  --color-teal-dim:      rgba(0, 121, 107, 0.08);
  --color-teal-border:   rgba(0, 121, 107, 0.2);
  --color-teal-glow:     rgba(0, 121, 107, 0.05);

  --color-amber:         #F57F17;
  --color-amber-dark:    #E65100;
  --color-amber-dim:     rgba(245, 127, 23, 0.08);
  --color-amber-border:  rgba(245, 127, 23, 0.2);

  --color-navy:          #1B2A4A;

  /* ── Status ── */
  --color-green:         #2E7D32;
  --color-green-dark:    #1B5E20;
  --color-green-dim:     rgba(46, 125, 50, 0.08);
  --color-green-border:  rgba(46, 125, 50, 0.2);

  --color-red:           #C62828;
  --color-red-dark:      #B71C1C;
  --color-red-dim:       rgba(198, 40, 40, 0.08);
  --color-red-border:    rgba(198, 40, 40, 0.2);

  --color-blue:          #1565C0;
  --color-blue-dim:      rgba(21, 101, 192, 0.08);

  /* ── Backgrounds ── */
  --bg-page:             #F0F4F8;
  --bg-surface:          #FFFFFF;
  --bg-surface-2:        #F8FAFC;
  --bg-surface-3:        #EEF2F7;
  --bg-overlay:          rgba(255, 255, 255, 0.96);

  /* ── Text ── */
  --text-primary:        #1A202C;
  --text-secondary:      #4A5568;
  --text-muted:          #A0AEC0;
  --text-inverse:        #FFFFFF;

  /* ── Borders ── */
  --border-default:      rgba(0, 0, 0, 0.08);
  --border-subtle:       rgba(0, 0, 0, 0.04);
  --border-strong:       rgba(0, 0, 0, 0.16);

  /* ── Shadows ── */
  --shadow-sm:           0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:           0 2px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:           0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:           0 8px 40px rgba(0, 0, 0, 0.15);

  /* ── Topbar ── */
  --topbar-bg:           #FFFFFF;
  --topbar-border:       rgba(0, 0, 0, 0.08);
  --topbar-height:       52px;

  /* ── Sidebar ── */
  --sidebar-bg:          #1B2A4A;
  --sidebar-width:       240px;
  --sidebar-border:      rgba(255, 255, 255, 0.08);

  /* ── Cards ── */
  --card-bg:             #FFFFFF;
  --card-border:         rgba(0, 0, 0, 0.08);
  --card-hover-border:   rgba(0, 121, 107, 0.3);

  /* ── Inputs ── */
  --input-bg:            #FFFFFF;
  --input-border:        rgba(0, 0, 0, 0.15);
  --input-focus-border:  #00796B;
  --input-focus-shadow:  rgba(0, 121, 107, 0.1);
  --input-text:          #1A202C;
  --input-placeholder:   #A0AEC0;

  /* ── Dropdown ── */
  --dropdown-bg:         #FFFFFF;
  --dropdown-border:     rgba(0, 121, 107, 0.2);
  --dropdown-hover:      rgba(0, 121, 107, 0.06);
  --dropdown-shadow:     0 8px 32px rgba(0, 0, 0, 0.15);

  /* ── Tables ── */
  --table-header-bg:     #EEF2F7;
  --table-row-hover:     rgba(0, 0, 0, 0.02);
  --table-row-alt:       rgba(0, 0, 0, 0.015);
  --table-border:        rgba(0, 0, 0, 0.06);

  /* ── Badges ── */
  --badge-in-bg:         rgba(46, 125, 50, 0.1);
  --badge-in-text:       #2E7D32;
  --badge-out-bg:        rgba(198, 40, 40, 0.1);
  --badge-out-text:      #C62828;
  --badge-emp-bg:        rgba(0, 121, 107, 0.1);
  --badge-emp-text:      #00796B;
  --badge-vis-bg:        rgba(245, 127, 23, 0.1);
  --badge-vis-text:      #F57F17;
  --badge-pending-bg:    rgba(245, 127, 23, 0.12);
  --badge-pending-text:  #E65100;
  --badge-approved-bg:   rgba(46, 125, 50, 0.1);
  --badge-approved-text: #2E7D32;
  --badge-rejected-bg:   rgba(198, 40, 40, 0.1);
  --badge-rejected-text: #C62828;

  /* ── Scrollbar ── */
  --scrollbar-track:     #F0F4F8;
  --scrollbar-thumb:     #CBD5E0;
  --scrollbar-thumb-hover: #A0AEC0;

  /* ── Emergency ── */
  --emergency-bg:        #FFF5F5;
  --emergency-accent:    #C62828;
  --emergency-border:    rgba(198, 40, 40, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --font-sans:   'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:   'IBM Plex Mono', 'Courier New', monospace;

  --text-xs:     11px;
  --text-sm:     12px;
  --text-base:   14px;
  --text-md:     15px;
  --text-lg:     16px;
  --text-xl:     18px;
  --text-2xl:    22px;
  --text-3xl:    28px;
  --text-4xl:    36px;
  --text-5xl:    48px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPACING & LAYOUT TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --transition-fast:   0.12s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.35s ease;
}