/* ═══════════════════════════════════════════════════════════════════════
   ASC EWB BOT — Premium Dark UI  ·  Velocis Systems © 2026
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens — ASC Brand: Blue #1f2f60 · Yellow #f9be3e · Font Arial ── */
:root {
  /* ── ASC Brand Colors ──────────────────────────────────────────── */
  --brand-blue:     #1f2f60;   /* ASC New Blue  */
  --brand-yellow:   #f9be3e;   /* ASC New Yellow */

  /* Background layers — all derived from brand blue #1f2f60 */
  --bg-base:        #1a2754;   /* page background — slightly darker navy   */
  --bg-surface:     #1f2f60;   /* sidebar, panels — EXACT brand blue       */
  --bg-elevated:    #263a78;   /* cards, modals — lighter than brand blue  */
  --bg-card:        #2d4490;   /* elevated card surfaces — even lighter    */
  --bg-hover:       rgba(249,190,62,0.09);

  /* Primary — brand yellow */
  --primary:        #f9be3e;
  --primary-dark:   #e6a52c;
  --primary-light:  #fcd068;
  --primary-glow:   rgba(249,190,62,0.35);
  --primary-subtle: rgba(249,190,62,0.12);

  /* Accent — lighter blue derived from brand blue */
  --accent:         #3b5bdb;
  --accent-dark:    #2f4bbd;
  --accent-light:   #6b8ff0;
  --accent-glow:    rgba(59,91,219,0.32);
  --accent-subtle:  rgba(59,91,219,0.12);

  --violet:         #a78bfa;
  --violet-glow:    rgba(167,139,250,0.3);

  --danger:         #f87171;
  --warning:        #fbbf24;
  --info:           #38bdf8;

  /* Text */
  --text:           #000000;
  --text-muted:     #1a1a1a;
  --text-subtle:    #222222;

  /* Borders */
  --border:         rgba(249,190,62,0.12);
  --border-bright:  rgba(249,190,62,0.25);
  --border-accent:  rgba(249,190,62,0.50);
  --glass:          rgba(255,255,255,0.04);
  --glass-hover:    rgba(249,190,62,0.08);

  /* Layout */
  --sidebar-w:      262px;
  --sidebar-mini:   64px;
  --navbar-h:       0px;

  /* Shadows */
  --shadow-sm:  0 1px 6px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.7);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Transitions */
  --t:    0.18s ease;
  --t-lg: 0.32s cubic-bezier(0.4,0,0.2,1);
}

/* ── Bootstrap overrides — ASC Brand #1f2f60 / #f9be3e / Arial ─────────── */
:root {
  --bs-primary:             #f9be3e;
  --bs-primary-rgb:         249, 190, 62;
  --bs-secondary:           #1f2f60;
  --bs-secondary-rgb:       31, 47, 96;
  --bs-body-font-family:    Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --bs-font-sans-serif:     Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --bs-body-bg:             #1a2754;
  --bs-body-color:          #f0f6ff;
  --bs-link-color:          #f9be3e;
  --bs-link-hover-color:    #fcd068;
  --bs-border-color:        rgba(249,190,62,0.15);
  --bs-card-bg:             #1f2f60;
  --bs-modal-bg:            #1f2f60;
  --bs-dropdown-bg:         #1f2f60;
  --bs-dropdown-link-color: #f0f6ff;
  --bs-dropdown-link-hover-bg:    rgba(249,190,62,0.15);
  --bs-dropdown-link-hover-color: #f9be3e;
  --bs-nav-link-color:      #f0f6ff;
  --bs-nav-link-hover-color: #f9be3e;
  --bs-pagination-color:    #f0f6ff;
  --bs-pagination-bg:       #1f2f60;
  --bs-pagination-border-color: rgba(249,190,62,0.20);
  --bs-pagination-hover-color:  #1f2f60;
  --bs-pagination-hover-bg:     #f9be3e;
  --bs-pagination-active-bg:    #f9be3e;
  --bs-pagination-active-border-color: #f9be3e;
  --bs-pagination-active-color: #1f2f60;
  --bs-table-bg:            transparent;
  --bs-table-hover-bg:      rgba(249,190,62,0.06);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-base);
  margin: 0; padding: 0;
  height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   SCROLLBARS
   ──────────────────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.18) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.32); }


/* ═════════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   LOGIN PAGE — WHITE CLEAN THEME
   ══════════════════════════════════════════════════════ */

/* ── Legacy wrapper (keep for compat) ── */
.login-wrapper { display: none; }

/* ══════════════════════════════════════════════════════
   LOGIN PAGE — SPLIT LAYOUT
   ══════════════════════════════════════════════════════ */

.login-split-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ── LEFT PANEL ── */
.login-left-panel {
  flex: 0 0 50%;
  background: linear-gradient(160deg, #1a2754 0%, #1f2f60 50%, #162048 100%);
  color: #ffffff;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.login-left-panel::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(249,190,62,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.login-left-panel::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(59,91,219,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.login-left-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(249,190,62,0.15);
  border: 1px solid rgba(249,190,62,0.3);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #f9be3e;
  width: fit-content;
  margin-bottom: 40px;
}
.login-left-heading {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
  color: #ffffff;
}
.login-left-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin: 0 0 36px;
  max-width: 420px;
}

/* Stats row */
.login-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}
.login-stat {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.login-stat-val {
  font-size: 24px;
  font-weight: 800;
  color: #f9be3e;
  line-height: 1;
  margin-bottom: 4px;
}
.login-stat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Feature list */
.login-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
.login-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.login-feature-icon {
  width: 36px; height: 36px;
  background: rgba(249,190,62,0.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #f9be3e;
  font-size: 16px;
  flex-shrink: 0;
}
.login-feature-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}
.login-feature-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.login-left-footer {
  margin-top: 40px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.4px;
}

/* ── RIGHT PANEL ── */
.login-right-panel {
  flex: 0 0 50%;
  background: #f4f7fb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.login-right-panel .login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 16px;
  padding: 44px 40px 36px;
  border: 1px solid rgba(31,47,96,0.1);
  box-shadow: 0 4px 6px rgba(31,47,96,0.04), 0 20px 50px rgba(31,47,96,0.1);
  animation: cardRise 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.login-welcome {
  font-size: 26px;
  font-weight: 800;
  color: #1f2f60;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}
.login-welcome-sub {
  font-size: 13px;
  color: #7a90b8;
  margin: 0 0 28px;
}
.login-right-footer {
  text-align: center;
  font-size: 11px;
  color: #9aacc8;
  margin-top: 24px;
  margin-bottom: 0;
}

/* ── Mobile: stack vertically ── */
@media (max-width: 767px) {
  .login-split-wrapper { flex-direction: column; }
  .login-left-panel { flex: none; padding: 36px 24px; }
  .login-left-heading { font-size: 26px; }
  .login-stats-row { gap: 8px; }
  .login-right-panel { flex: none; padding: 24px 16px; }
  .login-right-panel .login-card { padding: 32px 24px 28px; }
}

/* Three.js canvas — hidden */
#login-three-bg { display: none; }
.login-orb { display: none; }

.login-wrapper::before { display: none; }

@keyframes cardRise {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Login Card — WHITE ── */
.login-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: var(--r-xl);
  padding: 44px 40px 40px;
  border: 1px solid rgba(31,47,96,0.12);
  box-shadow:
    0 4px 6px rgba(31,47,96,0.04),
    0 20px 60px rgba(31,47,96,0.12),
    0 0 0 1px rgba(255,255,255,0.8);
  animation: cardRise 0.65s cubic-bezier(0.16,1,0.3,1) both;
}

/* Yellow top accent bar */
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f9be3e, #e6a52c, #f9be3e);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.login-card::after { display: none; }

/* ── Logo area ── */
.login-logo-area {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo-img {
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: var(--r-lg);
  padding: 14px 28px;
  border: 1px solid rgba(31,47,96,0.1);
}
.login-logo-img::before { display: none; }
.login-logo-img img {
  max-height: 72px;
  max-width: 200px;
  object-fit: contain;
}

.login-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
  color: #1f2f60;
  -webkit-text-fill-color: #1f2f60;
}

.login-subtitle {
  font-size: 11px;
  color: #7a90b8;
  margin: 0;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ── Login Form ── */
.login-form .form-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #3a5080;
  margin-bottom: 6px;
}

.login-form .input-group-text {
  background: #f0f4fa;
  border: 1px solid rgba(31,47,96,0.2);
  border-right: none;
  color: #4a6090;
}
.login-form .form-control {
  background: #ffffff;
  border: 1px solid rgba(31,47,96,0.2);
  border-left: none;
  color: #1f2f60;
  font-size: 13.5px;
}
.login-form .form-control::placeholder { color: #9aacc8; }
.login-form .form-control:focus {
  background: #ffffff;
  border-color: #f9be3e;
  box-shadow: 0 0 0 3px rgba(249,190,62,0.2);
  color: #1f2f60;
  outline: none;
}
.login-form .input-group:focus-within .input-group-text {
  border-color: #f9be3e;
  background: #fffbeb;
}
.login-form .btn-outline-secondary {
  background: #f0f4fa;
  border: 1px solid rgba(31,47,96,0.2);
  border-left: none;
  color: #4a6090;
}
.login-form .btn-outline-secondary:hover {
  background: #dce8f8;
  color: #1f2f60;
}
.login-form .input-group:focus-within .btn-outline-secondary {
  border-color: #f9be3e;
}

/* ── Login Button ── */
.login-btn,
.login-btn.btn,
.login-btn.btn-primary,
#login-btn {
  background: linear-gradient(135deg, #f9be3e 0%, #e6a52c 100%) !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px !important;
  border-radius: var(--r-sm) !important;
  letter-spacing: 0.5px !important;
  color: #1f2f60 !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 16px rgba(249,190,62,0.4) !important;
  margin-top: 10px !important;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: block;
}
.login-btn::before { display: none; }
.login-btn:hover,
#login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(249,190,62,0.5) !important;
  background: linear-gradient(135deg, #fcd068 0%, #f9be3e 100%) !important;
  color: #1f2f60 !important;
}
.login-btn:active { transform: translateY(0); }

/* ── Login error ── */
#login-error {
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.25);
  color: #dc2626;
  font-size: 12.5px;
  border-radius: var(--r-sm);
  animation: shakeX 0.5s ease;
}
@keyframes shakeX {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-5px); }
  40%,80%  { transform: translateX(5px); }
}

