/* ===================================================================
   ManasikOS — Component library
   25 reusable components. All bind to tokens; large touch targets;
   high contrast; icon + label pairing.
   =================================================================== */

/* ---- 1–5 Buttons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur) var(--ease-calm), background var(--dur);
  user-select: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn .ico { width: 22px; height: 22px; }
.btn--lg    { min-height: 66px; font-size: 21px; border-radius: var(--radius-lg); padding: 0 28px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--gold-500); color: var(--ink-950); box-shadow: var(--shadow-gold); }
.btn--primary:hover { background: var(--gold-400); }
.btn--primary .ico { color: var(--ink-950); }

.btn--secondary { background: var(--green-800); color: var(--ivory-100); box-shadow: var(--shadow-soft); }
.btn--secondary:hover { background: var(--green-700); }

.btn--ghost { background: transparent; color: var(--green-800); border: 2px solid var(--border-gold); }
.btn--ghost:hover { background: var(--gold-200); }
.btn--ghost-dark { background: transparent; color: var(--ivory-100); border: 2px solid var(--green-700); }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.06); }

/* ---- 4 Emergency SOS button ------------------------------------ */
.sos-btn {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  width: 180px; height: 180px; border-radius: 999px;
  background: radial-gradient(circle at 50% 38%, var(--red-500), var(--red-600) 70%);
  color: #fff; box-shadow: var(--shadow-sos); isolation: isolate;
}
.sos-btn::after {
  content: ""; position: absolute; inset: -10px; border-radius: 999px; z-index: -1;
  border: 3px solid rgba(180,35,24,0.45); animation: sos-pulse 2.2s var(--ease-calm) infinite;
}
.sos-btn .ico { width: 44px; height: 44px; }
.sos-btn .sos-word { font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: 2px; }
.sos-btn .sos-sub  { font-size: 15px; opacity: 0.92; }
.sos-btn--sm { width: 116px; height: 116px; }
.sos-btn--sm .sos-word { font-size: 22px; } .sos-btn--sm .ico { width: 30px; height: 30px; }
@keyframes sos-pulse { 0%{transform:scale(1);opacity:0.9} 70%{transform:scale(1.18);opacity:0} 100%{opacity:0} }

/* persistent slim SOS bar (always reachable rule) */
.sos-bar { display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:60px; border-radius: var(--radius-lg);
  background: var(--red-600); color:#fff; font-family:var(--font-display); font-weight:900; font-size:20px; letter-spacing:1px;
  box-shadow: var(--shadow-sos); }
.sos-bar .ico { width:26px; height:26px; }

/* ---- 23 Mutawwif command button -------------------------------- */
.cmd-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height: 104px; padding: 16px; border-radius: var(--radius-lg);
  background: var(--green-800); color: var(--ivory-100); border: 1.5px solid var(--green-700);
  transition: background var(--dur), transform var(--dur-fast);
}
.cmd-btn:hover { background: var(--green-700); }
.cmd-btn .ico { width: 34px; height: 34px; color: var(--gold-400); }
.cmd-btn .cmd-label { font-family:var(--font-display); font-weight:700; font-size:20px; }
.cmd-btn--danger { background: var(--red-600); border-color: var(--red-500); }
.cmd-btn--danger .ico { color:#fff; }

/* ---- 5 Card (base) --------------------------------------------- */
.card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 20px;
}
.card-dark {
  background: var(--green-800); border: 1px solid var(--green-700);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; color: var(--ivory-100);
}
.card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.card-ico { width:48px; height:48px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center;
  background: var(--gold-200); color: var(--gold-700); flex:none; }
.card-ico .ico { width:26px; height:26px; }
.card-ico--dark { background: rgba(200,162,74,0.16); color: var(--gold-300); }

/* ---- 6 Ritual step card ---------------------------------------- */
.ritual-card { display:flex; align-items:center; gap:16px; padding:18px 20px;
  background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); }
