/* ============================================================
   Nimbity Notice Dashboard — Light Design System
   Inspired by Tremor / modern SaaS aesthetic

   Typography scale (all rem, relative to root font-size):
     2rem    — important values (metric numbers, at-risk figure)
     1.5rem  — page titles
     1.25rem — section headings, card headings, tbl-title
     1rem    — body text, table cells, nav items, inputs
     0.875rem— secondary / supporting text
     0.75rem — labels, badges, chips, table headers, captions
============================================================ */

/* ── Design tokens ────────────────────────────────────────── */
:root {
  /* Root — change this one value to rescale everything */
  font-size: 16px;

  /* Backgrounds */
  --bg:       #f5f6fa;
  --bg2:      #ffffff;
  --bg3:      #f0f1f7;
  --bg4:      #e8eaf2;

  /* Borders */
  --border:   #e2e4ee;
  --border2:  #d0d3e0;

  /* Text */
  --text:     #1a1d2e;
  --muted:    #6b7280;
  --dim:      #a0a8b8;

  /* Brand accents — Nimbity cyan + navy */
  --accent:   #00b8f0;   /* Nimbity cyan */
  --accent2:  #0d1b3e;   /* Nimbity navy */
  --accent3:  #10b981;   /* emerald — success/positive unchanged */

  /* Semantic colours */
  --red:      #ef4444;
  --amber:    #f59e0b;
  --blue:     #3b82f6;

  /* Shape */
  --radius:    14px;
  --radius-sm:  8px;
}


/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── Base ─────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1rem;       /* body text */
  line-height: 1.6;
}


/* ── Shell ────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}


/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-logo {
  padding: 16px 16px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sidebar-logo-img {
  width: 100%;
  max-width: 148px;
  height: auto;
  display: block;
  object-fit: contain;
}

.nav-section {
  font-size: 0.75rem;    /* label */
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 12px 24px 4px;
  font-weight: 500;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 1rem;       /* body */
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 0 8px;
  transition: background .12s, color .12s;
}

.nav-item:hover {
  background: var(--bg3);
  color: var(--text);
}

