/* =====================================================================
   XPRINT DESIGN SYSTEM
   Framer-inspired dark canvas, adapted for a data-dense reporting app.
   Source spec: DESIGN.md. Display sizes scaled down from the 110px poster
   tier to functional sizes; everything else follows the spec.
   ===================================================================== */

/* ---------- Inter (self-hosted, variable 100..900) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/lib/fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/lib/fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/lib/fonts/Inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---------- Design tokens ---------- */
:root {
  /* Surface (canvas → surface-1 → surface-2; depth = lift, not opacity) */
  --x-canvas:        #0b0b0c;   /* near-black, faint warmth */
  --x-surface-1:     #161617;   /* cards, secondary buttons, tiles */
  --x-surface-2:     #202022;   /* featured card, selected state */
  --x-surface-3:     #2a2a2c;   /* hover lift on surface elements */
  --x-hairline:      rgba(255, 255, 255, 0.10);
  --x-hairline-soft: rgba(255, 255, 255, 0.06);
  --x-inverse:       #ffffff;

  /* Text — hierarchy is binary: ink or ink-muted */
  --x-ink:        #ffffff;
  --x-ink-muted:  #999999;
  --x-on-primary: #0b0b0c;      /* text on white pill */

  /* Single chromatic accent (links / focus / selection only) */
  --x-accent:      #0099ff;
  --x-accent-ring: rgba(0, 153, 255, 0.15);

  /* Semantic */
  --x-success: #2bbf6a;
  --x-danger:  #ff5c5c;
  --x-warning: #f5a623;

  /* Gradient spotlight cards (base anchors — see DESIGN.md known gaps) */
  --x-grad-violet:  linear-gradient(150deg, #5b2be0 0%, #8b5cf6 48%, #c026d3 100%);
  --x-grad-magenta: linear-gradient(150deg, #d6249f 0%, #ee2a7b 52%, #fb5e6b 100%);
  --x-grad-orange:  linear-gradient(150deg, #ff8a00 0%, #ff5e3a 58%, #ff2d55 100%);
  --x-grad-coral:   linear-gradient(150deg, #ff7a7a 0%, #ff9a72 100%);

  /* Spacing (5px base: 4/8/12/15/20/30/40/64/96) */
  --x-sp-hair: 1px;
  --x-sp-xxs: 4px;
  --x-sp-xs:  8px;
  --x-sp-sm:  12px;
  --x-sp-md:  15px;
  --x-sp-lg:  20px;
  --x-sp-xl:  30px;
  --x-sp-xxl: 40px;
  --x-sp-section: 64px;

  /* Radius */
  --x-r-xs:   4px;
  --x-r-sm:   6px;
  --x-r-md:   10px;
  --x-r-lg:   15px;
  --x-r-xl:   20px;
  --x-r-xxl:  30px;
  --x-r-pill: 100px;
  --x-r-full: 9999px;

  /* Typography family + brand OpenType voice */
  --x-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --x-font-features: 'cv01' 1, 'cv05' 1, 'cv09' 1, 'cv11' 1, 'ss03' 1, 'ss07' 1, 'dlig' 1;

  /* Elevation */
  --x-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --x-shadow-2: inset 0 0.5px 0 rgba(255,255,255,0.10), 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ---------- Light theme (opt-in via data-theme="light") ---------- */
html[data-theme="light"] {
  --x-canvas:        #f4f5f7;   /* light page ground */
  --x-surface-1:     #ffffff;   /* cards, sidebar */
  --x-surface-2:     #f0f1f4;   /* active item, featured */
  --x-surface-3:     #e6e8ec;   /* hover lift */
  --x-hairline:      rgba(0, 0, 0, 0.10);
  --x-hairline-soft: rgba(0, 0, 0, 0.06);
  --x-inverse:       #111317;   /* primary pill = dark on light */

  --x-ink:        #111317;
  --x-ink-muted:  #6b7280;
  --x-on-primary: #ffffff;      /* text on dark pill */

  --x-accent:      #2f6bff;
  --x-accent-ring: rgba(47, 107, 255, 0.18);

  --x-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --x-shadow-2: 0 12px 32px rgba(16, 24, 40, 0.12);
}

/* ---------- Base ---------- */
body.dx-viewport,
body {
  font-family: var(--x-font);
  font-feature-settings: var(--x-font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--x-ink);
  background-color: var(--x-canvas);
}

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

a,
.x-link {
  color: var(--x-accent);
  text-decoration: none;
}
a:hover,
.x-link:hover { text-decoration: underline; }

/* ---------- Typography scale (display tier scaled for app use) ---------- */
.x-display-xl { font-size: 56px; font-weight: 600; line-height: 1.0;  letter-spacing: -2.5px; }
.x-display-lg { font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -1.6px; }
.x-display-md { font-size: 28px; font-weight: 600; line-height: 1.12; letter-spacing: -1.0px; }
.x-headline   { font-size: 20px; font-weight: 700; line-height: 1.20; letter-spacing: -0.6px; }
.x-subhead    { font-size: 18px; font-weight: 400; line-height: 1.30; letter-spacing: -0.18px; }
.x-body-lg    { font-size: 16px; font-weight: 400; line-height: 1.40; letter-spacing: -0.16px; }
.x-body       { font-size: 15px; font-weight: 400; line-height: 1.40; letter-spacing: -0.15px; }
.x-body-sm    { font-size: 14px; font-weight: 500; line-height: 1.45; letter-spacing: -0.14px; }
.x-caption    { font-size: 13px; font-weight: 500; line-height: 1.30; letter-spacing: -0.13px; }
.x-micro      { font-size: 12px; font-weight: 400; line-height: 1.30; letter-spacing: -0.12px; }

.x-eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--x-ink-muted);
}
.x-muted { color: var(--x-ink-muted); }

/* ---------- Buttons (pill is the brand CTA shape) ---------- */
.x-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--x-sp-xs);
  font-family: var(--x-font);
  font-size: 14px; font-weight: 500; letter-spacing: -0.14px; line-height: 1;
  padding: 11px 18px; min-height: 40px;
  border-radius: var(--x-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, opacity .15s ease;
  text-decoration: none; white-space: nowrap;
}
.x-btn:active { transform: scale(0.97); }
.x-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--x-accent-ring); }

