html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* ==========================================================================
   Slate theme — the whole portal's accent color lives in two variables,
   --aaq-primary (+ rgb / strong / contrast variants) per theme. Change the
   palette in these two blocks and every button, link, checkbox, pagination,
   sidebar icon, focus ring and filter funnel follows. No blue anywhere.
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --aaq-primary: #334155;          /* slate-700 */
  --aaq-primary-rgb: 51, 65, 85;
  --aaq-primary-strong: #1e293b;   /* slate-800 — hover / pressed */
  --aaq-primary-strong-rgb: 30, 41, 59;
  --aaq-primary-contrast: #ffffff; /* text on top of --aaq-primary */
  --aaq-accent: #0f766e;           /* teal-700 — hover accent on links */
  --aaq-focus-ring: rgba(51, 65, 85, 0.25);

  /* Bootstrap tokens follow the theme. */
  --bs-primary: var(--aaq-primary);
  --bs-primary-rgb: var(--aaq-primary-rgb);
  --bs-link-color: var(--aaq-primary);
  --bs-link-hover-color: var(--aaq-primary-strong);
  /* The compiled `a` rule reads --bs-link-color-rgb (not --bs-link-color),
     so override the RGB pair too or every plain link stays #0d6efd blue. */
  --bs-link-color-rgb: var(--aaq-primary-rgb);
  --bs-link-hover-color-rgb: var(--aaq-primary-strong-rgb);
  --bs-focus-ring-color: var(--aaq-focus-ring);
  --bs-primary-text-emphasis: #1e293b;
  --bs-primary-bg-subtle: #e2e8f0;
  --bs-primary-border-subtle: #94a3b8;

  /* Light theme field borders were barely visible — strengthen them. */
  --bs-border-color: #cbd5e1;

  /* DataTables 3 loading/selected colour (compiled CSS bakes 13, 110, 253). */
  --dt_background-selected: 51, 65, 85;
}

[data-bs-theme="dark"] {
  --aaq-primary: #cbd5e1;          /* slate-300 */
  --aaq-primary-rgb: 203, 213, 225;
  --aaq-primary-strong: #f1f5f9;   /* slate-100 — hover / pressed */
  --aaq-primary-strong-rgb: 241, 245, 249;
  --aaq-primary-contrast: #1e293b;
  --aaq-accent: #2dd4bf;           /* teal-400 */
  --aaq-focus-ring: rgba(203, 213, 225, 0.25);

  --bs-primary: var(--aaq-primary);
  --bs-primary-rgb: var(--aaq-primary-rgb);
  --bs-link-color: var(--aaq-primary);
  --bs-link-hover-color: var(--aaq-primary-strong);
  --bs-link-color-rgb: var(--aaq-primary-rgb);
  --bs-link-hover-color-rgb: var(--aaq-primary-strong-rgb);
  --bs-focus-ring-color: var(--aaq-focus-ring);
  --bs-primary-text-emphasis: #f8fafc;
  --bs-primary-bg-subtle: #334155;
  --bs-primary-border-subtle: #64748b;

  --bs-border-color: #495057;

  /* DataTables 3 loading/selected colour (dark = light slate). */
  --dt_background-selected: 203, 213, 225;
}

/* ---- Override the components whose colors AdminLTE's compiled CSS baked
       in as literal #0d6efd (they ignore --bs-primary). All still resolve to
       --aaq-primary, so the palette stays single-source. ---- */
.btn-primary {
  --bs-btn-color: var(--aaq-primary-contrast);
  --bs-btn-bg: var(--aaq-primary);
  --bs-btn-border-color: var(--aaq-primary);
  --bs-btn-hover-color: var(--aaq-primary-contrast);
  --bs-btn-hover-bg: var(--aaq-primary-strong);
  --bs-btn-hover-border-color: var(--aaq-primary-strong);
  --bs-btn-active-color: var(--aaq-primary-contrast);
  --bs-btn-active-bg: var(--aaq-primary-strong);
  --bs-btn-active-border-color: var(--aaq-primary-strong);
  --bs-btn-disabled-color: var(--aaq-primary-contrast);
  --bs-btn-disabled-bg: var(--aaq-primary);
  --bs-btn-disabled-border-color: var(--aaq-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--aaq-primary);
  --bs-btn-border-color: var(--aaq-primary);
  --bs-btn-hover-bg: var(--aaq-primary);
  --bs-btn-hover-border-color: var(--aaq-primary);
  --bs-btn-hover-color: var(--aaq-primary-contrast);
  --bs-btn-active-bg: var(--aaq-primary);
  --bs-btn-active-border-color: var(--aaq-primary);
  --bs-btn-active-color: var(--aaq-primary-contrast);
  --bs-btn-disabled-color: var(--aaq-primary);
  --bs-btn-disabled-border-color: var(--aaq-primary);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--aaq-primary);
  border-color: var(--aaq-primary);
}
/* On dark theme the checked control is light slate, so the check/radio glyph
   must be dark to stay visible. */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231e293b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231e293b'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231e293b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.dropdown-item.active, .dropdown-item:active {
  --bs-dropdown-link-active-bg: var(--aaq-primary);
  --bs-dropdown-link-active-color: var(--aaq-primary-contrast);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  --bs-nav-pills-link-active-bg: var(--aaq-primary);
  --bs-nav-pills-link-active-color: var(--aaq-primary-contrast);
}
.pagination .page-link.active, .pagination .active > .page-link {
  --bs-pagination-active-bg: var(--aaq-primary);
  --bs-pagination-active-border-color: var(--aaq-primary);
  --bs-pagination-active-color: var(--aaq-primary-contrast);
}
.progress-bar { --bs-progress-bar-bg: var(--aaq-primary); }
.list-group-item.active {
  --bs-list-group-active-bg: var(--aaq-primary);
  --bs-list-group-active-border-color: var(--aaq-primary);
  --bs-list-group-active-color: var(--aaq-primary-contrast);
}

