@font-face {
  font-family: 'Ageone';
  src: url('/fonts/Ageone.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'AllrounderMonument';
  src: url('/fonts/AllrounderMonument-Book.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --radius: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --accent: #a0834e;
}

/* Light theme variables */
html[data-theme="light"]{
  color-scheme: light;
  --bg: #f5f6f8;
  --fg: #0b0b0c;
  --subtle:#78797d;
  --card:#ffffffcc;
  --stroke:#e5e7eb;
}

/* Dark theme variables */
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#1a1d23;
  --fg:#f5f6f8;
  --subtle:#acb0b6;
  --card:#202530cc;
  --stroke:#3a3f4a;
}

/* Derived theme tokens for grid striping */
:root{
  --row-even: color-mix(in oklab, var(--accent) 6%, transparent);
  --row-odd:  color-mix(in oklab, var(--accent) 12%, transparent);
  --grid-line: color-mix(in oklab, var(--fg) 6%, var(--stroke));

  /* New: Selection colors */
  --selection-bg: #dbeafe; /* Tailwind sky-100 */
  --selection-border: #93c5fd; /* Tailwind sky-300 */
}

html[data-theme="dark"]{
  /* Slightly different contrast in dark mode */
  --row-even: color-mix(in oklab, var(--accent) 8%, transparent);
  --row-odd:  color-mix(in oklab, var(--accent) 16%, transparent);
  --grid-line: color-mix(in oklab, var(--fg) 14%, var(--stroke));

  --selection-bg: #1e3a8a; /* Dark blue */
  --selection-border: #3b82f6; /* Brighter blue */
}

/* Dark mode overrides for better contrast */
html[data-theme="dark"] .news-item {
  color: var(--fg);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  overflow-x: hidden;
}

/* Mica-like background for app shell */
#app::before{
  content:""; position:fixed; inset:0;
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(1200px 600px at 100% 100%, rgba(0,0,0,.12), transparent 60%);
  backdrop-filter: blur(22px) saturate(1.2);
  z-index:-1;
}

.titlebar{
  height:52px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid var(--stroke); background:var(--card);
  backdrop-filter: blur(18px); position:sticky; top:0; z-index:2000;
}
.titlebar-left{ display:flex; align-items:center; gap:10px; }
.app-logo{ width:28px; height:28px; }
.app-title{ font-weight:600; letter-spacing:.2px; }

.titlebar-right{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:36px; height:36px; border:none;
  background:linear-gradient(180deg, #ffffff22, #00000011);
  border-radius: calc(var(--radius) - 2px);
  display:grid; place-items:center; box-shadow: var(--shadow);
  color: var(--accent);
}
.icon-btn:active{ transform: translateY(1px); }
.icon-btn.danger:hover{ border-color:#ef4444; color:#ef4444; }
.i24{ width:20px; height:20px; fill: currentColor; }

/* Print rules for the Accountant receipt modal (scoped) */
/* Only engage these rules when body has .receipt-print to avoid blank Home prints */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  
  /* Force light mode for ALL receipt printing - override dark mode completely */
  body.receipt-print,
  body.receipt-print *,
  body.receipt-print *::before,
  body.receipt-print *::after {
    color-scheme: light !important;
    background: white !important;
    color: black !important;
    border-color: #e5e7eb !important;
    --bg: #ffffff !important;
    --fg: #000000 !important;
    --subtle: #666666 !important;
    --card: #ffffff !important;
    --stroke: #e5e7eb !important;
    --accent: #a0834e !important;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    --radius: 8px !important;
    --grid-line: #d1d5db !important;
  }
  
  /* Hide everything except the receipt modal */
  body.receipt-print * { 
    visibility: hidden !important; 
  }
  
  /* Show only the receipt modal with light mode styling */
  body.receipt-print .modal.printable,
  body.receipt-print .modal.printable * { 
    visibility: visible !important; 
    background: transparent !important;
    color: black !important;
    font-size: calc(1em + 1px) !important; /* Increase font size by 1px */
  }
  /* Make watermark more visible in print */
  body.receipt-print .watermark {
    opacity: 0.3 !important;
    background: transparent !important;
  }
  /* Make receipt text background transparent to show watermark */
  body.receipt-print .receipt-text,
  body.receipt-print .receipt-text *,
  body.receipt-print .payment-message {
    background: transparent !important;
  }
  /* Make modal body background transparent for watermark */
  body.receipt-print .modal-body {
    background: transparent !important;
  }
  /* Force receipt to print centered near top of page */
  body.receipt-print .modal.printable { 
    position: absolute !important; 
    top: 20mm !important;
    left: 50% !important;
    transform: translateX(-50%) !important; 
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important; 
    max-width: 210mm !important;
    height: auto !important; 
    box-shadow: none !important; 
    border: none !important; 
  }

  /* Reset body positioning for print */
  body.receipt-print {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.receipt-print .modal-backdrop { display: none !important; }
}

/* Force black text for receipt popup window (even before printing) */
.modal.printable,
.modal.printable *,
.modal.printable .modal-title,
.modal.printable .modal-header,
.modal.printable .modal-body,
.modal.printable .modal-body div,
.modal.printable .modal-body strong,
.modal.printable .hint {
  color: #000000 !important;
}

.user-chip{
  display:flex; align-items:center; gap:8px; padding:4px 10px;
  border:1px solid var(--stroke); border-radius: calc(var(--radius) - 2px);
  background:var(--card);
}
.user-chip img{ width:20px; height:20px; border-radius:50%; }

.shell{ display:grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 52px); }
.sidebar{
  padding:12px; border-right:1px solid var(--stroke); background:var(--card);
  display:flex; flex-direction:column; gap:6px;
}
.sidebar a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: var(--radius);
  color:inherit; text-decoration:none;
}
.sidebar a.active, .sidebar a:hover{ background: color-mix(in oklab, var(--accent) 16%, transparent); }
.sidebar-sep{ height:1px; background:var(--stroke); margin:8px 0; }
.ico{ width:20px; display:inline-block; text-align:center; }

