/* ============================================================
   HIAN Ambulance — hian.css  (amb.hian.ltd, tablet UI)
   Based on the Sigma ERP shell (app.sigma-erp.co.il, "Soft UI Evolution"):
   same tokens, topbar, graphite side, cards, forms, buttons, light+dark.
   Changes for HIAN: brand = HIAN blue + orange accent, and everything sized
   for touch on a tablet (min 48px targets, 64-96px for the call actions).
   Side bar = icon rail in landscape, bottom tab bar in portrait.
   Loaded after Bootstrap 5.3.3 RTL. Pages keep their old frest/Sneat classes;
   section 20 maps those classes onto this design.
   ============================================================ */

/* 1. Scales */
:root{
  --brand-50:#eef4fc; --brand-100:#d9e6f8; --brand-200:#b5cdf0; --brand-300:#86ace4;
  --brand-400:#5788d4; --brand-500:#3a6fc2; --brand-600:#2c5aa6; --brand-700:#244a89;
  --brand-800:#1f3e70; --brand-900:#1b345c;
  --accent-500:#ef7d32; --accent-600:#e06a1f;
  --graphite-950:#080b10; --graphite-900:#0b0f14; --graphite-850:#0e131b;
  --graphite-800:#10151f; --graphite-700:#151c28; --graphite-600:#1d2634; --graphite-500:#28323f;

  --rail-w:104px; --topbar-h:72px; --tabbar-h:76px;
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:140ms; --t:200ms; --t-slow:300ms;
  --tap:48px; --tap-lg:64px;
}

/* 2. Light */
:root, :root[data-theme="light"]{
  --bg:#f3f6fa;
  --bg-tint:radial-gradient(1200px 700px at 88% -8%, rgba(44,90,166,.07), transparent 60%),
            radial-gradient(1000px 620px at 4% 108%, rgba(239,125,50,.05), transparent 55%);
  --surface:#ffffff; --surface-2:#f1f4f9; --surface-3:#e6ecf4; --surface-inset:#f6f8fb;
  --text:#121a26; --ink:#0a111c; --text-2:#55627a; --text-3:#8a95a8;
  --border:#e3e8f0; --border-2:#d3dbe7; --border-strong:#bfc9d8;
  --brand:var(--brand-600); --brand-strong:var(--brand-700); --brand-bright:var(--brand-500);
  --brand-contrast:#ffffff; --brand-soft:#e9f0fb; --brand-soft-2:#d7e4f7; --brand-ring:rgba(44,90,166,.28);
  --accent:var(--accent-500); --accent-soft:#fdeee3;
  --ok:#0f9d58; --ok-soft:#e3f5ea;
  --warn:#b45309; --warn-soft:#fbf0dc;
  --danger:#dc2626; --danger-soft:#fdeaea;
  --info:#0e7490; --info-soft:#e0f2f5;
  --neutral:#64748b; --neutral-soft:#eef1f5;
  --side-grad:linear-gradient(185deg,var(--graphite-800) 0%,var(--graphite-850) 55%,var(--graphite-900) 100%);
  --side-text:#b3bccb; --side-text-dim:#6b778a; --side-hover:rgba(255,255,255,.06); --side-border:rgba(255,255,255,.06);
  --grad:linear-gradient(135deg,var(--brand-700) 0%,var(--brand-600) 55%,var(--brand-500) 100%);
  --scrim:rgba(8,14,24,.5);
  --shadow-xs:0 1px 2px rgba(12,22,40,.05);
  --shadow-sm:0 1px 2px rgba(12,22,40,.04), 0 2px 6px rgba(12,22,40,.05);
  --shadow:0 2px 4px rgba(12,22,40,.04), 0 8px 24px rgba(12,22,40,.07);
  --shadow-md:0 4px 10px rgba(12,22,40,.06), 0 16px 40px rgba(12,22,40,.10);
  --shadow-lg:0 8px 20px rgba(12,22,40,.08), 0 30px 64px rgba(12,22,40,.16);
  --shadow-brand:0 6px 18px rgba(44,90,166,.30);
  --topbar-bg:rgba(255,255,255,.86);
}

/* 3. Dark (night shifts) */
:root[data-theme="dark"]{
  --bg:#0a0e14;
  --bg-tint:radial-gradient(1200px 700px at 88% -8%, rgba(58,111,194,.13), transparent 60%),
            radial-gradient(1000px 620px at 4% 108%, rgba(239,125,50,.06), transparent 55%);
  --surface:#121821; --surface-2:#1a212c; --surface-3:#222b38; --surface-inset:#0f141c;
  --text:#e5eaf2; --ink:#f4f7fb; --text-2:#9eabc0; --text-3:#6c788c;
  --border:#242e3b; --border-2:#2e3947; --border-strong:#3a4656;
  --brand:var(--brand-400); --brand-strong:var(--brand-300); --brand-bright:var(--brand-300);
  --brand-contrast:#06101f; --brand-soft:rgba(87,136,212,.16); --brand-soft-2:rgba(87,136,212,.24); --brand-ring:rgba(87,136,212,.45);
  --accent-soft:rgba(239,125,50,.16);
  --ok:#34d399; --ok-soft:rgba(52,211,153,.15);
  --warn:#f59e0b; --warn-soft:rgba(245,158,11,.16);
  --danger:#f87171; --danger-soft:rgba(248,113,113,.16);
  --info:#22d3ee; --info-soft:rgba(34,211,238,.14);
  --neutral:#94a3b8; --neutral-soft:rgba(148,163,184,.16);
  --side-grad:linear-gradient(185deg,var(--graphite-850) 0%,var(--graphite-900) 55%,var(--graphite-950) 100%);
  --grad:linear-gradient(135deg,var(--brand-600) 0%,var(--brand-500) 55%,var(--brand-400) 100%);
  --scrim:rgba(0,0,0,.62);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
  --shadow-md:0 6px 16px rgba(0,0,0,.45), 0 20px 46px rgba(0,0,0,.55);
  --shadow-lg:0 10px 26px rgba(0,0,0,.5), 0 34px 70px rgba(0,0,0,.62);
  --shadow-brand:0 6px 20px rgba(58,111,194,.4);
  --topbar-bg:rgba(15,20,28,.82);
}

