/* ============================================================
   AVEUM Design System — InsuranceCard UI
   Monochrome ink identity + purple portal accent.
   Source of truth: InsurCard UIUX.dc.html
   ============================================================ */
:root {
  /* Core ink scale */
  --ink: #0f0f14;
  --ink-2: #101015;
  --graphite: #3f3f46;
  --muted: #5b5b63;
  --muted-2: #6b6b75;
  --muted-3: #8a8a93;
  --muted-4: #9a9aa3;

  /* Surfaces */
  --bg: #eef0f3;
  --bg-portal: #faf9fd;
  --surface: #ffffff;
  --surface-2: #f7f7f9;
  --surface-3: #f1f1f3;

  /* Borders */
  --line: #e6e6ea;
  --line-2: #ececef;
  --line-3: #e2e2e8;
  --line-portal: #ece9f5;

  /* Brand / accents */
  --primary: #5b3df5;            /* portal accent (purple) */
  --primary-soft: #efecfe;
  --primary-ink: #161035;        /* navy sidebar */
  --card-gradient: linear-gradient(125deg,#e0218a 0%,#9b1fb0 36%,#3b2fd6 72%,#2f6bff 100%);
  --focus: #2f6bff;

  /* Status */
  --success: #0d8f63;
  --success-soft: #e7f5ee;
  --takaful: #2bb07e;
  --warning: #b87410;
  --warning-soft: #fdf3e2;
  --error: #e5484d;
  --error-2: #e0455e;
  --error-soft: #fde9ec;

  /* Type */
  --font-sans: 'Archivo','Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(15,15,20,.04);
  --sh-card: 0 1px 2px rgba(15,15,20,.04),0 10px 30px rgba(15,15,20,.04);
  --sh-pop: 0 1px 2px rgba(15,15,20,.04),0 18px 44px rgba(15,15,20,.06);
  --sh-portal: 0 1px 2px rgba(20,16,58,.05),0 18px 44px rgba(20,16,58,.09);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { letter-spacing: -.02em; margin: 0; }
.mono { font-family: var(--font-mono); }

@keyframes icpulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
@keyframes ic-spin { to { transform: rotate(360deg); } }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:600; cursor:pointer; border:none;
  border-radius:var(--r-md); padding:13px 18px; font-size:14px; transition:.15s; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-ink { background:var(--ink); color:#fff; }
.btn-ink:hover { background:#000; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(91,61,245,.28); }
.btn-primary:hover { filter:brightness(1.05); }
.btn-success { background:var(--success); color:#fff; box-shadow:0 6px 16px rgba(13,143,99,.26); }
.btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--line-3); }
.btn-warn { background:#fff; color:var(--warning); border:1px solid #f0d9a8; }
.btn-danger { background:#fff; color:var(--error-2); border:1px solid #f3c4cd; }
.btn-block { width:100%; }
.btn-sm { padding:7px 13px; font-size:12px; }

/* ---------- Cards / panels ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-card); }
.card-pop { box-shadow:var(--sh-pop); }
.panel-dark { background:linear-gradient(165deg,#1c1547 0%,#140d30 60%,#100a26 100%); color:#fff;
  border-radius:var(--r-xl); box-shadow:var(--sh-portal); }

/* ---------- Inputs ---------- */
.field-label { font-size:12px; color:var(--muted-2); margin-bottom:8px; display:block; }
.input { width:100%; background:#fff; border:1px solid var(--line-3); border-radius:var(--r-md);
  padding:14px 15px; font-family:inherit; font-size:14px; color:var(--ink); outline:none; }
.input:focus { border-color:var(--focus); box-shadow:0 0 0 3px rgba(47,107,255,.12); }
.input.readonly { background:var(--surface-2); border-color:#e8e8ee; color:#4a4a52; }
.input.error { background:var(--error-soft); border:1.5px solid var(--error); }
.input-mono { font-family:var(--font-mono); letter-spacing:.04em; }
.field-error { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; color:#c4374b; font-weight:500; }

/* ---------- Badges / pills ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-pill);
  padding:4px 10px; font-size:11px; font-weight:700; }
.badge-success { background:var(--success-soft); color:var(--success); }
.badge-warn { background:var(--warning-soft); color:var(--warning); }
.badge-danger { background:var(--error-soft); color:var(--error-2); }
.badge-primary { background:var(--primary-soft); color:var(--primary); }
.badge-neutral { background:var(--surface-3); color:var(--muted-2); }
.dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.live { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--success); }
.live .dot { width:6px; height:6px; animation:icpulse 1.4s infinite; }

/* ---------- Search box (table filters) ---------- */
.search-box { position:relative; display:flex; align-items:center; min-width:240px; }
.search-box > svg { position:absolute; left:13px; color:var(--muted-4); pointer-events:none; }
.search-input { width:100%; background:#fff; border:1px solid var(--line-3); border-radius:var(--r-md);
  padding:10px 34px 10px 36px; font-family:inherit; font-size:13px; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s; }
.search-input:focus { border-color:var(--focus); box-shadow:0 0 0 3px rgba(47,107,255,.10); }
.search-input::placeholder { color:var(--muted-4); }
.search-clear { position:absolute; right:9px; width:20px; height:20px; border:none; cursor:pointer;
  background:var(--surface-3); color:var(--muted-2); border-radius:50%; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.search-clear:hover { background:var(--line-3); color:var(--ink); }
.search-empty { padding:26px 18px; text-align:center; color:var(--muted-3); font-size:13px; }

/* ---------- KPI ---------- */
.kpi { background:#fff; border:1px solid var(--line-portal); border-radius:var(--r-xl); padding:18px 20px;
  box-shadow:var(--sh-1); transition:transform .18s ease, box-shadow .18s ease; }
.kpi:hover { transform:translateY(-3px); box-shadow:var(--sh-card); }
.kpi .k-label { font-size:11px; color:#8b86a6; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.kpi .k-value { font-size:27px; font-weight:800; letter-spacing:-.03em; margin-top:7px; }
/* Clickable KPI used as a status filter (active = selected). */
.kpi-filter { cursor:pointer; user-select:none; }
.kpi-filter.active { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft), var(--sh-card); }
.kpi-filter.active .k-label { color:var(--primary); }

/* ---------- Tables (portal) — modern minimal ----------
   Airy rows, hairline dividers, sticky header, no zebra striping.
   No overflow:hidden on .tbl so the header can pin to the viewport on scroll;
   corners are rounded on the header (top) and last row (bottom) instead. */
.tbl { background:#fff; border:1px solid var(--line-portal); border-radius:var(--r-xl);
  box-shadow:var(--sh-1); }
.tbl-head { background:#fff;
  border-bottom:1px solid var(--line-portal); border-radius:var(--r-xl) var(--r-xl) 0 0;
  font-size:10px; font-weight:700; color:#a09bbb; text-transform:uppercase; letter-spacing:.09em;
  padding:16px 22px; display:grid; gap:12px; }
.tbl-row { display:grid; gap:12px; padding:18px 22px; border-bottom:1px solid #f4f2fb; align-items:center;
  transition:background .14s ease; }
.tbl-row:last-child { border-bottom:none; border-radius:0 0 var(--r-xl) var(--r-xl); }
.tbl-row:hover { background:#faf9ff; }

/* ---------- Stepper ---------- */
.stepper { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.step { display:flex; align-items:center; gap:9px; }
.step .num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; background:#fff; border:1.5px solid #d8d8de; color:#b6b6bf; }
.step.active .num { background:var(--ink); color:#fff; border-color:var(--ink); }
.step.done .num { background:var(--ink); color:#fff; border-color:var(--ink); }
.step .label { font-size:14px; font-weight:500; color:#b6b6bf; }
.step.active .label, .step.done .label { color:var(--ink); font-weight:600; }
.step-sep { width:13px; height:13px; }

/* ---------- Layout: portal shell ---------- */
.shell { display:flex; min-height:100vh; }
/* Light, softly-muted sidebar (matches the public/activate surfaces). */
.sidebar { width:228px; background:#f5f4fa; border-right:1px solid var(--line-portal); padding:20px 14px;
  flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar .brand { display:flex; align-items:center; gap:9px; padding:0 8px 18px; }
.sidebar .brand-name { color:var(--ink); font-weight:800; font-size:15px; letter-spacing:-.02em; }
.org-switch { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:10px;
  padding:10px 11px; margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.org-switch .org-avatar { width:26px; height:26px; border-radius:7px; background:var(--primary);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; }
.org-switch .org-name { color:#fff; font-size:12px; font-weight:600; }
.org-switch .org-role { color:#8a83bd; font-size:10px; }
.nav-group { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; color:#9b95b8;
  text-transform:uppercase; padding:0 8px 8px; margin-top:6px; }
.nav-link { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:#4a4658; font-size:13px; font-weight:500; cursor:pointer; transition:.12s; }
.nav-link:hover { background:var(--primary-soft); color:var(--ink); }
.nav-link .nav-dot { width:6px; height:6px; border-radius:2px; background:#b3adcf; }
.nav-link.active { background:var(--primary); color:#fff; font-weight:700; box-shadow:0 4px 12px rgba(91,61,245,.4); }
.nav-link.active .nav-dot { background:#fff; }
.nav-badge { margin-left:auto; background:var(--error-2); color:#fff; font-size:10px; font-weight:700;
  border-radius:var(--r-pill); padding:1px 7px; }

.content { flex:1; background:var(--bg-portal); display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:20px 32px;
  border-bottom:1px solid #eeebf8; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  position:sticky; top:0; z-index:20; }
.topbar .crumb { font-family:var(--font-mono); font-size:10px; color:var(--muted-4); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; }
.topbar .title { font-size:23px; font-weight:800; letter-spacing:-.025em; margin-top:5px; }
.page-body { padding:28px 32px; max-width:1340px; animation:ic-fadeup .34s cubic-bezier(.2,.7,.3,1) both; }
@keyframes ic-fadeup { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }

/* ---------- Layout: public/centered ---------- */
.public-wrap { min-height:100vh; background:var(--bg); padding:48px 24px 80px; }
.public-inner { max-width:1100px; margin:0 auto; }
.public-card { background:#fff; border:1px solid #e4e4e7; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-pop); }
.public-logobar { display:flex; align-items:center; justify-content:center; padding:21px 20px;
  border-bottom:1px solid var(--line-2); }

/* ---------- Mobile (customer) ---------- */
.phone { width:380px; max-width:100%; background:#fff; border:1px solid #e6e3f0; border-radius:34px;
  padding:10px; box-shadow:0 1px 2px rgba(20,16,58,.05),0 22px 48px rgba(20,16,58,.10); }
.phone-screen { background:var(--bg-portal); border-radius:26px; overflow:hidden; }
.tab { border-radius:var(--r-pill); padding:8px 15px; font-size:13px; font-weight:500; cursor:pointer;
  background:#f3f1fa; color:#7d799a; }
.tab.active { background:var(--primary-ink); color:#fff; font-weight:600; }

/* ---------- Utilities ---------- */
.flex { display:flex; } .col { flex-direction:column; } .items-center { align-items:center; }
.justify-between { justify-content:space-between; } .gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;}
.grid { display:grid; } .mt-2{margin-top:8px;} .mb-2{margin-bottom:8px;} .mb-4{margin-bottom:16px;}
.muted { color:var(--muted-3); } .text-sm{font-size:13px;} .text-xs{font-size:12px;}
.fw-700{font-weight:700;} .fw-800{font-weight:800;}
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:ic-spin .7s linear infinite; }
.divider { height:1px; background:var(--line-2); }
.alert { display:flex; gap:9px; align-items:flex-start; border-radius:var(--r-md); padding:12px 14px; font-size:13px; }
.alert-error { background:var(--error-soft); color:#c4374b; }
.alert-success { background:#e7f7ee; color:#1f7a4d; }
.alert-info { background:#f6f5fb; color:#7d799a; }

/* Modal overlay */
.modal-backdrop { position:fixed; inset:0; background:rgba(20,18,40,.45); display:flex;
  align-items:center; justify-content:center; z-index:60; padding:20px; }
.modal-card { background:#fff; border-radius:16px; padding:26px 28px; width:100%; max-width:440px;
  box-shadow:0 24px 60px rgba(30,20,80,.28); }