/* ============================================================
   MATERIAL DESIGN 3 — SHOP BOT ADMIN PANEL
   Seed color: #6750A4 (M3 baseline purple)
   ============================================================ */

/* ===== 1. M3 COLOR TOKENS ===== */
:root {
  /* --- Primary --- */
  --md-primary: #6750a4;
  --md-on-primary: #ffffff;
  --md-primary-container: #eaddff;
  --md-on-primary-container: #21005d;
  --md-primary-fixed: #eaddff;
  --md-primary-fixed-dim: #d0bcff;
  --md-on-primary-fixed: #21005d;
  --md-on-primary-fixed-variant: #4f378b;

  /* --- Secondary --- */
  --md-secondary: #625b71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e8def8;
  --md-on-secondary-container: #1d192b;

  /* --- Tertiary --- */
  --md-tertiary: #7d5260;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffd8e4;
  --md-on-tertiary-container: #31111d;

  /* --- Error --- */
  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;

  /* --- Surface & Background --- */
  --md-background: #ffffff;
  --md-on-background: #1c1b1f;
  --md-surface: #ffffff;
  --md-on-surface: #1c1b1f;
  --md-surface-variant: #eeeeee;
  --md-on-surface-variant: #49454f;

  /* --- Outline --- */
  --md-outline: #9e9e9e;
  --md-outline-variant: #e0e0e0;

  /* --- Surface containers (white → xám nhạt dần) --- */
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f8f8f8;
  --md-surface-container: #f3f3f3;
  --md-surface-container-high: #eeeeee;
  --md-surface-container-highest: #e8e8e8;

  /* --- Inverse --- */
  --md-inverse-surface: #313033;
  --md-inverse-on-surface: #f4eff4;
  --md-inverse-primary: #d0bcff;
  --md-surface-tint: #6750a4;

  /* --- Shadow & Scrim --- */
  --md-shadow: #000000;
  --md-scrim: #000000;

  /* --- Custom status (admin-specific) --- */
  --md-success: #1b6b3a;
  --md-on-success: #ffffff;
  --md-success-container: #a9f4be;
  --md-on-success-container: #00210d;

  --md-warning: #7d5700;
  --md-on-warning: #ffffff;
  --md-warning-container: #ffdda7;
  --md-on-warning-container: #271900;

  --md-info: #0061a4;
  --md-on-info: #ffffff;
  --md-info-container: #d1e4ff;
  --md-on-info-container: #001d36;

  /* ===== 2. M3 SHAPE TOKENS ===== */
  --md-shape-none: 0px;
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 9999px;

  /* ===== 3. M3 ELEVATION SHADOWS ===== */
  --md-elevation-1:
    0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-elevation-2:
    0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-elevation-3:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
  --md-elevation-4:
    0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
  --md-elevation-5:
    0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);

  /* ===== LAYOUT ===== */
  --sidebar-width: 260px;
  --navbar-height: 64px;

  /* ===== BACKWARD-COMPATIBLE AMBER ALIASES (templates still use var(--amber-*)) ===== */
  --amber-50: var(--md-surface-container-low);
  --amber-100: var(--md-primary-container);
  --amber-200: var(--md-outline-variant);
  --amber-300: var(--md-primary-fixed-dim);
  --amber-400: var(--md-primary-fixed-dim);
  --amber-500: var(--md-primary);
  --amber-600: var(--md-primary);
  --amber-700: var(--md-on-primary-fixed-variant);
  --amber-800: var(--md-on-surface);
  --amber-900: var(--md-on-background);
}

/* ===== 4. BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--md-background);
  font-family:
    "Montserrat",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--md-on-background);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 5. SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border-radius: var(--md-shape-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-outline);
}

/* ===== 6. LAYOUT WRAPPER ===== */
.wrapper {
  display: flex;
  min-height: 100vh;
}