/* ── Login footer ── */
.login-footer {
  position: relative;
  z-index: 10;
  margin-top: 24px;
  font-size: 11px;
  color: #7a90b8;
  letter-spacing: 0.5px;
  animation: cardRise 1s 0.3s cubic-bezier(0.16,1,0.3,1) both;
}


/* ═════════════════════════════════════════════════════════════════════════
   APP WRAPPER
   ═════════════════════════════════════════════════════════════════════════ */
.app-wrapper {
  display: block;
  position: relative;
  min-height: 100vh;
  background: #f0f4fa;
}


/* ── Sidebar toggle button ── */
.sidebar-toggle-btn {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(160,190,230,0.14);
  border-radius: var(--r-sm);
  color: var(--text-subtle);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t);
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover { color: var(--text); background: var(--glass-hover); border-color: var(--border-accent); }

/* ── Sidebar icon button ── */
.sidebar-icon-btn {
  position: relative;
  width: 34px; height: 34px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--t);
  flex-shrink: 0;
}
.sidebar-icon-btn:hover { background: var(--glass-hover); color: var(--text); border-color: var(--border-accent); }

/* Notification badge */
.notification-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  background: var(--danger);
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--bg-surface);
  animation: badgePop 2.5s ease-in-out infinite;
}
@keyframes badgePop {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  60%     { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

/* Notification dropdown */
.notification-panel {
  width: 320px;
  background: linear-gradient(160deg, #363d52 0%, #252d3e 100%) !important;
  border: 1px solid rgba(249,190,62,0.22) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 0 !important;
  overflow: hidden;
}
.notification-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px;
  color: var(--text);
}
.notification-header .btn-link { color: var(--primary-light); font-size: 11.5px; }
.notification-list { max-height: 300px; overflow-y: auto; }
.notification-empty {
  padding: 36px 16px; text-align: center;
  color: var(--text-muted); font-size: 13px;
}
.notification-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: 0.4; }

.notification-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  transition: var(--t);
  cursor: pointer;
}
.notification-item:hover { background: var(--glass-hover); }
.notification-item.unread {
  border-left: 3px solid var(--primary);
  background: rgba(249,190,62,0.04);
}

/* User button */
.navbar-user-btn {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 10px 5px 5px;
  color: var(--text);
  cursor: pointer;
  transition: var(--t);
}
.navbar-user-btn:hover {
  background: var(--glass-hover);
  border-color: var(--border-accent);
}

/* Avatars */
.user-avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-dark) 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  box-shadow: 0 0 10px var(--primary-glow);
}
.user-avatar-lg {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-dark) 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  box-shadow: 0 0 16px var(--primary-glow);
  flex-shrink: 0;
}

.navbar-username { font-size: 13px; font-weight: 500; }

/* User dropdown */
.user-dropdown {
  background: linear-gradient(160deg, #363d52 0%, #252d3e 100%) !important;
  border: 1px solid rgba(249,190,62,0.22) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-xl) !important;
  min-width: 210px;
  padding: 4px;
}
.dropdown-user-info {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
}
.dropdown-user-info .fw-semibold { font-size: 13px; color: var(--text); }
.dropdown-user-info .text-muted  { font-size: 11.5px; color: var(--text-muted); }

.user-dropdown .dropdown-item {
  color: var(--text-subtle); font-size: 13px;
  border-radius: var(--r-xs);
  padding: 8px 12px;
  transition: var(--t);
}
.user-dropdown .dropdown-item:hover {
  background: var(--glass-hover);
  color: var(--text);
}
.user-dropdown .dropdown-item.text-danger { color: #f87171 !important; }
.user-dropdown .dropdown-item.text-danger:hover { background: rgba(239,68,68,0.1); color: #fca5a5 !important; }

.dropdown-divider { border-color: var(--border) !important; margin: 4px 0; }


/* ═════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═════════════════════════════════════════════════════════════════════════ */

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid rgba(31,47,96,0.12);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 900;
  transition: width var(--t-lg), transform var(--t-lg);
  box-shadow: 4px 0 24px rgba(0,0,0,0.35);
}

/* Sidebar brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  min-height: 64px;
  background: #1f2f60;
  flex-shrink: 0;
}
.sidebar-brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 2px 4px;
}

.sidebar-brand-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: #1f2f60; font-size: 15px;
  box-shadow: 0 4px 14px var(--primary-glow);
  flex-shrink: 0;
  animation: iconGlow 3s ease-in-out infinite alternate;
}
@keyframes iconGlow {
  from { box-shadow: 0 4px 14px var(--primary-glow); }
  to   { box-shadow: 0 4px 20px var(--primary-glow), 0 0 30px var(--accent-glow); }
}
.sidebar-brand-title {
  font-size: 13.5px; font-weight: 700;
  color: #ffffff;
  display: block; letter-spacing: -0.2px;
}
.sidebar-brand-sub {
  font-size: 10px; color: rgba(255,255,255,0.55);
  display: block; letter-spacing: 0.5px;
}

/* Sidebar nav */
.sidebar-nav { flex: 1; padding: 6px 0 12px; }
.nav-section { padding: 6px 0 2px; }

.nav-section-label {
  display: block;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #555555;
  padding: 8px 16px 4px;
}

/* Nav items */
.nav-item { position: relative; margin: 1px 8px; }
.nav-item.disabled { opacity: 0.4; pointer-events: none; }

/* ── Coming Soon — e-Invoice highlight ─────────────────────────────────── */
.nav-section-label--coming-soon {
  color: #f9be3e !important;
  text-shadow: 0 0 8px rgba(249,190,62,0.45);
}

.nav-item--coming-soon {
  pointer-events: none;
}

.nav-link-coming-soon {
  background: linear-gradient(90deg,
    rgba(249,190,62,0.18) 0%,
    rgba(249,190,62,0.08) 60%,
    transparent 100%);
  border: 1px solid rgba(249,190,62,0.30);
  border-radius: 7px;
  position: relative;
  overflow: hidden;
}

/* shimmer sweep */
.nav-link-coming-soon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(249,190,62,0.20) 50%,
    transparent 70%);
  background-size: 200% 100%;
  animation: coming-soon-shimmer 2.4s ease-in-out infinite;
}

