/* Hotspot Management - application styles (Bootstrap 5 base) */
@font-face { font-family: Sarabun; font-weight: 400; font-display: swap; src: url(../vendor/fonts/sarabun-thai-400.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 400; font-display: swap; src: url(../vendor/fonts/sarabun-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Sarabun; font-weight: 600; font-display: swap; src: url(../vendor/fonts/sarabun-thai-600.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 600; font-display: swap; src: url(../vendor/fonts/sarabun-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: Sarabun; font-weight: 700; font-display: swap; src: url(../vendor/fonts/sarabun-thai-700.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 700; font-display: swap; src: url(../vendor/fonts/sarabun-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
    --sidebar-width: 250px;
    --brand: #0b5ed7;
    --sidebar-bg: #0f1e33;
    --sidebar-fg: #c6d3e6;
    --sidebar-active: #1d3557;
    --bs-body-font-family: Sarabun, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
    --bs-body-font-size: .95rem;
}

body { background: #f3f5f9; min-height: 100vh; }

/* ---------- top bar ---------- */
.app-topbar { height: 56px; background: #fff; border-bottom: 1px solid #e3e7ee; position: sticky; top: 0; z-index: 1030; }
.app-brand { font-weight: 700; color: var(--brand); text-decoration: none; letter-spacing: .3px; }
.app-brand:hover { color: var(--brand); }

/* ---------- sidebar ---------- */
.app-sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-fg); }
.app-sidebar .nav-link { color: var(--sidebar-fg); border-radius: .4rem; padding: .45rem .75rem; font-size: .92rem; display: flex; align-items: center; gap: .55rem; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-sidebar .nav-link.active { background: var(--sidebar-active); color: #fff; }
.app-sidebar .nav-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #7d8ea8; margin: 1rem .75rem .35rem; }
.app-sidebar .router-chip { background: rgba(255,255,255,.06); border-radius: .5rem; padding: .6rem .75rem; margin: .75rem .5rem; }
.app-sidebar .router-chip small { color: #8fa1bb; }
/* Bootstrap makes .offcanvas-lg transparent on desktop and white on mobile; keep the dark sidebar */
.app-sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--sidebar-bg); --bs-offcanvas-color: var(--sidebar-fg); }
@media (min-width: 992px) {
    .app-sidebar.offcanvas-lg { background-color: var(--sidebar-bg) !important; }
    .app-sidebar { position: fixed; top: 56px; bottom: 0; left: 0; overflow-y: auto; }
    .app-main.with-sidebar { margin-left: var(--sidebar-width); }
}

.app-main { padding: 1.25rem; }
@media (max-width: 575.98px) { .app-main { padding: .75rem; } }

/* ---------- components ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-header h1 { font-size: 1.35rem; margin: 0; font-weight: 600; }
.card { border: 0; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); }
.card-header { background: #fff; font-weight: 600; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: #6c757d; font-size: .85rem; }
.stat-card .stat-icon { width: 42px; height: 42px; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }

.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; background: #f8f9fb; white-space: nowrap; }
.table-sm > :not(caption) > * > * { padding: .35rem .5rem; }
.table td.actions { white-space: nowrap; text-align: right; }
tr.row-disabled td { color: #adb5bd; }
tr.row-expired td { color: #dc3545; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace, Sarabun; }
.bulk-bar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e3e7ee; padding: .6rem 1rem; z-index: 5; }
.badge-soft { background: #eef2f7; color: #344054; font-weight: 500; }
.status-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.min-w-0 { min-width: 0; }
.chart-box { position: relative; height: 260px; }

/* ---------- voucher cards (print) ---------- */
.voucher-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(62mm, 1fr)); gap: 3mm; }
.voucher { border: 1px dashed #98a2b3; border-radius: 6px; padding: 3mm; background: #fff; break-inside: avoid; display: flex; gap: 3mm; font-size: 11px; position: relative; overflow: hidden; }
.voucher .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.voucher .body { flex: 1; min-width: 0; padding-left: 2mm; }
.voucher .title { font-weight: 700; font-size: 12px; }
.voucher .cred { font-family: ui-monospace, Menlo, Consolas, monospace, Sarabun; font-size: 14px; font-weight: 700; letter-spacing: .5px; }
.voucher .price { font-size: 16px; font-weight: 700; }
.voucher .qr { width: 22mm; height: 22mm; flex: 0 0 22mm; }
.voucher .qr img, .voucher .qr canvas { width: 100%; height: 100%; }
@media print {
    @page { size: A4; margin: 8mm; }
    body { background: #fff; }
    .no-print { display: none !important; }
    .voucher-sheet { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- portal ---------- */
.portal-bg { background: linear-gradient(135deg, #0b5ed7 0%, #6f42c1 100%); min-height: 100vh; }
.portal-card { max-width: 440px; margin: 0 auto; }
.portal-title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.portal-title small { font-size: .7em; font-weight: 400; }
.portal-logo { max-width: 100%; width: auto; object-fit: contain; }