/* Hallmark · genre: modern-minimal · macrostructure: Workbench (app shell) · theme: custom "Tide"
 * vibe: calm ops console — deep-sea ink sidebar, teal signal, cool paper
 * paper oklch(97.3% 0.006 220) · accent oklch(53% 0.10 190) teal · Be Vietnam Pro + JetBrains Mono
 * Loaded after adminlte.min.css + custom.css. Every colour below references a token;
 * to re-colour the panel, edit the :root block only.
 */

:root {
    /* Surfaces */
    --color-paper: oklch(97.3% 0.006 220);
    --color-surface: oklch(99.6% 0.002 220);
    --color-surface-2: oklch(96.4% 0.008 220);
    --color-row-hover: oklch(97.4% 0.014 190);
    --color-rule: oklch(91.5% 0.010 225);
    --color-rule-strong: oklch(76% 0.014 235);

    /* Text */
    --color-ink: oklch(25% 0.022 245);
    --color-ink-2: oklch(42% 0.020 245);
    --color-muted: oklch(53% 0.018 245);

    /* Accent — teal */
    --color-accent: oklch(53% 0.100 190);
    --color-accent-hover: oklch(46% 0.090 190);
    --color-accent-soft: oklch(95.5% 0.028 190);
    --color-accent-ink: oklch(38% 0.075 195);
    --color-on-accent: oklch(99.4% 0.004 190);
    --color-focus: oklch(53% 0.100 190 / 0.28);

    /* Sidebar */
    --color-sidebar: oklch(22% 0.028 235);
    --color-sidebar-2: oklch(28% 0.030 235);
    --color-sidebar-rule: oklch(30% 0.028 235);
    --color-sidebar-ink: oklch(82% 0.018 230);
    --color-sidebar-muted: oklch(63% 0.022 230);
    --color-sidebar-strong: oklch(97% 0.006 220);
    --color-sidebar-active-bg: oklch(34% 0.055 195);
    --color-sidebar-active: oklch(86% 0.090 185);

    /* Status */
    --color-success: oklch(55% 0.130 150);
    --color-success-hover: oklch(49% 0.120 150);
    --color-success-soft: oklch(95.5% 0.040 150);
    --color-success-ink: oklch(40% 0.090 150);
    --color-danger: oklch(55% 0.190 25);
    --color-danger-hover: oklch(49% 0.180 25);
    --color-danger-soft: oklch(95.5% 0.025 25);
    --color-danger-ink: oklch(44% 0.150 25);
    --color-warning: oklch(80% 0.150 80);
    --color-warning-hover: oklch(75% 0.150 75);
    --color-warning-soft: oklch(96.5% 0.050 90);
    --color-warning-ink: oklch(42% 0.090 65);
    --color-info: oklch(54% 0.120 245);
    --color-info-hover: oklch(48% 0.110 245);
    --color-info-soft: oklch(95.5% 0.025 245);
    --color-info-ink: oklch(42% 0.110 250);
    --color-neutral: oklch(60% 0.014 240);
    --color-neutral-soft: oklch(94.5% 0.006 240);

    /* Shadows & overlays (alpha as modifier only) */
    --color-shadow: oklch(25% 0.03 245 / 0.07);
    --color-shadow-strong: oklch(25% 0.03 245 / 0.16);
    --color-overlay: oklch(22% 0.028 235 / 0.48);

    /* Type */
    --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-body: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.75rem;

    /* Space — 4pt scale */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Shape & motion */
    --radius-sm: 6px;
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-pill: 999px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-short: 150ms;
    --dur-med: 220ms;
    --header-h: 60px;

    accent-color: var(--color-accent);
}

/* ───────────────────────── Base ───────────────────────── */

html,
body {
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-ink);
    background-color: var(--color-paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-body);
    font-weight: 600;
    font-style: normal;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}

a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-hover);
}

code,
kbd,
pre,
.font-mono {
    font-family: var(--font-mono);
}

code {
    color: var(--color-accent-ink);
    background: var(--color-accent-soft);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
}

::selection {
    background: var(--color-accent-soft);
    color: var(--color-ink);
}

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

.text-primary { color: var(--color-accent) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning-ink) !important; }
.text-info { color: var(--color-info) !important; }
.text-muted { color: var(--color-muted) !important; }
.xanh { color: var(--color-info); }
.do { color: var(--color-danger); }

/* ───────────────────────── Shell: top bar ───────────────────────── */

