@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

/* ============================================================
   Cam Booth web redesign — design tokens + shared chrome styles
   Layered on top of Bootstrap 5 (local: ~/lib/bootstrap/dist).
   Phase 1 foundation. Page-specific styles come later per phase.
   ============================================================ */

:root {
    /* Default font: Sarabun (Thai-friendly). The `body` rule below overrides
       Bootstrap's system-font stack site-wide (redesign.css loads after
       bootstrap.css, so it wins by source order); the --bs-* vars cover
       Bootstrap 5.2+ which reads font-family from CSS variables. */
    --cb-font-sans: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-font-sans-serif: var(--cb-font-sans);
    --bs-body-font-family: var(--cb-font-sans);

    /* Brand palette (Happy Metal — steel blue + amber accent) */
    --cb-primary: #2b6cb0;
    --cb-primary-dark: #234e7d;
    --cb-accent: #f5a623;
    --cb-ink: #1a202c;
    --cb-muted: #6b7280;
    --cb-bg: #f7fafc;
    --cb-surface: #ffffff;
    --cb-border: #e2e8f0;

    /* Spacing / shape */
    --cb-radius: 0.6rem;
    --cb-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
    --cb-maxw: 1200px;
}

/* Apply Sarabun site-wide. font-family inherits, so headings, buttons,
   inputs, tables, etc. all follow without per-component rules. */
body {
    font-family: var(--cb-font-sans);
}

/* Map Bootstrap's primary onto the brand color without recompiling SCSS. */
.btn-primary {
    --bs-btn-bg: var(--cb-primary);
    --bs-btn-border-color: var(--cb-primary);
    --bs-btn-hover-bg: var(--cb-primary-dark);
    --bs-btn-hover-border-color: var(--cb-primary-dark);
    --bs-btn-active-bg: var(--cb-primary-dark);
}

.text-brand { color: var(--cb-primary) !important; }
.bg-brand { background-color: var(--cb-primary) !important; }

body.cb-app {
    background: var(--cb-bg);
    color: var(--cb-ink);
}

.cb-container { max-width: var(--cb-maxw); }

/* ---- Header ---- */
.cb-header {
    background: var(--cb-surface);
    border-bottom: 1px solid var(--cb-border);
}
.cb-header .navbar-brand { font-weight: 700; color: var(--cb-primary); }

