/* ==========================================================================
   Admin Panel — Modern UI design tokens
   Phase 1 pilot. See docs/superpowers/specs/2026-08-24-admin-panel-modern-ui-design.md
   ========================================================================== */

:root {
  /* Accent (TailAdmin brand blue) */
  --color-primary-50:  #ECF3FF;
  --color-primary-100: #DDE9FF;
  --color-primary-500: #465FFF; /* base */
  --color-primary-600: #3641F5; /* hover */
  --color-primary-700: #2A31D8; /* active */

  /* Neutrals (slate) */
  --color-gray-50:  #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;

  /* Semantic */
  --color-success:    #16A34A;
  --color-success-bg: #DCFCE7;
  --color-warning:    #D97706;
  --color-warning-bg: #FEF3C7;
  --color-danger:     #DC2626;
  --color-danger-bg:  #FEE2E2;
  --color-info:       #0284C7;
  --color-info-bg:    #E0F2FE;

  /* Surfaces — off-white instead of stark white, with enough gap
     between page and card that cards still read as distinct. */
  --color-bg-app:      #F6F5F2;
  --color-bg-surface:  #FDFCFA;
  --color-border:      #E8E5DE;
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-500);

  /* Radius — TailAdmin's rounded-xl cards / rounded-lg controls */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);

  /* Type — TailAdmin uses "Outfit" (linked in layouts/include.blade.php) */
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Dark mode
   See docs/superpowers/specs/2026-08-25-admin-dark-mode-design.md
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-app: #0F1117;
    --color-bg-surface: #1A1D27;
    --color-border: #2A2E3A;
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-gray-50: #1E2230;
    --color-gray-100: #262B3B;
    --color-gray-200: #2F3446;
    --color-gray-300: #3D4356;
    --color-gray-400: #5B6478;
    --color-gray-500: #7C879C;
    --color-gray-600: #9BA5B8;
    --color-gray-700: #C2C9D6;
    --color-gray-800: #E2E6ED;
    --color-gray-900: #F8FAFC;
    --color-primary-500: #6B84FF;
    --color-primary-600: #8296FF;
    --color-primary-700: #465FFF;
    --color-success: #4ADE80;
    --color-success-bg: #14291D;
    --color-warning: #FBBF24;
    --color-warning-bg: #2E2410;
    --color-danger: #F87171;
    --color-danger-bg: #2E1717;
    --color-info: #38BDF8;
    --color-info-bg: #102530;
  }
}

:root[data-theme="dark"] {
  --color-bg-app: #0F1117;
  --color-bg-surface: #1A1D27;
  --color-border: #2A2E3A;
  --color-text-primary: #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-gray-50: #1E2230;
  --color-gray-100: #262B3B;
  --color-gray-200: #2F3446;
  --color-gray-300: #3D4356;
  --color-gray-400: #5B6478;
  --color-gray-500: #7C879C;
  --color-gray-600: #9BA5B8;
  --color-gray-700: #C2C9D6;
  --color-gray-800: #E2E6ED;
  --color-gray-900: #F8FAFC;
  --color-primary-500: #6B84FF;
  --color-primary-600: #8296FF;
  --color-primary-700: #465FFF;
  --color-success: #4ADE80;
  --color-success-bg: #14291D;
  --color-warning: #FBBF24;
  --color-warning-bg: #2E2410;
  --color-danger: #F87171;
  --color-danger-bg: #2E1717;
  --color-info: #38BDF8;
  --color-info-bg: #102530;
}

/* ==========================================================================
   Shell
   ========================================================================== */

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-app);
  color: var(--color-text-primary);
}

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

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-weight: 600;
}

.page-title {
  color: var(--color-text-primary);
}

.navbar {
  border-bottom: 1px solid var(--color-border);
}

.navbar .navbar-brand-wrapper {
  border-right: 1px solid var(--color-border);
}

/* Profile avatar fallback — shown instead of a broken/missing image (see
   showInitialsAvatar() in layouts/include.blade.php). Sized to fill .nav-profile-img,
   so it always matches that container's size, including its mobile override below. */
