/* =========================================================================
   PRATIMA VAHINI  —  Insurance & Investment Advisory CRM Theme
   Design language: "The Ledger" — cool navy/teal, financial-document
   discipline, ruled headers, perforated status stamps, tabular data
   built to be read quickly and trusted.
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Design Tokens ---------- */
:root{
  /* Core palette — cool, financial, trustworthy */
  --navy-950:#0A1B2C;
  --navy-900:#0F2A43;
  --navy-800:#16354F;
  --navy-700:#1E4361;

  --teal-700:#0F5F5B;
  --teal-600:#157A76;
  --teal-500:#1B948F;
  --teal-100:#DFF1EF;

  --slate-600:#3E5C76;
  --slate-400:#7C93A8;
  --slate-200:#C3D0D6;

  --bg-page:#F1F5F6;
  --bg-card:#FFFFFF;
  --bg-sunken:#E9EFF1;

  --border:#DCE4E8;
  --border-strong:#C3D0D6;

  --ink-900:#142433;
  --ink-700:#2B3E4C;
  --ink-600:#4C5F6E;
  --ink-400:#8598A5;
  --ink-on-dark:#E7EEF2;
  --ink-on-dark-dim:#9FB4C2;

  --success:#1F8A5F; --success-bg:#E6F4EC; --success-line:#B9DDC6;
  --warning:#B9791A; --warning-bg:#FBF0DE; --warning-line:#EAD1A0;
  --danger:#B4433A;  --danger-bg:#FAEAE8;  --danger-line:#E9C3BE;
  --info:#2D6FA8;    --info-bg:#E7F0F8;    --info-line:#BFD8ED;

  /* Type */
  --font-display:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.125rem;

  /* Spacing (8px baseline) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  --shadow-sm: 0 1px 2px rgba(15,42,67,0.06);
  --shadow-md: 0 4px 16px rgba(15,42,67,0.08);
  --shadow-lg: 0 12px 32px rgba(15,42,67,0.14);

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --header-h: 68px;

  --transition: 160ms ease;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--ink-900);
  background:var(--bg-page);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; color:var(--navy-900); margin:0 0 var(--sp-2); }
h1{ font-size:var(--text-2xl); letter-spacing:-0.01em; }
h2{ font-size:var(--text-xl); }
h3{ font-size:var(--text-lg); }
h4{ font-size:var(--text-md); }
p{ margin:0 0 var(--sp-3); color:var(--ink-600); }
a{ color:var(--teal-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
small{ font-size:var(--text-sm); color:var(--ink-400); }
code, .mono{ font-family:var(--font-mono); }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ---------- Ledger heading rule (signature motif) ----------
   A double rule under page/section titles, echoing the ruled
   lines of a financial ledger page. Used sparingly at the top
   of primary content. */
.ledger-heading{
  padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-6);
  border-bottom:2px solid var(--navy-900);
  position:relative;
}
.ledger-heading::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-5px;
  height:1px;
  background:var(--border-strong);
}
.ledger-heading .eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal-700);
  margin-bottom:var(--sp-1);
}
.ledger-heading h1, .ledger-heading h2{ margin:0; }
.ledger-heading .desc{ margin-top:var(--sp-1); color:var(--ink-600); font-size:var(--text-sm); }
.ledger-heading .actions{ display:flex; gap:var(--sp-2); align-items:flex-start; }
.ledger-heading-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-4); flex-wrap:wrap; }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app-shell{ min-height:100vh; display:flex; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--navy-950);
  color:var(--ink-on-dark);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:40;
  transition:transform var(--transition), width var(--transition);
}
.sidebar-brand{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5);
  border-bottom:1px solid rgba(231,238,242,0.08);
  min-height:var(--header-h);
}
.sidebar-brand .mark{
  width:36px; height:36px; border-radius:var(--radius-sm);
  background:linear-gradient(155deg, var(--teal-500), var(--teal-700));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  flex-shrink:0;
}
.sidebar-brand .name{ font-family:var(--font-display); font-weight:600; font-size:var(--text-md); color:#fff; line-height:1.2; }
.sidebar-brand .tag{ font-size:11px; color:var(--ink-on-dark-dim); letter-spacing:0.06em; text-transform:uppercase; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:var(--sp-4) var(--sp-3); }
.nav-group{ margin-bottom:var(--sp-5); }
.nav-group-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-on-dark-dim); padding:0 var(--sp-3); margin-bottom:var(--sp-2); display:block;
}
.nav-link{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:10px var(--sp-3);
  border-radius:var(--radius-sm);
  color:var(--ink-on-dark-dim);
  font-size:var(--text-sm); font-weight:500;
  cursor:pointer; border-left:3px solid transparent;
  transition:background var(--transition), color var(--transition);
}
.nav-link .ic{ width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.nav-link:hover{ background:rgba(231,238,242,0.06); color:#fff; text-decoration:none; }
.nav-link.active{
  background:rgba(27,148,143,0.16);
  color:#fff;
  border-left-color:var(--teal-500);
  font-weight:600;
}
.nav-link .badge-count{
  margin-left:auto; background:var(--teal-600); color:#fff; font-size:11px;
  padding:1px 7px; border-radius:var(--radius-pill); font-family:var(--font-mono);
}

.sidebar-foot{
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid rgba(231,238,242,0.08);
  font-size:var(--text-xs); color:var(--ink-on-dark-dim);
}

/* ---------- Main column ---------- */
.main-col{
  margin-left:var(--sidebar-w);
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  transition:margin-left var(--transition);
}

/* ---------- Header ---------- */
.app-header{
  height:var(--header-h);
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:var(--sp-4);
  padding:0 var(--sp-6);
  position:sticky; top:0; z-index:30;
}
.header-menu-btn{
  display:none;
  background:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer; color:var(--navy-900);
}
.header-search{
  flex:1; max-width:420px;
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--bg-sunken); border:1px solid transparent;
  border-radius:var(--radius-md); padding:0 var(--sp-3); height:40px;
}
.header-search input{
  border:0; background:transparent; outline:none; width:100%;
  font-family:var(--font-body); font-size:var(--text-sm); color:var(--ink-900);
}
.header-search:focus-within{ border-color:var(--teal-500); background:#fff; }
.header-search svg{ color:var(--ink-400); flex-shrink:0; }
.header-right{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-4); }
.header-icon-btn{
  position:relative; width:38px; height:38px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-600);
}
.header-icon-btn .dot{
  position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
  background:var(--danger); border:1.5px solid #fff;
}
.header-user{ display:flex; align-items:center; gap:var(--sp-2); cursor:pointer; padding-left:var(--sp-3); border-left:1px solid var(--border); }
.header-user .avatar{
  width:36px; height:36px; border-radius:50%; background:var(--navy-800); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:var(--text-sm);
}
.header-user .who{ line-height:1.25; }
.header-user .who .n{ font-size:var(--text-sm); font-weight:600; color:var(--ink-900); }
.header-user .who .r{ font-size:11px; color:var(--ink-400); }

