/* ============================================================
   NamLong.Web — light dashboard theme (phong cách Flat Able)
   Palette: nền xám sáng + card trắng + sidebar navy #2c3e50 +
   accent teal #1abc9c (Flat UI) — Bootstrap 5.3 light mode base
   Token layer đồng bộ với design system nam-long-design
   ============================================================ */

:root {
  /* ── Base surfaces ──────────────────────────────────────── */
  --nl-bg:           #f4f7fa;   /* page background — trắng xanh nhẹ, sáng hơn xám Flat Able */
  --nl-surface:      #ffffff;   /* cards, tables */
  --nl-surface-2:    #eef4f8;   /* card headers, inputs, hover layers */
  --nl-sidebar-bg:   #34495e;   /* sidebar navy — nâng tông so với #2c3e50 */
  --nl-border:       #e3eaef;   /* all borders */
  --nl-input-border: #cfdae2;   /* viền input — đậm hơn border bảng một nấc */

  /* ── Text ───────────────────────────────────────────────── */
  --nl-text:         #3e4b5b;   /* body text — xanh đá, bớt xám đục */
  --nl-text-muted:   #8094a6;   /* secondary/hint text — nhẹ, thoáng */
  --nl-text-heading: #2c3e50;   /* headings — navy đậm, tương phản rõ */

  /* ── Sidebar text (nền navy — không dùng token text chung) ── */
  --nl-sidebar-text:   #dfe8ee;
  --nl-sidebar-muted:  #9ab0c3;
  --nl-sidebar-hover:  rgba(255, 255, 255, .08);
  --nl-sidebar-border: rgba(255, 255, 255, .10);

  /* ── Accent (teal — Flat UI turquoise) ──────────────────── */
  --nl-accent:        #1abc9c;
  --nl-accent-hover:  #159a80;
  --nl-accent-active: #11816b;  /* pressed */
  --nl-accent-text:   #11816b;  /* teal đậm — đọc được trên nền trắng */
  --nl-link-hover:    #159a80;
  --nl-accent-rgb:    26, 188, 156;

  /* ── Accent tints (translucent layers) ──────────────────── */
  --nl-accent-tint-08: rgba(26, 188, 156, .08);  /* table row hover */
  --nl-accent-tint-15: rgba(26, 188, 156, .15);  /* stat-card icon tile */
  --nl-accent-tint-18: rgba(26, 188, 156, .18);  /* active sidebar link */
  --nl-accent-tint-20: rgba(26, 188, 156, .20);  /* shortcut-card icon hover */
  --nl-accent-tint-30: rgba(26, 188, 156, .30);  /* focus ring */

  /* ── Semantic: danger (Flat UI alizarin) ────────────────── */
  --nl-danger:        #e74c3c;
  --nl-danger-text:   #b03a2e;
  --nl-danger-bg:     rgba(231, 76, 60, .08);
  --nl-danger-border: rgba(231, 76, 60, .30);

  /* ── Semantic: warning (Flat UI orange) ─────────────────── */
  --nl-warning:        #f39c12;
  --nl-warning-text:   #9a6508;
  --nl-warning-bg:     rgba(243, 156, 18, .10);
  --nl-warning-border: rgba(243, 156, 18, .35);

  /* ── Semantic: success (Flat UI emerald) ────────────────── */
  --nl-success:        #2ecc71;
  --nl-success-text:   #1e8449;
  --nl-success-bg:     rgba(46, 204, 113, .12);
  --nl-success-border: rgba(46, 204, 113, .40);

  /* ── Semantic: info (Flat UI peter river) ───────────────── */
  --nl-info-text:   #21709e;
  --nl-info-bg:     rgba(52, 152, 219, .10);
  --nl-info-border: rgba(52, 152, 219, .30);

  /* ── Interaction layers ─────────────────────────────────── */
  --nl-hover-layer:    rgba(44, 62, 80, .05);   /* hover trên nền sáng */
  --nl-stripe-layer:   rgba(44, 62, 80, .03);   /* table stripes */
  --nl-backdrop:       rgba(44, 62, 80, .50);   /* mobile sidebar scrim */
  --nl-topbar-bg:      #ffffff;                 /* topbar trắng Flat Able */

  /* ── Brand gradient (logo mark ONLY — never large areas) ── */
  --nl-brand-gradient: linear-gradient(135deg, var(--nl-accent), var(--nl-accent-active));

  /* ── Corner radii — flat hơn theo phong cách Flat Able ──── */
  --nl-radius:        .5rem;   /* cards, tables, alerts — signature */
  --nl-radius-tile:   .5rem;   /* icon tiles, brand mark */
  --nl-radius-btn:    .35rem;  /* buttons, sidebar links */
  --nl-radius-page:   .3rem;   /* pagination links, burger */
  --nl-radius-code:   .25rem;  /* inline code chips */
  --nl-radius-pill:   999px;   /* scrollbar thumbs */

  /* ── Shadows — card trắng nổi trên nền xám (Flat Able) ──── */
  --nl-shadow-card:     0 1px 20px 0 rgba(69, 90, 100, .08);
  --nl-shadow-topbar:   0 1px 8px 0 rgba(69, 90, 100, .18);
  --nl-shadow-sidebar:  2px 0 10px -1px rgba(69, 90, 100, .30);
  --nl-focus-ring:      0 0 0 .2rem var(--nl-accent-tint-30);
  --nl-shadow-dropdown: 0 .5rem 1rem rgba(69, 90, 100, .20);

  /* ── Layout ─────────────────────────────────────────────── */
  --nl-topbar-h: 56px;

  /* ── Motion — nhanh, lặng; không bounce ─────────────────── */
  --nl-ease-fast:  .13s ease;
  --nl-ease-lift:  .15s ease;
  --nl-ease-slide: .25s ease;
  --nl-lift:       translateY(-2px);

  /* ── Letter-spacing cho micro-label uppercase ───────────── */
  --nl-ls-overline: .09em;  /* sidebar sections */
  --nl-ls-caption:  .04em;  /* table headers */
  --nl-ls-stat:     .05em;  /* stat labels, section headings */
}