/* ===== 7. NAVIGATION DRAWER (SIDEBAR) ===== */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--md-surface-container-low);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--md-outline-variant);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brand / Header */
.sidebar-brand {
  padding: 1.5rem 1.25rem 1.125rem;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid var(--md-outline-variant);
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

.sidebar-brand .brand-title {
  color: var(--md-on-surface);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-brand .brand-sub {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 400;
  margin-top: 0.25rem;
  letter-spacing: 0.025em;
}

/* Nav */
.sidebar-nav {
  padding: 0.25rem 0.75rem 1rem;
  flex: 1;
  overflow-y: auto;
}

.sidebar-section-title {
  color: var(--md-on-surface-variant);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1rem 0.75rem 0.375rem;
  user-select: none;
}

/* Navigation Drawer Item — M3 spec */
.sidebar .nav-link {
  color: var(--md-on-surface-variant);
  padding: 0 1rem;
  height: 3.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  border-radius: var(--md-shape-full);
  margin: 0.0625rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
}

/* State layer */
.sidebar .nav-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
  pointer-events: none;
}

.sidebar .nav-link:hover::after {
  opacity: 0.08;
}
.sidebar .nav-link:active::after {
  opacity: 0.12;
}

.sidebar .nav-link:hover {
  color: var(--md-on-surface);
}

/* Active state — indicator pill */
.sidebar .nav-link.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 600;
}
.sidebar .nav-link.active::after {
  display: none;
}

.sidebar .nav-link .nav-icon {
  width: 1.5rem;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===== 8. MAIN CONTENT ===== */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;        /* flex child phải shrink được, không kéo dãn body */
  overflow-x: hidden;  /* chặn scroll ngang ở cấp trang */
  background: var(--md-surface);
}

/* ===== 9. TOP APP BAR ===== */
.top-navbar {
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 0.75rem;
}

.top-navbar .page-title {
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--md-on-surface);
  letter-spacing: -0.01em;
  margin: 0;
}

/* API status chip */
.top-navbar .badge.bg-warning {
  background: var(--md-success-container) !important;
  color: var(--md-on-success-container) !important;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--md-shape-full);
  letter-spacing: 0.025em;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

/* ===== 10. PAGE CONTENT ===== */
.page-content {
  padding: 1.5rem;
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* ===== 11. CARDS ===== */
.card {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  box-shadow: none;
  overflow: hidden;
}

.card-header {
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  border-radius: 0 !important;
  padding: 0.875rem 1.25rem;
  letter-spacing: 0.006em;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background: var(--md-surface-container-low);
  border-top: 1px solid var(--md-outline-variant);
  padding: 0.875rem 1.25rem;
}

/* ===== 12. STAT CARDS ===== */
.stat-card {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition:
    box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1),
    transform 0.2s cubic-bezier(0.2, 0, 0, 1);
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  box-shadow: var(--md-elevation-1);
  transform: translateY(-2px);
}

.stat-card .stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--md-shape-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-card .stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-bottom: 0.25rem;
}

.stat-card .stat-value {
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--md-on-surface);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Stat icon tonal variants */
.stat-icon-amber {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.stat-icon-green {
  background: var(--md-success-container);
  color: var(--md-on-success-container);
}
.stat-icon-blue {
  background: var(--md-info-container);
  color: var(--md-on-info-container);
}
.stat-icon-red {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}
.stat-icon-purple {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/* ===== 13. TABLES ===== */
.table {
  /* Override Bootstrap 5 CSS variables for tables */
  --bs-table-color: var(--md-on-surface);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--md-outline-variant);
  --bs-table-striped-bg: var(--md-surface-container-low);
  --bs-table-hover-bg: rgba(103, 80, 164, 0.07);
  --bs-table-hover-color: var(--md-on-surface);
  --bs-table-active-bg: var(--md-primary-container);
  --bs-table-active-color: var(--md-on-primary-container);
  color: var(--md-on-surface);
  font-size: 0.875rem;
  border-color: var(--md-outline-variant);
  margin-bottom: 0;
}

.table thead th {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--md-outline-variant) !important;
  border-top: none !important;
  padding: 0.875rem 1rem;
  white-space: nowrap;
  vertical-align: middle;
}

.table tbody td {
  padding: 0.8125rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--md-outline-variant);
  border-top: none !important;
  color: var(--md-on-surface);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr {
  transition: background 0.12s;
}

/* Bootstrap 5 table-hover — must override via BS CSS vars (set above) */
/* Fallback for non-BS paths */
.table tbody tr:hover td {
  background-color: rgba(103, 80, 164, 0.07);
}

.table-sm thead th {
  padding: 0.5rem 0.75rem;
  font-size: 0.625rem;
}
.table-sm tbody td {
  padding: 0.4375rem 0.75rem;
}