/* 4. Base */
*{ box-sizing:border-box; }
html{ color-scheme:light; -webkit-tap-highlight-color:transparent; }
html[data-theme="dark"]{ color-scheme:dark; }
body.hian{
  margin:0; direction:rtl; overflow-x:clip;
  background:var(--bg); background-image:var(--bg-tint); background-attachment:fixed;
  color:var(--text);
  font-family:"Assistant","Heebo",system-ui,-apple-system,"Segoe UI","Noto Sans Hebrew",Arial,sans-serif;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
body.hian a{ text-decoration:none; color:var(--brand-strong); }
body.hian a.btn{ color:var(--bs-btn-color); }
body.hian a.btn:hover{ color:var(--bs-btn-hover-color); }
body.hian h1,body.hian h2,body.hian h3,body.hian h4,body.hian h5,body.hian h6,.h-title,.h-num{
  font-family:"Rubik","Assistant",system-ui,sans-serif; color:var(--ink);
}
.h-num{ font-variant-numeric:tabular-nums; }
body.hian :focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:6px; }
::selection{ background:var(--brand-200); color:var(--ink); }

/* 5. Shell: topbar + rail + content */
.h-shell{
  display:grid; grid-template-columns:var(--rail-w) 1fr; grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"topbar topbar" "side main"; min-height:100vh; min-height:100dvh;
}
.h-topbar{
  grid-area:topbar; position:sticky; top:0; z-index:1030;
  display:flex; align-items:center; gap:.75rem; height:var(--topbar-h); padding:0 1rem;
  background:var(--topbar-bg); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.h-brand{ display:flex; align-items:center; gap:.6rem; flex:none; }
.h-brand img{ height:46px; width:auto; display:block; }
:root[data-theme="dark"] .h-brand img{ filter:brightness(1.15) saturate(1.1); background:#fff; border-radius:10px; padding:2px 6px; }

.h-chip{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:.35rem .95rem; border-radius:var(--r-pill); font-weight:800; font-size:.95rem;
  border:1.5px solid var(--border-2); background:var(--surface); color:var(--text); white-space:nowrap;
}
.h-chip i{ font-size:1.15rem; }
.h-chip .h-num{ font-size:1.1rem; }
.h-chip.ok{ background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,transparent); }
.h-chip.danger{ background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 30%,transparent); }
.h-chip.muted{ color:var(--text-2); }
.h-dot{ width:10px; height:10px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent); }
.h-chip.ok .h-dot{ animation:hPulse 2s var(--ease) infinite; }
@keyframes hPulse{ 0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent);} 50%{ box-shadow:0 0 0 7px color-mix(in srgb,currentColor 6%,transparent);} }

