/* =====================================================================
   PSF v2 — Mockup Components
   Reusable building blocks. Read theme.css first.
   ===================================================================== */

/* ------ APP SHELL ------ */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--sb); min-width: var(--sb); background: var(--surf);
  border-right: 1px solid var(--bdr); display: flex; flex-direction: column;
  height: 100vh; overflow-y: auto;
}
.logo { padding: 14px 14px 12px; border-bottom: 1px solid var(--bdr); }
.logo-t { font-size: 15px; font-weight: 600; color: var(--ac); display: flex; align-items: center; gap: 8px; letter-spacing: -.3px; }
.logo-s { font-size: 10px; color: var(--tx3); margin-top: 3px; font-family: var(--mn); }
.ng { font-size: 9px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .1em; padding: 14px 14px 4px; }
.ni { display: flex; align-items: center; gap: 9px; padding: 7px 14px; cursor: pointer; font-size: 12px; color: var(--tx2); border-left: 2px solid transparent; transition: all .12s; user-select: none; }
.ni:hover { background: var(--surf2); color: var(--tx); }
.ni.active { background: var(--acl); color: var(--ac); border-left-color: var(--ac); font-weight: 500; }
.ni i { font-size: 15px; flex-shrink: 0; }
.ni-s { padding-left: 36px; }
.ni-badge { margin-left: auto; background: var(--surf3); color: var(--tx3); font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 9px; }
.ni.active .ni-badge { background: var(--acm); color: var(--surf); }
.sf { margin-top: auto; padding: 10px 14px; border-top: 1px solid var(--bdr); display: flex; align-items: center; gap: 8px; }
.av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--ac), var(--pu)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.sf-id { font-size: 11px; font-weight: 500; line-height: 1.2; }
.sf-role { font-size: 10px; color: var(--tx3); }
.dbtn { background: none; border: 1px solid var(--bdr2); border-radius: 6px; padding: 5px 9px; cursor: pointer; color: var(--tx2); font-size: 14px; display: flex; align-items: center; transition: all .12s; }
.dbtn:hover { background: var(--surf2); color: var(--tx); border-color: var(--bdr3); }

.main { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; min-width: 0; }
.topbar { background: var(--surf); border-bottom: 1px solid var(--bdr); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; min-height: 52px; }
.tb-t { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.tb-s { font-size: 11px; color: var(--tx3); margin-top: 1px; font-family: var(--mn); }
.tb-a { display: flex; gap: 7px; align-items: center; }
.cont { flex: 1; overflow-y: auto; padding: 18px 22px; background: var(--bg); }

/* ------ TOP-RIGHT QUICK TOOLS ------ */
.qbar { display: flex; align-items: center; gap: 6px; }
.qsearch { display: flex; align-items: center; gap: 6px; background: var(--surf2); border: 1px solid var(--bdr); border-radius: var(--r); padding: 5px 10px; min-width: 220px; }
.qsearch i { color: var(--tx3); font-size: 14px; }
.qsearch input { background: none; border: none; outline: none; font-family: var(--fn); font-size: 12px; color: var(--tx); flex: 1; }
.qkbd { font-family: var(--mn); font-size: 10px; color: var(--tx3); background: var(--surf3); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--bdr); }