/* ===== 14. BUTTONS ===== */
/*
 * Bootstrap 5 áp dụng hover color qua --bs-btn-hover-color (CSS variable),
 * nên phải override cả BS variables lẫn direct property để tránh text bị
 * trùng màu background khi hover.
 */
.btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.006em;
  border-radius: var(--md-shape-full);
  padding: 0.625rem 1.5rem;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.25;
  transition:
    box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1),
    background-color 0.15s;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.38;
  pointer-events: none;
}

.btn-sm {
  min-height: 2rem;
  padding: 0.3125rem 0.875rem;
  font-size: 0.8125rem;
}

.btn-lg {
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
}

/* --- Filled primary (btn-amber / btn-primary) --- */
.btn-amber,
.btn-primary {
  /* Override BS vars */
  --bs-btn-color: var(--md-on-primary);
  --bs-btn-bg: var(--md-primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--md-on-primary);
  --bs-btn-hover-bg: var(--md-primary);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--md-on-primary);
  --bs-btn-active-bg: var(--md-primary);
  /* Direct */
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  box-shadow: var(--md-elevation-1);
}
.btn-amber:hover,
.btn-primary:hover {
  background-color: color-mix(in srgb, var(--md-primary) 88%, #000);
  color: var(--md-on-primary);
  box-shadow: var(--md-elevation-2);
}
.btn-amber:active,
.btn-primary:active {
  background-color: color-mix(in srgb, var(--md-primary) 80%, #000);
  color: var(--md-on-primary);
  box-shadow: none;
}
.btn-amber:focus-visible,
.btn-primary:focus-visible {
  outline: 3px solid var(--md-primary-fixed-dim);
  outline-offset: 2px;
}

/* --- Tonal secondary (btn-secondary) --- */
.btn-secondary {
  --bs-btn-color: var(--md-on-secondary-container);
  --bs-btn-bg: var(--md-secondary-container);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--md-on-secondary-container);
  --bs-btn-hover-bg: var(--md-secondary-container);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--md-on-secondary-container);
  --bs-btn-active-bg: var(--md-secondary-container);
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border: none;
}
.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--md-secondary-container) 88%, #000);
  color: var(--md-on-secondary-container);
  box-shadow: var(--md-elevation-1);
}
.btn-secondary:active {
  background-color: color-mix(in srgb, var(--md-secondary-container) 80%, #000);
  color: var(--md-on-secondary-container);
  box-shadow: none;
}

/* --- Outlined primary (btn-outline-amber / btn-outline-primary) --- */
.btn-outline-amber,
.btn-outline-primary {
  --bs-btn-color: var(--md-primary);
  --bs-btn-border-color: var(--md-outline);
  --bs-btn-hover-color: var(--md-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--md-primary) 10%, transparent);
  --bs-btn-hover-border-color: var(--md-primary);
  --bs-btn-active-color: var(--md-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--md-primary) 14%, transparent);
  background-color: transparent;
  border: 1px solid var(--md-outline);
  color: var(--md-primary);
}
.btn-outline-amber:hover,
.btn-outline-primary:hover {
  background-color: color-mix(in srgb, var(--md-primary) 10%, transparent);
  border-color: var(--md-primary);
  color: var(--md-primary);
  box-shadow: none;
}
.btn-outline-amber:focus-visible,
.btn-outline-primary:focus-visible {
  outline: 3px solid var(--md-primary-fixed-dim);
  outline-offset: 2px;
}

/* --- Outlined secondary (btn-outline-secondary) --- */
.btn-outline-secondary {
  --bs-btn-color: var(--md-on-surface-variant);
  --bs-btn-border-color: var(--md-outline);
  --bs-btn-hover-color: var(--md-on-surface);
  --bs-btn-hover-bg: var(--md-surface-container-high);
  --bs-btn-hover-border-color: var(--md-outline);
  --bs-btn-active-color: var(--md-on-surface);
  --bs-btn-active-bg: var(--md-surface-container-highest);
  background-color: transparent;
  border: 1px solid var(--md-outline);
  color: var(--md-on-surface-variant);
}
.btn-outline-secondary:hover {
  background-color: var(--md-surface-container-high);
  border-color: var(--md-outline);
  color: var(--md-on-surface);
}