.h-iconbtn{
  width:var(--tap); height:var(--tap); border:0; background:transparent; border-radius:14px;
  display:grid; place-items:center; color:var(--text-2); font-size:1.35rem; cursor:pointer;
  transition:background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.h-iconbtn:hover{ background:var(--brand-soft); color:var(--brand-strong); }
.h-iconbtn:active{ transform:scale(.92); }
.h-gps{ color:var(--text-3); }
.h-gps.on{ color:var(--ok); }
.h-gps.off{ color:var(--danger); }

.h-avatar{
  width:48px; height:48px; border-radius:50%; background:var(--grad); color:#fff; overflow:hidden;
  display:grid; place-items:center; font-weight:800; font-size:1.15rem; font-family:"Rubik",sans-serif;
  cursor:pointer; user-select:none; box-shadow:var(--shadow-brand); border:2px solid var(--surface);
}
.h-avatar img{ width:100%; height:100%; object-fit:cover; }

/* rail (landscape) */
.h-side{
  grid-area:side; position:sticky; top:var(--topbar-h); align-self:start;
  height:calc(100dvh - var(--topbar-h)); overflow-y:auto; overflow-x:hidden;
  background:var(--side-grad); color:var(--side-text); border-inline-end:1px solid var(--side-border);
  display:flex; flex-direction:column; gap:6px; padding:.75rem .6rem 1rem; scrollbar-width:none;
}
.h-side-nav{ display:flex; flex-direction:column; gap:6px; }
.h-side-nav .h-tab{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  min-height:78px; padding:.55rem .3rem; border-radius:16px; color:var(--side-text);
  font-weight:700; font-size:.82rem; line-height:1.15; text-align:center;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.h-side-nav .h-tab i{ font-size:1.6rem; color:#8794a8; transition:color var(--t) var(--ease), transform var(--t) var(--spring); }
.h-side-nav .h-tab:hover{ background:var(--side-hover); color:#fff; }
.h-side-nav .h-tab:active i{ transform:scale(.9); }
.h-side-nav .h-tab.active{ background:linear-gradient(160deg,var(--brand-600),var(--brand-500)); color:#fff; box-shadow:0 8px 18px -8px rgba(58,111,194,.8); }
.h-side-nav .h-tab.active i{ color:#fff; }
.h-side-nav .h-tab.waze i{ color:#33ccff; }
.h-side-nav .h-tab.live{ background:rgba(220,38,38,.16); color:#fff; }
.h-side-nav .h-tab.live i{ color:#ff8a8a; }
.h-tab-badge{
  position:absolute; top:6px; inset-inline-end:10px; min-width:22px; height:22px; padding:0 6px; border-radius:99px;
  background:var(--danger); color:#fff; font-size:.75rem; font-weight:800; display:grid; place-items:center;
  border:2px solid var(--graphite-800);
}
.h-side-spacer{ flex:1; }

/* content */
.h-main{ grid-area:main; min-width:0; display:flex; flex-direction:column; }
.h-content{ flex:1; padding:1.25rem 1.5rem 2rem; width:100%; max-width:1400px; margin-inline:auto; animation:hFadeUp .4s var(--ease-out) both; }
/* opacity only: a transform here would make .h-content the containing block of every
   position:fixed modal/offcanvas inside the pages */
@keyframes hFadeUp{ from{ opacity:0; } to{ opacity:1; } }
.h-statusline{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.5rem;
  padding:.6rem 1.5rem 1rem; color:var(--text-3); font-size:.78rem; max-width:1400px; width:100%; margin-inline:auto;
}
.h-statusline a{ color:var(--text-2)!important; font-weight:700; }

/* portrait / narrow: rail becomes a bottom tab bar */
@media (max-width:991.98px), (orientation:portrait) and (max-width:1100px){
  .h-shell{ grid-template-columns:1fr; grid-template-areas:"topbar" "main"; }
  .h-side{
    position:fixed; top:auto; bottom:0; inset-inline:0; z-index:1035; height:auto;
    flex-direction:row; padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); gap:.4rem;
    border-inline-end:0; border-top:1px solid var(--side-border); box-shadow:0 -10px 30px rgba(0,0,0,.18);
  }
  .h-side-nav{ flex-direction:row; flex:1; justify-content:space-around; gap:.4rem; }
  .h-side-nav .h-tab{ flex:1; min-height:var(--tabbar-h); max-width:160px; }
  .h-side-spacer, .h-hide-portrait{ display:none!important; }
  .h-main{ padding-bottom:calc(var(--tabbar-h) + 1.4rem); }
  body.hian #NagishLiTrigger{ bottom:calc(var(--tabbar-h) + 22px)!important; }
}
@media (max-width:640px){
  .h-content{ padding:1rem .85rem 1.6rem; }
  .h-hide-sm{ display:none!important; }
  .h-brand img{ height:38px; }
}

/* accessibility widget (nagishli): bottom-left, clear of the rail / tab bar */
#NagishLiTrigger{ left:14px!important; right:auto!important; bottom:14px!important; }

/* 6. Page title */
.h-page-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; margin-bottom:1.1rem; }
.h-page-title{ font-size:1.65rem; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.2; }
.h-page-title small{ display:block; font-family:"Assistant",sans-serif; font-size:.95rem; font-weight:600; color:var(--text-2); letter-spacing:0; margin-top:.2rem; }
.h-page-head .h-actions{ margin-inline-start:auto; display:flex; gap:.6rem; flex-wrap:wrap; }
.h-section-title{ display:flex; align-items:center; gap:.55rem; font-size:1.15rem; font-weight:800; margin:1.5rem 0 .8rem; }
.h-section-title i{ color:var(--brand); }
.h-count{ display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 8px; border-radius:99px; background:var(--brand-soft); color:var(--brand-strong); font-size:.85rem; font-weight:800; }

/* 7. Cards */
.hian .card{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); color:var(--text); }
.hian .card-header{ background:transparent; border-bottom:1px solid var(--border); font-weight:800; font-family:"Rubik",sans-serif; color:var(--ink); padding:1rem 1.2rem; font-size:1.05rem; }
.hian .card-body{ padding:1.2rem; }
.hian .card-footer{ background:var(--surface-inset); border-top:1px solid var(--border); }

/* crew tiles */
.h-crew{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; }
.h-tile{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:1rem 1.1rem; display:flex; align-items:center; gap:.9rem; min-height:92px; }
.h-tile::before{ content:""; position:absolute; inset-inline:0; top:0; height:3px; background:var(--k,var(--brand)); }
.h-tile-icon{ width:52px; height:52px; border-radius:15px; background:var(--k-soft,var(--brand-soft)); color:var(--k,var(--brand)); display:grid; place-items:center; font-size:1.55rem; flex:none; }
.h-tile-label{ font-size:.85rem; font-weight:700; color:var(--text-2); }
.h-tile-value{ font-family:"Rubik",sans-serif; font-weight:700; font-size:1.3rem; color:var(--ink); line-height:1.2; overflow-wrap:anywhere; }
.h-tile-value.empty{ color:var(--text-3); font-weight:500; font-size:1.05rem; }
.h-tile.car{ --k:var(--accent); --k-soft:var(--accent-soft); }
.h-tile.car .h-tile-value{ font-size:1.9rem; letter-spacing:.02em; }
@media (max-width:900px){ .h-crew{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* big action cards (checks / open shift) */
.h-actions-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.9rem; }
.h-action{
  display:flex; align-items:center; gap:1rem; min-height:96px; padding:1rem 1.25rem; width:100%;
  border-radius:var(--r-lg); border:1.5px solid var(--border-2); background:var(--surface); color:var(--ink)!important;
  font:inherit; font-size:1.2rem; font-weight:800; text-align:start; box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.h-action:hover{ border-color:var(--brand); box-shadow:var(--shadow); }
.h-action:active{ transform:scale(.985); }
.h-action-icon{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:1.8rem; background:var(--brand-soft); color:var(--brand); flex:none; }
.h-action small{ display:block; font-size:.9rem; font-weight:600; color:var(--text-2); margin-top:.15rem; }
.h-action .bi-chevron-left{ margin-inline-start:auto; color:var(--text-3); font-size:1.3rem; }
.h-action.warn{ border-color:color-mix(in srgb,var(--warn) 35%,transparent); background:linear-gradient(0deg,var(--warn-soft),var(--warn-soft)),var(--surface); }
.h-action.warn .h-action-icon{ background:var(--surface); color:var(--warn); }
.h-action.primary{ border:0; background:var(--grad); color:#fff!important; box-shadow:var(--shadow-brand); }
.h-action.primary small{ color:rgba(255,255,255,.85); }
.h-action.primary .h-action-icon{ background:rgba(255,255,255,.18); color:#fff; }
.h-action.primary .bi-chevron-left{ color:rgba(255,255,255,.8); }

/* call cards */
.h-calls{ display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:1rem; }
@media (max-width:900px){ .h-calls{ grid-template-columns:1fr; } }
.h-call{
  position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.h-call::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:6px; background:var(--c,var(--brand)); }
.h-call.urgent{ --c:var(--danger); }
.h-call.planned{ --c:var(--brand-500); }
.h-call.done{ --c:var(--ok); }
.h-call:active{ transform:scale(.993); }
.h-call-main{ display:block; padding:1rem 1.25rem .75rem 1.1rem; padding-inline-start:1.5rem; color:inherit!important; }
.h-call-top{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.45rem; }
.h-call-id{ font-family:"Rubik",sans-serif; font-weight:800; font-size:1.25rem; color:var(--ink); }
.h-call-time{ margin-inline-start:auto; color:var(--text-2); font-weight:700; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:.3rem; }
.h-call-who{ font-size:1.2rem; font-weight:800; color:var(--ink); line-height:1.3; }
.h-call-addr{ display:flex; align-items:flex-start; gap:.4rem; color:var(--text-2); font-weight:600; margin-top:.2rem; }
.h-call-addr i{ color:var(--brand); margin-top:.15rem; }
.h-call-acts{ display:flex; gap:.6rem; padding:0 1.25rem 1rem; padding-inline-start:1.5rem; }
.h-call-acts .btn{ flex:1; min-height:56px; justify-content:center; font-size:1.05rem; }
.h-call.done .h-call-acts{ display:none; }
.h-empty{ text-align:center; padding:2.2rem 1rem; color:var(--text-2); background:var(--surface); border:1.5px dashed var(--border-2); border-radius:var(--r-xl); }
.h-empty i{ font-size:2.4rem; color:var(--text-3); display:block; margin-bottom:.4rem; }
.h-empty b{ display:block; color:var(--ink); font-size:1.15rem; }

/* badges */
.h-badge{ display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .7rem; border-radius:var(--r-pill); font-size:.85rem; font-weight:800; line-height:1.5; border:1px solid transparent; }
.h-badge.urgent{ background:var(--danger-soft); color:var(--danger); }
.h-badge.planned{ background:var(--brand-soft); color:var(--brand-strong); }
.h-badge.ok{ background:var(--ok-soft); color:var(--ok); }
.h-badge.warn{ background:var(--warn-soft); color:var(--warn); }
.h-badge.neutral{ background:var(--neutral-soft); color:var(--neutral); }

/* 8. Call screen (krea.php) */
.h-krea-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-bottom:1rem; }
.h-krea-head .h-page-title{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.h-krea-head .h-actions .btn{ min-height:var(--tap-lg); font-size:1.1rem; padding-inline:1.4rem; }
.h-back{ width:var(--tap-lg); height:var(--tap-lg); border-radius:18px; border:1.5px solid var(--border-2); background:var(--surface); display:grid; place-items:center; font-size:1.6rem; color:var(--text)!important; flex:none; }

/* tabs (Bootstrap nav-pills) as large segmented control */
.h-tabs.nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; padding:.4rem; background:var(--surface-2); border:1px solid var(--border); border-radius:20px; margin-bottom:1.1rem; }
.h-tabs .nav-item{ min-width:0; }
.h-tabs .nav-link{
  width:100%; min-height:68px; border:0; border-radius:15px; background:transparent; color:var(--text-2);
  display:flex; align-items:center; justify-content:center; gap:.55rem; font-weight:800; font-size:1.08rem;
  transition:background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.h-tabs .nav-link i{ font-size:1.5rem; }
.h-tabs.nav-pills .nav-link.active{ background:var(--surface); color:var(--brand-strong); box-shadow:var(--shadow); }
.h-tabs.nav-pills .nav-link.active i{ color:var(--brand); }
@media (max-width:700px){ .h-tabs .nav-link{ flex-direction:column; gap:.15rem; font-size:.9rem; } }

/* stepper */
.h-steps{ display:grid; grid-template-columns:repeat(6,1fr); gap:.35rem; margin:0 0 1.1rem; counter-reset:s; }
.h-step{ position:relative; text-align:center; font-size:.85rem; font-weight:700; color:var(--text-3); padding-top:2.6rem; }
.h-step::before{ counter-increment:s; content:counter(s); position:absolute; top:0; left:50%; transform:translateX(-50%); width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center; background:var(--surface-3); color:var(--text-3); font-weight:800; font-family:"Rubik",sans-serif; z-index:1; border:2px solid var(--surface); }
.h-step::after{ content:""; position:absolute; top:1.02rem; left:50%; width:100%; height:3px; background:var(--surface-3); }
.h-step:first-child::after{ display:none; }
.h-step.done{ color:var(--text-2); }
.h-step.done::before{ content:"✓"; background:var(--ok); color:#fff; }
.h-step.done::after, .h-step.now::after{ background:var(--ok); }
.h-step.now{ color:var(--ink); }
.h-step.now::before{ background:var(--brand); color:#fff; box-shadow:0 0 0 5px var(--brand-ring); }

/* status action area (#kreastatus, html comes from funct.php kreastatus()/ajax3.php) */
#kreastatus{ display:flex; flex-wrap:wrap; justify-content:center; gap:.2rem 1rem; margin-bottom:.6rem; }
#kreastatus > .col-lg-12, #kreastatus > .col-lg-6{ flex:1 1 320px; max-width:760px; padding:0; }
#kreastatus p{ margin:0; text-align:center; }
#kreastatus .btn{
  width:100%!important; min-width:0!important; min-height:96px; margin:.45rem 0!important; border-radius:22px!important;
  border:0!important; justify-content:center; box-shadow:var(--shadow-md);
  background:var(--grad)!important; color:#fff!important;
}
#kreastatus .btn h3, #kreastatus .btn h3 span{ margin:0; font-size:1.85rem; font-weight:800; color:#fff!important; letter-spacing:-.01em; }
#kreastatus .btn:active{ transform:scale(.985); }
#kreastatus .btn[name="hagatimeb"]{ background:linear-gradient(135deg,#0e7490,#0891b2)!important; }
#kreastatus .btn.penoitimeb{ background:linear-gradient(135deg,var(--brand-700),var(--brand-500))!important; }
#kreastatus .btn.nopenoitimeb{ background:linear-gradient(135deg,var(--accent-600),var(--accent-500))!important; }
#kreastatus .btn[name="yaadtimeb"], #kreastatus .btn[name="readytimeb"]{ background:linear-gradient(135deg,#0b7a43,#16a34a)!important; }
#kreastatus .btn[name="finishtimeb"]{ background:linear-gradient(135deg,#b91c1c,#ef4444)!important; }
#kreastatus .btn[name="tahanatimeb"]{ background:linear-gradient(135deg,var(--graphite-600),var(--graphite-500))!important; }
#kreastatus a .btn{ background:var(--surface)!important; color:var(--brand-strong)!important; border:1.5px solid var(--border-2)!important; box-shadow:var(--shadow-sm); min-height:72px; }
#kreastatus a .btn h3, #kreastatus a .btn h3 span{ color:var(--brand-strong)!important; font-size:1.3rem; }
/* patients shown as tiles inside the status area (status 2) */
#kreastatus .btn[type="button"]:not(.penoitimeb):not(.nopenoitimeb){
  width:200px!important; height:auto!important; min-height:120px; display:inline-flex!important; margin:.45rem!important;
  background:var(--surface)!important; color:var(--ink)!important; border:2px solid var(--brand-200)!important; box-shadow:var(--shadow-sm);
}
#kreastatus .btn[type="button"]:not(.penoitimeb):not(.nopenoitimeb) h3{ color:var(--ink)!important; font-size:1.2rem; }
#kreastatus .btn[data-bs-target="#offcanvasAddUser"]{ border-style:dashed!important; border-color:var(--brand)!important; }
#kreastatus .btn[data-bs-target="#offcanvasAddUser"] h3{ color:var(--brand-strong)!important; }
#kreastatus .alert{ border-radius:var(--r-lg); }
#kreastatus form{ border-color:var(--brand-300)!important; border-radius:var(--r-lg)!important; }

/* call detail grid */
.h-info{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.h-info.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.h-info .full{ grid-column:1/-1; }
@media (max-width:820px){ .h-info{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.h-field{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:.75rem 1rem; min-height:76px; }
.h-field small{ display:flex; align-items:center; gap:.4rem; color:var(--text-2); font-weight:700; font-size:.85rem; margin-bottom:.15rem; }
.h-field small i{ color:var(--brand); font-size:1rem; }
.h-field b{ display:block; font-size:1.15rem; color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.h-field b.empty{ color:var(--text-3); font-weight:500; }
.h-field a.tel{ display:inline-flex; align-items:center; gap:.4rem; font-size:1.2rem; font-weight:800; direction:ltr; }
.h-field.tap{ cursor:pointer; border-color:var(--brand-200); }
.h-field.tap:hover{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ring); }
.h-group{ background:var(--surface-inset); border:1px solid var(--border); border-radius:var(--r-xl); padding:1rem; margin-bottom:.9rem; }
.h-group-title{ font-size:.95rem; font-weight:800; color:var(--text-2); margin:0 .2rem .7rem; display:flex; align-items:center; gap:.45rem; }
.h-group-title i{ color:var(--brand); }
.h-req{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:0; }
.h-req li{ background:var(--brand-soft); color:var(--brand-strong); border-radius:var(--r-pill); padding:.3rem .85rem; font-weight:700; }
.h-note{ white-space:pre-line; font-size:1.1rem; color:var(--ink); }

/* 9. Forms (touch sizes) */
.hian .form-control, .hian .form-select{
  border-radius:14px; border:1.5px solid var(--border-2); color:var(--text); background-color:var(--surface);
  padding:.6rem .95rem; font-size:1.05rem; min-height:var(--tap);
}
.hian textarea.form-control{ min-height:110px; }
.hian .form-control::placeholder{ color:var(--text-3); }
.hian .form-control:focus, .hian .form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ring); background-color:var(--surface); color:var(--text); }
.hian .form-control-lg, .hian .form-select-lg{ min-height:58px; font-size:1.15rem; }
.hian .form-label, .hian label{ font-weight:700; color:var(--text-2); }
.hian .form-select{ padding-inline-start:2.4rem; background-position:left .85rem center; }
.hian .form-check-input{ width:1.6em; height:1.6em; border:1.5px solid var(--border-strong); background-color:var(--surface); cursor:pointer; }
.hian .form-check-input:checked{ background-color:var(--brand); border-color:var(--brand); }
.hian .form-check-label{ padding-inline-start:.35rem; padding-top:.2rem; }
.hian .input-group-text{ background:var(--surface-2); border:1.5px solid var(--border-2); color:var(--text-2); border-radius:14px; }

/* 10. Buttons */
.hian .btn{
  border-radius:14px; font-weight:800; font-size:1rem; padding:.6rem 1.15rem; min-height:var(--tap);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.hian .btn:active{ transform:scale(.98); }
.hian .btn-sm{ min-height:40px; padding:.4rem .8rem; font-size:.92rem; border-radius:12px; }
.hian .btn-lg, .hian .btn-xl{ min-height:var(--tap-lg); padding:.75rem 1.5rem; font-size:1.15rem; border-radius:16px; }
.hian .btn-primary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-color:var(--brand-contrast);
  --bs-btn-hover-bg:var(--brand-strong); --bs-btn-hover-border-color:var(--brand-strong); --bs-btn-hover-color:var(--brand-contrast);
  --bs-btn-active-bg:var(--brand-strong); --bs-btn-active-border-color:var(--brand-strong); --bs-btn-active-color:var(--brand-contrast);
  --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand);
  box-shadow:var(--shadow-brand);
}
.hian .btn-outline-primary{ --bs-btn-color:var(--brand-strong); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand); --bs-btn-hover-color:#fff; border-width:1.5px; }
.hian .btn-outline-secondary{ --bs-btn-color:var(--text-2); --bs-btn-border-color:var(--border-2); --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-border-color:var(--border-strong); --bs-btn-hover-color:var(--text); border-width:1.5px; }
.hian .btn-outline-danger{ --bs-btn-color:var(--danger); --bs-btn-border-color:color-mix(in srgb,var(--danger) 55%,transparent); --bs-btn-hover-bg:var(--danger); --bs-btn-hover-border-color:var(--danger); --bs-btn-hover-color:#fff; border-width:1.5px; }
.hian .btn-success{ --bs-btn-bg:var(--ok); --bs-btn-border-color:var(--ok); }
.hian .btn-danger{ --bs-btn-bg:var(--danger); --bs-btn-border-color:var(--danger); }
.hian .btn-secondary, .hian .btn-default, .hian .btn-light{ --bs-btn-bg:var(--surface-2); --bs-btn-border-color:var(--border-2); --bs-btn-color:var(--text); --bs-btn-hover-bg:var(--surface-3); --bs-btn-hover-color:var(--text); }
.h-btn-tel{ background:var(--ok-soft)!important; color:var(--ok)!important; border:1.5px solid color-mix(in srgb,var(--ok) 30%,transparent)!important; }
.h-btn-nav{ background:#e6f7fd!important; color:#0b7fae!important; border:1.5px solid #b7e6f7!important; }
:root[data-theme="dark"] .h-btn-nav{ background:rgba(51,204,255,.12)!important; color:#67d8ff!important; border-color:rgba(51,204,255,.3)!important; }

/* 11. Tables */
.hian .table{ --bs-table-color:var(--text); --bs-table-bg:transparent; --bs-table-border-color:var(--border); margin-bottom:0; font-size:1rem; }
.hian .table thead th{ background:var(--surface-2); color:var(--text-2); font-size:.82rem; font-weight:800; border-bottom:1px solid var(--border); white-space:nowrap; padding:.8rem 1rem; }
.hian .table tbody td, .hian .table tbody th{ padding:.85rem 1rem; vertical-align:middle; border-bottom:1px solid var(--border); }
.hian .table> :not(caption)>*>*{ background-color:transparent; }
.hian .table-striped>tbody>tr:nth-of-type(odd)>*{ --bs-table-accent-bg:var(--surface-inset); }

/* 12. Alerts, dropdowns, modals, offcanvas */
.hian .alert{ border-radius:var(--r); border:1px solid transparent; font-size:1rem; padding:.9rem 1.1rem; }
.hian .alert-success{ background:var(--ok-soft); color:var(--ok); }
.hian .alert-danger{ background:var(--danger-soft); color:var(--danger); }
.hian .alert-warning{ background:var(--warn-soft); color:var(--warn); }
.hian .alert-info{ background:var(--info-soft); color:var(--info); }
.hian .dropdown-menu{ border:1px solid var(--border); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-lg); padding:.45rem; color:var(--text); min-width:240px; }
.hian .dropdown-item{ border-radius:10px; padding:.7rem .8rem; color:var(--text); font-weight:700; display:flex; align-items:center; gap:.6rem; min-height:var(--tap); }
.hian .dropdown-item i{ color:var(--text-3); font-size:1.15rem; }
.hian .dropdown-item:hover{ background:var(--brand-soft); color:var(--brand-strong); }
.hian .dropdown-item.text-danger:hover{ background:var(--danger-soft); }
.hian .dropdown-divider{ border-color:var(--border); }
.hian .modal-content{ background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); }
.hian .modal-header, .hian .modal-footer{ border-color:var(--border); padding:1rem 1.25rem; }
.hian .modal-title{ font-family:"Rubik",sans-serif; font-weight:800; color:var(--ink); }
.hian .modal-body{ padding:1.25rem; }
.hian .modal-header .close{ border:0; background:var(--surface-2); width:44px; height:44px; border-radius:12px; font-size:1.6rem; line-height:1; margin-inline-start:auto; color:var(--text-2); }
.hian .btn-close{ width:1.4em; height:1.4em; padding:.6rem; }
:root[data-theme="dark"] .hian .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); }
.hian .offcanvas{ background:var(--surface); color:var(--text); }
.hian .offcanvas-header{ border-bottom:1px solid var(--border); padding:1rem 1.25rem; min-height:72px; }
.hian .offcanvas-title{ font-family:"Rubik",sans-serif; font-weight:800; font-size:1.25rem; color:var(--ink); }
.modal-backdrop, .offcanvas-backdrop{ background:var(--scrim); }
.modal-backdrop.show, .offcanvas-backdrop.show{ opacity:1; }
.hian hr{ border-color:var(--border); opacity:1; }
.hian .text-muted{ color:var(--text-2)!important; }

/* 13. 3rd-party widgets */
.hian .select2-container .select2-selection--single{ height:var(--tap); border:1.5px solid var(--border-2); border-radius:14px; background:var(--surface); }
.hian .select2-container .select2-selection--single .select2-selection__rendered{ line-height:45px; color:var(--text); padding-inline:1rem 2rem; }
.hian .select2-container .select2-selection--single .select2-selection__arrow{ height:46px; }
.select2-dropdown{ border-color:var(--border-2); border-radius:12px; overflow:hidden; background:var(--surface); color:var(--text); }
.select2-results__option{ padding:.7rem 1rem; font-size:1.02rem; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{ background:var(--brand); }
.select2-search--dropdown .select2-search__field{ min-height:44px; border-radius:10px; }
.hian .choices__inner{ min-height:var(--tap); border-radius:14px; border:1.5px solid var(--border-2); background:var(--surface); font-size:1.02rem; }
.hian .choices__list--dropdown .choices__item{ padding:.7rem 1rem; font-size:1.02rem; }
.hian .choices__list--multiple .choices__item{ background:var(--brand); border-color:var(--brand-700); border-radius:99px; font-size:.95rem; }
.hian .choices[data-type*=select-multiple] .choices__button{ margin:0 4px 0 0; border-right:1px solid rgba(255,255,255,.5); border-left:none; }
.swal2-popup{ border-radius:24px!important; font-family:"Assistant",sans-serif!important; padding:1.6rem 1.4rem!important; }
.swal2-title{ font-family:"Rubik",sans-serif!important; }
.swal2-styled{ min-height:56px; min-width:140px; border-radius:14px!important; font-size:1.1rem!important; font-weight:800!important; }
.swal2-styled.swal2-confirm{ background:var(--brand)!important; }
:root[data-theme="dark"] .swal2-popup{ background:var(--surface)!important; color:var(--text)!important; }
:root[data-theme="dark"] .swal2-title, :root[data-theme="dark"] .swal2-html-container{ color:var(--text)!important; }
div.dt-buttons .dt-button{ border-radius:10px!important; border-color:var(--brand)!important; background:var(--brand)!important; color:#fff!important; }

/* 14. Compatibility: classes from the old frest/Sneat template that pages still use */
.content-wrapper{ display:block; }
.container-p-y{ padding-top:0!important; padding-bottom:0!important; }
.container-xxl{ max-width:none; padding-inline:0; }
.layout-menu, .layout-overlay, .drag-target, .content-backdrop{ display:none!important; }
.bg-label-primary{ background:var(--brand-soft)!important; color:var(--brand-strong)!important; }
.bg-label-secondary{ background:var(--neutral-soft)!important; color:var(--neutral)!important; }
.bg-label-success{ background:var(--ok-soft)!important; color:var(--ok)!important; }
.bg-label-danger{ background:var(--danger-soft)!important; color:var(--danger)!important; }
.bg-label-warning{ background:var(--warn-soft)!important; color:var(--warn)!important; }
.bg-label-info{ background:var(--info-soft)!important; color:var(--info)!important; }
.bg-label-dark{ background:var(--surface-3)!important; color:var(--text)!important; }
.btn-label-primary, .btn-label-linkedin{ background:var(--brand-soft); color:var(--brand-strong); border:0; }
.btn-label-success{ background:var(--ok-soft); color:var(--ok); border:0; }
.btn-label-danger{ background:var(--danger-soft); color:var(--danger); border:0; }
.btn-label-warning{ background:var(--warn-soft); color:var(--warn); border:0; }
.btn-label-info{ background:var(--info-soft); color:var(--info); border:0; }
.btn-label-secondary, .btn-label-dark{ background:var(--neutral-soft); color:var(--neutral); border:0; }
.bg-gradient-danger{ background:linear-gradient(135deg,#b91c1c,#ef4444)!important; color:#fff!important; }
.bg-gradient-info{ background:linear-gradient(135deg,#0e7490,#0891b2)!important; color:#fff!important; }
.bg-gradient-success{ background:linear-gradient(135deg,#0b7a43,#16a34a)!important; color:#fff!important; }
.btn-icon{ width:var(--tap); padding:0!important; }
.avatar{ position:relative; width:2.5rem; height:2.5rem; }
.avatar-initial{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.avatar img{ width:100%; height:100%; }
.tf-icons{ font-size:1.15em; }
.btn-block{ display:flex; width:100%; }
.text-primary{ color:var(--brand)!important; }
.bg-primary{ background-color:var(--brand)!important; }
.badge.bg-primary{ background:var(--brand)!important; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background:var(--brand); }
.page-item.active .page-link{ background:var(--brand); border-color:var(--brand); }

@media (prefers-reduced-motion:reduce){
  body.hian *, body.hian *::before, body.hian *::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* 15. Login (index.php) — the Sigma ERP auth screen in HIAN colours */
.h-auth{
  min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:1.5rem;
  background:
    radial-gradient(1100px 620px at 85% -12%, rgba(58,111,194,.35), transparent 58%),
    radial-gradient(900px 520px at 8% 112%, rgba(239,125,50,.22), transparent 55%),
    linear-gradient(160deg,var(--graphite-800) 0%,var(--graphite-900) 60%,var(--graphite-950) 100%);
  position:relative; overflow:hidden;
}
.h-auth::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000, transparent 72%); mask-image:radial-gradient(circle at 50% 40%, #000, transparent 72%);
}
.h-auth-card{
  position:relative; z-index:1; width:100%; max-width:480px;
  background:#fff;
  border:1px solid rgba(255,255,255,.6); border-radius:28px; padding:2.4rem 2.2rem 1.6rem;
  box-shadow:0 40px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.7); color:#121a26;
  animation:hAuthIn .5s var(--ease-out) both;
}
@keyframes hAuthIn{ from{ opacity:0; transform:translateY(16px) scale(.98);} to{ opacity:1; transform:none; } }
.h-auth-logo{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:1.6rem; text-align:center; }
.h-auth-logo img{ width:min(280px,80%); height:auto; }
.h-auth-sub{ color:#55627a; font-weight:700; }
.h-auth-label{ display:block; font-weight:800; font-size:.95rem; color:#55627a; margin:.2rem 0 .5rem; }
.h-auth-fld{
  width:100%; min-height:64px; border:1.5px solid #d3dbe7; border-radius:16px; background:#f6f8fb;
  padding:.8rem 1rem; font-size:1.3rem; font-weight:700; text-align:center; color:#0a111c;
}
.h-auth-fld:focus{ outline:none; border-color:var(--brand-600); background:#fff; box-shadow:0 0 0 4px rgba(44,90,166,.28); }
.h-otp{ display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem; }
.h-otp input{
  width:100%; height:70px; border:1.5px solid #d3dbe7; border-radius:16px; background:#f6f8fb;
  text-align:center; font-family:"Rubik",sans-serif; font-size:2rem; font-weight:800; color:#0a111c;
}
.h-otp input:focus{ outline:none; border-color:var(--brand-600); background:#fff; box-shadow:0 0 0 4px rgba(44,90,166,.28); }
.h-auth-submit{
  width:100%; min-height:64px; margin-top:1.15rem; border:0; border-radius:16px; cursor:pointer;
  background:linear-gradient(135deg,var(--brand-700),var(--brand-500)); color:#fff;
  font-weight:800; font-size:1.2rem; display:flex; align-items:center; justify-content:center; gap:.6rem;
  box-shadow:0 12px 28px rgba(44,90,166,.42); transition:transform var(--t) var(--spring);
}
.h-auth-submit:active{ transform:scale(.98); }
.h-auth-foot{ margin:1.1rem 0 0; text-align:center; font-size:.85rem; color:#8a95a8; }
.h-auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem; }
.h-auth-row form{ display:contents; }
.h-auth-alt{
  width:100%; min-height:56px; border:1.5px solid #c9d4e5; border-radius:16px; background:#fff; cursor:pointer;
  color:var(--brand-700); font-weight:800; font-size:1.05rem; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:.45rem; transition:transform var(--t) var(--spring), background var(--t);
}
.h-auth-alt:hover{ background:#eef4fc; color:var(--brand-700); }
.h-auth-alt:active{ transform:scale(.98); }
.h-auth-alt:disabled{ cursor:not-allowed; color:#9aa5b8; background:#f3f5f9; border-color:#e1e6ee; }
#hResendT{ font-family:"Rubik",sans-serif; font-variant-numeric:tabular-nums; }