/* ============================================================
   VEONA — Application shell + clinical UI kit
   Used by every module screen under modules/<slug>/.
   Load AFTER tokens.css. Pair with app-shell.js.
   ============================================================ */

body.veona-app { background: var(--cloud); margin: 0; font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---------- SHELL GRID ---------- */
.app-shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.app-col { display: flex; flex-direction: column; min-width: 0; }

/* ---------- LEFT RAIL ---------- */
.app-rail { background: var(--ink); color: #cfe0e0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.app-rail::-webkit-scrollbar { width: 8px; } .app-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
.rail-brand { display: flex; align-items: center; gap: 9px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; background: var(--ink); z-index: 2; }
.rail-brand .wm { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: #fff; }
.rail-edition { margin-left: auto; font-size: 10px; font-family: var(--font-mono); color: #5d7e80; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-pill); padding: 3px 8px; }
.rail-nav { padding: 12px 12px 24px; flex: 1; }
.rail-group { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #5d7e80; font-weight: 600; margin: 16px 12px 6px; }
.rail-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm); color: #9fbabb; font-size: var(--t-sm); font-weight: 500; margin-bottom: 1px; transition: background .15s, color .15s; cursor: pointer; }
.rail-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.rail-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.rail-link.active { background: var(--teal); color: #fff; }
.rail-link.active svg { opacity: 1; }

/* ---------- TOP BAR ---------- */
.app-top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.9); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-6); height: 60px; }
.app-search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 9px; background: var(--cloud); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 13px; color: var(--slate); }
.app-search input { border: none; background: none; outline: none; font-family: var(--font-body); font-size: var(--t-sm); color: var(--ink); width: 100%; }
.app-top .spacer { flex: 1; }
.sync-chip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); font-weight: 600; color: #0a7a4e; background: var(--green-100); padding: 6px 11px; border-radius: var(--r-pill); }
.sync-chip .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.top-facility { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.top-icon { width: 38px; height: 38px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--slate); cursor: pointer; }
.top-icon:hover { background: var(--cloud); color: var(--teal); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t-sm); }

/* ---------- MAIN ---------- */
.app-main { padding: var(--s-6) var(--s-8) var(--s-12); max-width: 1500px; width: 100%; }
.app-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-6); flex-wrap: wrap; }
.app-h1 { font-family: var(--font-display); font-size: var(--t-h2); letter-spacing: -0.02em; }
.app-sub { color: var(--slate); font-size: var(--t-sm); margin-top: 4px; }
.crumb { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate-400); margin-bottom: 8px; }
.app-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- PANELS / CARDS ---------- */
.grid { display: grid; gap: var(--s-4); }
.app-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.app-panel.tight { padding: var(--s-5); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.panel-head h3 { font-family: var(--font-display); font-size: var(--t-h3); }
.panel-head .ph-act { font-size: var(--t-sm); color: var(--teal); font-weight: 600; cursor: pointer; }

/* stat tiles */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.stat .k { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate-400); letter-spacing: 0.03em; }
.stat .v { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--ink); margin-top: 6px; line-height: 1; }
.stat .delta { font-size: var(--t-xs); margin-top: 8px; font-weight: 600; }
.stat .delta.up { color: #0a7a4e; } .stat .delta.down { color: #a82f2f; }
.stat .ico { float: right; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }

/* status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.pill .d { width: 6px; height: 6px; border-radius: 50%; }
.pill.green { background: var(--green-100); color: #0a7a4e; } .pill.green .d { background: var(--green); }
.pill.amber { background: var(--amber-100); color: #9a6c00; } .pill.amber .d { background: var(--amber); }
.pill.red { background: var(--red-100); color: #a82f2f; } .pill.red .d { background: var(--red); }
.pill.teal { background: var(--teal-050); color: var(--teal); } .pill.teal .d { background: var(--teal); }
.pill.indigo { background: var(--indigo-050); color: var(--indigo); } .pill.indigo .d { background: var(--indigo); }
.pill.slate { background: var(--cloud-200); color: var(--slate); } .pill.slate .d { background: var(--slate); }

/* tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate-400); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); color: var(--ink-700); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--cloud); }
.data-table .mono { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate); }
.data-table .name { font-weight: 600; color: var(--ink); }

/* tabs */
.app-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--s-6); flex-wrap: wrap; }
.app-tabs button { font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm); color: var(--slate); background: none; border: none; border-bottom: 2px solid transparent; padding: 12px 14px; cursor: pointer; transition: color .15s; }
.app-tabs button:hover { color: var(--ink); }
.app-tabs button.active { color: var(--teal); border-bottom-color: var(--teal); }

