/* ═══════════════════════════════════════════════════════════════
   ELMS DESIGN SYSTEM — Circle K Enterprise LMS
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand-red:       #E31837;
  --brand-red-dark:  #B01229;
  --brand-red-light: #FEE2E2;
  --brand-orange:    #F7941D;
  --brand-orange-lt: #FFF3E0;
  --brand-navy:      #1E3A5F;

  /* Grays */
  --g50:  #F9FAFB; --g100: #F3F4F6; --g200: #E5E7EB;
  --g300: #D1D5DB; --g400: #9CA3AF; --g500: #6B7280;
  --g600: #4B5563; --g700: #374151; --g800: #1F2937; --g900: #111827;

  /* Semantic */
  --success: #10B981; --success-lt: #D1FAE5; --success-dk: #059669;
  --warning: #F59E0B; --warning-lt: #FEF3C7; --warning-dk: #D97706;
  --danger:  #EF4444; --danger-lt:  #FEE2E2; --danger-dk:  #DC2626;
  --info:    #3B82F6; --info-lt:    #DBEAFE; --info-dk:    #2563EB;
  --purple:  #8B5CF6; --purple-lt:  #EDE9FE;

  /* Sidebar — Circle K Red */
  --sb-bg:       #AA0A1E;
  --sb-border:   rgba(255,255,255,.12);
  --sb-hover:    rgba(255,255,255,.10);
  --sb-active:   rgba(255,255,255,.18);
  --sb-text:     rgba(255,255,255,.70);
  --sb-active-t: #FFFFFF;
  --sb-accent:   #FFFFFF;

  /* Layout */
  --sidebar-w:   260px;
  --topbar-h:    64px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.06);
  --shadow:      0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:   0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:   0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--g100);
  color: var(--g800);
  line-height: 1.55;
  overflow: hidden;
  height: 100vh;
}
body.login-mode {
  overflow-y: auto;
  height: auto;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, select, textarea { font-family: var(--font); }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ── UTILITIES ────────────────────────────────────────────────── */
.hidden  { display: none !important; }
.flex    { display: flex; }
.iflex   { display: inline-flex; }
.grid    { display: grid; }
.block   { display: block; }
.flex-col{ flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.gap-1{gap:4px;} .gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;} .gap-5{gap:20px;} .gap-6{gap:24px;} .gap-8{gap:32px;}
.w-full{width:100%;} .h-full{height:100%;} .w-auto{width:auto;}
.flex-1{flex:1;} .flex-none{flex:none;} .flex-wrap{flex-wrap:wrap;}
.overflow-auto   { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }
.z-10{z-index:10;} .z-20{z-index:20;} .z-50{z-index:50;} .z-100{z-index:100;}
.cursor-pointer { cursor: pointer; }
.select-none    { user-select: none; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Spacing */
.p-0{padding:0;} .p-2{padding:8px;} .p-3{padding:12px;} .p-4{padding:16px;} .p-5{padding:20px;} .p-6{padding:24px;} .p-8{padding:32px;}
.px-2{padding-left:8px;padding-right:8px;} .px-3{padding-left:12px;padding-right:12px;} .px-4{padding-left:16px;padding-right:16px;} .px-6{padding-left:24px;padding-right:24px;}
.py-1{padding-top:4px;padding-bottom:4px;} .py-2{padding-top:8px;padding-bottom:8px;} .py-3{padding-top:12px;padding-bottom:12px;} .py-4{padding-top:16px;padding-bottom:16px;}
.mb-1{margin-bottom:4px;} .mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;} .mb-5{margin-bottom:20px;} .mb-6{margin-bottom:24px;} .mb-8{margin-bottom:32px;}
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .mt-5{margin-top:20px;} .mt-6{margin-top:24px;}
.ml-auto{margin-left:auto;} .mr-auto{margin-right:auto;} .mx-auto{margin:0 auto;}

/* Typography */
.text-xs{font-size:11px;} .text-sm{font-size:12px;} .text-base{font-size:14px;} .text-lg{font-size:16px;} .text-xl{font-size:18px;} .text-2xl{font-size:22px;} .text-3xl{font-size:28px;} .text-4xl{font-size:36px;}
.font-normal{font-weight:400;} .font-medium{font-weight:500;} .font-semibold{font-weight:600;} .font-bold{font-weight:700;} .font-extrabold{font-weight:800;}
.leading-tight{line-height:1.25;} .leading-snug{line-height:1.375;} .leading-normal{line-height:1.5;}
.text-center{text-align:center;} .text-right{text-align:right;} .text-left{text-align:left;}
.uppercase{text-transform:uppercase;} .capitalize{text-transform:capitalize;}
.tracking-wide{letter-spacing:.025em;} .tracking-wider{letter-spacing:.05em;}
.text-white{color:#fff;} .text-gray{color:var(--g500);} .text-dark{color:var(--g800);}
.text-primary{color:var(--brand-red);} .text-success{color:var(--success);} .text-warning{color:var(--warning);} .text-danger{color:var(--danger);} .text-info{color:var(--info);}
.text-navy{color:var(--brand-navy);}

/* Backgrounds */
.bg-white{background:#fff;} .bg-gray{background:var(--g100);} .bg-primary{background:var(--brand-red);}
.bg-success{background:var(--success);} .bg-warning{background:var(--warning);} .bg-danger{background:var(--danger);} .bg-info{background:var(--info);}
.bg-success-lt{background:var(--success-lt);} .bg-warning-lt{background:var(--warning-lt);} .bg-danger-lt{background:var(--danger-lt);} .bg-info-lt{background:var(--info-lt);} .bg-purple-lt{background:var(--purple-lt);}

/* Borders */
.border{border:1px solid var(--g200);} .border-top{border-top:1px solid var(--g200);} .border-bottom{border-bottom:1px solid var(--g200);}
.rounded{border-radius:var(--radius);} .rounded-lg{border-radius:var(--radius-lg);} .rounded-xl{border-radius:var(--radius-xl);} .rounded-full{border-radius:9999px;}
.shadow-sm{box-shadow:var(--shadow-sm);} .shadow{box-shadow:var(--shadow);} .shadow-md{box-shadow:var(--shadow-md);} .shadow-lg{box-shadow:var(--shadow-lg);}

/* ── APP LAYOUT ───────────────────────────────────────────────── */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sb-bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-right: 1px solid var(--sb-border);
  transition: width .25s ease, min-width .25s ease;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar.collapsed { width: 64px; min-width: 64px; }
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sidebar-logo-icon {
  width: 40px; height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-red); font-size: 18px; font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
  letter-spacing: -1px;
}
.sidebar-logo-title { color: #F8FAFC; font-weight: 700; font-size: 15px; line-height: 1.2; }
.sidebar-logo-sub   { color: var(--sb-text); font-size: 11px; }
.sidebar.collapsed .sidebar-logo-text { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 2px; }

.nav-section-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--sb-text);
  padding: 8px 8px 4px;
  white-space: nowrap; overflow: hidden;
}
.sidebar.collapsed .nav-section-label { opacity: 0; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--sb-text); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s;
  white-space: nowrap; overflow: hidden;
  margin-bottom: 1px; position: relative;
}
.nav-item:hover { background: var(--sb-hover); color: var(--sb-active-t); }
.nav-item.active {
  background: var(--sb-active);
  color: var(--sb-active-t);
  border-left: 3px solid var(--sb-accent);
  padding-left: 7px;
}
.nav-item i { font-size: 14px; min-width: 18px; text-align: center; flex-shrink: 0; }
.nav-item-label { flex: 1; }
.nav-badge {
  background: var(--brand-red); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px;
  flex-shrink: 0;
}
.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .nav-badge { display: none; }
.nav-divider { height: 1px; background: var(--sb-border); margin: 8px 0; }

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sidebar-user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px; cursor: pointer;
  transition: background .15s;
}
.sidebar-user-card:hover { background: var(--sb-hover); }
.sidebar-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.sidebar-user-info .name  { color: #F8FAFC; font-size: 13px; font-weight: 600; }
.sidebar-user-info .role  { color: var(--sb-text); font-size: 11px; }
.sidebar.collapsed .sidebar-user-info { display: none; }

/* ── TOP BAR ──────────────────────────────────────────────────── */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.topbar {
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--g200);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}
.topbar-left  { display: flex; align-items: center; gap: 16px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-toggle {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--g500); font-size: 16px;
  transition: all .15s;
}
.topbar-toggle:hover { background: var(--g100); color: var(--g800); }
.topbar-breadcrumb { color: var(--g500); font-size: 13px; }
.topbar-breadcrumb span { color: var(--g800); font-weight: 600; }
.topbar-btn {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--g500); font-size: 16px; position: relative;
  transition: all .15s;
}
.topbar-btn:hover { background: var(--g100); color: var(--g800); }
.topbar-logout:hover { background: var(--danger-lt); color: var(--danger); }
.topbar-divider { width: 1px; height: 24px; background: var(--g200); margin: 0 4px; }
.notif-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; border-radius: 999px;
  background: var(--brand-red); color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* ── PAGE CONTENT ─────────────────────────────────────────────── */