.ritual-step { width:54px; height:54px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:22px; background:var(--green-900); color:var(--gold-400); flex:none; }
.ritual-card.is-done .ritual-step { background: var(--green-600); color:#fff; }
.ritual-card.is-active { border:2px solid var(--gold-500); box-shadow: var(--shadow-gold); }
.ritual-card.is-active .ritual-step { background: var(--gold-500); color: var(--ink-950); }

/* ---- 7 Haptic pattern card ------------------------------------- */
.haptic-card { display:flex; align-items:center; gap:18px; padding:20px;
  background: var(--green-800); border:1px solid var(--green-700); border-radius: var(--radius-lg); color: var(--ivory-100); }
.haptic-dots { display:flex; align-items:center; gap:8px; min-width:96px; }
.haptic-dots .d { width:18px; height:18px; border-radius:999px; background: var(--gold-400); box-shadow:0 0 0 4px rgba(200,162,74,0.18); }
.haptic-dots .d.long { width:46px; border-radius:999px; }
.haptic-dots .d.dim { background: var(--green-700); box-shadow:none; }

/* ---- 8 Alert card ---------------------------------------------- */
.alert { display:flex; gap:14px; padding:16px 18px; border-radius: var(--radius-md);
  border:1px solid var(--border-subtle); background: var(--bg-surface); position:relative; overflow:hidden; }
.alert::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:6px; background: var(--text-muted); }
.alert .ico { width:26px; height:26px; flex:none; }
.alert--danger  { background: var(--status-danger-bg);  } .alert--danger::before  { background: var(--status-danger); } .alert--danger .ico  { color:var(--status-danger); }
.alert--warning { background: var(--status-warning-bg); } .alert--warning::before { background: var(--status-warning); } .alert--warning .ico { color:var(--status-warning); }
.alert--success { background: var(--status-success-bg); } .alert--success::before { background: var(--status-success); } .alert--success .ico { color:var(--status-success); }
.alert--info    { background: var(--gold-200); } .alert--info::before { background: var(--gold-500); } .alert--info .ico { color:var(--gold-700); }

/* ---- 9 Accessibility option card (selectable) ------------------ */
.access-card { display:flex; align-items:center; gap:16px; width:100%; text-align:start;
  padding:20px; border-radius: var(--radius-lg); background: var(--bg-surface);
  border:2px solid var(--border-subtle); box-shadow: var(--shadow-soft); transition: all var(--dur); }
.access-card:hover { border-color: var(--gold-400); }
.access-card .a-ico { width:60px; height:60px; border-radius: var(--radius-md); flex:none;
  background: var(--green-900); color: var(--gold-400); display:flex; align-items:center; justify-content:center; }
.access-card .a-ico .ico { width:32px; height:32px; }
.access-card .a-check { margin-inline-start:auto; width:32px; height:32px; border-radius:999px; border:2px solid var(--border-strong); flex:none; }
.access-card.is-on { border-color: var(--gold-500); background: var(--gold-200); box-shadow: var(--shadow-gold); }
.access-card.is-on .a-check { background: var(--green-600); border-color: var(--green-600); }
.access-card.is-on .a-check::after { content:"✓"; color:#fff; display:flex; align-items:center; justify-content:center; height:100%; font-weight:700; }

/* ---- 10 Translation phrase card -------------------------------- */
.phrase-card { display:flex; flex-direction:column; gap:8px; padding:20px; min-height:120px;
  background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); position:relative; transition: all var(--dur); }
.phrase-card:hover { border-color: var(--gold-400); transform: translateY(-2px); }
.phrase-card .p-ar { font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--text-primary); }
.phrase-card .p-tr { font-size:15px; color:var(--text-secondary); }
.phrase-card .p-ico { position:absolute; inset-inline-end:16px; bottom:16px; width:34px; height:34px;
  border-radius:999px; background:var(--green-900); color:var(--gold-400); display:flex; align-items:center; justify-content:center; }
.phrase-card .p-ico .ico { width:18px; height:18px; }

