/* ---------------------------------------------------------------------------
   SELLER PANEL SKIN

   A seller admin panel, not a marketing page: data-dense, task-repetitive,
   used all day by people who already know where things are. The design targets
   are therefore scanning speed and hit accuracy, not impact.

   Dials this file is built to:
     variance  3   predictable grid, no asymmetry -- a 200-row order list is
                   not the place for offset layouts
     motion    3   hover and press feedback only, no scroll or entrance
                   animation, nothing perpetual
     density   7   tight rhythm, hairlines instead of boxes, tabular numerals

   Mode is REDESIGN-PRESERVE. The accent and the typeface are extracted from
   the live storefront, not chosen here. Routes, markup, form field names, nav
   labels and analytics hooks are untouched -- this file only restyles what
   already exists.

   BRAND TOKENS (extracted, do not invent replacements)
     accent  #0e7dd1   front-end/modern declares this as --primary-color
     font    Manrope   front-end/modern/_header.php loads this same family

   WHY THE OVERRIDES GO THROUGH TABLER'S OWN VARIABLES
   Tabler 1.x sets --tblr-primary: #066fd1 (tabler.css:47) and builds each
   component from the Bootstrap 5 variable API -- .btn-primary carries its own
   --tblr-btn-bg (tabler.css:4007+), .badge its own --tblr-badge-*, and so on.
   Setting background-color alone recolours the button but leaves badges,
   pills, switches, active rows, spinners and focus rings blue. Every block
   below repoints the variable the component reads rather than painting over
   the component.

   Loaded last in include-css.php so it wins without !important on every rule.

   TO RETHEME: change --sm-accent and the neutral ramp. Everything else follows.
--------------------------------------------------------------------------- */

:root {
  /* ---- brand accent ----------------------------------------------------
     One accent for the whole panel. It is deliberately the only saturated
     colour in the file; semantic red/amber/green survive on alerts and status
     badges, where the colour carries meaning rather than decoration. */
  --sm-accent: #0e7dd1;
  --sm-accent-rgb: 14, 125, 209;
  --sm-accent-dark: #0c6bb4;
  --sm-accent-darker: #0a5a97;
  --sm-accent-soft: rgba(14, 125, 209, .1);

  /* ---- neutral ramp ----------------------------------------------------
     One cool-slate family, top to bottom. The previous pass mixed six ad-hoc
     greys (#55606e, #61708a, #8a94a6, #eceef2, #f1f3f6, #e6e9ef) drawn from
     different hue families, which is what made the panel read as patched
     together even after the accent was corrected. Every grey below now sits
     on the same hue, so surfaces, borders and text relate to each other. */
  --sm-ink: #0f172a;
  --sm-ink-strong: #1e293b;
  --sm-ink-body: #334155;
  --sm-ink-muted: #64748b;
  --sm-ink-faint: #94a3b8;

  --sm-line: #e2e8f0;
  --sm-line-soft: #eef2f7;
  --sm-surface: #ffffff;
  --sm-ground: #f6f8fb;
  --sm-ground-alt: #f1f5f9;

  /* ---- shape and depth -------------------------------------------------
     Radius scale is deliberate rather than uniform: containers softer than
     the controls inside them, so nesting reads correctly. */
  --sm-radius: 10px;
  --sm-radius-sm: 7px;
  --sm-radius-xs: 5px;

  /* Shadows carry the slate hue instead of neutral black. A pure-black shadow
     over a cool ground reads as dirt. At density 7 they are used sparingly --
     only on things that genuinely float (menus, modals, popovers). */
  --sm-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --sm-shadow-pop: 0 8px 24px -6px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);

  --sm-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* ---- Tabler token repointing ---------------------------------------- */
  --tblr-font-sans-serif: var(--sm-font);
  --tblr-body-font-family: var(--sm-font);

  --tblr-primary: var(--sm-accent);
  --tblr-primary-rgb: var(--sm-accent-rgb);
  --tblr-primary-fg: #fff;
  --tblr-primary-lt: var(--sm-accent-soft);
  --tblr-blue: var(--sm-accent);
  --tblr-blue-rgb: var(--sm-accent-rgb);
  --tblr-blue-lt: var(--sm-accent-soft);

  --tblr-link-color: var(--sm-accent);
  --tblr-link-color-rgb: var(--sm-accent-rgb);
  --tblr-link-hover-color: var(--sm-accent-dark);

  --tblr-border-color: var(--sm-line);
  --tblr-border-radius: var(--sm-radius-sm);
  --tblr-border-radius-sm: var(--sm-radius-xs);
  --tblr-border-radius-lg: var(--sm-radius);

  --tblr-focus-ring-color: rgba(var(--sm-accent-rgb), .25);
  --tblr-active-bg: var(--sm-accent-soft);

  --tblr-body-bg: var(--sm-ground);
  --tblr-body-color: var(--sm-ink-body);
  --tblr-secondary-color: var(--sm-ink-muted);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sm-font);
  background-color: var(--sm-ground);
  color: var(--sm-ink-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPOGRAPHY
   Manrope has a taller x-height and rounder counters than Tabler's default
   stack, so it takes slightly tighter tracking at display sizes and a touch
   more weight at small sizes to hold its colour on screen.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sm-font);
  color: var(--sm-ink);
  font-weight: 700;
  letter-spacing: -.015em;
}