/* ------ BUTTONS ------ */
.btn {
  border: 1px solid var(--bdr2); background: var(--surf); color: var(--tx);
  padding: 6px 13px; border-radius: var(--r); font-size: 12px;
  font-family: var(--fn); cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; font-weight: 500; transition: all .12s; white-space: nowrap;
}
.btn:hover { background: var(--surf2); border-color: var(--bdr3); }
.btn:active { transform: translateY(1px); }
.bp { background: var(--ac); border-color: var(--ac); color: var(--surf); font-weight: 600; }
.bp:hover { background: var(--acm); border-color: var(--acm); }
.bd { background: var(--rdl); border-color: var(--rdd); color: var(--rd); }
.bd:hover { background: var(--rdd); color: #fff; border-color: var(--rdd); }
.bg-action { background: var(--grl); border-color: var(--grd); color: var(--gr); }
.bg-action:hover { background: var(--grd); color: #fff; }
.bs { padding: 4px 10px; font-size: 11px; }
.btn-ghost { background: transparent; border: none; color: var(--tx2); padding: 6px 9px; cursor: pointer; }
.btn-ghost:hover { color: var(--tx); background: var(--surf2); border-radius: var(--r); }
.btn-icon { background: none; border: 1px solid var(--bdr2); border-radius: 6px; padding: 6px 9px; cursor: pointer; color: var(--tx2); font-size: 14px; display: inline-flex; align-items: center; transition: all .12s; }
.btn-icon:hover { background: var(--surf2); color: var(--tx); }

/* ------ BADGES / PILLS ------ */
.b { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1.4; }
.bg-pill { background: var(--grl); color: var(--gr); }
.br { background: var(--rdl); color: var(--rd); }
.ba { background: var(--aml); color: var(--am); }
.bb { background: var(--acl); color: var(--ac); }
.bp2 { background: var(--pul); color: var(--pu); }
.bx { background: var(--surf3); color: var(--tx2); }
.bo { background: var(--orl); color: var(--or); }
.bbl { background: var(--bll); color: var(--bl); }
.bpk { background: var(--pkl); color: var(--pk); }
.b-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ------ CARDS ------ */
.card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--rl); padding: 14px; }
.card + .card { margin-top: 12px; }
.chd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ct2 { font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.csub { font-size: 11px; color: var(--tx3); margin-top: 1px; }
.tag { font-size: 10px; background: var(--surf2); border: 1px solid var(--bdr); border-radius: 5px; padding: 2px 7px; color: var(--tx3); font-family: var(--mn); }

/* ------ GRIDS ------ */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
.g5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 11px; }
.gauto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-8 { gap: 8px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; }

/* ------ METRIC TILES ------ */
.met { background: var(--surf2); border: 1px solid var(--bdr); border-radius: var(--r); padding: 13px 14px; position: relative; overflow: hidden; }
.met::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ac); opacity: .7; }
.met.alt::before { background: var(--gr); }
.met.warn::before { background: var(--am); }
.met.crit::before { background: var(--rd); }
.ml { font-size: 11px; color: var(--tx3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.mv { font-size: 24px; font-weight: 600; letter-spacing: -.6px; line-height: 1; font-family: var(--mn); }
.ms2 { font-size: 11px; color: var(--tx3); margin-top: 4px; }
.mv-d { color: var(--rd); }
.mv-up { color: var(--gr); }

/* ------ TABLES ------ */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { font-size: 11px; color: var(--tx3); font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bdr); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; background: var(--surf2); position: sticky; top: 0; }
td { padding: 8px 10px; border-bottom: 1px solid var(--bdr); color: var(--tx); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; transition: background .1s; }
tbody tr:hover td { background: var(--surf2); }
tbody tr.selected td { background: var(--acl); }
.mn { font-family: var(--mn); font-size: 11px; color: var(--tx2); }
.udi { font-family: var(--mn); font-size: 10px; background: var(--surf2); border-radius: 4px; padding: 2px 6px; color: var(--tx2); border: 1px solid var(--bdr); }

/* ------ ALERTS / CALLOUTS ------ */
.al { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: var(--r); margin-bottom: 10px; font-size: 12px; line-height: 1.5; border: 1px solid; }
.al i { flex-shrink: 0; font-size: 16px; margin-top: 1px; }
.alr { background: var(--rdl); color: var(--rd); border-color: var(--rdd); }
.ala { background: var(--aml); color: var(--am); border-color: var(--amd); }
.alg { background: var(--grl); color: var(--gr); border-color: var(--grd); }
.alb { background: var(--acl); color: var(--ac); border-color: var(--acd); }

/* ------ FORM CONTROLS ------ */
.fr { display: flex; gap: 12px; margin-bottom: 12px; }
.fg { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.fg.w2 { flex: 2; }
.flbl { font-size: 11px; font-weight: 600; color: var(--tx2); display: flex; align-items: center; gap: 5px; }
.flbl .req { color: var(--rd); }
.fc { width: 100%; border: 1px solid var(--bdr2); border-radius: var(--r); padding: 8px 11px; font-size: 12px; font-family: var(--fn); background: var(--surf2); color: var(--tx); outline: none; transition: border .15s, background .15s; -webkit-appearance: none; }
.fc:focus { border-color: var(--ac); background: var(--surf3); }
.fc::placeholder { color: var(--tx3); }
.fc-hint { font-size: 10px; color: var(--tx3); margin-top: 2px; }
textarea.fc { resize: vertical; min-height: 70px; font-family: var(--fn); }
select.fc { cursor: pointer; }

.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-opt { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r); border: 1px solid var(--bdr2); cursor: pointer; font-size: 12px; color: var(--tx2); transition: all .12s; user-select: none; }
.radio-opt:hover { border-color: var(--bdr3); color: var(--tx); }
.radio-opt.selected { border-color: var(--ac); background: var(--acl); color: var(--ac); font-weight: 500; }
.radio-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio-opt.selected .radio-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: block; }

.toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-s { position: absolute; inset: 0; background: var(--surf3); border-radius: 20px; cursor: pointer; transition: .15s; border: 1px solid var(--bdr2); }
.toggle input:checked + .toggle-s { background: var(--ac); border-color: var(--ac); }
.toggle-s::before { content: ''; position: absolute; height: 14px; width: 14px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .15s; }
.toggle input:checked + .toggle-s::before { transform: translateX(16px); }

/* Chips for multi-select roles, tags, etc. */
.role-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.role-tag { padding: 4px 10px; border-radius: 20px; border: 1px solid var(--bdr2); font-size: 11px; cursor: pointer; color: var(--tx2); transition: all .1s; user-select: none; }
.role-tag:hover { border-color: var(--bdr3); color: var(--tx); }
.role-tag.on { background: var(--pul); border-color: var(--pu); color: var(--pu); font-weight: 500; }

/* ------ TIMELINE ------ */
.tl { display: flex; flex-direction: column; }
.tli { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--bdr); }
.tli:last-child { border-bottom: none; }
.tdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ttm { font-size: 10px; color: var(--tx3); min-width: 96px; flex-shrink: 0; padding-top: 2px; font-family: var(--mn); }
.tbd { flex: 1; }
.ttt { font-size: 12px; font-weight: 500; line-height: 1.4; }
.tts { font-size: 11px; color: var(--tx2); margin-top: 2px; line-height: 1.45; }

/* ------ WORKFLOW VISUAL ------ */
.wfr { display: flex; align-items: flex-start; gap: 0; margin: 12px 0 16px; flex-wrap: wrap; }
.wfs { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px; }
.wfc { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 5px; flex-shrink: 0; cursor: pointer; transition: transform .15s; }
.wfc:hover { transform: scale(1.08); }
.wfd { background: var(--grl); color: var(--gr); }
.wfa { background: var(--acl); color: var(--ac); box-shadow: 0 0 0 3px var(--ac); }
.wfp { background: var(--surf2); color: var(--tx3); }
.wff { background: var(--rdl); color: var(--rd); }
.wfl { font-size: 10px; color: var(--tx2); text-align: center; line-height: 1.35; max-width: 80px; }
.wfn { flex: 1; height: 2px; margin-top: 15px; flex-shrink: 0; }
.wfnd { background: var(--grm); } .wfnp { background: var(--bdr); }