.page-content {
  flex: 1;
  overflow-y: auto;
  background: var(--g100);
}
.page-content::-webkit-scrollbar { width: 6px; }
.page-content::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 3px; }

.page-wrapper { padding: 24px; max-width: 1400px; }
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-title { font-size: 22px; font-weight: 700; color: var(--g900); line-height: 1.25; }
.page-subtitle { font-size: 13px; color: var(--g500); margin-top: 3px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── CARDS ────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--g200);
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--g100);
}
.card-title { font-size: 14px; font-weight: 600; color: var(--g800); }
.card-body { padding: 20px; }
.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--g100);
  background: var(--g50);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Stat Cards */
.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--g200);
  padding: 20px;
  display: flex; align-items: flex-start; gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.stat-icon.red    { background: var(--brand-red-light); color: var(--brand-red); }
.stat-icon.orange { background: var(--brand-orange-lt); color: var(--brand-orange); }
.stat-icon.green  { background: var(--success-lt); color: var(--success); }
.stat-icon.blue   { background: var(--info-lt);    color: var(--info); }
.stat-icon.purple { background: var(--purple-lt);  color: var(--purple); }
.stat-icon.navy   { background: #E8EEF5; color: var(--brand-navy); }
.stat-label  { font-size: 12px; color: var(--g500); font-weight: 500; margin-bottom: 4px; }
.stat-value  { font-size: 28px; font-weight: 700; color: var(--g900); line-height: 1; }
.stat-change { font-size: 11px; margin-top: 4px; }
.stat-change.up   { color: var(--success); }
.stat-change.down { color: var(--danger); }

/* Training Cards */
.training-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--g200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
}
.training-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.training-card-thumb {
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  position: relative;
}
.training-card-body { padding: 16px; }
.training-card-title { font-size: 14px; font-weight: 600; color: var(--g900); margin-bottom: 6px; line-height: 1.4; }
.training-card-meta  { font-size: 11px; color: var(--g500); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.training-card-meta i { margin-right: 3px; }
.training-card-footer { padding: 12px 16px; border-top: 1px solid var(--g100); display: flex; align-items: center; justify-content: space-between; }

/* ── BADGES ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-red     { background: var(--brand-red-light); color: var(--brand-red-dark); }
.badge-orange  { background: var(--brand-orange-lt); color: #B45309; }
.badge-green   { background: var(--success-lt);  color: var(--success-dk); }
.badge-blue    { background: var(--info-lt);      color: var(--info-dk); }
.badge-purple  { background: var(--purple-lt);    color: #6D28D9; }
.badge-gray    { background: var(--g100);         color: var(--g600); }
.badge-yellow  { background: var(--warning-lt);   color: var(--warning-dk); }

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .15s; white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary   { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.btn-primary:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.btn-secondary { background: #fff; color: var(--g700); border-color: var(--g200); }
.btn-secondary:hover { background: var(--g50); border-color: var(--g300); }
.btn-success   { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: var(--success-dk); }
.btn-danger    { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-dk); }
.btn-warning   { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-info      { background: var(--info); color: #fff; border-color: var(--info); }
.btn-outline   { background: transparent; color: var(--brand-red); border-color: var(--brand-red); }
.btn-outline:hover { background: var(--brand-red-light); }
.btn-ghost     { background: transparent; color: var(--g600); border-color: transparent; }
.btn-ghost:hover   { background: var(--g100); }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-xl { padding: 14px 28px; font-size: 16px; font-weight: 600; }
.btn-icon { padding: 8px; width: 34px; height: 34px; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── FORM ELEMENTS ────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--g700); margin-bottom: 6px; text-transform: uppercase;
  letter-spacing: .04em;
}
.form-label .required { color: var(--brand-red); margin-left: 3px; }
.form-control {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--g200); border-radius: var(--radius);
  font-size: 13px; color: var(--g800); background: #fff;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-control:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(227,24,55,.1); }
.form-control::placeholder { color: var(--g400); }
.form-control-sm { padding: 6px 10px; font-size: 12px; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-hint  { font-size: 11px; color: var(--g500); margin-top: 4px; }
.form-error { font-size: 11px; color: var(--danger); margin-top: 4px; }
.form-row   { display: grid; gap: 16px; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Search box */
.search-box {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--g200);
  border-radius: var(--radius); background: #fff;
}
.search-box i   { color: var(--g400); font-size: 14px; }
.search-box input {
  border: none; outline: none; font-size: 13px;
  color: var(--g800); background: transparent; flex: 1;
}