.page-title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--sm-ink);
  line-height: 1.25;
}

/* Small labels above a page title. Sentence case, not caps -- the only
   uppercase in this file is the table header, where it separates the header
   band from the data below it. */
.page-pretitle {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sm-ink-faint);
}

.text-muted,
.text-secondary {
  color: var(--sm-ink-muted) !important;
}

/* Numbers must not jitter between rows. Proportional figures make a column of
   prices or order counts impossible to compare at a glance, which is most of
   what this panel is for. */
.table,
.card-title .h1,
.h1.mb-3,
.datagrid-content,
input[type="number"],
.form-control[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   FOCUS
   One ring, one colour, on every focusable thing. :focus-visible means a mouse
   click does not paint the ring but a Tab key does.
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--sm-accent);
  outline-offset: 2px;
  border-radius: var(--sm-radius-xs);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--sm-accent-rgb), .3);
}

/* Keyboard users need a way past 30 sidebar links to reach the page. Hidden
   until focused. The target lives on .page-wrapper in template.php. */
.skip-to-content {
  position: absolute;
  left: .75rem;
  top: -100px;
  z-index: 1080;
  padding: .55rem 1rem;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-accent);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  transition: top .15s ease;
}

.skip-to-content:focus {
  top: .75rem;
  color: #fff;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  --tblr-btn-border-radius: var(--sm-radius-sm);
  --tblr-btn-font-weight: 700;
  --tblr-btn-line-height: 1.6;
  letter-spacing: -.005em;
  transition: background-color .15s ease, border-color .15s ease,
    color .15s ease, box-shadow .15s ease, transform .1s ease;
}

/* The full variable set, so hover, focus, active and disabled all agree.
   Leaving any one unset is what produces a button that reverts to Tabler blue
   the moment it is hovered. */
.btn-primary,
.btn-blue {
  --tblr-btn-color: #fff;
  --tblr-btn-bg: var(--sm-accent);
  --tblr-btn-border-color: var(--sm-accent);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--sm-accent-dark);
  --tblr-btn-hover-border-color: var(--sm-accent-dark);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--sm-accent-darker);
  --tblr-btn-active-border-color: var(--sm-accent-darker);
  --tblr-btn-disabled-color: #fff;
  --tblr-btn-disabled-bg: var(--sm-accent);
  --tblr-btn-disabled-border-color: var(--sm-accent);
  --tblr-btn-focus-shadow-rgb: var(--sm-accent-rgb);
}

.btn-outline-primary {
  --tblr-btn-color: var(--sm-accent-dark);
  --tblr-btn-border-color: var(--sm-accent);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--sm-accent);
  --tblr-btn-hover-border-color: var(--sm-accent);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--sm-accent-dark);
  --tblr-btn-active-border-color: var(--sm-accent-dark);
  --tblr-btn-disabled-color: var(--sm-accent);
  --tblr-btn-disabled-border-color: var(--sm-accent);
  --tblr-btn-focus-shadow-rgb: var(--sm-accent-rgb);
}

.btn-ghost-primary {
  --tblr-btn-color: var(--sm-accent-dark);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--sm-accent);
  --tblr-btn-active-bg: var(--sm-accent-dark);
}