/* ---- Role sub-menu bar ---- */
.cb-submenu {
    background: var(--cb-primary);
}
.cb-submenu .nav-link { color: rgba(255, 255, 255, 0.85); }
.cb-submenu .nav-link:hover,
.cb-submenu .nav-link.active { color: #fff; }
.cb-submenu .nav-link.active { font-weight: 600; }

/* Second level: a group opens as a dropdown. Bootstrap's click/tap toggle
   works everywhere; on a desktop with a mouse it also opens on hover. Plain
   selectors, not --bs-dropdown-* variables — those arrived in Bootstrap 5.2
   and this site is on 5.1. */
.cb-submenu .dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.cb-submenu .dropdown-item.active,
.cb-submenu .dropdown-item:active { background: var(--cb-primary); color: #fff; }
@media (hover: hover) and (min-width: 992px) {
    .cb-submenu .dropdown:hover > .dropdown-menu { display: block; }
}

/* ---- Pager (_SitePager) ----
   Separate rounded buttons, at least 44px square — the common minimum touch
   target — with a gap so a thumb does not land on the neighbour. */
.cb-pager .pagination { gap: .375rem; }
.cb-pager .page-link {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .85rem;
    font-size: 1.05rem;
    border-radius: .5rem !important;   /* every button, not just the first and last */
    margin-left: 0 !important;
    color: var(--cb-primary);
}
.cb-pager .page-item.active .page-link {
    background: var(--cb-primary);
    border-color: var(--cb-primary);
    color: #fff;
    font-weight: 600;
}
.cb-pager .page-link:hover { background: #eef4fb; }
.cb-pager .page-item.disabled .page-link { color: #adb5bd; }
.cb-pager .page-item.disabled .page-gap { border-color: transparent; background: transparent; min-width: 1.5rem; padding: .5rem .25rem; }

/* ---- บูธของฉัน cards ---- */
.cb-status { font-weight: 500; }
.cb-status .bi { font-size: .5rem; vertical-align: middle; }
.cb-status-on { background: #e6f4ea; color: #1e7b34; }
.cb-status-off { background: #fdecea; color: #b42318; }
.cb-booth-card { border-top: 3px solid #1e7b34; }
.cb-booth-card.is-offline { border-top-color: #b42318; }
.min-w-0 { min-width: 0; }
.cb-stat { background: #f5f7fa; border-radius: .5rem; padding: .5rem .25rem; }
.cb-stat-num { font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.cb-stat-label { font-size: .75rem; color: #6c757d; }
.cb-booth-health { display: grid; grid-template-columns: auto 1fr; gap: .4rem .75rem; align-items: center; }
.cb-booth-health dt { font-weight: normal; color: #6c757d; white-space: nowrap; }
.cb-booth-health dd { margin: 0; }

/* ---- หน้าแรก (/me) ---- */
.cb-kpi { text-decoration: none; color: inherit; border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .15s, transform .15s; }
.cb-kpi:hover { color: inherit; box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
.cb-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .6rem; font-size: 1.1rem; margin-bottom: .5rem; }
.cb-kpi-icon.is-primary { background: #e7f0fa; color: var(--cb-primary); }
.cb-kpi-icon.is-success { background: #e6f4ea; color: #1e7b34; }
.cb-kpi-icon.is-danger  { background: #fdecea; color: #b42318; }
.cb-kpi-icon.is-warning { background: #fff4e0; color: #b25e09; }
.cb-kpi-icon.is-muted   { background: #f1f3f5; color: #6c757d; }
.cb-kpi-label { font-size: .85rem; color: #6c757d; }
.cb-kpi-num { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.cb-kpi-num small { font-size: 1rem; font-weight: 400; color: #6c757d; }
.cb-kpi-sub { font-size: .8rem; color: #6c757d; }

.cb-bars { display: flex; align-items: flex-end; gap: .5rem; height: 11rem; }
.cb-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; text-decoration: none; color: inherit; }
.cb-bar:hover { color: inherit; }
.cb-bar-fill { width: 100%; max-width: 3rem; min-height: 3px; background: #b9d3ef; border-radius: .4rem .4rem 0 0; transition: background .15s; }
.cb-bar:hover .cb-bar-fill { background: #8fb8e3; }
.cb-bar.is-today .cb-bar-fill { background: var(--cb-primary); }
.cb-bar-num { font-size: .75rem; color: #495057; margin-bottom: .2rem; }
.cb-bar-day { font-size: .75rem; color: #6c757d; margin-top: .3rem; }
.cb-bar.is-today .cb-bar-day { color: var(--cb-primary); font-weight: 600; }

/* รายวัน on the booth page: one row per day, expands to the packers. */
.cb-days summary { cursor: pointer; list-style: none; }
.cb-days summary::-webkit-details-marker { display: none; }
.cb-days .cb-days-caret { display: inline-block; font-size: .75rem; color: #6c757d; transition: transform .15s; }
.cb-days details[open] .cb-days-caret { transform: rotate(90deg); }

/* พนักงานแพค cards */
.cb-staff-card { border-top: 3px solid var(--cb-primary); }
.cb-staff-card.is-inactive { border-top-color: #ced4da; opacity: .8; }
.cb-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; font-weight: 600; font-size: 1.15rem; }
.cb-avatar.is-a { background: #e7f0fa; color: #2b6cb0; }
.cb-avatar.is-b { background: #e6f4ea; color: #1e7b34; }
.cb-avatar.is-c { background: #fff4e0; color: #b25e09; }
.cb-avatar.is-d { background: #f3e8fd; color: #7b3fbf; }
.cb-avatar.is-e { background: #fdecea; color: #b42318; }
.cb-avatar.is-f { background: #e6f6f7; color: #0f766e; }

/* แจ้งลูกค้า (/me/notify) */
.cb-notify-hero { border-left: 5px solid #ced4da; }
.cb-notify-hero.is-on { border-left-color: #1e7b34; }
.cb-notify-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; font-size: 1.5rem; background: #f1f3f5; color: #6c757d; }
.cb-notify-hero.is-on .cb-notify-icon { background: #e6f4ea; color: #1e7b34; }
.cb-notify-hero.is-low { border-left-color: #b25e09; }
.cb-notify-hero.is-low .cb-notify-icon { background: #fff4e0; color: #b25e09; }
.cb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
@media (max-width: 767.98px) { .cb-steps { grid-template-columns: repeat(2, 1fr); } }
.cb-step { position: relative; text-align: center; padding: .75rem .5rem; background: #f5f7fa; border-radius: .6rem; }
.cb-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e7f0fa; color: var(--cb-primary); font-size: 1.15rem; margin-bottom: .4rem; }
.cb-step-title { font-weight: 600; font-size: .9rem; }
.cb-step-text { font-size: .78rem; color: #6c757d; }

/* Setup checklist (LINE) */
.cb-setup li { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; position: relative; }
.cb-setup li + li { border-top: 1px dashed #e3e7ec; }
.cb-setup-dot { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #f1f3f5; color: #6c757d; font-weight: 600; font-size: .9rem; }
.cb-setup li.is-done .cb-setup-dot { background: #1e7b34; color: #fff; }

/* เครดิตแจ้งลูกค้า (/me/credit) */
.cb-credit-hero { border-left: 5px solid var(--cb-primary); }
.cb-credit-hero.is-low { border-left-color: #b25e09; }
.cb-credit-amount { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.cb-buy-step { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: .6rem; }
.cb-pack { display: block; cursor: pointer; margin: 0; }
.cb-pack-body { position: relative; display: block; height: 100%; padding: .9rem 1rem; border: 2px solid #e3e7ec; border-radius: .6rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cb-pack:hover .cb-pack-body { border-color: #b9d3ef; }
.cb-pack input:checked + .cb-pack-body { border-color: var(--cb-primary); box-shadow: 0 0 0 3px rgba(43,108,176,.15); }
.cb-pack input:focus-visible + .cb-pack-body { outline: 2px solid var(--cb-primary); outline-offset: 2px; }
.cb-pack-name { display: block; font-weight: 600; }
.cb-pack-price { display: block; font-size: 1.5rem; font-weight: 700; color: var(--cb-primary); margin: .15rem 0; }
.cb-pack-best { position: absolute; top: .6rem; right: .6rem; }
.cb-pack-check { position: absolute; bottom: .6rem; right: .7rem; color: var(--cb-primary); font-size: 1.2rem; display: none; }
.cb-pack input:checked + .cb-pack-body .cb-pack-check { display: block; }
.cb-pay { background: #f5f7fa; border-radius: .6rem; padding: .9rem 1rem; }
.cb-ledger-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: .95rem; }
.cb-ledger-icon.is-plus { background: #e6f4ea; color: #1e7b34; }
.cb-ledger-icon.is-minus { background: #fdecea; color: #b42318; }

/* วิเคราะห์การแพค (/me/analytics) */
.cb-rank { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 700; font-size: .85rem; background: #f1f3f5; color: #6c757d; }
.cb-rank.is-top1 { background: #fde68a; color: #92400e; }
.cb-rank.is-top2 { background: #e5e7eb; color: #374151; }
.cb-rank.is-top3 { background: #f5d0a9; color: #7c2d12; }
.cb-sla { position: relative; overflow: visible; }
.cb-sla-target { position: absolute; left: 66.67%; top: -3px; bottom: -3px; width: 2px; background: #1f2d3d; opacity: .5; }   /* 100% of target on a 0–150% bar */
.cb-heat { display: grid; grid-template-columns: 2.2rem repeat(24, minmax(1.4rem, 1fr)); gap: 3px; min-width: 40rem; font-size: .7rem; }
.cb-heat-h { text-align: left; color: #6c757d; }
.cb-heat-d { color: #6c757d; display: flex; align-items: center; }
.cb-heat-c { height: 1.6rem; border-radius: .3rem; display: flex; align-items: center; justify-content: center; }
.cb-heat-legend { display: inline-block; width: 5rem; height: .5rem; border-radius: .25rem; background: linear-gradient(to right, rgba(43,108,176,.12), rgba(43,108,176,1)); }
.cb-qc { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: .6rem; background: #f5f7fa; height: 100%; }
.cb-qc.is-warn { background: #fff8eb; }
.cb-qc .cb-kpi-icon { margin-bottom: 0; }

.cb-bars-thin { gap: .2rem; }
.cb-bars-thin .cb-bar-day { font-size: .65rem; }

.cb-dot { font-size: .55rem; }
.cb-dot.is-on { color: #1e7b34; }
.cb-dot.is-off { color: #b42318; }

/* ---- Breadcrumb ---- */
.cb-breadcrumb {
    background: transparent;
    font-size: 0.9rem;
}

/* ---- Call to action ---- */
.cb-cta {
    background: linear-gradient(135deg, var(--cb-primary), var(--cb-primary-dark));
    color: #fff;
    border-radius: var(--cb-radius);
}
.cb-cta a.btn { font-weight: 600; }

/* ---- Footer ---- */
.cb-footer {
    background: var(--cb-ink);
    color: #cbd5e1;
}
.cb-footer a { color: #e2e8f0; text-decoration: none; }
.cb-footer a:hover { color: #fff; text-decoration: underline; }
.cb-footer h6 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}

/* Webhooks (/me/hooks) */
.cb-status-warn { background: #fff4e0; color: #b25e09; }
.cb-hook-url { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; word-break: break-all; }
.cb-ev-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 1rem; background: #f1f3f5; color: #495057; font-size: .8rem; }
.cb-ev-chip.is-on { background: #e7f0fa; color: var(--cb-primary); }
.cb-ev-chip.is-off { background: transparent; border: 1px dashed #d0d5db; color: #adb5bd; }
.cb-ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 767.98px) { .cb-ev-grid { grid-template-columns: 1fr; } }
.cb-ev-opt { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid #e3e7ec; border-radius: .55rem; cursor: pointer; margin: 0; height: 100%; }
.cb-ev-opt:hover { border-color: #b8c7d9; }
.cb-ev-opt:has(input:checked) { border-color: var(--cb-primary); background: #f3f8fd; }
.cb-ev-opt .form-check-input { margin: .2rem 0 0; flex: 0 0 auto; }
.cb-ev-opt code { font-size: .72rem; color: #6c757d; }
.cb-secret { font-family: SFMono-Regular, Menlo, Consolas, monospace; background: #fff; border: 1px dashed #d4a64a; border-radius: .4rem; padding: .5rem .75rem; word-break: break-all; }

/* Open API (/me/api) */
.cb-code-plain { border-style: solid; border-color: #e3e7ec; background: #f8f9fa; color: #1f2d3d; font-size: .85rem; }
.cb-endpoints li { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; }
.cb-endpoints li + li { border-top: 1px dashed #e3e7ec; }
.cb-method { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; margin-top: .15rem; background: #e6f4ea; color: #1e7b34; }
.cb-curl { background: #1f2d3d; color: #e3e7ec; border-radius: .5rem; padding: .75rem 1rem; font-size: .78rem; white-space: pre-wrap; word-break: break-all; }

/* Admin booths (/pol/booths) */
.cb-kpi.is-active { box-shadow: 0 0 0 2px var(--cb-primary), 0 1px 3px rgba(0,0,0,.08); }
.cb-booth-row { border-left: 4px solid #1e7b34 !important; }
.cb-booth-row.is-offline { border-left-color: #b42318 !important; background: #fffafa; }
.cb-booth-row.is-idle { border-left-color: #e0a100 !important; }
.cb-booth-row.is-never { border-left-color: #ced4da !important; }

/* Booth online dot (/me/clips) */
.cb-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; background: #adb5bd; }
.cb-dot.is-on { background: #1e9e45; box-shadow: 0 0 0 3px rgba(30,158,69,.18); }
.cb-dot.is-off { background: #c9302c; }

/* Hardware (/pol/hardware): booths nested under a shop */
.cb-hw-booths { background: #f8f9fa; border-radius: .5rem; padding: .25rem .75rem; }
.cb-hw-booth { padding: .6rem 0; }
.cb-hw-booth + .cb-hw-booth { border-top: 1px dashed #e3e7ec; }
.cb-hw-toggle .bi-chevron-down { display: inline-block; transition: transform .15s; }
.cb-hw-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* Booth log reader (/pol/logs/{id}) */
.cb-log { background: #1f2d3d; color: #d8dee6; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.5; max-height: 70vh; overflow: auto; padding: .5rem 0; border-radius: 0 0 .375rem .375rem; }
.cb-log-line { display: flex; white-space: pre; }
.cb-log.is-wrap .cb-log-line { white-space: pre-wrap; word-break: break-word; }
.cb-log-line:hover { background: rgba(255,255,255,.05); }
.cb-log-n { flex: 0 0 3.75rem; text-align: right; padding-right: .75rem; color: #6c7a89; user-select: none; }
.cb-log-t { flex: 1 1 auto; padding-right: 1rem; min-width: 0; }
.cb-log-line.is-err { background: rgba(220,53,69,.18); color: #ffb3b8; }
.cb-log-line.is-warn { background: rgba(255,193,7,.12); color: #ffe08a; }

.cb-booth-row.is-plain { border-left-color: transparent !important; }
.cb-setup li.is-fail .cb-setup-dot { background: #b42318; color: #fff; }