/**
 * Main Stylesheet — "Midnight Emerald" theme
 * Start Concept System
 *
 * Skin layered over AdminLTE v3 (layout + JS behaviour only).
 * Every colour comes from the tokens below; dark is the default,
 * <html class="theme-light"> switches to the light companion.
 *
 * Type:  headings / UI  → Noto Sans Thai
 *        body / details → Sarabun
 */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
    /* content */
    --bg:            #0B111C;
    --bar:           rgba(11, 17, 28, .82);
    --surface:       #101827;
    --surface-glass: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    --surface-2:     rgba(255, 255, 255, .06);
    --surface-3:     rgba(255, 255, 255, .10);
    --line:          rgba(255, 255, 255, .09);
    --line-2:        rgba(255, 255, 255, .06);
    --ink:           #E9EEF6;
    --ink-2:         #8C97A9;
    --ink-3:         #5B6678;

    /* sidebar (stays midnight in both themes) */
    --side-bg:       linear-gradient(180deg, #0E1626 0%, #0A1019 100%);
    --side-ink:      #E9EEF6;
    --side-ink-2:    #8C97A9;
    --side-ink-3:    #4E596B;
    --side-line:     rgba(255, 255, 255, .08);
    --side-hover:    rgba(255, 255, 255, .05);
    --side-active:   rgba(51, 194, 149, .13);

    /* accent + semantics */
    --accent:        #33C295;
    --accent-2:      #5FD9B2;
    --accent-deep:   #22A67C;
    --accent-ink:    #04140E;
    --accent-soft:   rgba(51, 194, 149, .13);
    --accent-glow:   rgba(51, 194, 149, .28);
    --good:          #33C295;
    --warn:          #F0B54D;
    --bad:           #F26D6D;
    --info:          #6FAEFF;

    /* controls */
    --input-bg:      rgba(255, 255, 255, .04);
    --input-line:    rgba(255, 255, 255, .12);
    --input-ink:     #E9EEF6;
    --placeholder:   #5B6678;

    /* shape */
    --r:             14px;
    --r-sm:          10px;
    --r-xs:          8px;
    --shadow:        0 24px 60px rgba(0, 0, 0, .5);
    --shadow-sm:     0 8px 24px rgba(0, 0, 0, .28);
    --inset-hi:      inset 0 1px 0 rgba(255, 255, 255, .06);

    /* type */
    --font-display:  'Noto Sans Thai', 'Sarabun', system-ui, sans-serif;
    --font-body:     'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;

    color-scheme: dark;
}

:root.theme-light {
    --bg:            #F3F6FA;
    --bar:           rgba(255, 255, 255, .86);
    --surface:       #FFFFFF;
    --surface-glass: none;  /* ธีมสว่างไม่มีชั้นแก้ว - ต้องเป็นค่าที่ใช้เป็น background-image ได้ ไม่ใช่สี */
    --surface-2:     #F5F8FC;
    --surface-3:     #EAF0F7;
    --line:          #E1E7EF;
    --line-2:        #ECF0F5;
    --ink:           #141B27;
    --ink-2:         #5F6B7D;
    --ink-3:         #98A2B3;

    --accent:        #1FA57C;
    --accent-2:      #24B98B;
    --accent-deep:   #178C68;
    --accent-ink:    #FFFFFF;
    --accent-soft:   rgba(31, 165, 124, .12);
    --accent-glow:   rgba(31, 165, 124, .22);
    --good:          #1FA57C;
    --warn:          #C98A1B;
    --bad:           #D9534F;
    --info:          #2F80ED;

    --input-bg:      #FFFFFF;
    --input-line:    #D5DCE6;
    --input-ink:     #141B27;
    --placeholder:   #98A2B3;

    --shadow:        0 20px 50px rgba(20, 27, 39, .12);
    --shadow-sm:     0 6px 20px rgba(20, 27, 39, .06);
    --inset-hi:      none;

    color-scheme: light;
}

/* ============================================================
   2. Base
   ============================================================ */
html { background: var(--bg); }

body {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .badge, .nav-link, .brand-link, .card-title, .modal-title,
.breadcrumb, .page-link, .dropdown-header, .nav-header, .stat-tile .num,
th, label, .custom-file-label, .swal2-title, .fc, .dataTables_wrapper .dataTables_info {
    font-family: var(--font-display);
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 600; letter-spacing: -.005em; }
a { color: var(--accent); }
a:hover { color: var(--accent-2); text-decoration: none; }
small, .small { color: var(--ink-2); }
strong, b { font-weight: 600; }
hr { border-top-color: var(--line); }

::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* text utilities → tokens */
.text-muted   { color: var(--ink-2) !important; }
.text-light, .text-white, .text-dark { color: var(--ink) !important; }
.text-success { color: var(--good) !important; }
.text-warning { color: var(--warn) !important; }
.text-danger  { color: var(--bad) !important; }
.text-info    { color: var(--info) !important; }
.text-primary { color: var(--accent) !important; }

.expiry-urgent  { color: var(--bad) !important; font-weight: 600; }
.expiry-warning { color: var(--warn) !important; }
.expiry-normal  { color: var(--good) !important; }

/* ============================================================
   3. Layout shell
   ============================================================ */
.wrapper { background: var(--bg); }

.content-wrapper {
    background: var(--bg) !important;
    color: var(--ink);
    min-height: calc(100vh - 57px);
}

.content-header { padding: 26px 8px 12px; }
.content-header h1 {
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.content-header h1 > i {
    width: 38px; height: 38px;
    display: inline-grid; place-items: center;
    border-radius: var(--r-xs);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 15px;
}
.content-header .page-subtitle { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }
.content-header .page-subtitle b { color: var(--ink); font-weight: 600; }
.content-header .page-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

.breadcrumb {
    background: transparent;
    padding: 6px 0 0;
    margin: 0;
    font-size: 12.5px;
}
.breadcrumb-item a { color: var(--ink-2); }
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item.active { color: var(--ink-3); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-3); }

.content { padding-bottom: 32px; }

/* footer */
.main-footer {
    background: transparent !important;
    border-top: 1px solid var(--line) !important;
    color: var(--ink-3) !important;
    font-size: 12.5px;
    padding: 14px 24px;
}
.main-footer a { color: var(--ink-2); }
.main-footer strong { font-weight: 500; }

/* ============================================================
   4. Sidebar
   ============================================================ */
.main-sidebar {
    background: var(--side-bg) !important;
    border-right: 1px solid var(--side-line);
    box-shadow: none !important;
}
.main-sidebar .sidebar {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 16px;
    height: calc(100% - 64px);
}

/* brand */
.brand-link {
    display: flex !important;
    align-items: center;
    gap: 11px;
    height: 64px;
    padding: 0 18px !important;
    border-bottom: 1px solid var(--side-line) !important;
    color: var(--side-ink) !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
}
.brand-link:hover { color: var(--side-ink) !important; }
.brand-mark {
    width: 34px; height: 34px; flex: none;
    display: inline-grid; place-items: center;
    border-radius: var(--r-xs);
    background: linear-gradient(135deg, #3BD3A2, #22A67C);
    color: #04140E;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px var(--accent-glow);
}
.brand-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.1;
    display: flex; flex-direction: column;
}
.brand-text small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--side-ink-2);
    margin-top: 4px;
}