/* ------ MODALS / DRAWERS ------ */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .15s; }
.overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--surf); border: 1px solid var(--bdr2); border-radius: var(--rxl); width: 580px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; transform: translateY(12px) scale(.98); transition: transform .15s; box-shadow: var(--shadow-lg); }
.modal.wide { width: 820px; }
.modal.xwide { width: 1100px; }
.overlay.open .modal { transform: none; }
.modal-hd { padding: 18px 22px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.modal-sub { font-size: 11px; color: var(--tx3); margin-top: 2px; }
.modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.modal-ft { padding: 14px 22px; border-top: 1px solid var(--bdr); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }

.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 460px; max-width: 95vw; background: var(--surf); border-left: 1px solid var(--bdr); transform: translateX(100%); transition: transform .2s; z-index: 90; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.drawer.open { transform: translateX(0); }
.drawer-hd { padding: 16px 22px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; }
.drawer-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.drawer-ft { padding: 12px 22px; border-top: 1px solid var(--bdr); display: flex; gap: 8px; justify-content: flex-end; }

/* ------ TABS ------ */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--bdr); margin-bottom: 16px; }
.tab { padding: 9px 14px; font-size: 12px; color: var(--tx2); cursor: pointer; border-bottom: 2px solid transparent; transition: all .12s; user-select: none; font-weight: 500; }
.tab:hover { color: var(--tx); }
.tab.active { color: var(--ac); border-bottom-color: var(--ac); }

/* ------ SECTION DIVIDERS ------ */
.sd { font-size: 10px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .09em; margin: 16px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; }

/* ------ EMPTY STATE ------ */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--tx3); text-align: center; gap: 12px; }
.empty i { font-size: 40px; opacity: .4; }
.empty-t { font-size: 14px; font-weight: 500; color: var(--tx2); }
.empty-s { font-size: 12px; max-width: 380px; line-height: 1.5; }

/* ------ SCREENS (single-page-app pattern) ------ */
.screen { display: none; animation: screen-in .18s ease-out; }
.screen.active { display: block; }
@keyframes screen-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ------ KIOSK / STATION-FLOOR mode ------ */
.kiosk { font-size: 16px; }
.kiosk .met-big { padding: 26px 28px; }
.kiosk .met-big .mv { font-size: 44px; }
.kiosk .btn-xl { padding: 14px 28px; font-size: 16px; border-radius: var(--rl); }
.scan-target { background: var(--surf2); border: 2px dashed var(--bdr2); border-radius: var(--rxl); padding: 40px; text-align: center; color: var(--tx2); }
.scan-target i { font-size: 56px; color: var(--ac); margin-bottom: 12px; display: block; }

/* ------ PROGRESS / METER ------ */
.pr { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.prl { font-size: 12px; color: var(--tx2); min-width: 120px; }
.prb { flex: 1; height: 7px; border-radius: 4px; background: var(--surf2); overflow: hidden; border: 1px solid var(--bdr); }
.prf { height: 100%; border-radius: 4px; background: var(--ac); transition: width .3s; }
.prf.warn { background: var(--am); } .prf.crit { background: var(--rd); } .prf.ok { background: var(--gr); }
.prv { font-size: 12px; font-weight: 600; min-width: 34px; text-align: right; font-family: var(--mn); }

/* ------ KEY-VALUE STRIP ------ */
.kv { display: flex; flex-direction: column; gap: 10px; }
.kv-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--bdr); font-size: 12px; }
.kv-row:last-child { border-bottom: none; }
.kv-l { color: var(--tx2); }
.kv-v { font-weight: 500; }