@keyframes coming-soon-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.badge-coming-soon {
  background: linear-gradient(135deg, #f9be3e 0%, #e6952a 100%) !important;
  color: #1a2754 !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 3px 7px;
  border-radius: 20px;
  animation: coming-soon-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(249,190,62,0.50);
  flex-shrink: 0;
}

@keyframes coming-soon-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(249,190,62,0.45); }
  50%       { box-shadow: 0 0 14px rgba(249,190,62,0.85); }
}

.nav-link-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: #111111;
  cursor: pointer;
  transition: all var(--t);
  font-size: 12.5px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  user-select: none;
  text-decoration: none;
}
.nav-link-main:hover {
  background: rgba(31,47,96,0.07);
  color: #1f2f60;
}

/* Active nav item */
[data-page].active,
.nav-link-main.active {
  background: rgba(31,47,96,0.1) !important;
  color: #1f2f60 !important;
  font-weight: 600 !important;
}
[data-page].active::before,
.nav-link-main.active::before {
  content: '';
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 3px;
  background: linear-gradient(to bottom, var(--primary), var(--primary-dark));
  border-radius: 0 2px 2px 0;
}

/* Nav sub-link active */
.nav-sub-link.active {
  background: rgba(249,190,62,0.15) !important;
  color: #1f2f60 !important;
  font-weight: 600;
}

.nav-icon {
  font-size: 14px; flex-shrink: 0;
  width: 18px; text-align: center;
  opacity: 0.75;
  transition: var(--t);
}
[data-page].active .nav-icon,
.nav-link-main.active .nav-icon { opacity: 1; }
.nav-link-main:hover .nav-icon { opacity: 0.95; }

.nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-arrow { font-size: 10px; opacity: 0.5; transition: transform var(--t); }
.nav-item.open > .nav-link-main .nav-arrow { transform: rotate(180deg); }

/* Sub menu */
.nav-sub-menu {
  display: none;
  padding: 2px 0 2px 22px;
}
.nav-sub-menu.open {
  display: block;
  animation: subMenuIn 0.2s ease;
}
@keyframes subMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: #222222;
  font-size: 12px; font-weight: 400;
  transition: var(--t);
  cursor: pointer;
  text-decoration: none;
  margin: 1px 0;
}
.nav-sub-link:hover {
  background: rgba(31,47,96,0.07);
  color: #1f2f60;
}

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid rgba(31,47,96,0.1);
  flex-shrink: 0;
  background: #ffffff;
}
.sidebar-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(31,47,96,0.07);
}
.sidebar-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(31,47,96,0.05);
  border: 1px solid rgba(31,47,96,0.12);
  border-radius: var(--r-sm);
  padding: 5px 10px 5px 5px;
  color: #1f2f60;
  cursor: pointer;
  transition: var(--t);
  font-size: 12.5px;
  text-align: left;
}
.sidebar-user-btn:hover { background: rgba(31,47,96,0.09); border-color: rgba(31,47,96,0.25); }
.sidebar-username { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1f2f60; }
.sidebar-status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 11px;
  color: #333333;
}
.sidebar-status-dot { font-size: 7px; animation: statusBlink 2s ease-in-out infinite; }
@keyframes statusBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.sidebar-status-text { font-size: 11px; }

/* ── Sidebar collapsed → mini icon-only mode ── */
.sidebar-collapsed .sidebar { width: var(--sidebar-mini); overflow: hidden; }
.sidebar-collapsed .main-content { margin-left: var(--sidebar-mini) !important; }

/* ── Sidebar hover-expand mode ───────────────────────────────────────────────
   Default: icon-only (mini). On hover: slides open over content (no layout shift).
   Uses opacity + max-width/max-height transitions so text slides in smoothly.
   ─────────────────────────────────────────────────────────────────────────── */
.sidebar-hover-mode .sidebar {
  width: var(--sidebar-mini);
  overflow: hidden;
  transition: width 0.28s cubic-bezier(.4,0,.2,1),
              box-shadow 0.28s ease;
}
.sidebar-hover-mode .main-content {
  margin-left: var(--sidebar-mini) !important;
  transition: margin-left 0.28s cubic-bezier(.4,0,.2,1);
}
.sidebar-hover-mode .sidebar:hover ~ .main-content {
  margin-left: var(--sidebar-w) !important;
}

/* ── Icon-only layout in collapsed state ── */
.sidebar-hover-mode .sidebar .nav-link-main   { justify-content: center; padding: 10px 0; transition: padding 0.2s, justify-content 0s; }
.sidebar-hover-mode .sidebar .nav-icon         { width: 100%; text-align: center; margin: 0; flex-shrink: 0; }
.sidebar-hover-mode .sidebar .sidebar-brand    { justify-content: center; padding: 12px 8px; }
.sidebar-hover-mode .sidebar .sidebar-user-row { justify-content: center; padding: 10px 8px; flex-wrap: wrap; }
.sidebar-hover-mode .sidebar .sidebar-toggle-btn { margin: 0 auto; }

/* ── Text elements: fade+clip out (keep in DOM for transition) ── */
.sidebar-hover-mode .sidebar .nav-label,
.sidebar-hover-mode .sidebar .nav-arrow,
.sidebar-hover-mode .sidebar .sidebar-brand-text,
.sidebar-hover-mode .sidebar .sidebar-username,
.sidebar-hover-mode .sidebar .sidebar-status-text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.15s ease, max-width 0.22s cubic-bezier(.4,0,.2,1);
}

/* Section labels — hide with max-height */
.sidebar-hover-mode .sidebar .nav-section-label {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity 0.15s ease, max-height 0.22s cubic-bezier(.4,0,.2,1);
}
/* Logo — hide with BOTH max-height AND max-width so it takes no flex space */
.sidebar-hover-mode .sidebar .sidebar-brand-logo {
  opacity: 0;
  max-height: 0;
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity 0.15s ease, max-height 0.22s cubic-bezier(.4,0,.2,1),
              max-width 0.22s cubic-bezier(.4,0,.2,1);
}

/* Sub-menus still controlled by JS — keep display:none */
.sidebar-hover-mode .sidebar .sidebar-sub-menu { display: none !important; }
.sidebar-hover-mode .sidebar .nav-sub-menu     { display: none !important; }

/* ── On hover: slide open ── */
.sidebar-hover-mode .sidebar:hover {
  width: var(--sidebar-w);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 8px 0 40px rgba(0,0,0,0.4);
}

/* Restore layout on hover */
.sidebar-hover-mode .sidebar:hover .nav-link-main   { justify-content: flex-start; padding: 8px 10px; }
.sidebar-hover-mode .sidebar:hover .nav-icon         { width: auto; text-align: left; margin: 0; }
.sidebar-hover-mode .sidebar:hover .sidebar-brand    { justify-content: flex-start; padding: 12px 14px; }
.sidebar-hover-mode .sidebar:hover .sidebar-user-row { justify-content: flex-start; padding: 10px 12px; flex-wrap: nowrap; }
.sidebar-hover-mode .sidebar:hover .sidebar-toggle-btn { margin: 0; }

/* Slide + fade text in after width starts expanding (0.1s delay) */
.sidebar-hover-mode .sidebar:hover .nav-label,
.sidebar-hover-mode .sidebar:hover .nav-arrow,
.sidebar-hover-mode .sidebar:hover .sidebar-brand-text,
.sidebar-hover-mode .sidebar:hover .sidebar-username,
.sidebar-hover-mode .sidebar:hover .sidebar-status-text {
  opacity: 1;
  max-width: 220px;
  pointer-events: auto;
  transition: opacity 0.18s ease 0.12s, max-width 0.22s cubic-bezier(.4,0,.2,1) 0.06s;
}