/* The panel labels its confirm actions .btn-success in several forms. Two
   different "go" colours on one screen is what made the palette look
   accidental, so the confirm button joins the accent. Semantic green stays on
   alerts, badges and status dots, where green means something. */
.btn-success {
  --tblr-btn-color: #fff;
  --tblr-btn-bg: var(--sm-accent);
  --tblr-btn-border-color: var(--sm-accent);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--sm-accent-dark);
  --tblr-btn-hover-border-color: var(--sm-accent-dark);
  --tblr-btn-active-bg: var(--sm-accent-darker);
  --tblr-btn-active-border-color: var(--sm-accent-darker);
  --tblr-btn-focus-shadow-rgb: var(--sm-accent-rgb);
}

/* Neutral buttons pick up the slate ramp instead of Tabler's warmer grey. */
.btn-secondary,
.btn-outline-secondary {
  --tblr-btn-color: var(--sm-ink-body);
  --tblr-btn-border-color: var(--sm-line);
  --tblr-btn-hover-color: var(--sm-ink);
  --tblr-btn-hover-bg: var(--sm-ground-alt);
  --tblr-btn-hover-border-color: #cbd5e1;
}

/* Physical press feedback. 1px is enough to feel; more reads as a bug. */
.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn:disabled,
.btn.disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ==========================================================================
   COLOUR UTILITIES
   ========================================================================== */

.text-primary,
.text-blue {
  color: var(--sm-accent) !important;
}

.bg-primary,
.bg-blue {
  background-color: var(--sm-accent) !important;
  color: #fff !important;
}

.bg-primary-lt,
.bg-blue-lt {
  background-color: var(--sm-accent-soft) !important;
  color: var(--sm-accent-dark) !important;
}

.border-primary {
  border-color: var(--sm-accent) !important;
}

.link-primary {
  color: var(--sm-accent) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: var(--sm-accent-dark) !important;
}

.status-primary,
.status-blue {
  color: var(--sm-accent);
}

.status-dot-animated.status-primary,
.badge.bg-primary,
.ribbon.bg-primary {
  background-color: var(--sm-accent) !important;
}

.progress-bar {
  background-color: var(--sm-accent);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--sm-accent) !important;
}

/* ==========================================================================
   SURFACES
   At density 7 the generic card (border + shadow + white fill) becomes visual
   noise: every page turns into a stack of floating boxes with nothing
   distinguishing the important one. Cards here are flattened to a hairline and
   a fill. Elevation is reserved for things that genuinely float above the
   page -- menus, modals, popovers -- so a shadow once again means "this is on
   top of something".
   ========================================================================== */

.card {
  --tblr-card-border-radius: var(--sm-radius);
  --tblr-card-border-color: var(--sm-line);
  --tblr-card-bg: var(--sm-surface);
  border-radius: var(--sm-radius);
  border: 1px solid var(--sm-line);
  box-shadow: var(--sm-shadow);
}

/* Tables and lists sitting flush at the top of a card would otherwise square
   off the corners. */
.card > .table:first-child,
.card > .table-responsive:first-child > .table,
.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: var(--sm-radius);
  border-top-right-radius: var(--sm-radius);
}

.card-header {
  border-top-left-radius: var(--sm-radius);
  border-top-right-radius: var(--sm-radius);
  border-bottom-color: var(--sm-line-soft);
  background: transparent;
  min-height: auto;
  padding: .9rem 1.15rem;
}

.card-title {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sm-ink);
  margin: 0;
}

.card-footer {
  border-bottom-left-radius: var(--sm-radius);
  border-bottom-right-radius: var(--sm-radius);
  border-top-color: var(--sm-line-soft);
  background: transparent;
}

/* Page header sits on the page ground rather than in its own box, so the eye
   goes to the content instead of to a title chrome. */
.page-header {
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   FORMS
   Label above input, error below it, helper text between. Placeholder is never
   the label -- a half-filled form with no visible labels is unrecoverable.
   ========================================================================== */

.form-control,
.form-select {
  border-radius: var(--sm-radius-sm);
  border-color: var(--sm-line);
  color: var(--sm-ink-body);
  transition: border-color .13s ease, box-shadow .13s ease;
}

.form-control::placeholder {
  color: var(--sm-ink-faint);
  opacity: 1;
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: #cbd5e1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sm-accent);
  box-shadow: 0 0 0 3px rgba(var(--sm-accent-rgb), .15);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--sm-ground-alt);
  color: var(--sm-ink-muted);
}