.nav-item.active {
  background: linear-gradient(135deg, #e0f7fd, #cdf0fc);
  color: var(--accent2);
  font-weight: 600;
}

.nav-item i {
  font-size: 1rem;       /* body */
  width: 1rem;
  flex-shrink: 0;
}


/* ── Main content area ────────────────────────────────────── */
.main {
  background: var(--bg);
  overflow: auto;
  padding: 24px;
}

.toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-title {
  font-size: 1.5rem;     /* title */
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.02em;
}

.page-sub {
  font-size: 0.875rem;   /* secondary */
  color: var(--muted);
  margin-top: 2px;
}

.badge-date {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.875rem;   /* secondary */
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.badge-date i {
  font-size: 1rem;       /* body */
  color: var(--accent);
}


/* ── Metric cards ─────────────────────────────────────────── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.metric-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.metric-label {
  font-size: 0.75rem;    /* label */
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.metric-val {
  font-size: 2rem;       /* important */
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.03em;
}

.metric-val.red    { color: var(--red); }
.metric-val.amber  { color: var(--amber); }
.metric-val.green  { color: var(--accent3); }
.metric-val.accent { color: var(--accent); }

.metric-delta {
  font-size: 0.875rem;   /* secondary */
  color: var(--dim);
  margin-top: 5px;
}

.metric-delta .dn { color: var(--red); }

.metric-pill {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.75rem;    /* label */
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
}

.pill-red   { background: #fef2f2; color: var(--red); }
.pill-amber { background: #fffbeb; color: var(--amber); }
.pill-green { background: #f0fdf4; color: var(--accent3); }
.pill-blue  { background: #eff6ff; color: var(--blue); }


/* ── Bento grid ───────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.bento-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.bento-card.span2 { grid-column: span 2; }
.bento-card.span3 { grid-column: span 3; }

.card-label {
  font-size: 0.75rem;    /* label */
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge-sm {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 0.75rem;    /* label */
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}


/* ── Bar charts ───────────────────────────────────────────── */
.bar-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.bar-name2 {
  font-size: 0.875rem;   /* secondary */
  color: var(--muted);
  width: 120px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track2 {
  flex: 1;
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill2 {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c1, #5b6cf9), var(--c2, #8b5cf6));
}

.bar-count2 {
  font-size: 0.875rem;   /* secondary */
  font-weight: 600;
  color: var(--text);
  min-width: 24px;
  text-align: right;
}


/* ── Status chips / badges ────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.75rem;    /* label */
  font-weight: 500;
}

.ch-cancel  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.ch-pending { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.ch-ok      { background: #f0fdf4; color: #059669; border: 1px solid #bbf7d0; }
.ch-blue    { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.ch-purple  { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.ch-neutral { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); }


/* ── Donut chart + legend ─────────────────────────────────── */
.donut-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.legend2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.l2r {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;   /* secondary */
  color: var(--muted);
}

.l2s {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.l2v {
  margin-left: auto;
  font-size: 0.875rem;   /* secondary */
  font-weight: 600;
  color: var(--text);
}


/* ── Alert banners ────────────────────────────────────────── */
.alert-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.alert-banner.red {
  background: #fef2f2;
  border-color: #fecaca;
}

.alert-icon {
  font-size: 1.25rem;    /* heading */
  color: var(--amber);
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-banner.red .alert-icon { color: var(--red); }

.alert-text {
  font-size: 1rem;       /* body */
  color: #92400e;
  font-weight: 500;
}

.alert-banner.red .alert-text { color: #991b1b; }

.alert-sub {
  font-size: 0.875rem;   /* secondary */
  color: #b45309;
  margin-top: 2px;
}

.alert-banner.red .alert-sub { color: #b91c1c; }


/* ── Table controls ───────────────────────────────────────── */
.tbl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tbl-title {
  font-size: 1.25rem;    /* heading */
  font-weight: 600;
  color: var(--text);
}

.tbl-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Search input wrapper */
.sw {
  position: relative;
  display: flex;
  align-items: center;
}

.sw i {
  position: absolute;
  left: 10px;
  font-size: 1rem;       /* body */
  color: var(--dim);
  pointer-events: none;
}

.sw input {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px 7px 32px;
  font-size: 1rem;       /* body */
  color: var(--text);
  width: 200px;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.sw input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 184, 240, .15);
}

/* Dropdown filter */
select.fsel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 1rem;       /* body */
  color: var(--muted);
  outline: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

select.fsel:focus { border-color: var(--accent); }


/* ── Data table ───────────────────────────────────────────── */
.tbl-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;       /* body */
}

th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.75rem;    /* label */
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: var(--bg3);
}

th:hover { color: var(--text); }

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

tr:last-child td { border-bottom: none; }
tr:hover td      { background: #f8f9fd; }

/* Monospace policy numbers */
.mono {
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 0.875rem;   /* secondary */
  color: var(--muted);
}

/* Document status icons */
.doc-yes { color: var(--accent3); font-size: 1rem; }
.doc-no  { color: var(--red);     font-size: 1rem; }
.doc-na  { color: var(--dim);     font-size: 1rem; }

/* Empty state */
.empty {
  padding: 2rem;
  text-align: center;
  color: var(--dim);
  font-size: 1rem;       /* body */
}


/* ── NOC / Cancellation cards ─────────────────────────────── */
.noc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.noc-card {
  background: var(--bg2);
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.noc-carrier {
  font-size: 0.75rem;    /* label */
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}

.noc-insured {
  font-size: 1rem;       /* body */
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noc-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.noc-amt {
  font-size: 1.25rem;    /* heading */
  font-weight: 700;
  color: var(--red);
}

.noc-due {
  font-size: 0.875rem;   /* secondary */
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
}


/* ── Activity timeline ────────────────────────────────────── */
.tl2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl2-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.tl2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tl2-date {
  font-size: 0.875rem;   /* secondary */
  color: var(--dim);
  width: 56px;
  flex-shrink: 0;
  font-weight: 500;
}

.tl2-carrier {
  font-size: 0.875rem;   /* secondary */
  color: var(--muted);
  width: 90px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl2-insured {
  font-size: 1rem;       /* body */
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}


/* ── Dynamic content utility classes ─────────────────────── */
.noc-mini-row    { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 4px; transition: background .1s; }
.noc-mini-row:hover { background: var(--bg3); }
.noc-mini-name   { font-size: 0.875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; margin-right: 8px; }
.noc-mini-right  { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.noc-mini-amt    { font-size: 0.875rem;  color: var(--red);   font-weight: 600; }
.noc-mini-due    { font-size: 0.75rem;   color: var(--dim); }
.noc-mini-more   { font-size: 0.875rem;  color: var(--dim);   padding-top: 5px; }
.noc-at-risk-val { font-size: 2rem;      font-weight: 700;    color: var(--red); letter-spacing: -.03em; margin: 6px 0 4px; }  /* important */
.noc-at-risk-sub { font-size: 0.875rem;  color: var(--muted); margin-bottom: 12px; }
.type-bar-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.td-due-ok       { color: var(--amber); }
.td-due-na       { color: var(--dim); }
.td-amt          { font-weight: 600; color: var(--text); }
.td-amt-na       { font-weight: 600; color: var(--dim); }
.td-premium-pos  { font-weight: 600; color: var(--accent3); }
.td-premium-na   { font-weight: 600; color: var(--dim); }
.td-noc-due      { color: var(--red);   font-weight: 600; }
.td-noc-amt      { color: var(--red);   font-weight: 600; }
.td-noc-bal      { color: var(--muted); }
.td-lob          { font-size: 0.875rem; color: var(--muted); }
.td-claim-type   { font-size: 0.875rem; color: var(--muted); }
.td-agency       { font-size: 0.875rem; color: var(--muted); }
.section-label-row { margin-bottom: 10px; }
.policy-5col     { grid-template-columns: repeat(5, 1fr); }


/* ── Drag-and-drop upload zone ────────────────────────────── */
.drop-zone {
  margin: 12px 8px 16px;
  border: 1.5px dashed var(--border2);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--accent);
  background: #e6f8fe;
}

.drop-zone.drag-over {
  background: #ccf1fd;
}

/* Prominent state when no spreadsheet is loaded */
.drop-zone.no-data {
  border-color: var(--accent);
  border-width: 2px;
  background: linear-gradient(135deg, #e6f8fe, #f0fbff);
  box-shadow: 0 0 0 3px rgba(0, 184, 240, .15);
  animation: drop-pulse 2.5s ease-in-out infinite;
}

.drop-zone.no-data i {
  color: var(--accent);
  font-size: 1.5rem;
}

.drop-zone.no-data .drop-zone-label {
  color: var(--accent2);
  font-weight: 600;
}

.drop-zone.no-data .drop-zone-sub {
  color: var(--accent);
}

.drop-zone.no-data:hover {
  background: #ccf1fd;
  box-shadow: 0 0 0 4px rgba(0, 184, 240, .25);
  animation: none;
}

@keyframes drop-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 184, 240, .15); }
  50%       { box-shadow: 0 0 0 5px rgba(0, 184, 240, .28); }
}

.drop-zone i {
  font-size: 1.25rem;
  color: var(--dim);
  transition: color .15s;
}

.drop-zone:hover i,
.drop-zone.drag-over i {
  color: var(--accent);
}

.drop-zone-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

.drop-zone-sub {
  font-size: 0.75rem;
  color: var(--dim);
}

.drop-zone input[type="file"] {
  display: none;
}

/* Upload status bar */
.upload-status {
  margin: 0 8px 12px;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 7px;
  line-height: 1.3;
}

.upload-status.show { display: flex; }

.upload-status.loading {
  background: #e6f8fe;
  color: var(--accent);
  border: 1px solid #7dd9f5;
}

.upload-status.success {
  background: #f0fdf4;
  color: #059669;
  border: 1px solid #bbf7d0;
}

.upload-status.error {
  background: #fef2f2;
  color: var(--red);
  border: 1px solid #fecaca;
}

.upload-status i { font-size: 1rem; flex-shrink: 0; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; display: inline-block; }


/* ── Day-before-notice highlight ──────────────────────────── */
/* Rows where Notice Date = report date − 1 day             */
tr.row-highlight td {
  background: #fffbeb;
  border-bottom-color: #fde68a;
}
tr.row-highlight:hover td {
  background: #fef3c7;
}
tr.row-highlight td:first-child {
  border-left: 3px solid var(--amber);
  padding-left: 11px;    /* compensate for border width */
}
.tl2-item.row-highlight {
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 3px solid var(--amber);
  padding-left: 11px;
}
/* Usage: style="--c1:#5b6cf9; --c2:#8b5cf6" on .bar-fill2   */
/*
   Indigo  → Violet   #5b6cf9 → #8b5cf6
   Emerald → Indigo   #10b981 → #5b6cf9
   Violet  → Pink     #8b5cf6 → #ec4899
   Amber   → Red      #f59e0b → #ef4444
   Blue    → Emerald  #3b82f6 → #10b981
   Red     → Amber    #ef4444 → #f59e0b
   Pink    → Violet   #ec4899 → #8b5cf6
*/


/* ============================================================
   AUTH — Login modal, Account panel, User management, Log
============================================================ */

/* ── Overlay backdrop ─────────────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 62, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* ── Login modal ──────────────────────────────────────────── */
.auth-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(13, 27, 62, .18);
}

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}

.auth-title {
  font-size: 1.5rem;     /* title */
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}

.auth-sub {
  font-size: 0.875rem;   /* secondary */
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}

.auth-field {
  margin-bottom: 14px;
}

.auth-label {
  display: block;
  font-size: 0.75rem;    /* label */
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}

.auth-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 1rem;       /* body */
  color: var(--text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 184, 240, .15);
}

.auth-btn {
  width: 100%;
  background: var(--accent2);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 1rem;       /* body */
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity .12s;
}

.auth-btn:hover { opacity: .88; }

.auth-error {
  background: #fef2f2;
  color: var(--red);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.auth-success {
  background: #f0fdf4;
  color: #059669;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

/* ── Account panel (slide-in modal) ──────────────────────── */
.account-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(13, 27, 62, .18);
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-title {
  font-size: 1.25rem;    /* heading */
  font-weight: 600;
  color: var(--text);
}

.panel-close {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  transition: background .12s;
}

.panel-close:hover { background: var(--bg4); color: var(--text); }

/* Current user card */
.panel-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.puc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.puc-name  { font-size: 1rem; font-weight: 600; color: var(--text); }
.puc-email { font-size: 0.875rem; color: var(--muted); margin-top: 1px; }
.puc-info  { flex: 1; }

.puc-role {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.role-admin { background: #e0f7fd; color: #0077a8; border: 1px solid #7dd9f5; }
.role-user  { background: var(--bg4); color: var(--muted); border: 1px solid var(--border2); }

/* Panel tabs */
.panel-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 12px 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}

.panel-tab:hover { color: var(--text); }
.panel-tab.active { color: var(--accent2); border-bottom-color: var(--accent); font-weight: 600; }

/* Panel body */
.panel-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.panel-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}

/* ── User list rows ───────────────────────────────────────── */
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg4);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info  { flex: 1; min-width: 0; }
.user-name  { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.user-email { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-del-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.875rem;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}

.user-del-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--red);
}

/* ── Audit log rows ───────────────────────────────────────── */
.log-row {
  display: grid;
  grid-template-columns: 150px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

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

.log-ts     { font-size: 0.75rem; color: var(--dim); white-space: nowrap; }
.log-user   { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-action { font-size: 0.875rem; color: var(--text); grid-column: 1 / -1; padding-left: 0; }

.log-dl-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s;
}

.log-dl-btn:hover { background: var(--bg4); color: var(--text); }


/* ============================================================
   DATE SELECTOR — top-right report date picker
============================================================ */

.date-selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px 5px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  white-space: nowrap;
}

.date-sel-dropdown {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  max-width: 260px;
}

.date-sel-dropdown option,
.date-sel-dropdown optgroup {
  font-size: 0.875rem;
  background: var(--bg2);
  color: var(--text);
}

/* ── Chart / bento empty state ────────────────────────────── */
.chart-empty {
  font-size: 0.875rem;
  color: var(--dim);
  text-align: center;
  padding: 16px 0;
}


/* ============================================================
   EXPORT / IMPORT — backup bar in manage users tab
============================================================ */

.backup-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.backup-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

.backup-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .12s, background .12s;
  border: 1px solid transparent;
  white-space: nowrap;
}

.backup-btn-export {
  background: var(--accent2);
  color: #fff;
  border-color: var(--accent2);
}

.backup-btn-export:hover { opacity: .85; }

.backup-btn-import {
  background: var(--bg2);
  color: var(--text);
  border-color: var(--border2);
}

.backup-btn-import:hover {
  background: var(--bg4);
}

.panel-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0 18px;
}


/* ============================================================
   CUSTOM DATE SELECTOR DROPDOWN WITH DELETE
============================================================ */

.dsel-wrap {
  position: relative;
  display: inline-block;
}

.dsel-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px 5px 10px;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  white-space: nowrap;
  max-width: 320px;
  transition: border-color .12s;
}

.dsel-trigger:hover { border-color: var(--accent); }

.dsel-trigger-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.875rem;
}

.dsel-chevron { font-size: 0.75rem; color: var(--dim); flex-shrink: 0; }

.dsel-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  min-width: 340px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
  padding: 6px 0;
}

.dsel-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 8px 14px 4px;
}

.dsel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  cursor: pointer;
  transition: background .1s;
}

.dsel-row:hover { background: var(--bg3); }
.dsel-row.dsel-active { background: #e6f8fe; }

.dsel-row-label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dsel-active .dsel-row-label { font-weight: 600; color: var(--accent2); }

.dsel-del-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dim);
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}

.dsel-del-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--red);
}