.sidebar-hover-mode .sidebar:hover .nav-section-label {
  opacity: 1;
  max-height: 40px;
  pointer-events: auto;
  padding: 8px 16px 4px !important;
  transition: opacity 0.18s ease 0.12s, max-height 0.22s cubic-bezier(.4,0,.2,1) 0.06s;
}
.sidebar-hover-mode .sidebar:hover .sidebar-brand-logo {
  opacity: 1;
  max-height: 40px;
  max-width: 120px;
  pointer-events: auto;
  transition: opacity 0.18s ease 0.12s, max-height 0.22s cubic-bezier(.4,0,.2,1) 0.06s,
              max-width 0.22s cubic-bezier(.4,0,.2,1) 0.06s;
}

.sidebar-hover-mode .sidebar:hover .nav-sub-menu.open { display: block !important; }
.sidebar-hover-mode .sidebar:hover .sidebar-sub-menu  { display: block !important; }

/* Hide text labels in mini mode */
.sidebar-collapsed .sidebar .sidebar-brand-text,
.sidebar-collapsed .sidebar .nav-label,
.sidebar-collapsed .sidebar .nav-arrow,
.sidebar-collapsed .sidebar .nav-section-label,
.sidebar-collapsed .sidebar .sidebar-sub-menu,
.sidebar-collapsed .sidebar .nav-sub-menu,
.sidebar-collapsed .sidebar .sidebar-username,
.sidebar-collapsed .sidebar .sidebar-status-text,
.sidebar-collapsed .sidebar .sidebar-brand-logo { display: none !important; }

.sidebar-collapsed .sidebar .nav-link-main { justify-content: center; padding: 10px 0; }
.sidebar-collapsed .sidebar .nav-icon { width: 100%; text-align: center; margin: 0; }
.sidebar-collapsed .sidebar .sidebar-brand { justify-content: center; padding: 12px 8px; }
.sidebar-collapsed .sidebar .sidebar-user-row { justify-content: center; padding: 10px 8px; flex-wrap: wrap; }
.sidebar-collapsed .sidebar .sidebar-user-btn { padding: 5px; border-radius: 50%; width: 34px; height: 34px; justify-content: center; }
.sidebar-collapsed .sidebar .sidebar-status-row { justify-content: center; padding: 8px; }
.sidebar-collapsed .sidebar .sidebar-toggle-btn { margin: 0 auto; }

/* Badge in collapsed mode — show as small pill overlay on top-right of icon */
.sidebar-collapsed .sidebar .nav-link-main { position: relative; }
.sidebar-collapsed .sidebar .nav-link-main .badge {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: .48rem;
  padding: 2px 4px;
  line-height: 1.2;
  letter-spacing: .02em;
  border-radius: 4px;
  z-index: 2;
  white-space: nowrap;
}


/* ═════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═════════════════════════════════════════════════════════════════════════ */

.main-content {
  margin-top: 0;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f0f4fa;
  transition: margin-left var(--t-lg);
}

/* Breadcrumb bar */
.breadcrumb-bar {
  background: #dce8f8;
  border-bottom: 1px solid rgba(31,47,96,0.1);
  padding: 8px 20px;
  display: flex; align-items: center;
}
.breadcrumb { margin: 0; font-size: 12px; }
.breadcrumb-item { color: #4a6090; }
.breadcrumb-item + .breadcrumb-item::before { color: #7a90b8; }
.breadcrumb-item.active { color: #1f2f60; font-weight: 600; }
.breadcrumb-item a { color: #4a6090; }
.breadcrumb-item a:hover { color: #1f2f60; }

/* Page title bar */
.page-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #dce8f8;
  border-bottom: 1px solid rgba(31,47,96,0.12);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px);
}
.page-title-bar h4 {
  font-size: 15px; font-weight: 700;
  color: #1f2f60; margin: 0;
  letter-spacing: -0.2px;
}
.page-actions { display: flex; gap: 8px; align-items: center; }

/* Page container */
.page-container { padding: 20px; }

/* Page enter animation */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#page-container > * {
  animation: pageIn 0.28s ease both;
}


/* ═════════════════════════════════════════════════════════════════════════
   CARDS
   ═════════════════════════════════════════════════════════════════════════ */

.card {
  background: rgba(38,58,120,0.90);
  border: 1px solid rgba(249,190,62,0.18);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t), box-shadow var(--t);
  overflow: hidden;
}
.card:hover {
  border-color: rgba(249,190,62,0.35);
  box-shadow: 0 4px 24px rgba(249,190,62,0.12);
}

.card-header {
  background: rgba(249,190,62,0.07);
  border-bottom: 1px solid rgba(249,190,62,0.15);
  padding: 12px 16px;
  font-weight: 600; font-size: 13px;
  color: var(--text);
}

.card-body { padding: 16px; color: var(--text); }

/* Filter card */
.filter-card {
  background: rgba(38,58,120,0.90);
  border: 1px solid rgba(249,190,62,0.18);
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

/* Stat card */
.stat-card {
  background: rgba(38,58,120,0.90);
  border: 1px solid rgba(249,190,62,0.18);
  border-radius: var(--r);
  padding: 20px;
  position: relative; overflow: hidden;
  transition: all var(--t);
  cursor: default;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-bright);
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}
.stat-card:hover::after { transform: scaleX(1); }

/* Stat card background glow icon */
.stat-card .stat-icon {
  font-size: 48px;
  position: absolute;
  right: -8px; bottom: -8px;
  opacity: 0.05;
  transition: var(--t);
}
.stat-card:hover .stat-icon { opacity: 0.08; transform: scale(1.1); }

/* Page card (used in form pages) */
.page-card {
  background: rgba(38,58,120,0.90);
  border: 1px solid rgba(249,190,62,0.18);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.page-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(249,190,62,0.15);
  background: rgba(249,190,62,0.06);
}
.page-card-body { padding: 18px; }


/* ═════════════════════════════════════════════════════════════════════════
   FORMS
   ═════════════════════════════════════════════════════════════════════════ */

.form-label {
  color: var(--text-subtle);
  font-size: 11.5px; font-weight: 500;
  margin-bottom: 5px;
}
.form-label-sm { font-size: 11px; }

.form-control, .form-select {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(160,190,230,0.18);
  color: var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  transition: var(--t);
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.11);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  color: var(--text);
  outline: none;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled, .form-select:disabled {
  background: rgba(255,255,255,0.03);
  opacity: 0.55; cursor: not-allowed;
}
.form-control-sm, .form-select-sm { font-size: 12.5px; padding: 4px 10px; }

.input-group-text {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(160,190,230,0.18);
  color: var(--text-subtle); font-size: 13px;
}
.input-group:focus-within .input-group-text { border-color: var(--primary); }

.form-select option {
  background: var(--bg-elevated);
  color: var(--text);
}

.form-check-input {
  background-color: rgba(255,255,255,0.07);
  border: 1px solid var(--border-bright);
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-label { color: var(--text-subtle); font-size: 13px; }

textarea.form-control { resize: vertical; min-height: 80px; }

.required-asterisk { color: var(--danger); }


/* ═════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════════════════════════════════════ */

.btn {
  font-size: 12.5px; font-weight: 500;
  border-radius: var(--r-sm);
  padding: 6px 14px;
  transition: all var(--t);
  letter-spacing: 0.2px;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.15s;
}
.btn:hover::after { background: rgba(255,255,255,0.07); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: 1px solid rgba(249,190,62,0.4);
  color: #1f2f60;
  box-shadow: 0 2px 10px rgba(249,190,62,0.3);
}
.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(249,190,62,0.45);
  border-color: rgba(249,190,62,0.7);
  color: #1f2f60;
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  border: 1px solid rgba(16,185,129,0.4);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16,185,129,0.25);
}
.btn-success:hover {
  box-shadow: 0 4px 20px rgba(16,185,129,0.4);
  color: #fff; transform: translateY(-1px);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid rgba(239,68,68,0.4);
  color: #fff;
  box-shadow: 0 2px 10px rgba(239,68,68,0.2);
}
.btn-danger:hover { box-shadow: 0 4px 20px rgba(239,68,68,0.35); color: #fff; transform: translateY(-1px); }

.btn-warning {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: 1px solid rgba(249,190,62,0.4);
  color: #1f2f60;
  font-weight: 600;
}
.btn-warning:hover { color: #1f2f60; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(249,190,62,0.4); }

.btn-secondary {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-subtle);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
  border-color: var(--border-bright);
}

.btn-outline-primary {
  background: transparent;
  border: 1px solid rgba(249,190,62,0.35);
  color: var(--primary);
}
.btn-outline-primary:hover {
  background: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary-light);
  box-shadow: 0 0 14px var(--primary-glow);
}

.btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.btn-outline-secondary:hover { background: var(--glass-hover); color: var(--text); }

.btn-outline-success {
  background: transparent;
  border: 1px solid rgba(16,185,129,0.35);
  color: var(--accent-light);
}
.btn-outline-success:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent-light);
  box-shadow: 0 0 14px var(--accent-glow);
}

.btn-outline-danger {
  background: transparent;
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
}
.btn-outline-danger:hover {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.6);
  color: #fca5a5;
}

.btn-outline-warning {
  background: transparent;
  border: 1px solid rgba(245,158,11,0.3);
  color: #fbbf24;
}
.btn-outline-warning:hover { background: rgba(245,158,11,0.1); color: #fcd34d; }

.btn-xs { padding: 2px 8px; font-size: 11px; border-radius: var(--r-xs); }
.btn-sm { padding: 4px 11px; font-size: 12px; }
.btn-link { color: var(--primary-light); text-decoration: none; background: transparent; border: none; padding: 0; }
.btn-link:hover { color: var(--primary-light); text-decoration: underline; }


/* ═════════════════════════════════════════════════════════════════════════
   TABLES
   ═════════════════════════════════════════════════════════════════════════ */

.table {
  color: var(--text);
  border-color: var(--border);
  font-size: 12.5px;
  margin: 0;
}
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--border);
  padding: 10px 12px;
  vertical-align: middle;
  color: var(--text);
}
.table-light {
  --bs-table-bg: rgba(255,255,255,0.025);
  --bs-table-color: var(--text-muted);
}
.table thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
  padding: 10px 12px;
}
.table-hover tbody tr:hover > * {
  background-color: rgba(249,190,62,0.07) !important;
}
.table-bordered > :not(caption) > * > * {
  border-width: 1px;
  border-color: var(--border);
}
.table-responsive { border-radius: var(--r-sm); overflow-x: auto; overflow-y: visible; }

/* Compact main report table */
.rpt-main-table { font-size: .78rem; }
.rpt-main-table thead th {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .45rem .5rem;
  white-space: nowrap;
}
.rpt-main-table tbody td { padding: .35rem .5rem; vertical-align: middle; }

/* xs button size */
.btn-xs { padding: .15rem .45rem; font-size: .72rem; line-height: 1.4; }