/* ---------- Content ---------- */
.app-content{ padding:var(--sp-6); flex:1; }
.content-narrow{ max-width:960px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--text-xs); color:var(--ink-400); margin-bottom:var(--sp-3); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.04em; }
.breadcrumb a{ color:var(--ink-400); }
.breadcrumb .sep{ opacity:0.6; }
.breadcrumb .cur{ color:var(--teal-700); font-weight:600; }

/* =========================================================================
   GRID / LAYOUT HELPERS
   ========================================================================= */
.grid{ display:grid; gap:var(--sp-5); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-12{ grid-template-columns:repeat(12,1fr); }
.col-span-8{ grid-column:span 8; }
.col-span-4{ grid-column:span 4; }
.col-span-6{ grid-column:span 6; }
.stack{ display:flex; flex-direction:column; gap:var(--sp-4); }
.row{ display:flex; align-items:center; gap:var(--sp-3); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.flex-wrap{ flex-wrap:wrap; }

@media (max-width: 1180px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .col-span-8, .col-span-4{ grid-column:span 12; }
}
@media (max-width: 720px){
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
}

/* =========================================================================
   CARD
   ========================================================================= */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom:1px solid var(--border);
}
.card-header h3{ margin:0; }
.card-header .sub{ font-size:var(--text-sm); color:var(--ink-400); margin-top:2px; }
.card-body{ padding:var(--sp-5); }
.card-body.pad-0{ padding:0; }
.card-footer{
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:var(--sp-2);
  background:var(--bg-sunken);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------- KPI stat card ---------- */
.stat-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.stat-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal-600);
}
.stat-card .label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-400); }
.stat-card .value{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600; color:var(--navy-900); margin:var(--sp-1) 0; }
.stat-card .delta{ font-size:var(--text-xs); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.stat-card .delta.up{ color:var(--success); }
.stat-card .delta.down{ color:var(--danger); }
.stat-card.accent-navy::before{ background:var(--navy-800); }
.stat-card.accent-warning::before{ background:var(--warning); }
.stat-card.accent-danger::before{ background:var(--danger); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
  padding:0 var(--sp-4); height:40px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn svg{ flex-shrink:0; }
.btn-primary{ background:var(--teal-600); color:#fff; }
.btn-primary:hover{ background:var(--teal-700); text-decoration:none; }
.btn-navy{ background:var(--navy-900); color:#fff; }
.btn-navy:hover{ background:var(--navy-800); text-decoration:none; }
.btn-secondary{ background:#fff; color:var(--navy-900); border-color:var(--border-strong); }
.btn-secondary:hover{ background:var(--bg-sunken); text-decoration:none; }
.btn-ghost{ background:transparent; color:var(--slate-600); }
.btn-ghost:hover{ background:var(--bg-sunken); text-decoration:none; }
.btn-danger{ background:#fff; color:var(--danger); border-color:var(--danger-line); }
.btn-danger:hover{ background:var(--danger-bg); text-decoration:none; }
.btn-sm{ height:32px; padding:0 var(--sp-3); font-size:var(--text-xs); }
.btn-lg{ height:46px; padding:0 var(--sp-6); font-size:var(--text-base); }
.btn-block{ width:100%; }
.btn-icon{ width:36px; height:36px; padding:0; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }

/* =========================================================================
   FORM ELEMENTS
   ========================================================================= */
.field{ margin-bottom:var(--sp-4); }
.field label{
  display:block; font-size:var(--text-sm); font-weight:600; color:var(--ink-700);
  margin-bottom:6px;
}
.field label .req{ color:var(--danger); margin-left:2px; }
.field .hint{ font-size:var(--text-xs); color:var(--ink-400); margin-top:4px; }
.field .error-text{ font-size:var(--text-xs); color:var(--danger); margin-top:4px; font-weight:500; }

.input, .select, .textarea{
  width:100%;
  font-family:var(--font-body); font-size:var(--text-sm); color:var(--ink-900);
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:0 var(--sp-3);
  height:42px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.textarea{ height:auto; padding:var(--sp-3); min-height:96px; resize:vertical; line-height:1.5; }
.input::placeholder, .textarea::placeholder{ color:var(--ink-400); }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--teal-500);
  box-shadow:0 0 0 3px rgba(27,148,143,0.15);
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid{
  border-color:var(--danger);
}
.input.is-invalid:focus{ box-shadow:0 0 0 3px rgba(180,67,58,0.15); }
.input:disabled, .select:disabled, .textarea:disabled{
  background:var(--bg-sunken); color:var(--ink-400); cursor:not-allowed;
}

.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234C5F6E' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--sp-3) center;
  padding-right:var(--sp-8);
  cursor:pointer;
}

.input-icon{ position:relative; }
.input-icon .input{ padding-left:38px; }
.input-icon svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-400); }

.input-addon{ display:flex; }
.input-addon .addon{
  display:flex; align-items:center; padding:0 var(--sp-3); background:var(--bg-sunken);
  border:1px solid var(--border-strong); border-right:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  font-size:var(--text-sm); color:var(--ink-600); font-family:var(--font-mono);
}
.input-addon .input{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

/* Checkbox / Radio */
.check-row, .radio-row{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); cursor:pointer; }
.check-row input, .radio-row input{ width:17px; height:17px; accent-color:var(--teal-600); cursor:pointer; }
.check-row label, .radio-row label{ font-size:var(--text-sm); color:var(--ink-700); font-weight:400; margin:0; cursor:pointer; }

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:42px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; background:var(--slate-200); border-radius:var(--radius-pill);
  transition:background var(--transition); cursor:pointer;
}
.switch .track::before{
  content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff;
  border-radius:50%; transition:transform var(--transition); box-shadow:var(--shadow-sm);
}
.switch input:checked + .track{ background:var(--teal-600); }
.switch input:checked + .track::before{ transform:translateX(18px); }

/* Form layout */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--sp-5); }
.form-grid .field.full{ grid-column:1 / -1; }
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr; } }