.content{ 
  padding:18px 18px 48px; 
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* News bar (toolbar ticker) */
.news-bar{ display:flex; align-items:center; min-width:0; overflow:hidden; height:24px; }
.news-item{ display:inline-block; white-space:nowrap; color: var(--subtle); font-size: 12px; background: color-mix(in oklab, var(--accent) 15%, transparent); padding: 2px 6px; border-radius: 10px; border:1px solid var(--stroke); }
.news-item .i16{ width:14px; height:14px; vertical-align: -2px; margin-right:4px; }

/* Voucher news colors — dark text for light mode, overridden for dark mode below */
.news-voucher-add{ background: color-mix(in oklab, #22c55e 22%, transparent); color:#14532d; border-color: color-mix(in oklab, #22c55e 40%, var(--stroke)); }
.news-voucher-removed{ background: color-mix(in oklab, #ef4444 22%, transparent); color:#7f1d1d; border-color: color-mix(in oklab, #ef4444 40%, var(--stroke)); }
.news-voucher-inactive{ background: color-mix(in oklab, #f97316 22%, transparent); color:#7c2d12; border-color: color-mix(in oklab, #f97316 40%, var(--stroke)); }
.news-voucher-reactivated{ background: color-mix(in oklab, #3b82f6 22%, transparent); color:#1e3a8a; border-color: color-mix(in oklab, #3b82f6 40%, var(--stroke)); }

/* Airline news colors */
.news-airline-add{ background: color-mix(in oklab, #22c55e 22%, transparent); color:#14532d; border-color: color-mix(in oklab, #22c55e 40%, var(--stroke)); }
.news-airline-removed{ background: color-mix(in oklab, #ef4444 22%, transparent); color:#7f1d1d; border-color: color-mix(in oklab, #ef4444 40%, var(--stroke)); }

/* Destination news colors */
.news-destination-add{ background: color-mix(in oklab, #22c55e 22%, transparent); color:#14532d; border-color: color-mix(in oklab, #22c55e 40%, var(--stroke)); }
.news-destination-removed{ background: color-mix(in oklab, #ef4444 22%, transparent); color:#7f1d1d; border-color: color-mix(in oklab, #ef4444 40%, var(--stroke)); }

/* Dark mode: flip news text to light variants so they're readable on dark backgrounds */
@media (prefers-color-scheme: dark) {
  .news-voucher-add, .news-airline-add, .news-destination-add { color: #86efac; }
  .news-voucher-removed, .news-airline-removed, .news-destination-removed { color: #fca5a5; }
  .news-voucher-inactive { color: #fdba74; }
  .news-voucher-reactivated { color: #93c5fd; }
}
html[data-theme="dark"] .news-voucher-add,
html[data-theme="dark"] .news-airline-add,
html[data-theme="dark"] .news-destination-add { color: #86efac; }
html[data-theme="dark"] .news-voucher-removed,
html[data-theme="dark"] .news-airline-removed,
html[data-theme="dark"] .news-destination-removed { color: #fca5a5; }
html[data-theme="dark"] .news-voucher-inactive { color: #fdba74; }
html[data-theme="dark"] .news-voucher-reactivated { color: #93c5fd; }

.news-none{ background: color-mix(in oklab, var(--accent) 10%, transparent); }
.nav-news-wrapper { display: flex; align-items: center; margin-top: 7px; }
.nav-news-wrapper .news-bar { height: auto; }
.nav-news-wrapper .news-item { font-size: 18px; padding: 6px 16px; border-radius: 14px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatIn {
  0% { transform: translateY(8px); opacity: 0; }
  8% { transform: translateY(0); opacity: 1; }
  92% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}
.float-in { animation: floatIn 11.6s ease-in-out both; }

/* ── Page entry animations (GPU-only: opacity + transform) ──── */
@keyframes pageHeaderIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cardFadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .float-in,
  .page-header,
  .card,
  .dropdown-menu,
  .modal-backdrop,
  .modal-overlay { animation: none !important; }
}

/* Grid inputs: visuals handled at td.active-cell level; suppress input focus ring */
.excel-grid .cell-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* When inputs are readonly (selection mode), route interactions to the cell */
.excel-grid .cell-input[readonly] {
  pointer-events: none;
}

/* Prevent rows splitting across pages when printing */
@media print {
  /* Page setup: portrait and custom margins */
  @page { size: A4 portrait; margin: 0.75in; }
  
  /* Hide reconnect banner and Blazor reconnect UI during print */
  #reconnect-banner,
  #components-reconnect-modal {
    display: none !important;
  }
  
  /* Force light mode for ALL printing regardless of theme */
  :root, 
  html, 
  html[data-theme="dark"], 
  html[data-theme="light"],
  body,
  body[data-theme="dark"],
  body[data-theme="light"] {
    --bg: #ffffff !important;
    --fg: #000000 !important;
    --subtle: #666666 !important;
    --card: #ffffff !important;
    --stroke: #e5e7eb !important;
    --accent: #a0834e !important;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    --radius: 8px !important;
    --grid-line: #d1d5db !important;
    --row-even: rgba(160, 131, 78, 0.06) !important;
    --row-odd: rgba(160, 131, 78, 0.12) !important;
    color-scheme: light !important;
    background: white !important;
    color: black !important;
  }
  
  /* Force black text on white background for all print content */
  *, *::before, *::after {
    color: #000000 !important; /* Force black text for readability */
    border-color: #e5e7eb !important;
  }
  
  /* Force white background for non-grid elements */
  *:not(.excel-grid):not(.excel-grid *) {
    background-color: white !important;
  }
  
  /* Preserve specific colors for branded elements */
  .excel-grid thead th {
    background: #a0834e !important;
    color: white !important;
  }
  
  .excel-grid tr { break-inside: avoid; page-break-inside: avoid; }
  
  /* Force browsers to print background colors and borders exactly */
  * { 
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important;
  }
  
  /* Ensure all borders are visible in print */
  .excel-grid,
  .excel-grid th,
  .excel-grid td {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Keep layout width sane for print - match screen exactly */
  .excel-grid { 
    width: 100% !important; 
    max-width: none !important; 
    border-collapse: separate !important; /* Match screen version */
    border-spacing: 0 !important; /* Match screen version */
    border: 1px solid var(--stroke) !important; /* Match screen version */
    font-size: 11px !important; /* Reduce font size to fit more content */
    background: var(--card) !important;
    box-shadow: var(--shadow) !important;
  }
  
  /* Match screen cell borders exactly */
  .excel-grid th,
  .excel-grid td { 
    border-right: 1px solid var(--grid-line) !important;
    border-bottom: 1px solid var(--grid-line) !important;
    padding: 6px 8px !important; /* Match screen padding */
    color: #000000 !important; /* Force black text for all grid cells */
  }
  
  /* Header styling with white text on brown background */
  .excel-grid th {
    background: #a0834e !important;
    color: #ffffff !important; /* Keep white text on brown header */
    text-align: center !important;
  }
  
  /* Match screen zebra striping exactly - force specific colors */
  .excel-grid tr:nth-child(odd) td { 
    background: rgba(160, 131, 78, 0.12) !important; /* Light brown for odd rows */
  }
  .excel-grid tr:nth-child(even) td { 
    background: rgba(160, 131, 78, 0.06) !important; /* Lighter brown for even rows */
  }

  /* Preserve row selection highlighting */
  .excel-grid tbody tr.row-selected td {
    background: #dbeafe !important; /* Light blue for selected rows */
  }

  /* Ensure grid table and cells preserve their backgrounds */
  .excel-grid,
  .excel-grid th,
  .excel-grid td {
    background-color: initial !important; /* Let individual rules apply */
  }

  /* Force page breaks after every 12 rows */
  .excel-grid tbody tr { break-inside: avoid; page-break-inside: avoid; }

  /* Adjust column widths for print to fit better */
  .grid-header, .grid-row {
    grid-template-columns: 50px 1.1fr 0.8fr 0.8fr 0.8fr 0.7fr 0.8fr 0.8fr 0.8fr 0.6fr 60px !important;
  }

  /* Only show column headers on the first page (do not repeat on every page) */
  .excel-grid thead { display: table-row-group !important; }
  .excel-grid thead th { position: static !important; }

  /* Revert: keep app colors for grid backgrounds when printing */
  /* No forced transparent backgrounds here; use on-screen styles */

  /* Ensure table and header have normal stacking in print */
  .excel-grid, .print-wrapper, .print-first-header { position: relative; z-index: 1; }

  /* Remove app shell visual overlays in print to avoid side shadows on short pages */
  #app::before { display: none !important; }

  /* Force a clean white print background so partial pages don’t show dark gradients */
  html, body { background: #ffffff !important; }

  /* Make watermark visible in center of grid with 8% visibility */
  .watermark {
    opacity: 0.08 !important;
    background: transparent !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    width: 70% !important;
    max-width: 70% !important;
    height: auto !important;
    max-height: 80% !important;
    object-fit: contain !important;
  }

  /* Make table backgrounds transparent to show watermark */
  .excel-grid,
  .excel-grid th,
  .excel-grid td {
    background: transparent !important;
  }

  /* Position watermark relative to the grid container */
  .excel-grid {
    position: relative !important;
  }

  /* Revert: do not force page backgrounds to transparent */
}

/* === Excel-like table look and zebra striping === */
.excel-grid{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.excel-grid th,
.excel-grid td{
  border-right:1px solid var(--grid-line);
  border-bottom:1px solid var(--grid-line);
  padding:6px 8px;
}
.excel-grid th{
  /* Header visuals controlled elsewhere (see .sticky-on rule); keep alignment only */
  text-align:center;
}
.excel-grid tr:nth-child(odd) td{ background: var(--row-odd); }
.excel-grid tr:nth-child(even) td{ background: var(--row-even); }

.page-title{
  margin: 8px 0 16px;
  font-weight: normal; /* Changed from 700 (bold) */
  font-size: 1.2rem;   /* Reduced from default h1 size */
  /* Removed width: 50% */
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    animation: pageHeaderIn 0.3s ease both;
    position: relative;
    z-index: 10;
}

.page-header .page-title {
    margin: 0;
}

.toolbar-in-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Cards / Widget look */
.cards{
  display:grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap:12px;
}
.card{
  background:var(--card);
  border:1px solid color-mix(in oklab, var(--accent) 45%, var(--stroke));
  border-radius: var(--radius);
  padding:7px; box-shadow: var(--shadow);
  animation: cardFadeOnly 0.35s ease both;
}
/* Stagger cards in a grid so they appear in sequence */
.cards > .card:nth-child(1) { animation-delay: 0ms; }
.cards > .card:nth-child(2) { animation-delay: 55ms; }
.cards > .card:nth-child(3) { animation-delay: 110ms; }
.cards > .card:nth-child(4) { animation-delay: 165ms; }
.cards > .card:nth-child(n+5) { animation-delay: 220ms; }
.card-title{ font-size:14px; color:var(--subtle); margin-bottom:6px; }
.card-value{ font-size:28px; font-weight:700; }

/* Toolbar */
.toolbar{
  display:flex; gap:5px; align-items:center; margin:0;
  background:var(--card); border-top:none; border-bottom:1px solid var(--stroke);
  border-left:none; border-right:none; border-radius:0;
  padding:5px 8px; box-shadow:none;
}
.scanner-controls{ display:flex; align-items:center; gap:5px; }
/* Make toolbar icon buttons match the bordered look of Filter/Section */
.toolbar .icon-btn {
  width: 40px !important;
  height: 32.67px !important;
  border-color: color-mix(in oklab, var(--accent) 45%, var(--stroke));
}
/*
  Button variants guide:
  - .btn.accent   → default for routine Add/Create/Save/Calculate (subtle, matches accent)
  - .btn.primary  → high-emphasis submit actions only (rare/critical flow)
  - .btn.danger   → delete/destructive actions (icon-only ok; red)
  - For SVG icons, use stroke="currentColor" so icon matches the button color
*/
.btn{
  border:1px solid var(--stroke); background:linear-gradient(180deg, #ffffff11, #0000000a);
  border-radius: calc(var(--radius) - 2px); padding:8px 12px; display:flex; align-items:center; gap:8px;
  text-decoration: none; /* prevent underline when used on anchors */
}

/* Audit / Activity Log table */
.audit-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-log-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.audit-log-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
  word-break: break-word;
}
.audit-log-table tr:nth-child(even) td { background: color-mix(in oklab, var(--accent) 4%, transparent); }
.audit-log-table tr:hover td { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.audit-log-table td.mono { font-family: monospace; font-size: 12px; white-space: nowrap; color: var(--text-2, #6b7280); }
.audit-log-table .audit-action {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  color: var(--accent);
  white-space: nowrap;
}
.btn, a.btn { color: inherit; text-decoration: none; padding:8px 12px; display:inline-flex; align-items:center; gap:8px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.primary{
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 55%, var(--stroke));
  cursor: pointer;
  transition: background-color 160ms ease, transform 80ms ease, box-shadow 160ms ease;
}
.btn.primary:hover{ background: color-mix(in oklab, var(--accent) 24%, transparent); }
.btn.primary:active{ transform: translateY(1px); }
.btn.primary:focus-visible{ outline:none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent); }
.btn.accent{ color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, var(--stroke)); }
.btn.accent:hover{ background: color-mix(in oklab, var(--accent) 16%, transparent); }
.btn.danger{ color:#ef4444; border-color: color-mix(in oklab, #ef4444 55%, var(--stroke)); }
.btn.danger:hover{ background: color-mix(in oklab, #ef4444 16%, transparent); }
.w-140{ width:140px; justify-content:center; }
.input, .select{
  border:1px solid var(--stroke); background:var(--bg); color:inherit; border-radius: calc(var(--radius) - 2px);
  padding:8px 10px; min-width:180px;
}
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: inherit;
  transition: background-color 9999s ease-in-out 0s;
}

/* Ensure autofill highlight matches theme in dark mode too */
html[data-theme="dark"] .input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  box-shadow: 0 0 0 1000px var(--bg) inset;
}
.spacer{ flex:1; }

/* Universal dropdown styles for consistent UI */
.dropdown { 
  position: relative; 
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
  padding: 4px;
  min-width: 160px;
  backdrop-filter: blur(48px) saturate(1.6);
  animation: dropdownIn 0.18s ease both;
  transform-origin: top left;
}
html[data-theme="dark"] .dropdown-menu {
  background: rgba(24,28,38,0.97);
}

.dropdown-item { 
  display: block; 
  width: 100%; 
  padding: 8px 12px; 
  border: none; 
  background: none; 
  text-align: left; 
  border-radius: calc(var(--radius) - 2px); 
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dropdown-item:hover:not(:disabled) { 
  background: color-mix(in oklab, var(--accent) 16%, transparent); 
}

.dropdown-item:disabled { 
  color: var(--subtle); 
  background: none; 
  cursor: not-allowed; 
  opacity: 0.6;
}

/* Style HTML select elements to match app design */
select {
  border: 1px solid var(--stroke); 
  background: var(--card); 
  color: inherit; 
  border-radius: calc(var(--radius) - 2px);
  padding: 8px 10px; 
  min-width: 180px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select:focus {
  outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* Style HTML select dropdown options to have rounded corners */
select option {
  border-radius: calc(var(--radius) - 2px);
  padding: 8px 12px;
  background: var(--card);
  color: var(--fg);
}

/* Style datalist options to have rounded corners */
datalist option, 
option {
  border-radius: calc(var(--radius) - 2px);
  padding: 4px 8px;
  margin: 2px 0;
}

/* Grid (Excel-like) */
.grid-container{
  /* Let the page manage scrolling (single scrollbar) */
  overflow: visible;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--card);
  margin-top: -22px;
}
@media (max-width: 768px) {
  .grid-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.grid{
  /* The grid is now just a flex container for the rows */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grid-header, .grid-row{
  display:grid; grid-template-columns: 64px 1.3fr 1fr 1fr 1fr .9fr 1fr 1fr 1fr .8fr 72px;
}
.grid-header{ background: color-mix(in oklab, var(--accent) 12%, transparent); font-weight:600; }
.grid-header > div, .grid-row > div{
    padding:8px 10px;
    text-align: center; /* Center all cells by default */
}
.grid-row {
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
}
.grid-row div[contenteditable]{
  outline:none; min-height:28px; border:1px solid transparent; border-radius:6px;
  text-align: center;
}
.grid-row div[contenteditable]:focus{ border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); }

/* Hide browser's default calendar picker indicator on date inputs */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    /* Reset default input styles */
    background: transparent;
    outline: none;
    width: 100%;
    /* Mimic the contenteditable div styles */
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 0; /* The parent div handles the padding */
}
input[type="date"]:focus {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* FULL SCREEN DARK GRADIENT BACKGROUND */
.login-wrap{
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Segoe UI', sans-serif;
  background: url('/images/login-exterior.svg') center/cover no-repeat;
}

/* Lounge interior — above the airplane so the plane appears outside through the glass */
.login-interior-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url('/images/login-interior.svg') center/cover no-repeat;
  pointer-events: none;
}

.login-card {
  position: relative;
  z-index: 80;
}


@keyframes aurora-move {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 50% 100%; }
  75% { background-position: 0% 50%; }
  100% { background-position: 0% 50%; }
}
.login-card{
  width: 100vw; min-height: 100vh; display:grid; grid-template-columns: 420px 1fr;
  gap:0; background:transparent; border:none; border-radius:0; box-shadow:none;
  backdrop-filter:none;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.login-left{ width:420px; padding:28px 28px 28px 25px; display:flex; flex-direction:column; justify-content:center; gap:14px; position: relative; }
.login-right{ padding:28px; display:grid; place-items:center; border-left:none; }
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-left:230px; }
.login-brand-text{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.login-brand-name    { order: 1; }
.login-brand-sub     { order: 2; }
.login-brand-divider { order: 3; }
.login-brand-name{
  font-size:29px; font-weight:normal; letter-spacing:0.35em; color:#c9a55a;
  text-shadow: 0 1px 8px rgba(160,131,78,0.5);
  font-family: 'Ageone', 'AllrounderMonument', 'Segoe UI', sans-serif;
  white-space: nowrap;
}
.login-brand-divider{
  display:flex; align-items:center; gap:8px; width:100%;
}
.login-brand-line{
  flex:1; height:2px;
  background: linear-gradient(90deg, transparent, #c9a55a, transparent);
}
.login-brand-sub{
  font-size:13px; font-weight:600; letter-spacing:0.22em; color:#ffffff;
  font-family: 'Segoe UI', sans-serif;
  white-space: nowrap;
}

/* ── Airplane runway sequence ── */
.login-airplane {
  position: absolute;
  left: -60px;
  top: 240px;
  width: 72px;
  pointer-events: none;
  z-index: 2;
  filter: brightness(0.80) saturate(0.75);
  animation: airplane-sequence 20s linear infinite;
}
@keyframes airplane-sequence {
  /* fade in off-screen left */
  0%   { transform: translate(0,      0)      rotate(15deg);  opacity: 0; }
  4%   { transform: translate(0,      0)      rotate(15deg);  opacity: 1; }
  /* taxi to x=340 (400px from left:-60) */
  24%  { transform: translate(400px,  0)      rotate(15deg);  opacity: 1; }
  /* stop 3 seconds (15% of 20s = 3s) */
  39%  { transform: translate(400px,  0)      rotate(15deg);  opacity: 1; }
  /* roll to x=450 (510px) — still on ground */
  50%  { transform: translate(510px,  0)      rotate(15deg);  opacity: 1; }
  /* very gradual climb — 8 small steps toward x=1010 y=80 */
  /* y=80 on screen, top=240 → translateY = 80-240 = -160px */
  53%  { transform: translate(575px,  -20px)  rotate(12deg);  opacity: 1; }
  56%  { transform: translate(645px,  -45px)  rotate(9deg);   opacity: 1; }
  59%  { transform: translate(720px,  -72px)  rotate(6deg);   opacity: 1; }
  62%  { transform: translate(795px,  -98px)  rotate(3deg);   opacity: 1; }
  65%  { transform: translate(870px,  -118px) rotate(0deg);   opacity: 1; }
  68%  { transform: translate(945px,  -138px) rotate(-3deg);  opacity: 1; }
  71%  { transform: translate(1020px, -152px) rotate(-5deg);  opacity: 1; }
  /* arrive at x=1010, y=80 — now climb steeper */
  74%  { transform: translate(1070px, -160px) rotate(-7deg);  opacity: 1; }
  78%  { transform: translate(1160px, -215px) rotate(-11deg); opacity: 1; }
  82%  { transform: translate(1265px, -300px) rotate(-14deg); opacity: 1; }
  87%  { transform: translate(1390px, -420px) rotate(-14deg); opacity: 1; }
  /* fade out off screen */
  91%  { transform: translate(1490px, -540px) rotate(-14deg); opacity: 0; }
  /* reset */
  92%  { transform: translate(0,      0)      rotate(15deg);  opacity: 0; }
  100% { transform: translate(0,      0)      rotate(15deg);  opacity: 0; }
}
.login-right img{
  width:250px; opacity:1;
}

.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; max-width: 320px; }
.password-row{ display:flex; gap:10px; align-items:center; }
.chk{ display:flex; align-items:center; gap:6px; color:var(--fg); }
.login-card .chk { color: #e5e7eb; }

/* ── Mobile-only brand block (hidden on desktop where login-right shows) ── */
.login-mobile-brand {
  display: none;
}

/* ── Login card fields ── */
.login-left .app-title { font-size: 1.5rem; }
.login-card .login-left .form-row { max-width: 70%; }
.login-left .btn-login-submit { max-width: 40%; flex: none; }
.login-card .form-row { max-width: 100%; }
.login-card .input {
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(160,131,78,0.55);
  border-radius: 8px;
  color: #fff;
  width: 100%;
  font-size: 15px;
}
.login-card .input:focus { border-color: #a0834e; outline: none; box-shadow: 0 0 0 2px rgba(160,131,78,0.3); }
.login-card .input::placeholder { color: rgba(160,131,78,0.7); }
.login-card label  { color: #a0834e; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; }
.login-card .hint  { color: rgba(255,255,255,0.65); }

/* Fix browser autofill overriding the dark background */
.login-card .input:-webkit-autofill,
.login-card .input:-webkit-autofill:hover,
.login-card .input:-webkit-autofill:focus,
.login-card .input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 60px rgba(10,8,2,0.9) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  border-color: rgba(160,131,78,0.55) !important;
}

html[data-theme="dark"] .login-card .input { background: rgba(0,0,0,0.6); border-color: rgba(160,131,78,0.5); color: #fff; }
html[data-theme="dark"] .login-card .input::placeholder { color: rgba(160,131,78,0.65); }
html[data-theme="dark"] .login-card label { color: #a0834e; }
html[data-theme="dark"] .login-card .hint  { color: rgba(255,255,255,0.6); }
html[data-theme="dark"] .login-card .chk   { color: rgba(255,255,255,0.6); }

/* ── Login submit button ── */
.login-card .btn-login-submit {
  width: 100%; padding: 12px; justify-content: center;
  background: linear-gradient(180deg, #b8965a 0%, #7a6035 100%);
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
  border: none; border-radius: 8px; cursor: pointer;
  box-shadow: 0 2px 12px rgba(160,131,78,0.35);
  transition: filter 160ms ease, box-shadow 160ms ease;
}
.login-card .btn-login-submit:hover { filter: brightness(1.15); box-shadow: 0 4px 18px rgba(160,131,78,0.5); }
.login-card .btn-login-submit:active { filter: brightness(0.92); transform: translateY(1px); }
.login-card .btn-login-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Login passkey inline button ── */
.login-card .btn-login-passkey {
  padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent;
  color: #a0834e; font-size: 14px; font-weight: 600;
  border: 1.5px solid #a0834e; border-radius: 8px; cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, filter 160ms ease;
}
.login-card .btn-login-passkey:hover { background: rgba(160,131,78,0.12); filter: brightness(1.15); }
.login-card .btn-login-passkey:active { transform: translateY(1px); }
.login-card .btn-login-passkey:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Login bottom row ── */
.login-bottom-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; max-width: 100%;
}
.login-bottom-row .link, .login-bottom-row .btn-passkey {
  color: #a0834e; text-decoration: none; font-size: 13px; font-weight: 500;
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 5px;
  transition: color 160ms ease;
}
.login-bottom-row .link:hover, .login-bottom-row .btn-passkey:hover { color: #c4a06a; }
.login-bottom-row .btn-passkey:disabled { opacity: 0.5; cursor: not-allowed; }

.submit-row{
  display:flex; align-items:center; gap:16px; margin-top:12px;
  max-width: 320px;
}
.btn[type=submit]{ width:140px; }
.link{ color:var(--accent); text-decoration:none; }

/* ============================================
   SEASONAL LOGIN PAGE THEMES
   ============================================ */

/* Seasonal content container inside login card */
.seasonal-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  border-radius: 16px;
}

.login-left,
.login-right {
  position: relative;
  z-index: 10;
}

/* ============================================
   WINTER THEME (Dec 21-27)
   ============================================ */

/* Snow/ice border effect */
.winter-theme .login-card {
  border: 3px solid #e3f2fd;
  box-shadow: 
    0 0 15px rgba(179, 229, 252, 0.5),
    0 0 30px rgba(179, 229, 252, 0.3),
    inset 0 0 15px rgba(179, 229, 252, 0.15),
    0 15px 40px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.92) !important;
  position: relative;
}

/* Falling snowflakes */
.snowflakes {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.snowflake {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  animation: snowfall 10s linear infinite;
  opacity: 0.9;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.snowflake:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; }
.snowflake:nth-child(2) { left: 10%; animation-duration: 12s; animation-delay: 1s; width: 8px; height: 8px; }
.snowflake:nth-child(3) { left: 15%; animation-duration: 9s; animation-delay: 2s; }
.snowflake:nth-child(4) { left: 20%; animation-duration: 11s; animation-delay: 0.5s; width: 12px; height: 12px; }
.snowflake:nth-child(5) { left: 25%; animation-duration: 10s; animation-delay: 1.5s; }
.snowflake:nth-child(6) { left: 30%; animation-duration: 13s; animation-delay: 3s; width: 9px; height: 9px; }
.snowflake:nth-child(7) { left: 35%; animation-duration: 8s; animation-delay: 0.8s; }
.snowflake:nth-child(8) { left: 40%; animation-duration: 11s; animation-delay: 2.5s; width: 11px; height: 11px; }
.snowflake:nth-child(9) { left: 45%; animation-duration: 9s; animation-delay: 1.2s; }
.snowflake:nth-child(10) { left: 50%; animation-duration: 12s; animation-delay: 3.5s; }
.snowflake:nth-child(11) { left: 55%; animation-duration: 10s; animation-delay: 0.3s; width: 9px; height: 9px; }
.snowflake:nth-child(12) { left: 60%; animation-duration: 11s; animation-delay: 2s; }
.snowflake:nth-child(13) { left: 65%; animation-duration: 8s; animation-delay: 1.8s; width: 10px; height: 10px; }
.snowflake:nth-child(14) { left: 70%; animation-duration: 13s; animation-delay: 3.2s; }
.snowflake:nth-child(15) { left: 75%; animation-duration: 9s; animation-delay: 0.6s; width: 8px; height: 8px; }
.snowflake:nth-child(16) { left: 80%; animation-duration: 10s; animation-delay: 2.8s; }
.snowflake:nth-child(17) { left: 85%; animation-duration: 12s; animation-delay: 1.4s; width: 11px; height: 11px; }
.snowflake:nth-child(18) { left: 90%; animation-duration: 9s; animation-delay: 3.8s; }
.snowflake:nth-child(19) { left: 95%; animation-duration: 11s; animation-delay: 0.9s; width: 9px; height: 9px; }
.snowflake:nth-child(20) { left: 92%; animation-duration: 10s; animation-delay: 2.2s; }

@keyframes snowfall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(400px) rotate(360deg);
    opacity: 0;
  }
}

/* ============================================
   SPRING THEME (Mar 20-26)
   ============================================ */

.spring-theme .login-card {
  border: 3px solid #a5d6a7;
  box-shadow: 
    0 0 15px rgba(129, 199, 132, 0.4),
    0 0 30px rgba(129, 199, 132, 0.2),
    inset 0 0 15px rgba(129, 199, 132, 0.1),
    0 15px 40px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.92) !important;
}

.spring-theme .login-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 16px;
  background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 25%, #81c784 50%, #a5d6a7 75%, #c8e6c9 100%);
  background-size: 200% 200%;
  animation: spring-glow 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes spring-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Spring leaves/greenery */
.spring-leaves {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.spring-leaf {
  position: absolute;
  width: 24px;
  height: 28px;
  background: 
    linear-gradient(135deg, #2e7d32 0%, #388e3c 20%, #43a047 40%, #4caf50 60%, #66bb6a 80%, #81c784 100%);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  animation: spring-leaf-float 6s ease-in-out infinite;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(46, 125, 50, 0.4));
}

.spring-leaf::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 14px;
  background: linear-gradient(180deg, #2e7d32 0%, #388e3c 50%, transparent 100%);
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.spring-leaf::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.spring-leaf:nth-child(1) { left: 2%; top: 10%; animation-delay: 0s; animation-duration: 5s; width: 22px; height: 26px; }
.spring-leaf:nth-child(2) { left: -8%; top: 30%; animation-delay: 1s; animation-duration: 6.5s; transform: rotate(45deg); width: 26px; height: 30px; }
.spring-leaf:nth-child(3) { left: -6%; top: 50%; animation-delay: 2s; animation-duration: 5.8s; transform: rotate(-30deg); width: 20px; height: 24px; }
.spring-leaf:nth-child(4) { left: 1%; top: 70%; animation-delay: 0.5s; animation-duration: 6.2s; width: 24px; height: 28px; }
.spring-leaf:nth-child(5) { left: -7%; top: 85%; animation-delay: 1.5s; animation-duration: 5.5s; transform: rotate(60deg); width: 21px; height: 25px; }
.spring-leaf:nth-child(6) { right: 2%; top: 15%; animation-delay: 2.5s; animation-duration: 6s; transform: scaleX(-1); width: 25px; height: 29px; }
.spring-leaf:nth-child(7) { right: -8%; top: 35%; animation-delay: 0.8s; animation-duration: 5.9s; transform: scaleX(-1) rotate(45deg); width: 23px; height: 27px; }
.spring-leaf:nth-child(8) { right: -6%; top: 55%; animation-delay: 1.8s; animation-duration: 6.3s; transform: scaleX(-1) rotate(-30deg); width: 26px; height: 30px; }
.spring-leaf:nth-child(9) { right: 1%; top: 75%; animation-delay: 3s; animation-duration: 5.7s; transform: scaleX(-1); width: 22px; height: 26px; }
.spring-leaf:nth-child(10) { right: -7%; top: 90%; animation-delay: 0.3s; animation-duration: 6.1s; transform: scaleX(-1) rotate(60deg); width: 24px; height: 28px; }
.spring-leaf:nth-child(11) { left: 10%; top: -5%; animation-delay: 1.2s; animation-duration: 5.6s; transform: rotate(20deg); width: 20px; height: 24px; }
.spring-leaf:nth-child(12) { left: 30%; top: -6%; animation-delay: 2.2s; animation-duration: 6.4s; transform: rotate(-15deg); width: 25px; height: 29px; }
.spring-leaf:nth-child(13) { left: 50%; top: -5%; animation-delay: 0.6s; animation-duration: 5.4s; width: 23px; height: 27px; }
.spring-leaf:nth-child(14) { left: 70%; top: -6%; animation-delay: 1.9s; animation-duration: 6.6s; transform: rotate(35deg); width: 26px; height: 30px; }
.spring-leaf:nth-child(15) { left: 90%; top: -5%; animation-delay: 2.8s; animation-duration: 5.8s; transform: rotate(-25deg); width: 21px; height: 25px; }

@keyframes spring-leaf-float {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-3px) translateX(2px) rotate(15deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(0) translateX(-2px) rotate(-5deg);
    opacity: 0.7;
  }
  75% {
    transform: translateY(3px) translateX(1px) rotate(3deg);
    opacity: 0.8;
  }
}

/* ============================================
   SUMMER THEME (Jun 21-27)
   ============================================ */

.summer-theme .login-card {
  border: 3px solid #ffcc80;
  box-shadow: 
    0 0 20px rgba(255, 183, 77, 0.5),
    0 0 35px rgba(255, 183, 77, 0.3),
    inset 0 0 20px rgba(255, 183, 77, 0.15),
    0 15px 40px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.92) !important;
}

.summer-theme .login-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffe082 0%, #ffcc80 25%, #ffb74d 50%, #ffcc80 75%, #ffe082 100%);
  background-size: 200% 200%;
  animation: summer-glow 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes summer-glow {
  0%, 100% { 
    background-position: 0% 50%;
    filter: brightness(1);
  }
  50% { 
    background-position: 100% 50%;
    filter: brightness(1.15);
  }
}

/* Sun rays */
.sun-rays {
  position: absolute;
  width: 100%;
  height: 100%;
}

.sun-ray {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, #ffb74d, transparent);
  transform-origin: 0% 50%;
  animation: sun-ray-rotate 8s linear infinite;
  opacity: 0.6;
  filter: blur(1px);
}

.sun-ray:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
.sun-ray:nth-child(2) { transform: rotate(45deg); animation-delay: 1s; }
.sun-ray:nth-child(3) { transform: rotate(90deg); animation-delay: 2s; }
.sun-ray:nth-child(4) { transform: rotate(135deg); animation-delay: 3s; }
.sun-ray:nth-child(5) { transform: rotate(180deg); animation-delay: 4s; }
.sun-ray:nth-child(6) { transform: rotate(225deg); animation-delay: 5s; }
.sun-ray:nth-child(7) { transform: rotate(270deg); animation-delay: 6s; }
.sun-ray:nth-child(8) { transform: rotate(315deg); animation-delay: 7s; }

@keyframes sun-ray-rotate {
  0% {
    transform: rotate(var(--rotation, 0deg)) scaleX(1);
    opacity: 0.4;
  }
  50% {
    transform: rotate(var(--rotation, 0deg)) scaleX(1.2);
    opacity: 0.7;
  }
  100% {
    transform: rotate(calc(var(--rotation, 0deg) + 360deg)) scaleX(1);
    opacity: 0.4;
  }
}

/* Sun circle */
.summer-theme .seasonal-content::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #fff59d 0%, #ffeb3b 30%, #ffc107 70%, #ffb74d 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 20px rgba(255, 193, 7, 0.6),
    0 0 40px rgba(255, 193, 7, 0.4),
    inset 0 0 15px rgba(255, 235, 59, 0.8);
  animation: sun-pulse 3s ease-in-out infinite;
  z-index: 1;
}

@keyframes sun-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(255, 193, 7, 0.6),
      0 0 40px rgba(255, 193, 7, 0.4),
      inset 0 0 15px rgba(255, 235, 59, 0.8);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 
      0 0 30px rgba(255, 193, 7, 0.8),
      0 0 60px rgba(255, 193, 7, 0.6),
      inset 0 0 20px rgba(255, 235, 59, 1);
  }
}

/* ============================================
   AUTUMN THEME (Sep 22-28)
   ============================================ */

.autumn-theme .login-card {
  border: 3px solid #ff9800;
  box-shadow: 
    0 0 15px rgba(255, 152, 0, 0.4),
    0 0 30px rgba(255, 152, 0, 0.2),
    inset 0 0 15px rgba(255, 152, 0, 0.1),
    0 15px 40px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.92) !important;
}

.autumn-theme .login-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffcc80 0%, #ffb74d 25%, #ff9800 50%, #ffb74d 75%, #ffcc80 100%);
  background-size: 200% 200%;
  animation: autumn-glow 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes autumn-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Falling autumn leaves */
.autumn-leaves {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.autumn-leaf {
  position: absolute;
  top: -30px;
  width: 28px;
  height: 32px;
  background: 
    radial-gradient(ellipse at 30% 30%, rgba(255, 235, 59, 0.3) 0%, transparent 40%),
    linear-gradient(135deg, #bf360c 0%, #d84315 15%, #e64a19 30%, #ff5722 50%, #ff6f00 65%, #ff8f00 80%, #ffa726 100%);
  clip-path: polygon(
    50% 0%,
    65% 15%,
    85% 20%,
    95% 35%,
    90% 55%,
    70% 70%,
    55% 100%,
    45% 100%,
    30% 70%,
    10% 55%,
    5% 35%,
    15% 20%,
    35% 15%
  );
  animation: autumn-leaf-fall 14s ease-in-out infinite;
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(191, 54, 12, 0.4));
}

.autumn-leaf::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(135deg, transparent 0%, rgba(139, 69, 19, 0.3) 20%, transparent 40%),
    linear-gradient(45deg, transparent 0%, rgba(139, 69, 19, 0.2) 30%, transparent 60%);
  clip-path: polygon(
    50% 0%,
    65% 15%,
    85% 20%,
    95% 35%,
    90% 55%,
    70% 70%,
    55% 100%,
    45% 100%,
    30% 70%,
    10% 55%,
    5% 35%,
    15% 20%,
    35% 15%
  );
}

.autumn-leaf:nth-child(odd) {
  background: 
    radial-gradient(ellipse at 35% 25%, rgba(255, 193, 7, 0.4) 0%, transparent 35%),
    linear-gradient(135deg, #b71c1c 0%, #c62828 15%, #d32f2f 30%, #e53935 50%, #f44336 65%, #ef5350 80%, #e57373 100%);
}

.autumn-leaf:nth-child(3n) {
  background: 
    radial-gradient(ellipse at 40% 30%, rgba(255, 235, 59, 0.3) 0%, transparent 40%),
    linear-gradient(135deg, #e65100 0%, #ef6c00 15%, #f57c00 30%, #fb8c00 50%, #ff9800 65%, #ffa726 80%, #ffb74d 100%);
}

.autumn-leaf:nth-child(5n) {
  background: 
    radial-gradient(ellipse at 30% 35%, rgba(255, 193, 7, 0.35) 0%, transparent 38%),
    linear-gradient(135deg, #4e342e 0%, #5d4037 15%, #6d4c41 30%, #795548 50%, #8d6e63 65%, #a1887f 80%, #bcaaa4 100%);
}

.autumn-leaf:nth-child(1) { left: 10%; animation-duration: 15s; animation-delay: 0s; width: 26px; height: 30px; }
.autumn-leaf:nth-child(2) { left: 20%; animation-duration: 13s; animation-delay: 2s; transform: rotate(45deg); width: 30px; height: 34px; }
.autumn-leaf:nth-child(3) { left: 30%; animation-duration: 16s; animation-delay: 4s; transform: rotate(-30deg); width: 24px; height: 28px; }
.autumn-leaf:nth-child(4) { left: 40%; animation-duration: 14s; animation-delay: 1s; width: 28px; height: 32px; }
.autumn-leaf:nth-child(5) { left: 50%; animation-duration: 17s; animation-delay: 3s; transform: rotate(60deg); width: 25px; height: 29px; }
.autumn-leaf:nth-child(6) { left: 60%; animation-duration: 13s; animation-delay: 5s; transform: rotate(-45deg); width: 29px; height: 33px; }
.autumn-leaf:nth-child(7) { left: 70%; animation-duration: 15s; animation-delay: 1.5s; width: 27px; height: 31px; }
.autumn-leaf:nth-child(8) { left: 80%; animation-duration: 14s; animation-delay: 3.5s; transform: rotate(30deg); width: 26px; height: 30px; }
.autumn-leaf:nth-child(9) { left: 90%; animation-duration: 16s; animation-delay: 0.5s; transform: rotate(-60deg); width: 30px; height: 34px; }
.autumn-leaf:nth-child(10) { left: 25%; animation-duration: 15s; animation-delay: 2.5s; transform: rotate(15deg); width: 28px; height: 32px; }
.autumn-leaf:nth-child(11) { left: 55%; animation-duration: 14s; animation-delay: 4.5s; transform: rotate(-15deg); width: 24px; height: 28px; }
.autumn-leaf:nth-child(12) { left: 75%; animation-duration: 13s; animation-delay: 1.8s; transform: rotate(75deg); width: 29px; height: 33px; }

@keyframes autumn-leaf-fall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  15% {
    transform: translateY(80px) rotate(45deg) translateX(15px) scale(0.95);
  }
  30% {
    transform: translateY(160px) rotate(120deg) translateX(-20px) scale(1.05);
  }
  45% {
    transform: translateY(240px) rotate(200deg) translateX(25px) scale(0.98);
  }
  60% {
    transform: translateY(320px) rotate(290deg) translateX(-15px) scale(1.02);
  }
  75% {
    transform: translateY(380px) rotate(360deg) translateX(10px) scale(0.96);
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(450px) rotate(420deg) translateX(0) scale(0.9);
    opacity: 0;
  }
}

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.hint{ opacity:.7; margin-top:10px; font-size:12px; }

/* Focus ring like Win11 */
:focus-visible{ outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; border-radius: 6px; }

/* Notes / voucher overlay popup — must be global (used in MainLayout on all pages) */
.notes-popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.68); backdrop-filter:blur(10px); z-index:200; display:flex; align-items:center; justify-content:center; }
.notes-popup { background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:0 8px 32px rgba(0,0,0,0.18); width:420px; max-width:95vw; }
.notes-popup-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--stroke); }
.notes-popup-header h4 { margin:0; font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notes-popup-body { padding:16px 18px; }
.notes-popup-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--stroke); gap:8px; }

/* === Top navigation layout === */
.titlebar{
  height:auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 16px; border-bottom:1px solid var(--stroke); background:var(--card);
  backdrop-filter: blur(24px) saturate(1.4); position:sticky; top:0; z-index:2000; flex-wrap:wrap;
}

.titlebar-left{ display:flex; align-items:center; gap:11px; }
.app-logo{ width:32px; height:32px; }
.app-title{
  font-family: 'Ageone', 'AllrounderMonument', 'Segoe UI', sans-serif;
  font-weight: normal;
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-indent: 0.22em; /* compensate trailing letter-spacing so it centers visually */
  color: var(--accent);
}

/* Center section: the top nav links */
.topnav{
  display:flex; align-items:center; gap:6px; overflow:auto; scrollbar-width:none;
  -ms-overflow-style:none; flex:1; justify-content:center; padding:4px 6px;
}
.topnav::-webkit-scrollbar{ display:none; }

.topnav-link{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border-radius: var(--radius);
  text-decoration:none; color:var(--accent); white-space:nowrap;
  border:1px solid color-mix(in oklab, var(--accent) 38%, var(--stroke));
  background: color-mix(in oklab, var(--card) 85%, transparent);
  font-size: 13px;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.topnav-link.active, .topnav-link:hover{
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-color: var(--accent);
}

/* Active page indicator with glow */
.topnav-link.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 
              0 0 8px rgba(160, 131, 78, 0.4),
              0 4px 12px rgba(0,0,0,.12);
  background: color-mix(in oklab, var(--accent) 20%, transparent);
}

/* Dropdown trigger active state */
.topnav-dropdown.has-active-child > .topnav-link.dropdown-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 
              0 0 8px rgba(160, 131, 78, 0.4),
              0 4px 12px rgba(0,0,0,.12);
  background: color-mix(in oklab, var(--accent) 20%, transparent);
}

/* Date Picker Styles */
.date-picker-wrapper {
    position: relative;
}

.date-picker-input {
    position: relative;
    cursor: pointer;
}

.date-picker-input input {
    padding-right: 40px;
}

.calendar-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    color: var(--accent);
}

.calendar-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--bg);
    border: 1px solid var(--stroke);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 4000;
    min-width: 280px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.calendar-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--fg);
}

.calendar-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.calendar-nav-btn:hover {
    background: var(--bg);
}

.calendar-nav-btn svg {
    width: 20px;
    height: 20px;
    color: var(--fg);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg);
    opacity: 0.6;
    padding: 4px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    aspect-ratio: 1;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--fg);
}

.calendar-day:hover:not(:disabled) {
    background: var(--bg);
}

.calendar-day.other-month {
    opacity: 0.3;
    cursor: not-allowed;
}

.calendar-day.selected {
    background: var(--accent);
    color: white;
    font-weight: 600;
}

.calendar-day.today {
    border: 2px solid var(--accent);
}

.calendar-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--stroke);
}

/* Dropdown navigation styles */
.topnav-dropdown {
  position: relative;
  display: inline-flex;
}

.topnav-dropdown > .topnav-link.dropdown-trigger {
  cursor: pointer;
  user-select: none;
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--stroke));
}

.topnav-dropdown > .topnav-link.dropdown-trigger::after {
  content: '▼';
  margin-left: 6px;
  font-size: 10px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.topnav-dropdown:hover > .topnav-link.dropdown-trigger {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-color: var(--accent);
}

.topnav-dropdown:hover > .topnav-link.dropdown-trigger::after {
  transform: rotate(180deg);
}

.dropdown-content {
  /* Use visibility+opacity instead of display so we can delay the hide */
  visibility: hidden;
  opacity: 0;
  /* No pointer-events override — visibility:hidden already blocks them,
     and visibility:visible during the grace period keeps them active */
  transform: translateY(-6px);
  /* Hide immediately on show, but delay hide by 300ms so cursor can reach the menu */
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.3s;
  position: fixed;
  top: 52px;
  left: auto;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.12);
  backdrop-filter: blur(18px);
  z-index: 2100;
  overflow: hidden;
  padding-top: 4px;
  margin-top: -4px;
}

.dropdown-content a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--fg);
  transition: all 0.15s ease;
  border-bottom: 1px solid color-mix(in oklab, var(--stroke) 50%, transparent);
  background: var(--card);
}

.dropdown-content a:first-child {
  padding-top: 10px;
}

.topnav-dropdown:hover .dropdown-content,
.topnav-dropdown.active .dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  /* Show with no delay, hide delay is on the base rule */
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

.dropdown-content a {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--fg);
  transition: all 0.15s ease;
  border-bottom: 1px solid color-mix(in oklab, var(--stroke) 50%, transparent);
}

.dropdown-content a:last-child {
  border-bottom: none;
}

.dropdown-content a:hover,
.dropdown-content a.active {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 13px;
}
.dropdown-nav-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 16px;
  text-decoration: none; color: var(--fg);
  background: var(--card); border: none; cursor: pointer;
  transition: all 0.15s ease;
  font-size: inherit; font-family: inherit;
  border-top: 1px solid color-mix(in oklab, var(--stroke) 50%, transparent);
}
.dropdown-nav-btn:hover {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 13px;
}

/* Right side */
.titlebar-right{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:36px; height:36px; border:1px solid var(--stroke);
  background:linear-gradient(180deg, #ffffff22, #00000011);
  border-radius: calc(var(--radius) - 2px);
  display:grid; place-items:center; box-shadow: var(--shadow);
}
.icon-btn:active{ transform: translateY(1px); }
.icon-btn.danger:hover{ border-color:#ef4444; color:#ef4444; }

.user-chip{
  display:flex; align-items:center; gap:8px; padding:4px 10px;
  border:1px solid var(--stroke); border-radius: calc(var(--radius) - 2px);
  background:var(--card);
}
.user-chip img{ width:20px; height:20px; border-radius:50%; }

/* Content spacing when top nav is present */
.content.content--topnav{
  padding:18px 18px 48px;
  width: 100%;
  box-sizing: border-box;
}

/* Prices page specific styles */
.price-settings-card {
    max-width: 750px;
    width: 100%;
}

.price-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.price-form-grid .input {
    width: 100%;
}

/* Profile Page Styles */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.profile-picture-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.profile-picture {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--stroke);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.profile-picture:hover {
    transform: scale(2.5);
    z-index: 1000;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.user-avatar-hover {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.user-avatar-hover:hover {
    transform: scale(3);
    z-index: 1000;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* --- Theme Toggle Button --- */
.theme-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid rgba(160, 131, 78, 0.3);
    background: linear-gradient(135deg, rgba(212, 183, 108, 0.2), rgba(186, 157, 93, 0.2));
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.theme-btn:hover {
    border-color: rgba(160, 131, 78, 0.6);
    background: linear-gradient(135deg, rgba(212, 183, 108, 0.3), rgba(186, 157, 93, 0.3));
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(160, 131, 78, 0.2);
}

.theme-btn:active {
    transform: scale(0.95);
}

.theme-btn .icon-sun,
.theme-btn .icon-moon {
    width: 20px;
    height: 20px;
    position: absolute;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-btn .icon-sun { 
    color: #d4af37;
    opacity: 1;
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
}

.theme-btn .icon-moon { 
    color: #60a5fa;
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

html[data-theme="dark"] .theme-btn {
    border-color: rgba(96, 165, 250, 0.3);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(59, 130, 246, 0.1));
}

html[data-theme="dark"] .theme-btn:hover {
    border-color: rgba(96, 165, 250, 0.6);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(59, 130, 246, 0.2));
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}

html[data-theme="dark"] .theme-btn .icon-sun { 
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

html[data-theme="dark"] .theme-btn .icon-moon { 
    opacity: 1;
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
}

@keyframes moonIn {
    0% { transform: rotate(90deg) scale(0.5); opacity: 0; }
    100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* --- Copy Down / Fill Handle Styles --- */
.excel-grid td {
    position: relative; /* Needed for the fill-handle positioning */
}

/* Suppress any focus outlines or accent borders within the grid */
.excel-grid :focus,
.excel-grid :focus-visible,
.excel-grid td:focus,
.excel-grid td:focus-visible,
.excel-grid .cell-input:focus,
.excel-grid .cell-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Sticky table header so column labels don't scroll with body */
/* No sticky header when using single-page scrolling */
table.excel-grid.sticky-on thead th{
  position: sticky;
  top: 95px; /* 52px titlebar + 43px toolbar */
  background: color-mix(in oklab, var(--accent) 10%, var(--bg)) !important;
  z-index: 10;
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
html[data-theme="dark"] table.excel-grid.sticky-on thead th{
  background: color-mix(in oklab, var(--accent) 14%, var(--bg)) !important;
}

.fill-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6px;
    height: 6px;
    background-color: var(--accent);
    cursor: crosshair;
    display: none; /* Hidden by default */
    z-index: 10;
}

/* Show handle when cell is the active cell (handle lives inside active cell) */
.excel-active-cell .fill-handle { display: block; }

/* Removed multi-selection visuals (sel-row, td.sel, fill-selection) */

/* --- Print-specific Styles --- */
@media print {
    @page {
        size: A4;
        margin: 5mm; /* 5mm margin on all sides of all pages */
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    /* Hide all non-essential UI elements */
    .titlebar,
    .toolbar,
    .sidebar,
    .topnav,
    .btn,
    .icon-btn,
    .user-chip,
    .theme-switch {
        display: none !important;
    }

    /* Hide copyright footer when printing */
    .content > div[style*="text-align: center"] {
        display: none !important;
    }

    /* Hide pagination controls (Page X of Y) when printing */
    .content > div[style*="display: flex"][style*="justify-content: center"] {
        display: none !important;
    }

    /* Ensure main content area is clean and fills the page */
    .content, .shell, .card, .login-wrap {
        all: unset !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-header {
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    /* .grid-container has an inline padding-top:43px to clear the fixed toolbar on screen.
       In print the toolbar is hidden so that padding becomes dead space above the content. */
    .grid-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

  /* Hide Agent (7th col) and D. Birth (8th col) in the excel-grid during print */
  table.excel-grid thead th:nth-child(7),
  table.excel-grid thead th:nth-child(8),
  table.excel-grid tbody td:nth-child(7),
  table.excel-grid tbody td:nth-child(8) {
    display: none !important;
  }

  /* Hide EIA No. (9th col) when filtering by voucher */
  table.excel-grid.hide-eia-column thead th:nth-child(9),
  table.excel-grid.hide-eia-column tbody td:nth-child(9) {
    display: none !important;
  }

  /* First-page header styles */
  .print-first-header { 
    display: block; 
    text-align: center; 
    color: #000000 !important; /* Force black text for print headers */
  }
  .print-wrapper { page-break-after: avoid; }
  
  /* Ensure all text elements are black in print */
  h1, h2, h3, h4, h5, h6, p, span, div, label {
    color: #000000 !important;
  }

  /* Set consistent font size for better readability and ~20 rows per page */
  html, body { 
    font-size: 14px !important; 
  }
  
  /* Maintain proper sizing for table elements */
  .print-wrapper, .print-wrapper *,
  table.excel-grid, table.excel-grid *,
  .print-first-header, .print-first-header *,
  .print-last-footer, .print-last-footer * {
    font-size: 14px !important;
  }
  
  /* Adjust table cell padding for better fit */
  table.excel-grid td,
  table.excel-grid th {
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }
  
  /* Use same column widths as screen view for print */
  table.excel-grid th:nth-child(1),
  table.excel-grid td:nth-child(1) {
    width: 70px !important;
  }
  
  table.excel-grid th:nth-child(2),
  table.excel-grid td:nth-child(2) {
    width: 220px !important;
  }
  
  table.excel-grid th:nth-child(3),
  table.excel-grid td:nth-child(3) {
    width: 160px !important;
  }
  
  table.excel-grid th:nth-child(4),
  table.excel-grid td:nth-child(4) {
    width: 180px !important;
  }
  
  table.excel-grid th:nth-child(6),
  table.excel-grid td:nth-child(6) {
    width: 150px !important;
  }

  table.excel-grid th:nth-child(9),
  table.excel-grid td:nth-child(9) {
    width: 160px !important;
  }

  table.excel-grid th:nth-child(10),
  table.excel-grid td:nth-child(10) {
    width: 140px !important;
  }

  table.excel-grid th:nth-child(11),
  table.excel-grid td:nth-child(11) {
    width: 100px !important;
  }
  
  /* Tweak specific header/footer text sizes */
  .print-first-header h1 { font-size: 16px !important; }
  .print-first-header div { font-size: 11px !important; }
  
  /* Hide the table tfoot completely in print (we use separate footer div instead) */
  table.excel-grid tfoot {
    display: none !important;
  }
  
  /* Style the last-page footer div */
  .print-last-page-footer {
    font-size: 12px !important;
    color: #000000 !important;
    page-break-inside: avoid;
    margin-top: 10px;
  }
  
  /* When printing selected rows only, hide non-selected */
  table.excel-grid.print-selected tbody tr:not(.selected) { display: none !important; }
}

/* --- List View Styles (for Vouchers, Airlines, etc.) --- */
.list-view {
    display: flex;
    flex-direction: column;
}

.list-header, .list-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    gap: 16px;
    align-items: center; 
    padding: 12px 14px;
    border-bottom: 1px solid var(--stroke);
}

.list-view .list-row:last-child {
    border-bottom: none;
}

/* --- Toast Notifications --- */
.toast{
  position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  background: var(--card); color: var(--fg); border:1px solid var(--stroke);
  padding: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.toast-ok{ border-color: color-mix(in oklab, var(--accent) 50%, var(--stroke)); }
.toast-error{ border-color: #ef4444; color:#ef4444; }

.list-header {
    font-weight: 600;
    color: var(--subtle);
}

.list-row .actions { text-align: right; }

/* --- Modal Dialog Styles --- */
.modal-backdrop,
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    z-index: 100;
    animation: overlayFadeIn 0.2s ease both;
}

.modal-dialog,
.modal-content {
    width: min(500px, 90vw);
    background: var(--card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    animation: modal-fade-in 0.2s ease-out;
}

@keyframes modal-fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Checkbox Group --- */
.checkbox-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Global Cursor Pointer for Interactive Elements --- */
button,
a,
[role="button"],
.btn {
    cursor: pointer;
}

button:disabled,
.btn:disabled {
    cursor: default;
}

/* Blazor error UI */
/* ── Reconnect slim bottom banner ─────────────────────────────────────── */
#reconnect-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.22);
}
#reconnect-banner.state-reconnecting {
    display: flex;
    background: #92400e;
    color: #fef3c7;
    pointer-events: none;
}
#reconnect-banner.state-failed {
    display: flex;
    background: #7f1d1d;
    color: #fee2e2;
}
#reconnect-banner.state-ok {
    display: flex;
    background: #14532d;
    color: #dcfce7;
    pointer-events: none;
    animation: reconnect-banner-out 0.4s ease 1.9s forwards;
}
@keyframes reconnect-banner-out {
    to { opacity: 0; }
}
#reconnect-banner .banner-spinner {
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: reconnect-spin 0.75s linear infinite;
    flex-shrink: 0;
}
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
#reconnect-banner .banner-queue {
    font-size: 11px;
    opacity: 0.80;
    margin-left: 4px;
}
#reconnect-banner .banner-reload-btn {
    padding: 4px 14px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 8px;
    color: inherit;
    font-weight: 700;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.15s;
}
#reconnect-banner .banner-reload-btn:hover {
    background: rgba(255,255,255,0.28);
}

/* Keep old error UI for unhandled runtime errors (not connection loss) */
#blazor-error-ui {
    background: #7f1d1d;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    display: none;
    left: 0;
    padding: 0.7rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
    color: #fee2e2;
    font-size: 14px;
    font-weight: 600;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    opacity: 0.8;
}
#blazor-error-ui .reload {
    color: #fca5a5;
    text-decoration: underline;
    margin-left: 8px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    body { font-size: 14px; }

    /* ── Row 1: logo + user icons, 52px ── */
    .titlebar {
        flex-wrap: wrap;
        height: auto;
        padding: 0;
        gap: 0;
    }

    .titlebar-left {
        order: 1;
        flex: 1;
        padding: 0 12px;
        height: 52px;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .app-title {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .titlebar-right {
        order: 2;
        padding: 0 8px;
        height: 52px;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    /* Hide username text — keep avatar only */
    .user-chip span { display: none; }
    .user-chip { gap: 0; }

    /* ── Row 2: nav pills, horizontal scroll, no wrap ── */
    .topnav {
        order: 3;
        flex-basis: 100%;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        padding: 5px 8px;
        border-top: 1px solid var(--stroke);
        gap: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .topnav::-webkit-scrollbar { display: none; }

    .topnav-link {
        padding: 5px 10px;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Hide nav icons on mobile to save space */
    .topnav .nav-icon { display: none; }

    .topnav-dropdown { flex-shrink: 0; }

    /* Dropdown opens below the full header (~96px) */
    .dropdown-content {
        position: fixed;
        top: 96px;
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        max-width: 280px;
    }

    /* Toolbar: single horizontally scrollable row */
    .toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 4px;
        padding: 4px 6px;
        top: 96px !important;
    }
    .toolbar::-webkit-scrollbar { display: none; }

    /* Search: compact fixed width, no min-width override */
    .toolbar-search { width: 80px !important; min-width: 0 !important; flex-shrink: 0; }

    /* Filter / Section buttons: shrink to content, no 140px inline width */
    .toolbar .btn { width: auto !important; flex-shrink: 0; font-size: 12px; white-space: nowrap; padding: 5px 8px; }

    /* Icon-only buttons keep square shape */
    .scanner-controls .btn,
    .toolbar .btn[style*="width:40px"],
    .toolbar .btn[style*="width: 40px"],
    .toolbar .btn[style*="width:32px"],
    .toolbar .btn[style*="width: 32px"] { width: 36px !important; height: 36px !important; padding: 0 !important; flex-shrink: 0; }

    /* Entries chip */
    .toolbar span[style*="Entries"] { flex-shrink: 0; font-size: 12px; white-space: nowrap; }

    .content.content--topnav { padding: 10px 8px 48px; }

    /* Grid */
    /* padding-top override: toolbar is at 96px, ~41px tall; content area starts ~90px below viewport */
    .grid-container { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 52px !important; }
    .excel-grid { min-width: 1200px; }

    /* ── Login: single-column, full-screen, readable ── */
    .login-card { grid-template-columns: 1fr !important; }
    .login-right { display: none !important; }
    .login-left {
        width: 100% !important;
        min-height: 100vh;
        min-height: 100dvh;
        justify-content: flex-start;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        padding: 48px 28px 40px;
    }
    /* Form fields full-width on mobile */
    .login-card .login-left .form-row { max-width: 100% !important; }
    /* Submit button full-width on mobile */
    .login-left .btn-login-submit { max-width: 100% !important; flex: 1 !important; }
    /* Airplane animation is calibrated for desktop pixel positions, hide on mobile */
    .login-airplane { display: none; }
    /* Show compact brand at top of login form on mobile */
    .login-mobile-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
    }
    .login-mobile-brand img {
        width: 64px;
        height: 64px;
    }
    .login-mobile-brand-name {
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 0.32em;
        color: #c9a55a;
        text-shadow: 0 1px 8px rgba(160,131,78,0.5);
        font-family: 'Ageone', 'AllrounderMonument', 'Segoe UI', sans-serif;
        white-space: nowrap;
    }

    .news-bar-wrap { display: none; }

    .modal-content { width: 95vw; max-width: none; }
}

/* Section switching animations - smooth fade and slide transition */
@keyframes fadeSlideOut {
    0% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateX(-30px);
    }
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateX(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

.slide-up-exit,
.slide-down-exit {
    animation: fadeSlideOut 0.4s ease-in-out forwards;
}

.slide-up-enter,
.slide-down-enter {
    animation: fadeSlideIn 0.4s ease-in-out forwards;
}

/* Messenger interface styles */
.conversation-item {
    transition: background 0.2s ease;
}

.conversation-item:hover {
    background: var(--accent-muted) !important;
}

.conversation-item.active {
    border-left: 3px solid var(--accent);
}

/* ===== MOBILE TOUCH OPTIMIZATIONS ===== */
/* Applied only when .is-mobile class is present on html element */

html.is-mobile {
    /* Prevent iOS zoom on input focus */
    -webkit-text-size-adjust: 100%;
}

/* Touch-optimized buttons - minimum 44px touch target */
html.is-mobile .btn,
html.is-mobile .icon-btn,
html.is-mobile .topnav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
}

/* Larger input fields for easier touch - only apply 16px to inputs to prevent zoom */
html.is-mobile .input,
html.is-mobile .select {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom */
    padding: 12px;
}

/* Better visual feedback on touch */
html.is-mobile .excel-grid td.excel-active-cell {
    box-shadow: inset 0 0 0 2px var(--selection-border) !important;
    background-color: var(--selection-bg) !important;
}

/* Hide fill handle on mobile (not touch-friendly) */
html.is-mobile .fill-handle,
html.is-mobile .fill-handle-hotspot {
    display: none !important;
}

/* Remove fill handle pseudo-element on mobile */
html.is-mobile .excel-grid td.excel-active-cell::before {
    display: none !important;
}

/* Touch-optimized toolbar */
html.is-mobile .toolbar {
    padding: 8px;
    gap: 8px;
}

html.is-mobile .toolbar .icon-btn {
    width: 44px !important;
    height: 44px !important;
}

/* Larger table cells for touch */
html.is-mobile .excel-grid td {
    min-height: 44px;
    padding: 8px 12px;
}

/* Better touch scrolling */
html.is-mobile .grid-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/* Kurdish font */
@font-face {
    font-family: 'K24Kurdish';
    src: url('/fonts/K24KurdishLight-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

/* Disable hover effects on mobile */
html.is-mobile .btn:hover,
html.is-mobile .icon-btn:hover,
html.is-mobile .topnav-link:hover {
    background: inherit;
}

/* Better active/pressed state for mobile */
html.is-mobile .btn:active,
html.is-mobile .icon-btn:active,
html.is-mobile .topnav-link:active {
    opacity: 0.7;
    transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM POLISH — applied globally
   ═══════════════════════════════════════════════════════════ */

/* Thin, elegant scrollbar */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: color-mix(in oklab, var(--accent) 28%, var(--stroke)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: color-mix(in oklab, var(--accent) 52%, var(--stroke)); }
::-webkit-scrollbar-corner       { background: transparent; }

/* Card — subtle hover lift across all pages */
.card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}

/* Modal — richer shadow, border accent */
.modal-dialog,
.modal-content {
    border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--stroke));
    box-shadow:
        0 40px 100px rgba(0,0,0,0.38),
        0  0   0  1px rgba(255,255,255,0.04);
}

/* Buttons — micro-interaction polish */
.btn {
    transition: background 0.16s ease, border-color 0.16s ease,
                box-shadow 0.16s ease, transform 0.1s ease, filter 0.16s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn.primary {
    box-shadow: 0 2px 10px color-mix(in oklab, var(--accent) 22%, transparent);
}
.btn.primary:hover:not(:disabled) {
    box-shadow: 0 4px 18px color-mix(in oklab, var(--accent) 34%, transparent);
}

/* Page header — more breathing room, premium title */
.page-header {
    margin-bottom: 22px;
}
.page-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Topnav active glow — slightly more pronounced */
.topnav-link.active {
    border-color: var(--accent);
    box-shadow:
        0 0 0 1px var(--accent),
        0 0 12px rgba(160,131,78,0.30),
        0 4px 12px rgba(0,0,0,0.10);
    background: color-mix(in oklab, var(--accent) 18%, transparent);
}


/* ── Login card rotating border — @property lives here to avoid
   Razor's angle-bracket parser treating <angle> as an HTML tag  */
@property --lpw-rot {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes lpw-spin {
    to { --lpw-rot: 360deg; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIWAN LOUNGE — PREMIUM UI OVERHAUL
   Applied globally; scoped selectors prevent collisions with existing rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Additional semantic tokens ─────────────────────────────────────────── */
:root {
    --success:      #16a34a;
    --success-bg:   color-mix(in oklab, #16a34a 12%, transparent);
    --warning:      #d97706;
    --warning-bg:   color-mix(in oklab, #d97706 12%, transparent);
    --danger:       #dc2626;
    --danger-bg:    color-mix(in oklab, #dc2626 12%, transparent);
    --info:         #0284c7;
    --info-bg:      color-mix(in oklab, #0284c7 12%, transparent);
    --accent-glow:  color-mix(in oklab, var(--accent) 35%, transparent);
    --card-shadow:
        0 1px 2px rgba(0,0,0,0.06),
        0 4px 16px rgba(0,0,0,0.08),
        0 0 0 1px color-mix(in oklab, var(--accent) 14%, var(--stroke));
    --card-shadow-hover:
        0 2px 4px rgba(0,0,0,0.07),
        0 8px 28px rgba(0,0,0,0.12),
        0 0 0 1px color-mix(in oklab, var(--accent) 26%, var(--stroke));
}
html[data-theme="dark"] {
    --card-shadow:
        0 1px 2px rgba(0,0,0,0.24),
        0 4px 20px rgba(0,0,0,0.30),
        0 0 0 1px color-mix(in oklab, var(--accent) 18%, var(--stroke));
    --card-shadow-hover:
        0 2px 6px rgba(0,0,0,0.28),
        0 10px 36px rgba(0,0,0,0.38),
        0 0 0 1px color-mix(in oklab, var(--accent) 32%, var(--stroke));
}

/* ── Titlebar ────────────────────────────────────────────────────────────── */
.titlebar {
    height: 52px;
    padding: 0 16px;
    backdrop-filter: blur(32px) saturate(1.6);
    -webkit-backdrop-filter: blur(32px) saturate(1.6);
    border-bottom: 1px solid color-mix(in oklab, var(--accent) 16%, var(--stroke));
    box-shadow: 0 1px 0 color-mix(in oklab, var(--accent) 10%, transparent),
                0 2px 8px rgba(0,0,0,0.06);
}
.app-title {
    font-family: 'Ageone', 'AllrounderMonument', 'Segoe UI', sans-serif;
    font-weight: normal;
    font-size: 13.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-indent: 0.22em;
    color: var(--accent);
    text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 28%, transparent);
}
.app-logo {
    width: 32px;
    height: 32px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
    padding: 14px 10px;
    gap: 2px;
    border-right: 1px solid color-mix(in oklab, var(--accent) 10%, var(--stroke));
    background: color-mix(in oklab, var(--card) 95%, transparent);
    backdrop-filter: blur(20px);
}
.sidebar a {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    color: var(--subtle);
}
.sidebar a:hover {
    background: color-mix(in oklab, var(--accent) 10%, transparent);
    color: var(--fg);
}
.sidebar a.active {
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent),
                0 0 12px color-mix(in oklab, var(--accent) 10%, transparent);
    font-weight: 600;
}
.sidebar-sep {
    background: color-mix(in oklab, var(--accent) 14%, var(--stroke));
    margin: 10px 4px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--stroke));
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    background: var(--card);
    backdrop-filter: blur(8px);
}
.card:hover {
    box-shadow: var(--card-shadow-hover);
    border-color: color-mix(in oklab, var(--accent) 34%, var(--stroke));
    transform: translateY(-1px);
}

/* Card body padding — consistent 18px inner spacing */
.card-body { padding: 18px; }

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-title {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
}
.page-subtitle {
    font-size: 13px;
    color: var(--subtle);
    margin-top: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 14px;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
    cursor: pointer;
    line-height: 1.4;
}
.btn:active:not(:disabled) {
    transform: translateY(1px);
}
.btn.primary {
    background: color-mix(in oklab, var(--accent) 20%, transparent);
    border-color: color-mix(in oklab, var(--accent) 55%, var(--stroke));
    color: var(--accent);
    box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 18%, transparent);
}
.btn.primary:hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 28%, transparent);
    box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 28%, transparent);
}
.btn.primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 38%, transparent);
}
.btn.accent {
    color: var(--accent);
    border-color: color-mix(in oklab, var(--accent) 40%, var(--stroke));
    font-weight: 600;
}
.btn.accent:hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 14%, transparent);
    border-color: color-mix(in oklab, var(--accent) 60%, var(--stroke));
}
.btn.danger {
    color: #dc2626;
    border-color: color-mix(in oklab, #dc2626 45%, var(--stroke));
}
.btn.danger:hover:not(:disabled) {
    background: color-mix(in oklab, #dc2626 12%, transparent);
    box-shadow: 0 4px 14px color-mix(in oklab, #dc2626 18%, transparent);
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
/* :not(.lpw-input) keeps the login-page inputs from being reset by these
   type-attribute selectors, which have higher specificity (0,1,1) than
   the .lpw-input class (0,1,0) and would wipe out its icon padding.       */
.input,
.select,
input[type="text"]:not(.lpw-input),
input[type="password"]:not(.lpw-input),
input[type="email"]:not(.lpw-input),
input[type="search"]:not(.lpw-input),
input[type="number"]:not(.lpw-input),
input[type="date"]:not(.lpw-input),
textarea,
select {
    border-radius: 8px;
    border: 1px solid var(--stroke);
    padding: 8px 11px;
    font-size: 13.5px;
    background: var(--bg);
    color: var(--fg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.input:focus,
.select:focus,
input[type="text"]:not(.lpw-input):focus,
input[type="password"]:not(.lpw-input):focus,
input[type="email"]:not(.lpw-input):focus,
input[type="search"]:not(.lpw-input):focus,
input[type="number"]:not(.lpw-input):focus,
input[type="date"]:not(.lpw-input):focus,
textarea:focus,
select:focus {
    border-color: color-mix(in oklab, var(--accent) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* ── Tables (non-grid) ───────────────────────────────────────────────────── */
.table-premium {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
.table-premium thead th {
    background: color-mix(in oklab, var(--accent) 10%, var(--card));
    color: var(--fg);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 2px solid color-mix(in oklab, var(--accent) 30%, var(--stroke));
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
.table-premium tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--stroke);
    vertical-align: middle;
}
.table-premium tbody tr {
    transition: background 0.12s ease;
}
.table-premium tbody tr:hover td {
    background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.table-premium tbody tr:last-child td {
    border-bottom: none;
}

/* Upgrade existing audit-log-table header to match */
.audit-log-table th {
    background: color-mix(in oklab, var(--accent) 14%, var(--card));
    color: var(--fg);
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 2px solid color-mix(in oklab, var(--accent) 38%, var(--stroke));
}
html[data-theme="dark"] .audit-log-table th {
    background: color-mix(in oklab, var(--accent) 18%, var(--card));
}

/* ── Badges / role chips ─────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge-admin    { background: color-mix(in oklab,#dc2626 14%,transparent); color:#b91c1c; border-color:color-mix(in oklab,#dc2626 28%,transparent); }
.badge-accountant { background: color-mix(in oklab,#7c3aed 14%,transparent); color:#6d28d9; border-color:color-mix(in oklab,#7c3aed 28%,transparent); }
.badge-moderator  { background: color-mix(in oklab,#0284c7 14%,transparent); color:#0369a1; border-color:color-mix(in oklab,#0284c7 28%,transparent); }
.badge-regular    { background: color-mix(in oklab,#16a34a 14%,transparent); color:#15803d; border-color:color-mix(in oklab,#16a34a 28%,transparent); }
.badge-gold       { background: color-mix(in oklab,var(--accent) 14%,transparent); color:var(--accent); border-color:color-mix(in oklab,var(--accent) 32%,transparent); }
.badge-neutral    { background: color-mix(in oklab,var(--fg) 8%,transparent); color:var(--subtle); border-color:var(--stroke); }

html[data-theme="dark"] .badge-admin      { color:#f87171; }
html[data-theme="dark"] .badge-accountant { color:#a78bfa; }
html[data-theme="dark"] .badge-moderator  { color:#38bdf8; }
html[data-theme="dark"] .badge-regular    { color:#4ade80; }

/* ── Modal / Dialog ──────────────────────────────────────────────────────── */
.modal-overlay, .modal-backdrop {
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    background: rgba(0,0,0,0.52);
    animation: overlayFadeIn 0.2s ease both;
}
.modal-dialog {
    border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--stroke));
    box-shadow:
        0 4px 8px rgba(0,0,0,0.10),
        0 24px 64px rgba(0,0,0,0.28),
        0  0   0  1px rgba(255,255,255,0.04);
    border-radius: 14px;
    overflow: hidden;
    animation: cardFadeUp 0.22s ease both;
}
.modal-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid color-mix(in oklab, var(--accent) 14%, var(--stroke));
    background: color-mix(in oklab, var(--accent) 6%, var(--card));
}
.modal-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.modal-body { padding: 22px; }
.modal-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--stroke);
    background: color-mix(in oklab, var(--fg) 2%, var(--card));
}

/* ── Status / alert strips ───────────────────────────────────────────────── */
.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid transparent;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: color-mix(in oklab,var(--success) 30%,transparent); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in oklab,var(--warning) 30%,transparent); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: color-mix(in oklab,var(--danger)  30%,transparent); }
.alert-info    { background: var(--info-bg);    color: var(--info);    border-color: color-mix(in oklab,var(--info)    30%,transparent); }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--accent) 24%, var(--stroke));
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--accent) 44%, var(--stroke));
}

/* ── KPI / stat cards (Dashboard) ───────────────────────────────────────── */
.dash-kpi-card {
    padding: 18px 16px 16px;
    border-left: 3px solid color-mix(in oklab, var(--kc, var(--accent)) 55%, transparent);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 6px;
    transition: transform 0.20s ease, box-shadow 0.20s ease;
}
.dash-kpi-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--kc, var(--accent)) 8%, transparent) 0%,
        transparent 55%);
    pointer-events: none;
}
.dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}
.dash-kpi-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: color-mix(in oklab, var(--kc, var(--accent)) 14%, transparent);
    color: var(--kc, var(--accent));
    display: grid; place-items: center;
}
.dash-kpi-value {
    font-size: 29px; font-weight: 800; line-height: 1.1;
    color: var(--kc, var(--accent));
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.dash-kpi-label {
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--subtle);
}
.dash-kpi-sub {
    font-size: 12px; color: var(--subtle); margin-top: 2px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 60px 20px; color: var(--subtle); text-align: center;
}
.empty-state svg { opacity: 0.35; }
.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--fg); margin: 0; }
.empty-state p  { font-size: 13.5px; margin: 0; max-width: 320px; }