/* --- Danger filled (btn-danger) --- */
.btn-danger {
  --bs-btn-color: var(--md-on-error);
  --bs-btn-bg: var(--md-error);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--md-on-error);
  --bs-btn-hover-bg: var(--md-error);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--md-on-error);
  background-color: var(--md-error);
  color: var(--md-on-error);
  border: none;
}
.btn-danger:hover {
  background-color: color-mix(in srgb, var(--md-error) 88%, #000);
  color: var(--md-on-error);
  box-shadow: var(--md-elevation-1);
}
.btn-danger:active {
  background-color: color-mix(in srgb, var(--md-error) 80%, #000);
  color: var(--md-on-error);
  box-shadow: none;
}

/* --- Outlined danger (btn-outline-danger) --- */
.btn-outline-danger {
  --bs-btn-color: var(--md-error);
  --bs-btn-border-color: var(--md-outline);
  --bs-btn-hover-color: var(--md-on-error-container);
  --bs-btn-hover-bg: var(--md-error-container);
  --bs-btn-hover-border-color: var(--md-error-container);
  --bs-btn-active-color: var(--md-on-error-container);
  background-color: transparent;
  border: 1px solid var(--md-outline);
  color: var(--md-error);
}
.btn-outline-danger:hover {
  background-color: var(--md-error-container);
  border-color: var(--md-error-container);
  color: var(--md-on-error-container);
}

/* --- Success filled (btn-success) --- */
.btn-success {
  --bs-btn-color: var(--md-on-success);
  --bs-btn-bg: var(--md-success);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--md-on-success);
  --bs-btn-hover-bg: var(--md-success);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--md-on-success);
  background-color: var(--md-success);
  color: var(--md-on-success);
  border: none;
}
.btn-success:hover {
  background-color: color-mix(in srgb, var(--md-success) 88%, #000);
  color: var(--md-on-success);
  box-shadow: var(--md-elevation-1);
}
.btn-success:active {
  background-color: color-mix(in srgb, var(--md-success) 80%, #000);
  color: var(--md-on-success);
  box-shadow: none;
}

/* --- Warning tonal (btn-warning) --- */
.btn-warning {
  --bs-btn-color: var(--md-on-warning-container);
  --bs-btn-bg: var(--md-warning-container);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--md-on-warning-container);
  --bs-btn-hover-bg: var(--md-warning-container);
  --bs-btn-hover-border-color: transparent;
  background-color: var(--md-warning-container);
  color: var(--md-on-warning-container);
  border: none;
}
.btn-warning:hover {
  background-color: color-mix(in srgb, var(--md-warning-container) 88%, #000);
  color: var(--md-on-warning-container);
}

/* --- Light / ghost (btn-light) --- */
.btn-light {
  --bs-btn-color: var(--md-on-surface);
  --bs-btn-bg: var(--md-surface-container-high);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--md-on-surface);
  --bs-btn-hover-bg: var(--md-surface-container-highest);
  --bs-btn-hover-border-color: transparent;
  background-color: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border: none;
}
.btn-light:hover {
  background-color: var(--md-surface-container-highest);
  color: var(--md-on-surface);
}

/* --- Close button --- */
.btn-close {
  opacity: 0.6;
  filter: none;
  transition: opacity 0.15s;
}
.btn-close:hover {
  opacity: 1;
}
.btn-close-sm {
  width: 0.9em;
  height: 0.9em;
}

/* ===== 15. BADGES / CHIPS ===== */
.badge {
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.2875rem 0.625em;
  border-radius: var(--md-shape-full);
  letter-spacing: 0.025em;
  line-height: 1.4;
}

/* M3 tonal badge colors */
.bg-success {
  background: var(--md-success-container) !important;
  color: var(--md-on-success-container) !important;
}
.bg-danger {
  background: var(--md-error-container) !important;
  color: var(--md-on-error-container) !important;
}
.bg-warning {
  background: var(--md-warning-container) !important;
  color: var(--md-on-warning-container) !important;
}
.bg-info {
  background: var(--md-info-container) !important;
  color: var(--md-on-info-container) !important;
}
.bg-primary {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}
.bg-secondary {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
}
.bg-dark {
  background: var(--md-inverse-surface) !important;
  color: var(--md-inverse-on-surface) !important;
}
.bg-light {
  background: var(--md-surface-container-high) !important;
  color: var(--md-on-surface) !important;
}

.text-success {
  color: var(--md-success) !important;
}
.text-danger {
  color: var(--md-error) !important;
}
.text-warning {
  color: var(--md-warning) !important;
}
.text-info {
  color: var(--md-info) !important;
}
.text-primary {
  color: var(--md-primary) !important;
}
.text-muted {
  color: var(--md-on-surface-variant) !important;
}
.text-dark {
  color: var(--md-on-surface) !important;
}

/* ===== 16. FORMS ===== */
.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  margin-bottom: 0.375rem;
  letter-spacing: 0.006em;
  display: block;
}

