/* ═══════════════════════════════════════════════════════════════
   EDL BOD — ລະບົບຄຸ້ມຄອງເອກະສານ ສະພາບໍລິຫານ ຟຟລ
   One stylesheet for the whole app.
   ═══════════════════════════════════════════════════════════════ */

/* ── ຟອນ / Fonts ──────────────────────────────────────────────────
   Lao   : Phetsarath OT  (the Lao standard font, OFL)
   Latin : Inter          (modern UI face for English & numbers)
   Both are bundled in assets/fonts — the app needs no internet.
   `unicode-range` on Phetsarath means it is used ONLY for Lao
   characters, so digits and English always come from Inter and the
   two never fight over the same glyph.

   ► ຢາກປ່ຽນຟອນລາວ? / To switch the Lao font, change --lao-font below to
     'Phetsarath' (the national standard, also bundled) — nothing else moves.
   ───────────────────────────────────────────────────────────────── */

/* Noto Sans Lao — the font in use. All five weights the UI needs are real
   cuts, so bold headings are true bold rather than smeared by the browser. */
@font-face{font-family:'Noto Sans Lao';font-style:normal;font-weight:400;font-display:swap;
    src:url('fonts/noto-sans-lao-lao-400-normal.woff2') format('woff2'),
        url('fonts/noto-sans-lao-lao-400-normal.woff')  format('woff');
    unicode-range:U+0E80-0EFF, U+200B, U+25CC;}
@font-face{font-family:'Noto Sans Lao';font-style:normal;font-weight:500;font-display:swap;
    src:url('fonts/noto-sans-lao-lao-500-normal.woff2') format('woff2');
    unicode-range:U+0E80-0EFF, U+200B, U+25CC;}
@font-face{font-family:'Noto Sans Lao';font-style:normal;font-weight:600;font-display:swap;
    src:url('fonts/noto-sans-lao-lao-600-normal.woff2') format('woff2');
    unicode-range:U+0E80-0EFF, U+200B, U+25CC;}
@font-face{font-family:'Noto Sans Lao';font-style:normal;font-weight:700;font-display:swap;
    src:url('fonts/noto-sans-lao-lao-700-normal.woff2') format('woff2'),
        url('fonts/noto-sans-lao-lao-700-normal.woff')  format('woff');
    unicode-range:U+0E80-0EFF, U+200B, U+25CC;}
@font-face{font-family:'Noto Sans Lao';font-style:normal;font-weight:800;font-display:swap;
    src:url('fonts/noto-sans-lao-lao-800-normal.woff2') format('woff2');
    unicode-range:U+0E80-0EFF, U+200B, U+25CC;}

/* Phetsarath — kept bundled so you can switch back with one line */
@font-face{font-family:'Phetsarath';font-style:normal;font-weight:400;font-display:swap;
    src:url('fonts/phetsarath-lao-400-normal.woff2') format('woff2'),
        url('fonts/phetsarath-lao-400-normal.woff')  format('woff');
    unicode-range:U+0E80-0EFF, U+200B, U+25CC;}