[data-bs-theme="light"] {
  --bs-body-bg:         var(--nl-bg);
  --bs-body-color:      var(--nl-text);
  --bs-emphasis-color:  var(--nl-text-heading);
  --bs-secondary-color: var(--nl-text-muted);
  --bs-border-color:    var(--nl-border);
  --bs-tertiary-bg:     var(--nl-surface-2);
  --bs-secondary-bg:    var(--nl-surface-2);
  --bs-primary:         var(--nl-accent);
  --bs-primary-rgb:     var(--nl-accent-rgb);
  --bs-link-color:      var(--nl-accent-text);
  --bs-link-color-rgb:  17, 129, 107;
  --bs-link-hover-color: var(--nl-link-hover);
  --bs-link-hover-color-rgb: 21, 154, 128;
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }
html, body { height: 100%; }
body { margin: 0; background: var(--nl-bg); color: var(--nl-text); }

/* ── Scrollbar ─────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #c8d4dd transparent; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c8d4dd; border-radius: var(--nl-radius-pill); }
*::-webkit-scrollbar-thumb:hover { background: #b2c2cd; }

/* ── Focus rings ───────────────────────────────────────────── */
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus,
.form-select:focus {
  box-shadow: var(--nl-focus-ring);
}

/* ── Floating label placeholders ──────────────────────────── */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* ============================================================
   App shell — topbar full-width phía trên + sidebar + main
   (bố cục Flat Able: header trắng 56px, sidebar bắt đầu dưới header)
   ============================================================ */

.app-shell { min-height: 100vh; }

.sidebar-toggle-checkbox { display: none; }

/* Topbar — fixed, trắng, chạy hết chiều ngang */
.app-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nl-topbar-h);
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 0 1.5rem 0 0;
  background: var(--nl-topbar-bg);
  box-shadow: var(--nl-shadow-topbar);
  z-index: 1050;
}

/* Brand — nằm trong topbar, thẳng cột với sidebar */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.125rem;
  min-width: 256px;
  height: 100%;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--nl-radius-tile);
  background: var(--nl-brand-gradient);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  color: var(--nl-text-heading);
  font-weight: 600;
  font-size: .925rem;
  white-space: nowrap;
}
.brand-text small {
  color: var(--nl-text-muted);
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: var(--nl-ls-caption);
}

.app-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--nl-text-heading);
}
.topbar-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}
.topbar-username {
  font-weight: 600;
  color: var(--nl-text-heading);
}
.topbar-user a {
  color: var(--nl-text-muted);
  text-decoration: none;
  font-size: .875rem;
}
.topbar-user a:hover { color: var(--nl-accent); }
.sidebar-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--nl-radius-page);
  border: 1px solid var(--nl-border);
  color: var(--nl-text);
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar-burger:hover { background: var(--nl-surface-2); }