/* --- M3 Outlined Text Field base --- */
.form-control,
.form-select {
  background-color: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  color: var(--md-on-surface);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.625rem 0.875rem;
  min-height: 2.75rem;
  width: 100%;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background-color 0.15s;
  /* Override Bootstrap's default --bs-form vars */
  --bs-body-bg: var(--md-surface-container-lowest);
}

/* Hover — on-surface border */
.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: var(--md-on-surface);
}

/* Focus — primary outline without layout shift (inset shadow trick) */
.form-control:focus,
.form-select:focus {
  background-color: var(--md-surface-container-lowest);
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
  outline: none;
  color: var(--md-on-surface);
}

/* Readonly */
.form-control[readonly] {
  background-color: var(--md-surface-container-low);
  color: var(--md-on-surface-variant);
  cursor: default;
}

/* Disabled */
.form-control:disabled,
.form-select:disabled {
  background-color: var(--md-surface-container-high);
  border-color: var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  opacity: 0.38;
  cursor: not-allowed;
}

/* Placeholder */
.form-control::placeholder {
  color: var(--md-on-surface-variant);
  opacity: 0.7;
}

/* Textarea */
textarea.form-control {
  min-height: 6rem;
  resize: vertical;
  line-height: 1.6;
  padding: 0.75rem 0.875rem;
}

/* Select — custom arrow */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%2349454F' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1.25rem 1.25rem;
  padding-right: 2.25rem;
  cursor: pointer;
}

input {
  border-color: #ccc;
  border-radius: 16px;
}

/* Date / time inputs */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
  cursor: pointer;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
  filter: none;
}

/* Number input — hide spinner on non-focus */
input[type="number"].form-control:not(:focus)::-webkit-inner-spin-button,
input[type="number"].form-control:not(:focus)::-webkit-outer-spin-button {
  opacity: 0;
}
input[type="number"].form-control::-webkit-inner-spin-button,
input[type="number"].form-control::-webkit-outer-spin-button {
  opacity: 0.6;
  cursor: pointer;
}

/* Search input */
input[type="search"].form-control::-webkit-search-cancel-button {
  opacity: 0.5;
  cursor: pointer;
}

/* --- Sizes --- */
.form-control-sm,
.form-select-sm {
  min-height: 2rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: var(--md-shape-xs);
  line-height: 1.4;
}
.form-select-sm {
  padding-right: 2rem;
  background-position: right 0.5rem center;
}
.form-control-sm:focus,
.form-select-sm:focus {
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.form-control-lg,
.form-select-lg {
  min-height: 3.25rem;
  padding: 0.875rem 1.125rem;
  font-size: 1rem;
  border-radius: var(--md-shape-sm);
}

/* --- Validation states --- */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--md-success);
  background-image: none;
  box-shadow: none;
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--md-success);
  box-shadow: inset 0 0 0 1px var(--md-success);
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--md-error);
  background-image: none;
  box-shadow: none;
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: var(--md-error);
  box-shadow: inset 0 0 0 1px var(--md-error);
}
.invalid-feedback {
  font-size: 0.75rem;
  color: var(--md-error);
}
.valid-feedback {
  font-size: 0.75rem;
  color: var(--md-success);
}

/* --- Helper text --- */
.form-text {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* ===== FILTER BAR (M3 filter chip style) ===== */

/* Card chứa filter — nền surface-container-low để tách biệt */
.card:has(.filter-form) {
  background: var(--md-surface-container-low);
  border-color: var(--md-outline-variant);
}

/* Filter bar card body: scroll ngang nội bộ thay vì đẩy rộng trang */
.card:has(.filter-form) .card-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Label trên mỗi filter field */
.filter-form .form-label,
.filter-form label.small,
.filter-form label.form-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--md-on-surface-variant);
  margin-bottom: 0.25rem;
  display: block;
}