/* ------ NOTIFICATION TOAST ------ */
.toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 110; }
.toast { background: var(--surf); border: 1px solid var(--bdr2); border-radius: var(--r); padding: 10px 14px; font-size: 12px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 8px; min-width: 280px; animation: toast-in .2s ease-out; }
.toast.ok { border-left: 3px solid var(--gr); }
.toast.warn { border-left: 3px solid var(--am); }
.toast.err { border-left: 3px solid var(--rd); }
@keyframes toast-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* ------ ROLE TILE (used on index) ------ */
.role-tile { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--rl); padding: 22px; cursor: pointer; transition: all .15s; position: relative; overflow: hidden; }
.role-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ac); opacity: 0; transition: opacity .15s; }
.role-tile:hover { border-color: var(--ac); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.role-tile:hover::before { opacity: 1; }
.role-tile-i { font-size: 28px; color: var(--ac); margin-bottom: 12px; }
.role-tile-t { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.role-tile-s { font-size: 12px; color: var(--tx3); margin-top: 4px; line-height: 1.45; }
.role-tile-meta { display: flex; gap: 10px; margin-top: 14px; font-size: 11px; color: var(--tx2); }
.role-tile-meta i { color: var(--tx3); margin-right: 3px; }

/* ------ KANBAN COLUMN (for incidents) ------ */
.kanban { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kcol { background: var(--surf2); border: 1px solid var(--bdr); border-radius: var(--rl); padding: 12px; }
.kcol-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.kcard { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r); padding: 10px 11px; margin-bottom: 8px; cursor: pointer; transition: all .12s; }
.kcard:hover { border-color: var(--bdr3); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kcard-t { font-size: 12px; font-weight: 500; }
.kcard-s { font-size: 10px; color: var(--tx3); margin-top: 4px; font-family: var(--mn); }
.kcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* ------ DRAG & DROP ------ */
.act-row[draggable] { transition: background .12s, border .12s, transform .12s; user-select: none; }
.act-row.dragging { opacity: .45; cursor: grabbing; transform: scale(.99); }
.act-row.drag-over { border-color: var(--ac); background: var(--acl); }
.drag-handle { cursor: grab; padding: 4px; color: var(--tx3); }
.drag-handle:active { cursor: grabbing; }
.act-row[draggable]:hover .drag-handle { color: var(--ac); }

/* ------ MISC ------ */
.divider { height: 1px; background: var(--bdr); margin: 14px 0; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--tx3); }
.mono { font-family: var(--mn); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }
.hidden { display: none !important; }
.flex-1 { flex: 1; }
.full-w { width: 100%; }

/* ====================================================================
   EXTENDED — production polish, mobile, print, accessibility, kiosk wall,
   loading/empty/error states, breadcrumb, scenario player, guided tour,
   presenter notes, live indicators.
   ==================================================================== */

/* ------ LOADING SKELETONS ------ */
.skl-row { padding: 12px 14px; border-bottom: 1px solid var(--bdr); display: flex; flex-direction: column; gap: 6px; }
.skl-bar { height: 10px; background: linear-gradient(90deg, var(--surf2) 0%, var(--surf3) 50%, var(--surf2) 100%); background-size: 200% 100%; border-radius: 4px; animation: skl-shimmer 1.4s ease-in-out infinite; }
.skl-bar.w40 { width: 40%; } .skl-bar.w70 { width: 70%; } .skl-bar.w90 { width: 90%; }
@keyframes skl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ------ EMPTY STATE (refined) ------ */
.empty-state-action { margin-top: 14px; }

/* ------ ERROR BANNER ------ */
.err-banner { background: var(--rdl); border: 1px solid var(--rdd); border-left: 4px solid var(--rd); border-radius: var(--r); padding: 11px 14px; color: var(--rd); display: flex; align-items: flex-start; gap: 10px; font-size: 12px; }
.err-banner i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ------ BREADCRUMB ------ */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tx3); margin-bottom: 10px; }
.crumbs a { color: var(--tx2); text-decoration: none; }
.crumbs a:hover { color: var(--ac); }
.crumbs i { font-size: 12px; }
.crumbs .crumb-current { color: var(--tx); font-weight: 500; }