/* user panel */
.main-sidebar .user-panel {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px 14px;
    margin: 4px 0 8px;
    border-bottom: 1px solid var(--side-line) !important;
    white-space: nowrap; overflow: hidden;
}
.avatar {
    width: 32px; height: 32px; flex: none;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--side-line);
    color: var(--side-ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
}
.main-sidebar .user-panel .info { padding: 0; line-height: 1.2; min-width: 0; }
.main-sidebar .user-panel .info b {
    display: block; color: var(--side-ink);
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis;
}
.main-sidebar .user-panel .info small { color: var(--side-ink-2); font-size: 12px; }

/* nav */
.nav-sidebar { gap: 2px; }
.nav-sidebar .nav-header {
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--side-ink-3);
    padding: 14px 10px 4px;
}
.nav-sidebar > .nav-item > .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    margin: 0;
    border-radius: var(--r-sm);
    color: var(--side-ink-2) !important;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.nav-sidebar > .nav-item > .nav-link .nav-icon {
    width: 18px; margin: 0; font-size: 14px; text-align: center; line-height: 1;
}
.nav-sidebar > .nav-item > .nav-link p { display: flex; align-items: center; flex: 1; gap: 8px; margin: 0; min-width: 0; }
.nav-sidebar > .nav-item > .nav-link:hover { background: var(--side-hover); color: var(--side-ink) !important; }
.nav-sidebar > .nav-item > .nav-link.active {
    background: var(--side-active) !important;
    color: var(--accent-2) !important;
    box-shadow: none !important;
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--accent); }
.nav-count {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--side-line);
    color: var(--side-ink-2);
}
.nav-link.active .nav-count { background: rgba(51,194,149,.16); border-color: transparent; color: var(--accent-2); }

.sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--side-line); }
.sidebar-foot .nav-link { color: var(--side-ink-2) !important; }
.sidebar-foot .nav-link:hover { color: var(--bad) !important; background: rgba(242,109,109,.08); }

/* collapsed (sidebar-mini) */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .user-panel .info,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-count,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-header { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link { justify-content: center; padding: 0 !important; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .user-panel { justify-content: center; padding-inline: 0; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link { justify-content: center; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link p { display: none; }

/* ============================================================
   5. Top bar
   ============================================================ */
.main-header.navbar {
    background: var(--bar) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 18px;
    min-height: 64px;
    gap: 12px;
}
.main-header .nav-link {
    color: var(--ink-2) !important;
    border-radius: var(--r-xs);
    padding: 8px 10px;
    font-family: var(--font-display);
}
.main-header .nav-link:hover { color: var(--ink) !important; background: var(--surface-2); }
.main-header .navbar-nav { align-items: center; gap: 2px; }

.topbar-search {
    flex: 1;
    max-width: 440px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    height: 38px;
    background: var(--input-bg);
    border: 1px solid var(--input-line);
    border-radius: var(--r-sm);
    color: var(--ink-3);
    margin: 0 8px;
}
.topbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar-search i { font-size: 13px; color: var(--ink-2); }
.topbar-search input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13.5px;
}
.topbar-search input::placeholder { color: var(--placeholder); }

.main-header .navbar-badge {
    top: 4px; right: 4px;
    font-family: var(--font-body);
    font-size: 10px; font-weight: 600;
    padding: 2px 5px;
    background: var(--warn) !important;
    color: #1A1200 !important;
    border-radius: 999px;
}
.main-header .user-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px !important;
    border: 1px solid var(--line);
    border-radius: 999px !important;
    font-size: 13px;
    color: var(--ink) !important;
}
.main-header .user-chip .avatar { width: 26px; height: 26px; font-size: 11px; background: var(--accent-soft); border-color: transparent; color: var(--accent); }

#themeToggle { transition: transform .3s ease; }
#themeToggle:hover { transform: rotate(20deg); }

/* dropdowns (navbar + tables) */
.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    padding: 6px;
    color: var(--ink);
}
.dropdown-item {
    color: var(--ink) !important;
    border-radius: var(--r-xs);
    padding: 8px 10px;
    font-size: 13.5px;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2) !important; color: var(--ink) !important; }
.dropdown-item.text-danger { color: var(--bad) !important; }
.dropdown-divider { border-top-color: var(--line) !important; margin: 6px 0; }
.dropdown-header, .dropdown-item.dropdown-header {
    color: var(--ink-2) !important;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    padding: 8px 10px 4px;
}
.dropdown-footer, .dropdown-item.dropdown-footer { color: var(--accent) !important; text-align: center; font-size: 13px; }
.dropdown-menu-lg { min-width: 320px; }
#notificationList .dropdown-item { white-space: normal; line-height: 1.4; }
#notificationList .dropdown-item i { color: var(--warn); }

/* ============================================================
   6. Cards / panels
   ============================================================ */
.card {
    background-color: var(--surface) !important;
    background-image: var(--surface-glass) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--inset-hi), var(--shadow-sm) !important;
    color: var(--ink);
    margin-bottom: 18px;
    overflow: hidden;
}
:root.theme-light .card { background: var(--surface) !important; }
.card.card-dark, .card.card-warning, .card.card-danger, .card.card-info,
.card.card-success, .card.card-primary, .card.card-secondary,
.card.card-outline { border-top: 1px solid var(--line) !important; }

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line-2) !important;
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    color: var(--ink) !important;
}
.card-header::after { display: none; }
.card-title {
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    display: inline-flex; align-items: center; gap: 8px;
    float: none !important;
}
.card-title > i { color: var(--accent); font-size: 13px; }
.card-warning .card-title > i { color: var(--warn); }
.card-danger  .card-title > i { color: var(--bad); }
.card-info    .card-title > i { color: var(--info); }
.card-success .card-title > i { color: var(--good); }
.card-tools { margin: 0 !important; float: none !important; display: flex; gap: 6px; align-items: center; }
.card-body { background: transparent !important; color: var(--ink) !important; padding: 18px; }
.card-footer {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--line-2) !important;
    padding: 12px 18px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.card .card-body > .table-responsive, .card .card-body.p-0 > table { margin: 0; }