/* SELECT — pill-shaped M3 filter chip */
.filter-form .form-select,
.filter-form .form-select-sm {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-full);
  color: var(--md-on-surface);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  padding: 0 2.125rem 0 0.875rem;
  height: 2rem;
  min-height: 2rem;
  line-height: 2rem;
  /* Dropdown arrow — M3 on-surface-variant (#49454F) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%2349454F' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.375rem center;
  background-size: 1.25rem 1.25rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
  /* Override inline max-width/width từ template */
  width: auto;
}

.filter-form .form-select:hover,
.filter-form .form-select-sm:hover {
  border-color: var(--md-outline);
  background-color: var(--md-surface-container-low);
}

.filter-form .form-select:focus,
.filter-form .form-select-sm:focus {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
  outline: none;
  background-color: var(--md-surface-container-lowest);
}

/* INPUT text/number/date — pill-shaped M3 */
.filter-form .form-control,
.filter-form .form-control-sm {
  background-color: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-full);
  color: var(--md-on-surface);
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0 0.875rem;
  height: 2rem;
  min-height: 2rem;
  line-height: 2rem;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    box-shadow 0.15s;
}

.filter-form .form-control:hover:not(:focus),
.filter-form .form-control-sm:hover:not(:focus) {
  border-color: var(--md-outline);
  background-color: var(--md-surface-container-low);
}

.filter-form .form-control:focus,
.filter-form .form-control-sm:focus {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
  outline: none;
  background-color: var(--md-surface-container-lowest);
}

.filter-form .form-control::placeholder {
  color: var(--md-on-surface-variant);
  opacity: 0.6;
}

/* Checkbox trong filter */
.filter-form .form-check {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding-left: 0;
  margin: 0;
}

.filter-form .form-check-input {
  margin: 0;
  flex-shrink: 0;
}

.filter-form .form-check-label {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  user-select: none;
}

/* Nút "Đặt lại" trong filter */
.filter-form .btn-outline-secondary {
  height: 2rem;
  min-height: 2rem;
  padding: 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 2rem;
  border-radius: var(--md-shape-full);
  border-color: var(--md-outline-variant);
  color: var(--md-on-surface-variant);
}

.filter-form .btn-outline-secondary:hover {
  background: var(--md-surface-container-high);
  border-color: var(--md-outline);
  color: var(--md-on-surface);
}

/* Checkboxes */
.form-check-input {
  border-color: var(--md-outline);
  background-color: transparent;
  width: 1.125em;
  height: 1.125em;
  margin-top: 0.15em;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--md-primary);
  border-color: var(--md-primary);
}

.form-check-input:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.2);
}

.form-check-label {
  cursor: pointer;
  font-size: 0.875rem;
}

/* Switch */
.form-switch .form-check-input {
  width: 2.25em;
  border-radius: var(--md-shape-full);
}
.form-switch .form-check-input:checked {
  background-color: var(--md-primary);
}

/* Input group */
.input-group {
  position: relative;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* Remove double border between input and addon */
.input-group
  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
    .valid-feedback
  ):not(.invalid-tooltip):not(.invalid-feedback) {
  border-left: 0;
}
.input-group
  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
    .valid-tooltip
  ):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-right: 0;
}

/* Round only the outer corners */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-text {
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  padding: 0.625rem 0.875rem;
  line-height: 1.5;
  white-space: nowrap;
  display: flex;
  align-items: center;
  transition: border-color 0.15s;
}

/* Sync addon border on focus */
.input-group:focus-within .input-group-text {
  border-color: var(--md-primary);
}

.input-group-sm .input-group-text {
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
}

/* ===== 17. BREADCRUMB ===== */
.breadcrumb {
  margin: 0;
  background: transparent;
  padding: 0;
  font-size: 0.8125rem;
}

.breadcrumb-item a {
  color: var(--md-primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s;
}
.breadcrumb-item a:hover {
  opacity: 0.8;
}
.breadcrumb-item.active {
  color: var(--md-on-surface-variant);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--md-on-surface-variant);
}

/* ===== 18. ALERTS ===== */
.flash-messages {
  position: sticky;
  top: var(--navbar-height);
  z-index: 40;
  padding: 0.75rem 1.5rem 0;
}

