/* =============================================================
   style.css — Dormitory admin · โปร + responsive + ผู้สูงอายุใช้ง่าย
   ธีม: ไซด์บาร์เข้ม + เนื้อหาสว่าง การ์ดนุ่ม เงาบาง ฟอนต์ Sarabun ตัวใหญ่ชัด
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* base */
  --ink:#172033; --muted:#5d6b7e; --line:#e3e8f0; --line-2:#eef2f7;
  --bg:#eef1f6; --card:#ffffff;
  /* brand */
  --blue:#1f6feb; --blue-d:#1457c8; --blue-bg:#e8f0fe;
  --green:#1a8a4d; --green-bg:#e3f6ea;
  --red:#d83a3a;  --red-bg:#fcebeb;
  --amber:#b5710a; --amber-bg:#fcf0db;
  /* sidebar (dark) */
  --side-grad-1:#16243f; --side-grad-2:#203a66;
  --side-ink:#eaf0fa; --side-muted:#9fb1d0; --side-accent:#57a0ff;
  /* shape & depth */
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.07);
  --shadow:0 6px 18px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.05);
  --sidebar-w:266px; --sidebar-cw:78px; --topbar-h:66px;
}

html { font-size:18px; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Sarabun","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:1.6rem; margin:0; font-weight:800; letter-spacing:-.01em; }
h2 { font-size:1.28rem; margin:0 0 .6rem; font-weight:700; }
h3 { font-size:1.1rem; margin:1rem 0 .4rem; font-weight:700; }
.muted { color:var(--muted); }
.small { font-size:.82rem; }
.big { font-size:1.15rem; }
.center { text-align:center; }
.r { text-align:right; }

/* =================== APP SHELL (owner) =================== */
.app-shell { min-height:100vh; }

.sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--side-grad-1),var(--side-grad-2));
  color:var(--side-ink); display:flex; flex-direction:column;
  z-index:60; transition:transform .26s ease, width .2s ease;
}
.sidebar-brand {
  height:var(--topbar-h); display:flex; align-items:center; gap:11px;
  padding:0 18px; font-size:1.22rem; font-weight:800; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08); white-space:nowrap; overflow:hidden;
}
.sidebar-brand .logo { font-size:1.5rem; flex:none; }
.nav { flex:1; overflow-y:auto; padding:14px 12px; }
.nav-sec { color:var(--side-muted); font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:14px 14px 6px; }
.nav-item, .nav-group-btn {
  display:flex; align-items:center; gap:13px; width:100%;
  padding:13px 14px; margin:2px 0; border-radius:11px;
  color:var(--side-ink); font-size:1.04rem; font-weight:600; line-height:1.2;
  border:none; background:transparent; cursor:pointer; text-align:left; font-family:inherit;
}
.nav-item .ico, .nav-group-btn .ico { font-size:1.3rem; width:26px; text-align:center; flex:none; }
.nav-item:hover, .nav-group-btn:hover { background:rgba(255,255,255,.09); text-decoration:none; color:#fff; }
.nav-item.active { background:rgba(87,160,255,.20); color:#fff; box-shadow:inset 3px 0 0 var(--side-accent); }
.nav-group-btn .caret { margin-left:auto; transition:transform .22s; font-size:.8rem; opacity:.75; }
.nav-group.open > .nav-group-btn .caret { transform:rotate(180deg); }
.nav-group.open > .nav-group-btn { color:#fff; }
.submenu { max-height:0; overflow:hidden; transition:max-height .26s ease; }
.nav-group.open > .submenu { max-height:520px; }
.submenu a {
  display:flex; align-items:center; gap:10px; padding:11px 14px 11px 52px;
  color:var(--side-muted); font-size:.98rem; font-weight:500; border-radius:9px; margin:1px 0;
}
.submenu a::before { content:""; width:7px; height:7px; border-radius:50%;
  background:currentColor; opacity:.45; flex:none; margin-left:-16px; }
.submenu a:hover { color:#fff; background:rgba(255,255,255,.06); text-decoration:none; }
.submenu a.active { color:#fff; font-weight:700; }
.submenu a.active::before { background:var(--side-accent); opacity:1; box-shadow:0 0 0 3px rgba(87,160,255,.25); }
.sidebar-foot { padding:14px; border-top:1px solid rgba(255,255,255,.08); font-size:.8rem; color:var(--side-muted); }

/* main area */
.main-area { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; transition:margin .2s ease; }
.topbar {
  height:var(--topbar-h); background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:30;
}
.hamburger {
  width:48px; height:48px; flex:none; border:1.5px solid var(--line); border-radius:11px;
  background:#fff; font-size:1.45rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--ink); transition:.15s;
}
.hamburger:hover { background:var(--line-2); border-color:#c8d2df; }
.topbar .brand { display:none; font-weight:800; font-size:1.16rem; color:var(--ink); }
.topbar-spacer { flex:1; }
.topbar-user { display:flex; align-items:center; gap:12px; }
.user-chip { display:flex; align-items:center; gap:10px; }
.avatar { width:42px; height:42px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--blue),#3d8bff); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.05rem; }
.user-meta { line-height:1.25; }
.user-meta .nm { font-weight:700; font-size:.98rem; }
.role-tag { background:var(--blue-bg); color:var(--blue-d); font-size:.72rem; font-weight:700;
  padding:2px 9px; border-radius:20px; }
.content { flex:1; width:100%; max-width:1160px; margin:0 auto; padding:26px 26px 64px; }

/* staggered entrance */
.content > * { animation:fadeUp .42s ease both; }
.content > *:nth-child(2){ animation-delay:.05s } .content > *:nth-child(3){ animation-delay:.1s }
.content > *:nth-child(4){ animation-delay:.15s } .content > *:nth-child(5){ animation-delay:.2s }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* collapsed (desktop) */
body.sidebar-collapsed .sidebar { width:var(--sidebar-cw); }
body.sidebar-collapsed .main-area { margin-left:var(--sidebar-cw); }
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar .nav-sec,
body.sidebar-collapsed .nav-group-btn .caret,
body.sidebar-collapsed .submenu,
body.sidebar-collapsed .sidebar-brand .brand-text,
body.sidebar-collapsed .sidebar-foot { display:none; }
body.sidebar-collapsed .nav-item, body.sidebar-collapsed .nav-group-btn { justify-content:center; padding:13px 0; }
body.sidebar-collapsed .sidebar-brand { justify-content:center; padding:0; }

/* backdrop (mobile drawer) */
.sidebar-backdrop { display:none; }

/* =================== SIMPLE SHELL (tenant / login) =================== */
.topbar-simple { background:var(--card); border-bottom:1px solid var(--line); }
.topbar-simple-inner, .topnav-inner, .container { max-width:1000px; margin:0 auto; padding:0 18px; }
.topbar-simple-inner { display:flex; align-items:center; justify-content:space-between; height:var(--topbar-h); }
.topbar-simple .brand { font-size:1.3rem; font-weight:800; color:var(--ink); }
.topnav { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.topnav-inner { display:flex; gap:6px; overflow-x:auto; }
.topnav a { padding:15px 18px; color:var(--ink); font-size:1.04rem; white-space:nowrap; border-bottom:3px solid transparent; font-weight:600; }
.topnav a.active { color:var(--blue); border-bottom-color:var(--blue); }
.container { padding-top:24px; padding-bottom:60px; }

/* =================== shared content blocks =================== */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.page-head .sub { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.card:hover { box-shadow:var(--shadow); }
.card, .btn, .metric, .room-btn { transition:box-shadow .18s ease, transform .18s ease, background .15s ease, border-color .15s ease; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }

/* flash */
.flash { padding:15px 18px; border-radius:12px; margin-bottom:18px; font-size:1.05rem; font-weight:600;
  border:1px solid transparent; display:flex; gap:10px; align-items:center; box-shadow:var(--shadow-sm); }
.flash::before { font-size:1.25rem; }
.flash-success { background:var(--green-bg); color:var(--green); border-color:#bce8cd; }
.flash-success::before { content:"✅"; }
.flash-error { background:var(--red-bg); color:var(--red); border-color:#f3cccc; }
.flash-error::before { content:"⚠️"; }
.flash-info { background:var(--blue-bg); color:var(--blue-d); border-color:#cfe0fb; }
.flash-info::before { content:"ℹ️"; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:50px; padding:11px 22px; font-size:1.05rem; font-weight:700; font-family:inherit;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:11px; cursor:pointer; line-height:1.2; }
.btn:hover { background:var(--line-2); text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(31,111,235,.3); }
.btn-primary:hover { background:var(--blue-d); border-color:var(--blue-d); }
.btn-success { background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 2px 8px rgba(26,138,77,.28); }
.btn-success:hover { background:#15703f; }
.btn-danger { background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 2px 8px rgba(216,58,58,.26); }
.btn-danger:hover { background:#b62f2f; }
.btn-ghost { background:transparent; }
.btn-block { width:100%; margin-top:12px; }
.btn-lg { min-height:64px; font-size:1.22rem; padding:14px 28px; }
.btn-sm { min-height:40px; font-size:.92rem; padding:6px 14px; border-radius:9px; }

/* forms */
label { display:block; font-weight:700; margin:13px 0 5px; font-size:1rem; }
input, select, textarea { width:100%; font-size:1.05rem; padding:12px 14px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); transition:.15s; }
input:hover, select:hover, textarea:hover { border-color:#c8d2df; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3.5px var(--blue-bg); }
.inline { display:inline; }
.row-form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.row-form input, .row-form select { width:auto; flex:1; min-width:130px; }

/* table */
.table { width:100%; border-collapse:collapse; font-size:1.02rem; }
.table th { text-align:left; color:var(--muted); font-size:.82rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; padding:11px 10px; border-bottom:2px solid var(--line); }
.table td { padding:13px 10px; border-bottom:1px solid var(--line-2); }
.table tbody tr { transition:background .12s; }
.table tbody tr:hover { background:var(--line-2); }

/* pills */
.pill { display:inline-block; padding:5px 13px; border-radius:20px; font-size:.9rem; font-weight:700; border:none; cursor:default; }
.pill-paid { background:var(--green-bg); color:var(--green); }
.pill-pending, .pill-due-soon { background:var(--amber-bg); color:var(--amber); }
.pill-unpaid { background:#eef1f6; color:var(--muted); }
.pill-overdue { background:var(--red-bg); color:var(--red); }
form .pill { cursor:pointer; }
form .pill:hover { filter:brightness(.97); }

/* metrics */
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:18px; }
.metric { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden; }
.metric::after { content:""; position:absolute; right:-20px; top:-20px; width:80px; height:80px; border-radius:50%;
  background:var(--blue-bg); opacity:.5; }
.metric .label { color:var(--muted); font-size:.92rem; font-weight:600; position:relative; }
.metric .num { font-size:2rem; font-weight:800; margin-top:4px; position:relative; letter-spacing:-.02em; }
.num.green { color:var(--green); } .num.red { color:var(--red); } .num.amber { color:var(--amber); }
.quick { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }

/* bill form */
.item-card { padding:18px; }
.item-title { font-size:1.12rem; font-weight:700; margin-bottom:8px; }
.meter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.line-amt { text-align:right; font-size:1.1rem; font-weight:700; margin-top:8px; }
.total-card { display:flex; justify-content:space-between; align-items:center; font-size:1.35rem; font-weight:800;
  background:linear-gradient(135deg,var(--blue-bg),#dbe8fe); border-color:#cfe0fb; }
.room-pick { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.room-btn { display:flex; flex-direction:column; gap:4px; padding:20px; border:1.5px solid var(--line); border-radius:12px;
  color:var(--ink); font-size:1.1rem; background:#fff; box-shadow:var(--shadow-sm); }
.room-btn:hover { border-color:var(--blue); text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow); }

/* receipt */
.receipt { max-width:420px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; margin:0 auto; position:relative; box-shadow:var(--shadow); }
.receipt-head { text-align:center; }
.dorm-name { font-size:1.3rem; font-weight:800; }
.dorm-sub { font-size:.8rem; color:var(--muted); }
.receipt hr { border:none; border-top:1px dashed var(--line); margin:13px 0; }
.receipt-row { display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; }
.receipt-items { width:100%; border-collapse:collapse; margin:6px 0; }
.receipt-items td { padding:6px 0; vertical-align:top; }
.receipt-items .amt { text-align:right; white-space:nowrap; }
.receipt-total { display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
  background:linear-gradient(135deg,var(--blue-bg),#dbe8fe); border-radius:10px; }
.total-amt { font-size:1.5rem; font-weight:800; }
.paid-stamp { text-align:center; color:var(--green); border:3px solid var(--green); border-radius:10px; padding:8px;
  font-size:1.3rem; font-weight:800; margin:14px auto; max-width:220px; transform:rotate(-6deg); }
.paid-stamp span { font-size:.85rem; font-weight:600; }
.receipt-qr { text-align:center; margin-top:14px; }
.receipt-qr img { border:1px solid var(--line); border-radius:8px; }
.export-bar { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:420px; margin:14px auto 0; }

/* slip check */
.slip-img { max-width:100%; border:1px solid var(--line); border-radius:10px; margin-bottom:12px; }
.check { border-radius:12px; padding:16px; margin:12px 0; border:1px solid transparent; }
.check-green { background:var(--green-bg); border-color:#bce8cd; }
.check-yellow { background:var(--amber-bg); border-color:#f0dcae; }
.check-red { background:var(--red-bg); border-color:#f3cccc; }
.check-verdict { font-size:1.12rem; font-weight:800; margin-bottom:8px; }
.check-list { list-style:none; padding:0; margin:0; }
.check-list li { padding:5px 0; }
.check-list .ck { font-weight:700; margin-right:4px; }
.ok-card { text-align:center; }
.ok-card .big { color:var(--green); font-size:1.4rem; font-weight:800; }

/* slips list / maintenance */
.slip-row { display:flex; align-items:center; gap:14px; padding:15px 8px; border-bottom:1px solid var(--line-2); color:var(--ink); flex-wrap:wrap; border-radius:10px; }
.slip-row:hover { background:var(--line-2); text-decoration:none; }
.slip-room { font-weight:700; flex:1; min-width:160px; }
.slip-row .amt { font-weight:800; }
.maint-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-2); flex-wrap:wrap; }
.maint-title { font-size:1.08rem; font-weight:700; }

/* login / center */
.login-wrap { max-width:430px; margin:6vh auto; }
.login-card { padding:34px; box-shadow:var(--shadow); }
.login-title { text-align:center; }
.login-sub { text-align:center; color:var(--muted); margin-top:0; }
.form-big input { font-size:1.15rem; padding:15px; }
.login-hint { margin-top:22px; padding:15px; background:var(--line-2); border-radius:11px; font-size:.92rem; }
.center-card { text-align:center; padding:44px; max-width:520px; margin:6vh auto; box-shadow:var(--shadow); }
.big-emoji { font-size:3.2rem; }

.footer { text-align:center; color:var(--muted); font-size:.85rem; padding:24px; border-top:1px solid var(--line); }

/* =================== responsive =================== */
@media (max-width:1023px) {
  .sidebar { transform:translateX(-100%); box-shadow:var(--shadow); }
  body.sidebar-open .sidebar { transform:translateX(0); }
  body.sidebar-collapsed .sidebar { width:var(--sidebar-w); }   /* ignore collapse on mobile */
  .main-area { margin-left:0; }
  body.sidebar-collapsed .main-area { margin-left:0; }
  .topbar .brand { display:block; }
  .sidebar-backdrop { display:block; position:fixed; inset:0; background:rgba(15,23,42,.55);
    opacity:0; visibility:hidden; transition:.22s; z-index:55; }
  body.sidebar-open .sidebar-backdrop { opacity:1; visibility:visible; }
}
@media (max-width:760px) {
  html { font-size:17px; }
  .two-col { grid-template-columns:1fr; }
  .content { padding:18px 14px 56px; }
  .topbar { padding:0 14px; }
  .user-meta .nm { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* =================== print: เหลือเฉพาะใบบิล =================== */
@media print {
  .sidebar, .topbar, .topbar-simple, .topnav, .sidebar-backdrop, .footer,
  .page-head, .actions, .export-bar, .no-print, .flash { display:none !important; }
  body { background:#fff; }
  .main-area { margin-left:0 !important; }
  .content, .container { padding:0; max-width:none; }
  .two-col { display:block; }
  .receipt { border:none; max-width:none; box-shadow:none; }
  .lightbox { display:none !important; }
}

/* =================== แกลเลอรีรูป + lightbox (สไลด์โชว์) =================== */
.gallery { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
.gallery-item { display:block; width:108px; height:108px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--line-2); box-shadow:var(--shadow-sm); }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.gallery-item:hover { text-decoration:none; }
.gallery-item:hover img { transform:scale(1.07); }
.gallery-empty { color:var(--muted); padding:16px; border:1.5px dashed var(--line); border-radius:12px; text-align:center; }
.thumb-sm { width:46px; height:46px; border-radius:8px; object-fit:cover; border:1px solid var(--line); vertical-align:middle; }

.lightbox { position:fixed; inset:0; background:rgba(10,15,25,.93); z-index:1000;
  display:none; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92vw; max-height:82vh; border-radius:10px; box-shadow:0 12px 48px rgba(0,0,0,.55); }
.lb-btn { position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px; border:none;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.lb-btn:hover { background:rgba(255,255,255,.28); }
.lb-prev { left:18px; } .lb-next { right:18px; }
.lb-close { position:absolute; top:18px; right:20px; width:52px; height:52px; font-size:1.6rem;
  border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; }
.lb-close:hover { background:rgba(255,255,255,.28); }
.lb-count { position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#fff; font-size:1.05rem; font-weight:700; }
@media (max-width:760px){ .lb-btn{ width:48px; height:48px; font-size:1.6rem; } .lb-prev{ left:8px; } .lb-next{ right:8px; } }

/* =================== หน้ารายละเอียดห้อง =================== */
.room-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:start; }
@media (max-width:880px){ .room-hero { grid-template-columns:1fr; } }
.kv { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.kv:last-child { border-bottom:none; }
.kv .k { color:var(--muted); }
.kv .v { font-weight:700; text-align:right; }
.file-link { display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border:1.5px solid var(--line);
  border-radius:10px; background:var(--line-2); font-weight:700; }
.file-link:hover { text-decoration:none; border-color:var(--blue); }
textarea { min-height:90px; resize:vertical; line-height:1.5; }

/* =================== toggle switch (เปิด/ปิด) =================== */
.switch { position:relative; display:inline-block; width:60px; height:34px; vertical-align:middle; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; inset:0; background:#cbd5e1; border-radius:999px; cursor:pointer; transition:.2s; }
.switch .slider::before { content:""; position:absolute; width:28px; height:28px; left:3px; top:3px; background:#fff;
  border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.switch input:checked + .slider { background:var(--green); }
.switch input:checked + .slider::before { transform:translateX(26px); }
.switch input:focus + .slider { box-shadow:0 0 0 3px var(--blue-bg); }
.del-check { cursor:pointer; font-size:1.2rem; display:inline-flex; align-items:center; gap:4px; }
.del-check input { width:20px; height:20px; vertical-align:middle; }

/* =================== แถบเครื่องมือ: เลือกเดือน / กรอง / เรียง =================== */
.toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px; }
.toolbar select { width:auto; min-width:180px; font-weight:600; }
.filter-btns { display:flex; gap:6px; flex-wrap:wrap; }
.filter-btns .btn { min-height:42px; }
.filter-btns .btn.active { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(31,111,235,.3); }
.table.sortable th[data-key] { cursor:pointer; user-select:none; white-space:nowrap; }
.table.sortable th[data-key]::after { content:" ⇅"; opacity:.35; font-size:.85em; }
.table.sortable th.sort-asc::after { content:" ↑"; opacity:1; color:var(--blue); }
.table.sortable th.sort-desc::after { content:" ↓"; opacity:1; color:var(--blue); }