.main-header.navbar {
    min-height: var(--header-h);
    padding: 0 var(--space-sm);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-rule);
}

.main-header .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 var(--space-xs);
    color: var(--color-ink-2);
    border-radius: var(--radius-control);
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link:focus-visible {
    color: var(--color-ink);
    background-color: var(--color-surface-2);
}

.topbar-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin-left: var(--space-2xs);
}

.topbar-crumb {
    font-size: var(--text-xs);
    line-height: 1.3;
    color: var(--color-muted);
    white-space: nowrap;
}

.topbar-heading {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0 var(--space-xs);
    margin: 0 var(--space-2xs);
    border-left: 1px solid var(--color-rule);
    border-right: 1px solid var(--color-rule);
}

.avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-ink);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.topbar-user__name {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-ink);
}

.topbar-user__role {
    font-size: var(--text-xs);
    line-height: 1.25;
    color: var(--color-muted);
}

.main-header .navbar-nav .nav-link.topbar-logout:hover {
    color: var(--color-danger-ink);
    background-color: var(--color-danger-soft);
}

/* ───────────────────────── Shell: sidebar ───────────────────────── */

.main-sidebar,
.main-sidebar::before,
[class*=sidebar-dark-] {
    background-color: var(--color-sidebar);
}

.main-sidebar {
    box-shadow: none !important;
    border-right: 1px solid var(--color-sidebar-rule);
}

.main-sidebar .brand-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    height: var(--header-h);
    padding: 0 0 0 20px;
    border-bottom: 1px solid var(--color-sidebar-rule) !important;
    color: var(--color-sidebar-strong);
}

.main-sidebar .brand-link:hover {
    color: var(--color-sidebar-strong);
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.main-sidebar .brand-text {
    font-size: var(--text-lg);
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--color-sidebar-strong);
}

.brand-text small {
    margin-left: 0.2em;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-sidebar-muted);
}

.main-sidebar .sidebar {
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-md);
}

.main-sidebar .nav-sidebar .nav-header {
    padding: var(--space-sm) 1rem var(--space-3xs);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-sidebar-muted);
    background: transparent;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
    margin-bottom: 2px;
    border-radius: var(--radius-control);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-sidebar-ink);
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link > .nav-icon {
    font-size: 1rem;
    color: var(--color-sidebar-muted);
    transition: color var(--dur-short) var(--ease-out);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: var(--color-sidebar-2);
    color: var(--color-sidebar-strong);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover > .nav-icon {
    color: var(--color-sidebar-ink);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--color-sidebar-active-bg);
    color: var(--color-sidebar-active);
    box-shadow: none;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active > .nav-icon {
    color: var(--color-sidebar-active);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:focus-visible {
    outline: 2px solid var(--color-sidebar-active);
    outline-offset: -2px;
}

/* ───────────────────────── Shell: content & footer ───────────────────────── */

.content-wrapper {
    background-color: var(--color-paper);
}

.content-header {
    padding: var(--space-md) 0.5rem 0;
}

.content {
    padding-bottom: var(--space-md);
}

.main-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-muted);
    background-color: var(--color-paper);
    border-top: 1px solid var(--color-rule);
}

.main-footer a {
    color: var(--color-ink-2);
    font-weight: 600;
}

/* ───────────────────────── Cards ───────────────────────── */

.card {
    margin-bottom: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px var(--color-shadow);
}

.card > .card-header,
.card-primary:not(.card-outline) > .card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    min-height: 54px;
    padding: var(--space-xs) var(--space-md);
    color: var(--color-ink);
    background-color: transparent;
    border-bottom: 1px solid var(--color-rule);
    border-top-left-radius: calc(var(--radius-card) - 1px);
    border-top-right-radius: calc(var(--radius-card) - 1px);
}

.card > .card-header::after {
    display: none;
}

.card-primary:not(.card-outline) > .card-header a {
    color: inherit;
}

.card-title {
    float: none;
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-ink);
}

.card > .card-header > .card-tools {
    float: none;
    margin: 0 0 0 auto;
}

.card-body {
    padding: var(--space-md);
}

.card-footer {
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-surface-2);
    border-top: 1px solid var(--color-rule);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);
}

/* Empty footers (no child elements) are noise — hide them. */
.card-footer:not(:has(*)) {
    display: none;
}

/* ───────────────────────── Buttons ───────────────────────── */