.form-section{ margin-bottom:var(--sp-6); }
.form-section-title{
  font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.08em;
  color:var(--teal-700); font-weight:600; margin-bottom:var(--sp-4); padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--border);
}

/* =========================================================================
   TABLE  ("Ledger sheet")
   ========================================================================= */
.table-wrap{ overflow-x:auto; }
.table{
  width:100%; border-collapse:collapse; font-size:var(--text-sm);
}
.table thead th{
  text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--ink-400); font-weight:600;
  padding:var(--sp-3) var(--sp-4); border-bottom:2px solid var(--navy-900);
  background:var(--bg-sunken); white-space:nowrap;
  position:sticky; top:0;
}
.table thead th.sortable{ cursor:pointer; user-select:none; }
.table thead th.sortable:hover{ color:var(--teal-700); }
.table tbody td{
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); color:var(--ink-700);
  vertical-align:middle;
}
.table tbody tr{ transition:background var(--transition); border-left:3px solid transparent; }
.table tbody tr:hover{ background:var(--teal-100); border-left-color:var(--teal-600); }
.table tbody tr.row-selected{ background:var(--teal-100); border-left-color:var(--teal-600); }
.table .cell-primary{ font-weight:600; color:var(--navy-900); }
.table .cell-mono{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-600); }
.table .cell-num{ text-align:right; font-family:var(--font-mono); }
.table .cell-actions{ text-align:right; white-space:nowrap; }
.table tbody tr:last-child td{ border-bottom:0; }