/* Filters bar */
.filters-bar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--g200);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

/* ── TABLES ───────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--g200);
}
table { width: 100%; border-collapse: collapse; background: #fff; }
thead { background: var(--g50); }
th {
  padding: 10px 16px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--g500);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--g200); white-space: nowrap;
}
td {
  padding: 12px 16px; font-size: 13px; color: var(--g700);
  border-bottom: 1px solid var(--g100);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--g50); }
.table-actions { display: flex; gap: 4px; align-items: center; }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--g200);
  background: var(--g50);
}
.pagination-info { font-size: 12px; color: var(--g500); }
.pagination-btns { display: flex; gap: 4px; }
.page-btn {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--g200); background: #fff; color: var(--g700);
  transition: all .15s;
}
.page-btn:hover { background: var(--g100); }
.page-btn.active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }

/* ── MODALS ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px;
}
.modal-box {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: modalIn .2s ease;
}
.modal-box.modal-lg { max-width: 800px; }
.modal-box.modal-xl { max-width: 1000px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--g100);
}
.modal-title   { font-size: 16px; font-weight: 700; color: var(--g900); }
.modal-close   {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--g400); cursor: pointer; font-size: 16px;
  transition: all .15s;
}
.modal-close:hover { background: var(--g100); color: var(--g800); }
.modal-body    { padding: 24px; }
.modal-footer  {
  padding: 16px 24px;
  border-top: 1px solid var(--g100);
  display: flex; justify-content: flex-end; gap: 8px;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ── TOASTS ───────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 2000; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--g200);
  box-shadow: var(--shadow-lg);
  min-width: 280px; max-width: 360px;
  animation: toastIn .3s ease;
}
.toast i     { font-size: 16px; flex-shrink: 0; }
.toast-text  { flex: 1; font-size: 13px; color: var(--g800); }
.toast-close { color: var(--g400); cursor: pointer; font-size: 14px; }
.toast-close:hover { color: var(--g800); }
.toast.success i { color: var(--success); }
.toast.error   i { color: var(--danger); }
.toast.warning i { color: var(--warning); }
.toast.info    i { color: var(--info); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── TABS ─────────────────────────────────────────────────────── */
.tabs, .tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--g200); margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  color: var(--g500); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all .15s; white-space: nowrap;
}
.tab-btn:hover { color: var(--g800); }
.tab-btn.active { color: var(--brand-red); border-bottom-color: var(--brand-red); font-weight: 600; }