.form-label,
.col-form-label {
  font-weight: 600;
  font-size: .8125rem;
  color: var(--sm-ink-strong);
  margin-bottom: .35rem;
}

.form-hint,
.form-text {
  color: var(--sm-ink-faint);
  font-size: .78125rem;
}

/* Validation states. Bootstrap ships these but Tabler's red is warmer than the
   slate ramp, so they are pinned here to stay in the same family. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
  border-color: #dc2626;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

.invalid-feedback,
.form-control.is-invalid ~ .error,
.error {
  color: #dc2626;
  font-size: .78125rem;
  font-weight: 500;
}

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

.form-check-input:focus {
  border-color: var(--sm-accent);
  box-shadow: 0 0 0 3px rgba(var(--sm-accent-rgb), .2);
}

/* The switch knob is a data URI carrying its own colour, so the focus variant
   needs its own rule or the switch flashes Tabler blue while being dragged. */
.form-switch .form-check-input:focus {
  --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230e7dd1'/%3e%3c/svg%3e");
}

.input-group-text {
  border-radius: var(--sm-radius-sm);
  border-color: var(--sm-line);
  background-color: var(--sm-ground-alt);
  color: var(--sm-ink-muted);
}

/* Tom Select is used across the panel and ships its own blue. */
.ts-control {
  border-radius: var(--sm-radius-sm);
  border-color: var(--sm-line);
}

.ts-control:focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--sm-accent);
  box-shadow: 0 0 0 3px rgba(var(--sm-accent-rgb), .15);
}

.ts-dropdown {
  border-radius: var(--sm-radius-sm);
  border-color: var(--sm-line);
  box-shadow: var(--sm-shadow-pop);
}

.ts-dropdown .active {
  background-color: var(--sm-accent-soft);
  color: var(--sm-accent-dark);
}

/* ==========================================================================
   TABLES
   The core surface of this panel. Header gets a ground of its own so it reads
   as a header band and can go sticky; rows get a tight rhythm and a hover
   tint; numeric columns get tabular figures.
   ========================================================================== */

.table {
  --tblr-table-border-color: var(--sm-line-soft);
  --tblr-table-color: var(--sm-ink-body);
  margin-bottom: 0;
}

/* Uppercase is used here and nowhere else in this file. On a data table the
   caps band separates header from data at a glance, which is worth it; applied
   to every subheading in the panel it would just be shouting. */
.table thead th {
  position: relative;
  background-color: var(--sm-ground-alt);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sm-ink-muted);
  white-space: nowrap;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--sm-line);
  vertical-align: middle;
}

.table tbody td {
  vertical-align: middle;
  padding: .6rem .75rem;
  border-bottom-color: var(--sm-line-soft);
  color: var(--sm-ink-body);
}

/* The card border already closes the table. A final row border doubles it. */
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table-hover tbody tr {
  transition: background-color .1s ease;
}

.table-hover tbody tr:hover {
  background-color: rgba(var(--sm-accent-rgb), .045);
}

.table-primary {
  --tblr-table-bg: var(--sm-accent-soft);
  --tblr-table-color: var(--sm-accent-dark);
}

/* Right-aligned columns are money and counts. Tabular figures make them
   comparable down the column. */
.table td.text-end,
.table th.text-end {
  font-variant-numeric: tabular-nums;
}

/* Row action buttons are usually a cramped cluster of icons. */
.table td .btn-list,
.table td .btn-group {
  display: inline-flex;
  gap: .25rem;
  flex-wrap: nowrap;
}

.table td .btn-sm,
.table td .btn-icon {
  --tblr-btn-padding-y: .25rem;
  --tblr-btn-padding-x: .5rem;
}

/* Sticky header for long lists, only inside a scroll container so it cannot
   detach on a plain page-flow table. */
.table-responsive .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.table .badge {
  font-size: .6875rem;
  font-weight: 600;
  padding: .3em .6em;
  letter-spacing: .01em;
}

/* ==========================================================================
   EMPTY, LOADING AND ERROR STATES
   The panel previously rendered a blank area for all three, which makes an
   empty result indistinguishable from a failed request.
   ========================================================================== */

.table tbody tr.no-records-found td,
.table tbody td.dataTables_empty,
.table tbody tr.empty-row td {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--sm-ink-faint);
  font-size: .875rem;
  font-weight: 500;
}

