/* =========================================================
   INDUSASSURE DASHBOARD — DESIGN TOKENS
========================================================= */
:root{
  --primary: rgb(152,39,42);
  --primary-rgb: 152,39,42;
  --primary-dark: rgb(104,24,27);
  --primary-darker: rgb(66,15,17);
  --primary-light: rgb(196,101,103);
  --primary-tint-4: rgba(152,39,42,0.04);
  --primary-tint-8: rgba(152,39,42,0.08);
  --primary-tint-12: rgba(152,39,42,0.12);
  --primary-tint-20: rgba(152,39,42,0.2);

  --white: #FFFFFF;
  --ink: #1B1315;
  --ink-soft: #5B4F50;
  --ink-faint: #8B8081;
  --line: rgba(27,19,21,0.08);
  --surface: #FFFFFF;
  --surface-tint: #FBF6F6;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px;

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(27,19,21,0.06);
  --shadow-md: 0 8px 24px rgba(27,19,21,0.08);
  --shadow-lg: 0 20px 48px rgba(27,19,21,0.12);
  --shadow-primary: 0 12px 24px rgba(152,39,42,0.24);

  --ease: cubic-bezier(0.16,1,0.3,1);
  --transition: 0.3s var(--ease);

  --sidebar-w: 248px;
  --topbar-h: 72px;
  --bottomnav-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface-tint);
  line-height:1.55;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul,ol{ list-style:none; }
input{ font:inherit; }
table{ border-collapse:collapse; width:100%; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.2; color:var(--ink); letter-spacing:-0.01em; }

:focus-visible{ outline:2.5px solid var(--primary); outline-offset:2px; border-radius:4px; }

.skip-link{ position:absolute; left:-999px; top:0; z-index:999; background:var(--primary); color:#fff; padding:12px 20px; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.muted{ color: var(--ink-soft); font-size:0.88rem; }
.center-text{ text-align:center; }

/* =========================================================
   REVEAL ANIMATION
========================================================= */
.reveal-up{ opacity:0; transform:translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--delay,0ms); }
.reveal-up.in-view{ opacity:1; transform:translateY(0); }

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

.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background:#fff;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  padding: var(--sp-4) var(--sp-3);
  position:sticky; top:0; height:100vh;
  z-index:60;
  transition: transform var(--transition);
}
.side-logo{ display:flex; align-items:center; gap:10px; padding:var(--sp-2) var(--sp-2) var(--sp-5); }
.side-logo-text{ font-family:var(--font-display); font-size:1.1rem; font-weight:500; color:var(--ink); }
.side-logo-text strong{ font-weight:700; color:var(--primary); }

.side-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.side-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-weight:500; font-size:0.92rem;
  transition: background var(--transition), color var(--transition);
}
.side-link svg{ flex-shrink:0; opacity:0.85; }
.side-link:hover{ background: var(--primary-tint-4); color:var(--ink); }
.side-link.is-active{ background: var(--primary-tint-8); color: var(--primary); font-weight:600; }
.side-link.is-active svg path, .side-link.is-active svg circle{ opacity:1; }

.side-support{ padding-top: var(--sp-3); }
.support-card{
  width:100%; display:flex; align-items:center; gap:10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; padding:14px; border-radius: var(--radius-md);
  font-weight:600; font-size:0.85rem; box-shadow: var(--shadow-primary);
  transition: transform var(--transition);
}
.support-card:hover{ transform:translateY(-2px); }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* =========================================================
   TOPBAR
========================================================= */
.topbar{
  height: var(--topbar-h);
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap: var(--sp-3);
  padding-inline: var(--sp-4);
}
.icon-btn{
  width:40px; height:40px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); transition: background var(--transition), color var(--transition);
  position:relative; flex-shrink:0;
}
.icon-btn:hover{ background: var(--primary-tint-8); color: var(--primary); }
.sidebar-toggle{ display:none; }

.topbar-search{
  flex:1; max-width:420px;
  display:flex; align-items:center; gap:8px;
  background: var(--surface-tint); border:1px solid var(--line);
  border-radius: var(--radius-pill); padding:10px 16px;
  color: var(--ink-faint); transition: border-color var(--transition);
}
.topbar-search:focus-within{ border-color: var(--primary); }
.topbar-search input{ border:none; background:none; outline:none; width:100%; color:var(--ink); font-size:0.9rem; }