/* ── PROGRESS ─────────────────────────────────────────────────── */
.progress-bar { background: var(--g200); border-radius: 999px; overflow: hidden; height: 6px; }
.progress-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.progress-fill.red    { background: var(--brand-red); }
.progress-fill.green  { background: var(--success); }
.progress-fill.blue   { background: var(--info); }
.progress-fill.orange { background: var(--brand-orange); }

/* ── AVATAR GROUP ─────────────────────────────────────────────── */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-lg { width: 44px; height: 44px; font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; font-size: 24px; }
.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid #fff; margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* ── TIMELINE ─────────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:2px; background:var(--g200); }
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-dot {
  position: absolute; left: -21px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 2px var(--g300);
}
.timeline-dot.green  { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.timeline-dot.red    { background: var(--brand-red); box-shadow: 0 0 0 2px var(--brand-red); }
.timeline-dot.blue   { background: var(--info); box-shadow: 0 0 0 2px var(--info); }
.timeline-dot.gray   { background: var(--g400); box-shadow: 0 0 0 2px var(--g400); }
.timeline-date  { font-size: 11px; color: var(--g400); margin-bottom: 2px; }
.timeline-title { font-size: 13px; font-weight: 600; color: var(--g800); }
.timeline-desc  { font-size: 12px; color: var(--g500); margin-top: 2px; }

/* ── STEP WIZARD ──────────────────────────────────────────────── */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: 32px; }
.step {
  display: flex; align-items: center; flex: 1;
}
.step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
  border: 2px solid var(--g300); color: var(--g400); background: #fff;
  transition: all .3s;
}
.step.active   .step-circle { border-color: var(--brand-red); color: #fff; background: var(--brand-red); }
.step.done     .step-circle { border-color: var(--success); color: #fff; background: var(--success); }
.step-label { font-size: 12px; color: var(--g500); margin-left: 8px; white-space: nowrap; }
.step.active .step-label { color: var(--brand-red); font-weight: 600; }
.step.done   .step-label { color: var(--success); }
.step-line  { flex: 1; height: 2px; background: var(--g200); }
.step-line.done { background: var(--success); }

/* ── ALERTS ───────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-lg);
  border: 1px solid transparent; margin-bottom: 16px;
}
.alert-success { background: var(--success-lt); border-color: #6EE7B7; }
.alert-warning { background: var(--warning-lt); border-color: #FDE68A; }
.alert-danger  { background: var(--danger-lt);  border-color: #FCA5A5; }
.alert-info    { background: var(--info-lt);    border-color: #93C5FD; }
.alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-success i { color: var(--success-dk); }
.alert-warning i { color: var(--warning-dk); }
.alert-danger  i { color: var(--danger-dk); }
.alert-info    i { color: var(--info-dk); }
.alert-text    { flex: 1; font-size: 13px; }

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 24px; text-align: center;
}
.empty-icon {
  font-size: 48px; color: var(--g300); margin-bottom: 16px;
}
.empty-title { font-size: 16px; font-weight: 600; color: var(--g700); margin-bottom: 6px; }
.empty-desc  { font-size: 13px; color: var(--g500); max-width: 320px; }

/* ── HERO BANNER ──────────────────────────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, #7A0614 0%, var(--brand-red-dark) 40%, var(--brand-red) 100%);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.hero-banner::after {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.hero-banner::before {
  content: '';
  position: absolute; right: 60px; bottom: -60px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.hero-greeting  { font-size: 13px; opacity: .8; margin-bottom: 4px; }
.hero-name      { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.hero-subtitle  { font-size: 13px; opacity: .75; }
.hero-stats     { display: flex; gap: 24px; margin-top: 20px; }
.hero-stat      { }
.hero-stat-val  { font-size: 22px; font-weight: 700; }
.hero-stat-lbl  { font-size: 11px; opacity: .7; }

/* ── COURSE PLAYER ────────────────────────────────────────────── */
.player-layout  { display: flex; height: calc(100vh - var(--topbar-h)); overflow: hidden; }
.player-main    { flex: 1; overflow-y: auto; background: var(--g900); }
.player-sidebar { width: 320px; background: #fff; border-left: 1px solid var(--g200); overflow-y: auto; flex-shrink: 0; }
.player-video   { width: 100%; aspect-ratio: 16/9; background: #000; display: flex; align-items: center; justify-content: center; position: relative; }
.player-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px; background: var(--g800);
}
.player-ctrl-btn { color: #fff; font-size: 18px; cursor: pointer; opacity: .8; transition: opacity .15s; }
.player-ctrl-btn:hover { opacity: 1; }
.player-progress { flex: 1; }

/* ── QUIZ ─────────────────────────────────────────────────────── */
.quiz-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-lg);
  border: 2px solid var(--g200); cursor: pointer;
  transition: all .15s; margin-bottom: 10px;
  background: #fff;
}
.quiz-option:hover   { border-color: var(--brand-red); background: var(--brand-red-light); }
.quiz-option.selected{ border-color: var(--brand-red); background: var(--brand-red-light); }
.quiz-option.correct { border-color: var(--success);   background: var(--success-lt); }
.quiz-option.wrong   { border-color: var(--danger);    background: var(--danger-lt); }
.quiz-option-key {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--g100); color: var(--g600);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.quiz-option.selected .quiz-option-key { background: var(--brand-red); color: #fff; }

/* ── CERTIFICATE ──────────────────────────────────────────────── */
.certificate-preview {
  background: #fff;
  border: 2px solid var(--brand-navy);
  border-radius: var(--radius-xl);
  padding: 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}
.cert-corner {
  position: absolute;
  width: 100px; height: 100px;
  border-top: 4px solid var(--brand-red);
  border-left: 4px solid var(--brand-red);
}
.cert-corner.tr { top: 16px; right: 16px; transform: rotate(90deg); }
.cert-corner.bl { bottom: 16px; left: 16px; transform: rotate(-90deg); }
.cert-corner.br { bottom: 16px; right: 16px; transform: rotate(180deg); }
.cert-logo-area { margin-bottom: 24px; }
.cert-title     { font-size: 28px; font-weight: 800; color: var(--brand-navy); margin-bottom: 8px; }
.cert-sub       { font-size: 13px; color: var(--g500); margin-bottom: 24px; }
.cert-name      { font-size: 32px; font-weight: 700; color: var(--brand-red); border-bottom: 2px solid var(--brand-red); display: inline-block; padding-bottom: 6px; margin-bottom: 16px; }
.cert-course    { font-size: 18px; font-weight: 600; color: var(--g800); margin-bottom: 8px; }
.cert-date      { font-size: 13px; color: var(--g500); }

/* ── NOTIFICATION ITEM ────────────────────────────────────────── */
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--g100);
  cursor: pointer; transition: background .15s;
}
.notif-item:hover { background: var(--g50); }
.notif-item.unread { background: #FFF8F9; }
.notif-item.unread::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--brand-red); flex-shrink:0; margin-top:7px; }
.notif-dot { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-content .title { font-size: 13px; font-weight: 500; color: var(--g800); }
.notif-content .desc  { font-size: 12px; color: var(--g500); margin-top: 2px; }
.notif-content .time  { font-size: 11px; color: var(--g400); margin-top: 4px; }

/* ── HRIS INTEGRATION STATUS ──────────────────────────────────── */
.integration-card {
  border: 1px solid var(--g200);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.integration-indicator {
  display: flex; align-items: center; gap: 8px;
}
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.status-dot.online  { background: var(--success); box-shadow: 0 0 0 3px var(--success-lt); }
.status-dot.offline { background: var(--danger);  box-shadow: 0 0 0 3px var(--danger-lt); }
.status-dot.sync    { background: var(--warning);  box-shadow: 0 0 0 3px var(--warning-lt); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ── REPORT / CHART AREA ──────────────────────────────────────── */
.chart-placeholder {
  background: var(--g50);
  border: 2px dashed var(--g200);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px; color: var(--g400);
}
.chart-placeholder i { font-size: 36px; margin-bottom: 10px; }
.donut-ring {
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(var(--success) 0% 68%, var(--brand-orange) 68% 85%, var(--danger) 85% 100%);
  display: flex; align-items: center; justify-content: center;
}
.donut-center { width: 80px; height: 80px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; }

/* ── MINI CALENDAR ────────────────────────────────────────────── */
.mini-calendar { }
.cal-header    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-grid      { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day-name  { text-align: center; font-size: 10px; font-weight: 600; color: var(--g400); padding: 4px 0; }
.cal-day {
  aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer; transition: background .15s;
}
.cal-day:hover    { background: var(--g100); }
.cal-day.today    { background: var(--brand-red); color: #fff; font-weight: 700; }
.cal-day.has-event{ border-bottom: 2px solid var(--brand-orange); }
.cal-day.other-month { color: var(--g300); }

/* ── APPROVAL FLOW ────────────────────────────────────────────── */
.approval-flow { display: flex; align-items: center; gap: 0; }
.approval-step {
  display: flex; align-items: center; flex-direction: column; gap: 6px;
  flex: 1; text-align: center;
}
.approval-step-icon {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--g200); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--g400);
}
.approval-step.done    .approval-step-icon { border-color: var(--success); color: var(--success); background: var(--success-lt); }
.approval-step.pending .approval-step-icon { border-color: var(--brand-orange); color: var(--brand-orange); background: var(--brand-orange-lt); }
.approval-step.rejected.approval-step-icon { border-color: var(--danger); color: var(--danger); background: var(--danger-lt); }
.approval-step-label   { font-size: 11px; color: var(--g500); }
.approval-step-name    { font-size: 12px; font-weight: 600; color: var(--g700); }
.approval-arrow { width: 40px; height: 2px; background: var(--g200); flex-shrink: 0; }
.approval-arrow.done { background: var(--success); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { width: 0; min-width: 0; }
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 12px; }
}

/* ── LOGIN SCREEN ─────────────────────────────────────────────── */
#loginScreen {
  min-height: 100vh;
  background: #E8EAED;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow-y: auto; overflow-x: hidden;
  padding: 40px 16px;
}
#loginScreen::before {
  content: 'ELMS';
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 280px; font-weight: 900; letter-spacing: -10px;
  color: rgba(0,0,0,.045);
  user-select: none; pointer-events: none; z-index: 0;
  font-family: 'Inter', sans-serif; white-space: nowrap;
}
.login-page-layout {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; position: relative; z-index: 1; gap: 32px;
}
.login-logos-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 52px; flex-wrap: wrap;
}
.login-logo-img {
  height: 56px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
  transition: transform .2s; cursor: default;
}
.login-logo-img:hover { transform: scale(1.04); }
.login-card {
  background: rgba(255,255,255,.97);
  border-radius: 18px;
  padding: 36px 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  position: relative;
}
.login-card-subtitle {
  text-align: center; font-size: 13px; color: var(--g500);
  margin-bottom: 24px; line-height: 1.5;
}
.login-field-wrap { position: relative; }
.login-field-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--brand-red); font-size: 14px; z-index: 1;
}
.login-field-input { padding-left: 36px !important; }
.login-captcha-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.login-captcha-box {
  min-width: 110px; height: 42px; border-radius: 8px;
  background: linear-gradient(135deg, #2C3E50, #3A6186, #AA2A2A);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-size: 20px; font-weight: 900;
  color: #fff; letter-spacing: 5px; user-select: none; flex-shrink: 0;
  text-shadow: 1px 1px 4px rgba(0,0,0,.5);
  position: relative; overflow: hidden;
}
.login-captcha-box::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.07) 4px,rgba(255,255,255,.07) 5px);
}
.login-captcha-input { flex: 1; }
.login-captcha-refresh {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--g100); border: 1px solid var(--g200);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--g500); flex-shrink: 0; transition: all .15s;
}
.login-captcha-refresh:hover { background: var(--g200); color: var(--g800); }
.login-submit-btn {
  width: 100%; padding: 14px; background: var(--brand-red); color: #fff;
  border: none; border-radius: 999px; font-size: 15px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 10px; transition: background .15s; margin-bottom: 4px; font-family: var(--font);
}
.login-submit-btn:hover { background: var(--brand-red-dark); }
.login-submit-btn:disabled { opacity: .7; cursor: not-allowed; }
.login-footer {
  text-align: center; font-size: 11px; color: var(--g400); margin-top: -8px;
}
.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--g400); font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content:''; flex:1; height:1px; background:var(--g200);
}
.sso-btn {
  width: 100%; padding: 11px;
  border: 1px solid var(--g200); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  background: #fff; color: var(--g700);
  transition: all .15s; margin-bottom: 8px;
}
.sso-btn:hover { background: var(--g50); border-color: var(--g300); }