/* ============================================================
   REPORTS LIST IN ADMIN PANEL
============================================================ */

.report-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.report-row-active {
  background: #e6f8fe;
  margin: 0 -24px;
  padding: 10px 24px;
  border-left: 3px solid var(--accent);
}

.report-row-icon {
  width: 36px;
  height: 36px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.report-row-active .report-row-icon {
  background: #cdf0fc;
  border-color: #7dd9f5;
  color: var(--accent2);
}

.report-row-info { flex: 1; min-width: 0; }

.report-row-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-row-meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.report-row-active-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent2);
  background: #cdf0fc;
  border: 1px solid #7dd9f5;
  border-radius: 20px;
  padding: 1px 8px;
  margin-top: 4px;
}

/* ── Timeline view-all ────────────────────────────────────── */
.tl2-view-all {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  padding: 8px 0 2px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  transition: color .12s;
}
.tl2-view-all:hover { color: var(--accent2); text-decoration: underline; }

/* ── Clickable metric cards ───────────────────────────────── */
.metric-card-link {
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.metric-card-link:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,184,240,.15);
  transform: translateY(-1px);
}
.metric-card-link:active {
  transform: translateY(0);
}


/* ============================================================
   ADAPT DASHBOARD — BRIDGE
   Extends original CSS for the new HTML structure.
   All rules here use the original design tokens.
============================================================ */