/* Sidebar — navy, bắt đầu dưới topbar */
.app-sidebar {
  width: 256px;
  background: var(--nl-sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: var(--nl-topbar-h) auto 0 0;
  z-index: 1045;
  box-shadow: var(--nl-shadow-sidebar);
  transition: transform var(--nl-ease-slide);
}

/* Nav */
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .875rem .625rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
.sidebar-section {
  margin: .875rem .375rem .2rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: var(--nl-ls-overline);
  text-transform: uppercase;
  color: var(--nl-sidebar-muted);
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .625rem;
  border-radius: var(--nl-radius-btn);
  color: var(--nl-sidebar-text);
  text-decoration: none;
  font-size: .875rem;
  transition: background-color var(--nl-ease-fast), color var(--nl-ease-fast);
}
.sidebar-link svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  opacity: .8;
}
.sidebar-link:hover {
  background: var(--nl-sidebar-hover);
  color: #fff;
}
.sidebar-link.active {
  background: var(--nl-accent);
  color: #fff;
  font-weight: 500;
}
.sidebar-link.active svg {
  opacity: 1;
  color: #fff;
}
.sidebar-footer {
  padding: .875rem 1.125rem;
  border-top: 1px solid var(--nl-sidebar-border);
  font-size: .75rem;
  color: var(--nl-sidebar-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-footer a { color: var(--nl-sidebar-muted); }
.sidebar-footer a:hover { color: var(--nl-accent); }

.sidebar-backdrop { display: none; }

/* Main area */
.app-main {
  margin: var(--nl-topbar-h) 0 0 256px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nl-topbar-h));
  min-width: 0;
}

/* Content — no max-width: tables use full available space */
.app-content {
  flex: 1 1 auto;
  padding: 1.5rem 1.75rem;
  min-width: 0;
}
.app-footer {
  padding: .875rem 1.75rem 1.25rem;
  font-size: .8rem;
  color: var(--nl-text-muted);
}
.app-footer a { color: var(--nl-text-muted); text-decoration: underline; }

/* Mobile */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-main { margin-left: 0; }
  .topbar-brand { min-width: 0; }
  .sidebar-burger { display: inline-flex; }
  .sidebar-toggle-checkbox:checked ~ .app-sidebar { transform: translateX(0); }
  .sidebar-toggle-checkbox:checked ~ .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: var(--nl-topbar-h) 0 0 0;
    background: var(--nl-backdrop);
    z-index: 1040;
  }
}

/* ============================================================
   Components — card, table, button, form
   ============================================================ */

.card {
  background: var(--nl-surface);
  border: 0;
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow-card);
}
.card-header {
  border-bottom: 1px solid var(--nl-border);
  background: var(--nl-surface);
}

/* ── Section heading — micro-label uppercase trên các khối nội dung ── */
.section-heading {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nl-ls-stat);
  color: var(--nl-text-muted);
}

/* ── Tables — bảng nằm trong "card" trắng đổ bóng (Flat Able) ── */

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--nl-stripe-layer);
  --bs-table-hover-bg: var(--nl-accent-tint-08);
  font-size: .875rem;
}
/* Headers never wrap — column width = header text width */
.table th {
  white-space: nowrap;
  vertical-align: middle;
}
.table td {
  vertical-align: middle;
}
.table-responsive {
  border-radius: var(--nl-radius);
  background: var(--nl-surface);
  box-shadow: var(--nl-shadow-card);
}
.table-responsive > .table { margin-bottom: 0; }
.table-bordered { border-color: var(--nl-border); }
.table-bordered > :not(caption) > * { border-color: var(--nl-border); }
.table-bordered > :not(caption) > * > * { border-color: var(--nl-border); }

.table-header-row,
.table-header-row > * {
  background: #ecf7f4 !important;   /* phớt xanh ngọc — tươi hơn xám */
  color: #5b7282;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--nl-ls-caption);
  text-transform: uppercase;
  border-bottom: 1px solid var(--nl-border);
}