.topbar-actions{ display:flex; align-items:center; gap: var(--sp-2); margin-left:auto; }
.topbar-item{ position:relative; }
.notif-dot{
  position:absolute; top:6px; right:6px; min-width:16px; height:16px; padding:0 3px;
  background: var(--primary); color:#fff; font-size:0.6rem; font-weight:700;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

.notif-wrap{ position:relative; }
.notif-panel{
  position:absolute; top:calc(100% + 10px); right:0; width:320px;
  background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  border:1px solid var(--line); padding: var(--sp-2) 0;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index:80;
}
.notif-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }
.notif-panel-head{ display:flex; justify-content:space-between; align-items:center; padding: var(--sp-2) var(--sp-3) var(--sp-2); font-weight:600; font-size:0.85rem; }
.notif-item{ display:flex; gap:10px; padding: 10px var(--sp-3); transition: background var(--transition); }
.notif-item:hover{ background: var(--surface-tint); }
.notif-item p{ font-size:0.82rem; line-height:1.4; }
.notif-item time{ font-size:0.7rem; color: var(--ink-faint); }
.notif-item.unread{ background: var(--primary-tint-4); }
.notif-icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--primary-tint-12); color: var(--primary); font-size:0.8rem; font-weight:700;
}
.text-link{ color: var(--primary); font-weight:600; font-size:0.82rem; }
.text-link.danger{ color: var(--primary-dark); margin-top: var(--sp-2); }

.topbar-profile{
  display:flex; align-items:center; gap:8px; padding:6px 10px 6px 6px;
  border-radius: var(--radius-pill); transition: background var(--transition);
}
.topbar-profile:hover{ background: var(--surface-tint); }
.avatar{
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.8rem; flex-shrink:0;
}
.avatar.lg{ width:48px; height:48px; font-size:0.95rem; }
.avatar.warn{ background: linear-gradient(135deg, var(--ink-faint), var(--ink-soft)); }
.profile-meta{ display:none; flex-direction:column; text-align:left; line-height:1.25; }
.profile-meta strong{ font-size:0.85rem; }
.profile-meta small{ font-size:0.72rem; color: var(--ink-faint); }
.chev{ display:none; color: var(--ink-faint); }

@media (min-width:640px){
  .profile-meta{ display:flex; }
  .chev{ display:block; }
}

/* =========================================================
   MAIN / PAGE
========================================================= */
main{ flex:1; }
.page{ padding: var(--sp-5) var(--sp-4) var(--sp-7); display:flex; flex-direction:column; gap: var(--sp-6); }
.container{ max-width:1280px; margin-inline:auto; width:100%; }

.card{
  background:#fff; border-radius: var(--radius-lg);
  border:1px solid var(--line); box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  transition: box-shadow var(--transition), transform var(--transition);
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); font-weight:600; font-size:0.88rem;
  padding:12px 22px; border-radius: var(--radius-pill);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space:nowrap; border:1.5px solid transparent;
}
.btn-sm{ padding:9px 16px; font-size:0.8rem; }
.btn-primary{ background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow: var(--shadow-primary); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(152,39,42,0.3); }
.btn-outline{ background:transparent; color: var(--primary); border-color: rgba(152,39,42,0.3); }
.btn-outline:hover{ background: var(--primary-tint-8); border-color: var(--primary); transform:translateY(-2px); }
.btn-ghost{ background: var(--surface-tint); color: var(--ink); border-color:transparent; }
.btn-ghost:hover{ background: var(--primary-tint-12); color: var(--primary); }
.btn.icon-only{ padding:9px; width:36px; height:36px; }

/* =========================================================
   GREETING ROW
========================================================= */
.greet-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--sp-3); }
.greet-eyebrow{ font-family:var(--font-display); font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--primary); }
.greet-name{ font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-top:4px; }
.greet-sub{ color: var(--ink-soft); margin-top:4px; }
.greet-quick{ display:flex; gap: var(--sp-2); flex-wrap:wrap; }

