/* KTM Voyage CRM — Subsidies module styles [SBS]
   Brand: gold #ccb52d, dark navy, Lato/Playfair — tokens come from base.css.
   Adds: prominent "waiting for Gligor" banner, checklist progress bars,
   deadline warning chips, detail drawer with big tick-off checklist. */

/* ---------- prominent info banner (provisional module) ---------- */
.sbs-banner{
  display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(135deg,#fbf7e6,#faf8f1);
  border:1px solid #e6dcae;border-left:5px solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 18px;margin-bottom:18px;
}
.sbs-banner-ic{font-size:26px;line-height:1.1}
.sbs-banner b{display:block;font-size:14.5px;color:#292109;margin-bottom:3px}
.sbs-banner p{margin:0;color:#6b5f22;font-size:13px;line-height:1.55;max-width:70ch}

/* ---------- list ---------- */
.sbs-sub{display:block;color:var(--muted-2);font-size:11.5px;margin-top:2px}
.sbs-dim{color:var(--muted-2)}

/* sortable column headers (big click targets, clear active state) */
.sbs-th{cursor:pointer;user-select:none;white-space:nowrap}
.sbs-th:hover{color:#292109;background:rgba(204,181,45,.08)}
.sbs-th:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sbs-th.on{color:#292109}
.sbs-th-arrow{display:inline-block;min-width:1em;margin-left:4px;font-size:9px;color:var(--gold);vertical-align:middle}

/* checklist progress bar */
.sbs-prog{display:flex;align-items:center;gap:8px;min-width:120px}
.sbs-prog-track{flex:1;height:8px;border-radius:6px;background:rgba(93,100,111,.15);overflow:hidden;min-width:70px}
.sbs-prog-fill{height:100%;border-radius:6px;transition:width .25s ease}
.sbs-prog-fill.low{background:var(--warn)}
.sbs-prog-fill.mid{background:var(--gold)}
.sbs-prog-fill.full{background:var(--ok)}
.sbs-prog-txt{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}

/* deadline warning chips */
.sbs-warn{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  white-space:nowrap;margin-left:6px;
}
.sbs-warn.upcoming{color:#8a7a1d;background:rgba(204,181,45,.16)}
.sbs-warn.urgent{color:#cf7a1d;background:rgba(207,122,29,.16)}
.sbs-warn.overdue{color:#fff;background:var(--bad)}

/* ---------- detail drawer ---------- */
.sbs-drawer-back{position:fixed;inset:0;background:rgba(20,24,34,.45);z-index:60;cursor:pointer}
.sbs-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:480px;max-width:94vw;
  background:var(--card);border-left:1px solid var(--line);
  box-shadow:-12px 0 32px rgba(20,24,34,.18);
  display:flex;flex-direction:column;
  animation:sbsSlideIn .22s ease;
}
@keyframes sbsSlideIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}

.sbs-drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px 14px;border-bottom:1px solid var(--line);background:#faf8f1;
}
.sbs-drawer-head h2{font-family:"Playfair Display",serif;font-size:20px;color:#292109;line-height:1.2}
.sbs-drawer-sub{color:var(--muted);font-size:12.5px;margin-top:4px}

.sbs-drawer-body{flex:1;overflow-y:auto;padding:18px 20px}
.sbs-drawer-body h3{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:20px 0 10px}
.sbs-drawer-body h3:first-of-type{margin-top:16px}

.sbs-statusrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.sbs-next{margin-top:14px}
.sbs-next small{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
.sbs-next-btns{display:flex;gap:8px;flex-wrap:wrap}
.sbs-next-btns .btn{padding:10px 16px}

.sbs-closed{
  margin-top:14px;font-size:13px;color:var(--muted);
  background:rgba(93,100,111,.08);border-radius:8px;padding:10px 13px;
}

/* big tick-off checklist — large click targets (Vasko-proof) */
.sbs-ck-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sbs-ck{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;cursor:pointer;background:#fff;
  transition:border-color .15s,background .15s;
}
.sbs-ck:hover{border-color:var(--gold);background:#fdfcf5}
.sbs-ck input{width:20px;height:20px;accent-color:var(--gold);cursor:pointer;flex:none}
.sbs-ck-label{flex:1;font-size:14px;color:var(--ink)}
.sbs-ck small{color:var(--muted-2);font-size:11.5px;white-space:nowrap}
.sbs-ck.done{background:rgba(47,158,81,.06);border-color:rgba(47,158,81,.35)}
.sbs-ck.done .sbs-ck-label{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(47,158,81,.5)}

.sbs-drawer-foot{
  display:flex;gap:10px;align-items:center;
  padding:14px 20px;border-top:1px solid var(--line);background:#faf8f1;
}
.sbs-drawer-foot .spacer{flex:1}

/* mobile: drawer covers the full width */
@media (max-width:640px){
  .sbs-drawer{width:100vw;max-width:100vw}
  .sbs-prog{min-width:90px}
}

/* print: the drawer + backdrop never print */
@media print{
  .sbs-drawer,.sbs-drawer-back,.sbs-banner{display:none!important}
}

/* ---------- P2 polish: long hotel names never overflow ---------- */
.sbs-drawer-head h2{overflow-wrap:anywhere}
.sbs-ck-label{overflow-wrap:anywhere}