.nav-profile-img .nav-profile-initials {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: var(--color-primary-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.sidebar {
  width: 270px; /* was 290px in style.css, 240px in Phase 1 */
  border-right: 1px solid var(--color-border);
}

/* Desktop only — style.css's own @media (max-width: 991px)/(max-width: 480px) rules
   already give .navbar-brand-wrapper a narrower responsive width (55px/75px/210px per
   breakpoint) so the logo box and the toggler/profile menu can both fit a mobile-width
   navbar without wrapping onto a second row. An unconditional width here (as this used
   to be, grouped with .sidebar) overrode all of those at every viewport, forcing 270px
   even on a 375px-wide phone and breaking the header layout. */
@media (min-width: 992px) {
  .navbar .navbar-brand-wrapper {
    width: 270px;
  }

  .sidebar-fixed .main-panel {
    margin-left: 270px;
  }
}

/* Below 480px, style.css widens .navbar-brand-wrapper back to 210px (see comment above)
   so the (fixed ~170px-wide) logo image isn't clipped. Combined with the icons side
   (~230px for the theme toggle, avatar, mobile menu toggler), that's wider than most
   phones — and .navbar itself is `flex-wrap: wrap` (style.css's base Bootstrap navbar
   rule), so instead of the two sides sharing the row, the icons side drops to its own
   second 70px row. Each row then still only fills its own content's width (not the full
   viewport), leaving the rest of that row empty — the real fix is to keep them on one
   row and let the icons side flex/shrink into whatever width remains beside the logo. */
@media (max-width: 480px) {
  .navbar {
    flex-wrap: nowrap;
  }

  .navbar-menu-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  /* Reclaim the padding style.css puts around the logo — the logo image itself
     (~170px, set by style.css) is untouched, just the empty space around it. */
  .navbar .navbar-brand-wrapper {
    width: auto;
    padding: 0 8px;
  }

  /* Tighten each icon's own padding so the row fits in less width. */
  .navbar-menu-wrapper .navbar-toggler {
    padding-left: 8px;
    padding-right: 8px;
  }

  .navbar-menu-wrapper #theme-toggle-btn {
    padding-left: 6px;
    padding-right: 6px;
  }

  .navbar-menu-wrapper .nav-profile-img {
    width: 28px;
    height: 28px;
  }

  /* The "Email Configuration is not verified" banner (header.blade.php) is a full
     sentence + link — collapse it to just the warning icon so it doesn't crowd out
     the toggle/avatar/hamburger icons that must stay usable. */
  .navbar-menu-wrapper > .mx-auto.order-0 {
    flex: 0 0 auto;
  }

  .navbar-menu-wrapper > .mx-auto.order-0 .alert-fill-danger {
    padding: 4px 8px;
    margin: 0 4px;
  }

  .navbar-menu-wrapper > .mx-auto.order-0 .alert-fill-danger a,
  .navbar-menu-wrapper > .mx-auto.order-0 .alert-fill-danger {
    font-size: 0;
  }

  .navbar-menu-wrapper > .mx-auto.order-0 .alert-fill-danger i {
    font-size: 16px;
  }
}

.sidebar .tab-content {
  padding-left: 0;
  padding-right: 0;
}

/* Thin scrollbar for the sidebar's own scroll (Firefox + WebKit). */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: var(--radius-pill);
}

.sidebar .nav .nav-item {
  padding: 0 0.85rem; /* was 0 2.25rem in style.css — that's the empty left gutter */
}

.sidebar .nav .nav-item .nav-link {
  color: var(--color-text-secondary);
  padding: 0.85rem 0.75rem;
  border-radius: var(--radius-sm);
}

.sidebar .nav .nav-item .nav-link i.menu-icon {
  font-size: 1.12rem;
  margin-right: 0.7rem;
}

.sidebar .nav .nav-item .nav-link .menu-title {
  font-size: 0.90rem;
}

.sidebar .nav .nav-item .nav-link .menu-icon {
  color: var(--color-gray-400);
}

.sidebar .nav .nav-item:hover {
  background: transparent;
}

.sidebar .nav .nav-item .nav-link:hover {
  background: var(--color-gray-50);
}

.sidebar .nav .nav-item.active {
  background: transparent;
}

/* Active item — solid dark-blue pill with a soft colored glow + inset
   top highlight for a "3D" raised feel. */