/* Ô bị cắt chữ với dấu ba chấm (ghi chú dài trong bảng danh mục) */
.td-truncate {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contextual row — tint nhạt theo token, không dùng màu Bootstrap mặc định */
.table-danger,
.table-danger > * {
  --bs-table-bg: var(--nl-danger-bg) !important;
  --bs-table-color: var(--nl-danger-text) !important;
  --bs-table-border-color: var(--nl-danger-border) !important;
  --bs-table-striped-bg: rgba(231, 76, 60, .12) !important;
  --bs-table-striped-color: var(--nl-danger-text) !important;
  --bs-table-hover-bg: rgba(231, 76, 60, .14) !important;
  --bs-table-hover-color: var(--nl-danger-text) !important;
}
.table-warning,
.table-warning > * {
  --bs-table-bg: var(--nl-warning-bg) !important;
  --bs-table-color: var(--nl-warning-text) !important;
  --bs-table-border-color: var(--nl-warning-border) !important;
  --bs-table-hover-bg: rgba(243, 156, 18, .15) !important;
  --bs-table-hover-color: var(--nl-warning-text) !important;
}

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

.btn { border-radius: var(--nl-radius-btn); font-weight: 500; }
.btn-sm { font-size: .8rem; }
.btn-primary {
  --bs-btn-bg: var(--nl-accent);
  --bs-btn-border-color: var(--nl-accent);
  --bs-btn-hover-bg: var(--nl-accent-hover);
  --bs-btn-hover-border-color: var(--nl-accent-hover);
  --bs-btn-active-bg: var(--nl-accent-active);
  --bs-btn-active-border-color: var(--nl-accent-active);
  color: #fff;
}

/* ── Form controls ───────────────────────────────────────────── */

.form-control,
.form-select {
  background-color: var(--nl-surface);
  border-color: var(--nl-input-border);
  color: var(--nl-text);
  font-size: .875rem;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--nl-surface);
  color: var(--nl-text);
  border-color: var(--nl-accent);
}
.form-control::placeholder { color: var(--nl-text-muted); opacity: .9; }
.form-label { font-size: .8rem; color: var(--nl-text-muted); margin-bottom: .3rem; }

/* Khung hiển thị read-only trông như form-control (vd. Tuyến tự điền) */
.field-display { min-height: 2.3rem; }

/* Ô nhập biển số trong lưới sửa nhanh (Trucks) */
.input-plate { min-width: 8rem; max-width: 12rem; width: auto; }

/* Giới hạn bề rộng form nhập liệu (trang Thêm/Sửa) */
.form-narrow { max-width: 32rem; }
.form-medium { max-width: 40rem; }

/* ── Filter bar — stretches filter inputs to fill available width ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-end;
}
.filter-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 9rem;
}
.filter-field-fixed {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 7rem;
}
/* Size modifiers — thay cho min/max-width inline trên từng trang */
.filter-field-wide { min-width: 14rem; }                  /* ô tìm kiếm rộng (dùng với .filter-field) */
.filter-field-xs { min-width: 5rem;  max-width: 7rem; }   /* Lô # */
.filter-field-sm { min-width: 7rem;  max-width: 11rem; }  /* mã đ/vị giao hàng */
.filter-field-md { min-width: 8rem;  max-width: 12rem; }  /* tháng, số xe */
.filter-field-lg { min-width: 9rem;  max-width: 14rem; }  /* select tháng */
.filter-field-xl { min-width: 9rem;  max-width: 16rem; }  /* select đ/vị giao hàng */
.filter-field .form-control,
.filter-field .form-select,
.filter-field-fixed .form-control,
.filter-field-fixed .form-select {
  width: 100%;
}
.filter-actions {
  display: flex;
  gap: .375rem;
  align-items: flex-end;
  flex-shrink: 0;
}

/* ── Autocomplete dropdowns (gợi ý sản phẩm / bộ lọc) ───────── */
.js-suggest-dropdown,
.js-product-dropdown {
  display: none;
  position: absolute;
  z-index: 1050;
  max-height: 220px;
  overflow-y: auto;
  top: 100%;
  left: 0;
}
.js-suggest-dropdown { min-width: 100%; }
.js-product-dropdown { min-width: 280px; }

/* ── Alert ───────────────────────────────────────────────────── */

.alert { border-radius: var(--nl-radius); border: 1px solid transparent; font-size: .875rem; }

/* ── Badge tints — semantic = nền tint trong suốt, không fill đặc ── */
.badge-soft-secondary {
  background: var(--nl-hover-layer);
  color: var(--nl-text);
  border: 1px solid var(--nl-border);
}
.badge-soft-success {
  background: var(--nl-success-bg);
  color: var(--nl-success-text);
  border: 1px solid var(--nl-success-border);
}
.badge-soft-warning {
  background: var(--nl-warning-bg);
  color: var(--nl-warning-text);
  border: 1px solid var(--nl-warning-border);
}
.badge-soft-info {
  background: var(--nl-info-bg);
  color: var(--nl-info-text);
  border: 1px solid var(--nl-info-border);
}