/* ---- 11 Pilgrim status card ------------------------------------ */
.pilgrim-card { display:flex; align-items:center; gap:14px; padding:16px 18px;
  background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.avatar { width:52px; height:52px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center;
  background: var(--green-900); color: var(--gold-300); font-family:var(--font-display); font-weight:800; font-size:20px; }
.avatar--lg { width:72px; height:72px; font-size:26px; }
.pilgrim-card .p-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }

/* ---- 12 Device battery badge ----------------------------------- */
.batt { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius: var(--radius-pill);
  background: var(--ivory-200); color: var(--text-primary); font-weight:700; font-size:15px; }
.batt .cell { position:relative; width:30px; height:16px; border:2px solid currentColor; border-radius:4px; }
.batt .cell::after { content:""; position:absolute; inset-inline-end:-5px; top:4px; width:3px; height:6px; background:currentColor; border-radius:1px; }
.batt .cell i { position:absolute; inset:2px; border-radius:2px; background: currentColor; display:block; }
.batt--ok   { color: var(--green-600); } .batt--ok .cell i { width:70%; }
.batt--mid  { color: var(--amber-600); } .batt--mid .cell i { width:42%; }
.batt--low  { color: var(--red-600); }   .batt--low .cell i { width:18%; }
.batt--dark { background: rgba(255,255,255,0.08); }

/* ---- 13 Offline status badge ----------------------------------- */
.netbadge { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius: var(--radius-pill);
  font-weight:700; font-size:15px; }
.netbadge .dot { width:9px; height:9px; border-radius:999px; background: currentColor; }
.netbadge--online  { background: var(--status-success-bg); color: var(--green-600); }
.netbadge--offline { background: var(--ivory-200); color: var(--ink-600); }
.netbadge--offline .dot { background: var(--ink-400); }
.netbadge .ico { width:18px; height:18px; }

/* ---- 14 Group status badge ------------------------------------- */
.gstatus { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius: var(--radius-pill);
  font-weight:700; font-size:15px; }