/* alerts */
.alert { border-radius: var(--r-sm); border: 1px solid transparent; font-size: 13.5px; }
.alert-danger    { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
.alert-success   { background: color-mix(in srgb, var(--good) 14%, transparent); border-color: color-mix(in srgb, var(--good) 30%, transparent); color: var(--good); }
.alert-warning   { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.alert-info      { background: color-mix(in srgb, var(--info) 14%, transparent); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
.alert-secondary { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.alert .close { color: inherit; text-shadow: none; opacity: .7; }

/* ============================================================
   7. Stat tiles (replaces AdminLTE small-box)
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.stat-tile {
    position: relative;
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 20px 16px;
    background-color: var(--surface);
    background-image: var(--surface-glass);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--inset-hi), var(--shadow-sm);
    color: var(--ink);
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease;
    overflow: hidden;
}
:root.theme-light .stat-tile { background: var(--surface); }
a.stat-tile:hover { transform: translateY(-2px); border-color: var(--surface-3); color: var(--ink); }
.stat-tile .lbl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); font-family: var(--font-body); }
.stat-tile .lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.stat-tile.good .lbl::before { background: var(--good); }
.stat-tile.warn .lbl::before { background: var(--warn); }
.stat-tile.bad  .lbl::before { background: var(--bad); }
.stat-tile.info .lbl::before { background: var(--info); }
.stat-tile.accent .lbl::before { background: var(--accent); }
.stat-tile .num {
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
    color: var(--ink);
}
.stat-tile.warn .num { color: var(--warn); }
.stat-tile.bad  .num { color: var(--bad); }
.stat-tile .sub { font-size: 12.5px; color: var(--ink-2); font-family: var(--font-body); }
.stat-tile .sub i { font-size: 11px; margin-left: 4px; }
.stat-tile .ico {
    position: absolute; right: 16px; top: 16px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 14px;
}
.stat-tile.good .ico { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.stat-tile.warn .ico { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.stat-tile.bad  .ico { color: var(--bad);  background: color-mix(in srgb, var(--bad) 12%, transparent); }
.stat-tile.info .ico { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.stat-tile.accent .ico { color: var(--accent); background: var(--accent-soft); }

/* legacy small-box (still used by any page not yet converted) */
.small-box {
    background-color: var(--surface) !important;
    background-image: var(--surface-glass) !important;
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    box-shadow: var(--inset-hi), var(--shadow-sm) !important;
    color: var(--ink) !important;
}
.small-box .inner h3 { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.small-box .inner p { color: var(--ink-2); font-family: var(--font-body); }
.small-box .icon { color: var(--surface-3) !important; }
.small-box-footer { background: var(--surface-2) !important; color: var(--ink-2) !important; }

/* ============================================================
   8. Tables (+ DataTables)
   ============================================================ */
.table, .table-dark, .table-bordered, .table-striped {
    color: var(--ink) !important;
    background: transparent !important;
    border-color: var(--line-2) !important;
    margin-bottom: 0;
    font-size: 13.5px;
}
.table thead th, .table-dark thead th {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--line-2) !important;
    border-top: 0 !important;
    color: var(--ink-2) !important;
    font-weight: 500;
    font-size: 12.5px;
    padding: 10px 16px;
    white-space: nowrap;
    vertical-align: middle;
}
.table td, .table th, .table-dark td, .table-dark th {
    border-color: var(--line-2) !important;
    background: transparent !important;
    color: var(--ink) !important;
    padding: 11px 16px;
    vertical-align: middle;
}
.table td { font-family: var(--font-body); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-bordered, .table-bordered td, .table-bordered th { border-left: 0 !important; border-right: 0 !important; }
.table-striped tbody tr:nth-of-type(odd), .table-dark.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }
.table-hover tbody tr:hover, .table-dark.table-hover tbody tr:hover,
.table-hover tbody tr:hover td { background: var(--surface-2) !important; color: var(--ink) !important; }
.table-sm td, .table-sm th { padding: 7px 12px; }
.table td.text-muted, .table .text-muted { color: var(--ink-2) !important; }
.table a { color: var(--ink); }
.table a:hover { color: var(--accent); }
.table td .btn-group { white-space: nowrap; }

/* key/value tables inside modals (project_view / customer_view): row headers read as labels */
.table tbody th, .table.table-kv th {
    background: transparent !important;
    color: var(--ink-2) !important;
    font-weight: 500;
    font-family: var(--font-body);
    white-space: nowrap;
}
.table thead th { white-space: nowrap; }

/* legacy spacing helpers on icons are redundant now that flex gap handles it */
.card-title > i.mr-2, .modal-title > i.mr-2, .content-header h1 > i.mr-2,
.btn > i.mr-1, .btn > i.mr-2 { margin-right: 0 !important; }
.modal-body h4, .modal-body h5 { font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-body h5 > i, .modal-body h4 > i { color: var(--accent); font-size: 14px; margin-right: 0 !important; }

.dataTables_wrapper { color: var(--ink) !important; font-family: var(--font-body); }
.dataTables_wrapper .row:first-child { margin-bottom: 12px; align-items: center; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--ink-2) !important; font-size: 13px; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-line) !important;
    color: var(--input-ink) !important;
    border-radius: var(--r-xs);
    padding: 6px 10px;
    margin-left: 6px;
    font-family: var(--font-body);
}
.dataTables_wrapper .dataTables_filter input { width: 220px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { outline: 0; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }
.dataTables_wrapper .dataTables_processing {
    background: var(--surface) !important; color: var(--ink) !important;
    border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
}
table.dataTable { border-collapse: collapse !important; }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { color: var(--ink-3); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { background: var(--accent); border-color: transparent; box-shadow: none; }

.pagination { gap: 4px; margin: 0; }
.page-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--ink-2) !important;
    border-radius: var(--r-xs) !important;
    min-width: 34px; text-align: center;
    padding: 6px 10px;
    font-size: 13px;
}
.page-link:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.page-item.active .page-link { background: var(--accent) !important; color: var(--accent-ink) !important; }
.page-item.disabled .page-link { color: var(--ink-3) !important; }

/* ============================================================
   9. Badges → pills
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.badge-success, .badge.bg-success { color: var(--good) !important; background: color-mix(in srgb, var(--good) 14%, transparent) !important; }
.badge-warning, .badge.bg-warning { color: var(--warn) !important; background: color-mix(in srgb, var(--warn) 14%, transparent) !important; }
.badge-danger,  .badge.bg-danger  { color: var(--bad)  !important; background: color-mix(in srgb, var(--bad) 14%, transparent) !important; }
.badge-info,    .badge.bg-info    { color: var(--ink-2) !important; background: transparent !important; border: 1px solid var(--line); }
.badge-primary, .badge.bg-primary { color: var(--accent) !important; background: var(--accent-soft) !important; }
.badge-secondary, .badge.bg-secondary { color: var(--ink-2) !important; background: var(--surface-2) !important; }
.badge-success::before, .badge-warning::before, .badge-danger::before,
.badge.bg-success::before, .badge.bg-warning::before, .badge.bg-danger::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.badge-status { font-size: .85rem; }

/* ============================================================
   10. Buttons
   ============================================================ */
.btn {
    border-radius: var(--r-xs);
    font-weight: 500;
    font-size: 13.5px;
    padding: 8px 16px;
    border: 1px solid transparent;
    box-shadow: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-block { width: 100%; }

.btn-primary, .btn-success {
    background: linear-gradient(135deg, #3BD3A2, #22A67C) !important;
    border-color: transparent !important;
    color: #04140E !important;
    box-shadow: 0 8px 22px var(--accent-glow) !important;
}
.btn-primary:hover, .btn-success:hover { filter: brightness(1.06); color: #04140E !important; }

.btn-secondary, .btn-default, .btn-light {
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover { background: var(--surface-3) !important; }

.btn-info    { background: color-mix(in srgb, var(--info) 14%, transparent) !important; border-color: transparent !important; color: var(--info) !important; }
.btn-warning { background: color-mix(in srgb, var(--warn) 14%, transparent) !important; border-color: transparent !important; color: var(--warn) !important; }
.btn-danger  { background: color-mix(in srgb, var(--bad) 14%, transparent)  !important; border-color: transparent !important; color: var(--bad)  !important; }
.btn-info:hover    { background: color-mix(in srgb, var(--info) 24%, transparent) !important; }
.btn-warning:hover { background: color-mix(in srgb, var(--warn) 24%, transparent) !important; }
.btn-danger:hover  { background: color-mix(in srgb, var(--bad) 24%, transparent)  !important; }

.btn-outline-secondary { background: transparent !important; border-color: var(--line) !important; color: var(--ink-2) !important; }
.btn-outline-secondary:hover { background: var(--surface-2) !important; color: var(--ink) !important; }

.btn-group-sm > .btn, .btn-action { padding: 5px 9px; font-size: 12px; }
.btn-group > .btn:not(:first-child) { margin-left: 4px; border-radius: var(--r-xs) !important; }
.btn-group > .btn:not(:last-child) { border-radius: var(--r-xs) !important; }

.btn:disabled, .btn.disabled { opacity: .5; }

/* ============================================================
   11. Forms
   ============================================================ */
label { color: var(--ink-2); font-size: 13px; font-weight: 500; margin-bottom: 6px; }
label .text-danger { margin-left: 2px; }
.form-group { margin-bottom: 16px; }

.form-control, .custom-select, select.form-control, textarea.form-control {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-line) !important;
    color: var(--input-ink) !important;
    border-radius: var(--r-xs);
    font-family: var(--font-body);
    font-size: 14px;
    height: auto;
    padding: 9px 12px;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    background: var(--input-bg) !important;
}
.form-control::placeholder { color: var(--placeholder); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-2) !important; color: var(--ink-2) !important; }
.form-control.is-invalid { border-color: var(--bad) !important; }
.invalid-feedback { color: var(--bad); }
select.form-control, .custom-select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C97A9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 34px;
}
select.form-control option { background: var(--surface); color: var(--ink); }
input[type="date"].form-control::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }

.input-group-text {
    background: var(--surface-2) !important;
    border: 1px solid var(--input-line) !important;
    color: var(--ink-2) !important;
    border-radius: var(--r-xs);
}
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* file input */
.custom-file { height: 40px; }
.custom-file-input { height: 40px; cursor: pointer; }
.custom-file-label {
    height: 40px; line-height: 24px;
    background: var(--input-bg) !important;
    border: 1px dashed var(--input-line) !important;
    color: var(--ink-2) !important;
    border-radius: var(--r-xs);
    padding: 8px 12px;
    font-weight: 400;
}
.custom-file-label::after {
    height: 38px; line-height: 24px;
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    border-left: 1px solid var(--input-line) !important;
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    padding: 7px 14px;
    content: "เลือกไฟล์";
}

/* switches + checks */
.custom-control-label { color: var(--ink); font-weight: 400; font-family: var(--font-body); }
.custom-control-label::before { background: var(--surface-3) !important; border-color: var(--input-line) !important; box-shadow: none !important; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--accent) !important; border-color: var(--accent) !important; }
.custom-switch .custom-control-label::after { background: var(--ink-2); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background: var(--accent-ink); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--accent-soft) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* filter toolbar (projects / customers list) */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filter-bar .form-control { width: auto; min-width: 170px; }
.filter-bar .ml-auto { margin-left: auto; }

/* ============================================================
   12. Misc components
   ============================================================ */
.list-group-item {
    background: transparent !important;
    border-color: var(--line-2) !important;
    color: var(--ink) !important;
    font-family: var(--font-body);
}
.list-group-item a { color: var(--ink); }
.bg-dark, .bg-secondary { background: var(--surface-2) !important; color: var(--ink) !important; }
.bg-light { background: var(--surface-2) !important; }
.border-secondary { border-color: var(--line) !important; }

/* document thumbnail cards inside modals */
.doc-card { background: var(--surface-2) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.doc-card .card-body { padding: 14px 12px; }
.doc-card i.fa-3x { font-size: 2.2em; }

.file-preview { max-width: 100%; max-height: 500px; border-radius: var(--r-sm); }
.modal-xl { max-width: 1140px; }

.tooltip-inner { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-xs); font-family: var(--font-body); font-size: 12.5px; box-shadow: var(--shadow-sm); }
.bs-tooltip-top .arrow::before { border-top-color: var(--line); }

.spinner-border.text-primary { color: var(--accent) !important; }

/* empty state row */
.table td.empty { text-align: center; color: var(--ink-3) !important; padding: 28px 16px; font-family: var(--font-body); }

/* ============================================================
   13. Responsive
   ============================================================ */
@media (max-width: 1200px) {
    .stat-grid, .stat-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    body { font-size: 14px; }
    .content-header { padding: 18px 4px 8px; }
    .content-header h1 { font-size: 22px; }
    .stat-grid, .stat-grid.cols-3, .stat-grid.cols-6 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-tile { padding: 14px 14px 12px; }
    .stat-tile .ico { display: none; }
    .topbar-search { display: none; }
    .main-header.navbar { padding: 8px 10px; }
    .main-header .user-chip .chip-name { display: none; }
    .card-header { padding: 12px 14px; }
    .card-body { padding: 14px; }
    .table thead th, .table td { padding-inline: 12px; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 6px 0 0; }
    .filter-bar .form-control { min-width: 0; flex: 1 1 45%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; }
}

/* ============================================================
   14. Polish
   ============================================================ */
/* DataTables: keep numbers / dates / pills on one line; let names wrap */
table.dataTable td { white-space: nowrap; }
table.dataTable td:nth-child(2) { white-space: normal; min-width: 160px; }

/* action row: every icon button uses the quiet tinted style */
.btn-action.btn-success, .btn-group-sm > .btn-success {
    background: color-mix(in srgb, var(--good) 14%, transparent) !important;
    color: var(--good) !important;
    box-shadow: none !important;
}
.btn-action.btn-success:hover, .btn-group-sm > .btn-success:hover {
    background: color-mix(in srgb, var(--good) 24%, transparent) !important;
}

/* ===== เพิ่มจาก section 15: component ของกลางตาม DESIGN_SYSTEM.md 5.8 / 5.12 / 5.10 ===== */
/* ---- settings / page tabs ---- */
.nav-tabs { border-bottom: 1px solid var(--line); gap: 4px; margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs .nav-link {
    border: 0 !important; border-radius: var(--r-xs) var(--r-xs) 0 0;
    color: var(--ink-2) !important; padding: 10px 16px; font-weight: 500; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px; background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--ink) !important; background: var(--surface-2) !important; }
.nav-tabs .nav-link.active { color: var(--accent) !important; box-shadow: inset 0 -2px 0 var(--accent); }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* segmented pills (document type filter) */
.seg-pills { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; }
.seg-pills a, .seg-pills button { border: 0; background: transparent; color: var(--ink-2); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-family: var(--font-display); white-space: nowrap; }
.seg-pills .active { background: var(--accent); color: var(--accent-ink) !important; }

/* ---- mobile app shell ---- */
.mobile-tabbar { display: none; }
.fab { display: none; }
@media (max-width: 767.98px) {
    body.sidebar-mini.layout-fixed .content-wrapper { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .main-footer { display: none !important; }
    .mobile-tabbar {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        background: var(--bar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .mobile-tabbar a {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px; border-radius: var(--r-xs); color: var(--ink-2); text-decoration: none;
        font-family: var(--font-display); font-size: 10.5px; font-weight: 500;
    }
    .mobile-tabbar a i { font-size: 17px; }
    .mobile-tabbar a.active { color: var(--accent); }
    .mobile-tabbar a.active i { filter: drop-shadow(0 0 8px var(--accent-glow)); }
    .fab {
        display: grid; place-items: center;
        position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1036;
        width: 54px; height: 54px; border-radius: 50%;
        background: linear-gradient(135deg, #3BD3A2, #22A67C); color: #04140E; font-size: 20px;
        box-shadow: 0 10px 26px var(--accent-glow);
    }
    .fab:hover { color: #04140E; }
    .content-header { padding-top: 14px; }
    .content-header .page-actions { justify-content: flex-start; }
    .content-header .page-actions .btn { flex: 1; }
    .card { border-radius: 12px !important; }
    .modal-dialog { margin: 8px; }
    .modal-body { padding: 14px; }
    .lines-table td.unit-col { display: none; }
    .totals { max-width: none; }
    .kv { grid-template-columns: 1fr; gap: 2px; }
    .kv dt { margin-top: 8px; }
    .filter-bar { gap: 8px; }
    .filter-bar > div { flex: 1 1 45%; }
    .filter-bar .ml-auto { margin-left: 0; width: 100%; }
    .dz-files { grid-template-columns: 1fr; }
    .sticky-actions { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 10; }
}

/* document lines: description gets the remaining width */
.lines-table th:nth-child(2), .lines-table td:nth-child(2) { width: auto; min-width: 240px; }
.lines-table td.qty-col input { text-align: right; }

/* date pickers inside filter bars: icon must sit on the input itself */
.filter-bar .date-wrap { display: block; }
.filter-bar .date-wrap .form-control { width: 100%; min-width: 170px; }
@media (max-width: 767.98px) {
    .filter-bar .form-control, .filter-bar .date-wrap .form-control { width: 100%; min-width: 0; }
    .filter-bar .btn { width: 100%; }
}

/* ---- save feedback on buttons ---- */
.btn.is-saved { background: color-mix(in srgb, var(--good) 18%, transparent) !important; color: var(--good) !important; box-shadow: none !important; }
.btn.is-failed { background: color-mix(in srgb, var(--bad) 18%, transparent) !important; color: var(--bad) !important; box-shadow: none !important; }
.save-status { display: inline-flex; align-items: center; margin-left: 10px; font-size: 12.5px; color: var(--ink-2); font-family: var(--font-body); }
.save-status.text-danger { color: var(--bad) !important; }
.card-footer .save-status { align-self: center; }

/* toasts: larger, with a coloured edge so they read from across the screen */
.swal2-popup.swal2-toast { min-width: 320px; padding: 14px 16px !important; border-left: 4px solid var(--accent); }
.swal2-popup.swal2-toast.swal2-icon-error { border-left-color: var(--bad); }
.swal2-popup.swal2-toast.swal2-icon-warning { border-left-color: var(--warn); }
.swal2-popup.swal2-toast.swal2-icon-info { border-left-color: var(--info); }
.swal2-toast .swal2-title { font-size: 14.5px !important; }
.swal2-toast .swal2-close { color: var(--ink-3) !important; font-size: 20px; }
.swal2-toast .swal2-close:hover { color: var(--ink) !important; }
@media (max-width: 767.98px) {
    .swal2-container.swal2-top { padding-top: 8px; }
    .swal2-popup.swal2-toast { min-width: 0; width: calc(100vw - 24px) !important; }
}


/* ============================================================
   16. Select2 (ไม่มีในไฟล์ต้นฉบับ TWS — หลังบ้าน Meekai ใช้เยอะ)
   ครอบคลุมทั้งธีม bootstrap-5 และธีม default
   ============================================================ */

.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--input-bg);
    border: 1px solid var(--input-line);
    border-radius: var(--r-xs);
    color: var(--input-ink);
    min-height: 38px;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--input-ink);
    line-height: 36px;
    padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ink-3) transparent transparent transparent;
}

.select2-container--bootstrap-5 .select2-selection__placeholder,
.select2-container--default .select2-selection__placeholder {
    color: var(--placeholder);
}

/* โฟกัส / เปิดอยู่ */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ชิปของ multiple */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--r-xs);
    color: var(--accent);
    font-size: 12.5px;
    padding: 2px 8px;
    margin: 3px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--accent);
    margin-right: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--bad);
}