/* Scrollable report table — always-visible horizontal bar */
.rpt-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #4a6fa5 #1a2744;
  padding-bottom: 4px;          /* room for the bar */
}
.rpt-table-scroll::-webkit-scrollbar        { height: 8px; }
.rpt-table-scroll::-webkit-scrollbar-track  { background: #192752; border-radius: 4px; }
.rpt-table-scroll::-webkit-scrollbar-thumb  { background: #1f2f60; border-radius: 4px; }
.rpt-table-scroll::-webkit-scrollbar-thumb:hover { background: #26387a; }

.ewb-table tbody tr { transition: background var(--t); }

.table-empty {
  padding: 52px 16px;
  color: var(--text-muted);
  text-align: center;
}
.table-empty i { opacity: 0.3; font-size: 2.5rem; display: block; margin-bottom: 12px; }


/* ═════════════════════════════════════════════════════════════════════════
   BADGES
   ═════════════════════════════════════════════════════════════════════════ */

.badge {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  letter-spacing: 0.5px;
  display: inline-flex; align-items: center;
}
.bg-success   { background: rgba(15,217,160,0.16) !important; color: var(--accent-light) !important; border: 1px solid rgba(15,217,160,0.3) !important; }
.bg-danger    { background: rgba(248,113,113,0.16) !important; color: #fca5a5 !important;             border: 1px solid rgba(248,113,113,0.3) !important; }
.bg-warning   { background: rgba(251,191,36,0.16) !important;  color: #fcd34d !important;             border: 1px solid rgba(251,191,36,0.3) !important; }
.bg-primary   { background: rgba(249,190,62,0.18) !important;  color: var(--primary) !important; border: 1px solid rgba(249,190,62,0.32) !important; }
.bg-info      { background: rgba(56,189,248,0.16) !important;  color: #7dd3fc !important;             border: 1px solid rgba(56,189,248,0.3) !important; }
.bg-secondary { background: rgba(160,190,230,0.1) !important;  color: var(--text-subtle) !important;  border: 1px solid rgba(160,190,230,0.18) !important; }
.bg-white     { background: rgba(255,255,255,0.92) !important; color: var(--bg-base) !important; }


/* ═════════════════════════════════════════════════════════════════════════
   ALERTS
   ═════════════════════════════════════════════════════════════════════════ */

.alert {
  border-radius: var(--r-sm);
  font-size: 13px; padding: 10px 14px;
  border-width: 1px;
}
.alert-success { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); color: var(--accent-light); }
.alert-danger  { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.2);  color: #fca5a5; }
.alert-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: #fcd34d; }
.alert-info    { background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.2); color: #7dd3fc; }


/* ═════════════════════════════════════════════════════════════════════════
   MODALS
   ═════════════════════════════════════════════════════════════════════════ */

.modal-content {
  background: #ffffff;
  border: 1px solid rgba(31,47,96,0.15);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(31,47,96,0.18), 0 4px 20px rgba(31,47,96,0.08);
  color: #1f2f60;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid rgba(31,47,96,0.1);
  padding: 16px 20px;
  background: #f0f4fa;
}
.modal-title { font-size: 15px; font-weight: 700; color: #1f2f60; }
.btn-close { filter: none; opacity: 0.45; transition: var(--t); }
.btn-close:hover { opacity: 1; }
.modal-body { padding: 20px; color: #1f2f60; }
.modal-footer { border-top: 1px solid rgba(31,47,96,0.1); padding: 12px 20px; gap: 8px; background: #f8fafc; }
.modal-backdrop.show { opacity: 0.4; background: #1f2f60; }


/* ═════════════════════════════════════════════════════════════════════════
   NAV TABS
   ═════════════════════════════════════════════════════════════════════════ */

.nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 2px;
}
.nav-tabs .nav-link {
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 500;
  transition: var(--t);
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.nav-tabs .nav-link.active {
  color: var(--primary);
  background: rgba(249,190,62,0.1);
  border-bottom-color: var(--primary);
}


/* ═════════════════════════════════════════════════════════════════════════
   PAGINATION
   ═════════════════════════════════════════════════════════════════════════ */

.pagination { gap: 2px; }
.pagination .page-link {
  background: rgba(22,40,80,0.85);
  border: 1px solid rgba(249,190,62,0.2);
  color: var(--text-subtle);
  padding: 5px 11px; font-size: 12px;
  border-radius: var(--r-xs) !important;
  transition: var(--t);
}
.pagination .page-link:hover {
  background: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary-light);
}
.pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px var(--primary-glow);
}
.pagination .page-item.disabled .page-link {
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  border-color: var(--border);
}
.pagination-sm .page-link { padding: 3px 8px; font-size: 11.5px; }


/* ═════════════════════════════════════════════════════════════════════════
   LOADING OVERLAY
   ═════════════════════════════════════════════════════════════════════════ */

.loading-overlay, #loading-overlay {
  position: fixed !important;
  inset: 0;
  background: rgba(13,20,50,0.90);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#loading-overlay.d-none { display: none !important; }
.loading-spinner-box { text-align: center; }
.loading-text {
  color: var(--text-subtle); font-size: 13px;
  letter-spacing: 0.3px; margin-top: 14px;
}
.spinner-border {
  border-color: rgba(249,190,62,0.3);
  border-top-color: var(--primary);
  width: 2.5rem; height: 2.5rem;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ═════════════════════════════════════════════════════════════════════════
   TOAST
   ═════════════════════════════════════════════════════════════════════════ */

.toast {
  background: linear-gradient(160deg, #2d4490 0%, #1f2f60 100%);
  border: 1px solid rgba(249,190,62,0.22);
  border-radius: var(--r);
  box-shadow: var(--shadow-xl);
  color: var(--text);
  backdrop-filter: blur(16px);
  animation: toastSlide 0.3s cubic-bezier(0.16,1,0.3,1);
  max-width: 380px;
}
@keyframes toastSlide {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-success { border-left: 3px solid var(--accent); }
.toast-danger  { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info    { border-left: 3px solid var(--info); }
.toast-body { font-size: 12.5px; padding: 10px 12px; }


/* ═════════════════════════════════════════════════════════════════════════
   DROPDOWN MENUS (generic)
   ═════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
  background: linear-gradient(160deg, #2d4490 0%, #1f2f60 100%);
  border: 1px solid rgba(249,190,62,0.22);
  border-radius: var(--r);
  box-shadow: var(--shadow-xl);
  padding: 4px;
  animation: dropIn 0.18s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  color: var(--text-subtle);
  border-radius: var(--r-xs);
  font-size: 13px; padding: 8px 12px;
  transition: var(--t);
}
.dropdown-item:hover { background: var(--glass-hover); color: var(--text); }
.dropdown-divider { border-color: var(--border); margin: 4px 0; opacity: 1; }


/* ═════════════════════════════════════════════════════════════════════════
   MISC UTILITIES
   ═════════════════════════════════════════════════════════════════════════ */

.text-muted    { color: var(--text-muted) !important; }
.text-primary  { color: var(--primary-light) !important; }
.text-success  { color: var(--accent-light) !important; }
.text-danger   { color: #f87171 !important; }
.text-warning  { color: #fbbf24 !important; }
.text-info     { color: #7dd3fc !important; }

.fw-semibold { font-weight: 600; }
.fw-bold     { font-weight: 700; }

.bg-light    { background: rgba(255,255,255,0.04) !important; }
.border      { border-color: var(--border) !important; }
.border-success { border-color: rgba(16,185,129,0.3) !important; }
.border-danger  { border-color: rgba(239,68,68,0.3) !important; }
.border-secondary { border-color: var(--border) !important; }

.rounded, .rounded-3 { border-radius: var(--r) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }

.font-monospace { font-family: 'Consolas', 'Courier New', monospace; font-size: 11.5px; }

hr { border-color: var(--border); opacity: 1; }

small, .small { font-size: 11.5px; color: var(--text-muted); }

/* List group */
.list-group-item {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  font-size: 12.5px;
}
.list-group-flush .list-group-item { border-width: 0 0 1px; }
.list-group-flush .list-group-item:last-child { border-bottom-width: 0; }

/* Progress */
.progress { background: rgba(255,255,255,0.07); border-radius: 4px; height: 6px; }
.progress-bar { background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 4px; }

/* Canvas (Chart.js) */
canvas:not(#login-three-bg) { border-radius: var(--r-sm); }

/* Input range */
input[type="range"] { accent-color: var(--primary); }

/* ═════════════════════════════════════════════════════════════════════════
   DASHBOARD — STAT CARDS
   ═════════════════════════════════════════════════════════════════════════ */

.stat-card {
  position: relative;
  border-radius: var(--r-lg);
  padding: 22px 20px 18px;
  overflow: hidden;
  cursor: default;
  transition: all 0.25s ease;
  border: 1px solid;
  /* Equal height — all cards same height in the row */
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.stat-card:hover { transform: translateY(-4px); }
.stat-bg-icon {
  position: absolute;
  right: -6px; top: -4px;
  font-size: 74px;
  opacity: 0.08;
  transition: all 0.3s;
  pointer-events: none;
}
.stat-card:hover .stat-bg-icon { opacity: 0.15; transform: scale(1.08) rotate(5deg); }
.stat-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 7px;
  letter-spacing: -1px;
  color: #000000;
}
.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #1a1a1a;
  opacity: 0.8;
}
.stat-sub { font-size: 11px; margin-top: 9px; color: #333333; opacity: 0.75; }

.stat-primary { background: linear-gradient(135deg, rgba(249,190,62,0.18), rgba(249,190,62,0.06));  border-color: rgba(249,190,62,0.35);  color: #000000; box-shadow: 0 4px 24px rgba(249,190,62,0.12); }
.stat-teal    { background: linear-gradient(135deg, rgba(15,217,160,0.18), rgba(15,217,160,0.06));   border-color: rgba(15,217,160,0.35);  color: #000000; box-shadow: 0 4px 24px rgba(15,217,160,0.12); }
.stat-violet  { background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(167,139,250,0.06)); border-color: rgba(167,139,250,0.35); color: #000000; box-shadow: 0 4px 24px rgba(167,139,250,0.12); }
.stat-green   { background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.06));     border-color: rgba(34,197,94,0.35);   color: #000000; box-shadow: 0 4px 24px rgba(34,197,94,0.12); }
.stat-danger  { background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(248,113,113,0.06)); border-color: rgba(248,113,113,0.35); color: #000000; box-shadow: 0 4px 24px rgba(248,113,113,0.12); }
.stat-amber   { background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(251,191,36,0.07));   border-color: rgba(251,191,36,0.38);  color: #fde68a; box-shadow: 0 4px 24px rgba(251,191,36,0.14); }


/* ═════════════════════════════════════════════════════════════════════════
   DASHBOARD — STATUS PANELS
   ═════════════════════════════════════════════════════════════════════════ */

.dash-panel {
  background: #ffffff;
  border-radius: var(--r-lg);
  border: 1px solid rgba(31,47,96,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(31,47,96,0.07);
}
.dash-panel-header {
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1f2f60;
  background: #f0f4fa;
  border-bottom: 1px solid rgba(31,47,96,0.1);
}
.dash-panel-body { flex: 1; }
.dash-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid rgba(31,47,96,0.07);
  font-size: 12.5px;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s;
  gap: 8px;
}
.dash-panel-item:hover { background: rgba(31,47,96,0.04); color: #000000; }
.dash-panel-item a { color: #1a1a1a; text-decoration: none; flex: 1; }
.dash-panel-item a:hover { color: #1f2f60; }
.dash-panel-item .fw-semibold { color: #000000; }

.dash-panel-danger  .dash-panel-header { background: #fff5f5; color: #b91c1c; border-bottom: 1px solid rgba(239,68,68,0.15); }
.dash-panel-primary .dash-panel-header { background: #fffbeb; color: #b45309; border-bottom: 1px solid rgba(245,158,11,0.2); }
.dash-panel-accent  .dash-panel-header { background: #f0fdf4; color: #065f46; border-bottom: 1px solid rgba(16,185,129,0.2); }


/* ═════════════════════════════════════════════════════════════════════════
   DASHBOARD — SECTION TITLE
   ═════════════════════════════════════════════════════════════════════════ */

.dash-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #1f2f60;
  letter-spacing: 0.3px;
  margin: 8px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-section-title small { color: #dc2626; font-weight: 400; opacity: 0.85; }
.dash-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 6px;
}


/* ═════════════════════════════════════════════════════════════════════════
   DASHBOARD — EWB TILES
   ═════════════════════════════════════════════════════════════════════════ */

.ewb-tile {
  border-radius: var(--r-lg);
  padding: 18px 14px 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid;
  transition: all 0.25s ease;
  cursor: default;
  min-height: 136px;
}
.ewb-tile:hover { transform: translateY(-4px); }

.tile-letter {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 28px;
  font-weight: 900;
  opacity: 0.1;
  line-height: 1;
  pointer-events: none;
}
.tile-icon  { font-size: 20px; opacity: 0.75; }
.tile-count { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: #000000; }
.tile-label { font-size: 11px; font-weight: 600; color: #1a1a1a; line-height: 1.3; }
.tile-link  {
  font-size: 10.5px; font-weight: 600;
  text-decoration: none;
  margin-top: auto; padding-top: 4px;
  letter-spacing: 0.2px; color: #1f2f60;
  transition: opacity 0.15s;
}
.tile-link:hover { text-decoration: underline; color: #000000; }

/* Colour variants — black text on all pastel backgrounds */
.ewb-tile-a     { background: linear-gradient(135deg, rgba(251,191,36,0.17), rgba(251,191,36,0.06));   border-color: rgba(251,191,36,0.35);  color: #000000; box-shadow: 0 4px 18px rgba(251,191,36,0.1); }
.ewb-tile-b     { background: linear-gradient(135deg, rgba(56,189,248,0.17), rgba(56,189,248,0.06));   border-color: rgba(56,189,248,0.35);  color: #000000; box-shadow: 0 4px 18px rgba(56,189,248,0.1); }
.ewb-tile-c     { background: linear-gradient(135deg, rgba(15,217,160,0.17), rgba(15,217,160,0.06));   border-color: rgba(15,217,160,0.35);  color: #000000; box-shadow: 0 4px 18px rgba(15,217,160,0.1); }
.ewb-tile-d     { background: linear-gradient(135deg, rgba(248,113,113,0.17), rgba(248,113,113,0.06)); border-color: rgba(248,113,113,0.35); color: #000000; box-shadow: 0 4px 18px rgba(248,113,113,0.1); }
.ewb-tile-e     { background: linear-gradient(135deg, rgba(148,163,184,0.14), rgba(148,163,184,0.05)); border-color: rgba(148,163,184,0.28); color: #000000; }
.ewb-tile-f     { background: linear-gradient(135deg, rgba(239,68,68,0.17), rgba(239,68,68,0.06));     border-color: rgba(239,68,68,0.35);   color: #000000; box-shadow: 0 4px 18px rgba(239,68,68,0.1); }
.ewb-tile-inc-a { background: linear-gradient(135deg, rgba(249,190,62,0.17), rgba(249,190,62,0.06));   border-color: rgba(249,190,62,0.35);  color: #000000; box-shadow: 0 4px 18px rgba(249,190,62,0.1); }
.ewb-tile-inc-b { background: linear-gradient(135deg, rgba(248,113,113,0.17), rgba(248,113,113,0.06)); border-color: rgba(248,113,113,0.35); color: #000000; }
.ewb-tile-act-a { background: linear-gradient(135deg, rgba(56,189,248,0.17), rgba(56,189,248,0.06));   border-color: rgba(56,189,248,0.35);  color: #000000; }
.ewb-tile-act-b { background: linear-gradient(135deg, rgba(15,217,160,0.17), rgba(15,217,160,0.06));   border-color: rgba(15,217,160,0.35);  color: #000000; }
.ewb-tile-act-c { background: linear-gradient(135deg, rgba(167,139,250,0.17), rgba(167,139,250,0.06)); border-color: rgba(167,139,250,0.35); color: #000000; }
.ewb-tile-cewb-a{ background: linear-gradient(135deg, rgba(251,146,60,0.17), rgba(251,146,60,0.06));   border-color: rgba(251,146,60,0.35);  color: #000000; }
.ewb-tile-cewb-b{ background: linear-gradient(135deg, rgba(167,139,250,0.17), rgba(167,139,250,0.06)); border-color: rgba(167,139,250,0.35); color: #000000; }
.ewb-tile-cewb-c{ background: linear-gradient(135deg, rgba(34,197,94,0.17), rgba(34,197,94,0.06));     border-color: rgba(34,197,94,0.35);   color: #000000; }


/* ── Mobile overlay backdrop ── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1039;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
#sidebar-overlay.show { display: block; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   ══════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Body: prevent horizontal scroll on mobile ── */
  body { overflow-x: hidden !important; }

  /* ── Sidebar: hidden off-screen by default ── */
  .sidebar {
    transform: translateX(-100%) !important;
    width: var(--sidebar-w) !important;
    z-index: 1050;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: none;
  }
  /* Show when toggled */
  .sidebar.show {
    transform: translateX(0) !important;
    box-shadow: 4px 0 40px rgba(31,47,96,0.18);
  }

  /* Collapsed variant also hidden on mobile */
  .sidebar-collapsed .sidebar {
    transform: translateX(-100%) !important;
    width: var(--sidebar-w) !important;
  }
  .sidebar-collapsed .sidebar.show {
    transform: translateX(0) !important;
  }
  .sidebar-collapsed .main-content { margin-left: 0 !important; }

  /* ── Main content: always full width on mobile ── */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0;
  }

  /* ── Page layout ── */
  .page-container { padding: 10px 8px; }
  .page-card { border-radius: var(--r-sm); }
  .page-card-body { padding: 12px 10px; }
  .page-title-bar { padding: 10px 14px; }
  .page-title-bar h4 { font-size: 13px; }

  /* ── Stat cards: 3 per row on tablet, 2 on mobile ── */
  .am-stat-card { padding: 12px 8px; }
  .am-stat-count { font-size: 1.6rem; }
  .am-stat-label { font-size: .62rem; }

  /* ── Dashboard tiles: 2 columns ── */
  .ewb-tile { min-height: 110px; padding: 12px 10px 10px; }
  .tile-count { font-size: 22px; }

  /* ── Health chips wrap on mobile ── */
  .am-health-bar { flex-wrap: wrap; gap: 6px !important; }
  .am-health-chip { font-size: .75rem; padding: .25rem .6rem; }

  /* ── Drop zone smaller ── */
  .am-dropzone { padding: 1rem; }
  .am-dropzone .fs-1 { font-size: 2rem !important; }

  /* ── Tables scroll horizontally ── */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rpt-table-scroll  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rpt-main-table { font-size: .72rem; }

  /* ── Modals full screen ── */
  .modal-dialog { margin: 0.4rem; }
  .modal-xl, .modal-lg { max-width: calc(100vw - 0.8rem) !important; }

  /* ── Filters stack vertically ── */
  .filter-card .row { gap: 8px; }

  /* ── Pagination wraps ── */
  .pagination { flex-wrap: wrap; gap: 2px; }

  /* ── Breadcrumb shorter ── */
  .breadcrumb-bar { padding: 6px 14px; }
}

/* ── Small phones (≤575px) ── */
@media (max-width: 575px) {
  .page-container { padding: 6px 4px; }

  /* 2-column stat grid */
  .am-stat-card { padding: 10px 6px; }
  .am-stat-count { font-size: 1.4rem; }

  /* Hide less critical table columns */
  .rpt-main-table th:nth-child(3),
  .rpt-main-table td:nth-child(3),
  .rpt-main-table th:nth-child(7),
  .rpt-main-table td:nth-child(7) { display: none; }

  /* Stack filter rows */
  .filter-card .row { flex-direction: column; }
  .filter-card .col-md-2,
  .filter-card .col-md-3,
  .filter-card .col-md-4 { width: 100%; }

  /* Full-width action buttons */
  .page-actions { flex-wrap: wrap; }
  .page-actions .btn { font-size: .78rem; padding: .3rem .6rem; }

  /* Stack flow diagram */
  .am-flow-row { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  .am-flow-arrow { transform: rotate(90deg); }

  /* Chart height smaller */
  #ewb-chart { max-height: 220px; }
}

/* ── Glow pulse utility ── */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 8px var(--primary-glow); }
  50%     { box-shadow: 0 0 20px var(--primary-glow), 0 0 40px var(--primary-glow); }
}
.glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════
   SHIMMER / SKELETON LOADING SYSTEM
   ══════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* Base skeleton block */
.skeleton {
  background: linear-gradient(90deg,
    #edf2f7 0%, #e2e8f0 20%, #edf2f7 40%, #edf2f7 100%);
  background-size: 1200px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  display: block;
}

/* Shimmer card wrapper */
.shimmer-card {
  background: #ffffff;
  border: 1px solid rgba(31,47,96,.08);
  border-radius: var(--r-lg);
  padding: 20px;
  overflow: hidden;
}

/* Skeleton shapes */
.sk-line        { height: 12px; border-radius: 6px; }
.sk-line.thin   { height: 9px;  }
.sk-line.thick  { height: 18px; }
.sk-line.title  { height: 20px; width: 55%; }
.sk-line.w-30   { width: 30%; }
.sk-line.w-40   { width: 40%; }
.sk-line.w-50   { width: 50%; }
.sk-line.w-60   { width: 60%; }
.sk-line.w-70   { width: 70%; }
.sk-line.w-80   { width: 80%; }
.sk-line.w-90   { width: 90%; }
.sk-line.full   { width: 100%; }
.sk-circle      { border-radius: 50%; }
.sk-box         { border-radius: var(--r-sm); }

/* Stat card shimmer */
.shimmer-stat {
  background: #ffffff;
  border: 1px solid rgba(31,47,96,.08);
  border-radius: var(--r-lg);
  padding: 22px 20px 18px;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* Table row shimmer */
.shimmer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(31,47,96,.06);
}

/* Notification shimmer */
.shimmer-notif {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(31,47,96,.06);
}

/* ══════════════════════════════════════════════════════════════
   AUTO EWB MONITOR PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Health chips ── */
.am-health-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #dce8f8;
  border: 1px solid rgba(31,47,96,0.15);
  border-radius: var(--r-sm);
  padding: .3rem .8rem;
  font-size: .82rem;
}
.am-hc-label { color: #000000; font-weight: 500; }
.am-hc-val   { font-weight: 700; color: #000000; }

/* ── Stat cards (pipeline queue) ── */
.am-stat-card {
  background: #ffffff;
  border: 1px solid rgba(31,47,96,0.08);
  border-radius: var(--r);
  padding: 1.1rem .75rem;
  text-align: center;
  transition: transform .22s, box-shadow .22s;
  position: relative;
  overflow: hidden;
}
.am-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(31,47,96,.12); }
.am-stat-icon  { font-size: 1.6rem; margin-bottom: .3rem; }
.am-stat-count { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.am-stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
                 color: #7a90b8; margin-top: .3rem; font-weight: 600; }

/* QUEUED — Light Lavender */
.am-stat-queued {
  background: #f3f0ff;
  border-top: 4px solid #7c3aed;
}
.am-stat-queued .am-stat-icon,
.am-stat-queued .am-stat-count { color: #7c3aed; }
.am-stat-queued:hover { box-shadow: 0 8px 24px rgba(124,58,237,.18); }

/* EXTRACTING — Light Cyan */
.am-stat-extracting {
  background: #e0f7fa;
  border-top: 4px solid #0891b2;
}
.am-stat-extracting .am-stat-icon,
.am-stat-extracting .am-stat-count { color: #0891b2; }
.am-stat-extracting:hover { box-shadow: 0 8px 24px rgba(8,145,178,.18); }

/* VALIDATING — Light Amber */
.am-stat-validating {
  background: #fffbeb;
  border-top: 4px solid #f59e0b;
}
.am-stat-validating .am-stat-icon,
.am-stat-validating .am-stat-count { color: #d97706; }
.am-stat-validating:hover { box-shadow: 0 8px 24px rgba(245,158,11,.18); }

/* GENERATING — Light Indigo */
.am-stat-generating {
  background: #eef2ff;
  border-top: 4px solid #4f46e5;
}
.am-stat-generating .am-stat-icon,
.am-stat-generating .am-stat-count { color: #4f46e5; }
.am-stat-generating:hover { box-shadow: 0 8px 24px rgba(79,70,229,.18); }

/* DONE — Light Emerald */
.am-stat-done {
  background: #ecfdf5;
  border-top: 4px solid #10b981;
}
.am-stat-done .am-stat-icon,
.am-stat-done .am-stat-count { color: #059669; }
.am-stat-done:hover { box-shadow: 0 8px 24px rgba(16,185,129,.18); }

/* FAILED — Light Rose */
.am-stat-failed {
  background: #fef2f2;
  border-top: 4px solid #ef4444;
}
.am-stat-failed .am-stat-icon,
.am-stat-failed .am-stat-count { color: #dc2626; }
.am-stat-failed:hover { box-shadow: 0 8px 24px rgba(239,68,68,.18); }

/* ── Panels ── */
.am-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.am-panel-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: .9rem;
}
.am-panel-body { padding: 1rem; }

/* ── Drop zone ── */
.am-dropzone {
  border: 2px dashed var(--border-bright);
  border-radius: var(--r-md);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  color: var(--text-muted);
}
.am-dropzone:hover,
.am-dropzone-over {
  border-color: var(--primary);
  background: var(--primary-subtle);
  color: var(--text);
}

/* ── Multi-file upload rows ── */
.am-file-row {
  background: var(--bg-elevated);
  border-color: var(--border) !important;
  border-radius: var(--r-sm);
  transition: background .2s;
}
.am-file-row.bg-success-subtle { background: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.3) !important; }
.am-file-row.bg-warning-subtle { background: rgba(251,191,36,0.12) !important; border-color: rgba(251,191,36,0.3) !important; }
.am-file-row.bg-danger-subtle  { background: rgba(248,113,113,0.12) !important; border-color: rgba(248,113,113,0.3) !important; }
.am-file-row .am-frow-status   { font-size: .78rem; margin-top: 2px; color: var(--text-muted); }

/* ── Queue table ── */
.am-queue-table thead th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  padding: .6rem .75rem;
}
.am-queue-table tbody td {
  border-bottom: 1px solid rgba(255,255,255,.04);
  padding: .6rem .75rem;
  vertical-align: middle;
  font-size: .85rem;
}
.am-queue-table tbody tr:last-child td { border-bottom: none; }
.am-queue-table tbody tr:hover td { background: var(--bg-hover); }

/* ── Extra small btn ── */
.btn-xs {
  padding: .15rem .45rem;
  font-size: .75rem;
  border-radius: .3rem;
  line-height: 1.4;
}

/* ── IRN Tooltip — white text on dark background ── */
.tooltip .tooltip-inner {
  background-color: #1f2f60 !important;
  color: #ffffff !important;
  font-family: monospace;
  font-size: 11px;
  max-width: 460px;
  word-break: break-all;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #f9be3e;
  border-radius: 4px;
  line-height: 1.6;
}
.tooltip .tooltip-arrow::before {
  border-top-color: #1f2f60 !important;
  border-bottom-color: #1f2f60 !important;
}

/* ── IRN Popover (IRN List hover) ── */
.eil-irn-popover .popover-header {
  background: #1f2f60 !important;
  color: #f9be3e !important;
  font-weight: 700;
  border-bottom: 1px solid #f9be3e;
  border-radius: 5px 5px 0 0;
}
.eil-irn-popover .popover-body {
  background: #1f2f60 !important;
  color: #ffffff !important;
  font-family: monospace;
  font-size: 11px;
  word-break: break-all;
  max-width: 460px;
  line-height: 1.6;
  border-radius: 0 0 5px 5px;
}
.eil-irn-popover.bs-popover-top > .popover-arrow::after,
.eil-irn-popover.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-top-color: #1f2f60 !important;
}
.eil-irn-popover {
  border: 1.5px solid #f9be3e !important;
  max-width: 480px !important;
}

/* ── e-Invoice Full Response JSON pre elements ── */
#eid-raw-json, #ebd-raw-json, #ec-raw-json, #er-raw-json {
  color: #111 !important;
  background: #f8f9fa;
  border-radius: 4px;
  padding: 10px;
  font-size: 11px;
  max-height: 400px;
  overflow: auto;
  margin: 0;
}