/* ── Layout shell ──────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.main {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ── Sidebar — dark navy override ──────────────────────────── */
.sidebar {
  background: var(--accent2);
  border-right: none;
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-logo {
  padding: 0 20px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.sidebar-logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-logo-sub {
  color: rgba(255,255,255,0.38);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

/* Redefine nav-item for dark sidebar */
.sidebar-nav .nav-section-label,
.sidebar-nav .nav-section {
  color: rgba(255,255,255,0.28);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 10px 5px;
  margin: 0;
}

.sidebar-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 0;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.58);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sidebar-nav .nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
}

.sidebar-nav .nav-item.active {
  background: rgba(0,184,240,0.16);
  color: white;
  font-weight: 600;
}

.sidebar-nav .nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}

.sidebar-nav .nav-item.active svg { opacity: 1; }

.nav-badge {
  margin-left: auto;
  background: rgba(0,184,240,0.2);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
}

.sidebar-bottom {
  padding: 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.sidebar-user:hover { background: rgba(255,255,255,0.07); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.user-name {
  color: rgba(255,255,255,0.9);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  color: rgba(255,255,255,0.35);
  font-size: 0.7rem;
  text-transform: capitalize;
}

/* ── Page header / subheader ───────────────────────────────── */
.page-intro { margin-bottom: 20px; }
.page-intro h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.page-intro p { color: var(--muted); font-size: 0.875rem; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.section-title { font-size: 1rem; font-weight: 600; color: var(--text); }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.card-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}

/* ── Metric cards ──────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.metric-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.metric-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.03em;
}

.metric-sub { font-size: 0.875rem; color: var(--dim); margin-top: 5px; }
.metric-accent  .metric-value { color: var(--accent); }
.metric-danger  .metric-value { color: var(--red); }
.metric-warning .metric-value { color: var(--amber); }
.metric-success .metric-value { color: var(--accent3); }

/* ── Bento ─────────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.bento-2 { grid-column: span 2; }
.bento-3 { grid-column: span 3; }
@media (max-width: 1100px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-3 { grid-column: span 2; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .bento-2, .bento-3 { grid-column: span 1; }
}

/* ── Data tables ───────────────────────────────────────────── */
.table-wrap, .tbl-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.table-wrap table, .tbl-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table-wrap thead th, .tbl-wrap th {
  padding: 9px 14px;
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: var(--bg3);
}

.table-wrap thead th:hover, .tbl-wrap th:hover { color: var(--text); }

.table-wrap tbody td, .tbl-wrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-wrap tbody tr:last-child td, .tbl-wrap tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover td, .tbl-wrap tr:hover td { background: #f8f9fd; }
tr.highlight-amber td { background: #fffbeb; border-bottom-color: #fde68a; }
tr.highlight-amber td:first-child { border-left: 3px solid var(--amber); padding-left: 11px; }
tr.highlight-amber:hover td { background: #fef3c7; }

/* ── Chips ─────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}
.chip-blue, .ch-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.chip-red,  .ch-cancel{ background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.chip-yellow,.ch-pending{ background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.chip-green,.ch-ok { background: #f0fdf4; color: #059669; border: 1px solid #bbf7d0; }
.chip-gray, .ch-neutral { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); }

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 500;
}
.alert-warning { background: #fff7ed; border-color: #fed7aa; color: #92400e; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-info    { background: #e6f8fe; border-color: #7dd9f5; color: #0077a8; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity .12s, background .12s;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary   { background: var(--accent2); color: white; }
.btn-primary:hover { opacity: .88; }
.btn-secondary { background: var(--bg2); border: 1px solid var(--border2); color: var(--text); }
.btn-secondary:hover { background: var(--bg4); }
.btn-danger    { background: var(--red); color: white; }
.btn-danger:hover { opacity: .88; }
.btn-ghost     { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--bg3); color: var(--text); }
.btn-sm        { padding: 5px 10px; font-size: 0.75rem; }
.btn-icon      { padding: 6px; border-radius: var(--radius-sm); }

/* ── Filters ───────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.filter-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text);
  min-width: 200px;
  outline: none;
}
.filter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,184,240,.15); }
.filter-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: var(--accent); }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,27,62,0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(13,27,62,.18);
}
.modal-title { font-size: 1.5rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.modal-sub   { color: var(--muted); font-size: 0.875rem; margin-bottom: 24px; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}
.form-input, .auth-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.form-input:focus, .auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,184,240,.15);
}
.form-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  outline: none;
  cursor: pointer;
}
.form-error { color: var(--red); font-size: 0.875rem; margin-top: 4px; }

/* ── Upload dropzone ───────────────────────────────────────── */
.dropzone {
  border: 1.5px dashed var(--border2);
  border-radius: var(--radius-sm);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
  background: var(--bg);
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--accent); background: #e6f8fe; }
.dropzone-icon  { color: var(--dim); transition: color .15s; }
.dropzone:hover .dropzone-icon { color: var(--accent); }
.dropzone-text  { font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.dropzone-hint  { font-size: 0.75rem; color: var(--dim); }

.upload-status {
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid;
}
.upload-status.loading { background: #e6f8fe; color: var(--accent);  border-color: #7dd9f5; }
.upload-status.success { background: #f0fdf4; color: #059669;         border-color: #bbf7d0; }
.upload-status.error   { background: #fef2f2; color: var(--red);      border-color: #fecaca; }

/* ── NOC cards ─────────────────────────────────────────────── */
.noc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.noc-card {
  background: var(--bg2);
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.noc-card.urgent { background: #fef2f2; border-color: #f87171; }
.noc-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.noc-insured { font-size: 1rem; font-weight: 600; color: var(--text); }
.noc-policy  { color: var(--dim); font-size: 0.75rem; margin-top: 2px; font-family: monospace; }
.noc-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: var(--muted); padding: 4px 0; border-bottom: 1px solid var(--bg3); }
.noc-row:last-child { border-bottom: none; }
.noc-row strong { color: var(--text); font-weight: 600; }

/* ── Timeline ──────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 6px; }
.timeline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.timeline-dot     { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.timeline-content { flex: 1; min-width: 0; }
.timeline-action  { font-size: 0.875rem; color: var(--text); }
.timeline-meta    { font-size: 0.875rem; color: var(--dim); margin-top: 2px; }

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3rem 1rem; gap: 12px;
  color: var(--dim); text-align: center;
}
.empty-state p { font-size: 1rem; color: var(--muted); max-width: 300px; }

/* ── Spinner ───────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,184,240,.25);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

/* ── Permissions ───────────────────────────────────────────── */
.perm-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.perm-table th {
  padding: 9px 14px; text-align: left; background: var(--bg3);
  border-bottom: 1px solid var(--border); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-weight: 600;
}
.perm-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.perm-table tr:last-child td { border-bottom: none; }
.perm-toggle {
  width: 38px; height: 20px; border-radius: 999px;
  background: var(--border2); border: none; cursor: pointer;
  position: relative; transition: background .2s; display: inline-block;
}
.perm-toggle.on { background: var(--accent); }
.perm-toggle:disabled { opacity: .6; cursor: not-allowed; }
.perm-toggle::after {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%; background: white;
  top: 3px; left: 3px; transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.perm-toggle.on::after { transform: translateX(18px); }

/* ── Login page ────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}
.login-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(13,27,62,.12);
}
.login-brand { margin-bottom: 28px; text-align: center; }
.login-brand-mark { display: none; }
.login-brand img {
  height: 38px; width: auto; object-fit: contain;
  display: block; margin: 0 auto 14px;
}
.login-brand h1 { font-size: 1.5rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.login-brand p  { color: var(--muted); font-size: 0.875rem; }
.login-visual   { display: none; }

/* ── Auth button ───────────────────────────────────────────── */
.auth-btn {
  width: 100%;
  background: var(--accent2);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity .12s;
  font-family: inherit;
}
.auth-btn:hover { opacity: .88; }


/* ── Layout fix — prevent main from wrapping under sidebar ── */
.shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.shell > aside,
.shell > .main {
  min-width: 0;
  min-height: 0;
}

.main {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}


/* ── Sidebar logo click + sizing ──────────────────────────────── */
.sidebar-logo {
  margin-top: 16px !important;
  padding: 0 20px !important;
  height: auto !important;
  min-height: 0 !important;
  border-bottom: none !important;
  cursor: pointer;
}

.sidebar-logo img {
  height: 42px !important;
}

/* ── Sidebar nav font size ────────────────────────────────────── */
.sidebar-nav .nav-item {
  font-size: 1rem !important;
}


/* ── Consistent base font size = 1rem throughout ─────────────── */

/* Table cells */
.table-wrap tbody td,
.tbl-wrap td {
  font-size: 1rem;
}

/* Table headers stay smaller (labels) */
.table-wrap thead th,
.tbl-wrap th {
  font-size: 0.75rem;
}

/* Filter inputs and selects */
.filter-input,
.filter-select {
  font-size: 1rem;
}

/* Form inputs */
.form-input,
.form-select,
.auth-input {
  font-size: 1rem;
}

/* Buttons */
.btn {
  font-size: 1rem;
}
.btn-sm {
  font-size: 0.875rem;
}

/* Card body text */
.card,
.metric-sub,
.timeline-action,
.timeline-meta,
.noc-row,
.empty-state p {
  font-size: 1rem;
}

/* Upload panel */
.drop-zone-label,
.dropzone-text {
  font-size: 1rem;
}


/* ── Logo fixed width ─────────────────────────────────────────── */
.sidebar-logo img {
  width: 175px !important;
  height: auto !important;
}

/* ── NOCs table — scope row-highlight strictly to tbody rows ──── */
.table-wrap thead th,
.tbl-wrap thead th {
  position: relative;
  z-index: 1;
  border-left: none !important;
}

/* Ensure highlight amber border-left only applies inside tbody */
.table-wrap tbody tr.row-highlight td:first-child,
.tbl-wrap tbody tr.row-highlight td:first-child,
tbody tr.highlight-amber td:first-child {
  border-left: 3px solid var(--amber);
  padding-left: 11px;
}

/* thead th must never get the amber left border */
thead th:first-child {
  border-left: none !important;
  padding-left: 14px !important;
}


/* ── Sidebar logo margin-top ──────────────────────────────────── */
.sidebar-logo {
  margin-top: 16px !important;
}


/* ── FINAL sidebar logo override — consolidates all prior rules ── */
.sidebar-logo {
  margin-top: 16px !important;
  padding: 0 20px !important;
  height: auto !important;
  min-height: 0 !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
}

.sidebar-logo img {
  width: 175px !important;
  height: auto !important;
  object-fit: contain;
}


/* ── NOC cards — more prominent ───────────────────────────────── */
.noc-card {
  background: var(--bg2);
  border: 1.5px solid #fca5a5;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(239,68,68,0.10);
  transition: box-shadow 0.15s, transform 0.15s;
}

.noc-card:hover {
  box-shadow: 0 4px 16px rgba(239,68,68,0.18);
  transform: translateY(-1px);
}

.noc-card.urgent {
  background: #fff1f2;
  border-color: #f87171;
  box-shadow: 0 2px 10px rgba(239,68,68,0.18);
}

.noc-card.urgent:hover {
  box-shadow: 0 4px 20px rgba(239,68,68,0.28);
}

.noc-insured {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.noc-policy {
  color: var(--dim);
  font-size: 0.8rem;
  margin-top: 3px;
}

/* ── Nav badges — larger and easier to read ───────────────────── */
.nav-badge {
  margin-left: auto;
  background: rgba(0,184,240,0.25);
  color: #7dd9f5;
  font-size: 0.8rem !important;
  font-weight: 700;
  padding: 2px 8px !important;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
  line-height: 18px;
}

.sidebar-nav .nav-item.active .nav-badge {
  background: rgba(0,184,240,0.35);
  color: white;
}


/* ── Metric card numbers — larger and bolder ──────────────────── */
.metric-value {
  font-size: 3rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

.metric-card {
  padding: 20px !important;
}

.metric-label {
  font-size: 0.8rem !important;
  margin-bottom: 10px !important;
}


/* ============================================================
   MOBILE RESPONSIVE DESIGN — single authoritative block
   Breakpoint: 1080px
============================================================ */



/* Overlay — hidden by default */
.sidebar-overlay {
  display: none;
}

/* NOC cards grid */
.noc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

/* ── MOBILE: 1080px and below ──────────────────────────────── */
@media (max-width: 1080px) {

  /* Shell: single column, full height scrollable */
  .shell {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Sidebar: off-screen drawer */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    z-index: 200 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }

  /* Sidebar open state */
  .shell.sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
  }

  /* Overlay visible when sidebar open */
  .shell.sidebar-open .sidebar-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 199 !important;
  }

  /* Main content takes full width */
  .main {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    min-width: 0 !important;
  }

  .content {
    padding: 16px !important;
    overflow-y: visible !important;
    height: auto !important;
    flex: 1 !important;
  }

  /* Bento: single column */
  .bento {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .bento-2, .bento-3 { grid-column: span 1 !important; }

  /* Metrics: 2 columns */
  .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* NOC cards: single column */
  .noc-cards-grid { grid-template-columns: 1fr !important; }

  /* Tables: horizontal scroll */
  .table-wrap, .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table, .tbl-wrap table { min-width: 600px; }

  /* Filters: stack */
  .filters { flex-direction: column !important; align-items: stretch !important; }
  .filter-input, .filter-select { width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 480px) {
  .metric-value { font-size: 2rem !important; }
  .content { padding: 12px !important; }
}


/* ============================================================
   ADAPT DASHBOARD — v9 ADDITIONS
   Recent Activity grid, nav sizing, audit log chevron
============================================================ */

/* ── Nav item font size increase ───────────────────────────── */
.sidebar-nav .nav-item {
  font-size: 0.9375rem !important; /* 15px — up from 0.875rem */
  padding: 8px 10px !important;
}

.sidebar-nav .nav-item svg {
  width: 17px !important;
  height: 17px !important;
}

.sidebar-nav .nav-section,
.sidebar-nav .nav-section-label {
  font-size: 0.65rem !important;
  padding: 16px 10px 5px !important;
}

/* ── Global font size bump ─────────────────────────────────── */
/* Table cells, filters, body text */
.table-wrap table td,
.tbl-wrap table td {
  font-size: 0.9375rem;
}

.filter-input,
.filter-select {
  font-size: 0.9375rem !important;
}

.card-title {
  font-size: 0.7rem !important;
}

/* ── Recent Activity grid ──────────────────────────────────── */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 1080px) {
  .activity-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 720px) {
  .activity-grid { grid-template-columns: 1fr !important; }
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.activity-type-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.activity-type-billing {
  background: #eff6ff;
  color: #1d4ed8;
}

.activity-type-policy {
  background: #f0fdf4;
  color: #166534;
}

.activity-type-claim {
  background: #fffbeb;
  color: #92400e;
}

/* ── Audit log chevron animation ───────────────────────────── */
.audit-day-chevron {
  transition: transform 0.15s ease;
}


/* ============================================================
   ADAPT DASHBOARD — v10 ADDITIONS
   Collapsible sidebar, profile page, activity-list, audit enhancements
============================================================ */

/* ── Collapsible sidebar ───────────────────────────────────── */
.shell {
  grid-template-columns: 220px 1fr;
  transition: grid-template-columns 0.22s cubic-bezier(0.4,0,0.2,1);
}

.shell.sidebar-collapsed {
  grid-template-columns: 60px 1fr;
}

/* Collapsed sidebar width */
.sidebar-collapsed .sidebar {
  width: 60px;
  overflow: visible;
}

/* Logo area in collapsed state */
.sidebar-collapsed .sidebar-logo {
  padding: 0 8px;
  justify-content: center;
  gap: 0;
  flex-direction: column;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Nav sections — hide label text when collapsed */
.sidebar-collapsed .sidebar-nav .nav-section {
  display: none;
}

/* Thin divider line replaces section headings when collapsed */
.nav-section-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 8px 10px;
}

/* Collapsed nav items — icon only, centered */
.nav-item-collapsed {
  justify-content: center !important;
  padding: 8px !important;
  margin: 0 6px !important;
  position: relative;
}

.nav-item-collapsed svg {
  width: 18px !important;
  height: 18px !important;
}

/* Badge dot for collapsed mode */
.nav-badge-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  min-width: unset !important;
  padding: 0 !important;
  text-indent: -9999px;
}

/* Collapsed bottom area */
.sidebar-collapsed .sidebar-bottom {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-collapsed .user-avatar {
  cursor: pointer;
}

/* Sidebar logo collapse toggle button hover */
.sidebar-logo button:hover {
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* ── Recent Activity list (inside bento card) ──────────────── */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.activity-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.activity-list-last {
  border-bottom: none;
}

/* ── Profile page ──────────────────────────────────────────── */
.profile-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Sidebar user row — clickable for profile (not logout) ─── */
.sidebar-user {
  cursor: pointer;
}

/* Sign out button in expanded sidebar bottom */
.sidebar-bottom button:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.7) !important;
}

/* ── Audit log date range inputs ───────────────────────────── */
input[type="date"].filter-input {
  cursor: pointer;
  color-scheme: light;
}



/* ============================================================
   ADAPT DASHBOARD — v11 ADDITIONS
   Row-highlight border-left removal, sidebar padding fix,
   logo drop, noc-card light red tiles
============================================================ */

/* ── Remove left orange border from row-highlight everywhere ─ */
tr.row-highlight td:first-child,
.table-wrap tbody tr.row-highlight td:first-child,
.tbl-wrap tbody tr.row-highlight td:first-child,
tbody tr.highlight-amber td:first-child,
.tl2-item.row-highlight {
  border-left: none !important;
  padding-left: 14px !important;
}

/* ── Collapsed sidebar — equal horizontal padding/margin ───── */
.sidebar-collapsed .sidebar-logo {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;
}

/* Collapsed nav items — equal left/right margin */
.sidebar-collapsed .sidebar-nav .nav-item,
.sidebar-collapsed .sidebar-nav .nav-item-collapsed {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

/* Collapsed sidebar-bottom — centered */
.sidebar-collapsed .sidebar-bottom {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Logo vertical positioning ─────────────────────────────── */
/* Override stacked rules — align logo to center of logo bar */
.sidebar-logo {
  align-items: center !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Collapsed logo icon centering */
.sidebar-collapsed .sidebar-logo img {
  width: 34px !important;
  height: 34px !important;
  margin: 0 auto !important;
}



/* ============================================================
   ADAPT DASHBOARD — v12
   Sidebar header row (logo + "Adapt Report" + toggle),
   vertical alignment with page content, NOC tile parity
============================================================ */

/* ── Kill all prior sidebar-logo rules that conflict ───────── */
/* The logo is no longer its own element — it lives inside     */
/* .sidebar-header-row which is the first child of .sidebar-nav */
.sidebar-logo {
  display: none !important;
}

/* ── Sidebar nav top padding — match content padding exactly ── */
/* .content has padding: 24px. We want the first nav item's     */
/* text baseline to align with the h1 on the right side.        */
/* h1 is at ~24px from top in .content. We set padding-top      */
/* on the nav to the same 24px so logo row top = content top.   */
.sidebar-nav {
  padding-top: 24px !important;
}

/* ── Sidebar header row ─────────────────────────────────────── */
.sidebar-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  margin-bottom: 10px;
  min-height: 28px;        /* approx height of h1 at 1.5rem × 1.2 line-height */
}

/* "Adapt Report" label */
.sidebar-app-label {
  flex: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

/* Collapse toggle button inside header row */
.sidebar-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  color: rgba(255,255,255,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
  line-height: 0;
}

.sidebar-collapse-btn:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
}

/* Collapsed state: header row centers the icon */
.sidebar-collapsed .sidebar-header-row {
  justify-content: center;
  padding: 0 6px;
  gap: 0;
}

/* In collapsed mode show the toggle to the right of the icon */
.sidebar-collapsed .sidebar-collapse-btn {
  position: absolute;
  right: 4px;
}

/* Make sidebar-nav position:relative so absolute child works  */
.sidebar-collapsed .sidebar-nav {
  position: relative;
}



/* ============================================================
   ADAPT DASHBOARD — v13
   Sidebar: logo row + Adapt Report row separate,
   logo full size restored, collapsed toggle on top,
   profile page timezone removed, btn sizing consistent
============================================================ */

/* ── Sidebar logo row (expanded only) ──────────────────────── */
.sidebar-logo-row {
  padding: 20px 12px 0;
  display: flex;
  align-items: center;
}

/* ── Sidebar header row (Adapt Report label + toggle) ───────── */
/* Override the v12 rule so it works for both states */
.sidebar-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px;
  margin-bottom: 4px;
  min-height: 32px;
  position: static; /* undo any absolute positioning from v12 */
}

/* Collapsed header row: icon left, toggle right */
.sidebar-collapsed .sidebar-header-row {
  justify-content: space-between;
  padding: 10px 8px 8px;
}

/* Remove absolute positioning we added in v12 for collapsed toggle */
.sidebar-collapsed .sidebar-collapse-btn {
  position: static !important;
  right: auto !important;
}

/* Collapsed: no logo row at all (it's already hidden via !collapsed) */
.sidebar-collapsed .sidebar-logo-row {
  display: none;
}

/* ── Sidebar nav top padding ────────────────────────────────── */
/* v12 set 24px to align with content; keep that for expanded.  */
/* Collapsed has no logo row so nav top padding can be smaller. */
.sidebar-nav {
  padding-top: 0 !important; /* logo-row and header-row handle top spacing */
}

/* ── Ensure sidebar-nav position:static in expanded state ───── */
.sidebar-nav {
  position: static !important;
}

/* Collapsed: still needs relative for any positioned children  */
.sidebar-collapsed .sidebar-nav {
  position: relative !important;
}

/* ── Profile page — no extra overrides needed;                  */
/* .btn already has padding:8px 14px which matches other pages  */



/* ============================================================
   ADAPT DASHBOARD — v14
   Logo top padding = content top padding (24px) for alignment;
   logo width 175px.
============================================================ */

.sidebar-logo-row {
  padding: 24px 12px 0 !important;
}

.sidebar-logo-row img {
  width: 175px !important;
  height: auto !important;
}



/* ============================================================
   ADAPT DASHBOARD — v15
   Collapsed sidebar: center all nav icons symmetrically
============================================================ */

/* Target every nav button in collapsed state */
.sidebar-collapsed .sidebar-nav .nav-item {
  justify-content: center !important;
  padding: 8px 0 !important;
  margin: 0 4px !important;
  width: calc(100% - 8px) !important;
  text-align: center !important;
}

/* Also cover the explicit collapsed class */
.sidebar-collapsed .sidebar-nav .nav-item-collapsed {
  justify-content: center !important;
  padding: 8px 0 !important;
  margin: 0 4px !important;
}

/* Section dividers — full width in collapsed mode */
.sidebar-collapsed .nav-section-divider {
  margin: 8px 4px !important;
}



/* ============================================================
   ADAPT DASHBOARD — v16  MOBILE RESPONSIVE LAYER
   Additive only — no existing rules modified.
   Strategy:
     • ≤ 1080px  tablet/mobile — sidebar becomes drawer (already handled)
     • ≤ 768px   phone landscape / small tablet
     • ≤ 480px   phone portrait
   All rules use classes that already exist in the markup.
============================================================ */

/* ── Mobile topbar (hamburger) — shown only on mobile ───────── */
/* The hamburger opens the sidebar drawer.                       */
/* We inject it via CSS pseudo-content on .main::before.        */
/* Better: add a real topbar element in the shell.              */
/* Since we can't modify HTML here, we use the .content         */
/* ::before trick — but cleanest is to target .main.            */

/* Mobile topbar strip across the top of .main */
@media (max-width: 1080px) {

  /* Topbar sits above .content */
  .main::before {
    content: '';
    display: block;
    height: 52px;          /* reserves space for the topbar */
    flex-shrink: 0;
  }

  /* Fixed topbar bar */
  .mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: var(--accent2);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 150;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  }

  .mobile-topbar-logo {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .mobile-topbar-logo img {
    height: 22px;
    width: auto;
    object-fit: contain;
  }

  .mobile-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
    flex-shrink: 0;
  }

  .mobile-hamburger:hover {
    background: rgba(255,255,255,0.12);
    color: white;
  }

  /* Offset content so it doesn't hide under topbar */
  .content {
    padding-top: 16px !important;
  }
}

/* ── Tablet (≤ 1080px) wrap fixes ───────────────────────────── */
@media (max-width: 1080px) {

  /* Page header: title + calendar picker wrap to two lines */
  .page-header-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Table control rows: allow wrapping */
  .tbl-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .tbl-controls {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Filter bars */
  .filters,
  div[style*="display:'flex'"][style*="gap:8"] {
    flex-wrap: wrap !important;
  }

  /* Toprow (overview header) */
  .toprow {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Backup bar */
  .backup-bar {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .backup-btns {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Metric grid: 2 per row on tablet */
  .metric-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Bento: always single column at this width */
  .bento-2 { grid-column: span 1 !important; }

  /* Activity list inside bento card stays legible */
  .activity-list-item {
    flex-wrap: wrap !important;
  }

  /* Audit log filter row */
  .audit-filter-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Date range picker */
  .audit-date-range {
    flex-wrap: wrap !important;
  }

  /* Auth modal: fit inside screen */
  .auth-modal {
    margin: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* NOC cards grid: 1 col on mobile */
  .noc-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inline flex rows in cards that shouldn't overflow */
  .card {
    overflow: hidden;
    min-width: 0;
  }
}

/* ── Phone portrait (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {

  /* Single metric per row */
  .metric-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tighter content padding */
  .content {
    padding: 10px !important;
    padding-top: 16px !important;
  }

  /* Page titles */
  .page-title {
    font-size: 1.25rem !important;
  }

  /* Cards: reduce padding */
  .card {
    padding: 14px !important;
  }

  /* Table action buttons: stack */
  .tbl-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .tbl-controls .btn,
  .tbl-controls button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Filter inputs: full width */
  .filter-input,
  .filter-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Bento cards: tighter */
  .bento {
    gap: 8px !important;
  }

  /* Cancellation tiles: allow name to wrap */
  .noc-cards-grid > div {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Audit log: make table scroll horizontally */
  .audit-day-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Date range inputs: full width */
  input[type="date"].filter-input {
    width: 100% !important;
  }

  /* Profile page form: stack */
  .profile-form-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Auth modal: tighter padding */
  .auth-modal {
    padding: 24px 18px !important;
  }

  /* Nav badges: ensure visible */
  .nav-badge {
    font-size: 0.65rem !important;
    padding: 1px 5px !important;
    min-width: 18px !important;
  }

  /* Sidebar bottom user row */
  .sidebar-user {
    padding: 8px 10px !important;
  }
}

/* ── Touch target minimum sizes ──────────────────────────────── */
@media (max-width: 1080px) {
  .btn,
  .nav-item,
  .filter-input,
  .filter-select {
    min-height: 40px;
  }

  /* Chip/badge tap targets */
  .chip {
    padding: 3px 10px !important;
  }
}

/* ── Prevent horizontal scroll on body ───────────────────────── */
@media (max-width: 1080px) {
  body {
    overflow-x: hidden;
  }

  .shell {
    overflow-x: hidden;
  }
}



/* ── Remove the ::before spacer — real topbar element used ──── */
@media (max-width: 1080px) {
  .main::before {
    display: none !important;
  }

  /* Desktop: hide mobile topbar */
  .mobile-topbar {
    display: none;
  }
}

/* Desktop always hides mobile topbar */
@media (min-width: 1081px) {
  .mobile-topbar {
    display: none !important;
  }
}

/* On mobile the topbar is the full-width fixed strip */
@media (max-width: 1080px) {
  .mobile-topbar {
    display: flex !important;
  }

  /* Push content down by topbar height */
  .content {
    margin-top: 52px;
    padding-top: 16px !important;
  }
}



/* ============================================================
   ADAPT DASHBOARD — v17
   Calendar picker: always right-aligned, same line as title
============================================================ */

/* Page header: never wrap — title shrinks, calendar holds right */
.page-header-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;   /* override v16 tablet wrap */
  gap: 12px !important;
  margin-bottom: 20px;
}

/* Title text truncates gracefully if space is tight */
.page-header-row > div:first-child {
  min-width: 0;
  flex: 1;
}

/* Calendar trigger button: don't stretch, stay right */
.page-header-row > div:last-child {
  flex-shrink: 0;
}

/* Calendar dropdown: never overflow viewport on right side */
/* The inline right:0 handles RTL alignment from the button; */
/* on very narrow screens the fixed width (288px) with       */
/* max-width: calc(100vw - 24px) keeps it inside the screen. */
@media (max-width: 480px) {
  /* On the narrowest phones, allow the trigger label to shrink */
  .page-header-row button {
    font-size: 0.875rem !important;
    padding: 5px 10px !important;
  }
}