/* ช่องค้นหาในกล่อง */
.select2-container .select2-search--inline .select2-search__field,
.select2-search--dropdown .select2-search__field {
    background: var(--input-bg);
    border: 1px solid var(--input-line);
    border-radius: var(--r-xs);
    color: var(--input-ink);
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--accent);
    outline: none;
}

/* dropdown */
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--default .select2-dropdown,
.select2-dropdown {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
}

.select2-results__option {
    color: var(--ink);
    font-size: 13.5px;
    padding: 7px 12px;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--accent);
    color: var(--accent-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-results__option--selected {
    background: var(--accent-soft);
    color: var(--accent);
}

.select2-results__option--disabled,
.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--ink-3);
}

/* ============================================================
   17. Utility class ที่มาจาก Bootstrap แล้วขัดกับธีมมืด
   หน้าหลังบ้านใช้ bg-light / bg-white ปนอยู่ ต้อง map เป็นโทเค็น
   ไม่งั้นกลายเป็นกล่องขาวบนพื้นมืด อ่านไม่ออก
   ============================================================ */

.bg-white {
    background: var(--surface) !important;
    color: var(--ink) !important;
}

.bg-light,
.bg-body,
.bg-body-tertiary {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
}

.table-light,
.table-light > th,
.table-light > td,
thead.thead-light th {
    background: var(--surface-2) !important;
    color: var(--ink-2) !important;
    border-color: var(--line-2) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right,
.border-start,
.border-end {
    border-color: var(--line) !important;
}

/* ป้ายทะเบียนตัวอย่าง / พรีวิวเอกสาร ต้องเป็นสีขาวจริงเสมอ ไม่ตามธีม */
.force-light,
.doc-preview,
.print-preview {
    background: #ffffff !important;
    color: #141b27 !important;
}

/* ============================================================
   18. กล่องสรุปแบบเก่าของ AdminLTE ที่ยังใช้ bg-* สีทึบ
   ดีไซน์ซิสเต็มกำหนดว่าสี = ความหมาย ไม่ใช่การตกแต่ง
   จึงลดสีทึบเป็น tint + จุดสีบอกความหมาย (scope เฉพาะ small-box/info-box
   เพื่อไม่ให้กระทบ badge / ปุ่ม ที่ใช้ bg-* อย่างถูกต้อง)
   ============================================================ */

.small-box.bg-info,
.small-box.bg-primary,
.small-box.bg-success,
.small-box.bg-warning,
.small-box.bg-danger,
.small-box.bg-secondary,
.info-box.bg-info,
.info-box.bg-primary,
.info-box.bg-success,
.info-box.bg-warning,
.info-box.bg-danger {
    background-color: var(--surface) !important;
    background-image: var(--surface-glass) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

.small-box.bg-info .inner h3,
.small-box.bg-primary .inner h3 { color: var(--info) !important; }
.small-box.bg-success .inner h3 { color: var(--good) !important; }
.small-box.bg-warning .inner h3 { color: var(--warn) !important; }
.small-box.bg-danger  .inner h3 { color: var(--bad)  !important; }

.small-box .inner p,
.small-box .inner small,
.info-box .info-box-text,
.info-box .info-box-number {
    color: var(--ink-2) !important;
}

.small-box .small-box-footer {
    background: var(--surface-2) !important;
    color: var(--ink-2) !important;
    border-top: 1px solid var(--line-2);
}

.small-box .small-box-footer:hover {
    color: var(--accent) !important;
}

/* ============================================================
   19. content-header ตามสเปค: ไอคอน accent ในกล่องมน 36px นำหน้า h1
   ============================================================ */

.content-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
}

.content-header h1 > .page-ico {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 16px;
}

.content-header h1 small {
    display: block;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ink-3);
    margin-top: 2px;
}