.alert {
  border-radius: var(--md-shape-sm);
  font-size: 0.875rem;
  border: none;
  padding: 0.875rem 1rem 0.875rem 1.125rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.alert .bi {
  flex-shrink: 0;
  margin-top: 0.1em;
}

.alert-success {
  background: var(--md-success-container);
  color: var(--md-on-success-container);
}
.alert-danger {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}
.alert-warning {
  background: var(--md-warning-container);
  color: var(--md-on-warning-container);
}
.alert-info {
  background: var(--md-info-container);
  color: var(--md-on-info-container);
}

/* ===== 19. PAGINATION ===== */
.pagination {
  gap: 2px;
}

.pagination .page-link {
  color: var(--md-on-surface-variant);
  background: transparent;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-full) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3125rem 0.75rem;
  min-width: 2.125rem;
  text-align: center;
  transition:
    background 0.15s,
    border-color 0.15s;
  line-height: 1.5;
}

.pagination .page-item.active .page-link {
  background: var(--md-primary);
  border-color: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: none;
  font-weight: 600;
}

.pagination .page-link:hover {
  background: var(--md-surface-container-high);
  border-color: var(--md-outline);
  color: var(--md-on-surface);
}

.pagination .page-item.disabled .page-link {
  opacity: 0.38;
  pointer-events: none;
}

/* ===== 20. MODALS / DIALOGS ===== */
.modal-content {
  border: none;
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elevation-3);
  background: var(--md-surface-container-lowest);
  overflow: hidden;
}

.modal-header {
  padding: 1.5rem 1.5rem 0.5rem;
  border-bottom: none;
}

.modal-title {
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--md-on-surface);
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 0.75rem 1.5rem 1rem;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
  line-height: 1.6;
}

.modal-body .form-label {
  color: var(--md-on-surface);
}

.modal-footer {
  padding: 0.5rem 1.5rem 1.5rem;
  border-top: none;
  gap: 0.5rem;
  justify-content: flex-end;
}

.modal-backdrop {
  background: var(--md-scrim);
}
.modal-backdrop.show {
  opacity: 0.32;
}

/* Sizes */
.modal-dialog-centered {
  align-items: center;
}

/* ===== 21. TOAST / SNACKBAR ===== */
.toast {
  border: none !important;
  border-radius: var(--md-shape-xs) !important;
  background: var(--md-inverse-surface) !important;
  box-shadow: var(--md-elevation-3);
  color: var(--md-inverse-on-surface);
}

.toast .toast-body {
  color: var(--md-inverse-on-surface);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
}

.toast .btn-close {
  filter: invert(1);
  opacity: 0.7;
}

#reorder-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  min-width: 240px;
}

#admin-toast {
  z-index: 1200;
}

/* ===== 22. EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--md-on-surface-variant);
}

.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.35;
  display: block;
}

.empty-state p {
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
  margin: 0;
  max-width: 320px;
  margin-inline: auto;
}

/* ===== 23. DRAG AND DROP ===== */
.drag-handle {
  cursor: grab;
  color: var(--md-outline-variant);
  transition: color 0.15s;
  user-select: none;
  width: 2rem;
  /* Không override display — giữ nguyên display:table-cell của <td> */
  text-align: center;
  vertical-align: middle;
}

.drag-handle:hover {
  color: var(--md-primary) !important;
}
.drag-handle:active {
  cursor: grabbing;
}

.sortable-ghost {
  opacity: 0.4;
  background: var(--md-primary-container) !important;
  outline: 2px dashed var(--md-primary);
  outline-offset: -2px;
}

.sortable-drag {
  opacity: 1;
  box-shadow: var(--md-elevation-3) !important;
}

.sortable-saving .drag-handle {
  cursor: wait;
  opacity: 0.38;
}

/* ===== 24. DETAIL PAGES ===== */
.detail-dl dt {
  overflow-wrap: break-word;
  word-break: break-word;
  padding-top: 0.0625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-on-surface-variant);
}

.detail-dl dd {
  overflow-wrap: break-word;
  word-break: break-word;
  color: var(--md-on-surface);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

/* ===== 25. UTILITIES ===== */
.min-w-0 {
  min-width: 0;
}

/* Table container */
.table-responsive-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dividers */
.border-top {
  border-top: 1px solid var(--md-outline-variant) !important;
}
.border-bottom {
  border-bottom: 1px solid var(--md-outline-variant) !important;
}
.border-start {
  border-left: 1px solid var(--md-outline-variant) !important;
}
.border-end {
  border-right: 1px solid var(--md-outline-variant) !important;
}
.border {
  border: 1px solid var(--md-outline-variant) !important;
}

/* Rounded overrides */
.rounded {
  border-radius: var(--md-shape-sm) !important;
}
.rounded-lg {
  border-radius: var(--md-shape-lg) !important;
}
.rounded-xl {
  border-radius: var(--md-shape-xl) !important;
}
.rounded-pill {
  border-radius: var(--md-shape-full) !important;
}

/* Focus-visible outline */
*:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}

