/* ============================================================
   FuelTrack Attendance System — style.css
   Modern UI • Boxicons • Dark/Light Theme
   ============================================================ */

/* ── CSS Variables: Light Theme ─────────────────────────── */
:root {
  --sidebar-w:      260px;
  --topbar-h:       64px;
  --brand:          #f59e0b;
  --brand-dark:     #d97706;
  --brand-light:    #fef3c7;
  --radius-sm:      8px;
  --radius:         12px;
  --radius-lg:      16px;
  --radius-xl:      20px;

  /* Light mode colors */
  --bg-page:        #f0f2f7;
  --bg-card:        #ffffff;
  --bg-sidebar:     #0f172a;
  --bg-topbar:      rgba(255,255,255,0.85);
  --bg-input:       #f8fafc;
  --bg-hover:       #f1f5f9;
  --bg-active:      #1e293b;

  --text-primary:   #0f172a;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;
  --text-sidebar:   rgba(255,255,255,0.65);
  --text-sidebar-active: #ffffff;

  --border:         #e2e8f0;
  --border-light:   #f1f5f9;

  --shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:         0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:      0 10px 40px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);

  --sidebar-section: rgba(255,255,255,0.25);
  --sidebar-link-hover: rgba(255,255,255,0.08);
  --sidebar-divider: rgba(255,255,255,0.07);
}

/* ── CSS Variables: Dark Theme ──────────────────────────── */
[data-theme="dark"] {
  --bg-page:        #0b0f1a;
  --bg-card:        #131929;
  --bg-sidebar:     #080d18;
  --bg-topbar:      rgba(19,25,41,0.9);
  --bg-input:       #1e2436;
  --bg-hover:       #1a2035;
  --bg-active:      #1e2d4a;

  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  --border:         #1e2d4a;
  --border-light:   #162032;

  --shadow-sm:      0 1px 3px rgba(0,0,0,.3);
  --shadow:         0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:      0 10px 40px rgba(0,0,0,.5);
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  transition: background .3s, color .3s;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.01em;
}

/* Headings and UI elements use Plus Jakarta Sans */
h1, h2, h3, h4, h5, h6,
.fw-bold, .fw-semibold,
.sidebar-brand-name,
.sidebar-link,
.sidebar-user-name,
.topbar-breadcrumb,
.card-header h5, .card-header h6,
.stat-card-grad__val,
.btn, .form-label, .badge,
.settings-section-title,
.modal-title,
.auth-title {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

/* Monospace: JetBrains Mono for codes and times */
code, .font-monospace,
.topbar-clock,
.sidebar-brand-sub {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

/* Stat values extra bold with Jakarta */
.stat-card-grad__val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 1050;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(255,255,255,.04);
}

/* Sidebar brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--sidebar-divider);
  text-decoration: none;
}
.sidebar-brand-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--brand), #ef4444);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245,158,11,.4);
}
.sidebar-brand-text { flex: 1; min-width: 0; }
.sidebar-brand-name {
  font-size: .95rem; font-weight: 700;
  color: #fff; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand-sub {
  font-size: .65rem; color: rgba(255,255,255,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sidebar section label */
.sidebar-section-label {
  padding: 20px 20px 6px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sidebar-section);
}

/* Sidebar nav */
.sidebar-nav { padding: 2px 10px; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-sidebar);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s, color .15s, transform .1s;
  margin-bottom: 2px;
  position: relative;
}
.sidebar-link:hover {
  background: var(--sidebar-link-hover);
  color: #fff;
}
.sidebar-link.active {
  background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(245,158,11,.1));
  color: var(--brand);
  font-weight: 600;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}