/* buttons (app) */
.abtn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm); padding: 9px 15px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: all .15s; line-height: 1; }
.abtn.primary { background: var(--teal); color: #fff; } .abtn.primary:hover { background: var(--teal-600); }
.abtn.ghost { background: #fff; color: var(--ink); border-color: var(--line); } .abtn.ghost:hover { border-color: var(--teal); color: var(--teal); }
.abtn.coral { background: var(--coral); color: #fff; } .abtn.coral:hover { background: var(--coral-600); }

/* misc helpers */
.row { display: flex; gap: var(--s-4); }
.between { justify-content: space-between; align-items: center; }
.muted { color: var(--slate); font-size: var(--t-sm); }
.mono { font-family: var(--font-mono); }
.divider { height: 1px; background: var(--line-soft); margin: var(--s-5) 0; }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 var(--s-6); }
.tl-item::before { content: ""; position: absolute; left: -23px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); }
.tl-item .tl-time { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate-400); }
.tl-item h4 { font-family: var(--font-display); font-size: var(--t-body); margin: 2px 0 4px; }
.tl-item p { font-size: var(--t-sm); color: var(--slate); }

.app-banner { background: linear-gradient(120deg, var(--ink), var(--indigo-600)); color:#fff; border-radius: var(--r-lg); padding: var(--s-6); display:flex; align-items:center; justify-content:space-between; gap: var(--s-6); flex-wrap:wrap; }
.app-banner h3 { font-family: var(--font-display); color:#fff; font-size: var(--t-h3); }
.app-banner p { color: #c9cdf0; font-size: var(--t-sm); margin-top: 4px; max-width: 60ch; }

/* responsive */
.rail-toggle { display: none; }
@media (max-width: 1080px){ .stat-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px){
  .app-shell { grid-template-columns: 1fr; }
  .app-rail { position: static; height: auto; }
  .rail-nav { display: none; }
  .app-rail.open .rail-nav { display: block; }
  .rail-toggle { display: flex; }
}

/* ============================================================
   INTERACTIVE KIT — forms, wizard, charts, filters, drawer, etc.
   ============================================================ */

/* module sub-navigation (per-module screen list) */
.work-layout { display: grid; grid-template-columns: 232px 1fr; gap: var(--s-6); align-items: start; }
.subnav { position: sticky; top: 76px; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3); max-height: calc(100vh - 96px); overflow-y:auto; }
.subnav .sg { font-size: 10px; letter-spacing:.12em; text-transform:uppercase; color: var(--slate-400); font-weight:600; margin: 12px 10px 4px; }
.subnav a { display:flex; align-items:center; justify-content:space-between; gap:8px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-700); font-size: var(--t-sm); font-weight:500; }
.subnav a:hover { background: var(--cloud); color: var(--teal); }
.subnav a.active { background: var(--teal-050); color: var(--teal); }
.subnav a .cnt { font-family: var(--font-mono); font-size: 10px; color: var(--slate-400); }
@media (max-width: 960px){ .work-layout { grid-template-columns: 1fr; } .subnav { position: static; max-height:none; display:flex; flex-wrap:wrap; gap:4px; } }

/* forms */
.form-section { margin-bottom: var(--s-8); }
.form-section .fs-head { display:flex; align-items:center; gap:10px; margin-bottom: var(--s-5); }
.form-section .fs-num { width:26px; height:26px; border-radius:50%; background: var(--teal-050); color: var(--teal); font-weight:700; font-size: var(--t-xs); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.form-section .fs-head h3 { font-family: var(--font-display); font-size: var(--t-h3); }
.form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s-4) var(--s-5); }
.form-grid.three { grid-template-columns: repeat(3,1fr); }
.fld { display:flex; flex-direction:column; gap:6px; }
.fld.col-2 { grid-column: span 2; } .fld.col-3 { grid-column: span 3; }
.fld label { font-size: var(--t-sm); font-weight:600; color: var(--ink); }
.fld label .req { color: var(--coral-600); }
.fld .hint { font-size: var(--t-xs); color: var(--slate-400); }
.fld input, .fld select, .fld textarea { font-family: var(--font-body); font-size: var(--t-body); padding: 10px 13px; border:1px solid var(--line); border-radius: var(--r-md); background:#fff; color: var(--ink); width:100%; }
.fld textarea { resize: vertical; min-height: 84px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline:none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-050); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--slate-400); }
.fld.error input, .fld.error select { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-100); }
.fld .err { font-size: var(--t-xs); color: var(--red); }
.fld .ok { font-size: var(--t-xs); color: #0a7a4e; }
.input-prefix { display:flex; align-items:center; border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; }
.input-prefix span { padding: 10px 12px; background: var(--cloud); color: var(--slate); font-size: var(--t-sm); border-right:1px solid var(--line); white-space:nowrap; }
.input-prefix input { border:none; box-shadow:none !important; }

/* segmented control */
.seg { display:inline-flex; background: var(--cloud); border:1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap:2px; }
.seg button { font-family: var(--font-body); font-weight:600; font-size: var(--t-sm); border:none; background:none; color: var(--slate); padding: 7px 14px; border-radius: 7px; cursor:pointer; transition: all .15s; }
.seg button.active { background:#fff; color: var(--teal); box-shadow: var(--sh-1); }

/* toggle */
.switch { position:relative; width:42px; height:24px; border-radius:999px; background: var(--line); border:none; cursor:pointer; transition: background .2s; flex-shrink:0; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow: var(--sh-1); transition: left .2s; }
.switch.on { background: var(--teal); } .switch.on::after { left:20px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap: var(--s-4); padding: 11px 0; border-bottom:1px solid var(--line-soft); }
.switch-row:last-child{border-bottom:none;}
.switch-row .sl b { font-size: var(--t-sm); color: var(--ink); display:block; } .switch-row .sl span { font-size: var(--t-xs); color: var(--slate); }

/* checkbox / radio chips */
.chk { display:inline-flex; align-items:center; gap:8px; font-size: var(--t-sm); color: var(--ink-700); cursor:pointer; }
.chk .box { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:#fff; }
.chk.on .box { background: var(--teal); border-color: var(--teal); }
.optchips { display:flex; flex-wrap:wrap; gap:8px; }
.optchips .oc { font-size: var(--t-sm); font-weight:500; padding: 8px 14px; border:1px solid var(--line); border-radius: var(--r-pill); cursor:pointer; color: var(--ink-700); background:#fff; }
.optchips .oc.on { background: var(--teal-050); border-color: var(--teal); color: var(--teal); }

/* stepper / wizard */
.stepper { display:flex; align-items:center; gap:0; margin-bottom: var(--s-8); flex-wrap:wrap; }
.stepper .step { display:flex; align-items:center; gap:10px; color: var(--slate-400); font-size: var(--t-sm); font-weight:600; }
.stepper .step .sc { width:30px; height:30px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size: var(--t-xs); background:#fff; }
.stepper .step.done .sc { background: var(--teal); border-color: var(--teal); color:#fff; }
.stepper .step.active { color: var(--ink); } .stepper .step.active .sc { border-color: var(--teal); color: var(--teal); }
.stepper .bar { flex:1; height:2px; background: var(--line); margin:0 12px; min-width:24px; }
.stepper .step.done + .bar { background: var(--teal); }
.wizard-actions { display:flex; justify-content:space-between; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-6); border-top:1px solid var(--line-soft); }
.wstep { display:none; } .wstep.active { display:block; animation: fadeUp .25s var(--ease); }
@keyframes fadeUp { from { opacity:.4; transform: translateY(6px);} to {opacity:1;transform:none;} }

/* filter bar */
.filter-bar { display:flex; align-items:center; gap: var(--s-3); flex-wrap:wrap; margin-bottom: var(--s-5); }
.filter-bar .fb-search { flex:1; min-width:200px; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 9px 13px; color: var(--slate); }
.filter-bar .fb-search input { border:none; outline:none; background:none; font-size: var(--t-sm); width:100%; color: var(--ink); font-family: var(--font-body); }
.filter-bar select { font-family: var(--font-body); font-size: var(--t-sm); padding: 9px 12px; border:1px solid var(--line); border-radius: var(--r-md); background:#fff; color: var(--ink); }
.fchip { font-size: var(--t-sm); font-weight:500; padding: 8px 13px; border:1px solid var(--line); border-radius: var(--r-pill); cursor:pointer; color: var(--ink-700); background:#fff; }
.fchip.on { background: var(--ink); color:#fff; border-color: var(--ink); }

/* pagination */
.pager { display:flex; align-items:center; justify-content:space-between; gap: var(--s-4); margin-top: var(--s-4); flex-wrap:wrap; }
.pager .pages { display:flex; gap:4px; }
.pager .pages button { min-width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius: var(--r-sm); font-family: var(--font-body); font-size: var(--t-sm); color: var(--ink-700); cursor:pointer; }
.pager .pages button.active { background: var(--teal); color:#fff; border-color: var(--teal); }

/* drawer / modal */
.scrim { position:fixed; inset:0; background: rgba(11,46,51,0.4); z-index: 80; display:none; }
.scrim.open { display:block; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:480px; max-width:92vw; background:#fff; z-index:90; box-shadow: var(--sh-4); transform: translateX(100%); transition: transform .28s var(--ease); display:flex; flex-direction:column; }
.drawer.open { transform: none; }
.drawer .dh { display:flex; align-items:center; justify-content:space-between; padding: var(--s-5) var(--s-6); border-bottom:1px solid var(--line); }
.drawer .dh h3 { font-family: var(--font-display); font-size: var(--t-h3); }
.drawer .db { padding: var(--s-6); overflow-y:auto; flex:1; }
.drawer .df { padding: var(--s-5) var(--s-6); border-top:1px solid var(--line); display:flex; gap: var(--s-3); justify-content:flex-end; }
.modal { position:fixed; top:50%; left:50%; transform: translate(-50%,-46%); width:560px; max-width:92vw; background:#fff; border-radius: var(--r-xl); z-index:90; box-shadow: var(--sh-4); display:none; }
.modal.open { display:block; }

/* charts (SVG) */
.chart { width:100%; display:block; }
.chart .grid-l { stroke: var(--line-soft); stroke-width:1; }
.chart .area { fill: var(--teal-050); }
.chart .line { fill:none; stroke: var(--teal); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.chart .line2 { fill:none; stroke: var(--indigo); stroke-width:2.5; stroke-dasharray:4 4; }
.chart .dot { fill: var(--teal); }
.bars { display:flex; align-items:flex-end; gap:8px; height:160px; }
.bars .b { flex:1; background: linear-gradient(var(--teal), var(--teal-300)); border-radius:5px 5px 0 0; position:relative; min-width:0; }
.bars .b.alt { background: linear-gradient(var(--indigo), var(--indigo-300)); }
.bars .b span { position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:10px; font-family:var(--font-mono); color: var(--slate-400); }
.chart-legend { display:flex; gap: var(--s-5); margin-top: var(--s-6); flex-wrap:wrap; }
.chart-legend .lg { display:flex; align-items:center; gap:7px; font-size: var(--t-xs); color: var(--slate); }
.chart-legend .lg .sw { width:12px; height:12px; border-radius:3px; }
.donut-wrap { display:flex; align-items:center; gap: var(--s-6); }
.spark { height:36px; width:120px; }

/* kanban / board */
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns: minmax(240px,1fr); gap: var(--s-4); overflow-x:auto; padding-bottom: var(--s-3); }
.kcol { background: var(--cloud); border:1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s-4); }
.kcol .kh { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--s-3); font-weight:700; font-family: var(--font-display); font-size: var(--t-sm); }
.kcard { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-3); cursor:grab; }
.kcard .kt { font-weight:600; font-size: var(--t-sm); color: var(--ink); }
.kcard .km { font-size: var(--t-xs); color: var(--slate); margin-top:3px; }

/* detail header / two-col detail */
.detail-grid { display:grid; grid-template-columns: 1.7fr 1fr; gap: var(--s-5); align-items:start; }
@media (max-width: 1100px){ .detail-grid { grid-template-columns:1fr; } }
.kv { display:grid; grid-template-columns: 130px 1fr; gap: 11px 16px; }
.kv dt { font-size: var(--t-xs); color: var(--slate-400); font-family: var(--font-mono); }
.kv dd { font-size: var(--t-sm); color: var(--ink); margin:0; font-weight:500; }

/* empty / banner helpers */
.empty { text-align:center; padding: var(--s-12); color: var(--slate); }
.empty svg { color: var(--slate-400); margin-bottom: var(--s-3); }
.progress { height:8px; border-radius:999px; background: var(--cloud-200); overflow:hidden; }
.progress i { display:block; height:100%; background: var(--teal); border-radius:999px; }

.section-title { font-family: var(--font-display); font-size: var(--t-h3); margin: var(--s-8) 0 var(--s-4); }
.note-box { background: var(--teal-050); border:1px solid var(--teal-100); border-radius: var(--r-md); padding: 12px 16px; font-size: var(--t-sm); color: var(--ink-700); display:flex; gap:10px; align-items:flex-start; }
.note-box svg { color: var(--teal); flex-shrink:0; margin-top:1px; }


/* global Scribe recording indicator */
.scribe-live{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-xs);font-weight:600;color:#a82f2f;background:var(--red-100);padding:6px 11px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap}
.scribe-live .rdot{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:pulseRec 1.4s infinite}
@keyframes pulseRec{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:760px){.scribe-live{display:none}}