/* ── Loading shimmer ─────────────────────────────────────────────────────── */
@keyframes shimmer {
    from { background-position: -400px 0; }
    to   { background-position:  400px 0; }
}
.skeleton {
    border-radius: 6px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--fg) 5%, transparent) 25%,
        color-mix(in oklab, var(--fg) 10%, transparent) 50%,
        color-mix(in oklab, var(--fg) 5%, transparent) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.4s infinite linear;
}

/* ── Dropdown menus ──────────────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--stroke));
    box-shadow:
        0 4px 6px rgba(0,0,0,0.06),
        0 16px 40px rgba(0,0,0,0.12);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    animation: dropdownIn 0.16s ease both;
}
.dropdown-item {
    padding: 9px 14px;
    font-size: 13.5px;
    transition: background 0.12s ease;
    cursor: pointer;
}
.dropdown-item:hover {
    background: color-mix(in oklab, var(--accent) 10%, transparent);
}

/* ── Tooltip polish ──────────────────────────────────────────────────────── */
.tooltip-content, [data-tooltip]::after {
    font-size: 12px;
    border-radius: 6px;
    padding: 5px 9px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* ── Section / filter tabs ───────────────────────────────────────────────── */
.tab-group {
    display: flex; gap: 4px;
    background: color-mix(in oklab, var(--fg) 5%, transparent);
    border: 1px solid var(--stroke);
    border-radius: 10px; padding: 3px;
}
.tab-item {
    padding: 6px 14px; border-radius: 7px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.14s ease, color 0.14s ease;
    color: var(--subtle); border: none; background: none;
}
.tab-item.active, .tab-item:hover {
    background: color-mix(in oklab, var(--accent) 16%, var(--card));
    color: var(--accent);
}
.tab-item.active {
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    font-weight: 600;
}

/* ── Form label refinement ───────────────────────────────────────────────── */
label, .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 0.01em;
}