/* =========================================================
   SCORE + SUMMARY
========================================================= */
.score-summary-grid{ display:grid; grid-template-columns:1fr; gap: var(--sp-4); }

.score-card-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: var(--sp-3); }
.badge{ font-size:0.72rem; font-weight:700; padding:5px 12px; border-radius: var(--radius-pill); }
.badge-good{ background: var(--primary-tint-12); color: var(--primary-dark); }
.badge-progress{ background: var(--primary-tint-12); color: var(--primary); }

.score-body{ display:flex; flex-direction:column; align-items:center; gap: var(--sp-4); text-align:center; }
.score-ring-wrap{ display:flex; justify-content:center; }
.score-ring{ position:relative; width:172px; height:172px; }
.score-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke: var(--primary-tint-12); stroke-width:8; }
.ring-fill{
  fill:none; stroke: var(--primary); stroke-width:8; stroke-linecap:round;
  stroke-dasharray: 264; stroke-dashoffset: calc(264 - (264 * var(--pct,0)) / 100);
  transition: stroke-dashoffset 1.4s var(--ease);
}
.ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-num{ font-family:var(--font-display); font-size:2.4rem; font-weight:800; color: var(--primary); line-height:1; }
.ring-text{ font-size:0.72rem; color: var(--ink-faint); margin-top:2px; }

.score-insights{ width:100%; text-align:left; display:flex; flex-direction:column; gap: var(--sp-3); }
.ai-insight-pill{
  display:flex; gap:10px; align-items:flex-start;
  background: var(--primary-tint-4); border:1px solid var(--primary-tint-12);
  border-radius: var(--radius-md); padding: var(--sp-3);
}
.ai-insight-pill.compact{ padding:12px 14px; }
.ai-insight-pill p{ font-size:0.85rem; color: var(--ink-soft); }
.ai-dot{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:0.75rem;
}
.ai-dot.small{ width:18px; height:18px; font-size:0.6rem; display:inline-flex; margin-right:6px; vertical-align:middle; }

.score-checklist{ display:flex; flex-direction:column; gap:8px; }
.score-checklist li{ display:flex; align-items:center; gap:10px; font-size:0.85rem; color: var(--ink-soft); }
.check{ width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; }
.check.ok{ background: var(--primary-tint-12); color: var(--primary-dark); }
.check.warn{ background: var(--surface-tint); color: var(--ink-faint); border:1px solid var(--line); }

.summary-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-3); }
.mini-stat{ text-align:center; padding: var(--sp-3); }
.mini-stat-icon{ font-size:1.3rem; }
.mini-stat-num{ font-family:var(--font-display); font-size:1.4rem; font-weight:800; color: var(--primary); margin-top:6px; }
.mini-stat-label{ font-size:0.74rem; color: var(--ink-soft); margin-top:2px; }

@media (min-width:720px){
  .summary-strip{ grid-template-columns:repeat(5,1fr); }
}
@media (min-width:960px){
  .score-summary-grid{ grid-template-columns: 1.1fr 1fr; align-items:stretch; }
  .summary-strip{ grid-template-columns:repeat(2,1fr); }
  .score-body{ flex-direction:row; text-align:left; align-items:flex-start; }
}
@media (min-width:1200px){
  .summary-strip{ grid-template-columns:repeat(5,1fr); }
  .score-summary-grid{ grid-template-columns: 1fr 1.15fr; }
}