/* ------ PULSE / LIVE INDICATORS ------ */
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gr); display: inline-block; }
.pulse-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: var(--gr); opacity: .4; animation: pulse-grow 1.6s ease-out infinite; }
@keyframes pulse-grow { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
.pulse-dot.warn { background: var(--am); }
.pulse-dot.warn::after { background: var(--am); }
.pulse-dot.crit { background: var(--rd); }
.pulse-dot.crit::after { background: var(--rd); }

/* ------ XL HERO BUTTON ------ */
.btn-xxl { padding: 16px 36px; font-size: 17px; border-radius: var(--rl); }

/* ------ SIDEBAR COLLAPSE (icon-only) ------ */
.app.collapsed .sidebar { width: 60px; min-width: 60px; }
.app.collapsed .sidebar .logo-s, .app.collapsed .sidebar .ng, .app.collapsed .sidebar .ni span, .app.collapsed .sf-id, .app.collapsed .sf-role { display: none; }
.app.collapsed .ni { padding: 9px 18px; }
.sidebar-toggle { position: absolute; top: 10px; right: -12px; width: 24px; height: 24px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; color: var(--tx2); font-size: 12px; }
.sidebar-toggle:hover { color: var(--ac); border-color: var(--ac); }

/* ------ SCREEN TRANSITION (richer) ------ */
@keyframes screen-in {
  from { opacity: 0; transform: translateX(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ------ TOAST CENTER / CEREMONY ------ */
.toast-stack-center { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); right: auto; display: flex; flex-direction: column; gap: 8px; z-index: 120; }
.toast.toast-ceremony { padding: 16px 26px; font-size: 14px; border-radius: var(--rxl); border-left-width: 4px; box-shadow: var(--shadow-lg); animation: toast-ceremony-in .35s ease-out; min-width: 360px; }
@keyframes toast-ceremony-in {
  from { opacity: 0; transform: translateY(-12px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* ------ KEYBOARD SHORTCUTS DISPLAY ------ */
.qkbd.kbd-big { font-size: 12px; padding: 4px 9px; }

/* ------ SCENARIO PLAYER FLOATING PANEL ------ */
.scn-launcher { position: fixed; bottom: 22px; right: 22px; background: linear-gradient(135deg, var(--ac), var(--pu)); color: var(--surf); border: none; border-radius: 26px; padding: 12px 18px; font-family: var(--fn); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md); cursor: pointer; display: flex; align-items: center; gap: 8px; z-index: 80; transition: all .15s; }
.scn-launcher:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.scn-launcher i { font-size: 16px; }
.scn-panel { position: fixed; bottom: 22px; right: 22px; width: 380px; background: var(--surf); border: 1px solid var(--ac); border-radius: var(--rl); box-shadow: 0 12px 40px rgba(34,211,238,.18), var(--shadow-lg); z-index: 81; transform: translateY(20px) scale(.95); opacity: 0; pointer-events: none; transition: all .18s; overflow: hidden; }
.scn-panel.open { transform: none; opacity: 1; pointer-events: all; }
.scn-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ac), var(--pu)); }
.scn-h { padding: 12px 18px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 8px; }
.scn-b { padding: 14px 18px; max-height: 240px; overflow-y: auto; }
.scn-f { padding: 10px 14px; border-top: 1px solid var(--bdr); display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.scn-f .btn.bp { box-shadow: 0 2px 8px rgba(34,211,238,.3); }
/* Hide launcher when scenario is active */
.scn-panel.open ~ .scn-launcher,
body:has(.scn-panel.open) .scn-launcher { display: none; }

/* ------ GUIDED TOUR ------ */
.tour-highlight { position: relative; box-shadow: 0 0 0 4px var(--ac), 0 0 0 6px rgba(34,211,238,.25); border-radius: 8px; z-index: 60; }
.tour-pop { position: absolute; z-index: 70; max-width: 320px; background: var(--surf); border: 1px solid var(--bdr2); border-radius: var(--rl); box-shadow: var(--shadow-lg); padding: 0; animation: tour-pop-in .2s ease-out; }
@keyframes tour-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tour-pop-head { padding: 10px 14px; border-bottom: 1px solid var(--bdr); }
.tour-step-no { font-size: 11px; font-weight: 700; color: var(--ac); font-family: var(--mn); }
.tour-pop-body { padding: 12px 14px; font-size: 12px; line-height: 1.55; }
.tour-pop-ft { padding: 10px 14px; border-top: 1px solid var(--bdr); display: flex; gap: 8px; justify-content: flex-end; }

/* ------ PRESENTER NOTES PANEL ------ */
body.presenter-notes .cont { padding-bottom: 200px; }
.presenter-panel { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, var(--surf) 0%, var(--surf2) 100%); border-top: 2px solid var(--ac); padding: 0; z-index: 70; max-height: 180px; }
.pp-head { padding: 8px 18px; font-size: 11px; font-weight: 700; color: var(--ac); text-transform: uppercase; letter-spacing: .08em; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bdr); }
.pp-body { padding: 12px 18px; font-size: 13px; line-height: 1.55; color: var(--tx); max-height: 130px; overflow-y: auto; }

/* ------ WALL DISPLAY (kiosk wall mode) ------ */
.wall { background: #000; color: #fff; min-height: 100vh; padding: 24px; }
body[data-theme=light] .wall { background: #0a0e1a; color: #fff; }
.wall-h { font-size: 28px; font-weight: 600; letter-spacing: -.6px; }
.wall-time { font-family: var(--mn); font-size: 60px; font-weight: 600; letter-spacing: -2px; }
.wall-tile { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 22px; }
.wall-tile-l { font-size: 12px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }
.wall-tile-v { font-size: 42px; font-weight: 600; letter-spacing: -1px; font-family: var(--mn); margin-top: 8px; }
.wall-tile.crit { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.08); }
.wall-tile.warn { border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.08); }
.wall-tile.ok { border-color: rgba(74,222,128,.4); }

/* ------ OFFLINE-MODE BANNER ------ */
.offline-banner { background: var(--orl); border: 1px solid var(--or); border-left: 4px solid var(--or); border-radius: var(--r); padding: 10px 14px; color: var(--or); display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 12px; }
.offline-banner i { font-size: 16px; }

/* ------ MOBILE COMPANION FRAME ------ */
.mob-frame { width: 380px; height: 720px; background: var(--surf); border: 8px solid #1a1a1a; border-radius: 36px; padding: 8px; overflow: hidden; box-shadow: var(--shadow-lg); position: relative; margin: 0 auto; }
.mob-screen { width: 100%; height: 100%; background: var(--bg); border-radius: 26px; overflow-y: auto; padding: 16px; }

/* ------ COMPARISON (v1 vs v2 split) ------ */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--bdr); border-radius: var(--rl); overflow: hidden; }
.cmp-col { padding: 16px; }
.cmp-col + .cmp-col { border-left: 1px solid var(--bdr); background: var(--surf2); }
.cmp-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cmp-hd.v1 { color: var(--tx3); }
.cmp-hd.v2 { color: var(--ac); }
.cmp-row { padding: 8px 0; border-bottom: 1px solid var(--bdr); font-size: 12px; }
.cmp-row:last-child { border-bottom: none; }