.empty {
  padding: 3rem 1.5rem;
}

.empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sm-ink);
}

.empty-subtitle {
  color: var(--sm-ink-muted);
  font-size: .875rem;
}

/* Skeleton loader. Matches the shape of what is arriving rather than spinning
   in the middle of nothing, so the page does not jump when data lands.
   Markup: <span class="sm-skeleton" style="width:8rem"></span> */
.sm-skeleton {
  display: block;
  height: 1em;
  border-radius: var(--sm-radius-xs);
  background: linear-gradient(90deg,
      var(--sm-ground-alt) 25%,
      #e8edf4 37%,
      var(--sm-ground-alt) 63%);
  background-size: 400% 100%;
  animation: sm-skeleton-shift 1.4s ease infinite;
}

.sm-skeleton--text {
  height: .8em;
  margin: .25rem 0;
}

.sm-skeleton--block {
  height: 100%;
  min-height: 4rem;
}

@keyframes sm-skeleton-shift {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.alert {
  border-radius: var(--sm-radius-sm);
  font-size: .875rem;
}

.alert-primary {
  --tblr-alert-color: var(--sm-accent-darker);
  --tblr-alert-bg: var(--sm-accent-soft);
  --tblr-alert-border-color: rgba(var(--sm-accent-rgb), .3);
}

/* ==========================================================================
   NAV, TABS, PAGINATION, BADGES
   ========================================================================== */

.nav-pills {
  --tblr-nav-pills-link-active-bg: var(--sm-accent);
  --tblr-nav-pills-border-radius: var(--sm-radius-sm);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--sm-accent);
  color: #fff;
  border-radius: var(--sm-radius-sm);
}

.nav-tabs .nav-link {
  font-weight: 600;
  color: var(--sm-ink-muted);
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--sm-accent);
  color: var(--sm-accent-dark);
}

.badge {
  border-radius: var(--sm-radius-xs);
  font-weight: 600;
}

.page-item.active .page-link {
  background-color: var(--sm-accent);
  border-color: var(--sm-accent);
  color: #fff;
}

.page-link {
  border-radius: var(--sm-radius-xs);
  color: var(--sm-accent-dark);
}

.page-link:hover {
  color: var(--sm-accent-darker);
  background-color: var(--sm-accent-soft);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--sm-accent);
  color: #fff;
}

.list-group-item.active {
  background-color: var(--sm-accent);
  border-color: var(--sm-accent);
  color: #fff;
}

/* ==========================================================================
   SIDEBAR
   The old .navbar-vertical rail was replaced by the icon rail + flyout. Its
   styles live in assets/seller/css/sidebar-rail.css, which is loaded on every
   seller page. Nothing is left here: keeping dead .navbar-vertical rules would
   still have applied to the topbar, which also carries .navbar.
   ========================================================================== */

/* ==========================================================================
   FLOATING SURFACES
   The only things in the panel that get real elevation.
   ========================================================================== */

.dropdown-menu {
  border-radius: var(--sm-radius);
  border-color: var(--sm-line);
  box-shadow: var(--sm-shadow-pop);
  padding: .3rem;
}

.dropdown-item {
  border-radius: var(--sm-radius-xs);
  padding: .45rem .7rem;
  font-size: .875rem;
}

.modal-content {
  border-radius: var(--sm-radius);
  border-color: var(--sm-line);
  box-shadow: var(--sm-shadow-pop);
}

.modal-header {
  border-bottom-color: var(--sm-line-soft);
}

.modal-footer {
  border-top-color: var(--sm-line-soft);
}

.popover,
.tooltip-inner {
  border-radius: var(--sm-radius-sm);
}

.progress {
  border-radius: 999px;
  background-color: var(--sm-ground-alt);
}

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

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--sm-accent);
  text-decoration: none;
}

a:hover {
  color: var(--sm-accent-dark);
}

/* Links that are really buttons, nav items or menu rows must keep their own
   colour, or the rule above repaints half the chrome. */
a.btn,
.btn a,
.nav-link,
.navbar a,
.dropdown-item,
.page-link,
.breadcrumb a,
.list-group-item,
.card-header a,
.table a.btn {
  color: inherit;
}