/* =========================================================
   SECTION BLOCK / GRIDS
========================================================= */
.section-block{ scroll-margin-top: calc(var(--topbar-h) + 16px); display:flex; flex-direction:column; gap: var(--sp-4); }
.block-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: var(--sp-3); flex-wrap:wrap; }
.block-head h2{ font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

.policy-grid, .gap-grid, .charts-grid, .family-grid, .reco-grid, .quick-actions-grid{
  display:grid; grid-template-columns:1fr; gap: var(--sp-4);
}
@media (min-width:640px){
  .gap-grid, .family-grid{ grid-template-columns:repeat(2,1fr); }
  .quick-actions-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:880px){
  .policy-grid, .charts-grid, .reco-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1180px){
  .policy-grid, .charts-grid, .reco-grid{ grid-template-columns:repeat(3,1fr); }
  .gap-grid{ grid-template-columns:repeat(3,1fr); }
  .family-grid{ grid-template-columns:repeat(4,1fr); }
  .quick-actions-grid{ grid-template-columns:repeat(6,1fr); }
}

/* Policy cards */
.policy-card:hover, .reco-card:hover, .gap-card:hover, .family-card:hover, .renewal-item:hover, .chart-card:hover{ box-shadow: var(--shadow-md); transform:translateY(-3px); }
.policy-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-2); }
.policy-tag{ font-size:0.7rem; font-weight:700; padding:4px 11px; border-radius: var(--radius-pill); text-transform:uppercase; letter-spacing:0.03em; }
.tag-health{ background: var(--primary-tint-12); color: var(--primary-dark); }
.tag-motor{ background: var(--primary-tint-12); color: var(--primary); }
.tag-travel{ background: var(--primary-tint-8); color: var(--primary-dark); }
.tag-home{ background: var(--primary-tint-12); color: var(--primary); }
.tag-life{ background: var(--primary-tint-8); color: var(--primary-dark); }

.status-dot{ font-size:0.72rem; font-weight:600; display:flex; align-items:center; gap:6px; color: var(--ink-soft); }
.status-dot::before{ content:''; width:8px; height:8px; border-radius:50%; background: var(--ink-faint); }
.status-dot.active::before{ background: var(--primary); }
.status-dot.active{ color: var(--primary-dark); }
.status-dot.warn::before{ background: var(--ink-faint); }