.sidebar-link bx, .sidebar-link i {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* Sidebar footer */
.sidebar-footer {
  margin-top: auto;
  padding: 14px 10px;
  border-top: 1px solid var(--sidebar-divider);
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: rgba(255,255,255,.04);
}
.sidebar-user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #ef4444);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.sidebar-user-name { font-size: .8rem; font-weight: 600; color: #fff; line-height: 1.2; }
.sidebar-user-role { font-size: .65rem; color: var(--brand); text-transform: capitalize; }

.sidebar-logout {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.5); text-decoration: none;
  font-size: .82rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.sidebar-logout:hover { background: rgba(239,68,68,.15); color: #ef4444; }

/* ── Main wrapper ───────────────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .28s cubic-bezier(.4,0,.2,1);
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0;
  height: var(--topbar-h);
  background: var(--bg-topbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 24px;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  gap: 12px;
}
.topbar-toggle {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; font-size: 1.1rem;
  flex-shrink: 0;
}
.topbar-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }

.topbar-breadcrumb {
  font-size: .82rem; font-weight: 600;
  color: var(--text-secondary);
  display: none;
}
@media (min-width: 576px) { .topbar-breadcrumb { display: block; } }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.topbar-clock {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.08));
  border: 1px solid rgba(245,158,11,.2);
  color: var(--brand);
  padding: 5px 12px; border-radius: 99px;
  font-size: .78rem; font-weight: 700; font-family: monospace;
  white-space: nowrap;
}

.topbar-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; font-size: 1.1rem;
  text-decoration: none;
}
.topbar-btn:hover { background: var(--bg-hover); color: var(--brand); border-color: var(--brand); }

/* Theme toggle */
#themeToggle { transition: transform .3s; }
#themeToggle:hover { transform: rotate(20deg); }

/* ── Page content ───────────────────────────────────────── */
.page-content { flex: 1; }
.page-footer {
  padding: 14px 24px; font-size: .75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  color: var(--text-primary) !important;
}
.card-footer {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

/* Neutralise Bootstrap bg-white / bg-light on card headers in dark mode */
[data-theme="dark"] .card-header.bg-white,
[data-theme="dark"] .card-header.bg-light,
[data-theme="dark"] .card-footer.bg-white,
[data-theme="dark"] .card-footer.bg-light {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .card-header h1,
[data-theme="dark"] .card-header h2,
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .card-header h4,
[data-theme="dark"] .card-header h5,
[data-theme="dark"] .card-header h6,
[data-theme="dark"] .card-header span,
[data-theme="dark"] .card-header p {
  color: var(--text-primary) !important;
}

/* Global dark mode: override any stray bg-white / bg-light */
[data-theme="dark"] .bg-white { background: var(--bg-card) !important; }
[data-theme="dark"] .bg-light { background: var(--bg-hover) !important; }
[data-theme="dark"] .text-dark { color: var(--text-primary) !important; }
[data-theme="dark"] .border    { border-color: var(--border) !important; }
[data-theme="dark"] .border-bottom { border-color: var(--border) !important; }
[data-theme="dark"] .border-top    { border-color: var(--border) !important; }

/* ── Stat cards ─────────────────────────────────────────── */
.stat-card {
  border-radius: var(--radius-lg) !important;
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.stat-card__bg {
  position: absolute; right: -10px; top: -10px;
  width: 90px; height: 90px; border-radius: 50%;
  opacity: .08;
}
.stat-card--yellow .stat-card__bg { background: #f59e0b; }
.stat-card--blue   .stat-card__bg { background: #3b82f6; }
.stat-card--green  .stat-card__bg { background: #10b981; }
.stat-card--red    .stat-card__bg { background: #ef4444; }

.stat-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 4px;
}
.stat-card--yellow .stat-card__icon { background: rgba(245,158,11,.12); color: #f59e0b; }
.stat-card--blue   .stat-card__icon { background: rgba(59,130,246,.12);  color: #3b82f6; }
.stat-card--green  .stat-card__icon { background: rgba(16,185,129,.12);  color: #10b981; }
.stat-card--red    .stat-card__icon { background: rgba(239,68,68,.12);   color: #ef4444; }

.stat-card__val   { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--text-primary); }
.stat-card__label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; }
.stat-card__trend { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

/* ── Tables ─────────────────────────────────────────────── */
.table { color: var(--text-primary) !important; --bs-table-bg: transparent; }

/* All table cells and headers use theme variables */
.table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  padding: .7rem 1rem !important;
  vertical-align: middle;
}

/* Header row */
.table thead > tr > th,
.table thead > tr > td,
.table-light > tr > th,
.table-light > tr > td {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: var(--text-muted) !important;
  background-color: var(--bg-hover) !important;
  border-color: var(--border) !important;
}

/* Neutralise Bootstrap's .table-light class completely */
.table-light {
  --bs-table-bg:            var(--bg-hover) !important;
  --bs-table-striped-bg:    var(--bg-hover) !important;
  --bs-table-active-bg:     var(--bg-hover) !important;
  --bs-table-hover-bg:      var(--bg-hover) !important;
  --bs-table-color:         var(--text-muted) !important;
  --bs-table-border-color:  var(--border)    !important;
}

/* Body rows */
.table tbody > tr > td { border-color: var(--border-light) !important; }
.table-hover tbody tr { background-color: var(--bg-card) !important; }
.table-hover tbody tr:hover > * {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Dark mode explicit overrides — belt-and-suspenders */
[data-theme="dark"] .table,
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .table thead > tr > th,
[data-theme="dark"] .table thead > tr > td,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > tr > th {
  background-color: var(--bg-hover) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .table tbody tr { background-color: var(--bg-card) !important; }
[data-theme="dark"] .table-hover tbody tr:hover > * {
  background-color: rgba(255,255,255,.04) !important;
}

/* ── Forms ──────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-size: .875rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23737d92' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 14px 10px !important;
  padding-right: 2.2rem !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-select.form-select-sm {
  background-position: right .5rem center !important;
  background-size: 12px 9px !important;
  padding-right: 1.8rem !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.15) !important;
  background: var(--bg-card) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-label { font-size: .82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .4rem; }
.form-text  { font-size: .75rem; color: var(--text-muted); }
.input-group-text {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn { border-radius: var(--radius-sm) !important; font-weight: 500; font-size: .875rem; }
.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #ef8c06) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.3);
}
.btn-warning:hover {
  background: linear-gradient(135deg, #d97706, #c97504) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,.4);
  transform: translateY(-1px);
}
.btn-dark {
  background: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  color: var(--bg-card) !important;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge { font-weight: 600; border-radius: 6px !important; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius) !important;
  border: none !important;
  font-size: .875rem;
}

/* ── Modals ─────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary) !important;
}
.modal-header { border-color: var(--border) !important; }
.modal-footer { border-color: var(--border) !important; }

/* ── Employee avatars ───────────────────────────────────── */
.emp-avatar, .emp-avatar-lg, .emp-avatar-sm {
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.emp-avatar    { width:42px; height:42px; font-size:1rem; }
.emp-avatar-lg { width:64px; height:64px; font-size:1.6rem; }
.emp-avatar-sm { width:30px; height:30px; font-size:.75rem; }

/* ── Employee card ──────────────────────────────────────── */
.emp-card { transition: transform .2s, box-shadow .2s; }
.emp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; }

.emp-card__header {
  position: relative;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  height: 80px;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .emp-card__header {
  background: linear-gradient(135deg, #080d18, #131929);
}
.emp-card__photo {
  width: 70px; height: 70px; border-radius: 50%;
  border: 3px solid var(--bg-card); object-fit: cover;
  position: absolute; bottom: -20px;
}
.emp-card__avatar {
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; font-weight: 700; font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--bg-card);
  position: absolute; bottom: -20px;
}
.emp-card .card-body { padding-top: 28px !important; }
.emp-card__status { position: absolute; top: 8px; right: 8px; font-size: .65rem; }

/* ── Auth ───────────────────────────────────────────────── */
.auth-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #0b0f1a 0%, #0f172a 50%, #0b0f1a 100%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  position: relative; overflow: hidden;
}
.auth-body::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(245,158,11,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.06) 0%, transparent 60%);
}
.auth-wrapper { width: 100%; max-width: 440px; position: relative; z-index: 1; }
.auth-card {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-logo-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--brand), #ef4444);
  border-radius: 18px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff;
  box-shadow: 0 8px 24px rgba(245,158,11,.3);
}
.auth-card .form-control {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.auth-card .form-control:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--brand) !important;
}
.auth-card .form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.auth-card .form-label { color: rgba(255,255,255,.7); }
.auth-card .input-group-text {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.4) !important;
}
.auth-title { color: #fff; font-size: 1.5rem; font-weight: 800; }
.auth-sub   { color: rgba(255,255,255,.4); font-size: .82rem; }

/* ── Sidebar overlay (mobile) ───────────────────────────── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 1040;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* ── Scanner page ───────────────────────────────────────── */
.manual-entry-box {
  background: var(--bg-input);
  border-color: var(--brand) !important;
  border-radius: var(--radius) !important;
}
.scan-corner {
  position: absolute; width: 28px; height: 28px;
  border-color: var(--brand); border-style: solid;
}
.scan-corner--tl { top:0;left:0;  border-width:3px 0 0 3px; }
.scan-corner--tr { top:0;right:0; border-width:3px 3px 0 0; }
.scan-corner--bl { bottom:0;left:0;  border-width:0 0 3px 3px; }
.scan-corner--br { bottom:0;right:0; border-width:0 3px 3px 0; }
.scan-line {
  position:absolute; left:4px; right:4px; height:2px;
  background: linear-gradient(90deg,transparent,var(--brand),transparent);
  animation: scanMove 1.8s ease-in-out infinite; top:50%;
}
@keyframes scanMove { 0%{top:8%} 50%{top:88%} 100%{top:8%} }
@keyframes successPulse { 0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)} }
.pulse { animation: successPulse .4s ease; }

/* ── Settings page ──────────────────────────────────────── */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.settings-section-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted); margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}

/* ── Color picker ───────────────────────────────────────── */
.color-picker-wrap {
  position: relative; display: flex; align-items: center; gap: 10px;
}
.color-swatch {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 2px solid var(--border); cursor: pointer; overflow: hidden;
  flex-shrink: 0;
}
.color-swatch input[type=color] {
  width: 200%; height: 200%; border: none; padding: 0;
  transform: translate(-25%, -25%); cursor: pointer;
  background: none;
}

/* ── QR Preview in settings ─────────────────────────────── */
.qr-preview-box {
  background: var(--bg-hover);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; padding: 20px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0 !important; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .btn, form { display: none !important; }
  .main-wrapper { margin: 0 !important; }
  .card { box-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ── Utilities ──────────────────────────────────────────── */
code {
  background: var(--bg-hover);
  color: var(--brand);
  padding: 2px 7px; border-radius: 5px; font-size: .82em;
}
.text-muted { color: var(--text-muted) !important; }
.border     { border-color: var(--border) !important; }
.bg-light   { background: var(--bg-hover) !important; }

/* Boxicons size helper */
.bx { vertical-align: middle; }

/* ── Gradient stat cards (dashboard) ───────────────────── */
.stat-card-grad {
  border-radius: var(--radius-lg) !important;
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
  border: none !important;
}
.stat-card-grad:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Same bright pastel gradients in BOTH light and dark mode */
.stat-card-grad--yellow,
[data-theme="dark"] .stat-card-grad--yellow { background: linear-gradient(135deg, #fff8e1, #ffe082); }
.stat-card-grad--blue,
[data-theme="dark"] .stat-card-grad--blue   { background: linear-gradient(135deg, #e3f2fd, #90caf9); }
.stat-card-grad--green,
[data-theme="dark"] .stat-card-grad--green  { background: linear-gradient(135deg, #e8f5e9, #a5d6a7); }
.stat-card-grad--red,
[data-theme="dark"] .stat-card-grad--red    { background: linear-gradient(135deg, #fce4ec, #f48fb1); }

/* Text/icon stay dark on these light gradient backgrounds, in both themes */
.stat-card-grad__icon,
[data-theme="dark"] .stat-card-grad__icon {
  font-size: 2rem;
  opacity: .35;
  position: absolute;
  top: 16px; right: 16px;
  color: #000;
}

.stat-card-grad__val,
[data-theme="dark"] .stat-card-grad__val {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: #000;
  margin-bottom: 4px;
}

.stat-card-grad__label,
[data-theme="dark"] .stat-card-grad__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(0,0,0,.55);
}

/* ── Department badge (theme-aware) ────────────────────── */
.dept-badge {
  background: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] .dept-badge {
  background: rgba(255,255,255,.08) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ── Dark mode text fixes ───────────────────────────────── */
/* Prevent Bootstrap's hardcoded dark colors leaking in dark mode */
[data-theme="dark"] .fw-bold,
[data-theme="dark"] .fw-semibold {
  color: var(--text-primary);
}
/* Exception: intentionally colored elements keep their color */
[data-theme="dark"] .text-warning.fw-bold,
[data-theme="dark"] .text-success.fw-bold,
[data-theme="dark"] .text-danger.fw-bold,
[data-theme="dark"] .text-primary.fw-bold { color: inherit; }

/* Employee card body text */
[data-theme="dark"] .emp-card .card-body,
[data-theme="dark"] .emp-card .card-body * {
  color: var(--text-primary);
}
[data-theme="dark"] .emp-card .card-body .text-muted,
[data-theme="dark"] .emp-card .card-body [style*="color:var(--text-muted)"] {
  color: var(--text-muted) !important;
}

/* General card body text in dark mode */
[data-theme="dark"] .card-body { color: var(--text-primary); }

/* List group items */
[data-theme="dark"] .list-group-item {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ── Toast container (already in JS, this ensures no overlap) */
#toastContainer { pointer-events: none; }
#toastContainer > * { pointer-events: auto; }

/* ── Toast position grid ────────────────────────────────── */
.toast-position-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 380px;
}
.toast-pos-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; padding: 10px 8px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer; font-size: .72rem; font-weight: 600;
  transition: all .15s;
  line-height: 1;
}
.toast-pos-btn i { font-size: 1.1rem; }
.toast-pos-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(245,158,11,.08);
}
.toast-pos-btn.active {
  border-color: var(--brand);
  background: rgba(245,158,11,.12);
  color: var(--brand);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

/* ── Toast color card ───────────────────────────────────── */
.toast-color-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}
.toast-color-preview {
  border: 2px solid;
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
  margin-bottom: 2px;
}

/* ── Form range (duration slider) ───────────────────────── */
.form-range::-webkit-slider-thumb { background: var(--brand); }
.form-range::-moz-range-thumb     { background: var(--brand); border-color: var(--brand); }
.form-range::-webkit-slider-runnable-track { background: var(--border); border-radius: 99px; }

/* ── Sidebar Dropdown ────────────────────────────────────── */
.sidebar-dropdown-toggle {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  justify-content: flex-start;
}
.sidebar-dropdown-arrow {
  margin-left: auto;
  font-size: .9rem;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
  transform: rotate(0deg);   /* starts pointing RIGHT */
}
.sidebar-dropdown.open .sidebar-dropdown-arrow {
  transform: rotate(90deg);  /* rotates to pointing DOWN */
}
.sidebar-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  padding: 2px 0;
}
.sidebar-dropdown.open .sidebar-dropdown-menu {
  max-height: 320px;
}

/* No vertical line */
.sidebar-dropdown-menu::before { content: none; }

/* ── Each sub-link ──────────────────────────────────────── */
.sidebar-sub-link {
  /* left padding = 12px (sidebar-link padding) + 20px (icon width) + 11px (gap) - dot offset */
  padding: 9px 12px 9px 45px !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  position: relative;
  color: rgba(255,255,255,.45) !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 1px;
  transition: color .15s, background .15s !important;
}
.sidebar-sub-link::before { display: none !important; }
.sidebar-sub-link:hover {
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.05) !important;
}
.sidebar-sub-link.active {
  color: #fff !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.06) !important;
}

/* ── Circle dot aligned with main menu icon center ──────── */
/* Main sidebar-link: padding-left 12px + icon width 20px → icon center at 22px */
/* Dot is 8px wide → left = 22px - 4px = 18px                                   */
.sub-dot {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.22);
  box-sizing: border-box;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.sidebar-sub-link:hover .sub-dot {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
}
.sidebar-sub-link.active .sub-dot {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(245,158,11,.2);
  transform: translateY(-50%) scale(1.2);
}

/* ── CA Icon wrap ────────────────────────────────────────── */
.ca-icon-wrap {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem; flex-shrink: 0;
}

/* ── CA Stat card ────────────────────────────────────────── */
.ca-stat-card {
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--ca-color, #f59e0b);
  transition: transform .2s, box-shadow .2s;
}
.ca-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ca-stat-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-muted); margin-bottom: 4px;
}
.ca-stat-val {
  font-size: 1.35rem; font-weight: 800;
  color: var(--ca-color, #f59e0b);
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.02em;
}
.ca-stat-count { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

/* ── Topbar action buttons (Change Password / Logout) ────── */
.topbar-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all .15s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.topbar-action-btn i { font-size: 1rem; flex-shrink: 0; }
.topbar-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.topbar-action-btn--danger {
  color: #ef4444;
  border-color: rgba(239,68,68,.2);
}
.topbar-action-btn--danger:hover {
  background: rgba(239,68,68,.08);
  color: #ef4444;
  border-color: rgba(239,68,68,.4);
}

/* Hide label on small screens */
@media (max-width: 575.98px) {
  .topbar-action-btn span { display: none; }
  .topbar-action-btn { padding: 6px 8px; }
}

/* ── Profile Dropdown ────────────────────────────────────── */
.profile-dropdown {
  position: relative;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all .15s;
}
.profile-trigger:hover {
  background: var(--bg-hover);
  border-color: var(--brand);
}

.profile-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #ef4444);
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.profile-info { text-align: left; line-height: 1.2; }
.profile-name { font-size: .78rem; font-weight: 600; color: var(--text-primary); }
.profile-role { font-size: .65rem; color: var(--text-muted); text-transform: capitalize; }

.profile-chevron {
  font-size: .9rem;
  color: var(--text-muted);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.profile-dropdown.open .profile-chevron { transform: rotate(180deg); }

/* Dropdown menu */
.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  overflow: hidden;

  /* Hidden state */
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.profile-dropdown.open .profile-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.profile-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.profile-menu-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #ef4444);
  color: #fff; font-weight: 700; font-size: .88rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.profile-menu-name { font-size: .85rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.profile-menu-role { font-size: .7rem; color: var(--text-muted); text-transform: capitalize; margin-top: 1px; }

.profile-menu-divider { height: 1px; background: var(--border); margin: 0; }

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .12s, color .12s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.profile-menu-item i { font-size: 1rem; flex-shrink: 0; }
.profile-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.profile-menu-item--danger { color: #ef4444; }
.profile-menu-item--danger:hover {
  background: rgba(239,68,68,.07);
  color: #ef4444;
}

/* ── Blur backdrop for all modals ───────────────────────── */
.modal-backdrop {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  background-color: rgba(0,0,0,.5) !important;
}
/* For Bootstrap 5 — the backdrop fade class */
.modal-backdrop.show {
  opacity: 1 !important;
}
/* Also blur via JS-inserted style for browsers that need it */
.modal.show ~ .modal-backdrop,
body.modal-open .modal-backdrop {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── QR Scanner shortcut button (topbar) ───────────────── */
.topbar-btn--scan {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(239,68,68,.1)) !important;
  border-color: rgba(245,158,11,.35) !important;
  color: #f59e0b !important;
}
.topbar-btn--scan:hover {
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(1.05);
}

/* ── Kiosk exit hint pill ───────────────────────────────── */
.kiosk-esc-hint {
  font-family: 'JetBrains Mono', monospace;
}

/* ── Modern Pagination ───────────────────────────────────── */
.pagination-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.pagination-modern .page-item { display: flex; }

.pagination-modern .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-decoration: none;
  transition: all .15s ease;
  cursor: pointer;
}

.pagination-modern .page-link:hover {
  background: rgba(245,158,11,.1);
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}

.pagination-modern .page-item.active .page-link {
  background: linear-gradient(135deg, #f59e0b, #ef8c06);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(245,158,11,.35);
}

.pagination-modern .page-item.disabled .page-link {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--bg-hover);
}

.pagination-modern .page-item.ellipsis .page-link {
  border: none;
  background: transparent;
  cursor: default;
  font-weight: 700;
  color: var(--text-muted);
}
.pagination-modern .page-item.ellipsis .page-link:hover {
  transform: none;
  background: transparent;
  color: var(--text-muted);
}

.pagination-modern .page-link i { font-size: 1.05rem; }

/* Compact "Prev / Next" nav buttons get slightly wider tap targets */
.pagination-modern .page-item.nav .page-link {
  padding: 0 14px;
  gap: 4px;
}

@media (max-width: 575.98px) {
  .pagination-modern .page-link { min-width: 34px; height: 34px; font-size: .8rem; }
}

/* ── Form validation feedback ───────────────────────────── */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--border) !important;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.2) !important;
}
/* Small inline error hint under invalid fields */
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback {
  display: block;
}
.invalid-feedback {
  display: none;
  font-size: .76rem;
  color: #ef4444;
  margin-top: 4px;
}

/* ── Purchases Actions dropdown — escape table-responsive clipping ── */
.purchase-actions-menu {
  z-index: 1090 !important;
  min-width: 220px;
}
/* Scoped to the Purchases List table only — lets the Actions dropdown
   render fully instead of being clipped by horizontal-scroll overflow.
   Bootstrap's data-bs-strategy="fixed" on the toggle button handles the
   actual positioning; this just prevents the ancestor from clipping it
   on browsers/cases where Popper hasn't repositioned yet. */
#purchasesListTable.table-responsive {
  overflow: visible;
}
@media (max-width: 991.98px) {
  #purchasesListTable.table-responsive { overflow-x: auto; }
}

/* ── Bootstrap dropdown menus — follow light/dark theme ─────── */
.dropdown-menu {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.15));
}
.dropdown-item {
  color: var(--text-primary);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand);
  color: #fff;
}
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--text-muted);
  opacity: .55;
}
.dropdown-item.text-danger {
  color: #ef4444 !important;
}
.dropdown-item.text-danger:hover {
  background-color: rgba(239,68,68,.1);
  color: #ef4444 !important;
}
.dropdown-divider {
  border-color: var(--border);
}

/* ── Printable report header: hidden on screen, shown only in the
   dedicated print-preview tab opened via openPrintWindow() ─────── */
.report-print-header {
  display: none;
}
body.is-print-window .report-print-header {
  display: block;
}

/* ── Quick Action dropdown (topbar) — dedicated, self-contained ── */
.qa-dropdown {
  position: relative;
}
.qa-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 3000;
  overflow: hidden;
  padding: 14px;

  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.qa-dropdown.open .qa-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.qa-menu-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding: 0 2px;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.qa-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  border-radius: 12px;
  text-decoration: none;
  font-size: .68rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: 1px solid transparent;
}
.qa-tile i { font-size: 1.45rem; }
.qa-tile:hover { transform: translateY(-2px); }

.qa-tile--blue {
  background: rgba(59,130,246,.1);
  color: #3b82f6;
}
.qa-tile--blue:hover { background: rgba(59,130,246,.18); box-shadow: 0 4px 12px rgba(59,130,246,.2); }

.qa-tile--green {
  background: rgba(16,185,129,.1);
  color: #10b981;
}
.qa-tile--green:hover { background: rgba(16,185,129,.18); box-shadow: 0 4px 12px rgba(16,185,129,.2); }

.qa-tile--red {
  background: rgba(239,68,68,.1);
  color: #ef4444;
}
.qa-tile--red:hover { background: rgba(239,68,68,.18); box-shadow: 0 4px 12px rgba(239,68,68,.2); }

.qa-tile--warning {
  background: rgba(245,158,11,.1);
  color: #f59e0b;
}
.qa-tile--warning:hover { background: rgba(245,158,11,.18); box-shadow: 0 4px 12px rgba(245,158,11,.2); }

.qa-tile--purple {
  background: rgba(139,92,246,.1);
  color: #8b5cf6;
}
.qa-tile--purple:hover { background: rgba(139,92,246,.18); box-shadow: 0 4px 12px rgba(139,92,246,.2); }

.qa-tile--gray {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.qa-tile--gray:hover { background: var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.1); }

@media (max-width: 575.98px) {
  .qa-menu { width: 260px; right: -40px; }
}

/* ── Per-page selector + pagination footer responsiveness ──────── */
.per-page-selector select {
  min-width: 64px;
}
@media (max-width: 575.98px) {
  .pagination-info { width: 100%; text-align: center; margin-bottom: 6px; }
  .per-page-selector { width: 100%; justify-content: center; }
}

/* ── Dashboard Recent Purchases / Delivery tabs — theme-aware ──── */
#recentPurchasesTabs.nav-tabs {
  border-bottom: none;
  gap: 4px;
}
#recentPurchasesTabs .nav-link {
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 600;
  font-size: .85rem;
  padding: 8px 14px;
}
#recentPurchasesTabs .nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
#recentPurchasesTabs .nav-link.active {
  color: var(--brand);
  background: var(--bg-hover);
  border-bottom: 2px solid var(--brand);
}

/* ── Upload Deposit Slip — dropzone + loading animation ─────────── */
.upload-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  background: var(--bg-hover);
}
.upload-dropzone:hover {
  border-color: var(--brand);
  background: rgba(245,158,11,.06);
}
.upload-dropzone-icon {
  font-size: 2.4rem;
  color: var(--brand);
  display: block;
}

@keyframes upload-spin {
  to { transform: rotate(360deg); }
}
.upload-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(245,158,11,.2);
  border-top-color: var(--brand);
  animation: upload-spin .7s linear infinite;
}

@keyframes upload-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#depositUploadingState {
  animation: upload-fade-in .25s ease;
}
#depositFileChip {
  animation: upload-fade-in .2s ease;
}