/* ==========================================================================
   RESPONSIVE
   The panel is a desktop layout that mobile inherited, so these rules address
   the two things that actually break on a phone: content wider than the
   viewport, and controls too small or crowded to tap.
   ========================================================================== */

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------ tablet down */

@media (max-width: 991.98px) {

  .page-header .btn-list {
    flex-wrap: wrap;
    gap: .5rem;
  }

  /* Two-column form rows collapse to stacked, so the label no longer keeps a
     third of the width to itself on a narrow screen. */
  .mb-3.row > .col-form-label,
  .mb-3.row > label.col-3 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-bottom: .25rem;
  }

  .modal-dialog {
    margin: .75rem;
  }
}

/* ------------------------------------------------------------- phones down */

@media (max-width: 767.98px) {

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

  .card-body {
    padding: 1rem;
  }

  .card-header {
    padding: .75rem 1rem;
  }

  .page-title {
    font-size: 1.15rem;
  }

  /* Toolbars of small buttons wrap instead of running off the edge. */
  .btn-list,
  .card-actions,
  .btn-group-sm {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }

  /* Comfortable tap targets. 38px is the smallest that stays reliably hittable
     without making a dense action row taller than the content it acts on. */
  .btn,
  .form-control,
  .form-select {
    min-height: 38px;
  }

  .btn-sm {
    min-height: 34px;
  }

  /* Wide tables scroll within the page rather than widening it. Pages that
     already use .table-responsive keep their own wrapper; this covers those
     that do not. */
  .card > .table,
  .card-body > .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .modal-dialog {
    margin: .5rem;
  }

  .dropdown-menu {
    max-width: calc(100vw - 1.5rem);
  }
}

/* ------------------------------------------------------------ small phones */

@media (max-width: 575.98px) {

  /* A single primary action reads better full width than floated right on a
     narrow screen. Scoped to form footers so it cannot stretch toolbar buttons
     or table row actions. */
  .form-footer .btn,
  .card-footer > .btn:only-child,
  .modal-footer .btn {
    width: 100%;
  }

  .modal-footer {
    flex-direction: column;
    gap: .5rem;
  }

  .modal-footer > * {
    margin: 0;
  }

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

  .table thead th,
  .table tbody td {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

/* ------------------------------------------------------------ large screens */

@media (min-width: 1400px) {

  /* Stops forms and detail pages stretching a text field across an ultrawide
     monitor, which is the desktop half of "supports PC". */
  .container-xl,
  .container-fluid {
    max-width: 1440px;
  }
}

/* ==========================================================================
   REDUCED MOTION
   Everything above is a transition or a press, so under reduce there is
   nothing left to degrade gracefully -- it all just stops.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .btn,
  .card,
  .dropdown-menu,
  .form-control,
  .form-select,
  .table-hover tbody tr {
    transition: none;
  }

  .btn:active {
    transform: none;
  }

  .sm-skeleton {
    animation: none;
  }
}

/* ==========================================================================
   DARK MODE
   Tabler flips [data-bs-theme="dark"] on the root. The ramp inverts; the
   accent does not, so the brand stays recognisable in both modes.
   ========================================================================== */

[data-bs-theme="dark"] {
  --sm-ink: #f1f5f9;
  --sm-ink-strong: #e2e8f0;
  --sm-ink-body: #cbd5e1;
  --sm-ink-muted: #94a3b8;
  --sm-ink-faint: #64748b;

  --sm-line: #2b3446;
  --sm-line-soft: #232b3a;
  --sm-surface: #151d2b;
  --sm-ground: #0d141f;
  --sm-ground-alt: #1b2331;

  --sm-accent-soft: rgba(14, 125, 209, .18);
  --sm-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --sm-shadow-pop: 0 8px 24px -6px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
  background-color: var(--sm-ground-alt);
}

[data-bs-theme="dark"] .sm-skeleton {
  background: linear-gradient(90deg,
      var(--sm-ground-alt) 25%,
      #26314a 37%,
      var(--sm-ground-alt) 63%);
  background-size: 400% 100%;
}

/* ==========================================================================
   PRINT
   Sellers print invoices and picking lists off these pages.
   ========================================================================== */

@media print {

  .navbar,
  .btn-list,
  .page-header .btn,
  .skip-to-content,
  .sr-flow__docs {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .table thead th {
    background-color: #f1f1f1 !important;
    color: #000 !important;
  }
}