/* ── Accent divider ──────────────────────────────────────────────────────── */
.divider-accent {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklab, var(--accent) 40%, transparent) 30%,
        color-mix(in oklab, var(--accent) 40%, transparent) 70%,
        transparent);
    border: none; margin: 16px 0;
}

/* ── Numeric tabular alignment (tables with counts/amounts) ─────────────── */
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── Toolbar refinement — padding kept at original 5px 8px so the
   grid-container's hard-coded padding-top:43px stays exact        */
.toolbar {
    padding: 5px 8px;
    background: color-mix(in oklab, var(--card) 90%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--accent) 10%, var(--stroke));
    backdrop-filter: blur(12px);
    gap: 5px;
    margin-bottom: 4px;
}

/* ── Excel-grid header upgrade ───────────────────────────────────────────── */
.excel-grid thead th {
    background: color-mix(in oklab, var(--accent) 10%, var(--bg));
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--accent) 80%, var(--fg));
    border-bottom: 2px solid color-mix(in oklab, var(--accent) 25%, var(--stroke));
}
html[data-theme="dark"] .excel-grid thead th {
    background: color-mix(in oklab, var(--accent) 14%, var(--bg));
    color: color-mix(in oklab, var(--accent) 90%, var(--fg));
}

/* Audit view popup: cancel sticky header so data rows aren't hidden behind headers */
.audit-view-popup .excel-grid th {
    position: static !important;
    z-index: auto !important;
}

