/* =====================================================================
   7D Project Hub — Design system
   ===================================================================== */
:root{
  --brand:#1e5fd4; --brand-600:#1a52ba; --brand-50:#eef4ff;
  /* --brand is used two ways: as text/borders on the page ground, and as a
     filled background with white text on it. Dark mode needs those to be
     different colours — a brand light enough to read on #0b1220 puts white
     text at 2.4:1 when used as a fill. */
  --brand-solid:#1e5fd4;
  --accent:#e11d48; --ok:#0f9d58; --warn:#e8890c; --danger:#dc2626; --info:#0b8fd4;

  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f8fafc; --border:#e3e8f0;
  --text:#101828; --text-2:#475467; --text-3:#8a94a6;
  --sidebar:#0f1a30; --sidebar-2:#16243f; --sidebar-text:#c3cee0; --sidebar-active:#ffffff;

  --radius:12px; --radius-sm:8px; --radius-lg:18px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14);
  --sidebar-w:262px;
  --font:'Noto Sans Lao','Noto Sans Thai','Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html[data-theme="dark"]{
  --bg:#0b1220; --surface:#141d2f; --surface-2:#1b2537; --border:#28344a;
  --text:#e8edf6; --text-2:#a6b2c6; --text-3:#7d8899;
  /* #1e5fd4 on #0b1220 measures 2.7:1 — below AA for anything. These are the
     same hue lifted until links, calendar chips and assignee pills are legible
     on the dark ground. */
  --brand:#7ea9ee; --brand-600:#98bcf5; --brand-solid:#2f6fd0;
  --sidebar:#080e1a; --sidebar-2:#111c2e; --sidebar-text:#a9b6cc;
  --brand-50:#16253f;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.28);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:14.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.35;font-weight:700}
h1{font-size:1.6rem} h2{font-size:1.22rem} h3{font-size:1.05rem}
img{max-width:100%}

/* ---------- layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--sidebar);
  color:var(--sidebar-text);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;
  z-index:60;transition:transform .22s ease;overflow:hidden;
}
.sidebar-brand{display:flex;gap:.7rem;align-items:center;padding:1.05rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo{
  width:38px;height:38px;border-radius:10px;flex:0 0 38px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),#3b82f6);color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.5px;
}
.sidebar-brand b{color:#fff;font-size:.95rem;display:block;line-height:1.25}
.sidebar-brand span{font-size:.72rem;color:#7f8ca4;display:block}
.sidebar-nav{flex:1;overflow-y:auto;padding:.6rem .55rem 2rem}
/* the old thumb was #2a374f on a #16202f rail — 6 px of near-invisible grey
   was the only sign that half the menu was below the fold */