.gstatus .dot { width:10px; height:10px; border-radius:999px; }
.gstatus--normal    { background: var(--status-success-bg); color: var(--green-600); } .gstatus--normal .dot { background: var(--green-600); }
.gstatus--attention { background: var(--status-warning-bg); color: var(--amber-600); } .gstatus--attention .dot { background: var(--amber-600); }
.gstatus--sos       { background: var(--status-danger-bg);  color: var(--red-600); }   .gstatus--sos .dot { background: var(--red-600); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---- 15 Beacon zone badge -------------------------------------- */
.beacon { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius: var(--radius-md);
  background: rgba(200,162,74,0.14); color: var(--gold-700); font-weight:700; font-size:14px; border:1px solid var(--gold-300); }
.beacon .ico { width:18px; height:18px; }
.beacon--risk { background: var(--status-danger-bg); color: var(--red-600); border-color: var(--red-500); }

/* ---- 16 AI response card --------------------------------------- */
.ai-card { display:flex; gap:14px; padding:18px; border-radius: var(--radius-lg);
  background: var(--green-800); color: var(--ivory-100); border:1px solid var(--green-700); }
.ai-ava { width:44px; height:44px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center;
  background: var(--gold-500); color: var(--ink-950); }
.ai-ava .ico { width:24px; height:24px; }
.ai-card .ai-body { display:flex; flex-direction:column; gap:8px; }
.ai-disclaimer { display:flex; gap:8px; align-items:center; font-size:13px; color: var(--text-on-dark-muted);
  border-top:1px solid var(--green-700); padding-top:10px; margin-top:4px; }
.bubble-user { align-self:flex-start; background: var(--gold-500); color: var(--ink-950);
  padding:12px 16px; border-radius: 18px 18px 18px 6px; font-weight:500; max-width:80%; }

/* ---- 17 Dashboard KPI card ------------------------------------- */
.kpi { display:flex; flex-direction:column; gap:6px; padding:22px;
  background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.kpi .kpi-top { display:flex; align-items:center; justify-content:space-between; }
.kpi .kpi-ico { width:46px; height:46px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center;
  background: var(--green-900); color: var(--gold-400); }
.kpi .kpi-ico .ico { width:24px; height:24px; }
.kpi .kpi-num { font-family:var(--font-display); font-weight:800; font-size:38px; line-height:1.05; color: var(--text-primary); }
.kpi .kpi-label { color: var(--text-secondary); font-weight:500; font-size:15px; }
.kpi .kpi-trend { font-size:13px; font-weight:700; }
.kpi--danger .kpi-num { color: var(--red-600); } .kpi--danger .kpi-ico { background: var(--red-600); color:#fff; }
.kpi--warning .kpi-num { color: var(--amber-600); } .kpi--warning .kpi-ico { background: var(--amber-600); color:#fff; }

/* ---- 18 Map pin ------------------------------------------------ */
.pin { position:relative; width:34px; height:34px; }
.pin .pin-body { width:34px; height:34px; border-radius:999px 999px 999px 2px; transform: rotate(45deg);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-card); }
.pin .pin-body .ico { transform: rotate(-45deg); width:16px; height:16px; color:#fff; }
.pin--normal .pin-body    { background: var(--pin-normal); }
.pin--attention .pin-body { background: var(--pin-attention); }
.pin--sos .pin-body       { background: var(--pin-sos); }
.pin--beacon .pin-body    { background: var(--pin-beacon); } .pin--beacon .pin-body .ico { color: var(--ink-950); }
.pin--sos::after { content:""; position:absolute; inset:-8px; border-radius:999px; border:2px solid var(--pin-sos);
  animation: sos-pulse 1.8s infinite; }

/* ---- 19 Bottom navigation -------------------------------------- */
.bottom-nav { display:flex; align-items:stretch; justify-content:space-around;
  background: var(--green-900); border-top:1px solid var(--green-700); padding:8px 6px 10px; }
.bottom-nav .nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 10px; color: var(--text-on-dark-muted); flex:1; }
.bottom-nav .nav-item .ico { width:26px; height:26px; }
.bottom-nav .nav-item span { font-size:12px; font-weight:700; }
.bottom-nav .nav-item.is-active { color: var(--gold-400); }
.bottom-nav .nav-item.is-active .ico { filter: drop-shadow(0 0 6px rgba(200,162,74,0.5)); }

/* ---- 20 Dashboard sidebar -------------------------------------- */
.sidebar { width:268px; flex:none; background: var(--green-950); color: var(--ivory-100);
  display:flex; flex-direction:column; padding:24px 16px; gap:6px; }
.sidebar .brand { display:flex; align-items:center; gap:12px; padding:8px 12px 20px; }
.sidebar .nav-link { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius: var(--radius-md);
  color: var(--text-on-dark-muted); font-weight:700; font-size:16px; transition: all var(--dur); }
.sidebar .nav-link .ico { width:22px; height:22px; }
.sidebar .nav-link:hover { background: rgba(255,255,255,0.05); color: var(--ivory-100); }
.sidebar .nav-link.is-active { background: var(--green-800); color: var(--ivory-100); box-shadow: inset 4px 0 0 var(--gold-500); }
.sidebar .nav-link.is-active .ico { color: var(--gold-400); }
.sidebar .badge-count { margin-inline-start:auto; background: var(--red-600); color:#fff; font-size:12px; font-weight:800;
  min-width:24px; height:24px; padding:0 7px; border-radius:999px; display:flex; align-items:center; justify-content:center; }

/* ---- 21 Mobile header ------------------------------------------ */
.app-header { display:flex; align-items:center; gap:12px; padding:16px 20px; min-height:64px; }
.app-header .h-title { font-family:var(--font-display); font-weight:700; font-size:20px; }
.app-header .h-btn { width:44px; height:44px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); color: inherit; }
.app-header .h-btn .ico { width:22px; height:22px; }
.app-header--dark { background: var(--green-900); color: var(--ivory-100); }
.app-header--light { background: var(--bg-surface); color: var(--text-primary); border-bottom:1px solid var(--border-subtle); }
.app-header--light .h-btn { background: var(--ivory-200); }

/* ---- 22 Screen-reader-friendly button state -------------------- */
.sr-btn { position:relative; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sr-tag { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color: var(--green-600);
  background: var(--status-success-bg); padding:3px 8px; border-radius:999px; }
.focus-demo { outline:3px solid var(--gold-500); outline-offset:3px; }

/* ---- 24 / 25 Modal --------------------------------------------- */
.scrim { position:absolute; inset:0; background: rgba(4,42,33,0.55); backdrop-filter: blur(2px);
  display:flex; align-items:flex-end; justify-content:center; padding:16px; }
.modal { width:100%; background: var(--bg-surface); border-radius: var(--radius-xl);
  padding:24px; box-shadow: var(--shadow-lifted); display:flex; flex-direction:column; gap:16px; }
.modal--center { align-self:center; }
.modal-grab { width:48px; height:5px; border-radius:999px; background: var(--border-strong); align-self:center; }
.modal--emergency { border-top:6px solid var(--red-600); }
.modal-ico { width:72px; height:72px; border-radius:999px; align-self:center; display:flex; align-items:center; justify-content:center; }
.modal-ico .ico { width:38px; height:38px; }
.modal-ico--danger { background: var(--status-danger-bg); color: var(--red-600); }
.modal-ico--info   { background: var(--gold-200); color: var(--gold-700); }

/* generic chips / tags */
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; }
.chip--gold { background: var(--gold-200); color: var(--gold-700); }
.chip--dark { background: rgba(255,255,255,0.08); color: var(--ivory-100); }
.chip--neutral { background: var(--ivory-200); color: var(--ink-600); }
.chip .ico { width:15px; height:15px; }

/* accessibility need pills (deaf/blind/mute/translate/elder) */
.a11y-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  font-size:13px; font-weight:700; background: var(--green-900); color: var(--gold-300); }
.a11y-pill .ico { width:15px; height:15px; }

/* tables (dashboard) */
.tbl { width:100%; border-collapse:collapse; background: var(--bg-surface); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); }
.tbl thead th { text-align:start; padding:14px 18px; background: var(--ivory-200); color: var(--text-secondary);
  font-size:13px; font-weight:800; letter-spacing:0.3px; }