/* Focus ring — the template's blue (#258cfb / rgba(13,110,253,.25)) replaced by
   the theme ring. AdminLTE's compiled CSS bakes the blue into form-control,
   form-select, form-check-input and nav-link focus rules, so override the shadow
   (and border colour, which the compiled rules set to the blue too). */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus,
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--bs-focus-ring-color);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--bs-primary);
}

/* Dropdown menus: hover + active come from the theme. AdminLTE bakes the active
   background as #0d6efd and the .dropdown-menu-dark variant re-hardcodes its own
   blue, so override both variants explicitly — hover stays neutral, active slate.
   No dropdown (funnel filter, notifications, profile, color-mode toggle) is blue. */
.dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-active-bg: var(--aaq-primary);
  --bs-dropdown-link-active-color: var(--aaq-primary-contrast);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item:active {
  background-color: var(--aaq-primary);
  color: var(--aaq-primary-contrast);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* AAQ: DataTables v3 + dark mode. v3 keeps the 2.x DOM classes
   (.dt-container/.dt-search/.dt-length/.dt-paging) so these still apply. */
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] table.dataTable thead th {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .dt-container .dt-search input,
[data-bs-theme="dark"] .dt-container .dt-length select,
[data-bs-theme="dark"] .dt-container .dt-paging .dt-paging-button {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .dt-container .dt-search input:focus,
[data-bs-theme="dark"] .dt-container .dt-length select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--aaq-focus-ring);
}

/* DataTables chrome inside AdminLTE cards — the grid card-bodies are plain
   .card-body (no p-0), so the card's own padding insets the length/search/info/
   paging rows and the table; only intra-row spacing + control sizes live here. */
.dt-container .dt-layout-row:not(.dt-layout-table) { gap: .75rem; }
.dt-container .dt-info { padding-top: .25rem; }
.dt-container ul.pagination { margin-bottom: 0; }
.dt-container .dt-paging .dt-paging-button:not(.disabled) { cursor: pointer; }
.dt-container .dt-search input { width: 14rem; }
.dt-container .dt-length select { width: auto; }

/* Checkbox-dropdown column filters (funnel in the column header). The injected
   dropdown sits inline in the <th> (DT 3.0.2 renders .dt-column-title/order, no
   wrapper), so keep it inline-block next to the column title. */
.dt-container th .dropdown.col-filter { display: inline-block; }
.dt-container th .dropdown.col-filter .btn-icon { padding: .1rem .3rem; margin: 0; }
.dt-container th .col-filter-btn.btn-primary { border-color: var(--bs-primary); }
.col-filter-menu { min-width: 12rem; z-index: 1050; }
.col-filter-menu .form-check { margin: 0; padding-top: .25rem; padding-bottom: .25rem; }
.col-filter-menu .col-filter-actions .btn { padding: .15rem .5rem; font-size: .8rem; }

/* Icon-only action buttons in DataTables rows */
.btn-icon { padding: .25rem .4rem; line-height: 1; }
.btn-icon > i { font-size: 1rem; }