/* ------ A/B THEME PREVIEW (index hero) ------ */
.ab-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--rxl); overflow: hidden; border: 1px solid var(--bdr); }
.ab-half { padding: 28px; }
.ab-half.dark { background: #0c1018; color: #dde3f0; }
.ab-half.light { background: #f0f2f6; color: #1c2030; }
.ab-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .6; margin-bottom: 10px; }
.ab-t { font-size: 22px; font-weight: 600; letter-spacing: -.4px; }

/* ------ ACCESSIBILITY ------ */
[role=button], button, a { min-height: 28px; }
.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; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--surf); border: 1px solid var(--bdr2); padding: 8px 12px; border-radius: var(--r); z-index: 200; }
.skip-link:focus { left: 8px; }

/* ------ I18N HINDI SUBLINE ------ */
[data-hi]::after { content: attr(data-hi); display: block; font-size: 10px; color: var(--tx3); font-weight: 400; margin-top: 2px; }

/* ------ MOBILE & TABLET BREAKPOINTS ------ */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .qsearch { min-width: 160px !important; }
}
@media (max-width: 820px) {
  .sidebar { width: 60px; min-width: 60px; }
  .sidebar .logo-s, .sidebar .ng, .sidebar .ni span:not(.ni-badge), .sf-id, .sf-role { display: none; }
  .ni { padding: 9px 18px; }
  .g4, .g3, .g2 { grid-template-columns: 1fr; }
  .topbar { padding: 8px 12px; }
  .cont { padding: 12px; }
  .tb-a .qsearch { display: none; }
  .modal { width: 95vw !important; }
}
@media (max-width: 520px) {
  .sidebar { display: none; }
  body { font-size: 12px; }
  .tb-t { font-size: 13px; }
  .tb-s { display: none; }
}