/* ============================================================
   20. Modal + SweetAlert2
   นำมาจาก D:\docker\tws\library\css\modal.css ซึ่งเป็นไฟล์แยก
   รอบแรกผมคัดลอกมาเฉพาะ main.css จึงขาดส่วนนี้ไป
   ทำให้ popup ยังเป็นพื้นขาวของ Bootstrap บนธีมมืด
   ============================================================ */
/* ---------- Bootstrap modals ---------- */
.modal-backdrop { background: #05080F; }
.modal-backdrop.show { opacity: .7; }

.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--shadow) !important;
    color: var(--ink) !important;
    overflow: hidden;
}

.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line-2) !important;
    padding: 16px 20px;
    align-items: center;
    color: var(--ink) !important;
}
/* coloured headers (bg-danger / bg-warning / bg-success) become a thin accent strip */
.modal-header.bg-danger, .modal-header.bg-warning, .modal-header.bg-success, .modal-header.bg-primary {
    background: transparent !important;
    box-shadow: inset 0 3px 0 var(--bad);
}
.modal-header.bg-warning { box-shadow: inset 0 3px 0 var(--warn); }
.modal-header.bg-success { box-shadow: inset 0 3px 0 var(--good); }
.modal-header.bg-primary { box-shadow: inset 0 3px 0 var(--accent); }
.modal-header.bg-danger .modal-title i { color: var(--bad); }
.modal-header.bg-warning .modal-title i { color: var(--warn); }
.modal-header.bg-success .modal-title i { color: var(--good); }