.x-btn-primary {            /* white pill — the one primary CTA */
  background: var(--x-inverse); color: var(--x-on-primary);
}
.x-btn-primary:hover { background: #ececec; color: var(--x-on-primary); }

.x-btn-secondary {          /* charcoal pill */
  background: var(--x-surface-1); color: var(--x-ink);
  border-color: var(--x-hairline);
}
.x-btn-secondary:hover { background: var(--x-surface-2); color: var(--x-ink); }

.x-btn-translucent {        /* lifted, for busy / gradient grounds */
  background: var(--x-surface-2); color: var(--x-ink);
  border-radius: var(--x-r-xxl); padding: 9px 16px;
}
.x-btn-danger {
  background: transparent; color: var(--x-danger);
  border-color: rgba(255, 92, 92, 0.35);
}
.x-btn-danger:hover { background: rgba(255, 92, 92, 0.12); color: var(--x-danger); }

.x-btn-icon {               /* circular icon action */
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-radius: var(--x-r-full);
  background: var(--x-surface-1); color: var(--x-ink);
  border-color: var(--x-hairline);
}
.x-btn-sm { min-height: 32px; padding: 7px 14px; font-size: 13px; }

/* ---------- Cards & surfaces ---------- */
.x-card {
  background: var(--x-surface-1); color: var(--x-ink);
  border: 1px solid var(--x-hairline);
  border-radius: var(--x-r-xl);
  padding: var(--x-sp-lg);
}
.x-card-featured { background: var(--x-surface-2); }

/* Gradient spotlight cards — scarce by design (1–2 per page) */
.x-spotlight {
  background: var(--x-grad-violet); color: var(--x-ink);
  border-radius: var(--x-r-xxl);
  padding: var(--x-sp-xl);
  border: none;
  position: relative; overflow: hidden;
}
.x-spotlight--magenta { background: var(--x-grad-magenta); }
.x-spotlight--orange  { background: var(--x-grad-orange); }
.x-spotlight--coral   { background: var(--x-grad-coral); }

/* ---------- Inputs ---------- */
.x-input,
input.x-input,
textarea.x-input {
  width: 100%;
  background: var(--x-surface-1); color: var(--x-ink);
  border: 1px solid var(--x-hairline);
  border-radius: var(--x-r-md);
  padding: 11px 14px;
  font-family: var(--x-font); font-size: 15px; letter-spacing: -0.15px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.x-input::placeholder { color: var(--x-ink-muted); }
.x-input:focus {
  outline: none;
  border-color: var(--x-accent);
  box-shadow: 0 0 0 1px var(--x-accent-ring);
}

.x-field { margin-bottom: var(--x-sp-md); }
.x-field-label {
  display: block; margin-bottom: var(--x-sp-xs);
  font-size: 13px; font-weight: 500; letter-spacing: -0.13px;
  color: var(--x-ink-muted);
}

/* ---------- Pill toggle (selected = surface lift) ---------- */
.x-tab {
  background: transparent; color: var(--x-ink-muted);
  border: none; border-radius: var(--x-r-pill);
  padding: 8px 16px; min-height: 40px; cursor: pointer;
  font-size: 14px; font-weight: 500;
}
.x-tab.is-selected { background: var(--x-surface-2); color: var(--x-ink); }

/* ---------- Divider ---------- */
.x-divider { border: none; border-top: 1px solid var(--x-hairline-soft); margin: var(--x-sp-lg) 0; }

/* ---------- Status badge (thống nhất toàn hệ thống) ---------- */
.x-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--x-r-pill);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.12px; white-space: nowrap;
}
.x-badge--ok     { background: rgba(43, 191, 106, 0.15); color: var(--x-success); }
.x-badge--warn   { background: rgba(245, 166, 35, 0.15); color: var(--x-warning); }
.x-badge--danger { background: rgba(255, 92, 92, 0.14);  color: var(--x-danger); }
.x-badge--info   { background: rgba(0, 153, 255, 0.14);  color: var(--x-accent); }
.x-badge--muted  { background: var(--x-surface-2);       color: var(--x-ink-muted); }