@font-face{font-family:'Phetsarath';font-style:normal;font-weight:700;font-display:swap;
    src:url('fonts/phetsarath-lao-700-normal.woff2') format('woff2'),
        url('fonts/phetsarath-lao-700-normal.woff')  format('woff');
    unicode-range:U+0E80-0EFF, U+200B, U+25CC;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
    src:url('fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
    src:url('fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
    src:url('fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
    src:url('fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
    src:url('fonts/inter-latin-800-normal.woff2') format('woff2');}

:root{
    --lao-font:'Noto Sans Lao';        /* ← ປ່ຽນເປັນ 'Phetsarath' ໄດ້ / swap to 'Phetsarath' here */
    --app-font:var(--lao-font),'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',
               'Phetsarath','Saysettha OT',Arial,sans-serif;
    --navy:#0d2340; --navy-2:#143257; --navy-3:#1d436f;
    --bg:#f4f6fb; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --soft:#94a3b8;
    --line:#e4e9f2; --line-2:#eef2f8;
    --brand:#2563eb; --brand-2:#3b82f6; --brand-soft:#eff5ff;
    --green:#16a34a; --amber:#d97706; --red:#dc2626; --violet:#7c3aed;
    /* ── ສີ ແລະ ຮູບແບບ ໜ້າລາຍລະອຽດ / Detail page text ─────────────
       ແກ້ 6 ແຖວນີ້ ແລ້ວທຸກໜ້າລາຍລະອຽດປ່ຽນຕາມ.
       Edit these six lines and every detail page follows.
         weight : 400 ທຳມະດາ · 600 ໜາປານກາງ · 700 ໜາ · 800 ໜາຫຼາຍ
         style  : normal ຫຼື italic
       ──────────────────────────────────────────────────────────── */
    --dl-label:#1e3a8a;          /* ຫົວຂໍ້ລາວ / Lao heading — dark blue */
    --dl-label-weight:800;
    --dl-label-style:normal;
    --dl-label-en:#64748b;       /* ບັນທັດອັງກິດນ້ອຍ / small English line */

    --dl-value:#0f172a;          /* ຂໍ້ຄວາມ / the value — black */
    --dl-value-weight:600;
    --dl-value-style:normal;

    --r:14px; --r-sm:10px;
    --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    --shadow-lg:0 12px 40px rgba(15,23,42,.14);
    --sidebar:252px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
    font-family:var(--app-font);
    background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}

/* ── app frame ────────────────────────────────────────────────── */
.app{display:flex;min-height:100vh;}

.sidebar{
    width:var(--sidebar); flex:0 0 var(--sidebar); background:linear-gradient(175deg,var(--navy) 0%,var(--navy-2) 62%,var(--navy-3) 100%);
    color:#e8eefb; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:40;
}
.sb-brand{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.09);display:flex;gap:11px;align-items:center;}
.sb-logo{width:44px;height:44px;border-radius:12px;background:#fff;flex:0 0 44px;padding:3px;
    display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28);}
.sb-logo img{width:100%;height:100%;object-fit:contain;display:block;}
.sb-brand .t{min-width:0;}
.sb-brand .t b{display:block;font-size:13.5px;font-weight:800;line-height:1.35;}
.sb-brand .t span{display:block;font-size:10.5px;color:#93a7c6;letter-spacing:.3px;}

/* only shown while the mobile drawer is open */
.sb-close{display:none;margin-left:auto;background:rgba(255,255,255,.10);border:none;color:#cfdcf1;
    width:32px;height:32px;border-radius:9px;font-size:15px;cursor:pointer;flex:0 0 32px;}
.sb-close:hover{background:rgba(255,255,255,.20);color:#fff;}
.sb-nav{flex:1;overflow-y:auto;padding:14px 10px 10px;}
.sb-cap{font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:#7d93b5;padding:12px 10px 6px;}
.sb-link{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:13px;font-weight:600;
    color:#cfdcf1;margin-bottom:2px;transition:background .13s,color .13s;position:relative;}
.sb-link:hover{background:rgba(255,255,255,.08);color:#fff;}
.sb-link.on{background:rgba(59,130,246,.22);color:#fff;font-weight:800;}
.sb-link.on:before{content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#60a5fa;}
.sb-link .ic{width:20px;text-align:center;font-size:15px;flex:0 0 20px;}
.sb-link .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-link .cnt{margin-left:auto;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.13);
    border-radius:20px;padding:1px 7px;color:#dbe7fa;}
.sb-link.soon .lbl{opacity:.62;}
.sb-link .soon-tag{margin-left:auto;font-size:9px;font-weight:800;background:rgba(255,255,255,.10);
    color:#93a7c6;border-radius:5px;padding:2px 5px;letter-spacing:.4px;}

.sb-foot{padding:12px 14px 16px;border-top:1px solid rgba(255,255,255,.09);}
.sb-user{display:flex;align-items:center;gap:10px;}
.sb-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#60a5fa,#2563eb);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex:0 0 34px;}
.sb-user .who{min-width:0;flex:1;}
.sb-user .who b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user .who span{display:block;font-size:10px;color:#8ea5c6;}
.sb-out{color:#8ea5c6;font-size:15px;padding:5px;border-radius:8px;}
.sb-out:hover{background:rgba(255,255,255,.10);color:#fff;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ── top bar ──────────────────────────────────────────────────── */
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:0 22px;height:62px;
    display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30;}
.burger{display:none;background:none;border:none;font-size:20px;cursor:pointer;padding:6px;border-radius:8px;color:var(--ink);}
.tb-title{min-width:0;}
.tb-title h1{font-size:17px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-title p{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:9px;}

.content{padding:20px 22px 60px;flex:1;}
.content.wide{padding-left:16px;padding-right:16px;}

/* ── buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:var(--r-sm);
    padding:9px 15px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .13s,box-shadow .13s;}
.btn:hover{filter:brightness(.96);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.28);}
.btn-dark{background:#0f172a;color:#fff;}
.btn-ghost{background:#fff;color:#334155;border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:#c7d5ec;background:#fafcff;}
.btn-soft{background:var(--brand-soft);color:#1d4ed8;}
.btn-green{background:var(--green);color:#fff;}
.btn-danger{background:#fee2e2;color:#b91c1c;}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:8px;}
.btn-lg{padding:12px 22px;font-size:15px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ── cards ────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);}
.card-p{padding:18px 20px;}
.card-h{padding:14px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.card-h h2{font-size:14.5px;font-weight:800;}
.card-h .sub{font-size:11.5px;color:var(--muted);font-weight:600;}

/* ── flash ────────────────────────────────────────────────────── */
.flash{padding:11px 16px;border-radius:var(--r-sm);font-weight:700;font-size:13.5px;margin-bottom:16px;
    display:flex;align-items:center;gap:9px;}
.flash.ok{background:#dcfce7;color:#14532d;border:1px solid #86efac;}
.flash.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}
.flash.info{background:var(--brand-soft);color:#1e40af;border:1px solid #bfdbfe;}

/* ── stat tiles ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);
    position:relative;overflow:hidden;display:block;transition:transform .13s,box-shadow .13s;}
a.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.stat .bar{position:absolute;left:0;top:0;bottom:0;width:4px;}
.stat .k{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.stat .k .lo{display:block;text-transform:none;font-size:12.5px;color:var(--ink);letter-spacing:0;}
.stat .v{font-size:29px;font-weight:800;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums;}
.stat .d{font-size:11.5px;color:var(--soft);margin-top:2px;}

/* ── filter bar ───────────────────────────────────────────────── */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;}
.fgrp{display:flex;flex-direction:column;gap:4px;min-width:0;}
.fgrp label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);}
.fgrp input,.fgrp select{border:1.5px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13px;background:#fff;min-width:130px;}
.fgrp input:focus,.fgrp select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.fgrp.grow{flex:1;min-width:200px;} .fgrp.grow input{width:100%;min-width:0;}
.search-wrap{position:relative;}
.search-wrap input{padding-left:32px;width:100%;}
.search-wrap .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--soft);font-size:13px;pointer-events:none;}
.search-wrap input{padding-right:32px;}
.q-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:#eef2f8;
    color:#64748b;width:20px;height:20px;border-radius:50%;font-size:11px;cursor:pointer;line-height:1;
    display:flex;align-items:center;justify-content:center;}
.q-clear:hover{background:#fee2e2;color:#b91c1c;}
.s-note{font-weight:700;color:var(--brand);text-transform:none;letter-spacing:0;margin-left:4px;}

/* ── live search: the match, painted light green ──────────────── */
mark.hl{background:#bbf7d0;color:#064e3b;border-radius:3px;padding:0 1px;font-weight:800;}
.cell-no mark.hl{background:#bbf7d0;color:#065f46;}
.tag mark.hl{background:#86efac;color:#064e3b;}
/* the card dims very slightly while the new results are on their way */
#results{transition:opacity .12s;}
#results.searching{opacity:.55;}
#results.searching *{cursor:progress;}

/* ── table ────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);max-width:100%;}
/* grid children default to min-width:auto, which lets a wide table push the
   whole card past the viewport — this keeps them inside their column */
.dash-grid>*,.view-grid>*,.usr-grid>*{min-width:0;}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;}
table.tbl th{background:#f7f9fd;border-bottom:1.5px solid var(--line);padding:9px 11px;text-align:left;
    font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;color:#4a5b74;
    white-space:nowrap;position:sticky;top:0;z-index:5;}
table.tbl th .lo{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--ink);font-weight:800;}
table.tbl td{padding:9px 11px;border-bottom:1px solid var(--line-2);vertical-align:top;}
table.tbl tbody tr:hover td{background:#f8fbff;}
table.tbl tbody tr:last-child td{border-bottom:none;}
/* rows in the register open on a double-click — show that they are live */
#results table.tbl tbody tr{cursor:pointer;}
#results table.tbl tbody tr:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
#results table.tbl tbody tr .row-actions,
#results table.tbl tbody tr .rowmenu{cursor:default;}
/* compact view: fixed columns so the whole row fits one screen */
table.tbl.fixed{table-layout:fixed;width:100%;}
table.tbl.fixed td{overflow:hidden;text-overflow:ellipsis;word-break:break-word;}
.cell-clamp{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cell-no{font-weight:800;font-variant-numeric:tabular-nums;color:var(--brand);}
.cell-date{white-space:nowrap;font-variant-numeric:tabular-nums;color:#475569;}
.cell-muted{color:var(--muted);}
/* keep the buttons reachable when the table scrolls sideways */
table.tbl th:last-child,table.tbl td:last-child{position:sticky;right:0;background:#fff;z-index:4;
    box-shadow:-6px 0 8px -6px rgba(15,23,42,.18);}
table.tbl th:last-child{background:#f7f9fd;z-index:6;}
table.tbl tbody tr:hover td:last-child{background:#f8fbff;}
.row-actions{display:flex;gap:5px;white-space:nowrap;}
.ia{width:27px;height:27px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
    font-size:13px;border:1px solid var(--line);background:#fff;cursor:pointer;color:#475569;}
.ia:hover{background:#f1f5fb;border-color:#c7d5ec;}
.ia.del:hover{background:#fee2e2;border-color:#fca5a5;color:#b91c1c;}

/* ── ⋯ ເມນູແຖວ / row menu ─────────────────────────────────────────
   View, Edit and Delete used to sit in the row and eat a whole column.
   They live behind one ⋯ button now. The popup is position:fixed so the
   side-scrolling table cannot clip it — app.js does the placing. */
.rowmenu{position:relative;display:flex;justify-content:flex-end;}
.rm-btn{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:#fff;
    color:#475569;font-size:17px;line-height:1;cursor:pointer;display:inline-flex;
    align-items:center;justify-content:center;padding:0;letter-spacing:1px;}
.rm-btn:hover{background:#f1f5fb;border-color:#c7d5ec;color:var(--ink);}
.rm-btn[aria-expanded="true"]{background:var(--brand);border-color:var(--brand);color:#fff;}
.rm-pop{position:fixed;z-index:60;min-width:184px;padding:5px;background:#fff;
    border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
    display:flex;flex-direction:column;gap:1px;}
.rm-pop[hidden]{display:none;}
.rm-pop form{margin:0;display:block;}
.rm-pop a,.rm-pop button{display:flex;align-items:center;gap:9px;width:100%;
    padding:9px 11px;border:none;border-radius:8px;background:none;cursor:pointer;
    font:inherit;font-size:13px;font-weight:600;color:var(--ink);text-align:left;text-decoration:none;}
.rm-pop .i{font-size:14px;width:18px;text-align:center;flex:0 0 auto;}
.rm-pop a:hover,.rm-pop button:hover,
.rm-pop a:focus-visible,.rm-pop button:focus-visible{background:#eef4ff;outline:none;}
.rm-pop .del{color:#b91c1c;}
.rm-pop .del:hover,.rm-pop .del:focus-visible{background:#fee2e2;}
/* a finger needs more room than a mouse pointer */
@media (max-width:820px),(pointer:coarse){
    .rm-btn{width:36px;height:36px;font-size:19px;}
    .rm-pop a,.rm-pop button{padding:12px 13px;font-size:14px;}
}

.chip{display:inline-block;font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 9px;white-space:nowrap;}
.tag{display:inline-block;font-size:11px;font-weight:700;background:#f1f5f9;color:#475569;
    border-radius:6px;padding:2px 7px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.tag.b{background:var(--brand-soft);color:#1d4ed8;}
.tag.v{background:#f5f3ff;color:#6d28d9;}
.clip{font-size:11px;color:var(--brand);font-weight:700;}

.empty{padding:46px 20px;text-align:center;color:var(--soft);}
.empty .em{font-size:38px;display:block;margin-bottom:8px;}
.empty b{display:block;color:#475569;font-size:15px;margin-bottom:4px;}

/* ── pagination ───────────────────────────────────────────────── */
.pager{display:flex;align-items:center;gap:6px;padding:12px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap;}
.pager .info{font-size:12px;color:var(--muted);margin-right:auto;}
.pg{min-width:31px;height:31px;padding:0 9px;border-radius:8px;border:1px solid var(--line);background:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#475569;}
.pg:hover{background:#f1f5fb;} .pg.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.pg.off{opacity:.4;pointer-events:none;}

/* ── forms ────────────────────────────────────────────────────── */
.fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0;}
.fld.c3{grid-column:span 3;} .fld.c4{grid-column:span 4;} .fld.c6{grid-column:span 6;}
.fld.c8{grid-column:span 8;} .fld.c12{grid-column:span 12;}
.fld label{font-size:11.5px;font-weight:800;color:#334155;}
.fld label .en{font-weight:600;color:var(--soft);font-size:10.5px;}
.fld label .rq{color:var(--red);}
.fld input,.fld select,.fld textarea{
    border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;background:#fff;width:100%;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.fld textarea{resize:vertical;min-height:76px;line-height:1.6;}
.fld .hint{font-size:11px;color:var(--soft);}
.sec-title{grid-column:1/-1;font-size:12px;font-weight:800;color:var(--brand);text-transform:uppercase;
    letter-spacing:.6px;padding-top:6px;border-top:1px solid var(--line-2);margin-top:4px;}
.sec-title:first-child{border-top:none;margin-top:0;padding-top:0;}
.formbar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:13px 20px;
    display:flex;justify-content:flex-end;gap:10px;border-radius:0 0 var(--r) var(--r);z-index:10;}

/* ── ຂໍ້ຄວາມມີສີ / coloured-text editor ────────────────────────── */
.rt{border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;overflow:hidden;}
.rt:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.rt-bar{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#f8fafc;
    border-bottom:1px solid var(--line-2);flex-wrap:wrap;}
.rt-bar button{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:7px;
    cursor:pointer;font-size:13px;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.rt-bar button:hover{background:#f1f5fb;border-color:#c7d5ec;}
.rt-bar button:active{transform:translateY(1px);}
.rt-c{font-weight:800;}
.rt-c-default{color:#0f172a;}
.rt-c-green{color:#15803d;} .rt-c-green:hover{background:#dcfce7;border-color:#86efac;}
.rt-c-blue{color:#1d4ed8;}  .rt-c-blue:hover{background:#dbeafe;border-color:#93c5fd;}
.rt-c-red{color:#dc2626;}   .rt-c-red:hover{background:#fee2e2;border-color:#fca5a5;}
.rt-sep{width:1px;height:18px;background:var(--line);margin:0 3px;}
.rt-hint{font-size:10.5px;color:var(--soft);margin-left:auto;}
.rt-ed{min-height:82px;max-height:340px;overflow-y:auto;padding:10px 12px;font-size:13.5px;
    line-height:1.65;outline:none;white-space:pre-wrap;word-break:break-word;}
.rt-ed:empty:before{content:attr(data-placeholder);color:#cbd5e1;}
.rt-ed b,.rt-ed strong{font-weight:800;}
/* nothing selected yet — nudge the hint */
.rt-nosel .rt-hint{color:var(--red);font-weight:800;}
.rt-nosel .rt-bar{background:#fef2f2;}
.rt-empty{border-color:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,.13);}
@media (max-width:640px){ .rt-hint{display:none;} }

/* ── ຂະໜາດຕົວອັກສອນ / page text size ─────────────────────────── */
body{zoom:var(--ui-zoom,1);}          /* set by the A− A+ buttons */
.zoomer{display:flex;align-items:center;gap:2px;background:#f1f5f9;border-radius:9px;padding:3px;flex:0 0 auto;}
.zoomer button{width:27px;height:27px;border:none;background:#fff;border-radius:7px;cursor:pointer;
    font-weight:800;color:#334155;font-family:inherit;display:flex;align-items:center;justify-content:center;
    box-shadow:0 1px 2px rgba(15,23,42,.08);padding:0;}
.zoomer button:hover:not([disabled]){background:var(--brand);color:#fff;}
.zoomer button[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none;}
.zoomer .zl{font-size:10.5px;font-weight:800;color:var(--muted);min-width:34px;text-align:center;cursor:pointer;}
.zoomer .zl:hover{color:var(--brand);}
.zoomer .zs{font-size:11px;} .zoomer .zb{font-size:15px;}

/* ── combo box (our styled replacement for <datalist>) ────────── */
.combo{position:relative;width:100%;}
.combo input{width:100%;padding-right:34px;}
.combo-caret{position:absolute;right:1px;top:1px;bottom:1px;width:31px;border:none;background:none;
    color:var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:0 9px 9px 0;}
.combo-caret:hover{color:var(--brand);background:#f6f9ff;}
.combo.on .combo-caret{color:var(--brand);transform:none;}
.combo.on .combo-caret svg{transform:rotate(180deg);}
.combo-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:60;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);
    max-height:266px;overflow-y:auto;padding:5px;font-family:var(--app-font);}
.combo-menu.up{top:auto;bottom:calc(100% + 5px);}
.combo.on .combo-menu{display:block;}
.combo-opt{padding:8px 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:#334155;
    cursor:pointer;line-height:1.5;}
.combo-opt:hover,.combo-opt.sel{background:var(--brand-soft);color:#1d4ed8;}
.combo-opt b{color:var(--brand);font-weight:800;background:#dbeafe;border-radius:3px;padding:0 1px;}
.combo-none{padding:11px 12px;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.5;}
.combo-none span{display:block;font-size:11px;color:var(--soft);font-weight:400;margin-top:2px;}

/* ── multi-select: wide menu, options laid out in columns ─────── */
.combo-menu.wide{width:min(720px,calc(100vw - 28px));right:auto;max-height:none;padding:0;overflow:visible;}
.combo-menu.wide.right{left:auto;right:0;}
.combo-menu.wide .combo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
    gap:1px 6px;padding:7px;max-height:290px;overflow-y:auto;}
.combo-opt.chk{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;cursor:pointer;
    font-size:12.5px;font-weight:600;color:#334155;border-radius:8px;line-height:1.45;}
.combo-opt.chk input{position:absolute;opacity:0;width:0;height:0;}
.combo-opt.chk .combo-box{flex:0 0 16px;width:16px;height:16px;margin-top:1px;border:1.8px solid #cbd5e1;
    border-radius:5px;background:#fff;position:relative;transition:background .12s,border-color .12s;}
.combo-opt.chk.on{background:var(--brand-soft);color:#1d4ed8;}
.combo-opt.chk.on .combo-box{background:var(--brand);border-color:var(--brand);}
.combo-opt.chk.on .combo-box:after{content:'';position:absolute;left:4.6px;top:1.4px;width:4px;height:8.5px;
    border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(43deg);}
.combo-opt.chk:hover{background:#f1f6ff;}
.combo-opt.chk.sel{outline:2px solid var(--brand);outline-offset:-2px;}
.combo-opt.chk .combo-lbl{min-width:0;word-break:break-word;}
.combo-foot{display:flex;align-items:center;gap:8px;padding:9px 11px;border-top:1px solid var(--line-2);
    background:#fbfcfe;border-radius:0 0 var(--r-sm) var(--r-sm);flex-wrap:wrap;}
.combo-count{font-size:11.5px;color:var(--muted);font-weight:700;margin-right:auto;}
.combo-x{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;
    font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;color:#64748b;}
.combo-x:hover{background:#fee2e2;border-color:#fca5a5;color:#b91c1c;}
.combo-x.done{background:var(--brand);border-color:var(--brand);color:#fff;}
.combo-x.done:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff;}
/* on a phone the menu matches the field width — one column, always on screen */
@media (max-width:820px){
    .combo-menu.wide{width:100%;left:0;right:0;}
    .combo-menu.wide.right{left:0;right:0;}
    .combo-menu.wide .combo-list{grid-template-columns:1fr;max-height:244px;}
}

/* ── flatpickr calendar, themed to match the app ──────────────── */
input.fp{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;padding-right:36px;cursor:pointer;}
.flatpickr-calendar{border-radius:12px;box-shadow:var(--shadow-lg);border:1px solid var(--line);
    font-family:var(--app-font);}
.flatpickr-months{border-radius:12px 12px 0 0;background:var(--navy);padding:5px 0 7px;}
.flatpickr-months .flatpickr-month,.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months{color:#fff;fill:#fff;}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{fill:#cfdcf1;padding:8px 10px;}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#60a5fa;}
.flatpickr-current-month .flatpickr-monthDropdown-months{font-weight:700;}
.flatpickr-current-month .flatpickr-monthDropdown-months option{color:#0f172a;background:#fff;}
span.flatpickr-weekday{color:#64748b;font-weight:800;font-size:11px;}
.flatpickr-day{border-radius:9px;font-size:13px;font-weight:600;color:#334155;}
.flatpickr-day:hover{background:var(--brand-soft);border-color:var(--brand-soft);}
.flatpickr-day.today{border-color:var(--brand);color:var(--brand);font-weight:800;}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--brand);border-color:var(--brand);color:#fff;}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:#cbd5e1;}
.fp-actions{display:flex;gap:7px;padding:9px 10px;border-top:1px solid var(--line-2);background:#fbfcfe;
    border-radius:0 0 12px 12px;}
.fp-btn{flex:1;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 8px;
    font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;}
.fp-btn-today{background:var(--brand-soft);border-color:#bfdbfe;color:#1d4ed8;}
.fp-btn-today:hover{background:#dbeafe;}
.fp-btn-clear{color:#64748b;} .fp-btn-clear:hover{background:#fee2e2;border-color:#fca5a5;color:#b91c1c;}

/* ── detail view ──────────────────────────────────────────────── */
.dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 28px;}
.dl .it{min-width:0;} .dl .it.full{grid-column:1/-1;}
/* heading — Lao and English share one line, so each item is 2 rows not 3 */
.dl .k{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
    color:var(--dl-label-en);margin-bottom:5px;display:flex;align-items:baseline;
    gap:6px;flex-wrap:wrap;line-height:1.35;}
.dl .k .lo{text-transform:none;letter-spacing:0;font-size:13px;
    color:var(--dl-label);font-weight:var(--dl-label-weight);font-style:var(--dl-label-style);}
/* the value itself */
.dl .v{font-size:14.5px;line-height:1.65;
    color:var(--dl-value);font-weight:var(--dl-value-weight);font-style:var(--dl-value-style);
    border-bottom:1px solid var(--line-2);padding-bottom:7px;min-height:28px;
    white-space:pre-wrap;word-break:break-word;}
.dl .v.blank{color:#cbd5e1;font-weight:400;font-style:normal;}

/* ── file list ────────────────────────────────────────────────── */
.files{display:flex;flex-direction:column;gap:8px;}
.file{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;background:#fcfdff;}
.file .fi{font-size:18px;} .file .fn{flex:1;min-width:0;}
.file .fn b{display:block;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file .fn span{font-size:11px;color:var(--soft);}
.drop{border:1.8px dashed #c7d5ec;border-radius:var(--r-sm);background:var(--brand-soft);padding:16px;text-align:center;
    font-size:12.5px;color:#1d4ed8;cursor:pointer;}
.drop:hover{background:#e6efff;border-color:var(--brand);}
.drop.over{background:#dbeafe;border-color:var(--brand);}

/* ── login ────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
    background:radial-gradient(1200px 600px at 12% -8%, #1d436f 0%, transparent 55%),
               radial-gradient(900px 520px at 105% 108%, #1e40af 0%, transparent 52%),
               linear-gradient(160deg,#0d2340 0%,#0b1c33 100%);}
.login-card{width:100%;max-width:940px;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(3,10,25,.5);
    overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;}
.login-side{background:linear-gradient(165deg,#12365f 0%,#0d2340 100%);color:#e8eefb;padding:42px 38px;
    display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.login-side:after{content:'';position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(96,165,250,.35), transparent 62%);}
.login-side .lg{width:78px;height:78px;border-radius:20px;background:#fff;padding:7px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.35);margin-bottom:20px;position:relative;z-index:2;}
.login-side .lg img{width:100%;height:100%;object-fit:contain;display:block;}
.login-form .mlogo{display:none;}
@media (max-width:820px){ .login-form .mlogo{display:flex;align-items:center;gap:11px;margin-bottom:20px;}
    .login-form .mlogo img{width:46px;height:46px;object-fit:contain;}
    .login-form .mlogo b{font-size:14px;font-weight:800;line-height:1.35;} }
.login-side h1{font-size:23px;font-weight:800;line-height:1.4;}
.login-side .en{font-size:13px;color:#a8bde0;margin-top:8px;line-height:1.6;}
.login-side ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:9px;position:relative;z-index:2;}
.login-side li{font-size:12.5px;color:#c3d3ec;display:flex;gap:9px;align-items:flex-start;}
.login-side li i{font-style:normal;color:#60a5fa;}
.login-side .ft{font-size:11px;color:#7d93b5;position:relative;z-index:2;margin-top:28px;}
.login-form{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}
.login-form h2{font-size:21px;font-weight:800;}
.login-form .p{font-size:13px;color:var(--muted);margin:5px 0 22px;}
.login-form .fld{margin-bottom:15px;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:44px;}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;
    font-size:15px;padding:6px 8px;border-radius:7px;color:var(--soft);}
.pw-eye:hover{background:#f1f5f9;}

/* ── admin bits ───────────────────────────────────────────────── */
.pill-row{display:flex;gap:7px;flex-wrap:wrap;}
.lk-item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
    border-radius:20px;padding:5px 6px 5px 13px;font-size:12.5px;font-weight:600;}
.lk-item form{display:inline-flex;}
.lk-x{border:none;background:none;color:#cbd5e1;cursor:pointer;font-size:13px;padding:1px 5px;border-radius:50%;line-height:1;}
.lk-x:hover{background:#fee2e2;color:#b91c1c;}
.tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 4px;}
.tab{padding:9px 14px;font-size:13px;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px;}
.tab:hover{color:var(--ink);} .tab.on{color:var(--brand);border-bottom-color:var(--brand);}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width:1024px){
    .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg);}
    body.nav-open .sidebar{transform:translateX(0);}
    body.nav-open:after{content:'';position:fixed;inset:0;background:rgba(8,17,33,.5);z-index:35;}
    .burger{display:inline-flex;}
    .sb-close{display:inline-flex;align-items:center;justify-content:center;}
    .fld.c3,.fld.c4{grid-column:span 6;}
}
@media (max-width:820px){
    .login-card{grid-template-columns:1fr;max-width:460px;}
    .login-side{display:none;}
    .login-form{padding:34px 26px;}
}
@media (max-width:820px){
    /* the top bar carries the zoomer + page buttons — on a narrow screen let
       them drop to their own line instead of pushing the page sideways */
    .topbar{height:auto;min-height:58px;padding:8px 12px;flex-wrap:wrap;row-gap:8px;}
    .tb-title{flex:1 1 auto;min-width:0;}
    .tb-right{width:100%;order:3;margin-left:0;justify-content:flex-start;
        overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
    .tb-right::-webkit-scrollbar{height:0;}
    .tb-right>*{flex:0 0 auto;}
}
@media (max-width:640px){
    .content{padding:14px 12px 50px;}
    .topbar{padding:8px 12px;}
    .fld.c3,.fld.c4,.fld.c6,.fld.c8{grid-column:span 12;}
    .dl{grid-template-columns:1fr;}
}

/* ── ເປີດຈາກໜ້າຈໍຫຼັກ / launched from the home screen ───────────
   With no Safari bars the page owns the whole screen, so keep content
   clear of the status bar and the home indicator. env() is 0 on a
   normal desktop browser, so these rules cost nothing there. */
/* Breathing room under the iPad clock and battery. 0 in a normal browser tab,
   where Safari's own bars already do the job.
   ⚠ Want the header lower or higher? Change this ONE number.  */
:root{ --app-top:0px; }
@media (display-mode:standalone){ :root{ --app-top:14px; } }
html.in-app{ --app-top:14px; }        /* older iOS, which predates display-mode */

@supports (padding:env(safe-area-inset-top)){
    /* The top bar must GROW by the inset, not squash its buttons into the same
       62px — height:auto with a min-height is what makes that happen. */
    .topbar{height:auto;min-height:62px;
            padding-top:calc(env(safe-area-inset-top) + var(--app-top));
            padding-bottom:var(--app-top);}
    .sidebar{padding-top:calc(env(safe-area-inset-top) + var(--app-top));
             padding-bottom:env(safe-area-inset-bottom);}
    .content{padding-bottom:calc(60px + env(safe-area-inset-bottom));}
    .formbar{padding-bottom:calc(13px + env(safe-area-inset-bottom));}
    .login-wrap{padding-top:calc(24px + env(safe-area-inset-top) + var(--app-top));
                padding-bottom:calc(24px + env(safe-area-inset-bottom));}
}
/* Fallback for anything too old to know env() — plain padding, no insets. */
@supports not (padding:env(safe-area-inset-top)){
    @media (display-mode:standalone){
        .topbar{height:auto;min-height:62px;padding-top:var(--app-top);padding-bottom:var(--app-top);}
    }
}
@media (display-mode:standalone){
    /* no browser chrome to grab, so the sticky header must feel solid */
    .topbar{box-shadow:0 1px 0 var(--line);}
    /* stop a long-press turning into a text selection on the nav */
    .sb-link,.sb-brand,.zoomer{-webkit-user-select:none;user-select:none;
        -webkit-touch-callout:none;}
}

/* ── print ────────────────────────────────────────────────────── */
@media print{
    .sidebar,.topbar,.formbar,.filters,.pager,.row-actions,.rowmenu,.rm-pop,.no-print{display:none !important;}
    body{background:#fff;} .content{padding:0;}
    .card{box-shadow:none;border:none;}
    table.tbl{font-size:9.5px;} table.tbl th{position:static;}
    @page{size:A4 landscape;margin:10mm;}
}