.modal-title {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--ink) !important;
    display: inline-flex; align-items: center; gap: 8px;
}
.modal-title > i { color: var(--accent); font-size: 14px; }
.modal-title.text-dark, .modal-title.text-white { color: var(--ink) !important; }

.modal-header .close {
    color: var(--ink-2) !important;
    text-shadow: none;
    opacity: 1;
    margin: -8px -8px -8px auto;
    padding: 8px 12px;
    border-radius: var(--r-xs);
    font-weight: 300;
    font-size: 26px;
    line-height: 1;
}
.modal-header .close:hover { background: var(--surface-2); color: var(--ink) !important; }

.modal-body { background: transparent !important; color: var(--ink) !important; padding: 20px; font-family: var(--font-body); }
.modal-body h4, .modal-body h5, .modal-body h6 { color: var(--ink); }
.modal-body p { margin-bottom: 8px; }
.modal-body .card { box-shadow: none !important; }

.modal-footer {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--line-2) !important;
    padding: 12px 20px;
    gap: 8px;
}
.modal-footer > * { margin: 0; }

/* loading modal: floating glass pill */
#globalLoadingModal .modal-content { text-align: center; }
#globalLoadingModal .spinner-border { color: var(--accent) !important; border-width: 3px; }
#globalLoadingModal p { color: var(--ink-2); font-family: var(--font-body); }