/* =====================================================================
   DevExtreme overrides — align the dark theme to the Xprint canvas
   ===================================================================== */

/* Toolbar / header chrome */
.dx-toolbar { background-color: transparent; }
.dx-toolbar .dx-button-mode-text .dx-icon { color: var(--x-ink); }

/* Buttons inside DevExtreme widgets → pill vocabulary */
.dx-button {
  border-radius: var(--x-r-pill);
  font-family: var(--x-font);
}
.dx-button.dx-button-default {
  background-color: var(--x-inverse);
  border-color: var(--x-inverse);
}
.dx-button.dx-button-default .dx-button-text,
.dx-button.dx-button-default .dx-icon { color: var(--x-on-primary); }
.dx-button.dx-button-normal {
  background-color: var(--x-surface-1);
  border-color: var(--x-hairline);
  color: var(--x-ink);
}

/* TreeView (sidebar menu) */
.dx-treeview .dx-treeview-item { border-radius: var(--x-r-md); color: var(--x-ink); }
.dx-treeview .dx-treeview-item .dx-icon { color: var(--x-ink-muted); }
.dx-treeview .dx-treeview-item.dx-state-hover { background-color: var(--x-surface-2); }
.dx-treeview .dx-treeview-item.dx-state-selected,
.dx-treeview .dx-treeview-node.dx-state-selected > .dx-treeview-item {
  background-color: var(--x-surface-2);
  color: var(--x-ink);
}
.dx-treeview .dx-treeview-item.dx-state-selected .dx-icon { color: var(--x-accent); }