.sidebar .nav .nav-item.active>.nav-link {
  background: var(--color-primary-700);
  box-shadow: 0 4px 10px rgba(42, 49, 216, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar .nav .nav-item.active>.nav-link .menu-title,
.sidebar .nav .nav-item.active>.nav-link .menu-icon {
  color: #FFFFFF;
}

.footer {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Grid gutters — style.css's Bootstrap grid uses a 20px .row/.col-* gutter
   (40px total between cards) and a 2.5rem .grid-margin row gap; both read
   oversized against the tighter modern spacing elsewhere. Tightened globally
   since .row/.col-*/.grid-margin are shared by all 139 views, not just the
   pilot pages.
   ========================================================================== */

.row {
  margin-right: -10px;
  margin-left: -10px;
}

[class^="col-"],
[class*=" col-"],
.col {
  padding-right: 10px;
  padding-left: 10px;
}

.grid-margin {
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.card .card-body {
  padding: 1.5rem;
}

.card-title {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  border-radius: var(--radius-sm);
}

.btn-gradient-primary,
.btn-gradient-primary:not([disabled]):not(.disabled):active,
.btn-gradient-primary:not([disabled]):not(.disabled).active,
.show>.btn-gradient-primary.dropdown-toggle {
  background: var(--color-primary-500);
}

.btn-gradient-primary:hover {
  background: var(--color-primary-600);
  opacity: 1;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 0.35em 0.75em;
}

.badge-success   { background: var(--color-success-bg); color: var(--color-success); }
.badge-danger    { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-warning   { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-info      { background: var(--color-info-bg);    color: var(--color-info); }
.badge-secondary { background: var(--color-gray-100);   color: var(--color-gray-600); }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.form-control:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* ==========================================================================
   Tables (Bootstrap Table)
   ========================================================================== */

.table thead th {
  background: var(--color-gray-50);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.table td, .table th {
  border-top: 1px solid var(--color-border);
}

.table-hover tbody tr:hover {
  background: var(--color-gray-50);
}

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-content {
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.modal-header, .modal-footer {
  border-color: var(--color-border);
}

/* ==========================================================================
   Dashboard stat tiles
   Used only by marketplace/dashboard.blade.php and mainsite/home.blade.php —
   verified no other view references .bg-gradient-*, .card-img-holder, or
   .page-title-icon.
   ========================================================================== */

.card.card-img-holder .card-img-absolute {
  display: none;
}

.card.card-img-holder.text-white {
  color: var(--color-text-primary) !important;
}

.card.bg-gradient-primary,
.card.bg-gradient-success,
.card.bg-gradient-danger,
.card.bg-gradient-warning,
.card.bg-gradient-info,
.card.bg-gradient-secondary {
  background: var(--color-bg-surface) !important;
  border-top: 3px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card.bg-gradient-primary:hover,
.card.bg-gradient-success:hover,
.card.bg-gradient-danger:hover,
.card.bg-gradient-warning:hover,
.card.bg-gradient-info:hover,
.card.bg-gradient-secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card.bg-gradient-primary   { border-top-color: var(--color-primary-500); }
.card.bg-gradient-success   { border-top-color: var(--color-success); }
.card.bg-gradient-danger    { border-top-color: var(--color-danger); }
.card.bg-gradient-warning   { border-top-color: var(--color-warning); }
.card.bg-gradient-info      { border-top-color: var(--color-info); }
.card.bg-gradient-secondary { border-top-color: var(--color-gray-400); }

/* Trim the KPI tiles down to a medium size — the template's default
   card-body padding + heading sizes read oversized for a small number. */
.card.card-img-holder .card-body {
  padding: 1.1rem 1.25rem;
}

.card.card-img-holder h4 {
  font-size: 0.8rem !important;
  margin-bottom: 0.35rem !important;
}

.card.card-img-holder h2 {
  font-size: 1.5rem !important;
  margin-bottom: 0 !important;
}

.card.card-img-holder p {
  font-size: 0.75rem;
  margin-bottom: 0 !important;
}

/* Trend badges (Today / This Week / This Month cards) — real
   current-vs-previous percentage, not decorative. */
.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

.trend-badge i {
  font-size: 0.65rem;
}

.trend-badge.trend-up {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.trend-badge.trend-down {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.trend-badge.trend-flat {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.trend-badge-sm {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.02rem 0.28rem;
  gap: 0.1rem;
}

.trend-badge-sm i {
  font-size: 0.45rem;
}

/* "View <page>" links on dashboard cards that have a full admin page behind them. */
.dashboard-view-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-500);
  white-space: nowrap;
  margin-top: 0.5rem;
}

.dashboard-view-link:hover {
  color: var(--color-primary-600);
  text-decoration: none;
}

.dashboard-view-link i {
  font-size: 0.85rem;
}

/* Top-Selling Products row icon — product's own icon_image, or a placeholder glyph. */
.dashboard-product-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin-right: 0.6rem;
  flex-shrink: 0;
}

.dashboard-product-icon-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
  font-size: 0.9rem;
}

/* Today/This Week/This Month cards — current period vs. prior period,
   side by side instead of one long inline string. */
.period-compare {
  display: flex;
  gap: 1rem;
}

.period-compare-col {
  flex: 1;
  min-width: 0;
}

.period-compare-col-prev {
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
  opacity: 0.7;
}

.period-compare-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

.period-compare-amount {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.period-compare-sub {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

/* Two side-by-side currency columns get cramped on narrow phones — stack instead. */
@media (max-width: 480px) {
  .period-compare {
    flex-direction: column;
    gap: 0.75rem;
  }

  .period-compare-col-prev {
    padding-left: 0;
    border-left: none;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
  }
}

/* TailAdmin-style KPI icon badge — pinned top-right, tinted box instead
   of a plain floated glyph or a colored left rail. */
.card.card-img-holder h4 i {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 1rem !important;
}

.card.bg-gradient-primary h4 i {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.card.bg-gradient-success h4 i {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.card.bg-gradient-danger h4 i {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.card.bg-gradient-warning h4 i {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.card.bg-gradient-info h4 i {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.card.bg-gradient-secondary h4 i {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
  border: none;
  border-radius: var(--radius-sm);
}

.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert-info    { background: var(--color-info-bg);    color: var(--color-info); }

/* ==========================================================================
   Nav tabs
   ========================================================================== */

.nav-tabs {
  border-bottom: 1px solid var(--color-border);
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  border-radius: 0;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: transparent;
  color: var(--color-text-primary);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border: none;
  border-bottom: 2px solid var(--color-primary-500);
  color: var(--color-primary-500);
  background: transparent;
}

/* ==========================================================================
   Dropdown menu
   ========================================================================== */

.dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--color-gray-50);
  color: var(--color-text-primary);
}

/* ==========================================================================
   List group
   ========================================================================== */

.list-group-item {
  border-color: var(--color-border);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--color-gray-50);
}

.list-group-item.active {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

/* ==========================================================================
   Select2
   ========================================================================== */

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.select2-dropdown {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--color-primary-500);
  color: #fff;
}

/* ==========================================================================
   Custom switches / checkboxes / radios
   ========================================================================== */

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

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

/* ==========================================================================
   Dark mode — components still hardcoding light-only hex in style.css /
   vendor CSS, not reachable via the token block above
   ========================================================================== */

:root[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .modal-content {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .fixed-table-toolbar .search-input,
:root[data-theme="dark"] .fixed-table-toolbar .form-control,
:root[data-theme="dark"] .fixed-table-pagination .page-link,
:root[data-theme="dark"] .fixed-table-pagination .dropdown-menu {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .fixed-table-pagination .page-item.disabled .page-link {
  background-color: var(--color-gray-50);
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .swal2-popup {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* .tab-content's border is hardcoded #ebedf2 in style.css — just needs a
   subtle dark-appropriate border, not a background change. */
:root[data-theme="dark"] .tab-content {
  border-color: var(--color-border);
}

/* .nav-tabs (the pill-row tab style used e.g. on SEO Settings) hardcodes a
   near-white bg + black text for inactive tabs and white bg for the active
   one in style.css — stayed a bright white bar against the dark page. */
:root[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .nav-tabs .nav-link {
  background: var(--color-gray-50);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .nav-tabs .nav-link.active,
:root[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border-color: var(--color-border) var(--color-border) var(--color-bg-surface);
}

/* .btn-secondary hardcodes a light beige-gray (#c3bdbd) bg + dark text in
   style.css — used by the Bootstrap Table refresh button and modal Cancel
   buttons, both stayed a light pill against the dark page. */
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-secondary:disabled {
  color: var(--color-text-primary);
  background-color: var(--color-gray-100);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-secondary.focus,
:root[data-theme="dark"] .btn-secondary.dropdown-toggle {
  color: var(--color-text-primary);
  background-color: var(--color-gray-200);
  border-color: var(--color-border);
}

/* Native form-control chrome (date-picker icon, spin buttons, etc.) follows the
   OS/browser dark rendering instead of drawing a light widget on a dark input. */
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* .navbar's own background is hardcoded in style.css (not tokenized there), same
   as the components above. */
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .navbar .navbar-brand-wrapper {
  background: var(--color-bg-surface);
}

/* .card's base background is hardcoded #fff in style.css; theme-modern.css's own
   .card rule (above) never set one, so every card — most visibly the one wrapping
   a Bootstrap Table on list pages — stayed a white island against the dark page. */
:root[data-theme="dark"] .card {
  background-color: var(--color-bg-surface);
}

/* style.css's `.card .card-title { color: #343a40; }` (two-class selector) beats
   this file's own plain `.card-title` rule on specificity alone, regardless of
   load order — every card title stayed dark-gray-on-dark except KPI tiles, which
   don't use .card-title at all (they get text-white from their gradient card). */
:root[data-theme="dark"] .card .card-title {
  color: var(--color-text-primary);
}

/* .sidebar's base background is hardcoded #ffffff in style.css. A `.sidebar-dark`
   ancestor class would flip it to a hardcoded dark color, but that's an unrelated
   pre-existing template skin toggle nothing in this app applies. */
:root[data-theme="dark"] .sidebar {
  background: var(--color-bg-surface);
}

/* Sidebar menu text/icons — --color-text-secondary reads too dim at this small
   font-size against the dark sidebar, so dark mode gets a brighter token here
   than the (correct, just-lower-contrast-in-this-spot) default. */
:root[data-theme="dark"] .sidebar .nav .nav-item .nav-link {
  color: var(--color-gray-700);
}

:root[data-theme="dark"] .sidebar .nav .nav-item .nav-link .menu-icon {
  color: var(--color-gray-500);
}

/* style.css's `.sidebar .nav:not(.sub-menu)>.nav-item:hover:not(.nav-category)
   :not(.nav-profile)>.nav-link { color: #29323d; }` is 8 class-level selectors —
   more specific than this file's own 4-selector hover rule (background only,
   above), so it won regardless of load order and turned hover text near-black.
   Repeating that exact selector with the :root[data-theme="dark"] ancestor
   prepended is a strict superset, guaranteeing this wins instead. */
:root[data-theme="dark"] .sidebar .nav:not(.sub-menu)>.nav-item:hover:not(.nav-category):not(.nav-profile)>.nav-link {
  color: var(--color-text-primary);
}

/* Bootstrap Table body text/striping — style.css hardcodes both to light-only
   values, unreadable/invisible once the .card behind them above goes dark. */
:root[data-theme="dark"] .table {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-gray-50);
}

/* style.css's `.table-hover tbody tr:hover { color: #212529; background-color:
   #f2edf3; }` hardcodes near-black text — beats this file's plain `.table` color
   rule on specificity, so hovering any Bootstrap Table row turned its text
   invisible against the (also hardcoded-light) hover background. */
:root[data-theme="dark"] .table-hover tbody tr:hover {
  color: var(--color-text-primary);
  background-color: var(--color-gray-50);
}

/* Every cell/row/outer border on .table and .table-bordered is hardcoded #ebedf2
   (light lavender-gray) in style.css — stayed a harsh light grid against the
   now-dark .card/.table above, reading as an unstyled legacy table. */
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table tbody + tbody,
:root[data-theme="dark"] .table-bordered,
:root[data-theme="dark"] .table-bordered th,
:root[data-theme="dark"] .table-bordered td {
  border-color: var(--color-border);
}

/* Plain form inputs/selects/textareas — style.css hardcodes background:#fff,
   color:#495057 on .form-control, so every modal/create/edit form field stayed a
   white box inside an otherwise-dark modal. */
:root[data-theme="dark"] .form-control {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .form-control:focus {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* Select2 (its own vendor CSS, not this app's style.css) draws a white selection
   box and a white floating results dropdown — both need their own override since
   the dropdown is appended to <body>, outside whatever card/modal it opened from. */
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .select2-dropdown {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .select2-container--default .select2-results__option {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--color-primary-700);
  color: #fff;
}

/* Theme toggle button — show only the icon for the *other* theme (the one
   clicking would switch to), matching the common sun/moon toggle convention. */
#theme-toggle-btn {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
}

#theme-toggle-btn .theme-toggle-icon-dark {
  display: none;
}

:root[data-theme="dark"] #theme-toggle-btn .theme-toggle-icon-light {
  display: none;
}

:root[data-theme="dark"] #theme-toggle-btn .theme-toggle-icon-dark {
  display: inline-block;
}

/* Report trend charts (Product Orders / Installation Orders / Product Sales detail) —
   day granularity can put 30+ bars on screen. Rather than squeezing bars down to fit,
   custom.js gives the inner chart div a min-width based on bar count so bars keep a
   readable, fixed width; this wrapper scrolls horizontally once that exceeds the
   viewport instead. */
.report-chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}