/* ---------- SweetAlert2 ---------- */
.swal2-container { z-index: 20000 !important; }
.swal2-popup {
    background: var(--surface) !important;
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    box-shadow: var(--shadow) !important;
    color: var(--ink) !important;
    font-family: var(--font-body);
}
.swal2-popup.swal2-toast {
    padding: 12px 16px !important;
    box-shadow: var(--shadow-sm) !important;
}
.swal2-title { color: var(--ink) !important; font-size: 15px !important; font-weight: 500 !important; }
.swal2-toast .swal2-title { font-size: 14px !important; margin: 0 0 0 4px !important; }
.swal2-html-container { color: var(--ink-2) !important; font-size: 14px !important; }
.swal2-timer-progress-bar { background: var(--accent) !important; }
.swal2-icon.swal2-success { border-color: var(--good) !important; color: var(--good) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background: var(--good) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--good) 40%, transparent) !important; }
.swal2-icon.swal2-error { border-color: var(--bad) !important; color: var(--bad) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background: var(--bad) !important; }
.swal2-icon.swal2-warning { border-color: var(--warn) !important; color: var(--warn) !important; }
.swal2-icon.swal2-info { border-color: var(--info) !important; color: var(--info) !important; }
.swal2-icon.swal2-question { border-color: var(--ink-2) !important; color: var(--ink-2) !important; }
.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #3BD3A2, #22A67C) !important;
    color: #04140E !important;
    border-radius: var(--r-xs) !important;
    font-family: var(--font-display);
    font-weight: 500;
    box-shadow: 0 8px 22px var(--accent-glow) !important;
}
.swal2-styled.swal2-cancel {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-xs) !important;
    font-family: var(--font-display);
}
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--accent-soft) !important; }

/* =====================================================================
   21. ปัญหาปุ่ม/ฟอร์มที่พบจากการตรวจทุกหน้า (เพิ่ม 2026-09-24)
   ต้นเหตุที่เจอ
     - Bootstrap 4 ตัด .btn-xs และ .btn-default ออก แต่โค้ดยังใช้อยู่ 7 จุด
       ปุ่มจึงไม่มีสีและไม่มีขนาด
     - Select2 ถูกสั่ง width:100% จาก JS เมื่ออยู่ใน .input-group (flex)
       ปุ่มท้ายกลุ่มจะถูกดันตกบรรทัด
     - .card-tools ไม่มีกฎ ปุ่มหลายตัวในหัวการ์ดจึงล้นออกนอกกรอบบนจอแคบ
   ===================================================================== */

/* --- ขนาดปุ่มที่ BS4 ตัดออก --- */
.btn-xs {
    padding: 3px 9px;
    font-size: 11.5px;
    line-height: 1.5;
    border-radius: 6px;
}

.btn-xs > i { font-size: 10.5px; }

/* --- .btn-default ของ BS3 -> ให้เท่ากับปุ่มกลางๆ ในธีม --- */
.btn-default {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

.btn-default:hover,
.btn-default:focus {
    background: var(--surface-3);
    border-color: var(--line);
    color: var(--ink);
}

/* --- Select2 ใน input-group: ให้ยืดตามพื้นที่ที่เหลือ ไม่ดันปุ่มตกบรรทัด --- */
.input-group > .select2-container {
    position: relative;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    z-index: 3;
}

.input-group > .select2-container:not(:last-child) .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .select2-container:not(:first-child) .select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .select2-container .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
}

/* --- หัวการ์ด: กลุ่มปุ่มขวาต้องไม่ล้น --- */
.card-header {
    flex-wrap: wrap;
}

.card-header > .card-title {
    min-width: 0;
    flex: 1 1 auto;
}

.card-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.card-tools > .btn-group,
.card-tools > .btn { margin: 0; }

/* --- modal-header bg-info ยังไม่ถูก map ในหัวข้อ 20 --- */
.modal-header.bg-info {
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: inset 0 3px 0 var(--info);
}

.modal-header.bg-info .modal-title i { color: var(--info); }

/* --- ปุ่มเฉพาะไอคอนในตาราง: ให้เป็นสี่เหลี่ยมจัตุรัสเสมอ ไม่บี้ --- */
.table .btn-group > .btn,
.table td > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- กลุ่มปุ่มในเซลล์ตารางบนจอแคบ ให้ห่อบรรทัดอย่างเป็นระเบียบ --- */
.table td .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.table td .btn-group > .btn {
    border-radius: var(--r-xs) !important;
}

/* =====================================================================
   22. ชิมความเข้ากันได้ Bootstrap 5 -> Bootstrap 4  (เพิ่ม 2026-09-24)

   หลังบ้านโหลด bootstrap 4.6.2 แต่มาร์กอัปบางหน้าเขียนด้วยคลาสของ
   Bootstrap 5 ซึ่ง BS4 ไม่รู้จัก ทำให้ระยะห่างหาย ป้ายกำกับไม่เป็นสไตล์
   และปุ่มปิดโมดัล (.btn-close) มองไม่เห็นเลย
   จุดที่พบ: gallery.php, articles.php, popups.php, login.php

   แก้ที่ CSS แทนการรื้อมาร์กอัปทุกไฟล์ เพื่อไม่ให้กระทบโครงสร้างเดิม
   และครอบคลุมหน้าที่จะเขียนเพิ่มในอนาคตด้วย
   ===================================================================== */

/* --- ระยะห่างแนวนอน (me = margin-end, ms = margin-start) --- */
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: .25rem !important; }
.pe-2 { padding-right: .5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }

/* --- จัดตำแหน่งข้อความ / ลอย --- */
.text-start { text-align: left !important; }
.text-end   { text-align: right !important; }
.float-start { float: left !important; }
.float-end   { float: right !important; }

/* --- น้ำหนักตัวอักษร --- */
.fw-light    { font-weight: 300 !important; }
.fw-normal   { font-weight: 400 !important; }
.fw-medium   { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }

/* --- ช่องไฟใน flex/grid --- */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.d-grid { display: grid !important; }

/* --- ป้ายกำกับและคำอธิบายใต้ช่องกรอก --- */
.form-label {
    display: inline-block;
    margin-bottom: 5px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
}

.form-text {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--ink-3);
}

/* --- select ของ BS5 ให้หน้าตาเท่ากับ .form-control ในธีม --- */
.form-select {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--input-ink);
    background-color: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238C97A9' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    border: 1px solid var(--input-line);
    border-radius: var(--r-xs);
    appearance: none;
}

.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: 0;
}

/* --- ปุ่มปิดโมดัลแบบ BS5 : BS4 ไม่มีคลาสนี้ ปุ่มจึงมองไม่เห็น --- */
.btn-close {
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    padding: 7px;
    border: 0;
    border-radius: var(--r-xs);
    opacity: 1;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238C97A9' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E") center/14px auto no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .15s ease;
}

.btn-close:hover { background-color: var(--surface-2); }
.btn-close:focus { outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }

/* =====================================================================
   23. Select2 — ส่วนที่หัวข้อ 16 ยังไม่ครอบ  (เพิ่ม 2026-09-24)

   ที่ผ่านมาบางหน้า init ด้วย theme: 'bootstrap4' และบางหน้าไม่ระบุธีมเลย
   ทำให้ได้คลาส container คนละชุดกับที่หัวข้อ 16 เขียนไว้ ช่องเลือกจึงเป็น
   สีขาวสว่างกลางหน้าจอมืด แก้ที่ JS ให้ใช้ bootstrap-5 เหมือนกันหมดแล้ว
   ส่วนที่นี่เผื่อไว้ให้ทุกธีมได้สีตรงกัน และเติมส่วนย่อยที่ยังขาด
   ===================================================================== */