/* DataGrid */
.dx-datagrid {
  background-color: transparent;
  color: var(--x-ink);
}
.dx-datagrid .dx-row > td {
  border-color: var(--x-hairline-soft);
  padding: 13px 16px;
  vertical-align: middle;
  font-size: 14px; letter-spacing: -0.14px;
}
.dx-datagrid-headers {
  background-color: transparent;
  color: var(--x-ink-muted);
  border-bottom: 1px solid var(--x-hairline);
}
.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
  padding: 12px 16px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.13px;
  text-transform: none;
}
/* Alternation + hover: theme-neutral tints so both light/dark show them.
   Hover uses surface-2 so it stays distinct from the surface-1 card behind. */
.dx-datagrid-rowsview .dx-data-row.dx-row-alt > td { background-color: rgba(128, 128, 128, 0.05); }
.dx-datagrid-rowsview .dx-data-row.dx-state-hover > td { background-color: var(--x-surface-2) !important; }
.dx-datagrid-rowsview .dx-row > td { transition: background-color .12s ease; }
.dx-datagrid .dx-link {
  color: var(--x-accent);
  border-radius: var(--x-r-sm);
  padding: 4px; margin: 0 1px;
}
.dx-datagrid .dx-link:hover { background-color: var(--x-accent-ring); }
.dx-datagrid .dx-link.text-danger { color: var(--x-danger) !important; }
.dx-datagrid .dx-link.text-danger:hover { background-color: rgba(255, 92, 92, 0.14); }
.dx-datagrid .dx-command-edit { white-space: nowrap; }
/* Header panel (title + toolbar buttons) flush with the card */
.dx-datagrid-header-panel { border-bottom: none; padding-bottom: var(--x-sp-md); }

/* Search panel / editors */
.dx-texteditor.dx-editor-outlined {
  background-color: var(--x-surface-1);
  border-color: var(--x-hairline);
  border-radius: var(--x-r-md);
}
.dx-texteditor.dx-state-focused.dx-editor-outlined {
  border-color: var(--x-accent);
  box-shadow: 0 0 0 1px var(--x-accent-ring);
}
.dx-texteditor-input { color: var(--x-ink); }

/* Pager */
.dx-datagrid-pager { border-top: 1px solid var(--x-hairline-soft); }
.dx-pager .dx-page.dx-selection,
.dx-pager .dx-page-size.dx-selection {
  background-color: var(--x-accent);
  color: var(--x-ink);
}

/* Popups */
.dx-popup-content { background-color: var(--x-surface-1); color: var(--x-ink); }
.dx-popup-title.dx-toolbar { background-color: var(--x-surface-1); border-bottom: 1px solid var(--x-hairline); }
.dx-overlay-wrapper .dx-popup-normal { border-radius: var(--x-r-xl); border: 1px solid var(--x-hairline); }

/* =====================================================================
   Bootstrap 4.6 on dark — the admin pages (Settings, User, Reports
   popups) lean on Bootstrap. Map its surfaces onto the Xprint canvas
   so they stay consistent without rewriting each view.
   ===================================================================== */

/* Cards */
.card {
  background-color: var(--x-surface-1);
  color: var(--x-ink);
  border: 1px solid var(--x-hairline);
  border-radius: var(--x-r-xl);
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--x-hairline);
  color: var(--x-ink);
  font-weight: 600; letter-spacing: -0.2px;
  padding: var(--x-sp-md) var(--x-sp-lg);
}
.card-header.bg-primary { background-color: transparent !important; color: var(--x-ink) !important; }

/* Tables */
.table {
  color: var(--x-ink);
  border-color: var(--x-hairline-soft);
}
.table th, .table td { border-color: var(--x-hairline-soft); }
.table thead th {
  color: var(--x-ink-muted);
  font-size: 13px; font-weight: 600; letter-spacing: -0.13px;
  text-transform: none;
  border-bottom: 1px solid var(--x-hairline);
}
.table.table-bordered, .table.table-bordered th, .table.table-bordered td { border-color: var(--x-hairline-soft); }
.table thead.table-dark th, .table thead.thead-dark th {
  background-color: var(--x-surface-2);
  color: var(--x-ink-muted);
  border-color: var(--x-hairline);
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); }
.table-hover tbody tr:hover { background-color: var(--x-surface-1); color: var(--x-ink); }