.table-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); flex-wrap:wrap; border-bottom:1px solid var(--border);
}
.table-filters{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.table-filters .select, .table-filters .input{ height:38px; width:auto; min-width:150px; }

.pagination{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); flex-wrap:wrap;
}
.pagination .info{ font-size:var(--text-xs); color:var(--ink-400); }
.pagination .pages{ display:flex; gap:4px; }
.pagination .pages button{
  width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:#fff; color:var(--ink-600); font-size:var(--text-xs); font-family:var(--font-mono); cursor:pointer;
}
.pagination .pages button.active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.pagination .pages button:hover:not(.active){ background:var(--bg-sunken); }

/* Mobile: table -> stacked cards */
@media (max-width: 760px){
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tbody tr{
    border:1px solid var(--border); border-left:3px solid var(--teal-600);
    border-radius:var(--radius-md); margin-bottom:var(--sp-3); padding:var(--sp-2) 0;
  }
  .table tbody td{
    display:flex; justify-content:space-between; gap:var(--sp-3); border-bottom:1px dashed var(--border);
    text-align:right;
  }
  .table tbody td::before{ content:attr(data-label); font-weight:600; color:var(--ink-400); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; text-align:left; }
  .table tbody td:last-child{ border-bottom:0; }
  .table .cell-actions{ justify-content:flex-end; }
}

/* =========================================================================
   STATUS STAMP  (signature element)
   A perforated, ticket-like badge — nods to policy stamps / ledger seals.
   ========================================================================= */
.stamp{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 10px 4px 8px;
  border-radius:var(--radius-pill);
  border:1px dashed currentColor;
  line-height:1.4;
}
.stamp::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.stamp-active{ color:var(--success); background:var(--success-bg); }
.stamp-pending{ color:var(--warning); background:var(--warning-bg); }
.stamp-lapsed{ color:var(--danger); background:var(--danger-bg); }
.stamp-review{ color:var(--info); background:var(--info-bg); }
.stamp-draft{ color:var(--slate-600); background:var(--bg-sunken); }

/* Plain badge (non-stamp, for counts/tags) */
.badge{
  display:inline-flex; align-items:center; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:var(--radius-pill); background:var(--bg-sunken); color:var(--ink-600);
}