.btn {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-control);
    transition: background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        box-shadow var(--dur-short) var(--ease-out);
}

.btn-sm {
    padding: 0.3125rem 0.625rem;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}

.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus {
    box-shadow: 0 0 0 3px var(--color-focus);
}

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

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: var(--color-on-accent);
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn-success,
.btn-success:disabled,
.btn-success.disabled {
    color: var(--color-on-accent);
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    color: var(--color-on-accent);
    background-color: var(--color-success-hover);
    border-color: var(--color-success-hover);
}

.btn-danger,
.btn-danger:disabled,
.btn-danger.disabled {
    color: var(--color-on-accent);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
    color: var(--color-on-accent);
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

.btn-warning,
.btn-warning:disabled,
.btn-warning.disabled {
    color: var(--color-warning-ink);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
    color: var(--color-warning-ink);
    background-color: var(--color-warning-hover);
    border-color: var(--color-warning-hover);
}

.btn-info,
.btn-info:disabled,
.btn-info.disabled {
    color: var(--color-on-accent);
    background-color: var(--color-info);
    border-color: var(--color-info);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
    color: var(--color-on-accent);
    background-color: var(--color-info-hover);
    border-color: var(--color-info-hover);
}

.btn-secondary,
.btn-default,
.btn-light,
.btn-secondary:disabled,
.btn-secondary.disabled {
    color: var(--color-ink);
    background-color: var(--color-surface);
    border-color: var(--color-rule-strong);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-default:hover,
.btn-light:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--color-ink);
    background-color: var(--color-surface-2);
    border-color: var(--color-rule-strong);
}

.btn-outline-danger {
    color: var(--color-danger-ink);
    background-color: var(--color-surface);
    border-color: var(--color-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    color: var(--color-danger-ink);
    background-color: var(--color-danger-soft);
    border-color: var(--color-danger);
}

.btn-outline-primary {
    color: var(--color-accent-ink);
    background-color: var(--color-surface);
    border-color: var(--color-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: var(--color-accent-ink);
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent);
}

/* Row actions inside tables and item lists: soft buttons, solid on hover.
   Keeps dense tables calm while the action stays one click away. */
.table .btn-primary,
.item-goods .btn-primary {
    color: var(--color-accent-ink);
    background-color: var(--color-accent-soft);
    border-color: transparent;
}

.table .btn-danger,
.item-goods .btn-danger {
    color: var(--color-danger-ink);
    background-color: var(--color-danger-soft);
    border-color: transparent;
}

.table .btn-warning,
.item-goods .btn-warning {
    color: var(--color-warning-ink);
    background-color: var(--color-warning-soft);
    border-color: transparent;
}

.table .btn-success {
    color: var(--color-success-ink);
    background-color: var(--color-success-soft);
    border-color: transparent;
}

.table .btn-info {
    color: var(--color-info-ink);
    background-color: var(--color-info-soft);
    border-color: transparent;
}

.table .btn-primary:hover,
.item-goods .btn-primary:hover {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
}

.table .btn-danger:hover,
.item-goods .btn-danger:hover {
    color: var(--color-on-accent);
    background-color: var(--color-danger);
}

.table .btn-warning:hover,
.item-goods .btn-warning:hover {
    color: var(--color-warning-ink);
    background-color: var(--color-warning);
}

.table .btn-success:hover {
    color: var(--color-on-accent);
    background-color: var(--color-success);
}

.table .btn-info:hover {
    color: var(--color-on-accent);
    background-color: var(--color-info);
}

/* Item chips rendered by the server (Gift Code list, mail). */
.table .btn.border-secondary {
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-ink);
    background-color: var(--color-surface-2);
    border-color: var(--color-rule) !important;
}

.table td > .form-group:last-child,
.table td > p:last-child {
    margin-bottom: 0;
}

.table .btn:not(.btn-sm) {
    padding: 0.375rem 0.75rem;
    font-size: var(--text-xs);
}

/* Gift Code list is wider than the screen: keep the action column pinned
   to the right edge so SỬA / XÓA stay visible while scrolling. */
#giftcode-table tr .btnaction {
    min-width: 220px !important;
}

#giftcode-table td:nth-child(5) {
    white-space: nowrap;
}

#giftcode-table th:last-child,
#giftcode-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: var(--color-surface);
    box-shadow: inset 1px 0 0 var(--color-rule), -8px 0 12px -10px var(--color-shadow-strong);
}