/* ------ TABULAR NUMBERS ------ */
.mn, .mv, td, th, .qkbd { font-variant-numeric: tabular-nums; }

/* ------ MISC ------ */
.dim { opacity: .55; }
.glow { box-shadow: 0 0 0 2px var(--ac); }

/* ------ FORECAST CHART HELPERS ------ */
.forecast-row { display: grid; grid-template-columns: 140px 1fr 80px; gap: 10px; padding: 8px 0; align-items: center; }
.forecast-bar-bg { height: 10px; background: var(--surf2); border-radius: 5px; overflow: hidden; position: relative; }
.forecast-bar { height: 100%; background: var(--ac); }
.forecast-bar.over { background: var(--rd); }
.forecast-bar.warn { background: var(--am); }
.forecast-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tx); border-radius: 1px; }

/* ------ AR / CAMERA-ASSIST MOCK ------ */
.cam-frame { aspect-ratio: 4/3; background: #000; border-radius: var(--rl); position: relative; overflow: hidden; border: 1px solid var(--bdr); }
.cam-overlay { position: absolute; inset: 0; border: 3px solid var(--ac); border-radius: var(--rl); pointer-events: none; animation: cam-scan 2s infinite; }
@keyframes cam-scan { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(34,211,238,0); } 50% { box-shadow: inset 0 0 24px 4px rgba(34,211,238,.3); } }
.cam-target { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid var(--ac); width: 70%; height: 50%; border-radius: var(--r); }
.cam-label { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(0,0,0,.7); color: #fff; padding: 10px 14px; border-radius: var(--r); font-size: 12px; }

/* ------ CHAT (GenAI assistant) ------ */
.chat-msg { display: flex; gap: 10px; margin-bottom: 10px; }
.chat-msg.me { flex-direction: row-reverse; }
.chat-bubble { background: var(--surf2); border: 1px solid var(--bdr); border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: 12px; line-height: 1.5; max-width: 78%; }
.chat-msg.me .chat-bubble { background: var(--acl); border-color: var(--acd); color: var(--ac); border-radius: 12px 12px 4px 12px; }
.chat-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surf3); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.chat-avatar.bot { background: linear-gradient(135deg, var(--ac), var(--pu)); color: var(--surf); }

/* ------ HL7 / FHIR MAPPER ------ */
.map-grid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 6px; align-items: center; }
.map-from, .map-to { background: var(--surf2); border: 1px solid var(--bdr); border-radius: var(--r); padding: 8px 10px; font-family: var(--mn); font-size: 11px; }
.map-arrow { text-align: center; color: var(--ac); }

/* ------ PRINT ------ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .sidebar, .topbar, .scn-launcher, .scn-panel, .tour-pop, .presenter-panel, .tb-a, footer, button, .btn, .qsearch, .dbtn, .btn-icon { display: none !important; }
  .cont { overflow: visible !important; padding: 0 !important; background: #fff !important; }
  .card, .met { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; }
  table { font-size: 11px; }
  th { background: #f0f0f0 !important; color: #000 !important; }
  .b { border: 1px solid #999; background: #f8f8f8 !important; color: #000 !important; }
  .screen { display: block !important; }
  .screen + .screen { page-break-before: always; }
}