/* ธีม bootstrap4 (เผื่อมีโค้ดเก่าหลงเหลือ) ให้ได้หน้าตาเดียวกับ default */
.select2-container--bootstrap4 .select2-selection {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-line) !important;
    border-radius: var(--r-xs) !important;
    color: var(--input-ink) !important;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.select2-container--bootstrap4 .select2-selection__rendered {
    color: var(--input-ink) !important;
    line-height: calc(1.5em + 0.75rem);
    padding-left: 12px;
}

.select2-container--bootstrap4 .select2-selection__arrow b {
    border-color: var(--ink-3) transparent transparent transparent !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ปุ่มกากบาทล้างค่า (allowClear) — เดิมเป็นกากบาทดำบนพื้นมืด มองแทบไม่เห็น */
.select2-container .select2-selection__clear,
.select2-container--default .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection__clear {
    color: var(--ink-3) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 16px;
    line-height: 1;
    opacity: 1;
    margin-right: 6px;
    cursor: pointer;
}

.select2-container .select2-selection__clear:hover,
.select2-container--default .select2-selection__clear:hover,
.select2-container--bootstrap-5 .select2-selection__clear:hover {
    color: var(--bad) !important;
}

/* ข้อความในรายการ เช่น "ไม่พบผลลัพธ์" หรือ "กำลังค้นหา" */
.select2-results__message,
.select2-container--default .select2-results__message,
.select2-container--bootstrap-5 .select2-results__message {
    color: var(--ink-3) !important;
    background: transparent !important;
    font-size: 13px;
    padding: 10px 12px;
}

/* สถานะปิดใช้งาน */
.select2-container--disabled .select2-selection,
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--ink-3) !important;
    cursor: not-allowed;
}

.select2-container--disabled .select2-selection__rendered {
    color: var(--ink-3) !important;
}

/* กล่องค้นหาในดรอปดาวน์ ให้พื้นเข้ากับ dropdown ไม่ใช่ขาวโพลน */
.select2-search--dropdown {
    background: transparent !important;
    padding: 8px !important;
}

.select2-search--dropdown .select2-search__field {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-line) !important;
    border-radius: var(--r-xs) !important;
    color: var(--input-ink) !important;
    padding: 7px 10px;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--accent) !important;
    outline: 0;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ดรอปดาวน์ต้องลอยเหนือโมดัล ไม่งั้นเลือกไม่ได้ในฟอร์มที่อยู่ในโมดัล */
.select2-container--open .select2-dropdown {
    z-index: 1065;
}

/* ชิปแท็กในโหมดเลือกหลายค่า (หน้าจัดการผลงานใช้) */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
}

/* =====================================================================
   24. Toast / สถานะปุ่มบันทึก / แถบแท็บล่างมือถือ  (เพิ่ม 2026-09-25)

   - ข้อความแจ้งผลเปลี่ยนจากกล่องกลางจอเป็นแถบเล็กที่ไม่ขัดจังหวะ
   - ปุ่มบันทึกบอกสถานะในตัวเอง (setSaving / setSaved ใน main.js)
   - จอเล็กเพิ่มแถบแท็บล่าง เพราะเมนูหลักซ่อนหลังปุ่มขีดสามขีด
     ซึ่งอยู่มุมบนซ้าย เอื้อมนิ้วไม่ถึงเวลาถือมือถือมือเดียว
   ===================================================================== */

/* --- Toast --- */
.swal2-container.swal2-top-end > .swal2-popup,
.swal2-container.swal2-top > .swal2-popup {
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow) !important;
}

.swal2-toast {
    background-color: var(--surface) !important;
    background-image: var(--surface-glass) !important;
    color: var(--ink) !important;
    padding: 12px 14px !important;
}

.swal2-toast .swal2-title {
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.swal2-toast .swal2-close {
    color: var(--ink-3) !important;
    font-size: 20px !important;
}

.swal2-toast .swal2-close:hover {
    color: var(--ink) !important;
}

.swal2-toast .swal2-timer-progress-bar {
    background: var(--accent) !important;
}

.swal2-toast.swal2-icon-error .swal2-timer-progress-bar   { background: var(--bad) !important; }
.swal2-toast.swal2-icon-warning .swal2-timer-progress-bar { background: var(--warn) !important; }
.swal2-toast.swal2-icon-info .swal2-timer-progress-bar    { background: var(--info) !important; }

.swal2-toast .swal2-icon {
    margin: 0 10px 0 0 !important;
}

/* --- สถานะปุ่มบันทึก --- */
.btn.is-saved {
    background: color-mix(in srgb, var(--good) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--good) 40%, transparent) !important;
    color: var(--good) !important;
}

.btn.is-failed {
    background: color-mix(in srgb, var(--bad) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--bad) 40%, transparent) !important;
    color: var(--bad) !important;
}

.save-status {
    margin-left: 10px;
    font-size: 12px;
    color: var(--ink-3);
    vertical-align: middle;
}

/* --- แถบแท็บล่าง (มือถือ) --- */
.admin-tabbar {
    display: none;
}

@media (max-width: 767.98px) {
    .admin-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--bar);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .28);
    }

    .admin-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 7px 2px;
        border-radius: var(--r-xs);
        color: var(--ink-3);
        text-decoration: none;
        font-family: var(--font-body);
        font-size: 10.5px;
        line-height: 1.3;
        transition: color .15s ease, background .15s ease;
    }

    .admin-tab i {
        font-size: 17px;
    }

    .admin-tab:hover,
    .admin-tab:focus {
        color: var(--ink-2);
        text-decoration: none;
    }

    .admin-tab.is-active {
        color: var(--accent);
        background: var(--accent-soft);
    }

    /* ปุ่มขายหน้าร้าน เด่นกว่าตัวอื่นเพราะใช้บ่อยที่สุด */
    .admin-tab-main {
        position: relative;
        color: var(--accent-ink);
    }

    .admin-tab-main i {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        margin-top: -22px;
        border-radius: 50%;
        font-size: 18px;
        color: var(--accent-ink);
        background: linear-gradient(135deg, #3BD3A2, #22A67C);
        box-shadow: 0 8px 20px var(--accent-glow);
    }

    .admin-tab-main,
    .admin-tab-main.is-active {
        background: transparent;
        color: var(--accent);
    }

    /* เว้นที่ให้แถบ ไม่ให้ทับเนื้อหาหรือปุ่มลอยของหน้า POS */
    .content-wrapper {
        padding-bottom: 72px;
    }

    .main-footer {
        margin-bottom: 64px;
    }

    .pos-bottombar {
        bottom: 70px;
    }

    .set-savebar {
        bottom: 70px;
    }
}