/* ── Icon-button refinement ──────────────────────────────────────────────── */
.icon-btn {
    transition: background 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
    color: var(--subtle);
}
.icon-btn:hover {
    background: color-mix(in oklab, var(--accent) 12%, transparent);
    color: var(--accent);
    box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 14%, transparent);
}

/* ── Checkbox / toggle refinement ───────────────────────────────────────── */
input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px; height: 15px;
}

/* ── Profile avatar ring ─────────────────────────────────────────────────── */
.avatar-ring {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px color-mix(in oklab, var(--accent) 50%, transparent);
}

/* ── Topnav link (sidebar alternative) ──────────────────────────────────── */
.topnav-link {
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.topnav-link:hover:not(.active) {
    background: color-mix(in oklab, var(--accent) 10%, transparent);
    color: var(--accent);
}
.topnav-link.active {
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    color: var(--accent);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent),
        0 2px 10px color-mix(in oklab, var(--accent) 18%, transparent);
    font-weight: 600;
}

/* ── Search input with icon ──────────────────────────────────────────────── */
.search-wrap {
    position: relative; display: inline-flex; align-items: center;
}
.search-wrap .search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--subtle); pointer-events: none; width: 15px; height: 15px;
}
.search-wrap .input { padding-left: 32px; }

/* ── Page transition wrapper ─────────────────────────────────────────────── */
.page-fade {
    animation: cardFadeUp 0.28s ease both;
}

/* ── Premium section heading ─────────────────────────────────────────────── */
.section-heading {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in oklab, var(--accent) 20%, var(--stroke));
    margin-bottom: 14px;
}

/* ── Reduce motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .card, .btn, .input, .modal-dialog, .dropdown-menu,
    .dash-kpi-card, .sidebar a, .icon-btn, .topnav-link {
        transition: none !important;
        animation: none !important;
    }
}