.tbl tbody td { padding:14px 18px; border-top:1px solid var(--border-subtle); font-size:15px; vertical-align:middle; }
.tbl tbody tr:hover { background: var(--ivory-50); }

/* segmented tabs */
.tabs { display:flex; gap:6px; background: var(--ivory-200); padding:6px; border-radius: var(--radius-pill); }
.tabs .tab { flex:1; text-align:center; padding:12px; border-radius: var(--radius-pill); font-weight:700; font-size:16px; color: var(--text-secondary); }
.tabs .tab.is-active { background: var(--green-900); color: var(--ivory-100); box-shadow: var(--shadow-soft); }

/* input */
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-weight:700; font-size:15px; color: var(--text-secondary); }
.input { width:100%; min-height:60px; padding:0 18px; border-radius: var(--radius-md);
  border:2px solid var(--border-strong); background: var(--bg-surface); font-family:inherit; font-size:18px; font-weight:600; color:var(--text-primary); }
.input:focus { border-color: var(--gold-500); outline:none; }
.input--code { letter-spacing: 10px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:28px; }

/* list row */
.lrow { display:flex; align-items:center; gap:14px; padding:18px 4px; border-bottom:1px solid var(--border-subtle); }
.lrow:last-child { border-bottom:none; }
.lrow .l-ico { width:46px; height:46px; border-radius: var(--radius-md); flex:none; display:flex; align-items:center; justify-content:center;
  background: var(--ivory-200); color: var(--green-800); }
.lrow .l-ico .ico { width:24px; height:24px; }
.chev { margin-inline-start:auto; color: var(--text-muted); width:20px; height:20px; transform: scaleX(-1); }