#giftcode-table thead th:last-child {
    background-color: var(--color-surface-2);
}

#giftcode-table tbody tr:hover td:last-child {
    background-color: var(--color-row-hover);
}

/* Toolbar row above tables (e.g. Gift Code actions). */
.row.flex-left:has(> .btn) {
    margin-bottom: var(--space-sm);
}

.user-btn {
    margin-right: var(--space-2xs);
}

/* ───────────────────────── Forms ───────────────────────── */

label:not(.form-check-label):not(.custom-file-label) {
    margin-bottom: 0.375rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-2);
}

.form-control {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-ink);
    background-color: var(--color-surface);
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-control);
    box-shadow: none;
    transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.form-control::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.form-control:focus {
    color: var(--color-ink);
    background-color: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.form-control:disabled,
.form-control[readonly] {
    color: var(--color-ink-2);
    background-color: var(--color-surface-2);
}

.form-control-sm {
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--color-danger);
}

.invalid-feedback {
    color: var(--color-danger-ink);
}

.input-group-text {
    color: var(--color-muted);
    background-color: var(--color-surface-2);
    border-color: var(--color-rule-strong);
    border-radius: var(--radius-control);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.form-check-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--color-focus);
}

.item-goods input {
    border-radius: var(--radius-sm) !important;
}

/* iOS zooms into inputs under 16px — keep them at 16px on phones. */
@media (max-width: 575.98px) {
    .form-control,
    .form-control-sm {
        font-size: 16px;
    }
}

/* ───────────────────────── Tables & DataTables ───────────────────────── */

.table {
    margin-bottom: 0;
    font-size: var(--text-base);
    color: var(--color-ink);
}

.table td,
.table th {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    border-top-color: var(--color-rule);
}

.table td {
    font-variant-numeric: tabular-nums;
}

.table thead th {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-ink-2);
    background-color: var(--color-surface-2);
    border-bottom: 1px solid var(--color-rule);
    white-space: nowrap;
    vertical-align: middle;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--color-rule);
}

.table-hover tbody tr:hover {
    color: var(--color-ink);
    background-color: var(--color-row-hover);
}

table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 1;
    color: var(--color-accent);
}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-muted);
}

div.dataTables_wrapper div.dataTables_filter input {
    min-width: 200px;
    margin-left: var(--space-2xs);
}

div.dataTables_wrapper div.dataTables_info {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

div.dataTables_wrapper div.dataTables_processing {
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 24px var(--color-shadow-strong);
}

.pagination {
    gap: 4px;
}

.page-link {
    min-width: 34px;
    padding: 0.375rem 0.625rem;
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: center;
    color: var(--color-ink-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control) !important;
    margin-left: 0 !important;
}

.page-link:hover {
    color: var(--color-ink);
    background-color: var(--color-surface-2);
    border-color: var(--color-rule-strong);
}

.page-link:focus {
    box-shadow: 0 0 0 3px var(--color-focus);
}

.page-item.active .page-link {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.page-item.disabled .page-link {
    color: var(--color-muted);
    background-color: var(--color-surface);
    border-color: var(--color-rule);
    opacity: 0.6;
}

/* ───────────────────────── Nav pills & tabs ───────────────────────── */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
}

.nav-pills .nav-link:not(.active):hover {
    color: var(--color-accent);
}

/* Pills in a card header become a segmented control. */
.card-tools .nav-pills {
    gap: 2px;
    padding: 3px;
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
}

.card-tools .nav-pills .nav-link {
    padding: 0.3rem 0.85rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-2);
    border-radius: var(--radius-sm);
}

.card-tools .nav-pills .nav-link:not(.active):hover {
    color: var(--color-ink);
}

.card-tools .nav-pills .nav-link.active {
    color: var(--color-ink);
    background-color: var(--color-surface);
    box-shadow: 0 1px 2px var(--color-shadow-strong);
}

/* ───────────────────────── Badges ───────────────────────── */

.badge {
    padding: 0.3em 0.6em;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
}

.badge-primary { color: var(--color-accent-ink); background-color: var(--color-accent-soft); }
.badge-success { color: var(--color-success-ink); background-color: var(--color-success-soft); }
.badge-danger { color: var(--color-danger-ink); background-color: var(--color-danger-soft); }
.badge-warning { color: var(--color-warning-ink); background-color: var(--color-warning-soft); }
.badge-info { color: var(--color-info-ink); background-color: var(--color-info-soft); }
.badge-secondary,
.badge-light { color: var(--color-ink-2); background-color: var(--color-neutral-soft); }
.badge-dark { color: var(--color-surface); background-color: var(--color-ink); }