/* ── SIDEBAR USER FOOTER ──────────────────────────────────────── */
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px;
  transition: background .15s;
}
.sidebar-user:hover { background: var(--sb-hover); }
.sidebar-user-name { color: #F8FAFC; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { color: var(--sb-text); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .sidebar-user-info { display: none; }

/* ── NAV ICON & LABEL ─────────────────────────────────────────── */
.nav-icon  { font-size: 14px; min-width: 18px; text-align: center; flex-shrink: 0; }
.nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .nav-label { display: none; }

/* ── EXTRA BADGE COLORS ───────────────────────────────────────── */
.badge-purple { background: var(--purple-lt); color: #6D28D9; }
.badge-gray   { background: var(--g100); color: var(--g600); }
.badge-red    { background: var(--danger-lt); color: var(--danger-dk); }

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 80px 20px; }
.empty-icon  { font-size: 56px; margin-bottom: 16px; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--g700); margin-bottom: 8px; }
.empty-desc  { font-size: 13px; color: var(--g400); max-width: 360px; margin: 0 auto; }

/* ── TOAST SYSTEM ─────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9999; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--g200);
  border-radius: var(--radius-lg); padding: 12px 16px;
  box-shadow: var(--shadow-lg); min-width: 280px; max-width: 380px;
  pointer-events: all; font-size: 13px; color: var(--g800);
  transition: opacity .35s, transform .35s;
}
.toast i:first-child { font-size: 16px; flex-shrink: 0; }
.toast span { flex: 1; }
.toast button { color: var(--g400); padding: 0 2px; flex-shrink: 0; }
.toast button:hover { color: var(--g700); }
.toast-success i:first-child { color: var(--success); }
.toast-error   i:first-child { color: var(--danger);  }
.toast-warning i:first-child { color: var(--warning); }
.toast-info    i:first-child { color: var(--info);    }
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger);  }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info    { border-left: 3px solid var(--info);    }