/* Navbar global search — pill input with icon + Ctrl+K hint */
.navbar-search {
  position: relative;
  width: 18rem;
}
.navbar-search .navbar-search-icon {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
.navbar-search .form-control {
  padding-left: 2.35rem;
  padding-right: 3.5rem;
  border-radius: 2rem;
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
.navbar-search .navbar-search-kbd {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  padding: .15rem .35rem;
  color: var(--bs-secondary-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  pointer-events: none;
  white-space: nowrap;
}

/* Header navbar icons (notifications, fullscreen, profile, sidebar toggle) —
   theme colour, matching the sidebar treatment. Never blue. */
.app-header .navbar-nav .nav-link {
  color: var(--aaq-primary);
}
.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus {
  color: var(--aaq-primary-strong);
}

/* ==========================================================================
   Sidebar — theme-coloured icons + tree/timeline for multi-level menus.
   The sidebar is always data-bs-theme="dark", so --aaq-primary here resolves
   to the light-slate dark value. The open parent and active item get a
   theme-tinted inset bar + background so the parent reads clearly.
   ========================================================================== */
.sidebar-wrapper .nav-icon {
  color: var(--aaq-primary);
  opacity: .85;
}
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active,
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link {
  box-shadow: inset 3px 0 0 var(--aaq-primary);
}
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link {
  color: var(--aaq-primary);
  background-color: rgba(203, 213, 225, 0.12);
}
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link .nav-icon,
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active .nav-icon {
  opacity: 1;
}

/* Tree/timeline guide: vertical spine + a short connector per child. */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-treeview {
  position: relative;
  margin-left: 1.6rem;
  padding-left: .4rem;
  border-left: 1px solid rgba(203, 213, 225, 0.35);
}
.sidebar-wrapper .nav-treeview > .nav-item {
  position: relative;
}
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link {
  position: relative;
  padding-left: 1.1rem;
}
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link::before {
  content: '';
  position: absolute;
  left: -1.05rem;
  top: 50%;
  width: .85rem;
  height: 1px;
  background-color: rgba(203, 213, 225, 0.35);
}

/* ==========================================================================
   Product media manager (Edit / EditVariant) — scoped group, order is form
   state. Drop zone + fixed-height horizontal strip of ~100x96 thumbnails with
   an overflow-x scrollbar; a dashed placeholder tile shows until images exist.
   ========================================================================== */
.media-manager-dropzone {
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
.media-manager-dropzone:hover,
.media-manager-dropzone.dragover {
  border-color: var(--aaq-primary);
  background-color: var(--bs-primary-bg-subtle);
}
.media-manager-dropzone .media-manager-browse {
  text-decoration: none;
}
.media-manager-strip {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: .25rem;
}
.media-card {
  flex: 0 0 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
  cursor: grab;
}
.media-card .media-thumb-wrap {
  width: 100px;
  height: 96px;
  overflow: hidden;
  background-color: var(--bs-secondary-bg);
}
.media-card .media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-card .media-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  padding: .35rem .5rem;
}
.media-card .media-primary-label {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  font-size: .75rem;
  white-space: nowrap;
  cursor: pointer;
}
.media-card .media-delete {
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  color: var(--bs-danger);
}
.media-card.media-dragging {
  opacity: .4;
}
.media-card.media-placeholder {
  flex: 0 0 150px;
  width: 150px;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem .5rem;
  border-style: dashed;
  color: var(--bs-secondary-color);
  font-size: .8rem;
  text-align: center;
  cursor: default;
}
.media-card.media-placeholder i {
  font-size: 1.5rem;
}

/* Compact square icon action buttons (variants, tags, product list). */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  padding: .25rem 0;
}

/* Tag selector pill chips (product Edit). */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background-color: var(--bs-body-bg);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
.tag-chip:hover {
  border-color: var(--aaq-primary);
}
.tag-chip .tag-chip-input {
  margin: 0;
}
.tag-chip .tag-chip-color {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 999px;
  font-size: .85rem;
}
.tag-chip.tag-chip-checked {
  border-color: var(--aaq-primary);
  background-color: var(--bs-primary-bg-subtle);
}
.tag-chip.tag-chip-disabled {
  opacity: .55;
  cursor: not-allowed;
}
.tag-chip .tag-chip-lock {
  color: var(--bs-secondary-color);
  font-size: .75rem;
}

/* ==========================================================================
   Store preview (Edit) — the shopper-facing snapshot card.
   ========================================================================== */
.product-preview-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  background-color: var(--bs-tertiary-bg);
}

/* ==========================================================================
   Native color swatches on tag forms (paired with the hex/rgb text input).
   ========================================================================== */
.color-swatch {
  width: 2.25rem;
  height: 2.25rem;
  padding: 2px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: none;
  cursor: pointer;
}
.color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--bs-border-radius) - 2px);
}
.color-swatch::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--bs-border-radius) - 2px);
}

/* Variant options (Batch AA): color dot inside an option value pill, and the
   combination matrix's composed-value label. */
.opt-swatch {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  margin-right: .35em;
  vertical-align: middle;
}
.matrix-name {
  font-weight: 600;
  margin-right: .5rem;
}

/* Add-option / add-specification pickers: the "Add" button carries the action,
   so the select stays compact and never grows to the card width. */
.option-add-control select.form-select { max-width: 16rem; }