/* ───────────────────────── Stat tiles (.small-box) ─────────────────────────
   AdminLTE's full-colour blocks become white tiles; the old bg-* class now
   only sets a tone for the icon chip and the left edge. */

.small-box {
    --tone: var(--color-accent);
    --tone-soft: var(--color-accent-soft);
    position: relative;
    overflow: hidden;
    text-align: left;
    color: var(--color-ink) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: inset 3px 0 0 var(--tone), 0 1px 2px var(--color-shadow);
}

.small-box.bg-warning,
.small-box.bg-gradient-warning { --tone: var(--color-warning-hover); --tone-soft: var(--color-warning-soft); }
.small-box.bg-gradient-lightblue,
.small-box.bg-info { --tone: var(--color-info); --tone-soft: var(--color-info-soft); }
.small-box.bg-gradient-dark { --tone: var(--color-neutral); --tone-soft: var(--color-neutral-soft); }
.small-box.bg-success { --tone: var(--color-success); --tone-soft: var(--color-success-soft); }
.small-box.bg-danger { --tone: var(--color-danger); --tone-soft: var(--color-danger-soft); }

.row > [class*="col-"] > .small-box {
    height: calc(100% - var(--space-sm));
    margin-bottom: var(--space-sm);
}

/* Label on top (beside the icon chip), number below with the full tile width. */
.small-box > .inner {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) calc(var(--space-sm) + 3px);
}

.small-box h3 {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.small-box p {
    min-height: 38px;
    margin: 0;
    padding-right: 46px;
    font-size: var(--text-sm);
    line-height: 1.35;
    color: var(--color-muted);
}

.small-box .icon {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tone-soft);
    color: var(--tone);
}

.small-box .icon > i,
.small-box:hover .icon > i,
.small-box .icon > i.fa,
.small-box .icon > i.fas,
.small-box .icon > i.fa-solid,
.small-box .icon > i.fa-brands {
    position: static;
    top: auto;
    right: auto;
    font-size: 17px !important;
    color: inherit;
    transform: none;
    transition: none;
}

/* ───────────────────────── Dashboard helpers ───────────────────────── */

.page-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

.page-toolbar label {
    margin: 0 !important;
    white-space: nowrap;
}

.page-toolbar .form-control {
    width: auto;
    min-width: 200px;
}

.is-weekend {
    padding: 1px 6px;
    color: var(--color-accent-ink);
    background: var(--color-accent-soft);
    border-radius: var(--radius-sm);
}

.stat-bar {
    height: 4px;
    margin-top: 4px;
    float: right;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

/* ───────────────────────── Server state tiles ───────────────────────── */

.server-group + .server-group {
    margin-top: var(--space-md);
}

.server-group__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-2);
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: var(--space-sm);
}

.server-tile {
    --tone: var(--color-accent);
    --tone-soft: var(--color-accent-soft);
    min-width: 0;
    padding: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: inset 3px 0 0 var(--tone);
}

.tone-info { --tone: var(--color-info); --tone-soft: var(--color-info-soft); }
.tone-accent { --tone: var(--color-accent); --tone-soft: var(--color-accent-soft); }
.tone-warning { --tone: var(--color-warning-hover); --tone-soft: var(--color-warning-soft); }
.tone-neutral { --tone: var(--color-neutral); --tone-soft: var(--color-neutral-soft); }

.server-tile.tone-neutral {
    background: var(--color-surface-2);
}

.server-tile__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.server-tile__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--tone-soft);
    color: var(--tone);
}

.server-tile__name {
    min-width: 0;
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.server-tile__meta {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-rule);
}

.server-tile__meta > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
}

.server-tile__meta dt {
    font-weight: 400;
    color: var(--color-muted);
}

.server-tile__meta dd {
    margin: 0;
    font-weight: 500;
    color: var(--color-ink);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--tone);
}

/* ───────────────────────── SweetAlert2 ───────────────────────── */

.swal2-container.swal2-backdrop-show {
    background: var(--color-overlay);
}

.swal2-popup {
    padding: var(--space-md);
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 24px 48px var(--color-shadow-strong);
}

.swal2-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
}