/* ── Code ────────────────────────────────────────────────────── */

code {
  background: var(--nl-surface-2);
  padding: .1rem .35rem;
  border-radius: var(--nl-radius-code);
  color: var(--nl-accent-text);
  font-size: .85em;
}

/* ── Pagination ──────────────────────────────────────────────── */

.pagination { gap: .2rem; }
.page-link {
  background: var(--nl-surface);
  border-color: var(--nl-border);
  color: var(--nl-text-muted);
  border-radius: var(--nl-radius-page) !important;
  font-size: .825rem;
  padding: .3rem .65rem;
}
.page-link:hover { background: var(--nl-surface-2); color: var(--nl-text-heading); }
.page-item.active .page-link { background: var(--nl-accent); border-color: var(--nl-accent); color: #fff; }

/* ============================================================
   Dashboard — stat cards + shortcut cards
   ============================================================ */

.stat-card,
.shortcut-card {
  background: var(--nl-surface);
  border: 1px solid transparent;
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow-card);
  padding: 1.125rem;
  height: 100%;
}
.stat-card .stat-label {
  font-size: .75rem;
  color: var(--nl-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--nl-ls-stat);
}
.stat-card .stat-value {
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--nl-text-heading);
  margin-top: .2rem;
  line-height: 1.2;
}
.stat-card .stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--nl-radius-tile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nl-accent-tint-15);
  color: var(--nl-accent-text);
}
.stat-card .stat-icon svg { width: 1.25rem; height: 1.25rem; }

/* Biến thể màu cho icon stat — Dashboard mỗi ô một màu (Flat Able) */
.stat-icon--teal   { background: rgba(26, 188, 156, .15) !important; color: #11816b !important; }
.stat-icon--blue   { background: rgba(52, 152, 219, .14) !important; color: #21709e !important; }
.stat-icon--orange { background: rgba(243, 156, 18, .16) !important; color: #b97708 !important; }
.stat-icon--green  { background: rgba(46, 204, 113, .16) !important; color: #1e8449 !important; }
.stat-icon--red    { background: var(--nl-danger-bg) !important; color: var(--nl-danger-text) !important; }

.shortcut-card {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--nl-ease-fast), transform var(--nl-ease-lift);
}
.shortcut-card:hover {
  border-color: var(--nl-accent);
  transform: var(--nl-lift);
  color: inherit;
}
.shortcut-card .stat-icon { background: var(--nl-surface-2); color: var(--nl-text-muted); }
.shortcut-card:hover .stat-icon { background: var(--nl-accent-tint-20); color: var(--nl-accent-text); }
.shortcut-card h2 {
  font-size: .925rem;
  font-weight: 600;
  margin-bottom: .2rem;
  color: var(--nl-text-heading);
}
.shortcut-card p { font-size: .825rem; color: var(--nl-text-muted); margin-bottom: 0; }

/* ── Sortable column headers ─────────────────────────────────── */

.js-col-sortable { cursor: pointer; user-select: none; }
.js-col-sortable:hover { color: var(--nl-text-heading) !important; background: var(--nl-border) !important; }
.js-col-sortable a { color: inherit; text-decoration: none; }
.sort-icon { margin-left: .3em; opacity: .3; vertical-align: -.1em; display: inline-block; line-height: 0; }
.sort-icon svg { width: .85em; height: .85em; }
.js-col-sortable.sort-active .sort-icon { opacity: 1; color: var(--nl-accent-text); }

/* ── Form UX — input number căn phải ─────────────────────────── */
input[type="number"] { text-align: right; }

/* ── Dashboard: bảng doanh thu theo đ/vị giao hàng ────────────── */
.th-bar { width: 30%; }
.progress-xs  { height: 7px; }
.progress-xxs { height: 5px; }

/* ── Dashboard: card hiệu suất xe ──────────────────────────────── */
.dash-xe-body   { padding: .75rem 1rem; }
.dash-xe-header { font-size: .75rem; color: var(--nl-text-muted); font-weight: 600; }
.dash-xe-row    { border-top: 1px solid var(--nl-border); }
.dash-xe-trips  { font-size: .8rem; font-weight: 600; }
.dash-xe-value  { font-size: .72rem; white-space: nowrap; min-width: 90px; text-align: right; }
.badge-plate    { background: var(--nl-accent); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.progress-bar-accent { background: var(--nl-accent); }