/* Badges */
.badge { font-weight: 600; letter-spacing: -0.1px; border-radius: var(--x-r-sm); padding: 0.35em 0.6em; }
.badge.bg-info, .badge.badge-info { background-color: rgba(0, 153, 255, 0.16) !important; color: #7cc6ff !important; }
.badge.bg-success, .badge.badge-success { background-color: rgba(43, 191, 106, 0.16) !important; color: #59d98e !important; }
.badge.bg-danger, .badge.badge-danger { background-color: rgba(255, 92, 92, 0.16) !important; color: #ff8a8a !important; }
.badge.bg-secondary, .badge.badge-secondary { background-color: var(--x-surface-3) !important; color: var(--x-ink-muted) !important; }
.badge.text-dark { color: #7cc6ff !important; }

/* Forms */
.form-control, .form-select, .custom-select, select.form-control {
  background-color: var(--x-surface-1);
  color: var(--x-ink);
  border: 1px solid var(--x-hairline);
  border-radius: var(--x-r-md);
  padding: 10px 14px;
}
.form-control::placeholder { color: var(--x-ink-muted); }
.form-control:focus, .form-select:focus, .custom-select:focus, select.form-control:focus {
  background-color: var(--x-surface-1);
  color: var(--x-ink);
  border-color: var(--x-accent);
  box-shadow: 0 0 0 1px var(--x-accent-ring);
  outline: none;
}
.form-control:disabled, .form-control[readonly] { background-color: var(--x-surface-2); color: var(--x-ink-muted); }
.form-label, .form-group label, label.form-label { color: var(--x-ink-muted); font-weight: 500; letter-spacing: -0.13px; }
.form-control[type="file"] { padding: 9px 12px; }

/* Alerts */
.alert { border-radius: var(--x-r-md); border-width: 1px; }
.alert-success { background-color: rgba(43, 191, 106, 0.12); border-color: rgba(43, 191, 106, 0.35); color: #8ee3b3; }
.alert-danger  { background-color: rgba(255, 92, 92, 0.12);  border-color: rgba(255, 92, 92, 0.35);  color: #ffb4b4; }
.alert-info    { background-color: rgba(0, 153, 255, 0.12);  border-color: rgba(0, 153, 255, 0.35);  color: #9fd4ff; }

/* Code / monospace chips */
code, pre, .font-monospace {
  color: var(--x-accent);
}
code { background-color: var(--x-surface-2); padding: 2px 6px; border-radius: var(--x-r-xs); }
pre { background-color: var(--x-surface-2); border: 1px solid var(--x-hairline); border-radius: var(--x-r-md); padding: var(--x-sp-sm); }

/* Bootstrap buttons → pill vocabulary */
.btn {
  border-radius: var(--x-r-pill);
  font-weight: 500; letter-spacing: -0.14px;
}
.btn-primary, .btn-success {
  background-color: var(--x-inverse); border-color: var(--x-inverse); color: var(--x-on-primary);
}
.btn-primary:hover, .btn-success:hover {
  background-color: #ececec; border-color: #ececec; color: var(--x-on-primary);
}
.btn-light, .btn-outline-secondary {
  background-color: var(--x-surface-1); border-color: var(--x-hairline); color: var(--x-ink);
}
.btn-light:hover, .btn-outline-secondary:hover {
  background-color: var(--x-surface-2); border-color: var(--x-hairline); color: var(--x-ink);
}
.btn-outline-danger {
  background-color: transparent; border-color: rgba(255, 92, 92, 0.4); color: #ff8a8a;
}
.btn-outline-danger:hover { background-color: rgba(255, 92, 92, 0.14); border-color: rgba(255, 92, 92, 0.6); color: #ffb4b4; }

/* Bootstrap bg/text utilities that clash on dark */
.bg-light { background-color: var(--x-surface-2) !important; color: var(--x-ink) !important; }
.text-muted { color: var(--x-ink-muted) !important; }

/* Shared admin-page frame */
.admin-page {
  max-width: 1199px;
  margin: 0 auto;
  padding-bottom: var(--x-sp-xxl);
}
.admin-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--x-sp-lg);
  margin-bottom: var(--x-sp-xl);
}