.sidebar-nav::-webkit-scrollbar{width:9px}
.sidebar-nav::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
.sidebar-nav::-webkit-scrollbar-thumb{background:#4c5f7f;border-radius:5px;border:2px solid transparent;background-clip:padding-box}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:#677ea6;background-clip:padding-box}
.sidebar-nav{scrollbar-width:thin;scrollbar-color:#4c5f7f rgba(255,255,255,.03)}
.nav-group{font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;color:#5f6d86;padding:.95rem .7rem .35rem;font-weight:700}
/* collapsible menu sections — keeps every link reachable on a 768 px laptop */
.nav-sec{border-bottom:1px solid rgba(255,255,255,.05)}
.nav-sec:last-child{border-bottom:0}
summary.nav-group{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  padding:.6rem .7rem;border-radius:var(--radius-sm);user-select:none;
}
summary.nav-group::-webkit-details-marker{display:none}
summary.nav-group::after{
  content:'';margin-left:auto;width:6px;height:6px;flex:0 0 6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .15s;opacity:.75;
}
.nav-sec[open]>summary.nav-group::after{transform:rotate(-135deg)}
summary.nav-group:hover{background:var(--sidebar-2);color:#8fa0bd}
.nav-count{
  font-size:.62rem;font-weight:700;background:rgba(255,255,255,.09);
  border-radius:99px;padding:.02rem .35rem;letter-spacing:0;
}
.nav-sec-body{padding-bottom:.35rem}
/* a closed section still tells you the page you are on lives inside it */
.nav-sec:not([open])>summary.nav-group.has-active{color:#9fb2d0}
.nav-link{
  display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:var(--radius-sm);
  color:var(--sidebar-text);font-size:.875rem;margin-bottom:2px;transition:background .14s,color .14s;
}
.nav-link:hover{background:var(--sidebar-2);color:#fff;text-decoration:none}
.nav-link.active{background:linear-gradient(90deg,var(--brand-solid),#2f74e8);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(30,95,212,.35)}
.nav-ico{width:19px;height:19px;flex:0 0 19px;opacity:.9}
.nav-badge{margin-left:auto;background:rgba(255,255,255,.14);border-radius:99px;padding:.05rem .45rem;font-size:.7rem}

.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.75rem;padding:.6rem 1.15rem;min-height:60px;
}
.topbar h1{font-size:1.12rem;margin:0;font-weight:700}
.topbar .spacer{flex:1}
.icon-btn{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);display:grid;place-items:center;cursor:pointer;transition:.14s;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.burger{display:none}
.lang-switch{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.lang-switch a{padding:.32rem .6rem;font-size:.78rem;color:var(--text-2);font-weight:600}
.lang-switch a:hover{background:var(--surface-2);text-decoration:none}
.lang-switch a.on{background:var(--brand-solid);color:#fff}
.user-chip{display:flex;align-items:center;gap:.55rem;padding:.28rem .55rem;border-radius:10px;border:1px solid var(--border)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;flex:0 0 30px}
.user-chip small{display:block;color:var(--text-3);font-size:.7rem;line-height:1}
.user-chip b{font-size:.8rem;line-height:1.2}

.content{padding:1.25rem;flex:1;min-width:0}
.content > *{min-width:0}
.table-wrap{max-width:100%}
.page-head{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-bottom:1.1rem}
.page-head .sub{color:var(--text-2);font-size:.88rem;margin:0}
.page-head .spacer{flex:1}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.1rem}
/* ຫົວກາດມັກມີປຸ່ມຫຼາຍປຸ່ມ. ບໍ່ມີ flex-wrap ປຸ່ມຈຶ່ງລົ້ນອອກນອກຈໍໃນມືຖື
   ແລ້ວທັງໜ້າເລື່ອນຊ້າຍຂວາໄດ້ (ພົບຢູ່ໜ້າຊັບສິນ 482px ໃນຈໍ 390px).
   .toolbar ມີ flex-wrap ຢູ່ແລ້ວ — ໃຫ້ຫົວກາດເປັນຄືກັນ */
.card-head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding:.85rem 1.05rem;border-bottom:1px solid var(--border)}
.card-head h2,.card-head h3{margin:0;font-size:.98rem}
.card-head .spacer{flex:1}
.card-body{padding:1.05rem}
.card-body.tight{padding:.6rem}

.grid{display:grid;gap:1rem}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* minmax(0,…) is what actually stops a long word in one column from
   widening the whole grid — `.grid > *{min-width:0}` only constrains the
   child, not the track it sits in */
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}

/* ---------- stat tiles ---------- */
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem 1.05rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.stat::after{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand)}
.stat.ok::after{background:var(--ok)} .stat.warn::after{background:var(--warn)}
.stat.danger::after{background:var(--danger)} .stat.info::after{background:var(--info)}
.stat .label{font-size:.78rem;color:var(--text-2);font-weight:600;display:flex;align-items:center;gap:.4rem}
.stat .value{font-size:1.85rem;font-weight:800;line-height:1.15;margin-top:.3rem;letter-spacing:-.02em}
.stat .hint{font-size:.74rem;color:var(--text-3);margin-top:.15rem}

/* ---------- tables ---------- */
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;max-height:min(70vh,720px)}
.table-wrap.short{max-height:none}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
/* only a table that has somewhere to scroll may demand a minimum width */
.table-wrap > table.tbl{min-width:520px}
table.tbl th,table.tbl td{padding:.6rem .7rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
table.tbl thead th{
  background:var(--surface-2);font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-2);font-weight:700;white-space:nowrap;position:sticky;top:0;z-index:1;cursor:pointer;user-select:none;
}
table.tbl thead th.nosort{cursor:default}
table.tbl thead th::after{content:'';margin-left:.3rem;opacity:.35}
table.tbl thead th.sort-asc::after{content:'▲'} table.tbl thead th.sort-desc::after{content:'▼'}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl .muted{color:var(--text-3)}
.empty{padding:2.4rem 1rem;text-align:center;color:var(--text-3)}

/* ---------- badges & pills ---------- */
.badge{display:inline-block;padding:.16rem .55rem;border-radius:99px;font-size:.73rem;font-weight:700;white-space:nowrap}
.badge-ok{background:rgba(15,157,88,.13);color:#0b7a44}
.badge-warn{background:rgba(232,137,12,.15);color:#a95f00}
.badge-danger{background:rgba(220,38,38,.13);color:#b91c1c}
.badge-info{background:rgba(11,143,212,.14);color:#0369a1}
.badge-mute{background:rgba(120,130,150,.16);color:var(--text-2)}
/* Dark mode used to restyle only the text and leave the translucent fill, which
   put "ສູງ" at 1.57:1 and the category pills at 1.81:1 on the card behind them.
   Both halves are set here, measured to clear 4.5:1. */
html[data-theme="dark"] .badge-ok{background:rgba(74,222,128,.16);color:#86efac}
html[data-theme="dark"] .badge-warn{background:rgba(251,191,36,.18);color:#fcd34d}
html[data-theme="dark"] .badge-danger{background:rgba(252,165,165,.16);color:#fca5a5}
html[data-theme="dark"] .badge-info{background:rgba(125,211,252,.16);color:#93d5fd}
html[data-theme="dark"] .badge-mute{background:rgba(160,175,200,.18);color:#c3cede}
/* Chips coloured by the kind of thing they label.
   The colour used to be written straight into a style attribute, so no rule
   could adapt it and the dark page was left with #1e5fd4 text at 2.6:1. The
   page now hands over only the hue, in --kc, and each theme decides how to use
   it: as-is on white, lightened on the dark ground. */
/* on white the hue itself is often too light to read at 11px — mix it toward
   black so the label clears AA on the tinted pill behind it */
.badge-kind{background:color-mix(in srgb,var(--kc,#1e5fd4) 13%,transparent);
            color:color-mix(in srgb,var(--kc,#1e5fd4) 72%,#000000)}
html[data-theme="dark"] .badge-kind{
  background:color-mix(in srgb,var(--kc,#1e5fd4) 26%,transparent);
  color:color-mix(in srgb,var(--kc,#1e5fd4) 45%,#ffffff);
}
html[data-theme="dark"] .cal-ev{filter:brightness(1.5) saturate(.8)}
/* mute is the most common chip on the dashboard and was the dimmest */
html[data-theme="dark"] .badge-mute{background:rgba(170,185,210,.22);color:#d6dfeb}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:9px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:.14s;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn-primary{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff}
.btn-primary:hover{background:var(--brand-600);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:#b91c1c;color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-sm{padding:.3rem .55rem;font-size:.78rem}
.btn-block{width:100%;justify-content:center}
.btn-group{display:flex;gap:.4rem;flex-wrap:wrap}

/* ---------- forms ---------- */
.field{margin-bottom:.85rem}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--text-2);margin-bottom:.3rem}
.input,select,textarea{
  width:100%;padding:.55rem .7rem;border:1px solid var(--border);border-radius:9px;
  background:var(--surface);color:var(--text);font-family:inherit;font-size:.88rem;transition:.14s;
}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
textarea{min-height:96px;resize:vertical}
.form-row{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.check{display:flex;align-items:flex-start;gap:.5rem;padding:.4rem .55rem;border-radius:8px;font-size:.85rem}
.check:hover{background:var(--surface-2)}
.check input{margin-top:.25rem;flex:0 0 auto;width:auto}
.help{font-size:.75rem;color:var(--text-3);margin-top:.25rem}

/* ---------- toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.9rem}
.toolbar .spacer{flex:1}
.search-box{position:relative;min-width:200px;flex:1;max-width:340px}
.search-box input{padding-left:2rem}
.search-box svg{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:var(--text-3)}

/* ---------- progress ---------- */
.progress{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;border:1px solid var(--border)}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#4f9bff);border-radius:99px;transition:width .5s}
.progress.ok > i{background:linear-gradient(90deg,#0f9d58,#34d399)}
.progress.warn > i{background:linear-gradient(90deg,#e8890c,#fbbf24)}
.progress-lg{height:11px}
.ring{--v:0;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;flex:0 0 74px;
  background:conic-gradient(var(--brand) calc(var(--v)*1%), var(--surface-2) 0)}
.ring span{width:56px;height:56px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:.92rem}

/* ---------- alerts ---------- */
.alert{padding:.7rem .9rem;border-radius:10px;margin-bottom:.9rem;font-size:.87rem;border:1px solid transparent;display:flex;gap:.5rem}
.alert-success{background:rgba(15,157,88,.1);border-color:rgba(15,157,88,.3);color:#0b7a44}
.alert-error{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.3);color:#b91c1c}
.alert-info{background:var(--brand-50);border-color:rgba(30,95,212,.25);color:var(--brand)}
.alert-warn{background:rgba(217,119,6,.10);border-color:rgba(217,119,6,.30);color:#b45309}
html[data-theme="dark"] .alert-success{color:#4ade80} html[data-theme="dark"] .alert-error{color:#fca5a5}
html[data-theme="dark"] .alert-warn{color:#fbbf24}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(8,13,25,.55);display:none;z-index:100;padding:1.2rem;overflow-y:auto;backdrop-filter:blur(2px)}
.modal.open{display:block}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);max-width:720px;margin:2.5rem auto;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.modal-box.wide{max-width:1000px}
.modal-head{display:flex;align-items:center;padding:1rem 1.15rem;border-bottom:1px solid var(--border)}
.modal-head h3{margin:0;flex:1}
.modal-body{padding:1.15rem;max-height:70vh;overflow-y:auto}
.modal-foot{padding:.85rem 1.15rem;border-top:1px solid var(--border);display:flex;gap:.5rem;justify-content:flex-end}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1rem;overflow-x:auto}
.tabs a{padding:.55rem .9rem;font-size:.87rem;font-weight:600;color:var(--text-2);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- org chart ---------- */
.org{overflow-x:auto;padding:1rem .5rem}
.org ul{list-style:none;padding-left:0;margin:0;display:flex;justify-content:center;gap:1rem;position:relative}
.org ul ul{margin-top:2rem}
.org li{position:relative;padding:2rem .5rem 0;text-align:center}
.org li::before,.org li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:2rem;border-top:2px solid var(--border)}
.org li::after{right:auto;left:50%;border-left:2px solid var(--border)}
.org li:only-child::after,.org li:only-child::before{display:none}
.org li:only-child{padding-top:0}
.org li:first-child::before,.org li:last-child::after{border:0 none}
.org li:last-child::before{border-right:2px solid var(--border);border-radius:0 6px 0 0}
.org li:first-child::after{border-radius:6px 0 0 0}
.org ul ul::before{content:'';position:absolute;top:-2rem;left:50%;border-left:2px solid var(--border);height:2rem}
.org-node{
  display:inline-block;min-width:180px;max-width:230px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:.7rem .8rem;box-shadow:var(--shadow);text-align:center;
}
.org-node .n{font-weight:700;font-size:.84rem;line-height:1.3}
.org-node .p{font-size:.74rem;color:var(--text-2);margin-top:.2rem}
.org-node .d{font-size:.7rem;color:var(--text-3)}
.org-node .lv{font-size:.65rem;font-weight:800;color:var(--brand);letter-spacing:.06em}

/* ---------- timeline ---------- */
.tl{list-style:none;padding:0;margin:0;position:relative}
.tl::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl li{position:relative;padding:0 0 1.1rem 2rem}
.tl li::before{content:'';position:absolute;left:3px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--brand);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--border)}
.tl .tl-date{font-size:.74rem;color:var(--text-3);font-weight:600}
.tl .tl-title{font-weight:600;font-size:.9rem}

/* ---------- api docs ---------- */
.code{
  background:#0d1424;color:#d7e3f7;padding:.85rem 1rem;border-radius:10px;font-size:.8rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;white-space:pre;line-height:1.55;
}
.method{display:inline-block;padding:.14rem .5rem;border-radius:6px;font-size:.7rem;font-weight:800;background:var(--ok);color:#fff}
.endpoint{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:var(--text-2);word-break:break-all}

/* ---------- files ---------- */
.file-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border:1px solid var(--border);border-radius:99px;font-size:.76rem;margin:.12rem .15rem .12rem 0;background:var(--surface-2)}
.file-chip:hover{border-color:var(--brand);text-decoration:none}

/* ---------- misc ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.85rem}
.kv dt{color:var(--text-2);font-weight:600}
.kv dd{margin:0}
.mute{color:var(--text-3)}
.small{font-size:.8rem}
.nowrap{white-space:nowrap}
.text-right{text-align:right}
.mb0{margin-bottom:0}.mt1{margin-top:1rem}
.prose{max-width:80ch;line-height:1.85}
.prose p{margin:0 0 1rem}
.scroll-y{max-height:420px;overflow-y:auto}
.divider{height:1px;background:var(--border);margin:1rem 0}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.2rem;
  background:linear-gradient(135deg,#0f1a30 0%,#16305e 55%,#1e5fd4 100%)}
.login-card{width:100%;max-width:410px;background:var(--surface);border-radius:var(--radius-lg);padding:2rem 1.8rem;box-shadow:var(--shadow-lg)}
.login-logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#3b82f6);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.25rem;margin:0 auto .9rem}
.login-card h1{text-align:center;font-size:1.25rem;margin-bottom:.2rem}
.login-card .sub{text-align:center;color:var(--text-2);font-size:.85rem;margin-bottom:1.4rem}
.login-foot{text-align:center;color:#c9d6ee;font-size:.78rem;margin-top:1rem}

/* ---------- responsive ---------- */
@media (max-width:1400px){ .g5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1100px){ .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))} .g-2-1{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
  .sidebar{transform:translateX(-100%)}
  body.nav-open .sidebar{transform:none}
  body.nav-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
  .main{margin-left:0}
  .burger{display:grid}
  .g3,.g2{grid-template-columns:1fr}
  .content{padding:.9rem}
}
@media (max-width:620px){
  .g4,.g5{grid-template-columns:1fr}
  .user-chip .who{display:none}
  .user-chip{border:0;padding:0}
  .topbar{gap:.4rem;padding:.5rem .7rem}
  .topbar h1{font-size:.95rem}
  .lang-switch a{padding:.3rem .42rem;font-size:.72rem}
  .icon-btn{width:32px;height:32px}
}
/* ---------- printing ----------------------------------------------
   The printed page used to lose its title (the h1 lives in the topbar,
   which is hidden), print progress bars as blank white, and cut wide
   tables off at the paper edge. All three are fixed here.            */
.print-head{display:none}

@page{ size:A4; margin:14mm 12mm 16mm; }

@media print{
  .sidebar,.topbar,.toolbar,.btn,.no-print,.modal{display:none!important}
  .main{margin-left:0}
  html,body{background:#fff!important;color:#000!important;font-size:11pt}

  /* Paper is white whatever the screen is. Only html and body were being
     reset, so somebody printing from dark mode got a full-bleed dark page with
     dark-blue phone numbers on near-black — and the rule below forces
     background graphics on, which overrode the browser's own opt-out. Reset
     the TOKENS instead and every component follows. */
  /* !important ຈຳເປັນ: ຊຸດ token ຂອງໂໝດມືດຖືກປະກາດຄືນອີກເທື່ອຢູ່ທ້າຍໄຟລ໌
     (ພາກ design tokens) ຊຶ່ງມາທີຫຼັງ ຈຶ່ງຊະນະບ່ອນນີ້ດ້ວຍລຳດັບ. ຜົນຄື
     ພິມຜັງອົງກອນຈາກໂໝດມືດ ໄດ້ກາດສີເຂັ້ມ (#1f2937) ເທິງເຈ້ຍຂາວ — ເປືອງ
     ນ້ຳມຶກ ແລະ ອ່ານຍາກ. ໃສ່ !important ແລ້ວເຈ້ຍເປັນສີອ່ອນສະເໝີ */
  html[data-theme="dark"]{
    --bg:#fff!important; --surface:#fff!important; --surface-2:#f6f7f9!important; --border:#c8ced8!important;
    --text:#000!important; --text-2:#333!important; --text-3:#555!important;
    --brand:#12408f!important; --brand-600:#12408f!important; --brand-50:#eef3fb!important;
    --sidebar:#fff!important; --sidebar-2:#fff!important; --sidebar-text:#000!important;
    --shadow:none!important; --shadow-lg:none!important;
  }

  /* backgrounds and gradients ARE the report — force the browser to print them */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}

  /* the page must carry its own title, company and date on paper —
     ຈັດແບບຫົວໜັງສືທາງການ: ໂລໂກ້ + ຊື່ບໍລິສັດສູນກາງ, ຫົວຂໍ້ຢູ່ກາງ */
  .print-head{display:block!important;border-bottom:2.5pt double #333;
    padding-bottom:7pt;margin-bottom:12pt;text-align:center}
  .ph-co{display:flex;align-items:center;justify-content:center;gap:10pt;margin-bottom:5pt}
  .ph-logo{max-height:44pt;max-width:110pt;width:auto;height:auto}
  .ph-names{text-align:center}
  .ph-lo{font-size:12.5pt;font-weight:800;color:#8a1f1f;line-height:1.35}
  .ph-en{font-size:10pt;font-weight:700;color:#222;letter-spacing:.02em}
  .ph-extra{font-size:8pt;color:#555;margin-top:1.5pt}
  .ph-title{font-size:14.5pt;margin:4pt 0 2pt;font-weight:800}
  .ph-meta{font-size:8pt;color:#666}

  /* nothing may be clipped by a scroll box on paper */
  .table-wrap,.scroll-y,.pane,.ocwrap{max-height:none!important;overflow:visible!important}
  /* On paper there is no sideways scroll — whatever sticks out past the right
     edge is simply gone. The Help Desk list was losing its ສະຖານະ column that
     way, which makes a printed case list close to useless. So on paper the
     table is pinned to the text width and every cell is allowed to wrap. */
  table.tbl{min-width:0!important;width:100%!important;max-width:100%!important;
            table-layout:auto;font-size:8.5pt}
  table.tbl th,table.tbl td{
    /* wrap at spaces and hyphens only — `break-word`/`anywhere` here turned
       HD-2026-0001 into one character per line, which is worse than the
       clipping it was meant to cure */
    white-space:normal!important;word-break:normal;overflow-wrap:normal;
    padding:2.5pt 3.5pt;vertical-align:top}
  /* free text is the one place a hard break beats a torn layout */
  table.tbl td .clamp,table.tbl td p{overflow-wrap:break-word}
  table.tbl .nowrap,table.tbl .num{white-space:normal!important}
  /* pills keep a nowrap rule of their own; on paper they are the last thing
     stopping a column from narrowing, so let them wrap too */
  table.tbl .badge,table.tbl .asg,table.tbl .file-chip{
    font-size:7.5pt;padding:1pt 3pt;max-width:100%}
  table.tbl td>*{max-width:100%}
  table.tbl thead{display:table-header-group}   /* repeat headers across pages */
  tr,img,.stat{break-inside:avoid}

  /* ກາດສັ້ນ — ຫ້າມຂາດສອງໜ້າ. ແຕ່ກາດທີ່ສູງກວ່າໜຶ່ງໜ້າ (ໜ້າເອກະສານໂຄງການ,
     ຕາຕະລາງຍາວ) ຕ້ອງແຕກໜ້າໄດ້ — ບໍ່ດັ່ງນັ້ນ ຕົວມັນທັງກ້ອນຖືກຍູ້ໄປໜ້າຖັດໄປ
     ແລ້ວໜ້າທຳອິດອອກມາຫວ່າງເປົ່າ ເຫຼືອແຕ່ຫົວເຈ້ຍ. */
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;margin-bottom:8pt}
  .card.card-long,
  .card:has(.pj-doc),
  .card:has(table.tbl),
  .card:has(.prose),
  .card.card-long>.card-body{break-inside:auto}
  .card:has(.pj-doc){border:0}
  /* ຟອມປ້ອນຂໍ້ມູນ (ກາດທີ່ເປັນຟອມ) ບໍ່ມີຄວາມໝາຍເທິງເຈ້ຍ — ພິມແລ້ວໄດ້ຊ່ອງຫວ່າງ
     ເປົ່າໆ ຫຼາຍໜ້າກ່ອນຈະຮອດລາຍການຈິງ. ຕັດອອກ. */
  form.card{display:none!important}
  /* ຫົວຂໍ້ຫ້າມຢູ່ທ້າຍໜ້າໂດດດ່ຽວ ແລະ ຫ້າມແຖວດຽວຄ້າງໜ້າ */
  .card-head,.print-head,h1,h2,h3,h4{break-after:avoid;break-inside:avoid}
  p,li{orphans:3;widows:3}
  .card-head{border-bottom:1px solid #ccc}
  .grid.g4{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6pt}
  .grid.g5{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:5pt}
  .grid.g-2-1{grid-template-columns:1fr!important}
  .progress{border:1px solid #999}
  a{color:#000;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}

/* =====================================================================
   v2 additions — org chart, settings, activity log, trash
   ===================================================================== */

/* ---------- settings ---------- */
.set-grid{display:grid;grid-template-columns:230px 1fr;gap:1.1rem;align-items:start}
.set-nav{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.4rem;box-shadow:var(--shadow);position:sticky;top:76px}
.set-nav a{display:flex;gap:.6rem;align-items:center;padding:.55rem .7rem;border-radius:9px;font-size:.86rem;color:var(--text-2);font-weight:600}
.set-nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.set-nav a.on{background:var(--brand-solid);color:#fff}
.set-nav a.on svg{color:#fff}
.set-nav .set-group{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  color:var(--text-3);padding:.7rem .7rem .3rem;margin-top:.2rem
}
.set-nav .set-group:first-child{margin-top:0}
.set-nav a svg{width:17px;height:17px;flex:0 0 auto}
.set-stack{display:flex;flex-direction:column;gap:1rem}
/* ໃນມືຖື ຫົວໝວດຢຸດເປັນປ້າຍລອຍ ບໍ່ໃຫ້ແທັບປົນກັນ */
@media (max-width:900px){
  .set-grid{grid-template-columns:1fr}
  .set-nav{position:static;display:flex;flex-wrap:wrap;gap:.25rem;overflow-x:visible}
  .set-nav .set-group{width:100%;padding:.5rem .4rem .1rem;margin-top:.3rem}
  .set-nav a{flex:0 0 auto}
}

.switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 44px}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--border);border-radius:99px;transition:.18s;cursor:pointer}
.switch i::before{content:'';position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + i{background:var(--ok)}
.switch input:checked + i::before{transform:translateX(20px)}
.row-toggle{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.row-toggle:last-child{border-bottom:0}
.row-toggle .rt-txt{flex:1;min-width:0}
.row-toggle b{font-size:.86rem;display:block}
.row-toggle span{font-size:.76rem;color:var(--text-3)}

.color-input{display:flex;gap:.5rem;align-items:center}
.color-input input[type=color]{width:44px;height:38px;padding:2px;border-radius:9px;border:1px solid var(--border);background:var(--surface);cursor:pointer}
.swatches{display:flex;gap:.35rem;flex-wrap:wrap}
.swatches button{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);cursor:pointer}

/* ---------- permission matrix ---------- */
table.perm td, table.perm th{text-align:center}
table.perm td:first-child, table.perm th:first-child{text-align:left}
table.perm input[type=checkbox]{width:17px;height:17px;cursor:pointer}

/* ---------- activity log ---------- */
.log-row{display:flex;gap:.7rem;padding:.6rem .2rem;border-bottom:1px solid var(--border)}
.log-ico{width:32px;height:32px;border-radius:9px;flex:0 0 32px;display:grid;place-items:center;font-size:.9rem}
.sev-info{background:rgba(11,143,212,.14);color:#0369a1}
.sev-warning{background:rgba(232,137,12,.16);color:#a95f00}
.sev-critical{background:rgba(220,38,38,.14);color:#b91c1c}
.diff{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem}
.diff del{background:rgba(220,38,38,.12);color:#b91c1c;text-decoration:none;padding:0 .2rem;border-radius:3px}
.diff ins{background:rgba(15,157,88,.14);color:#0b7a44;text-decoration:none;padding:0 .2rem;border-radius:3px}

/* ---------- misc v2 ---------- */
.pill-tabs{display:flex;gap:.3rem;flex-wrap:wrap}
.pill-tabs a{padding:.35rem .75rem;border-radius:99px;font-size:.8rem;font-weight:600;border:1px solid var(--border);color:var(--text-2)}
.pill-tabs a:hover{background:var(--surface-2);text-decoration:none}
.pill-tabs a.on{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff}
.photo-drop{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.photo-prev{width:76px;height:76px;border-radius:14px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}

/* =====================================================================
   Org chart v3 — level rows + SVG elbow connectors (matches EDL layout)
   ===================================================================== */
:root{ --oc-head:#183a63; --oc-head-2:#1e4a7d; --oc-border:#1e4a7d; --oc-line:#274c77; }
html[data-theme="dark"]{ --oc-head:#12283f; --oc-head-2:#1b3a5c; --oc-border:#2c4c74; --oc-line:#4d7099; }

.ocwrap{position:relative;display:inline-block;min-width:100%;padding:.5rem 0 1rem}
.oc-lines{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
.oc-row{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;gap:1.05rem var(--oc-gx,14px);margin-bottom:var(--oc-gy,4.3rem);
}
.oc-row:last-child{margin-bottom:.4rem}

.oc-card{
  /* ເງົາຕ້ອງມາຈາກ --oc-sh ອັນດຽວ. ແຕ່ກ່ອນມີ box-shadow ຂຽນຊ້ຳຢູ່ແຖວລຸ່ມ
     ທັບຄ່າຈາກຕົວປ່ຽນຖິ້ມ ຕົວເລືອກ "ມີເງົາໃຕ້ກາດ" ຈຶ່ງບໍ່ເຄີຍມີຜົນເລີຍ */
  width:var(--oc-cw,214px);background:var(--surface);border:1.5px solid var(--oc-border);
  border-radius:var(--oc-rad,8px);
  overflow:hidden;box-shadow:var(--oc-sh,0 2px 8px rgba(16,24,40,.10));
  transition:transform .14s, box-shadow .14s;
  display:flex;flex-direction:column;
}
.oc-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.20);z-index:3}

.oc-head{
  display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;flex:0 0 auto;min-height:56px;
  background:linear-gradient(180deg,var(--oc-head-2),var(--oc-head));
}
.oc-photo{
  width:var(--oc-psz,40px);height:var(--oc-psz,40px);flex:0 0 var(--oc-psz,40px);
  border-radius:var(--oc-prad,5px);object-fit:var(--oc-pfit,cover);
  border:var(--oc-pbw,2px) solid rgba(255,255,255,.85);background:#dbe6f2;display:block;
}
.oc-initial{display:grid;place-items:center;color:#fff;font-weight:800;
  font-size:var(--oc-pfz,1.02rem);line-height:1;border-radius:var(--oc-prad,5px)}
.oc-name{color:#fff;font-weight:700;font-size:.765rem;line-height:1.28;word-break:break-word}


.oc-body{padding:.55rem .6rem .6rem;text-align:center;flex:1;display:flex;flex-direction:column;min-height:0}
.oc-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.oc-pos{font-weight:700;font-size:.755rem;line-height:1.35;color:var(--text);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.oc-dep{font-size:.72rem;color:var(--text-2);margin-top:.15rem;line-height:1.35;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.oc-line{font-size:.7rem;color:var(--text-2);margin-top:.18rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-line a{color:var(--brand)}
.oc-task{
  margin-top:auto;padding-top:.35rem;border-top:1px dashed var(--border);
  font-size:.7rem;color:var(--text-2);line-height:1.35;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.oc-task.none{color:var(--text-3);font-style:italic}

@media (max-width:700px){
  .oc-card{width:100%;max-width:300px;height:auto!important}
  .oc-row{margin-bottom:2.2rem}
  .oc-lines{display:none}   /* stacked on phones — connectors would only add noise */
}
@media print{
  .oc-card{box-shadow:none;break-inside:avoid}
  .ocwrap{transform:none!important}
}

/* disabled reorder arrows */
.btn.disabled{opacity:.35;pointer-events:none}

/* ---------- notification bell ---------- */
.icon-btn.bell{position:relative}
.bell-count{
  position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  background:var(--danger);color:#fff;border-radius:99px;font-size:.63rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
  border:2px solid var(--surface);font-variant-numeric:tabular-nums
}
.notif{
  display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;border-radius:9px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--border)
}
.notif:last-child{border-bottom:none}
.notif:hover{background:var(--surface-2)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:transparent;flex:0 0 8px;margin-top:.45rem}
.notif.unread{background:var(--brand-50)}
.notif.unread .notif-dot{background:var(--brand)}
html[data-theme="dark"] .notif.unread{background:rgba(30,95,212,.14)}

/* ---------- assign task rows ---------- */
.assign-row{
  display:flex;gap:.5rem;align-items:center;flex-wrap:nowrap;
  padding:.35rem .5rem;border-radius:8px;border:1px solid transparent
}
.assign-row > .check{min-width:0}
@media (max-width:820px){ .assign-row{flex-wrap:wrap} .assign-row .input{flex:1 1 140px;width:auto!important} }
.assign-row + .assign-row{margin-top:.15rem}
.assign-row.on{background:var(--brand-50);border-color:rgba(30,95,212,.18)}
html[data-theme="dark"] .assign-row.on{background:rgba(30,95,212,.12)}
.assign-row .input{font-size:.82rem;padding:.35rem .5rem}

/* ---------- overdue rows ---------- */
tr.row-danger td{background:rgba(220,38,38,.055)}
html[data-theme="dark"] tr.row-danger td{background:rgba(220,38,38,.12)}
.text-danger{color:var(--danger);font-weight:600}

/* ---------- change status without opening the row ---------- */
select.inline-status{
  width:auto;min-width:96px;padding:.22rem 1.4rem .22rem .4rem;
  font-size:.75rem;font-weight:600;border-radius:6px;background-position:right .3rem center
}
/* the column people actually read must not be squeezed by fixed-width controls */
table.tbl td.col-main, table.tbl th.col-main{min-width:230px}
.only-print{display:none}
@media print{ .only-print{display:inline!important} }

/* ---------- share links ---------- */
.share-out{display:grid;gap:.35rem;margin-top:.6rem}
.share-out label{font-size:.75rem;font-weight:600;opacity:.8}
.share-copy{display:flex;gap:.4rem}
.share-copy .input{flex:1;font-size:.82rem}
.input.share-pass{font-weight:700;letter-spacing:.09em}
.share-ev{display:inline-block;margin-right:.9rem;font-size:.72rem}
.share-form .form-row{margin-bottom:.4rem}

/* ---------- collapse a long description in a list ---------- */
.clamp.can-expand{max-height:5.6em;overflow:hidden;position:relative}
.clamp.can-expand::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2.1em;
  background:linear-gradient(to bottom,transparent,var(--surface))
}
.clamp.open{max-height:none}
.clamp.open::after{display:none}
.link-more{
  background:none;border:0;padding:.15rem 0;margin-top:.15rem;cursor:pointer;
  color:var(--brand);font:inherit;font-size:.78rem;font-weight:600
}
.link-more:hover{text-decoration:underline}
@media print{ .clamp.can-expand{max-height:none!important} .clamp.can-expand::after{display:none} }

/* ---------- document layout editor ---------- */
.dl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.1rem;align-items:start}
.dl-form{display:flex;flex-direction:column;gap:1rem;min-width:0}
.dl-preview{position:sticky;top:74px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.dl-preview-head{display:flex;align-items:baseline;gap:.6rem;padding:.6rem .9rem;border-bottom:1px solid var(--border)}
.dl-preview iframe{display:block;width:100%;height:min(78vh,900px);border:0;background:#eef1f6}
.dl-checks{display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin:.5rem 0}
.dl-checks .check{padding:.25rem 0}
.dl-cols{display:grid;grid-template-columns:auto 1fr 130px;gap:.45rem .7rem;align-items:center}
.dl-signs{display:grid;grid-template-columns:1fr 1fr 190px 44px;gap:.45rem .6rem;align-items:center;margin-bottom:.6rem}
.dl-col-head{font-size:.73rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.dl-actions{display:flex;gap:.5rem;flex-wrap:wrap;position:sticky;bottom:0;
  background:var(--bg);padding:.7rem 0;border-top:1px solid var(--border);z-index:2}
@media (max-width:1200px){
  .dl-split{grid-template-columns:1fr}
  .dl-preview{position:static}
  .dl-preview iframe{height:70vh}
}
@media (max-width:700px){
  .dl-cols{grid-template-columns:1fr}
  .dl-signs{grid-template-columns:1fr}
  .dl-col-head{display:none}
}

/* colour pickers should look like swatches, not text fields */
.input[type=color]{
  width:52px;height:34px;padding:3px;cursor:pointer;
  border:1px solid var(--border);border-radius:8px;background:var(--surface)
}
.input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.input[type=color]::-moz-color-swatch{border:0;border-radius:5px}

/* ---------- letterhead logo picker ---------- */
.dl-logo{display:flex;gap:.9rem;align-items:flex-start;margin-top:.6rem}
.dl-logo-prev{
  width:96px;height:96px;flex:0 0 96px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);border-radius:10px;background:#fff;padding:6px;text-align:center
}
.dl-logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:600px){ .dl-logo{flex-direction:column} }

/* ---------- calendar (v7) ---------- */
.dc-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.dc-seg > a,.dc-seg > button{
  border:0;border-right:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-size:.82rem;font-weight:600;cursor:pointer;padding:.3rem .72rem;line-height:1.6;
  font-family:inherit;text-decoration:none;display:inline-block
}
.dc-seg > a:last-child,.dc-seg > button:last-child{border-right:0}
.dc-seg > a.on,.dc-seg > button.on{background:var(--brand-solid);color:#fff;font-weight:700}

.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.cal-dow{background:var(--surface-2,#f4f6fa);color:var(--text-3);text-align:center;
  font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.4rem .2rem}
.cal-day{background:var(--surface);min-height:104px;padding:.3rem .34rem .4rem;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-day.out{background:var(--surface-2,#f7f8fb)}
.cal-day.out .cal-num > span{color:var(--text-3);opacity:.6}
.cal-day.today{box-shadow:inset 0 0 0 2px var(--brand)}
.cal-num{display:flex;align-items:center;justify-content:space-between;gap:.2rem;min-height:20px}
.cal-num > span{font-size:.8rem;font-weight:700;color:var(--text-2)}
.cal-day.today .cal-num > span{
  background:var(--brand);color:#fff;border-radius:999px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.74rem}
.cal-add{border:0;background:transparent;color:var(--text-3);cursor:pointer;
  font-size:1rem;line-height:1;padding:0 .18rem;border-radius:5px;opacity:0;transition:opacity .12s}
.cal-day:hover .cal-add{opacity:1}
.cal-add:hover{background:var(--brand);color:#fff}
.cal-ev{
  --ec:var(--brand);
  display:block;width:100%;text-align:left;border:0;cursor:pointer;font-family:inherit;
  background:color-mix(in srgb,var(--ec) 13%,transparent);
  color:var(--ec);border-left:3px solid var(--ec);border-radius:4px;
  padding:.15rem .3rem;font-size:.73rem;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cal-ev:hover{background:color-mix(in srgb,var(--ec) 24%,transparent)}
.cal-ev.off{text-decoration:line-through;opacity:.55}
.cal-t{font-weight:700;opacity:.8;margin-right:.2rem}
.cal-more{font-size:.72rem;color:var(--text-3);text-decoration:none;padding-left:.2rem}
.cal-more:hover{color:var(--brand);text-decoration:underline}

.ev-row{--ec:var(--brand);display:flex;gap:.6rem;align-items:flex-start;
  padding:.55rem 0;border-bottom:1px solid var(--border)}
.ev-row:last-child{border-bottom:0}
.ev-row.off{opacity:.6}
.ev-row.off .ev-top b{text-decoration:line-through}
.ev-bar{flex:0 0 4px;align-self:stretch;min-height:34px;border-radius:3px;background:var(--ec)}
.ev-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.15rem;min-width:0}
/* a long Lao title has few break opportunities — let it break rather than
   push its own column wider than the row it lives in */
.ev-top b{min-width:0;overflow-wrap:anywhere}
.ev-att{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem}
.ev-act{display:flex;flex-wrap:wrap;gap:.25rem;align-items:flex-start;flex:0 0 auto}

.up-row{display:flex;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--border)}
/* Lao runs words together, so a long title has no break opportunity and
   pushes its flex item — and the whole page — wider than the screen */
.up-row > div{min-width:0;overflow-wrap:anywhere}
.up-row:last-child{border-bottom:0}
.up-when{--ec:var(--brand);flex:0 0 44px;text-align:center;border-radius:8px;padding:.22rem 0;
  background:color-mix(in srgb,var(--ec) 12%,transparent);color:var(--ec);line-height:1.15}
.up-when b{display:block;font-size:1.02rem;font-weight:800}
.up-when span{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;opacity:.8}

@media (max-width:820px){
  .cal-day{min-height:78px}
  .cal-ev{font-size:.66rem}
  /* .ev-act was given width:100% while still sitting in a nowrap flex row, so
     it squeezed the title column down to 46 px — one syllable per line — and
     the buttons ended up on top of the text. Wrapping is what was meant. */
  .ev-row{flex-wrap:wrap}
  .ev-row > .ev-main{flex:1 1 100%;min-width:0}
  .ev-act{width:100%;padding-left:.6rem;justify-content:flex-end}
}
@media print{
  .cal{break-inside:avoid}
  .cal-day{min-height:84px}
  .cal-ev{color:#000!important;background:#eee!important;border-left-color:#666!important}
  .ev-act,.cal-add{display:none!important}
}

/* ---------- several people on one case (v7) ---------- */
.col-asg{min-width:210px}
.asg-list{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.25rem}
.asg{
  display:inline-flex;align-items:center;gap:.25rem;max-width:100%;
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
  padding:.1rem .2rem .1rem .5rem;font-size:.76rem;line-height:1.5;white-space:nowrap
}
.asg.lead{background:var(--brand-50);border-color:color-mix(in srgb,var(--brand) 32%,transparent);
  color:var(--brand);font-weight:700}
.asg-x{
  display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;color:var(--text-3);font-size:.68rem;text-decoration:none;flex:0 0 15px
}
.asg-x:hover{background:var(--danger,#c2413a);color:#fff;text-decoration:none}
.asg-add{min-width:120px;max-width:170px;font-size:.76rem}

.pick-people{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.2rem 1rem;
  align-items:start;max-height:230px;overflow-y:auto;
  border:1px solid var(--border);border-radius:9px;padding:.5rem .7rem;background:var(--surface-2)
}
.pick-grp{min-width:0}
.pick-grp-h{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-3);margin:.15rem 0 .25rem}
.pick-people .check{display:flex;align-items:center;gap:.5rem;min-width:0;
  padding:.15rem .25rem;font-size:.83rem;font-weight:400;margin-bottom:0;color:var(--text)}
.pick-people .check input{margin-top:0}
.pick-people .check > span{
  min-width:0;flex:1 1 auto;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pick-people i{font-style:normal;font-size:.76rem}
@media (max-width:700px){ .pick-people{grid-template-columns:1fr;max-height:260px} }
@media print{ .asg-add,.asg-x{display:none!important} .asg{border-color:#999} }

/* a criteria line: the controls drop under the text when the screen is narrow */
.crit-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;
  padding:.4rem .35rem;border-bottom:1px solid var(--border)}
.crit-row:last-child{border-bottom:0}
.crit-main{flex:1 1 190px;min-width:0}
.crit-main > div{overflow-wrap:anywhere}
.proj-head{align-items:flex-start;flex-wrap:wrap}
.proj-title{flex:1 1 180px;min-width:0}
.proj-title h3{overflow-wrap:anywhere}

/* ---------- machine details + secret vault (v8) ---------- */
.mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;font-size:.94em}
.mach-cell{line-height:1.5}
.mach-cell .mono{font-size:.78rem;letter-spacing:.01em}
.mach-box{border:1px dashed var(--border);border-radius:10px;padding:.2rem .7rem;margin-bottom:.9rem;background:var(--surface-2)}
.mach-box > summary{cursor:pointer;padding:.5rem .1rem;font-size:.84rem;font-weight:600;color:var(--text-2)}
.mach-box[open] > summary{margin-bottom:.4rem;border-bottom:1px solid var(--border)}

.sec-row{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .1rem;border-bottom:1px solid var(--border)}
.sec-row:last-child{border-bottom:0}
.sec-main{flex:1;min-width:0}
.sec-act{display:flex;gap:.3rem;flex:0 0 auto;flex-wrap:wrap}
.sec-val{
  margin-top:.4rem;padding:.45rem .6rem;border-radius:8px;word-break:break-all;
  background:#101828;color:#7ee787;border:1px solid #2b3a52;font-size:.9rem;user-select:all
}
.sec-due{color:var(--danger);font-weight:700}
.vault-form{border-top:2px solid var(--border);margin-top:1rem;padding-top:.9rem}
@media (max-width:640px){ .sec-row{flex-direction:column} .sec-act{width:100%} }

/* ---------- external guests (v8) ---------- */
.guests{border:1px solid var(--border);border-radius:10px;padding:.55rem .65rem;background:var(--surface-2)}
.guest-list{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.45rem}
.guest-list:empty{display:none}
.guest{
  display:inline-flex;align-items:center;gap:.3rem;max-width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:.14rem .25rem .14rem .6rem;font-size:.78rem;line-height:1.5
}
.guest-x{
  border:0;background:transparent;color:var(--text-3);cursor:pointer;font-size:.7rem;
  width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px
}
.guest-x:hover{background:var(--danger);color:#fff}
.guest-add{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:.4rem}
.guest-add .input{font-size:.83rem}
.badge-guest{background:var(--surface-2);border:1px dashed var(--border);color:var(--text-2)}
@media (max-width:720px){ .guest-add{grid-template-columns:1fr 1fr} .guest-add .btn{grid-column:1/-1} }
.asg.guest-chip{background:var(--surface);border-style:dashed;color:var(--text-2);font-weight:400}
/* the "who is in charge" radio inside the people picker */
.pick-people .check .h_lead{margin-left:auto; flex:0 0 auto; accent-color:var(--brand); cursor:pointer}
.pick-people .check{gap:.5rem}
/* a row for somebody who has been switched off */
tr.row-off{opacity:.55}
tr.row-off b{font-weight:600}
/* the appointment a notification pointed at */
.ev-row.ev-focus{background:var(--brand-50); border-radius:8px; box-shadow:inset 0 0 0 2px var(--brand)}

/* an alert that was moved inside a modal — it arrived from the page body, so
   it needs the modal's own spacing rather than the page's */
.modal .alert.in-modal{margin:0 0 .9rem}

/* ---------- one machine's own page ----------
   A two-column key/value table. .kv is a grid meant for <dl>, which would
   collapse a real table, so this one stays a table and only narrows the
   label column. */
.av-kv th{width:38%;text-align:left;font-weight:600;color:var(--text-2);white-space:nowrap}
.av-kv td{word-break:break-word}
@media (max-width:640px){.av-kv th{width:44%}}

/* the timeline dot takes its colour from the event, not from the theme accent */
.tl li[style*="--dot"]::before{background:var(--dot)}

/* ---------- ແຖບແບ່ງໜ້າ / pager ----------
   ວາງເທິງ ແລະ ລຸ່ມຕາຕະລາງ. ຊ່ອງເລກໜ້າພິມໄດ້ ເພາະຄົນທີ່ຢູ່ໜ້າ 40
   ຢາກໄປໜ້າ 3 ບໍ່ຄວນຕ້ອງກົດລູກສອນ 37 ເທື່ອ. */
.pagebar{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.5rem .2rem;font-size:.82rem;color:var(--text-2);
}
.pagebar form{display:flex;align-items:center;gap:.4rem;margin:0}
.pagebar label{margin:0;font-weight:600;font-size:.82rem;color:var(--text-2)}
.pg-nav{display:flex;gap:.3rem}
.pg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--text);font-size:1rem;line-height:1;text-decoration:none;
}
.pg-btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.pg-btn.is-off{opacity:.35;pointer-events:none}
.pg-num{
  width:56px;padding:.28rem .4rem;text-align:center;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);
  color:inherit;font:inherit;font-size:.82rem;
}
.pg-num:focus{outline:2px solid var(--brand);outline-offset:-1px}
.pg-of{white-space:nowrap}
.pg-per select{width:auto;min-width:72px;padding:.28rem 1.5rem .28rem .5rem;font-size:.82rem}
.pg-sep{width:1px;height:20px;background:var(--border)}
.pg-count{margin-left:auto;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pg-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:600px){
  .pagebar{gap:.5rem;font-size:.78rem}
  .pg-sep{display:none}
  .pg-count{margin-left:0;width:100%;order:9}
}

/* ຊື່ສາຂາ ແລະ ຊື່ຄົນເປັນພາສາລາວທີ່ບໍ່ມີຊ່ອງວ່າງ — overflow-wrap:anywhere
   ທົ່ວໄປຈຶ່ງຕັດກາງຄຳຈົນອ່ານບໍ່ອອກ. ສອງຖັນນີ້ໃຫ້ຕັດຕາມຄຳແທນ. */
.tbl td.cell-name{overflow-wrap:normal;word-break:keep-all}

/* ---------- ເມນູຂອງບັນຊີ / account menu ---------- */
.user-menu{position:relative}
.user-menu .user-chip{
  display:flex;align-items:center;gap:.55rem;padding:.25rem .5rem .25rem .3rem;
  border:1px solid transparent;border-radius:99px;background:none;
  color:inherit;font:inherit;cursor:pointer;text-align:left;
}
.user-menu .user-chip:hover,
.user-menu .user-chip[aria-expanded="true"]{background:var(--surface-2);border-color:var(--border)}
.um-caret{font-size:.7rem;color:var(--text-3);margin-left:.1rem}
.um-pop{
  position:absolute;right:0;top:calc(100% + .45rem);z-index:60;min-width:238px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 14px 40px rgba(16,26,45,.16);padding:.4rem;
}
.um-pop[hidden]{display:none}
.um-head{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem .7rem}
.um-head b{display:block;font-size:.88rem;line-height:1.3}
.um-head small{color:var(--text-3);font-size:.75rem}
.um-pop a{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:8px;
  color:var(--text);text-decoration:none;font-size:.86rem;
}
.um-pop a:hover{background:var(--surface-2);text-decoration:none}
.um-pop a svg{width:17px;height:17px;flex:0 0 17px;color:var(--text-2)}
.um-pop a span{flex:1;min-width:0}
.um-tag{
  font-style:normal;font-size:.68rem;padding:.1rem .4rem;border-radius:99px;
  background:var(--surface-2);color:var(--text-3);border:1px solid var(--border);
}
.um-tag.um-new{background:var(--danger,#c62828);color:#fff;border-color:transparent}
.um-sep{height:1px;background:var(--border);margin:.35rem .3rem}
.um-out{color:var(--danger,#c62828)!important}
.um-out svg{color:currentColor!important}
@media (max-width:700px){ .user-menu .who{display:none} }

/* ຂໍ້ຄວາມມີຮູບແບບເມື່ອສະແດງແບບອ່ານຢ່າງດຽວ (ນອກໜ້າເອກະສານ) */
.rt-out{line-height:1.75}
.rt-out > :first-child{margin-top:0}
.rt-out > :last-child{margin-bottom:0}
.rt-out p{margin:0 0 .7rem}
.rt-out table{border-collapse:collapse;max-width:100%}
.rt-out th,.rt-out td{border:1px solid var(--border);padding:4px 6px}
.rt-out img{max-width:100%;height:auto}
.rt-out ul,.rt-out ol{margin:0 0 .7rem;padding-left:1.6rem}
.doc-ro{padding:.6rem .8rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}

/* ຊ່ອງທີ່ຕ້ອງກວ້າງເຕັມ (ຕົວແກ້ຂໍ້ຄວາມມີຮູບແບບ) */
.field-wide{grid-column:1/-1;flex:1 1 100%;max-width:100%}

/* ------------------------------------------------------------------
   ແຖວຕົວເລືອກທີ່ມີຄຳອະທິບາຍໃຕ້ຫົວຂໍ້
   ໃຊ້ຕອນທີ່ຕົວເລືອກສອງອັນຕ່າງກັນພໍທີ່ຄົນຕ້ອງອ່ານກ່ອນຈຶ່ງເລືອກຖືກ
------------------------------------------------------------------ */
.radio-row{
  display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;
  padding:.6rem .7rem;border:1px solid var(--border);border-radius:9px;margin-top:.45rem;
  font-weight:400
}
.radio-row:hover{background:var(--surface-2,#f6f8fb)}
.radio-row input{margin-top:.22rem;flex:0 0 auto}
.radio-row span{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.radio-row small{font-size:.78rem;line-height:1.45}
.radio-row:has(input:checked){border-color:var(--brand,#1e5fd4);background:var(--brand-soft,#eef4ff)}

/* ນຳເຂົ້າຊັບສິນ — ໜ້າຕົວຢ່າງ */
.imp-sum{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.imp-ok,.imp-skip{display:flex;flex-direction:column}
.imp-ok b{font-size:1.8rem;color:#1d6b39;line-height:1.1}
.imp-skip b{font-size:1.8rem;color:#8a6100;line-height:1.1}
.imp-ok span,.imp-skip span{font-size:.76rem;color:var(--text-3)}
.imp-row.imp-error{background:rgba(220,38,38,.05)}
.imp-row.imp-dup{background:rgba(240,169,43,.06)}

/* ---------- ປະກັນໃກ້ໝົດ ຢູ່ Dashboard ---------- */
.warn-sum{display:flex;gap:.6rem;margin-bottom:.7rem}
.warn-sum > div{flex:1;text-align:center;padding:.5rem;border-radius:9px;background:var(--surface-2)}
.warn-sum b{display:block;font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.warn-sum span{font-size:.7rem;color:var(--text-3)}
.warn-sum .ws-30 b{color:#c0392b}
.warn-sum .ws-60 b{color:#b4880c}
.warn-sum .ws-x{background:#fdecea}
.warn-sum .ws-x b{color:#8c2f26}
.warn-list{display:flex;flex-direction:column;gap:.1rem}
.warn-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:8px}
.warn-row:hover{background:var(--surface-2);text-decoration:none}
.warn-row .wr-code{display:flex;flex-direction:column;min-width:0}
.warn-row .wr-code small{color:var(--text-3);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.warn-row .wr-days{text-align:right;font-size:.76rem;color:var(--text-3);white-space:nowrap}
.warn-row.soon .wr-days b{color:#c0392b}
.warn-row.ok .wr-days b{color:#b4880c}

/* ===== theme picker cards (settings → language & display) ===== */
.set-sub{display:flex;align-items:center;gap:.45rem;margin:0 0 .6rem;font-size:.95rem}
.set-sub svg{width:17px;height:17px;color:var(--brand)}
.set-sub .small{font-weight:400}
.theme-pick{display:flex;gap:.8rem;flex-wrap:wrap}
.theme-pick .tp{flex:1;min-width:150px;max-width:220px;cursor:pointer;border:2px solid var(--border);
  border-radius:12px;padding:.55rem;transition:border-color .15s, box-shadow .15s;background:var(--surface)}
.theme-pick .tp:hover{border-color:var(--brand)}
.theme-pick .tp.on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent)}
.theme-pick .tp input{position:absolute;opacity:0;pointer-events:none}
.tp-prev{display:block;height:64px;border-radius:8px;overflow:hidden;position:relative;border:1px solid var(--border)}
.tp-light{background:#f6f8fb}
.tp-dark{background:#101828}
.tp-prev .tp-bar{display:block;height:14px;background:#1e5fd4;opacity:.9}
.tp-dark .tp-bar{background:#3b74e0}
.tp-prev .tp-line{display:block;height:7px;border-radius:4px;background:#c7d2e2;margin:8px 10px 0;width:65%}
.tp-dark .tp-line{background:#33415a}
.tp-prev .tp-line.w2{width:42%}
.tp-auto{display:flex}
.tp-auto .tp-half{flex:1;position:relative;overflow:hidden}
.tp-auto .tp-half .tp-line{width:70%}
.theme-pick .tp-name{display:block;text-align:center;margin-top:.45rem;font-weight:600;font-size:.88rem}
html[data-theme="dark"] .tp-light{background:#e9edf4}

/* ===== documents: pretty add modal + batch rows ===== */
.dm-seg{display:flex;gap:.6rem;margin-bottom:1rem}
.dm-opt{flex:1;cursor:pointer}
.dm-opt input{position:absolute;opacity:0;pointer-events:none}
.dm-opt span{display:block;text-align:center;padding:.55rem .6rem;border:2px solid var(--border);
  border-radius:10px;font-weight:600;transition:all .15s;background:var(--surface)}
.dm-opt input:checked + span{border-color:var(--brand);color:var(--brand);
  background:color-mix(in srgb, var(--brand) 8%, var(--surface));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent)}
.dm-sec{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted,#68758a);margin:1rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--border)}
.dm-drop{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1.1rem;
  border:2px dashed var(--border);border-radius:12px;cursor:pointer;text-align:center;transition:all .15s}
.dm-drop:hover,.dm-drop.over{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 6%, transparent)}
.dm-drop-ico{font-size:1.4rem}
.dm-drop-txt{font-size:.88rem;font-weight:600}
.dm-drop-list{word-break:break-all}
/* ------- ເອກະສານຊັ້ນຄວາມລັບ: ລາຍຊື່ຜູ້ມີສິດເບິ່ງ ------- */
.sec-users{display:flex;flex-wrap:wrap;gap:.4rem;max-height:180px;overflow:auto;
  border:1px solid var(--border);border-radius:10px;padding:.55rem;background:var(--surface-2,#f8fafd)}
.sec-u{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;
  border:1px solid var(--border);border-radius:999px;padding:.25rem .6rem;cursor:pointer;
  background:var(--surface);transition:all .12s}
.sec-u:hover{border-color:var(--brand)}
.sec-u:has(input:checked){border-color:var(--brand);color:var(--brand);
  background:color-mix(in srgb, var(--brand) 8%, var(--surface))}

/* ------- ທ້າຍໜ້າ: ໂລໂກ້ + ຂໍ້ຄວາມ ------- */
.foot-line{display:flex;align-items:center;gap:.85rem}
.foot-logo{max-height:38px;max-width:220px;width:auto;height:auto;display:block}

/* ------- ປຸ່ມ ON/OFF ເປີດ-ປິດຜູ້ໃຊ້ ------- */
.utog{position:relative;display:inline-flex;align-items:center;width:66px;height:26px;
  border-radius:999px;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-decoration:none;transition:filter .15s,transform .1s;user-select:none}
.utog span{position:absolute;top:0;bottom:0;display:flex;align-items:center}
.utog::after{content:'';position:absolute;top:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:all .15s}
.utog.on{background:#16a34a}
.utog.on span{left:11px}
.utog.on::after{right:3px}
.utog.off{background:#dc2626}
.utog.off span{right:9px}
.utog.off::after{left:3px}
.utog:not(.static):hover{filter:brightness(1.1);transform:translateY(-1px)}
.utog.static{opacity:.75;cursor:default}

/* ສະວິດໃຫຍ່ ໃນຟອມຜູ້ໃຊ້ (ມີຄຳ ON/OFF ໃນຕົວ) */
.uswitch{display:inline-flex;cursor:pointer}
.uswitch input{display:none}
.utrack{position:relative;width:78px;height:30px;border-radius:999px;background:#dc2626;
  transition:background .18s;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em}
.utrack::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:transform .18s}
.utrack .t-on,.utrack .t-off{position:absolute;top:0;bottom:0;display:flex;align-items:center;transition:opacity .15s}
.utrack .t-on{left:13px;opacity:0}
.utrack .t-off{right:11px;opacity:1}
.uswitch input:checked + .utrack{background:#16a34a}
.uswitch input:checked + .utrack::after{transform:translateX(48px)}
.uswitch input:checked + .utrack .t-on{opacity:1}
.uswitch input:checked + .utrack .t-off{opacity:0}

/* ------- ໜ້າຟອມສຳຫຼວດ: ແຖວລາຍການ + ປຸ່ມຈັດເປັນລະບຽບ ------- */
.tbl-forms td{vertical-align:middle}
.ft-slug{display:inline-flex;align-items:center;gap:.3rem;margin-top:.25rem;
  font-size:.72rem;font-family:ui-monospace,monospace;color:var(--text-3);
  background:var(--surface-2,#f6f8fb);border:1px solid var(--border);
  border-radius:6px;padding:.12rem .45rem}
.ft-act{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:nowrap}
.fa-btn{display:inline-grid;place-items:center;width:33px;height:33px;flex:0 0 33px;
  border:1px solid var(--border);border-radius:9px;color:var(--text-2);
  background:var(--surface);text-decoration:none;transition:all .13s}
.fa-btn svg{width:16px;height:16px}
.fa-btn:hover{border-color:var(--brand);color:var(--brand);
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));transform:translateY(-1px)}
.fa-btn.fa-danger:hover{border-color:#dc2626;color:#dc2626;
  background:color-mix(in srgb,#dc2626 8%,var(--surface))}
.fa-sep{width:1px;height:22px;background:var(--border);margin:0 .15rem;flex:0 0 1px}
.fa-tog{display:inline-flex;align-items:center;gap:.35rem;padding:.36rem .75rem;
  border-radius:999px;font-size:.78rem;font-weight:800;text-decoration:none;
  border:1.5px solid;white-space:nowrap;transition:all .13s}
.fa-tog.to-open{color:#0a7d43;border-color:#8fd0ab;background:#eafaf1}
.fa-tog.to-open:hover{background:#0a7d43;border-color:#0a7d43;color:#fff}
.fa-tog.to-close{color:#b45309;border-color:#e7c17e;background:#fdf6e7}
.fa-tog.to-close:hover{background:#b45309;border-color:#b45309;color:#fff}

/* ------- ຄູ່ມືການໃຊ້ງານ ------- */
.man-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:1rem}
@media (max-width:960px){ .man-grid{grid-template-columns:1fr} }
.man-card .card-head h2{font-size:1rem}
.man-ico{font-size:1.25rem;line-height:1}
.man-list{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem}
.man-list li{font-size:.9rem;line-height:1.6}
.man-list li::marker{color:var(--brand)}
@media print{
  .man-grid{display:block}
  .man-card{break-inside:avoid;margin-bottom:10pt}
}

/* ------- ຄັງໄຟລ໌ສ່ວນຕົວ (file manager) ------- */
.fm-bar{height:8px;border-radius:6px;background:var(--surface-2,#eef2f8);overflow:hidden;
  border:1px solid var(--border);margin:-.4rem 0 1rem}
.fm-bar span{display:block;height:100%;background:var(--brand);border-radius:6px;transition:width .3s}
.fm-bar span.warn{background:#d97706}
.fm-bar span.danger{background:#dc2626}
.fm-crumb{margin:.2rem 0 .8rem;font-size:.92rem}
.fm-crumb a{text-decoration:none;font-weight:600}
.fm-dirs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.fm-dir{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--border);
  border-radius:10px;padding:.4rem .6rem;background:var(--surface)}
.fm-dir-a{text-decoration:none;font-weight:600;display:inline-flex;gap:.35rem;align-items:center}
.fm-dir:hover{border-color:var(--brand)}
.fm-dir-act{opacity:.35;transition:opacity .15s}
.fm-dir:hover .fm-dir-act{opacity:1}
.fm-link{display:flex;align-items:center;gap:.4rem;margin:.3rem 0}
.fm-link .input{flex:1;min-width:0}
.fm-link.dead .input{opacity:.5;text-decoration:line-through}

.db-rows{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.7rem}
.db-row{border:1px solid var(--border);border-radius:10px;padding:.55rem;background:var(--surface-2,#f8fafd)}
.db-grid{display:grid;gap:.45rem;align-items:center;
  grid-template-columns:128px 110px 96px 110px minmax(160px,1.6fr) minmax(100px,1fr) auto auto}
.db-grid .input,.db-grid select{min-width:0}
.db-file{position:relative;white-space:nowrap}
.db-fn{font-size:.75rem}
@media (max-width:900px){ .db-grid{grid-template-columns:1fr 1fr;} .db-grid .db-subject{grid-column:1/-1} }
html[data-theme="dark"] .db-row{background:rgba(255,255,255,.03)}
.log-sentence{font-size:.88rem;margin-top:.1rem}

/* ===== in-app confirm/alert dialog (replaces browser confirm()) ===== */
.cfm{position:fixed;inset:0;background:rgba(8,13,25,.55);display:none;z-index:300;padding:1.2rem;backdrop-filter:blur(2px)}
.cfm.on{display:flex;align-items:center;justify-content:center}
.cfm-box{background:var(--surface,#fff);border-radius:14px;max-width:400px;width:100%;padding:1.4rem 1.5rem 1.15rem;
  box-shadow:0 18px 50px rgba(15,23,32,.3);border:1px solid var(--border,#dbe3ec);text-align:center;
  animation:cfmIn .16s ease-out}
@keyframes cfmIn{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.cfm-ico{width:44px;height:44px;margin:0 auto .7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;font-weight:800;background:rgba(245,158,11,.14);color:#b45309}
.cfm-msg{font-size:.95rem;line-height:1.7;white-space:pre-line;margin-bottom:1.1rem;color:var(--ink,#0f1720)}
.cfm-btns{display:flex;gap:.6rem;justify-content:center}
.cfm-btns .btn{min-width:104px}
html[data-theme="dark"] .cfm-box{box-shadow:0 18px 50px rgba(0,0,0,.55)}

/* ===== project info document page ===== */
.pj-doc{max-width:860px;margin:0 auto;padding:2.2rem 2.6rem 2.8rem}
.pj-hero{display:flex;align-items:center;gap:1.1rem;padding-bottom:1.3rem;margin-bottom:1.6rem;
  border-bottom:3px solid var(--brand)}
.pj-logo{width:64px;height:64px;object-fit:contain;flex:0 0 auto}
.pj-hero-t h1{margin:0;font-size:1.45rem;color:var(--brand-ink,#0b2f6b);line-height:1.35}
.pj-hero-sub{color:var(--muted,#68758a);font-size:.9rem;margin-top:.15rem}
.pj-hero-upd{color:var(--muted,#68758a);font-size:.78rem;margin-top:.3rem}
.pj-sec-view{margin-bottom:1.9rem}
.pj-sec-view h2{display:flex;align-items:center;gap:.6rem;font-size:1.12rem;margin:0 0 .7rem;
  color:var(--brand-ink,#0b2f6b)}
.pj-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;
  border-radius:8px;background:var(--brand);color:#fff;font-size:.85rem;font-weight:700}
.pj-sec-view .prose{font-size:.95rem;line-height:1.95;color:var(--ink,#22303f)}
.pj-sec-view .prose p{margin:.65rem 0}
.pj-drag{cursor:grab;font-size:1rem}
.pj-sec.dragging{opacity:.6}
@media (max-width:640px){ .pj-doc{padding:1.3rem 1.1rem} .pj-hero{flex-direction:column;text-align:center} }
html[data-theme="dark"] .pj-sec-view .prose{color:#c9d4e3}
@media print{
  .pj-doc{max-width:none;padding:0}
  /* ຫົວເຈ້ຍທາງການ (print-head) ມີໂລໂກ້ + ຊື່ບໍລິສັດ + ຊື່ໂຄງການ ຢູ່ແລ້ວ —
     ຫົວໃນໜ້າຈໍຈຶ່ງເປັນຂອງຊ້ຳ, ຕັດອອກຕອນພິມ */
  .pj-hero{display:none}
  .pj-sec-view{break-inside:auto;margin-bottom:10pt}
  .pj-sec-view h2{break-after:avoid;font-size:12pt}
  .pj-sec-view .prose{font-size:10.5pt;line-height:1.65}
  .pj-num{width:19px;height:19px;flex:0 0 19px;font-size:8.5pt}
}

/* ===== field help ? buttons + popover ===== */
.fh-q{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:.32rem;
  border-radius:50%;border:1.4px solid #b9c2d0;background:transparent;color:var(--muted,#68758a);
  font-size:.66rem;font-weight:700;cursor:pointer;vertical-align:middle;line-height:1;padding:0;flex:0 0 auto}
.fh-q:hover{border-color:var(--brand);color:var(--brand)}
.fh-pop{position:fixed;z-index:350;background:var(--surface,#fff);border:1px solid var(--border,#dbe3ec);
  border-radius:12px;box-shadow:0 12px 34px rgba(15,23,32,.18);padding:.75rem .9rem;
  animation:cfmIn .14s ease-out}
.fh-pop-t{font-weight:700;font-size:.82rem;color:var(--brand-ink,#0b2f6b);margin-bottom:.3rem}
.fh-pop-b{font-size:.83rem;line-height:1.7;color:var(--ink,#22303f)}
html[data-theme="dark"] .fh-pop{box-shadow:0 12px 34px rgba(0,0,0,.5)}
html[data-theme="dark"] .fh-pop-b{color:#c9d4e3}
@media print{ .fh-q{display:none} }
/* field-help settings list */
.fh-list{display:flex;flex-direction:column;gap:.45rem;max-height:520px;overflow-y:auto;
  border:1px solid var(--border);border-radius:10px;padding:.6rem}
.fh-row{display:grid;grid-template-columns:190px 1fr 1fr;gap:.5rem;align-items:center}
.fh-row .fh-key{font-size:.8rem;word-break:break-all}
.fh-row.is-over .fh-key code{color:var(--brand)}
@media (max-width:820px){ .fh-row{grid-template-columns:1fr} }
/* purchase items repeater */
.pi-rows{display:flex;flex-direction:column;gap:.4rem}
.pi-row{display:grid;grid-template-columns:minmax(160px,2fr) 90px 90px 120px 90px auto;gap:.45rem;align-items:center}
.pi-t{text-align:right}
@media (max-width:760px){ .pi-row{grid-template-columns:1fr 1fr;} .pi-row .pi-d{grid-column:1/-1} }
/* signature vault */
.sv-state{display:flex;flex-direction:column;gap:.5rem}
.sv-slot{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;border:1px solid var(--border);
  border-radius:10px;padding:.55rem .8rem}
.sv-slot.has{border-color:color-mix(in srgb, var(--brand) 45%, var(--border))}
.sv-ico{font-size:1.1rem}
.sv-prev{max-height:90px;max-width:240px;object-fit:contain;background:
  repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;border-radius:8px;padding:4px}
.sv-pin{letter-spacing:.35em}
.sv-pick{display:flex;gap:.6rem;flex-wrap:wrap}
.sv-pick .dm-opt{flex:0 1 auto;min-width:190px}
.sv-fetched{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;flex-wrap:wrap}
.sv-fetched img{max-height:84px;max-width:230px;object-fit:contain;border:1px dashed var(--border);border-radius:8px;padding:4px;background:#fff}

/* ===== File manager v2 (files.php) ===== */
.fm2{display:flex;gap:1rem;align-items:flex-start}
.fm2-side{flex:0 0 225px;position:sticky;top:76px;display:flex;flex-direction:column;gap:.45rem;
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.9rem;
  max-height:calc(100vh - 96px);overflow:auto}
.fm2-side .btn{justify-content:center;width:100%}
.fm2-up{margin-bottom:.1rem}
.fm2-nf{margin-bottom:.5rem}
.fm2-nav{display:flex;flex-direction:column;gap:2px}
.fm2-nav>a{display:flex;align-items:center;gap:.5rem;padding:.42rem .55rem;border-radius:9px;
  color:var(--text);text-decoration:none;font-size:.92rem;line-height:1.35}
.fm2-nav>a:hover{background:var(--soft)}
.fm2-nav>a.on{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-weight:700}
.fm2-n{margin-left:auto;font-size:.72rem;background:var(--soft);border-radius:99px;padding:.05rem .5rem;color:var(--muted)}
.fm2-nav>a.on .fm2-n{background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand)}
.fm2-n.hot{background:var(--danger);color:#fff;font-weight:700}
.fmt{margin:.1rem 0 .3rem .9rem;border-left:2px solid var(--border);padding-left:.45rem;display:flex;flex-direction:column;gap:1px}
.fmt-item>a{display:flex;align-items:center;gap:.4rem;padding:.24rem .45rem;border-radius:7px;
  color:var(--muted);text-decoration:none;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmt-item>a:hover{background:var(--soft);color:var(--text)}
.fmt-item.on>a{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-weight:700}
.fmt-kids{margin-left:.7rem;border-left:1px dashed var(--border);padding-left:.35rem}
.fm2-quota{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}
.fm2-quota .fm-bar{margin:.35rem 0}
.fm2-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.8rem}
.fm2-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--border);border-radius:12px;padding:.55rem .8rem}
.fm2-crumb{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-weight:700;min-width:0}
.fm2-crumb a{color:var(--muted);text-decoration:none}
.fm2-crumb a:hover{color:var(--brand)}
.fm2-ico{font-size:1.05rem}
.fm2-search{margin-left:auto;display:flex;gap:.35rem}
.fm2-search .input{width:190px;padding:.35rem .6rem;font-size:.88rem}
.fm2-views{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.fm2-views a{padding:.3rem .6rem;text-decoration:none;color:var(--muted);font-size:.95rem;line-height:1}
.fm2-views a.on{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.fm2-dirs{display:flex;flex-wrap:wrap;gap:.55rem}
.fm2-dir{display:flex;align-items:center;gap:.15rem;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:.4rem .6rem;transition:box-shadow .15s}
.fm2-dir:hover{box-shadow:0 3px 10px rgba(0,0,0,.08)}
.fm2-dir-a{display:flex;align-items:center;gap:.45rem;color:var(--text);text-decoration:none;font-weight:600;font-size:.9rem}
.fm2-dir-ic{font-size:1.1rem}
.fm2-dir-act{display:flex;gap:.05rem;margin-left:.3rem;opacity:.45}
.fm2-dir:hover .fm2-dir-act{opacity:1}
.fm2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.fm2-card{display:flex;flex-direction:column;gap:.3rem;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:.6rem;text-decoration:none;color:var(--text);transition:box-shadow .15s,border-color .15s}
.fm2-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)}
.fm2-card.on{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
.fm2-thumb{display:flex;align-items:center;justify-content:center;height:92px;background:var(--soft);
  border-radius:9px;overflow:hidden}
.fm2-thumb img{width:100%;height:100%;object-fit:cover}
.fm2-big{font-size:2.3rem}
.fm2-nm{font-weight:600;font-size:.86rem;line-height:1.3;word-break:break-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fm2-meta{font-size:.74rem;color:var(--muted)}
.fm2-badges{display:flex;gap:.3rem;font-size:.8rem;min-height:1.1em}
.fm2-selrow>td{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.fm2-detail{flex:0 0 318px;position:sticky;top:76px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:.9rem;display:flex;flex-direction:column;gap:.8rem;
  max-height:calc(100vh - 96px);overflow:auto}
.fm2-detail>*{flex:0 0 auto}
.fm2-d-head{display:flex;align-items:flex-start;gap:.5rem}
.fm2-d-name{word-break:break-all;line-height:1.35;flex:1}
.fm2-prev{background:var(--soft);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fm2-prev img{max-width:100%;max-height:210px;object-fit:contain}
.fm2-prev iframe{width:100%;height:300px;border:0;background:#fff}
.fm2-prev.icon{padding:1.6rem;font-size:3.2rem}
.fm2-d-meta{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem}
.fm2-d-meta>div{display:flex;justify-content:space-between;gap:.8rem}
.fm2-d-meta .mute{flex:0 0 auto}
.fm2-d-act{display:flex;flex-wrap:wrap;gap:.4rem}
.fm2-sec{border-top:1px solid var(--border);padding-top:.7rem;display:flex;flex-direction:column;gap:.45rem}
.fm2-sec-h{font-weight:700;font-size:.88rem}
.fm2-apline{display:flex;align-items:center;gap:.5rem;font-size:.85rem;flex-wrap:wrap}
.fm2-verline{display:flex;align-items:center;gap:.5rem;font-size:.82rem;background:var(--soft);
  border-radius:8px;padding:.35rem .55rem;flex-wrap:wrap}
.fm2-verline b{font-variant-numeric:tabular-nums}
.fm2-cform{display:flex;gap:.4rem}
.fm2-cform .input{flex:1;font-size:.85rem}
.fm2-com{background:var(--soft);border-radius:9px;padding:.45rem .6rem;font-size:.84rem;line-height:1.45}
.fm2-com b{font-size:.8rem}
.fm2-logline{font-size:.78rem;color:var(--muted);padding:.18rem 0;border-bottom:1px dashed var(--border);line-height:1.45}
.fm2-logline:last-child{border-bottom:0}
.fm2-apfrm{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.fm2-apfrm .input{width:150px;font-size:.83rem;padding:.3rem .5rem}
@media (max-width:1100px){
  .fm2{flex-wrap:wrap}
  .fm2-detail{flex:1 1 100%;position:static;max-height:none;order:3}
}
@media (max-width:760px){
  .fm2-side{flex:1 1 100%;position:static;max-height:none}
  .fm2-search{margin-left:0}
  .fm2-search .input{width:130px}
}

/* ===== footer copyright + version ===== */
.foot-copy{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:.55rem;padding-top:.55rem;border-top:1px dashed var(--border);font-size:.78rem}
.foot-ver{background:var(--soft);border:1px solid var(--border);border-radius:99px;
  padding:.12rem .65rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== org chart print template (v31 designer) ===== */
.ocwrap .oc-card{zoom:var(--oc-fs,100%)}
.oc-hd-photo .oc-photo{display:none}
.oc-hd-pos .oc-pos{display:none}
.oc-hd-dep .oc-dep{display:none}
.oc-hd-email .oc-em{display:none}
.oc-hd-phone .oc-ph{display:none}
.oc-hd-task .oc-task{display:none}
/* compact: name + position only, tighter card */
.oc-st-compact .oc-dep,.oc-st-compact .oc-em,.oc-st-compact .oc-ph,.oc-st-compact .oc-task{display:none}
.oc-st-compact .oc-card{width:var(--oc-cw,176px)}
.oc-st-compact .oc-head{min-height:44px;padding:.4rem .55rem}
.oc-st-compact .oc-body{padding:.4rem .5rem .5rem}
/* photo: light header — ຂະໜາດ/ຊົງ/ຂອບ ຮູບ ມາຈາກ --oc-psz/--oc-prad/--oc-pbw ບ່ອນດຽວ */
.oc-st-photo .oc-head{background:none;padding:.75rem .6rem .1rem;min-height:0}
.oc-st-photo .oc-photo{border-color:var(--oc-head)}
.oc-st-photo .oc-name{color:var(--text)}
/* ຕຳແໜ່ງຮູບໃນກາດ — ຄລາສດຽວຄຸມທັງໜ້າຈໍ ຕົວຢ່າງ ແລະ ເຈ້ຍ */
.oc-pp-left  .oc-head{flex-direction:row;align-items:center}
.oc-pp-top   .oc-head{flex-direction:column;align-items:center;gap:.35rem}
.oc-pp-top   .oc-name{text-align:center}
/* ຢູ່ຂວາຊື່ຕົນເອງ = ພາບກະຈົກຂອງ "ຢູ່ຊ້າຍ": ຮູບຊິດຂວາ ຊື່ຢູ່ກ້ອງຊ້າຍຂອງຮູບ
   ປ້າຍລະດັບຍ້າຍໄປຊິດຊ້າຍ ຍ້ອນ margin-left:auto ບໍ່ໄດ້ຜົນໃນ row-reverse */
.oc-pp-right .oc-head{flex-direction:row-reverse;align-items:center}
.oc-pp-right .oc-name{text-align:right}
.oc-pp-right .oc-lv{margin-left:0;margin-right:auto}
.oc-st-photo .oc-card{border-radius:var(--oc-rad,12px)}

/* ===== helpdesk rating stars ===== */
.hd-stars{display:flex;flex-direction:row-reverse;justify-content:center;gap:.25rem;font-size:2.1rem;margin:.6rem 0 .8rem}
.hd-stars input{display:none}
.hd-stars label{cursor:pointer;color:var(--border);transition:color .12s}
.hd-stars input:checked ~ label,.hd-stars label:hover,.hd-stars label:hover ~ label{color:#f0a92b}

/* ===== exec dashboard month bars ===== */
.xb-row{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.xb-col{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.85rem;flex:1;min-width:44px}
.xb-bar{height:88px;width:100%;max-width:52px;background:var(--soft);border-radius:8px;display:flex;align-items:flex-end;overflow:hidden}
.xb-bar span{display:block;width:100%;border-radius:8px 8px 0 0}
.xb-col small{color:var(--muted)}

/* =====================================================================
   TABLER SKIN (v1.0.16) — ໂທນສີ/ເງົາ/ມູມ ຕາມ Tabler (tabler.io, MIT)
   ປ່ຽນສະເພາະ token + ລາຍລະອຽດ component — markup ທຸກໜ້າຄືເກົ່າ
   ===================================================================== */
:root{
  --brand:#066fd1; --brand-600:#0559a9; --brand-50:#e6f1fa; --brand-solid:#066fd1;
  --ok:#2fb344; --warn:#f59f00; --danger:#d63939; --info:#4299e1; --accent:#d6336c;
  --bg:#f6f8fb; --surface:#ffffff; --surface-2:#f9fafb; --border:#e5e7eb;
  --text:#1f2937; --text-2:#4b5563; --text-3:#8695a7;
  --sidebar:#182433; --sidebar-2:#1f2e42; --sidebar-text:#a8b1bd; --sidebar-active:#ffffff;
  --radius:10px; --radius-sm:6px; --radius-lg:14px;
  --shadow:0 0 4px rgba(31,41,55,.04),0 1px 2px rgba(31,41,55,.05);
  --shadow-lg:0 2px 16px rgba(31,41,55,.16);
}
html[data-theme="dark"]{
  --bg:#111827; --surface:#1f2937; --surface-2:#1a2332; --border:#374151;
  --text:#e5e7eb; --text-2:#9ca3af; --text-3:#6b7280;
  --brand:#74b3ef; --brand-600:#94c5f5; --brand-solid:#066fd1; --brand-50:#152539;
  --sidebar:#0f172a; --sidebar-2:#182338; --sidebar-text:#94a3b8;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
}
/* ຕາຕະລາງແບບ Tabler: ຫົວຕາຕະລາງໂຕນ້ອຍ uppercase ສີມົວ */
.tbl th{
  text-transform:uppercase;font-size:.67rem;letter-spacing:.045em;
  font-weight:600;color:var(--text-3);
}
/* ປ້າຍ label ຂອງ stat card ແບບ Tabler subheader */
.stat .label{text-transform:uppercase;font-size:.66rem;letter-spacing:.06em;font-weight:600}
/* ໄອຄອນເມນູ — Tabler ໃຊ້ stroke 2 */
.nav-ico{stroke-width:1.75}

/* ============================================================
   QR HELPDESK INTAKE (v1.0.19) — ໜ້າ public ແຈ້ງບັນຫາ + ຕິດຕາມ + ໂປສເຕີ
   ============================================================ */
.pubbody{background:var(--bg);min-height:100vh}
.pub-wrap{max-width:640px;margin:0 auto;padding:1.2rem 1rem 3rem}
.pub-head{display:flex;align-items:center;gap:.65rem;margin:0 0 1rem}
.pub-head img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;border:1px solid var(--border)}
.pub-head b{display:block;font-size:1.05rem}
.pub-head span{color:var(--mute);font-size:.8rem}
.pub-prov{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
/* ---- timeline ຕິດຕາມສະຖານະ ---- */
.hdt-steps{margin:.6rem 0 .4rem}
.hdt-step{display:flex;gap:.7rem;align-items:flex-start;position:relative;padding-bottom:1.1rem}
.hdt-step:not(:last-child):before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--border)}
.hdt-step.done:not(:last-child):before{background:var(--ok)}
.hdt-dot{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);border:2px solid var(--border);font-size:.95rem}
.hdt-step.done .hdt-dot{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.hdt-lbl b{display:block;font-size:.92rem}
.hdt-lbl span{color:var(--mute);font-size:.72rem}
.hdt-lbl i{display:block;color:var(--mute);font-size:.75rem;font-style:normal;margin-top:.1rem}
.hdt-step:not(.done) .hdt-lbl b{color:var(--mute);font-weight:500}
.hdt-item{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem .2rem;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.hdt-item:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.hdt-selfqr svg{width:170px;height:170px;border:1px solid var(--border);border-radius:10px;padding:8px;background:#fff}
.hdqr-mini svg{width:72px;height:72px;display:block;background:#fff;border-radius:6px}
/* ---- ໂປສເຕີ A4 ---- */
.posterbody{background:#e6e9ef;margin:0}
.hd-poster{width:210mm;min-height:296mm;margin:8px auto;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;text-align:center;padding:16mm 14mm;box-sizing:border-box;page-break-after:always}
.hd-poster:last-child{page-break-after:auto}
.hdp-head{display:flex;align-items:center;gap:.7rem;align-self:flex-start}
.hdp-head img{width:52px;height:52px;object-fit:contain}
.hdp-head b{display:block;font-size:1.05rem}
.hdp-head span{color:#667;font-size:.8rem}
.hdp-title{font-size:2.1rem;font-weight:800;margin-top:12mm;color:var(--brand,#066fd1)}
.hdp-prov{font-size:1.45rem;font-weight:700;margin:4mm 0 8mm}
.hdp-code{display:inline-block;background:var(--brand,#066fd1);color:#fff;border-radius:10px;padding:.1em .5em;font-size:1.1rem;vertical-align:middle;margin-right:.3em}
.hdp-qr svg{width:120mm;height:120mm}
.hdp-steps{display:flex;gap:6mm;margin-top:9mm;text-align:left}
.hdp-steps>div{flex:1;font-size:.86rem;line-height:1.35}
.hdp-steps b{display:block;width:26px;height:26px;border-radius:50%;background:var(--brand,#066fd1);color:#fff;text-align:center;line-height:26px;margin-bottom:2mm}
.hdp-url{margin-top:auto;padding-top:8mm;font-size:.72rem;color:#667;word-break:break-all}
@media print{
.posterbody{background:#fff}
.hd-poster{margin:0;box-shadow:none}
}
/* v1.0.20 — ປ້າຍລະຫັດຜ່ານເທິງໂປສເຕີ QR */
.hdp-lock{margin-top:6mm;font-size:.95rem;font-weight:600;color:#b45309;background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.30);border-radius:10px;padding:.5rem .9rem}
/* v1.0.21 — ໜ້າອັບເດດລະບົບ */
.su-log{background:var(--sidebar,#182433);color:#c8e1ff;border-radius:8px;padding:.7rem .9rem;font-size:.75rem;line-height:1.55;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:340px;overflow-y:auto}

/* ============================================================
   LOGIN SCENE (v1.0.22) — ສາກເຄື່ອນໄຫວຫຼັງໜ້າ login
   SVG + CSS keyframes ລ້ວນໆ · ຮອງຮັບທີມມືດ · ປິດເອງເມື່ອ
   ຜູ້ໃຊ້ຕັ້ງ reduce-motion
   ============================================================ */
.lg-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lg-scene .lg-sky{position:absolute;inset:0;width:100%;height:100%}
.lg-animated .login-wrap{position:relative;z-index:1;background:transparent}
.lg-animated .login-card{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(6px)}
.lg-animated .login-foot{color:#fff;text-shadow:0 1px 8px rgba(10,30,20,.65);opacity:.95}
/* ---- ສີຟ້າ/ພູ (ທີມແຈ້ງ) ---- */
.lg-sky1{stop-color:#8ec9f5}
.lg-sky2{stop-color:#eaf4fd}
.lg-hill1{stop-color:#79b874}
.lg-hill2{stop-color:#4e9165}
.lg-hill3{fill:#3d7a55;opacity:.85}
.lg-sun{fill:#ffd66b;opacity:.9}
.lg-stars{display:none;fill:#fff}
.lg-cloud{fill:#fff;opacity:.85}
.lg-cloud1{animation:lgDrift 90s linear infinite;transform:translate(-160px,150px)}
.lg-cloud2{animation:lgDrift 130s linear infinite;animation-delay:-40s;transform:translate(-160px,250px)}
.lg-cloud3{animation:lgDrift 70s linear infinite;animation-delay:-20s;transform:translate(-160px,90px)}
@keyframes lgDrift{
0%{transform:translate(-180px,var(--cy,150px))}
100%{transform:translate(1620px,var(--cy,150px))}
}
.lg-cloud1{--cy:150px}
.lg-cloud2{--cy:250px}
.lg-cloud3{--cy:90px}
/* ---- ເສົາໄຟ + ສາຍສົ່ງ: ເສັ້ນປະແລ່ນ = ກະແສໄຟ ---- */
.lg-pylon path{fill:none;stroke:#5c6b7a;stroke-width:3;opacity:.9}
.lg-wire{fill:none;stroke:#5c6b7a;stroke-width:2.5;opacity:.75}
.lg-wire-glow{stroke:var(--brand,#066fd1);stroke-width:3;stroke-dasharray:14 96;stroke-linecap:round;opacity:.95;animation:lgFlow 2.6s linear infinite}
@keyframes lgFlow{
to{stroke-dashoffset:-110}
}
/* ---- ກັງຫັນລົມ ---- */
.lg-mast{fill:#8b98a5}
.lg-hub{fill:#6b7885}
.lg-blade{fill:#cfd8e0}
.lg-blades{animation:lgSpin 6s linear infinite}
.lg-blades-slow{animation:lgSpin 8.5s linear infinite}
@keyframes lgSpin{
to{transform:rotate(360deg)}
}
/* ---- particle ລອຍຂຶ້ນ ---- */
.lg-parts i{position:absolute;bottom:-12px;width:7px;height:7px;border-radius:50%;
  background:color-mix(in srgb,var(--brand,#066fd1) 65%,#fff);opacity:0;
  animation:lgRise 11s linear infinite}
.lg-parts i:nth-child(1){left:6%;animation-delay:0s}
.lg-parts i:nth-child(2){left:16%;animation-delay:3.2s;width:5px;height:5px}
.lg-parts i:nth-child(3){left:26%;animation-delay:6.1s}
.lg-parts i:nth-child(4){left:37%;animation-delay:1.4s;width:4px;height:4px}
.lg-parts i:nth-child(5){left:48%;animation-delay:8.3s}
.lg-parts i:nth-child(6){left:58%;animation-delay:4.6s;width:5px;height:5px}
.lg-parts i:nth-child(7){left:69%;animation-delay:2.2s}
.lg-parts i:nth-child(8){left:79%;animation-delay:7.4s;width:4px;height:4px}
.lg-parts i:nth-child(9){left:88%;animation-delay:5.5s}
.lg-parts i:nth-child(10){left:95%;animation-delay:9.6s;width:5px;height:5px}
@keyframes lgRise{
0%{transform:translateY(0) scale(1);opacity:0}
8%{opacity:.75}
85%{opacity:.35}
100%{transform:translateY(-92vh) scale(.55);opacity:0}
}
/* ---- ທີມມືດ: ຟ້າກາງຄືນ + ດາວກະພິບ ---- */
html[data-theme="dark"] .lg-sky1{stop-color:#0c1b30}
html[data-theme="dark"] .lg-sky2{stop-color:#16283f}
html[data-theme="dark"] .lg-hill1{stop-color:#1e3a34}
html[data-theme="dark"] .lg-hill2{stop-color:#142a26}
html[data-theme="dark"] .lg-hill3{fill:#0f211e}
html[data-theme="dark"] .lg-sun{fill:#f4f6cf;opacity:.95;r:34px}
html[data-theme="dark"] .lg-cloud{opacity:.14}
html[data-theme="dark"] .lg-stars{display:block;animation:lgTwinkle 3.4s ease-in-out infinite alternate}
@keyframes lgTwinkle{
from{opacity:.35}
to{opacity:.95}
}
@media (prefers-reduced-motion: reduce){
.lg-scene *{animation:none!important}
}
@media print{
.lg-scene{display:none}
}

/* ============================================================
   E-BILLING LOGIN SCENE (v1.0.23) — ມືຖື + ໃບບິນ + QR + ຈ່າຍສຳເລັດ
   ============================================================ */
.eb-sky1{stop-color:#7db8ec}
.eb-sky2{stop-color:#e9f3fc}
.eb-bolt-bg{fill:#fff;opacity:.18}
.eb-wave1{fill:#3f7fbe;opacity:.35}
.eb-wave2{fill:#2c5f96;opacity:.45}
/* ---- ໃບບິນລອຍ ---- */
.eb-sheet{fill:#fff;stroke:#c9d6e4;stroke-width:1.5}
.eb-ln{fill:#c7d3e0}
.eb-ln-h{fill:var(--brand,#066fd1);opacity:.75}
.eb-kip{font:700 20px 'Noto Sans',sans-serif;fill:#1f7a3f}
.eb-kip-sm{font-size:16px}
.eb-ok-c{fill:#2fb344;opacity:.15}
.eb-ok-t{fill:none;stroke:#2fb344;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.eb-paper{filter:drop-shadow(0 6px 14px rgba(20,40,70,.18))}
.eb-paper1{animation:ebFloat 9s ease-in-out infinite alternate}
.eb-paper2{animation:ebFloat 12s ease-in-out infinite alternate;animation-delay:-4s}
@keyframes ebFloat{
0%{transform:translate(var(--ex,200px),var(--ey,420px)) rotate(-3deg)}
100%{transform:translate(var(--ex,200px),calc(var(--ey,420px) - 34px)) rotate(2.5deg)}
}
.eb-paper1{--ex:200px;--ey:420px}
.eb-paper2{--ex:340px;--ey:620px}
/* ---- ຫຼຽນ ₭ ---- */
.eb-coin-c{fill:#f4c542;stroke:#d9a520;stroke-width:2.5}
.eb-coin-t{fill:#8a6510;font:800 21px 'Noto Sans',sans-serif;text-anchor:middle}
.eb-coin{animation:ebCoin 7s ease-in-out infinite alternate}
.eb-coin1{--cx:480px;--cy:560px}
.eb-coin2{--cx:120px;--cy:660px;animation-delay:-2.5s}
.eb-coin3{--cx:1050px;--cy:640px;animation-delay:-5s}
@keyframes ebCoin{
0%{transform:translate(var(--cx,480px),var(--cy,560px))}
100%{transform:translate(var(--cx,480px),calc(var(--cy,560px) - 46px))}
}
/* ---- ມືຖື ---- */
.eb-phone{animation:ebBob 6.5s ease-in-out infinite alternate;filter:drop-shadow(0 14px 26px rgba(15,30,55,.28))}
@keyframes ebBob{
0%{transform:translate(1150px,460px)}
100%{transform:translate(1150px,438px)}
}
.eb-ph-body{fill:#243447}
.eb-ph-screen{fill:#fdfefe}
.eb-ph-notch{fill:#0e1826}
.eb-ph-head{fill:var(--brand,#066fd1)}
.eb-ph-bolt{fill:#ffd66b}
.eb-ph-title{font:800 22px 'Noto Sans',sans-serif;fill:#fff}
.eb-qr-bg{fill:#fff;stroke:#c9d6e4;stroke-width:1.5}
.eb-qr-px{fill:#22344c}
.eb-scan{fill:var(--brand,#066fd1);opacity:.85;animation:ebScan 2.6s ease-in-out infinite alternate}
@keyframes ebScan{
0%{transform:translateY(2px)}
100%{transform:translateY(74px)}
}
.eb-kip-ph{font-size:26px}
.eb-pay-btn{fill:var(--brand,#066fd1)}
.eb-pay-t{font:700 17px 'Noto Sans Lao','Noto Sans',sans-serif;fill:#fff}
.eb-paid-c{fill:#2fb344;opacity:.92}
.eb-paid-t{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.eb-paid{animation:ebPaid 3.2s ease-in-out infinite}
@keyframes ebPaid{
0%{opacity:0;transform:translate(46px,150px) scale(.4)}
18%{opacity:1;transform:translate(46px,150px) scale(1.12)}
26%{transform:translate(46px,150px) scale(1)}
78%{opacity:1;transform:translate(46px,150px) scale(1)}
100%{opacity:0;transform:translate(46px,150px) scale(.92)}
}
/* ---- ທີມມືດຂອງສາກ E-Bill ---- */
html[data-theme="dark"] .eb-sky1{stop-color:#0c1b30}
html[data-theme="dark"] .eb-sky2{stop-color:#13253c}
html[data-theme="dark"] .eb-bolt-bg{opacity:.06}
html[data-theme="dark"] .eb-wave1{fill:#12283f;opacity:.8}
html[data-theme="dark"] .eb-wave2{fill:#0d1e30;opacity:.9}
html[data-theme="dark"] .eb-sheet{fill:#e9eef5}
html[data-theme="dark"] .eb-ph-screen{fill:#f2f6fa}

/* ============================================================
   ຂໍ້ຄວາມເທິງສາກ — ປັບສີຕາມທີມ ໃຫ້ເຫັນຊັດສະເໝີ (v1.0.23)
   ============================================================ */
.lg-animated .login-foot{color:#123a5c;text-shadow:0 1px 10px rgba(255,255,255,.85),0 0 3px rgba(255,255,255,.9);opacity:1;font-weight:600}
.lg-animated .login-foot a{color:inherit}
html[data-theme="dark"] .lg-animated .login-foot,
html[data-theme="dark"].lg-animated .login-foot{color:#eaf2fb;text-shadow:0 1px 8px rgba(0,0,0,.75)}

/* ============================================================
   EDL POSTER LOGIN SCENE (v1.0.23) — ຮູບແຕ້ມຈາກໂປສເຕີ E-Bill
   ============================================================ */
.lg-edl{background:linear-gradient(180deg,#f8f9fd 0%,#dae0f3 20%,#b4c2e7 40%,#8ca4db 60%,#6289ce 80%,#3a73c1 100%)}
.edl-art{position:absolute;right:3vw;bottom:0;height:min(76vh,690px);width:auto;max-width:none;
  filter:drop-shadow(0 10px 30px rgba(25,50,100,.18))}
.edl-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lg-edl .lg-cloud{opacity:.9}
.lg-edl .lg-parts i{background:#fff;opacity:0}
@media (max-width:760px){
.edl-art{height:auto;width:130%;right:-15%;bottom:0}
}
html[data-theme="dark"] .lg-edl{background:linear-gradient(180deg,#101c30 0%,#152741 45%,#1b3355 100%)}
html[data-theme="dark"] .edl-art{filter:brightness(.68) saturate(.92)}
html[data-theme="dark"] .lg-edl .lg-cloud{opacity:.12}

/* =====================================================================
   ລາກຈັດລຳດັບ (sortable.js) — v1.0.25
   ===================================================================== */
.sortable-ph{
  border:2px dashed var(--brand);border-radius:10px;background:var(--brand-50);
  margin:.15rem 0;box-sizing:border-box
}
html[data-theme="dark"] .sortable-ph{background:rgba(30,95,212,.14)}
.sortable-drag{
  box-shadow:0 16px 40px rgba(15,23,42,.28);border-radius:10px;
  background:var(--surface);opacity:.96;transform:rotate(-.6deg)
}
body.sorting{user-select:none;-webkit-user-select:none;cursor:grabbing}
.drag-h{
  border:0;background:none;cursor:grab;color:var(--text-3);padding:.1rem .25rem;
  font-size:.95rem;line-height:1;border-radius:6px;touch-action:none;flex:0 0 auto
}
.drag-h:hover{background:var(--surface-2);color:var(--text)}
body.sorting .drag-h{cursor:grabbing}
/* ຫົວກາດໂຄງການລາກໄດ້ */
.proj-head .drag-h{font-size:1.05rem}
@media print{ .drag-h,.sortable-ph{display:none!important} }
.sort-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--ok,#0f9d58);color:#fff;font-size:.85rem;font-weight:600;
  padding:.55rem 1.05rem;border-radius:99px;box-shadow:0 10px 28px rgba(15,23,42,.25);
  opacity:0;pointer-events:none;transition:.18s;z-index:9998
}
.sort-toast.on{opacity:1;transform:translate(-50%,0)}
.sort-toast.bad{background:var(--danger,#dc2626)}

/* =====================================================================
   ຜັງອົງກອນ — ຕົວອອກແບບກ່ອນພິມ ພ້ອມຕົວຢ່າງສົດ (v1.0.25)
   ===================================================================== */
/* ປ້າຍລະດັບໃນຫົວກາດ */
.oc-lv{
  margin-left:auto;flex:0 0 auto;font-size:.6rem;font-weight:800;letter-spacing:.05em;
  color:#fff;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);
  border-radius:99px;padding:.05rem .38rem;line-height:1.5
}
.oc-hd-lvl .oc-lv{display:none}
.oc-st-photo .oc-lv{color:var(--text-2);background:var(--surface-2);border-color:var(--border);
  position:absolute;top:.4rem;right:.4rem;margin:0}
.oc-st-photo .oc-card{position:relative}
/* ບັນທັດທ້າຍເຈ້ຍ — ເຫັນສະເພາະຕອນພິມ ຫຼື ໃນຕົວຢ່າງ */
.oc-print-foot{display:none}
.oc-prev .oc-print-foot,.oc-prev .oc-print-title,.oc-prev .oc-print-sub{display:block}
/* ພື້ນເຈ້ຍ */
.oc-chart-card .card-body{background:var(--oc-bg,transparent)}
html[data-theme="dark"] .oc-chart-card .card-body{background:none}
@media print{ .oc-chart-card .card-body{background:var(--oc-bg,#fff)!important} }

/* ---- ໜ້າຕ່າງອອກແບບ: ເຄື່ອງມືຊ້າຍ + ຕົວຢ່າງເຈ້ຍຂວາ ---- */
.oc-dz{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:1rem;align-items:start}
.oc-tools{display:flex;flex-direction:column;gap:.55rem;max-height:66vh;overflow:auto;padding-right:.35rem}
.oc-tools .field label{font-size:.74rem}
.oc-grp{
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);border-top:1px solid var(--border);padding-top:.6rem;margin-top:.2rem
}
.oc-grp:first-child{border-top:0;margin-top:0;padding-top:0}
.oc-rng{display:flex;gap:.5rem;align-items:center}
.oc-rng input[type=range]{flex:1;min-width:0;accent-color:var(--brand)}
.oc-rng output{font-size:.75rem;font-variant-numeric:tabular-nums;min-width:52px;text-align:right;color:var(--text-2)}
.oc-prevwrap{position:sticky;top:0;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.oc-prev{
  position:relative;overflow:hidden;border:1px solid var(--border);border-radius:10px;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);width:100%
}
/* ຢູ່ກາງກອບສະເໝີ ເຖິງເນື້ອໃນຈະໃຫຍ່ກວ່າກອບກ່ອນຫຍໍ້ */
.oc-prev-in{
  position:absolute;left:50%;top:50%;transform-origin:center center;
  pointer-events:none;will-change:transform
}
.oc-prev-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-3)}
.oc-prev-fit{
  position:absolute;right:.4rem;bottom:.4rem;font-size:.68rem;font-variant-numeric:tabular-nums;
  background:rgba(15,23,42,.72);color:#fff;border-radius:99px;padding:.1rem .5rem
}
@media (max-width:900px){
  .oc-dz{grid-template-columns:1fr}
  .oc-tools{max-height:none;overflow:visible}
  .oc-prevwrap{position:static}
}
/* ຕົວຢ່າງກ່ອນພິມ ຕ້ອງເປັນເຈ້ຍຂາວສະເໝີ ເຖິງຈໍຈະເປັນທີມມືດ */
.oc-prev{
  --bg:#fff;--surface:#fff;--surface-2:#f6f7f9;--border:#c8ced8;
  --text:#000;--text-2:#333;--text-3:#555;--shadow:none;--shadow-lg:none;
  color:#000;color-scheme:light
}
/* ໄລຍະຫ່າງລະຫວ່າງແຖວຫົວຂໍ້ ຕ້ອງມາຈາກ --oc-hgap ຄືກັນກັບຕອນພິມແທ້.
   ແຕ່ກ່ອນຂຽນ 2px ຕາຍໄວ້ ຕົວຢ່າງຈຶ່ງບໍ່ຂະຫຍັບເລີຍເວລາເລື່ອນແຖບນັ້ນ */
.oc-prev .oc-print-title{display:block;text-align:var(--oc-talign,center);font-size:21pt;font-weight:800;
  margin:var(--oc-ttop,0px) 0 var(--oc-hgap,6px);color:#111;width:100%}
.oc-prev .oc-print-sub{display:block;text-align:var(--oc-talign,center);font-size:12.5pt;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#667085;margin:0;width:100%}
/* !important ຍ້ອນເວທີທີ່ສຳເນົາມາຖືກຕັ້ງ margin ໃນ style ຂອງມັນເອງ
   ເພື່ອຈັດໃຫ້ຢູ່ກາງ — ຖ້າບໍ່ມີ ໄລຍະ ຫົວຂໍ້ ↔ ຜັງ ຈະບໍ່ມີຜົນໃນຕົວຢ່າງ */
.oc-prev .oc-stage{margin-top:var(--oc-tgap,10px)!important}
.oc-prev .ocwrap{margin-top:0}
.oc-prev .oc-print-sub:empty{display:none}
.oc-prev .oc-print-foot{display:block;text-align:center;font-size:9pt;color:#667085;margin-top:10px}

/* =====================================================================
   ຫຼັກຖານວຽກໃນເກນວັດແທກ + ໜ້າຜົນງານ (v1.0.26)
   ===================================================================== */
/* ---- ຮູບຫຍໍ້ໃນແຖວເກນ ---- */
.crit-thumbs{display:flex;gap:.3rem;align-items:center;margin-top:.35rem;flex-wrap:wrap}
.crit-th{width:46px;height:34px;border-radius:6px;overflow:hidden;border:2px solid var(--border);
  display:block;flex:0 0 auto;background:var(--surface-2)}
.crit-th img{width:100%;height:100%;object-fit:cover;display:block}
.crit-th.tag-before{border-color:#f59e0b}
.crit-th.tag-after{border-color:#16a34a}
.crit-more{font-size:.72rem;color:var(--text-3);font-weight:700}
.crit-assets{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.3rem}
.asset-chip{
  font-size:.68rem;font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
  border-radius:5px;padding:.05rem .32rem;text-decoration:none;white-space:nowrap
}
.asset-chip:hover{background:var(--brand-50);border-color:var(--brand);color:var(--brand);text-decoration:none}
.wk-flag{display:inline-block;margin-top:.3rem;font-size:.66rem;font-weight:700;color:#a16207;
  background:rgba(245,158,11,.14);border-radius:99px;padding:.05rem .45rem}

/* ---- ຊ່ອງໃສ່ຮູບ ກ່ອນ | ຫຼັງ (photolanes.js) ---- */
.pl{display:flex;flex-direction:column;gap:.55rem}
.pl-lanes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:620px){ .pl-lanes{grid-template-columns:1fr} }
.pl-lane{
  border:2px dashed var(--border);border-radius:12px;padding:.65rem .7rem;
  background:var(--surface-2);transition:background .12s,border-color .12s
}
.pl-lane.pl-before{border-color:rgba(217,119,6,.45)}
.pl-lane.pl-after{border-color:rgba(21,128,61,.4)}
.pl-lane.is-over{border-style:solid;border-color:var(--brand);background:var(--brand-50)}
.pl-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.pl-pill{font-size:.74rem;font-weight:700;border-radius:99px;padding:.08rem .6rem;white-space:nowrap}
.pl-p-before{background:rgba(245,158,11,.16);color:#a16207}
.pl-p-after{background:rgba(22,163,74,.15);color:#15803d}
.pl-p-other{background:var(--surface);color:var(--text-3);border:1px solid var(--border)}
html[data-theme="dark"] .pl-p-before{color:#f0ad3c}
html[data-theme="dark"] .pl-p-after{color:#4bc98a}
.pl-count{margin-left:auto;font-size:.72rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.pl-grid{display:flex;flex-wrap:wrap;gap:.4rem}
.pl-th{
  position:relative;width:72px;height:54px;border-radius:8px;overflow:hidden;flex:0 0 auto;
  border:2px solid var(--border);background:var(--surface);cursor:grab;display:block
}
.pl-th:active{cursor:grabbing}
.pl-th img{width:100%;height:100%;object-fit:cover;display:block}
.pl-th.is-drag{opacity:.45}
.pl-th.is-del{opacity:.38;filter:grayscale(1)}
.pl-th.pl-doc{display:grid;place-items:center;background:var(--surface-2)}
.pl-ico{font-size:1.2rem}
.pl-before .pl-th{border-color:rgba(217,119,6,.7)}
.pl-after .pl-th{border-color:rgba(21,128,61,.65)}
.pl-new{
  position:absolute;left:2px;bottom:2px;font-size:.58rem;font-weight:700;letter-spacing:.04em;
  background:var(--brand);color:#fff;border-radius:99px;padding:0 .3rem
}
.pl-x,.pl-star{
  position:absolute;top:2px;border:0;cursor:pointer;line-height:1;padding:0;
  width:17px;height:17px;border-radius:5px;display:grid;place-items:center;
  background:rgba(15,23,42,.62);color:#fff;font-size:.62rem
}
.pl-x{right:2px}
.pl-x:hover{background:var(--danger)}
.pl-star{left:2px;font-size:.68rem}
.pl-star.on{background:#f59e0b;color:#fff}
.pl-star:hover{background:#f59e0b}
.pl-add{
  width:72px;height:54px;border:1.5px dashed var(--border);border-radius:8px;background:none;
  color:var(--text-3);font-size:1.15rem;cursor:pointer;flex:0 0 auto;font-family:inherit
}
.pl-add:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.pl-hint{font-size:.74rem;color:var(--text-3);line-height:1.6}
.pl-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pl{position:relative}

/* ---- ຕົວເລືອກອຸປະກອນ ---- */
.apick{position:relative}
.apick-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.35rem;min-height:1.4rem}
.apick-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--brand-50);
  border:1px solid rgba(30,95,212,.25);border-radius:8px;padding:.15rem .3rem .15rem .45rem;font-size:.75rem}
.apick-chip b{font-family:ui-monospace,Menlo,Consolas,monospace}
.apick-chip select{font-size:.68rem;padding:.1rem .2rem;border:1px solid var(--border);border-radius:5px;
  background:var(--surface);color:var(--text)}
.apick-x{border:0;background:none;cursor:pointer;color:var(--danger);font-size:.8rem;padding:0 .15rem}
.apick-list{
  display:none;position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:2px;max-height:240px;overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg)
}
.apick-row{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:.42rem .6rem;font-size:.8rem;color:var(--text);border-bottom:1px solid var(--border)}
.apick-row:last-child{border-bottom:0}
.apick-row:hover{background:var(--brand-50)}
.apick-row b{font-family:ui-monospace,Menlo,Consolas,monospace;margin-right:.4rem}
.apick-row span{color:var(--text-3)}

/* ---- ໜ້າຜົນງານ (Our work) ---- */
.wk-filters{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem}
.wk-chiprow{display:flex;gap:.4rem;flex-wrap:wrap}
.wk-chip{
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  border-radius:99px;padding:.35rem .9rem;font-size:.8rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:.13s
}
.wk-chip:hover{background:var(--surface-2);color:var(--text)}
.wk-chip.on{background:var(--oc-head,#12283f);border-color:var(--oc-head,#12283f);color:#fff}
.wk-chip[style*="--chip"].on{background:var(--chip);border-color:var(--chip)}

.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1.1rem}
.wk-card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg,14px);
  overflow:hidden;cursor:pointer;transition:.16s;display:flex;flex-direction:column;box-shadow:var(--shadow)
}
.wk-card:hover,.wk-card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lg);outline:none;border-color:var(--brand)}
.wk-cover{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.wk-cover img{width:100%;height:100%;object-fit:cover;display:block}
.wk-cover.no-img{
  display:grid;place-items:center;padding:1.1rem;text-align:center;
  background:linear-gradient(135deg,hsl(var(--seed,210deg) 55% 32%),hsl(var(--seed,210deg) 60% 52%))
}
.wk-cover.no-img span{color:#fff;font-weight:800;font-size:1.15rem;line-height:1.4;text-shadow:0 2px 12px rgba(0,0,0,.28)}
.wk-ba,.wk-n{
  position:absolute;bottom:.5rem;font-size:.66rem;font-weight:700;color:#fff;
  background:rgba(15,23,42,.66);border-radius:99px;padding:.1rem .5rem;backdrop-filter:blur(3px)
}
.wk-ba{left:.5rem}
.wk-n{right:.5rem}
.wk-body{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.wk-cat{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.wk-title{font-size:.98rem;margin:0;line-height:1.4;color:var(--text)}
.wk-sum{font-size:.82rem;color:var(--text-2);margin:.1rem 0 0;line-height:1.6}
.wk-meta{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:auto;padding-top:.5rem;
  font-size:.72rem;color:var(--text-3)}
.wk-meta span:not(:last-child)::after{content:' ·';margin-left:.55rem}
.wk-edit{
  position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;border-radius:8px;border:0;
  background:rgba(255,255,255,.92);color:#334155;display:grid;place-items:center;cursor:pointer;
  opacity:0;transition:.14s;text-decoration:none;font-size:.85rem
}
.wk-card:hover .wk-edit{opacity:1}
.wk-edit:hover{background:#fff;text-decoration:none}

/* ---- ລາຍລະອຽດຜົນງານ ---- */
.wk-view .modal-body{max-height:74vh;overflow:auto}
.wv-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.wv-chip{font-size:.72rem;font-weight:700;background:var(--surface-2);border:1px solid var(--border);
  border-radius:99px;padding:.15rem .6rem;color:var(--text-2)}
.wv-sum{font-size:.9rem;line-height:1.85;color:var(--text);margin:0 0 1rem}
.wv-lab{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:.9rem 0 .4rem}
.wv-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.wv-imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;border:1px solid var(--border);display:block}
.wv-ba{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.wv-set.is-before .wv-lab{color:#a16207}
.wv-set.is-after  .wv-lab{color:#15803d}
.wv-set.is-before img{border-color:#f59e0b}
.wv-set.is-after  img{border-color:#16a34a}
.wv-assets{display:flex;flex-wrap:wrap;gap:.45rem}
.wv-asset{display:flex;flex-direction:column;gap:.05rem;border:1px solid var(--border);border-radius:9px;
  padding:.4rem .65rem;background:var(--surface-2);text-decoration:none;color:var(--text);min-width:140px}
a.wv-asset:hover{border-color:var(--brand);background:var(--brand-50);text-decoration:none}
.wv-asset b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem}
.wv-asset span{font-size:.74rem;color:var(--text-2)}
.wv-asset i{font-size:.68rem;color:var(--text-3);font-style:normal}
.wv-files{display:flex;flex-wrap:wrap;gap:.4rem}
@media (max-width:700px){ .wv-ba{grid-template-columns:1fr} }

/* ---- ໜ້າສາທາລະນະ ---- */
body.wk-public{background:var(--bg);margin:0}
.wk-hero{
  display:flex;gap:1.2rem;align-items:center;padding:2.2rem max(1.2rem,4vw) 1.8rem;
  background:linear-gradient(120deg,#0d2c4d,#1e5fd4);color:#fff
}
.wk-hero .wk-logo{height:56px;width:auto;flex:0 0 auto;filter:brightness(0) invert(1);opacity:.95}
.wk-hero h1{margin:.15rem 0 .25rem;font-size:1.65rem}
.wk-hero p{margin:0;opacity:.86;font-size:.92rem;max-width:70ch}
.wk-co{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.wk-main{padding:1.6rem max(1.2rem,4vw)}
.wk-foot{padding:1.4rem max(1.2rem,4vw) 2.4rem;text-align:center;font-size:.78rem;color:var(--text-3)}
@media print{
  .wk-hero{background:none;color:#000;border-bottom:2px solid #333}
  .wk-hero .wk-logo{filter:none}
  .wk-card{break-inside:avoid;box-shadow:none}
  .wk-edit{display:none!important}
}

/* =====================================================================
   Dashboard ຜູ້ບໍລິຫານ — ສີ່ໜ້າຕາ + ເກົ້າຜົນພິເສດ (v1.0.29)
   ຄ່າສີທັງໝົດຜ່ານຕົວແປ ຈຶ່ງເຮັດວຽກທັງທີມແຈ້ງ ແລະ ທີມມືດ
   ===================================================================== */
.dash-root{--dv-accent:var(--brand);position:relative}

/* ---- ຜົນພິເສດ: ກາດຄ່ອຍໆປະກົດ ---- */
.dash-root.fx-reveal .stat,.dash-root.fx-reveal > .grid > .card,.dash-root.fx-reveal > .card{
  opacity:0;transform:translateY(10px)
}
.dash-root.fx-reveal.go .stat,.dash-root.fx-reveal.go > .grid > .card,.dash-root.fx-reveal.go > .card{
  opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)
}
/* ---- ແທ່ງ/ແຖບຍືດຂຶ້ນ ---- */
.dash-root.fx-bars .xb-bar span{transition:height .8s cubic-bezier(.2,.8,.2,1)}
.dash-root.fx-bars .progress i{transition:width .9s cubic-bezier(.2,.8,.2,1)}
/* ---- ຍົກກາດຕອນຊີ້ ---- */
.dash-root.fx-lift .stat,.dash-root.fx-lift .card{transition:box-shadow .18s,transform .18s,border-color .18s}
.dash-root.fx-lift .stat:hover,.dash-root.fx-lift .card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--dv-accent)
}
/* ---- ຈຸດສົດກະພິບ ---- */
.dv-live{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--text-3);
  font-variant-numeric:tabular-nums}
.dv-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:block;flex:0 0 auto}
.dash-root.fx-live .dv-live i{animation:dvPulse 1.9s ease-in-out infinite}
@keyframes dvPulse{0%,100%{box-shadow:0 0 0 0 rgba(15,157,88,.5)}50%{box-shadow:0 0 0 6px rgba(15,157,88,0)}}
.dash-root:not(.fx-live) .dv-live{display:none}
/* ---- ວົງແຫວນຄວາມຄືບໜ້າ ---- */
.dring{width:60px;height:60px;flex:0 0 auto;display:none}
.dring circle{fill:none;stroke-width:7}
.dring .dring-b{stroke:var(--border)}
.dring .dring-f{stroke:var(--dv-accent);stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.dash-root.fx-ring .dring{display:block}
.dash-root.fx-ring .stat-ring .progress{display:none}
.stat-ring{display:flex;gap:.8rem;align-items:center}
.stat-ring > div{flex:1;min-width:0}
/* ---- ເສັ້ນແນວໂນ້ມນ້ອຍ ---- */
.dspark{display:none;width:100%;height:24px;margin-top:.35rem}
.dspark path{fill:none;stroke:var(--dv-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dspark .dspark-f{fill:var(--dv-accent);opacity:.13;stroke:none}
.dash-root.fx-spark .dspark{display:block}
/* ---- ແສງເຮືອງ ---- */
.dash-root.fx-glow.dv-command .stat .value{text-shadow:0 0 22px color-mix(in srgb,var(--dv-accent) 55%,transparent)}
.dash-root.fx-glow.dv-command .xb-bar span{box-shadow:0 0 14px color-mix(in srgb,var(--dv-accent) 55%,transparent)}

/* =========== ໜ້າຕາ 1 · ຄລາສສິກ+ (ຄ່າເລີ່ມຕົ້ນ) =========== */
.dash-root.dv-classic .stat{border-top:3px solid var(--dv-accent)}
.dash-root.dv-classic .stat.ok{border-top-color:var(--ok)}
.dash-root.dv-classic .stat.warn{border-top-color:var(--warn)}
.dash-root.dv-classic .stat.danger{border-top-color:var(--danger)}

/* =========== ໜ້າຕາ 2 · ຫ້ອງບັນຊາການ =========== */
.dash-root.dv-command{
  --dv-accent:#31b0ff;
  background:#080f18;color:#e8f2fb;border-radius:16px;padding:1.1rem;margin:-.2rem 0 0;
  --surface:#0f1b28;--surface-2:#132234;--border:#1e3346;--text:#e8f2fb;--text-2:#a9c6de;--text-3:#7fa0bb;
  --brand:#31b0ff;--brand-50:#10263a;--ok:#3ddc97;--warn:#ffc44d;--danger:#ff6b5e;
  --shadow:none;--shadow-lg:0 12px 34px rgba(0,0,0,.5)
}
.dash-root.dv-command::before{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(58% 88% at 16% 0%,rgba(49,176,255,.15),transparent 62%),
             radial-gradient(48% 78% at 92% 100%,rgba(61,220,151,.11),transparent 62%)
}
.dash-root.dv-command .stat,.dash-root.dv-command .card{
  background:linear-gradient(160deg,#101f2e,#0c1723);border-color:#1e3346;position:relative
}
.dash-root.dv-command .stat .value{font-size:2.15rem}
.dash-root.dv-command .stat::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,transparent,var(--dv-accent),transparent);opacity:.55
}
.dash-root.dv-command table.tbl th{color:#a9c6de}
.dash-root.dv-command a{color:#7fc9ff}

/* =========== ໜ້າຕາ 3 · ເບັນໂຕ =========== */
.dash-root.dv-bento .stat,.dash-root.dv-bento .card{border-radius:18px}
.dash-root.dv-bento > .grid.g4:first-of-type{grid-template-columns:1.7fr 1fr 1fr 1fr}
.dash-root.dv-bento > .grid.g4:first-of-type .stat:first-child{
  display:flex;flex-direction:column;justify-content:center;padding:1.3rem 1.4rem;
  background:linear-gradient(150deg,var(--brand-solid,#0b5bd3),color-mix(in srgb,var(--brand) 60%,#19c39a));
  border-color:transparent;color:#fff
}
.dash-root.dv-bento > .grid.g4:first-of-type .stat:first-child .label,
.dash-root.dv-bento > .grid.g4:first-of-type .stat:first-child .small{color:rgba(255,255,255,.82)}
.dash-root.dv-bento > .grid.g4:first-of-type .stat:first-child .value{font-size:2.9rem;color:#fff}
.dash-root.dv-bento > .grid.g4:first-of-type .stat:first-child .dring-b{stroke:rgba(255,255,255,.28)}
.dash-root.dv-bento > .grid.g4:first-of-type .stat:first-child .dring-f{stroke:#fff}
@media (max-width:900px){
  .dash-root.dv-bento > .grid.g4:first-of-type{grid-template-columns:1fr 1fr}
  .dash-root.dv-bento > .grid.g4:first-of-type .stat:first-child{grid-column:span 2}
}

/* =========== ໜ້າຕາ 4 · ລາຍງານ =========== */
.dash-root.dv-report{--dv-accent:#1f3f6e}
.dash-root.dv-report .stat,.dash-root.dv-report .card{
  border-radius:0;box-shadow:none;border-color:var(--border)
}
.dash-root.dv-report .stat{border-top:0;border-left:3px solid var(--dv-accent)}
.dash-root.dv-report .stat .value{font-size:1.6rem}
.dash-root.dv-report .grid.g4{gap:.4rem}
.dash-root.dv-report .xb-bar span{border-radius:0}
.dash-root.dv-report .dring,.dash-root.dv-report .dspark{display:none!important}

/* =========== ໂໝດຈໍໃຫຍ່ =========== */
body.dash-tv .sidebar,body.dash-tv .topbar,body.dash-tv footer,
body.dash-tv .toolbar .btn:not(#dashTv),body.dash-tv .print-head{display:none!important}
body.dash-tv .main{margin-left:0}
body.dash-tv .content{padding:.6rem 1rem;max-width:none}
body.dash-tv .dash-root .stat .value{font-size:2.6rem}
body.dash-tv .dash-root .stat .label{font-size:.9rem}
body.dash-tv .dash-root .xb-bar{height:120px}
body.dash-tv #dashTv{position:fixed;right:1rem;top:1rem;z-index:60;opacity:.35}
body.dash-tv #dashTv:hover{opacity:1}

/* =========== ໜ້າຕ່າງເລືອກໜ້າຕາ =========== */
.dv-styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:.6rem;margin-bottom:.3rem}
.dv-card{
  border:2px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;
  padding:.55rem;text-align:left;font-family:inherit;color:var(--text);display:flex;
  flex-direction:column;gap:.45rem;transition:.14s
}
.dv-card:hover{border-color:var(--brand)}
.dv-card.on{border-color:var(--brand);background:var(--brand-50)}
.dv-card b{font-size:.85rem}
.dv-card span{font-size:.74rem;color:var(--text-3);line-height:1.5}
.dv-mini{height:52px;border-radius:8px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:3px;padding:5px}
.dv-mini i{display:block;border-radius:3px}
.dv-m-classic{background:#eef2f7}
.dv-m-classic i{background:#fff;border-top:2px solid #0b5bd3}
.dv-m-command{background:#080f18}
.dv-m-command i{background:#12202f;box-shadow:0 0 8px rgba(49,176,255,.4)}
.dv-m-bento{background:#eef2f7}
.dv-m-bento i{background:#fff}
.dv-m-bento i:first-child{grid-row:span 2;background:linear-gradient(150deg,#0b5bd3,#19c39a)}
.dv-m-report{background:#fff;border:1px solid #c9d2dc}
.dv-m-report i{background:#f3f6f9;border-left:2px solid #1f3f6e;border-radius:0}
.dv-fx{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.15rem .8rem}
.dv-fx .check{padding:.3rem 0}
.dv-bar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.dv-who{font-size:.76rem;color:var(--text-3);flex:1;min-width:120px}

@media print{
  .dash-root.dv-command{background:#fff!important;color:#000!important;padding:0}
  .dash-root.dv-command::before{display:none}
  .dash-root .dv-live,#dashTv{display:none!important}
  .dash-root .stat,.dash-root .card{opacity:1!important;transform:none!important}
}

/* =====================================================================
   ໜ້າຫຼັກ — ສີ່ໜ້າຕາ (v1.0.30) · ຄົນລະຊຸດກັບໜ້າຜູ້ບໍລິຫານ
   ໂຄງ HTML ດຽວກັນ ປ່ຽນແຕ່ການຈັດວາງ ຈຶ່ງບໍ່ມີເນື້ອຫາໃດຫາຍໄປ
   ===================================================================== */

/* ---------- 1 · ໂຟກັສ (ຄ່າເລີ່ມຕົ້ນ) ------------------------------
   ສິ່ງທີ່ຕ້ອງລົງມືມາກ່ອນ: ເກີນກຳນົດ ແລະ ເຄສຄ້າງ ຂະຫຍາຍໃຫຍ່ຂຶ້ນ
   ສ່ວນຕົວເລກອ້າງອີງ (ຊັບສິນ, ສະມາຊິກ) ຫຍໍ້ລົງເປັນປ້າຍນ້ອຍ */
.dash-root.dv-focus > .grid.g5{grid-template-columns:1.25fr 1.6fr 1.6fr 1fr 1fr;align-items:stretch}
.dash-root.dv-focus > .grid.g5 .stat:nth-child(3),
.dash-root.dv-focus > .grid.g5 .stat:nth-child(4){padding:1.05rem 1.15rem}
.dash-root.dv-focus > .grid.g5 .stat:nth-child(3) .value,
.dash-root.dv-focus > .grid.g5 .stat:nth-child(4) .value{font-size:2.6rem;line-height:1.05}
.dash-root.dv-focus > .grid.g5 .stat:nth-child(4).danger{
  background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 12%,var(--surface)),var(--surface))
}
.dash-root.dv-focus > .grid.g5 .stat:nth-child(3).warn{
  background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 14%,var(--surface)),var(--surface))
}
.dash-root.dv-focus > .grid.g5 .stat:nth-child(2),
.dash-root.dv-focus > .grid.g5 .stat:nth-child(5){padding:.7rem .8rem}
.dash-root.dv-focus > .grid.g5 .stat:nth-child(2) .value,
.dash-root.dv-focus > .grid.g5 .stat:nth-child(5) .value{font-size:1.4rem}
.dash-root.dv-focus > .grid.g4 .stat{padding:.6rem .75rem}
.dash-root.dv-focus > .grid.g4 .value{font-size:1.3rem}
.dash-root.dv-focus .stat{border-left:3px solid transparent}
.dash-root.dv-focus .stat.danger{border-left-color:var(--danger)}
.dash-root.dv-focus .stat.warn{border-left-color:var(--warn)}
.dash-root.dv-focus .stat.ok{border-left-color:var(--ok)}
.dash-root.dv-focus .stat.info{border-left-color:var(--brand)}

/* ---------- 2 · ກະດານງານ -------------------------------------------
   ສາມຖັນເທົ່າກັນ ທຸກກາດສູງເທົ່າກັນ ຄືກະດານວຽກເທິງຝາ */
.dash-root.dv-board > .grid.g-2-1{grid-template-columns:1fr 1fr 1fr;align-items:start}
.dash-root.dv-board > .grid.g-2-1 > div{display:flex;flex-direction:column;gap:1rem}
.dash-root.dv-board > .grid.g-2-1 > div:first-child{display:contents}
.dash-root.dv-board > .grid.g-2-1 > div:first-child > .card{grid-column:span 1}
.dash-root.dv-board .card{border-top:3px solid var(--brand);border-radius:12px}
.dash-root.dv-board .card:nth-of-type(even){border-top-color:var(--ok)}
.dash-root.dv-board .card-head{background:var(--surface-2);border-radius:9px 9px 0 0}
.dash-root.dv-board > .grid.g5{grid-template-columns:repeat(5,1fr)}
.dash-root.dv-board .stat{border-radius:12px}
@media (max-width:1100px){
  .dash-root.dv-board > .grid.g-2-1{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .dash-root.dv-board > .grid.g-2-1{grid-template-columns:1fr}
  .dash-root.dv-board > .grid.g-2-1 > div:first-child{display:flex}
}

/* ---------- 3 · ນິດຕະຍະສານ -----------------------------------------
   ແຖບຫົວເຕັມກວ້າງ ຕົວເລກຄວາມຄືບໜ້າເປັນຕົວອັກສອນໃຫຍ່ */
.dash-root.dv-editorial > .grid.g5{
  grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;gap:0;
  border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface)
}
.dash-root.dv-editorial > .grid.g5 .stat{
  border:0;border-right:1px solid var(--border);border-radius:0;box-shadow:none;
  padding:1.15rem 1.2rem;background:none
}
.dash-root.dv-editorial > .grid.g5 .stat:last-child{border-right:0}
.dash-root.dv-editorial > .grid.g5 .stat:first-child{
  background:linear-gradient(135deg,var(--brand-50),transparent 70%)
}
.dash-root.dv-editorial > .grid.g5 .stat:first-child .value{
  font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;letter-spacing:-.03em;font-weight:800
}
.dash-root.dv-editorial > .grid.g5 .stat .label{
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7
}
.dash-root.dv-editorial > .grid.g4{
  border:1px solid var(--border);border-radius:14px;overflow:hidden;gap:0;background:var(--surface)
}
.dash-root.dv-editorial > .grid.g4 .stat{
  border:0;border-right:1px solid var(--border);border-radius:0;box-shadow:none;background:none
}
.dash-root.dv-editorial > .grid.g4 .stat:last-child{border-right:0}
.dash-root.dv-editorial .card{border-radius:16px}
.dash-root.dv-editorial .card-head h2,.dash-root.dv-editorial .card-head h3{
  font-size:1.02rem;letter-spacing:-.01em
}
.dash-root.dv-editorial > .grid.g-2-1{grid-template-columns:1.85fr 1fr}
@media (max-width:900px){
  .dash-root.dv-editorial > .grid.g5,.dash-root.dv-editorial > .grid.g4{
    grid-template-columns:1fr 1fr;border-radius:14px
  }
  .dash-root.dv-editorial > .grid.g5 .stat,.dash-root.dv-editorial > .grid.g4 .stat{
    border-bottom:1px solid var(--border)
  }
}

/* ---------- 4 · ຮວມແໜ້ນ --------------------------------------------
   ບີບທຸກຢ່າງໃຫ້ພໍດີໜ້າຈໍດຽວ — ເໝາະໂນ໊ດບຸກຈໍນ້ອຍ */
.dash-root.dv-compact > .grid{gap:.5rem!important;margin-bottom:.6rem!important}
.dash-root.dv-compact .stat{padding:.5rem .65rem;border-radius:8px}
.dash-root.dv-compact .stat .label{font-size:.66rem}
.dash-root.dv-compact .stat .value{font-size:1.3rem;line-height:1.2}
.dash-root.dv-compact .stat .hint,.dash-root.dv-compact .stat .small{font-size:.64rem}
.dash-root.dv-compact .stat .progress{height:4px;margin-top:.3rem!important}
.dash-root.dv-compact .dring{width:38px;height:38px}
.dash-root.dv-compact .dspark{height:16px}
.dash-root.dv-compact .card{border-radius:9px;margin-bottom:.6rem}
.dash-root.dv-compact .card-head{padding:.45rem .7rem;min-height:0}
.dash-root.dv-compact .card-head h2,.dash-root.dv-compact .card-head h3{font-size:.84rem}
.dash-root.dv-compact .card-body{padding:.6rem .7rem}
.dash-root.dv-compact .card-body.scroll-y{max-height:180px}
.dash-root.dv-compact table.tbl th,.dash-root.dv-compact table.tbl td{padding:.28rem .45rem;font-size:.76rem}
.dash-root.dv-compact .kv dt,.dash-root.dv-compact .kv dd{padding:.2rem 0;font-size:.78rem}

/* ---------- ຮູບຍ່ອຍໃນໜ້າຕ່າງເລືອກ (ໜ້າຫຼັກ) ---------- */
.dv-m-focus{background:#eef2f7}
.dv-m-focus i{background:#fff;border-left:3px solid #d0342c}
.dv-m-focus i:nth-child(2){border-left-color:#e08a00}
.dv-m-focus i:nth-child(3),.dv-m-focus i:nth-child(4){border-left-color:#c9d2dc;opacity:.7}
.dv-m-board{background:#eef2f7}
.dv-m-board i{background:#fff;border-top:3px solid #0b5bd3}
.dv-m-board i:nth-child(2),.dv-m-board i:nth-child(3){border-top-color:#0f9d58}
.dv-m-editorial{background:#eef2f7}
.dv-m-editorial i{background:#fff}
.dv-m-editorial i:first-child{grid-column:span 2;background:linear-gradient(120deg,#0b5bd3,#7cc0ff)}
.dv-m-compact{background:#eef2f7;gap:2px;padding:4px}
.dv-m-compact i{background:#fff;border-radius:2px}

/* ---- ໂໝດຈັດຜັງເອງ (ລາກກາດ) ---- */
.ocwrap.oc-arrange .oc-card{cursor:grab;touch-action:none}
.ocwrap.oc-arrange .oc-card:hover{outline:2px solid var(--brand);outline-offset:2px}
.ocwrap.oc-arrange .oc-card.is-dragging{
  cursor:grabbing;opacity:.92;z-index:9;box-shadow:0 16px 40px rgba(15,23,42,.32)
}
.ocwrap.oc-arrange .oc-card a{pointer-events:auto}
@media print{ .ocwrap.oc-arrange .oc-card{outline:0!important} }

/* =====================================================================
   ຜັງອົງກອນ — ເວທີ (ຫົວຂໍ້ + ຜັງ) ຈັດວາງດ້ວຍຄ່າຊຸດດຽວ (v1.0.33)
   ຄ່າທັງໝົດມາຈາກຕົວແປ CSS ທີ່ໜ້າຈໍ ຕົວຢ່າງ ແລະ ເຈ້ຍພິມ ໃຊ້ຮ່ວມກັນ
   ===================================================================== */
/* width:max-content = ເວທີກວ້າງເທົ່າເນື້ອໃນຈິງ ຈຶ່ງວັດເພື່ອຫຍໍ້ໃຫ້ພໍດີເຈ້ຍໄດ້ຖືກ
   ແລະ ຜັງບໍ່ຖືກບີບຈົນກາດຂວາຫຼຸດອອກນອກເຈ້ຍ */
.oc-stage{display:flex;flex-direction:column;align-items:center;
  width:max-content;margin:0 auto}
.oc-stage .ocwrap{flex:0 0 auto}
/* ໄລຍະຫ່າງລະຫວ່າງແຖວຫົວຂໍ້ */
.oc-print-title{margin-bottom:var(--oc-hgap,6px)}
.oc-print-sub{margin-bottom:0}

/* ===== ເຮັດສຳເນົາຊັບສິນ (v1.0.35) ===== */
.dup-src{background:var(--soft);border:1px solid var(--border);border-radius:8px;
  padding:.5rem .7rem;margin-bottom:.7rem;font-size:.85rem}
.dup-codes{display:flex;flex-wrap:wrap;gap:.35rem;min-height:34px;align-content:flex-start;
  max-height:118px;overflow-y:auto;padding:.4rem;border:1px dashed var(--border);border-radius:8px;
  background:var(--surface)}
.dup-code{background:var(--soft);border:1px solid var(--border);border-radius:6px;
  padding:.1rem .45rem;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== ຂອງນັບຈຳນວນ (v1.0.36) ===== */
.ab-tabs{display:flex;gap:.4rem;margin:0 0 .8rem;flex-wrap:wrap}
.ab-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:99px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-size:.85rem;font-weight:600;text-decoration:none;transition:background .12s,color .12s}
.ab-tab:hover{background:var(--soft)}
.ab-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ab-low{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:99px;background:var(--danger);color:#fff;font-size:.7rem;line-height:1}
.ab-tab.on .ab-low{background:#fff;color:var(--danger)}
.ab-bal{font-weight:700;font-variant-numeric:tabular-nums;font-size:.95rem}
.ab-bal.low{color:var(--danger)}
.ab-where{display:inline-block;background:var(--soft);border:1px solid var(--border);border-radius:6px;
  padding:.06rem .4rem;margin:.1rem .22rem .1rem 0;font-size:.74rem;white-space:nowrap}
tr.ab-lowrow > td{background:color-mix(in srgb, var(--danger) 7%, transparent)}
@media print{ .ab-tabs{display:none} tr.ab-lowrow > td{background:none} }
.ab-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.2rem 0 .7rem}
.ab-chip{background:var(--soft);border:1px solid var(--border);border-radius:99px;
  padding:.2rem .7rem;font-size:.8rem;cursor:pointer;color:var(--text-2)}
.ab-chip:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* =====================================================================
   Upload & Check — ສະຫຼຸບການປ່ຽນແປງກ່ອນຕິດຕັ້ງ (v1.0.44)
   ===================================================================== */
.su-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin:.2rem 0 .4rem}
.su-kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:.6rem .7rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.su-kpi .su-n{font-size:1.35rem;font-weight:800;line-height:1.1;white-space:nowrap}
.su-kpi .su-l{font-size:.72rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-kpi.su-add{border-color:#bbf7d0;background:#f0fdf4}
.su-kpi.su-upd{border-color:#bfdbfe;background:#eff6ff}
.su-kpi.su-fix{border-color:#fed7aa;background:#fff7ed}
.su-kpi.su-rem{border-color:#fecaca;background:#fef2f2}
.su-kpi.su-unc{border-color:var(--border);background:var(--surface-2)}
html[data-theme="dark"] .su-kpi.su-add{background:#052e1a;border-color:#14532d}
html[data-theme="dark"] .su-kpi.su-upd{background:#0b2545;border-color:#1e3a8a}
html[data-theme="dark"] .su-kpi.su-fix{background:#3a2206;border-color:#7c2d12}
html[data-theme="dark"] .su-kpi.su-rem{background:#3f1212;border-color:#7f1d1d}
.su-diff td{vertical-align:top}
.su-diff .mono{word-break:break-all}
.su-notes{white-space:pre-wrap;font-size:.78rem;line-height:1.5;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:.7rem .8rem;max-height:260px;overflow:auto;margin:0}
@media (max-width:720px){
  .su-diff thead{display:none}
  .su-diff tbody tr{display:block;border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;padding:.4rem}
  .su-diff tbody td{display:block;border:none;padding:.15rem .2rem}
}