.swal2-html-container {
    font-size: var(--text-body);
    color: var(--color-ink-2);
}

.swal2-actions {
    gap: var(--space-2xs);
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    padding: 0.55rem 1.15rem;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-control);
}

.swal2-styled.swal2-confirm {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
}

.swal2-styled.swal2-confirm:hover {
    background-color: var(--color-accent-hover);
    background-image: none;
}

.swal2-styled.swal2-confirm.swal2-confirm-danger {
    background-color: var(--color-danger);
}

.swal2-styled.swal2-confirm.swal2-confirm-danger:hover {
    background-color: var(--color-danger-hover);
}

.swal2-styled.swal2-cancel {
    color: var(--color-ink);
    background-color: var(--color-surface);
    border: 1px solid var(--color-rule-strong);
}

.swal2-styled.swal2-cancel:hover {
    background-color: var(--color-surface-2);
    background-image: none;
}

.swal2-styled:focus,
.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 3px var(--color-focus);
}

.swal2-input,
.swal2-select,
.swal2-textarea {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-ink);
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-control);
    box-shadow: none;
}

.swal2-input:focus,
.swal2-select:focus,
.swal2-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.swal2-icon.swal2-warning { color: var(--color-warning-hover); border-color: var(--color-warning); }
.swal2-icon.swal2-info { color: var(--color-info); border-color: var(--color-info); }
.swal2-icon.swal2-question { color: var(--color-accent); border-color: var(--color-accent); }
.swal2-icon.swal2-error { color: var(--color-danger); border-color: var(--color-danger); }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--color-danger); }
.swal2-icon.swal2-success { color: var(--color-success); border-color: var(--color-success); }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--color-success); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--color-success-soft); }

.swal2-timer-progress-bar {
    background: var(--color-accent);
}

/* ───────────────────────── Login ───────────────────────── */

.auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-paper);
}

.auth-aside {
    display: none;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-sm);
}

.auth-card {
    width: 100%;
    max-width: 380px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    color: var(--color-ink);
}

.auth-brand .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.auth-brand__name {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.auth-brand__sub {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.auth-title {
    margin: 0 0 var(--space-3xs);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.auth-lede {
    margin: 0 0 var(--space-md);
    font-size: var(--text-body);
    color: var(--color-muted);
}

.auth-field {
    margin-bottom: var(--space-sm);
}

.auth-input {
    position: relative;
}

.auth-input > .fa-solid {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: var(--text-base);
    color: var(--color-muted);
    pointer-events: none;
}

.auth-input .form-control {
    height: 46px;
    padding-left: 40px;
}

.auth-input .form-control.has-toggle {
    padding-right: 46px;
}

.auth-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--color-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    transform: translateY(-50%);
    cursor: pointer;
}

.auth-toggle:hover {
    color: var(--color-ink);
    background: var(--color-surface-2);
}

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    width: 100%;
    height: 46px;
    margin-top: var(--space-xs);
    font-size: var(--text-body);
}

.auth-foot {
    margin-top: var(--space-lg);
    font-size: var(--text-xs);
    color: var(--color-muted);
}

@media (min-width: 992px) {
    .auth {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }

    .auth-aside {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--space-xl);
        overflow: hidden;
        color: var(--color-sidebar-ink);
        background-color: var(--color-sidebar);
        background-image:
            linear-gradient(var(--color-sidebar-rule) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-sidebar-rule) 1px, transparent 1px);
        background-size: 48px 48px;
        background-position: -1px -1px;
    }

    .auth-aside .auth-brand {
        margin: 0;
        color: var(--color-sidebar-strong);
    }

    .auth-aside .auth-brand__sub {
        color: var(--color-sidebar-muted);
    }

    .auth-aside__copy {
        max-width: 420px;
    }

    .auth-aside__title {
        margin: 0 0 var(--space-xs);
        font-size: 2.25rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.025em;
        color: var(--color-sidebar-strong);
        overflow-wrap: anywhere;
    }

    .auth-aside__title span {
        color: var(--color-sidebar-active);
    }

    .auth-aside__text {
        margin: 0;
        font-size: var(--text-body);
        line-height: 1.6;
        color: var(--color-sidebar-ink);
    }

    .auth-aside__foot {
        font-size: var(--text-xs);
        color: var(--color-sidebar-muted);
    }

    .auth-main .auth-brand {
        display: none;
    }
}

/* ───────────────────────── Motion preferences ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}