.policy-card h3{ font-size:1.05rem; margin-bottom:2px; }
.policy-insurer{ font-size:0.78rem; color: var(--ink-faint); margin-bottom: var(--sp-3); }
.policy-meta{ display:grid; grid-template-columns:1fr 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.policy-meta dt{ font-size:0.68rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:0.02em; }
.policy-meta dd{ font-size:0.84rem; font-weight:600; margin-top:2px; }
.policy-actions{ display:flex; gap:8px; flex-wrap:wrap; padding-top: var(--sp-2); border-top:1px solid var(--line); }

.policy-expand{ display:flex; justify-content:space-between; align-items:center; width:100%; margin-top: var(--sp-3); font-size:0.8rem; font-weight:600; color: var(--primary); }
.policy-expand .chev{ transition: transform var(--transition); display:block; }
.policy-expand[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.policy-details{ max-height:0; overflow:hidden; transition: max-height 0.4s var(--ease), padding-top 0.4s var(--ease); }
.policy-details p{ font-size:0.82rem; color: var(--ink-soft); padding-top: var(--sp-2); }
.policy-details.open{ max-height:200px; }

/* Copilot */
.copilot-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.copilot-chat{ display:flex; flex-direction:column; gap: var(--sp-3); padding: var(--sp-4); max-height:420px; overflow-y:auto; }
.chat-msg{ display:flex; gap:10px; max-width:600px; }
.chat-avatar{ width:30px; height:30px; border-radius:50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.8rem; flex-shrink:0; }
.chat-bubble{ background: var(--surface-tint); border-radius: var(--radius-md); border-top-left-radius:4px; padding: var(--sp-3); }
.chat-bubble p{ font-size:0.87rem; color: var(--ink); margin-bottom:8px; }
.chip-btn{ font-size:0.78rem; font-weight:700; color: var(--primary); background:#fff; border:1px solid var(--primary-tint-20); padding:7px 14px; border-radius: var(--radius-pill); transition: background var(--transition), transform var(--transition); }
.chip-btn:hover{ background: var(--primary-tint-8); transform:translateY(-1px); }
.chat-msg.user{ flex-direction:row-reverse; margin-left:auto; }
.chat-msg.user .chat-bubble{ background: var(--primary); border-top-left-radius: var(--radius-md); border-top-right-radius:4px; }
.chat-msg.user .chat-bubble p{ color:#fff; margin-bottom:0; }
.copilot-input{ display:flex; gap:8px; padding: var(--sp-3) var(--sp-4); border-top:1px solid var(--line); background:#fff; }
.copilot-input input{ flex:1; border:1px solid var(--line); border-radius: var(--radius-pill); padding:11px 16px; outline:none; font-size:0.87rem; }
.copilot-input input:focus{ border-color: var(--primary); }

/* Claim intelligence */
.claim-card-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.claim-id{ font-size:0.8rem; color: var(--ink-faint); margin-bottom:4px; }
.claim-amount{ font-family:var(--font-display); font-size:1.4rem; font-weight:800; }
.claim-eta{ text-align:right; }
.claim-eta .badge{ margin-bottom:4px; display:inline-block; }

.claim-timeline{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); position:relative; }
.claim-timeline li{ flex:1; min-width:110px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; position:relative; padding-top: 22px; }
.claim-timeline li::before{ content:''; position:absolute; top:5px; left:12px; right:-50%; height:2px; background: var(--line); z-index:0; }
.claim-timeline li:last-child::before{ display:none; }
.claim-timeline li.done::before{ background: var(--primary); }
.tl-dot{ position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%; background: var(--line); border:2px solid #fff; box-shadow:0 0 0 2px var(--line); z-index:1; }
.claim-timeline li.done .tl-dot{ background: var(--primary); box-shadow:0 0 0 2px var(--primary-tint-20); }
.claim-timeline li.active .tl-dot{ background:#fff; border-color: var(--primary); box-shadow:0 0 0 4px var(--primary-tint-20); animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px var(--primary-tint-20); } 50%{ box-shadow:0 0 0 8px var(--primary-tint-8); } }
.claim-timeline strong{ font-size:0.82rem; display:block; }
.claim-timeline time{ font-size:0.7rem; color: var(--ink-faint); }

.claim-footer{ display:grid; grid-template-columns:1fr; gap: var(--sp-3); }
.claim-docs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.doc-chip{ font-size:0.74rem; font-weight:600; padding:6px 12px; border-radius: var(--radius-pill); }
.doc-chip.ok{ background: var(--primary-tint-12); color: var(--primary-dark); }
.doc-chip.missing{ background: var(--surface-tint); color: var(--ink-soft); border:1px dashed var(--ink-faint); }
@media (min-width:820px){ .claim-footer{ grid-template-columns:1.3fr 1fr; align-items:center; } }

/* Gap analysis */
.gap-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-2); }
.gap-pct{ font-family:var(--font-display); font-weight:800; color: var(--primary); }
.progress-track{ height:8px; border-radius: var(--radius-pill); background: var(--surface-tint); overflow:hidden; margin-bottom: var(--sp-2); }
.progress-fill{ height:100%; width:0; background: linear-gradient(90deg, var(--primary-light), var(--primary)); border-radius: var(--radius-pill); transition: width 1.2s var(--ease); }
.gap-card p{ margin-bottom: var(--sp-3); }

/* Charts */
.chart-card h3{ font-size:0.95rem; margin-bottom: var(--sp-3); }
.donut-wrap{ display:flex; flex-direction:column; align-items:center; gap: var(--sp-3); }
.donut{ width:150px; height:150px; }
.donut-seg{ fill:none; stroke-width:5.5; stroke: var(--primary); }
.donut-seg.s2{ stroke: var(--primary-light); }
.donut-seg.s3{ stroke: rgba(152,39,42,0.55); }
.donut-seg.s4{ stroke: rgba(152,39,42,0.35); }
.donut-seg.s5{ stroke: rgba(152,39,42,0.2); }
.donut-legend{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; width:100%; }
.donut-legend span{ font-size:0.78rem; color: var(--ink-soft); display:flex; align-items:center; gap:6px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.d1{ background: var(--primary); } .d2{ background: var(--primary-light); } .d3{ background: rgba(152,39,42,0.55); } .d4{ background: rgba(152,39,42,0.35); } .d5{ background: rgba(152,39,42,0.2); }

.bar-chart{ display:flex; align-items:flex-end; gap: var(--sp-2); height:150px; padding-top: var(--sp-3); }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; }
.bar{ width:100%; max-width:28px; height:var(--h); background: linear-gradient(180deg, var(--primary-light), var(--primary)); border-radius:6px 6px 0 0; transition: height 1s var(--ease); }
.bar-col span{ font-size:0.7rem; color: var(--ink-faint); }

.line-chart{ width:100%; height:130px; }
.line-chart polyline{ fill:none; stroke: var(--primary); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.line-fill{ fill: var(--primary-tint-12); stroke:none; }

/* Activity */
.activity-list{ display:flex; flex-direction:column; gap: var(--sp-3); }
.activity-list li{ display:flex; gap:12px; align-items:flex-start; padding-bottom: var(--sp-3); border-bottom:1px solid var(--line); }
.activity-list li:last-child{ border-bottom:none; padding-bottom:0; }
.act-icon{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; background: var(--primary-tint-12); color: var(--primary-dark); }
.activity-list p{ font-size:0.85rem; }
.activity-list time{ font-size:0.72rem; color: var(--ink-faint); }

/* Renewal center */
.renewal-list{ display:flex; flex-direction:column; gap: var(--sp-3); }
.renewal-item{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-3); justify-content:space-between; }
.renewal-info{ display:flex; align-items:center; gap: var(--sp-3); }
.renewal-info h3{ font-size:0.95rem; }
.renewal-ai{ display:flex; align-items:center; flex:1; min-width:220px; font-size:0.8rem; color: var(--ink-soft); }

/* Quick actions */
.quick-action{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding: var(--sp-4) var(--sp-2); font-weight:600; font-size:0.82rem; }
.quick-action:hover{ transform:translateY(-3px); box-shadow: var(--shadow-md); color: var(--primary); }
.qa-icon{ font-size:1.5rem; }

/* Family */
.family-card{ text-align:left; }
.family-top{ display:flex; align-items:center; gap:12px; margin-bottom: var(--sp-3); }
.family-top h3{ font-size:0.95rem; }
.family-coverage{ display:flex; flex-direction:column; gap:4px; margin-bottom: var(--sp-2); }
.family-coverage p{ font-size:0.78rem; color: var(--ink-soft); }

/* Reco cards */
.reco-card h3{ font-size:1.05rem; margin:10px 0 8px; }
.reco-reason{ font-size:0.82rem; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.reco-figures{ display:flex; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.reco-figures dt{ font-size:0.68rem; color: var(--ink-faint); text-transform:uppercase; }
.reco-figures dd{ font-size:0.92rem; font-weight:700; margin-top:2px; }

/* Table */
.table-card{ padding:0; overflow-x:auto; }
.responsive-table{ min-width:560px; }
.responsive-table th{ text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; color: var(--ink-faint); padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); }
.responsive-table td{ padding: var(--sp-3) var(--sp-4); font-size:0.85rem; border-bottom:1px solid var(--line); }
.responsive-table tr:last-child td{ border-bottom:none; }
@media (max-width:640px){
  .responsive-table thead{ display:none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td{ display:block; width:100%; min-width:0; }
  .responsive-table tr{ padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); }
  .responsive-table td{ border:none; padding:4px 0; display:flex; justify-content:space-between; gap: var(--sp-3); }
  .responsive-table td::before{ content: attr(data-label); font-weight:600; color: var(--ink-faint); font-size:0.72rem; text-transform:uppercase; }
}

/* Preferences / switches */
.pref-card{ display:flex; flex-direction:column; gap: var(--sp-1); }
.pref-row{ display:flex; justify-content:space-between; align-items:center; padding: var(--sp-3) 0; border-bottom:1px solid var(--line); font-size:0.9rem; }
.pref-row:last-of-type{ border-bottom:none; }
.switch{ appearance:none; width:42px; height:24px; border-radius: var(--radius-pill); background: var(--line); position:relative; cursor:pointer; transition: background var(--transition); flex-shrink:0; }
.switch::after{ content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow: var(--shadow-sm); transition: transform var(--transition); }
.switch:checked{ background: var(--primary); }
.switch:checked::after{ transform:translateX(18px); }

/* =========================================================
   BOTTOM NAV (mobile)
========================================================= */
.bottom-nav{
  display:flex; justify-content:space-around; align-items:center;
  position:sticky; bottom:0; z-index:60; height: var(--bottomnav-h);
  background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
  border-top:1px solid var(--line);
}
.bn-link{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:0.63rem; color: var(--ink-faint); font-weight:600; padding:6px 10px; border-radius: var(--radius-sm); transition: color var(--transition); }
.bn-link.is-active{ color: var(--primary); }
.bn-fab{ background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border-radius:50%; width:52px; height:52px; margin-top:-24px; box-shadow: var(--shadow-primary); justify-content:center; }
.bn-fab span{ display:none; }

@media (min-width:960px){
  .bottom-nav{ display:none; }
}
@media (max-width:959.98px){
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-toggle{ display:flex; }
  .side-support{ margin-top:auto; }
  .page{ padding-bottom: calc(var(--bottomnav-h) + var(--sp-5)); }
}

/* Sidebar scrim */
.scrim{ position:fixed; inset:0; background:rgba(27,19,21,0.4); z-index:55; opacity:0; visibility:hidden; transition: opacity var(--transition), visibility var(--transition); }
.scrim.open{ opacity:1; visibility:visible; }

/* =========================================================
   MODAL
========================================================= */
.modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(27,19,21,0.45);
  display:flex; align-items:center; justify-content:center; padding: var(--sp-3);
  opacity:0; visibility:hidden; transition: opacity var(--transition), visibility var(--transition);
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width:100%; max-width:460px; max-height:88vh; overflow-y:auto; padding: var(--sp-5);
  position:relative; transform:translateY(16px) scale(0.98); transition: transform var(--transition);
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-close{ position:absolute; top: var(--sp-3); right: var(--sp-3); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--surface-tint); color: var(--ink-soft); }
.modal-close:hover{ background: var(--primary-tint-12); color: var(--primary); }
.modal h2{ font-size:1.2rem; margin-bottom: var(--sp-2); padding-right: var(--sp-5); }
.modal p{ font-size:0.88rem; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.modal-field{ margin-bottom: var(--sp-3); }
.modal-field label{ display:block; font-size:0.78rem; font-weight:600; margin-bottom:6px; color: var(--ink-soft); }
.modal-field input, .modal-field select{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius: var(--radius-sm); font-size:0.88rem; outline:none; }
.modal-field input:focus, .modal-field select:focus{ border-color: var(--primary); }
.modal-actions{ display:flex; gap:10px; margin-top: var(--sp-4); }
.upload-zone{ border:1.5px dashed var(--primary-tint-20); border-radius: var(--radius-md); padding: var(--sp-5); text-align:center; color: var(--ink-faint); font-size:0.85rem; margin-bottom: var(--sp-3); transition: border-color var(--transition), background var(--transition); }
.upload-zone:hover{ border-color: var(--primary); background: var(--primary-tint-4); }

/* =========================================================
   TOAST
========================================================= */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--ink); color:#fff; padding:13px 22px; border-radius: var(--radius-pill);
  font-size:0.85rem; font-weight:500; box-shadow: var(--shadow-lg); z-index:300;
  opacity:0; visibility:hidden; transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* =========================================================
   SKELETON LOADING
========================================================= */
.skeleton{ position:relative; }
.skeleton::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(90deg, var(--surface-tint) 25%, var(--primary-tint-8) 50%, var(--surface-tint) 75%);
  background-size:200% 100%; animation: shimmer 1.4s ease-in-out infinite;
  opacity: var(--skeleton-opacity, 1);
}
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* =========================================================
   DARK MODE (opt-in, palette-consistent)
========================================================= */
body.dark-mode{ background:#140d0e; }
body.dark-mode .sidebar, body.dark-mode .topbar, body.dark-mode .card, body.dark-mode .modal, body.dark-mode .bottom-nav{
  background:#1f1517; border-color: rgba(255,255,255,0.08);
}
body.dark-mode{ color:#f3ecec; }
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3{ color:#f3ecec; }
body.dark-mode .topbar-search{ background:#241819; border-color:rgba(255,255,255,0.08); }
body.dark-mode .topbar-search input{ color:#f3ecec; }
body.dark-mode .muted, body.dark-mode .side-link{ color:#c9bcbd; }