/* =========================================================================
   ALERTS
   ========================================================================= */
.alert{
  display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--radius-md);
  border:1px solid; font-size:var(--text-sm);
}
.alert svg{ flex-shrink:0; margin-top:1px; }
.alert .title{ font-weight:700; margin-bottom:2px; }
.alert-info{ background:var(--info-bg); border-color:var(--info-line); color:#1B4A6E; }
.alert-success{ background:var(--success-bg); border-color:var(--success-line); color:#155E42; }
.alert-warning{ background:var(--warning-bg); border-color:var(--warning-line); color:#7C5310; }
.alert-danger{ background:var(--danger-bg); border-color:var(--danger-line); color:#7C2E27; }

/* =========================================================================
   TABS
   ========================================================================= */
.tabs{ display:flex; gap:var(--sp-1); border-bottom:1px solid var(--border); }
.tab{
  padding:var(--sp-3) var(--sp-4); font-size:var(--text-sm); font-weight:600; color:var(--ink-400);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{ color:var(--navy-900); }
.tab.active{ color:var(--teal-700); border-bottom-color:var(--teal-600); }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,27,44,0.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-5); z-index:100;
}
.modal{
  background:#fff; border-radius:var(--radius-lg); width:100%; max-width:480px;
  box-shadow:var(--shadow-lg); max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
}
.modal-header{ padding:var(--sp-5); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.modal-body{ padding:var(--sp-5); overflow-y:auto; }
.modal-footer{ padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:var(--sp-2); background:var(--bg-sunken); }
.modal-close{ background:none; border:0; cursor:pointer; color:var(--ink-400); width:32px; height:32px; }

/* =========================================================================
   LOGIN PAGE
   ========================================================================= */
.auth-shell{
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  background:var(--navy-950);
}
.auth-visual{
  background:
    linear-gradient(180deg, rgba(10,27,44,0.2), rgba(10,27,44,0.85)),
    repeating-linear-gradient(180deg, rgba(231,238,242,0.05) 0px, rgba(231,238,242,0.05) 1px, transparent 1px, transparent 48px);
  background-color:var(--navy-900);
  display:flex; flex-direction:column; justify-content:space-between; padding:var(--sp-12);
  color:var(--ink-on-dark);
}
.auth-visual .brand{ display:flex; align-items:center; gap:var(--sp-3); }
.auth-visual .mark{
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:linear-gradient(155deg, var(--teal-500), var(--teal-700));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:20px;
}
.auth-visual h1{ color:#fff; font-size:2.5rem; max-width:460px; line-height:1.2; }
.auth-visual .lede{ color:var(--ink-on-dark-dim); max-width:420px; font-size:var(--text-md); }
.auth-visual .foot{ font-family:var(--font-mono); font-size:11px; color:var(--ink-on-dark-dim); letter-spacing:0.04em; }
.auth-form-col{ background:var(--bg-page); display:flex; align-items:center; justify-content:center; padding:var(--sp-6); }
.auth-card{ width:100%; max-width:380px; }
.auth-card h2{ margin-bottom:4px; }
.auth-card .sub{ color:var(--ink-400); font-size:var(--text-sm); margin-bottom:var(--sp-6); }
.auth-links{ display:flex; justify-content:space-between; font-size:var(--text-sm); margin-top:var(--sp-2); }

@media (max-width: 900px){
  .auth-shell{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
}

/* =========================================================================
   RESPONSIVE SHELL BEHAVIOR
   ========================================================================= */
@media (max-width: 1024px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .main-col{ margin-left:0; }
  .header-menu-btn{ display:flex; }
  .header-search{ display:none; }
}
@media (max-width: 640px){
  .app-content{ padding:var(--sp-4); }
  .app-header{ padding:0 var(--sp-4); }
  .header-user .who{ display:none; }
}

.sidebar-scrim{
  display:none; position:fixed; inset:0; background:rgba(10,27,44,0.5); z-index:35;
}
.sidebar-scrim.show{ display:block; }

/* Utility */
.text-muted{ color:var(--ink-400); }
.text-right{ text-align:right; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.w-full{ width:100%; }