/* ===== 26. MOBILE SIDEBAR TOGGLE ===== */
.sidebar-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--md-on-surface);
  font-size: 1.375rem;
  cursor: pointer;
  border-radius: var(--md-shape-full);
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 99;
  backdrop-filter: none;
}

/* ===== 27. RESPONSIVE ===== */
@media (max-width: 768px) {
  .sidebar-toggle {
    display: flex;
    margin-right: 0.25rem;
  }

  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--md-elevation-4);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .main-content {
    margin-left: 0;
  }

  .top-navbar {
    padding: 0 1rem;
  }
  .page-content {
    padding: 1rem;
  }
  .flash-messages {
    padding: 0.5rem 1rem 0;
  }

  .stat-card .stat-value {
    font-size: 1.25rem;
  }

  .d-flex.justify-content-between.align-items-center.mb-4 {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Filter form: không wrap lộn xộn — scroll ngang nội bộ trong card */
  .filter-form.row {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }

  /* Table responsive: chỉ scroll ngang bên trong card */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Đảm bảo không lan ra ngoài card */
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .stat-card {
    padding: 1rem;
    gap: 0.75rem;
  }
  .stat-card .stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
  }
  .stat-card .stat-value {
    font-size: 1.125rem;
  }
  .page-content {
    padding: 0.75rem;
  }
}

/* ===== 28. BOOTSTRAP COMPONENT CLEANUP ===== */
/* Remove Bootstrap's default blue focus glow on btn and page-link
   (form-control/select use our own inset shadow instead of BS default) */
.btn:focus,
.page-link:focus {
  box-shadow: none;
}

/* Override Bootstrap's --bs-body-color inside form elements */
.form-control,
.form-select {
  --bs-body-color: var(--md-on-surface);
}

/* Dropdown */
.dropdown-menu {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-sm);
  box-shadow: var(--md-elevation-2);
  background: var(--md-surface-container-lowest);
  padding: 0.25rem;
  font-size: 0.875rem;
}

.dropdown-item {
  border-radius: var(--md-shape-xs);
  color: var(--md-on-surface);
  padding: 0.5rem 0.875rem;
  transition: background 0.15s;
}
.dropdown-item:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}
.dropdown-item:active {
  background: var(--md-surface-container-highest);
}

.dropdown-divider {
  border-color: var(--md-outline-variant);
  margin: 0.25rem 0;
}

/* Nav tabs (used in log viewer) */
.nav-tabs {
  border-bottom: 1px solid var(--md-outline-variant);
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: var(--md-shape-sm) var(--md-shape-sm) 0 0;
  transition:
    background 0.15s,
    color 0.15s;
}

.nav-tabs .nav-link:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

.nav-tabs .nav-link.active {
  background: var(--md-surface-container-lowest);
  color: var(--md-primary);
  border-bottom: 2px solid var(--md-primary);
  font-weight: 600;
}

/* Tab content */
.tab-content {
  padding-top: 1rem;
}

/* List group */
.list-group-item {
  border-color: var(--md-outline-variant);
  color: var(--md-on-surface);
  font-size: 0.875rem;
  background: var(--md-surface-container-lowest);
}
.list-group-item-action:hover {
  background: var(--md-surface-container-low);
  color: var(--md-on-surface);
}
.list-group-item.active {
  background: var(--md-primary-container);
  border-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* Spinner */
.spinner-border,
.spinner-grow {
  color: var(--md-primary);
}

/* Progress bar */
.progress {
  background: var(--md-surface-container-high);
  border-radius: var(--md-shape-full);
  height: 0.375rem;
}
.progress-bar {
  background: var(--md-primary);
  border-radius: var(--md-shape-full);
}

/* Code blocks (log viewer) */
pre,
code {
  font-size: 0.8125rem;
  background: var(--md-surface-container-high);
  border-radius: var(--md-shape-xs);
  color: var(--md-on-surface);
}

pre {
  padding: 1rem;
  border: 1px solid var(--md-outline-variant);
}