/* =====================================================================
   OMS theme
   Built for speed of use: big targets, one obvious action per screen,
   colour used only where it carries meaning.
   ===================================================================== */

:root {
  --oms-bg:        #f1f5f9;
  --oms-surface:   #ffffff;
  --oms-border:    #e2e8f0;
  --oms-text:      #0f172a;
  --oms-muted:     #64748b;

  /* Accent — overridden per user by Theme::styleBlock(). */
  --oms-primary:   #4f46e5;
  --oms-primary-d: #4338ca;
  --oms-primary-l: #eef2ff;
  --oms-primary-s: #e0e7ff;
  --oms-primary-b: #c7d2fe;
  --oms-grad-1:    #4f46e5;
  --oms-grad-2:    #7c3aed;
  --oms-grad-3:    #1e1b4b;

  --oms-sidebar:   #111827;
  --oms-sidebar-2: #1f2937;

  --oms-radius:    12px;
  --oms-shadow:    0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.18);

  --sidebar-w:     248px;
  --topbar-h:      62px;
}

* { -webkit-font-smoothing: antialiased; }

body {
  background: var(--oms-bg);
  color: var(--oms-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14.5px;
}

a { text-decoration: none; }

/* ---------------------------------------------------------------- layout */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--oms-sidebar);
  color: #cbd5e1;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease;
}

.sidebar-brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex: 0 0 auto;
}
.sidebar-brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  background-color: var(--oms-primary);
  display: grid; place-items: center;
  font-size: 17px; color: #fff;
}

.sidebar-nav { padding: 12px 10px 24px; overflow-y: auto; flex: 1 1 auto; }
.sidebar-nav .nav-section {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: #64748b; font-weight: 700; padding: 16px 10px 6px;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: 9px; color: #cbd5e1; font-weight: 500;
  transition: background .12s, color .12s;
}
.sidebar-nav a i { font-size: 16px; width: 19px; text-align: center; opacity: .85; }
.sidebar-nav a:hover  { background: var(--oms-sidebar-2); color: #fff; }
.sidebar-nav a.active { background-color: var(--oms-primary); color: #fff; }
.sidebar-nav a.active i { opacity: 1; }
.sidebar-nav a .badge { margin-left: auto; font-size: 10.5px; }

.main {
  flex: 1 1 auto;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  background: var(--oms-surface);
  border-bottom: 1px solid var(--oms-border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 1030;
}
.topbar .page-title { font-weight: 700; font-size: 17px; margin: 0; letter-spacing: -.01em; }

.content { padding: 22px 20px 56px; flex: 1 1 auto; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; box-shadow: 0 0 0 100vw rgba(15,23,42,.45); }
  .main { margin-left: 0; }
  .content { padding: 16px 14px 48px; }
}

/* ---------------------------------------------------------------- cards */
.card {
  border: 1px solid var(--oms-border);
  border-radius: var(--oms-radius);
  box-shadow: var(--oms-shadow);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--oms-border);
  padding: 14px 18px;
  font-weight: 650;
  display: flex; align-items: center; gap: 10px;
}
.card-header .bi { color: var(--oms-muted); }
.card-body { padding: 18px; }

/* ---------------------------------------------------------------- stats */
.stat-card {
  background: var(--oms-surface);
  border: 1px solid var(--oms-border);
  border-radius: var(--oms-radius);
  padding: 16px 18px;
  box-shadow: var(--oms-shadow);
  display: flex; align-items: center; gap: 14px;
  height: 100%;
  transition: transform .12s, box-shadow .12s;
}
a.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px -6px rgba(15,23,42,.22); }
.stat-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; font-size: 20px; flex: 0 0 auto;
}
.stat-value { font-size: 25px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.stat-label { font-size: 12.5px; color: var(--oms-muted); font-weight: 500; }

/* Ten tints, so no panel of cards has to use one twice. The hues are spread
   deliberately: 0 red, 40 amber, 90 lime, 145 green, 180 teal, 215 blue,
   245 indigo, 280 purple, 320 pink, plus neutral slate. Adding a colour
   between two of those would read as a shade of one of them rather than as
   a card of its own, which is the whole point of having them. */
.tint-indigo  { background-color: var(--oms-primary-l); color: var(--oms-primary); }
.tint-green   { background: #dcfce7; color: #16a34a; }
.tint-amber   { background: #fef3c7; color: #d97706; }
.tint-red     { background: #fee2e2; color: #dc2626; }
.tint-blue    { background: #dbeafe; color: #2563eb; }
.tint-purple  { background: #f3e8ff; color: #9333ea; }
.tint-slate   { background: #f1f5f9; color: #475569; }
.tint-teal    { background: #ccfbf1; color: #0d9488; }
.tint-lime    { background: #ecfccb; color: #4d7c0f; }
.tint-pink    { background: #fce7f3; color: #db2777; }

/* ---------------------------------------------------------------- status badges */
.badge-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap;
}
.badge-secondary { background:#f1f5f9; color:#475569; }
.badge-info      { background:#e0f2fe; color:#0369a1; }
.badge-primary   { background-color:var(--oms-primary-s); color:var(--oms-primary-d); }
.badge-warning   { background:#fef3c7; color:#b45309; }
.badge-purple    { background:#f3e8ff; color:#7e22ce; }
.badge-indigo    { background-color:var(--oms-primary-s); color:var(--oms-primary-d); }
.badge-success   { background:#dcfce7; color:#15803d; }
.badge-danger    { background:#fee2e2; color:#b91c1c; }
.badge-dark      { background:#e2e8f0; color:#1e293b; }

/* ---------------------------------------------------------------- due dates */
.due-overdue { color:#b91c1c; font-weight:650; }
.due-today   { color:#c2410c; font-weight:650; }
.due-soon    { color:#b45309; font-weight:600; }
.due-ok      { color:var(--oms-muted); }

tr.row-overdue > td { background: #fef2f2 !important; }
tr.row-today   > td { background: #fffbeb !important; }

/* ---------------------------------------------------------------- tables */
.table-wrap {
  background: var(--oms-surface);
  border: 1px solid var(--oms-border);
  border-radius: var(--oms-radius);
  box-shadow: var(--oms-shadow);
  overflow: hidden;
}
.table-wrap .table { margin: 0; }
.table > :not(caption) > * > * { padding: 11px 14px; }
.table thead th {
  background: #f8fafc;
  border-bottom: 1px solid var(--oms-border);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--oms-muted); font-weight: 700; white-space: nowrap;
}
.table tbody tr:hover > td { background: #f8fafc; }
.table td { vertical-align: middle; border-color: #f1f5f9; }
.table-scroll { overflow-x: auto; }

.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.order-no { font-weight: 700; color: var(--oms-primary); }
.order-no:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- forms */
.form-label { font-weight: 600; font-size: 13px; margin-bottom: 5px; color: #334155; }
.form-control, .form-select {
  border-color: #cbd5e1; border-radius: 9px; padding: 9px 12px; font-size: 14.5px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--oms-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.13);
}
.form-control-lg, .form-select-lg { font-size: 16px; padding: 11px 14px; }
.input-group-text { background: #f8fafc; border-color: #cbd5e1; border-radius: 9px; color: var(--oms-muted); }
.form-text { font-size: 12px; }
.required::after { content: " *"; color: #dc2626; font-weight: 700; }

fieldset.form-section { border: 0; margin-bottom: 26px; }
fieldset.form-section > legend {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--oms-primary); font-weight: 750; float: none; width: auto;
  padding: 0 0 8px; margin-bottom: 14px; border-bottom: 2px solid var(--oms-primary-l);
}

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: 9px; font-weight: 600; padding: 8px 15px; }
.btn-lg { padding: 11px 22px; font-size: 15.5px; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
.btn-primary {
  --bs-btn-bg:                   var(--oms-primary);
  --bs-btn-border-color:         var(--oms-primary);
  --bs-btn-hover-bg:             var(--oms-primary-d);
  --bs-btn-hover-border-color:   var(--oms-primary-d);
  --bs-btn-active-bg:            var(--oms-primary-d);
  --bs-btn-active-border-color:  var(--oms-primary-d);
  --bs-btn-disabled-bg:          var(--oms-primary);
  --bs-btn-disabled-border-color: var(--oms-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}
.btn-soft {
  background-color: var(--oms-primary-l);
  color: var(--oms-primary-d);
  border: 1px solid var(--oms-primary-b);
}
.btn-soft:hover { background-color: var(--oms-primary-s); color: var(--oms-primary-d); }
.btn-icon { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- due order cards */
.due-card {
  background: var(--oms-surface);
  border: 1px solid var(--oms-border);
  border-left: 4px solid var(--oms-border);
  border-radius: var(--oms-radius);
  padding: 14px 16px;
  box-shadow: var(--oms-shadow);
  height: 100%;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .12s, box-shadow .12s;
}
.due-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -8px rgba(15,23,42,.24); }
.due-card.is-overdue { border-left-color: #dc2626; }
.due-card.is-today   { border-left-color: #f59e0b; }
.due-card.is-soon    { border-left-color: #3b82f6; }
.due-card.is-ok      { border-left-color: #94a3b8; }
.due-card .meta { font-size: 12.5px; color: var(--oms-muted); }

.designer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f1f5f9; border-radius: 99px; padding: 3px 10px 3px 3px;
  font-size: 12px; font-weight: 600; color: #334155;
}
.designer-chip .dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 9.5px; font-weight: 700;
}

/* A designer toggle with a charge box under it. The box is CSS-revealed only
   while the toggle is ticked -- no page script, so it works the same on the
   order form and on the order page, and survives a live-fragment swap. */
.designer-pick { display: inline-flex; flex-direction: column; gap: 4px; }
.designer-pick .designer-charge { display: none; max-width: 150px; }
.designer-pick .btn-check:checked ~ .designer-charge { display: flex; }

/* ---------------------------------------------------------------- misc */
.empty-state { text-align: center; padding: 52px 20px; color: var(--oms-muted); }
.empty-state .bi { font-size: 42px; opacity: .32; display: block; margin-bottom: 12px; }

.filter-bar {
  background: var(--oms-surface);
  border: 1px solid var(--oms-border);
  border-radius: var(--oms-radius);
  padding: 14px;
  box-shadow: var(--oms-shadow);
  margin-bottom: 16px;
}

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background-color: var(--oms-primary); color: #fff;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; flex: 0 0 auto;
}

.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--oms-border); }
.timeline li { position: relative; padding: 0 0 18px 16px; }
.timeline li::before {
  content: ""; position: absolute; left: -25px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--oms-primary);
}
.timeline li:first-child::before { background-color: var(--oms-primary); }

.copy-btn { cursor: pointer; border: 0; background: transparent; color: var(--oms-muted); padding: 0 4px; }
.copy-btn:hover { color: var(--oms-primary); }

kbd {
  background: #1e293b; color: #fff; border-radius: 5px;
  padding: 1px 6px; font-size: 11px; font-family: inherit;
}

.toast-container { z-index: 1090; }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; }
  .card, .table-wrap { box-shadow: none; border: 1px solid #ddd; }
  body { background: #fff; font-size: 12px; }
}

/* ---------------------------------------------------------- date range */
/* Litepicker drives the date_from / date_to pairs. These variables are the
   ones the library reads, so the popup matches the rest of the app. */
.litepicker {
  --litepicker-container-months-color-bg:      #fff;
  --litepicker-container-months-box-shadow-color: #e2e8f0;
  --litepicker-month-header-color:             var(--oms-text);
  --litepicker-button-prev-month-color:        var(--oms-muted);
  --litepicker-button-next-month-color:        var(--oms-muted);
  --litepicker-button-prev-month-color-hover:  var(--oms-primary);
  --litepicker-button-next-month-color-hover:  var(--oms-primary);
  --litepicker-month-weekday-color:            var(--oms-muted);
  --litepicker-day-color:                      var(--oms-text);
  --litepicker-day-color-hover:                var(--oms-primary);
  --litepicker-is-today-color:                 #d97706;
  --litepicker-is-in-range-color:              var(--oms-primary-l);
  --litepicker-is-start-color:                 #fff;
  --litepicker-is-start-color-bg:              var(--oms-primary);
  --litepicker-is-end-color:                   #fff;
  --litepicker-is-end-color-bg:                var(--oms-primary);
  --litepicker-highlighted-day-color-bg:       #fef3c7;

  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  z-index: 1080;
}
.litepicker .container__months {
  border-radius: var(--oms-radius);
  box-shadow: 0 8px 30px -8px rgba(15, 23, 42, .3), 0 0 0 1px var(--oms-border);
}

/* Calendar hint on the inputs the picker took over. */
.date-range-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  padding-right: 32px;
  cursor: pointer;
}

/* ------------------------------------------------------------- theming */
/* Bootstrap ships its own accent on these, so they are re-pointed at the
   theme variables rather than staying indigo whatever the user picked. */
.text-primary                      { color: var(--oms-primary) !important; }
.bg-primary                        { background-color: var(--oms-primary) !important; }
.border-primary                    { border-color: var(--oms-primary) !important; }
.bg-primary-subtle                 { background-color: var(--oms-primary-s) !important; }
.text-primary-emphasis             { color: var(--oms-primary-d) !important; }
.border-primary-subtle             { border-color: var(--oms-primary-b) !important; }
.btn-outline-primary {
  --bs-btn-color:                var(--oms-primary);
  --bs-btn-border-color:         var(--oms-primary-b);
  --bs-btn-hover-bg:             var(--oms-primary);
  --bs-btn-hover-border-color:   var(--oms-primary);
  --bs-btn-active-bg:            var(--oms-primary);
  --bs-btn-active-border-color:  var(--oms-primary);
}
.pagination {
  --bs-pagination-color:            var(--oms-primary);
  --bs-pagination-hover-color:      var(--oms-primary-d);
  --bs-pagination-active-bg:        var(--oms-primary);
  --bs-pagination-active-border-color: var(--oms-primary);
}
.progress-bar.bg-primary           { background-color: var(--oms-primary) !important; }
.form-check-input:checked          { background-color: var(--oms-primary); border-color: var(--oms-primary); }
.form-check-input:focus            { border-color: var(--oms-primary); box-shadow: 0 0 0 .2rem rgba(0,0,0,.06); }
a                                  { color: var(--oms-primary); }
a:hover                            { color: var(--oms-primary-d); }
.sidebar-nav a, .sidebar-brand,
.dropdown-item, .table a.text-secondary,
.text-secondary a, a.text-secondary { color: inherit; }

/* =====================================================================
   2026 interface refresh
   A calmer, more spacious operations workspace with a responsive drawer,
   stronger information hierarchy and touch-friendly controls.
   ===================================================================== */

:root {
  --oms-bg: #f4f7fb;
  --oms-surface: #ffffff;
  --oms-surface-soft: #f8fafc;
  --oms-border: #e5eaf1;
  --oms-border-strong: #d7dee9;
  --oms-text: #142033;
  --oms-muted: #718096;
  --oms-radius-sm: 10px;
  --oms-radius: 16px;
  --oms-radius-lg: 22px;
  --oms-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 10px 32px -20px rgba(15, 23, 42, .22);
  --oms-shadow-hover: 0 18px 44px -24px rgba(15, 23, 42, .3);
  --sidebar-w: 272px;
  --topbar-h: 76px;
}

html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  line-height: 1.55;
  letter-spacing: -.006em;
}
body.oms-app {
  background:
    radial-gradient(circle at 86% -5%, var(--oms-primary-l) 0, transparent 24rem),
    var(--oms-bg);
}
body.sidebar-open { overflow: hidden; }
::selection { background: var(--oms-primary-s); color: var(--oms-primary-d); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--oms-primary) 25%, transparent);
  outline-offset: 2px;
}
.min-w-0 { min-width: 0; }

/* ------------------------------------------------------------ app shell */
.app-shell { min-height: 100dvh; }
.sidebar {
  overflow: hidden;
  background:
    radial-gradient(circle at 10% -5%, color-mix(in srgb, var(--oms-primary) 34%, transparent), transparent 17rem),
    linear-gradient(178deg, var(--oms-sidebar) 0%, color-mix(in srgb, var(--oms-sidebar) 92%, #020617) 100%);
  border-right: 1px solid rgba(255,255,255,.055);
  box-shadow: 18px 0 50px -38px rgba(2,6,23,.9);
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: auto -70px -100px auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--oms-primary);
  filter: blur(90px);
  opacity: .09;
  pointer-events: none;
}
.sidebar-brand {
  height: var(--topbar-h);
  padding: 0 20px;
  gap: 12px;
  border-color: rgba(255,255,255,.08);
  position: relative;
  z-index: 1;
}
.sidebar-brand .logo {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--oms-primary) 82%, white), var(--oms-primary-d));
  box-shadow: 0 8px 22px -10px var(--oms-primary), inset 0 1px 0 rgba(255,255,255,.25);
  font-size: 19px;
}
.sidebar-brand-copy { display: grid; min-width: 0; line-height: 1.2; }
.sidebar-brand-copy strong {
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.025em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-brand-copy small {
  margin-top: 4px;
  color: #8290a6;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .025em;
}
.sidebar-context {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 14px 14px 0;
  padding: 8px 11px;
  color: #aeb9c9;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
}
.sidebar-context-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52,211,153,.12);
}
/* Company switcher. Sits in the topbar next to the account menu and is
   styled to match it, because both answer "who am I working as". */
.business-switch-wrap { flex: 0 0 auto; }
.business-switch {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 210px;
  padding: 5px 10px;
  color: var(--oms-text);
  background: #fff;
  border: 1px solid var(--oms-border);
  border-radius: 13px;
  box-shadow: 0 4px 15px -14px rgba(15,23,42,.7);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.business-switch:hover,
.business-switch[aria-expanded="true"] {
  border-color: var(--oms-primary-b);
  box-shadow: 0 10px 22px -18px var(--oms-primary);
  transform: translateY(-1px);
}
.business-switch-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 14px;
  color: var(--oms-primary-d);
  background: var(--oms-primary-l);
}
.business-switch-copy { min-width: 0; text-align: left; line-height: 1.15; }
.business-switch-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--oms-muted);
}
.business-switch-name {
  display: block;
  max-width: 128px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.business-switch-chevron { font-size: 11px; }
.business-switch-menu { min-width: 250px; }
.business-switch-menu form { margin: 0; }
.business-switch-menu .dropdown-item { width: 100%; border: 0; background: none; }
.business-switch-menu .dropdown-item.active { background: var(--oms-primary-l); color: var(--oms-primary-d); }

/* Below the breakpoint the name is dropped and only the mark is kept, so the
   switcher never crowds out the page title. */
@media (max-width: 575.98px) {
  .business-switch { max-width: none; padding: 5px 7px; gap: 4px; }
  .business-switch-copy { display: none; }
}

/* ------------------------------------------------ keyboard affordances */
/* The key that triggers a control, drawn beside it. Faint on purpose: it is
   there to be noticed once and then ignored, never to compete with the label
   it belongs to. It brightens on hover and focus, when it is being looked for. */
.key-hint {
  margin-left: auto;
  padding: 2px 5px;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 5px;
  opacity: .28;
  transition: opacity .16s ease;
}
a:hover > .key-hint,
button:hover > .key-hint,
a:focus-visible > .key-hint,
button:focus-visible > .key-hint,
.sidebar-nav a.active > .key-hint { opacity: .62; }

/* Beside a badge the key is no longer the last thing on the row. */
.sidebar-nav a > .badge + .key-hint,
.sidebar-nav a > .key-hint + .badge { margin-left: 6px; }
.business-switch > .key-hint,
#notifBtn > .key-hint { margin-left: 2px; }

/* Section keys sit in the card's own header, so the key is read together
   with the heading it jumps to. */
.key-hint-section { letter-spacing: 0; }
.card-header > .key-hint-section { margin-left: auto; }
.card-header > .ms-auto ~ .key-hint-section { margin-left: 8px; }

/* A section with nothing to type into gets a moment of colour instead, so
   the eye still lands where the key sent it. */
.key-hint-floating {
  position: absolute;
  top: 8px;
  right: 10px;
}
.filter-bar { position: relative; }
.key-section-lit {
  animation: keySectionLit .9s ease;
}
@keyframes keySectionLit {
  0%   { box-shadow: 0 0 0 0 var(--oms-primary-s); }
  30%  { box-shadow: 0 0 0 4px var(--oms-primary-s); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ------------------------------------------------ tick rows and act on them */
.row-pick, .row-pick-all { width: 15px; height: 15px; cursor: pointer; vertical-align: middle; }
th.pick-col, td.pick-col { width: 34px; padding-right: 0; text-align: center; }
tbody tr.row-picked > td { background: var(--oms-primary-l) !important; }

/* Rises from the bottom once something is ticked. Fixed, so it stays reachable
   however far down a long list the operator has scrolled. */
.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 1040;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 9px 10px 9px 16px;
  background: var(--oms-sidebar);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(15,23,42,.85);
  animation: bulkBarIn .16s ease;
}
@keyframes bulkBarIn { from { opacity: 0; transform: translate(-50%, 8px); } }

.bulk-count {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  margin-right: 4px;
}
.bulk-clear {
  padding: 5px 9px;
  font: inherit;
  font-size: 11.5px;
  color: #b8c4d4;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.bulk-clear:hover { color: #fff; background: rgba(255,255,255,.09); }

.bulk-act {
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
}
.bulk-act-light { color: var(--oms-text); background: #fff; }
.bulk-act-light:hover { background: #eef2f7; }
.bulk-act-danger { color: #fff; background: #dc2626; }
.bulk-act-danger:hover { background: #b91c1c; }
.bulk-act-success { color: #fff; background: #16a34a; }
.bulk-act-success:hover { background: #15803d; }

@media (max-width: 575.98px) {
  .bulk-bar { left: 12px; right: 12px; bottom: 12px; transform: none; flex-wrap: wrap; }
  @keyframes bulkBarIn { from { opacity: 0; transform: translateY(8px); } }
}

/* The row the keyboard is currently on. */
tbody tr.key-row > td { background: var(--oms-primary-l); }
tbody tr.key-row > td:first-child { box-shadow: inset 3px 0 0 var(--oms-primary); }

/* The "?" cheat sheet. Built from the keys actually present on the page. */
.key-help {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(2px);
}
.key-help.open { display: grid; }
.key-help-card {
  width: min(460px, 100%);
  max-height: 80vh;
  overflow: auto;
  padding: 18px 20px 12px;
  background: var(--oms-surface);
  border: 1px solid var(--oms-border);
  border-radius: var(--oms-radius-lg);
  box-shadow: 0 30px 60px -30px rgba(15,23,42,.7);
}
.key-help-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.key-help dl { margin: 0; }
.key-help dl > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--oms-border);
}
.key-help dl > div:first-child { border-top: 0; }
.key-help dt { flex: 0 0 62px; margin: 0; }
.key-help dd { margin: 0; font-size: 13px; }
.key-help kbd {
  display: inline-block;
  min-width: 26px;
  padding: 3px 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--oms-text);
  background: var(--oms-surface-soft);
  border: 1px solid var(--oms-border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
}

/* A touch screen has no keys to press, so it is not shown the hints. */
@media (hover: none) and (pointer: coarse) {
  .key-hint { display: none; }
}

.sidebar-close {
  width: 29px;
  height: 29px;
  margin: -4px -5px -4px auto;
  padding: 0;
  display: grid;
  place-items: center;
  color: #cbd5e1;
  background: rgba(255,255,255,.06);
  border: 0;
  border-radius: 8px;
}
.sidebar-nav {
  position: relative;
  z-index: 1;
  padding: 8px 12px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}
.sidebar-nav .nav-section {
  padding: 18px 11px 8px;
  color: #65748a;
  font-size: 9.5px;
  letter-spacing: .14em;
}
.sidebar-nav a {
  min-height: 46px;
  gap: 12px;
  padding: 8px 11px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #aeb9c9;
  font-size: 13.5px;
  font-weight: 590;
  position: relative;
  overflow: hidden;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.sidebar-nav a > i:first-child {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  font-size: 15px;
  opacity: .9;
  transition: background .18s ease, transform .18s ease;
}
.sidebar-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.055);
  transform: translateX(2px);
}
.sidebar-nav a:hover > i:first-child { background: rgba(255,255,255,.08); }
.sidebar-nav a.active {
  color: #fff;
  background: linear-gradient(110deg, color-mix(in srgb, var(--oms-primary) 88%, transparent), color-mix(in srgb, var(--oms-primary-d) 78%, transparent));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 24px -16px var(--oms-primary);
}
.sidebar-nav a.active::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  width: 4px;
  height: 15px;
  border-radius: 99px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.76);
}
.sidebar-nav a.active > i:first-child { background: rgba(255,255,255,.14); }
.sidebar-nav a .badge { margin-right: 8px; border: 2px solid rgba(255,255,255,.12); }
.sidebar-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(2,6,23,.12);
}
.sidebar-user-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 11px;
  font-weight: 750;
}
.sidebar-footer > div:nth-child(2) { display: grid; flex: 1; }
.sidebar-footer strong { color: #e7edf5; font-size: 11.5px; }
.sidebar-footer small { color: #7f8da2; font-size: 10px; }
.sidebar-footer > a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #8e9caf;
  background: rgba(255,255,255,.045);
}
.sidebar-footer > a:hover { color: #fff; background: rgba(255,255,255,.09); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1035;
  padding: 0;
  border: 0;
  background: rgba(9,17,31,.56);
  backdrop-filter: blur(3px);
}

.main { margin-left: var(--sidebar-w); min-height: 100dvh; }
.topbar {
  height: var(--topbar-h);
  gap: 16px;
  padding: 0 28px;
  background: rgba(255,255,255,.88);
  border-color: rgba(221,227,236,.9);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 8px 28px -28px rgba(15,23,42,.8);
}
.topbar .page-title {
  color: var(--oms-text);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.03em;
}
.topbar .page-title + .small { margin-top: 1px; font-size: 11.5px; }
.topbar .page-title + .small a:hover { color: var(--oms-primary) !important; }
.topbar-menu {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--oms-text);
  background: var(--oms-surface-soft);
  border: 1px solid var(--oms-border);
  border-radius: 11px;
}
.user-menu-trigger {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 5px;
  color: var(--oms-text);
  background: #fff;
  border: 1px solid var(--oms-border);
  border-radius: 13px;
  box-shadow: 0 4px 15px -14px rgba(15,23,42,.7);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
  border-color: var(--oms-primary-b);
  box-shadow: 0 10px 22px -18px var(--oms-primary);
  transform: translateY(-1px);
}
.user-menu-copy { min-width: 94px; }
.user-menu-copy .fw-semibold { font-size: 12.5px; }
.user-menu-copy .text-secondary { font-size: 10.5px; }
.user-menu-chevron { margin-left: 2px; font-size: 10px; }
.avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--oms-primary) 82%, white), var(--oms-primary-d));
  box-shadow: 0 8px 18px -11px var(--oms-primary);
}
.content { padding: 26px 28px 64px; }
.content-inner { width: 100%; max-width: 1580px; margin: 0 auto; }

/* ------------------------------------------------------------- surfaces */
.card,
.table-wrap,
.filter-bar,
.stat-card,
.due-card {
  border-color: var(--oms-border);
  box-shadow: var(--oms-shadow);
}
.card {
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border-radius: var(--oms-radius);
}
.card-header {
  min-height: 58px;
  padding: 15px 19px;
  border-color: var(--oms-border);
  color: var(--oms-text);
  font-weight: 700;
  letter-spacing: -.015em;
}
.card-header > .bi:first-child {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--oms-primary);
  background: var(--oms-primary-l);
  font-size: 14px;
}
.card-header a.ms-auto { font-weight: 650; }
.card-body { padding: 20px; }
.list-group-item { padding: 13px 18px; border-color: var(--oms-border); }

.stat-card {
  min-height: 102px;
  padding: 18px;
  gap: 15px;
  overflow: hidden;
  position: relative;
  border-radius: var(--oms-radius);
  background:
    radial-gradient(circle at 110% -30%, var(--oms-primary-l) 0, transparent 45%),
    var(--oms-surface);
}
.stat-card::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  right: -45px;
  bottom: -48px;
  border: 12px solid var(--oms-primary-l);
  border-radius: 50%;
  opacity: .75;
}
a.stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--oms-primary-b);
  box-shadow: var(--oms-shadow-hover);
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  font-size: 20px;
}
.stat-value { color: var(--oms-text); font-size: 27px; font-weight: 790; letter-spacing: -.04em; }
.stat-label { margin-top: 3px; color: var(--oms-muted); font-size: 11.5px; font-weight: 610; }

.due-card {
  min-height: 204px;
  padding: 16px;
  border-left-width: 0;
  border-radius: 14px;
  position: relative;
}
.due-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: #94a3b8;
}
.due-card.is-overdue::before { background: #ef4444; }
.due-card.is-today::before { background: #f59e0b; }
.due-card.is-soon::before { background: #3b82f6; }
.due-card:hover { border-color: var(--oms-border-strong); box-shadow: var(--oms-shadow-hover); }
.due-card .meta { line-height: 1.75; }

/* --------------------------------------------------------------- tables */
.table-wrap { border-radius: var(--oms-radius); background: #fff; }
.table-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  overscroll-behavior-inline: contain;
}
.table > :not(caption) > * > * { padding: 13px 16px; }
.table thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  color: #78869a;
  background: #f8fafc;
  border-color: var(--oms-border);
  font-size: 10.5px;
  letter-spacing: .075em;
}
.table td { border-color: #edf1f6; }
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover > td { background: #fafcff; }
.table tfoot td { border-top: 1px solid var(--oms-border-strong); }
.order-no { font-weight: 760; letter-spacing: -.015em; }

/* ---------------------------------------------------------------- forms */
.form-label {
  margin-bottom: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 680;
}
.form-control,
.form-select {
  min-height: 43px;
  padding: 9px 12px;
  color: var(--oms-text);
  background-color: #fff;
  border-color: var(--oms-border-strong);
  border-radius: var(--oms-radius-sm);
  font-size: 13.5px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-control:hover,
.form-select:hover { border-color: #c2ccda; }
.form-control:focus,
.form-select:focus {
  border-color: var(--oms-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--oms-primary) 12%, transparent);
}
.form-control::placeholder { color: #a3afbf; }
.form-control-lg,
.form-select-lg { min-height: 49px; padding: 11px 14px; font-size: 14.5px; }
.form-select-sm,
.form-control-sm { min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
.input-group-text {
  min-width: 42px;
  justify-content: center;
  color: #7b899c;
  background: #f8fafc;
  border-color: var(--oms-border-strong);
}
.input-group > :first-child { border-radius: var(--oms-radius-sm) 0 0 var(--oms-radius-sm); }
.input-group > :last-child { border-radius: 0 var(--oms-radius-sm) var(--oms-radius-sm) 0; }
.form-text { color: #8793a5; }
.form-check-input { width: 1.05em; height: 1.05em; border-color: #bdc8d6; }
fieldset.form-section > legend {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--oms-primary-b);
  font-size: 10.5px;
  letter-spacing: .1em;
}

.btn {
  min-height: 40px;
  padding: 8px 15px;
  border-radius: var(--oms-radius-sm);
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -.005em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 32px; padding: 5px 10px; border-radius: 8px; font-size: 11.5px; }
.btn-lg { min-height: 49px; padding: 11px 20px; font-size: 14px; }
.btn-primary { box-shadow: 0 9px 18px -13px var(--oms-primary); }
.btn-primary:hover { box-shadow: 0 13px 24px -14px var(--oms-primary); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--oms-border); --bs-btn-hover-bg: #f8fafc; }
.btn-icon { justify-content: center; }

.filter-bar {
  padding: 16px;
  border-radius: var(--oms-radius);
  background: rgba(255,255,255,.96);
}
.filter-bar .form-label { color: #65748a; }
.alert {
  border: 0;
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.045);
}
.badge { font-weight: 680; }
.badge-status { padding: 5px 10px; font-size: 10.5px; }
.dropdown-menu {
  padding: 7px;
  border: 1px solid var(--oms-border);
  border-radius: 13px;
  box-shadow: 0 20px 45px -22px rgba(15,23,42,.36) !important;
}
.dropdown-item { padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.dropdown-header { font-size: 11px; }
.modal-content { border: 1px solid var(--oms-border); border-radius: 18px; box-shadow: 0 30px 70px -32px rgba(15,23,42,.5); }
.modal-header,
.modal-footer { border-color: var(--oms-border); }
.pagination { gap: 4px; }
.pagination .page-link { border-radius: 8px !important; border-color: var(--oms-border); }
.progress { background: #edf1f6; border-radius: 99px; }

.designer-chip { background: #f2f5f9; color: #4b5a6f; }
.empty-state { padding: 56px 20px; }
.empty-state .bi {
  width: 54px;
  height: 54px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--oms-primary);
  background: var(--oms-primary-l);
  font-size: 23px;
  opacity: 1;
}
.timeline { border-color: var(--oms-border-strong); }
.copy-btn { width: 28px; height: 28px; border-radius: 8px; }
.copy-btn:hover { background: var(--oms-primary-l); }

/* Keep the two compact dashboard panels together before the wide forecast. */
.dashboard-completed,
.dashboard-low-stock { order: 1; }
.dashboard-forecast { order: 2; }

/* ------------------------------------------------ professional sections */
/* Content stays quiet and data-led: neutral surfaces, restrained depth and
   consistent headings. The sidebar remains the strongest visual anchor. */
body.oms-app { background: #f5f7fa; }
.content { background: transparent; }

.section-heading {
  min-height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 2px 0 16px;
}
.section-heading > div:first-child { min-width: 0; }
.section-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--oms-primary);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.section-heading h2 {
  margin: 0;
  color: #1b2738;
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.025em;
}
.section-heading p {
  margin: 4px 0 0;
  color: #7b8797;
  font-size: 11.5px;
}
.section-date {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: #5e6b7d;
  background: #fff;
  border: 1px solid var(--oms-border);
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 640;
  white-space: nowrap;
}
.section-date i { color: var(--oms-primary); }

.card,
.table-wrap,
.filter-bar,
.stat-card,
.due-card {
  box-shadow: 0 1px 2px rgba(15,23,42,.035), 0 4px 16px -16px rgba(15,23,42,.22);
}
.card {
  border-color: #e1e6ed;
  background: #fff;
}
.section-card { box-shadow: 0 1px 2px rgba(15,23,42,.035); }
.card-header {
  min-height: 62px;
  padding: 14px 18px;
  background: #fbfcfd;
  border-color: #e5e9ef;
}
.card-header > .bi:first-child {
  width: 32px;
  height: 32px;
  color: #526176;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.card-title-group { display: grid; min-width: 0; gap: 1px; line-height: 1.3; }
.card-title-group strong {
  overflow: hidden;
  color: #263346;
  font-size: 13px;
  font-weight: 720;
  letter-spacing: -.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-title-group small {
  overflow: hidden;
  color: #8792a2;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-header-meta {
  padding: 5px 8px;
  color: #798698;
  background: #f3f5f8;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 650;
}
.card-header-action {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  color: #526176;
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 680;
  white-space: nowrap;
}
.card-header-action:hover { color: var(--oms-primary); border-color: var(--oms-primary-b); background: var(--oms-primary-l); }
.card-body.border-top { background: #fbfcfd; }

/* KPI cards use one disciplined layout across dashboard, sales and stock. */
.dashboard-stat,
.professional-stat {
  min-height: 98px;
  padding: 17px 18px;
  background: #fff;
  border-top: 3px solid #d8dee7;
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(15,23,42,.035);
}
.dashboard-stat::after,
.professional-stat::after { display: none; }
.dashboard-stat > .stat-icon,
.professional-stat > .stat-icon {
  order: 2;
  width: 43px;
  height: 43px;
  margin-left: auto;
  border: 1px solid rgba(15,23,42,.04);
  border-radius: 11px;
  box-shadow: none;
}
.dashboard-stat > :not(.stat-icon),
.professional-stat > :not(.stat-icon) { order: 1; }
.dashboard-stat:has(.tint-red),
.professional-stat:has(.tint-red) { border-top-color: #ef4444; }
.dashboard-stat:has(.tint-green),
.professional-stat:has(.tint-green) { border-top-color: #22a06b; }
.dashboard-stat:has(.tint-amber),
.professional-stat:has(.tint-amber) { border-top-color: #e7a523; }
.dashboard-stat:has(.tint-blue),
.professional-stat:has(.tint-blue) { border-top-color: #3b82f6; }
.dashboard-stat:has(.tint-indigo),
.professional-stat:has(.tint-indigo) { border-top-color: var(--oms-primary); }
.dashboard-stat:has(.tint-purple),
.professional-stat:has(.tint-purple) { border-top-color: #9333ea; }
.dashboard-stat:has(.tint-slate),
.professional-stat:has(.tint-slate) { border-top-color: #64748b; }
.dashboard-stat:has(.tint-teal),
.professional-stat:has(.tint-teal) { border-top-color: #14b8a6; }
.dashboard-stat:has(.tint-lime),
.professional-stat:has(.tint-lime) { border-top-color: #65a30d; }
.dashboard-stat:has(.tint-pink),
.professional-stat:has(.tint-pink) { border-top-color: #ec4899; }
.dashboard-stat .stat-value,
.professional-stat .stat-value {
  color: #1e293b;
  font-size: 25px;
  font-weight: 760;
  letter-spacing: -.035em;
}
.dashboard-stat .stat-label,
.professional-stat .stat-label {
  margin-top: 4px;
  color: #7a8798;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
a.dashboard-stat:hover,
a.professional-stat:hover {
  transform: translateY(-1px);
  border-color: #d5dce6;
  border-top-color: var(--oms-primary);
  box-shadow: 0 8px 20px -18px rgba(15,23,42,.35);
}

/* Setup and report launchers read as sober navigation modules, not KPIs. */
.module-card {
  min-height: 134px;
  align-items: flex-start;
  padding: 19px;
  gap: 14px;
  overflow: visible;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(15,23,42,.035);
}
.module-card::after { display: none; }
.module-card .stat-icon {
  width: 41px;
  height: 41px;
  border-radius: 11px;
  box-shadow: none;
}
.module-card .fw-bold { color: #293548; font-size: 13px; font-weight: 720 !important; }
.module-card .text-secondary { margin-top: 4px; color: #7d8999 !important; line-height: 1.55; }
.module-card > .bi-chevron-right {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #8490a0 !important;
  background: #f5f7f9;
  border-radius: 8px;
  font-size: 10px;
}
a.module-card:hover {
  transform: translateY(-1px);
  border-color: var(--oms-primary-b);
  box-shadow: 0 9px 22px -20px rgba(15,23,42,.4);
}
a.module-card:hover > .bi-chevron-right { color: var(--oms-primary) !important; background: var(--oms-primary-l); }

.filter-bar {
  padding: 17px;
  background: #fff;
  border-color: #e1e6ed;
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.filter-bar::before {
  content: "View options";
  display: block;
  margin-bottom: 10px;
  color: #6f7c8f;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.filter-bar .form-label { color: #647185; font-size: 10.5px; }

.table-wrap {
  background: #fff;
  border-color: #e1e6ed;
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.table thead th {
  color: #6f7c8e;
  background: #f7f9fb;
  border-color: #dfe5ec;
  font-size: 9.5px;
  letter-spacing: .075em;
}
.table td { color: #364255; border-color: #edf0f4; }
.table tbody tr:hover > td { background: #f9fafc; }
.table tbody tr:last-child > td { border-bottom: 0; }
.order-no { color: var(--oms-primary); }

.order-summary-card {
  overflow: visible;
  border-left: 3px solid var(--oms-primary);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.035);
}
.order-summary-card .card-body { padding: 17px 18px; }
.order-summary-card .text-secondary.small {
  margin-bottom: 3px;
  color: #8390a1 !important;
  font-size: 9.5px;
  font-weight: 680;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.order-summary-card .h4 { font-size: 18px; }

.due-card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.due-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -20px rgba(15,23,42,.38); }
.empty-state .bi {
  color: #65748a;
  background: #f2f4f7;
  border: 1px solid #e5e9ef;
}

/* Dashboard colours carry meaning at a glance: every KPI and information
   panel owns one palette while the rest of the application follows the user's theme. */
.dashboard-stat.dashboard-stat-danger {
  --dashboard-card-from: #e11d48;
  --dashboard-card-to: #9f1239;
  --dashboard-card-shadow: rgba(159,18,57,.38);
}
.dashboard-stat.dashboard-stat-indigo {
  --dashboard-card-from: #4f46e5;
  --dashboard-card-to: #3730a3;
  --dashboard-card-shadow: rgba(55,48,163,.38);
}
.dashboard-stat.dashboard-stat-success {
  --dashboard-card-from: #15803d;
  --dashboard-card-to: #166534;
  --dashboard-card-shadow: rgba(22,101,52,.36);
}
.dashboard-stat.dashboard-stat-amber {
  --dashboard-card-from: #c2410c;
  --dashboard-card-to: #9a3412;
  --dashboard-card-shadow: rgba(154,52,18,.36);
}
.dashboard-stat.dashboard-stat-danger,
.dashboard-stat.dashboard-stat-indigo,
.dashboard-stat.dashboard-stat-success,
.dashboard-stat.dashboard-stat-amber {
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--dashboard-card-from), var(--dashboard-card-to));
  border: 0;
  border-top: 0;
  box-shadow: 0 13px 28px -17px var(--dashboard-card-shadow);
}
.dashboard-stat.dashboard-stat-danger::before,
.dashboard-stat.dashboard-stat-indigo::before,
.dashboard-stat.dashboard-stat-success::before,
.dashboard-stat.dashboard-stat-amber::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 120px;
  height: 120px;
  top: -72px;
  right: 18px;
  background: rgba(255,255,255,.13);
  border-radius: 50%;
}
.dashboard-stat.dashboard-stat-danger::after,
.dashboard-stat.dashboard-stat-indigo::after,
.dashboard-stat.dashboard-stat-success::after,
.dashboard-stat.dashboard-stat-amber::after {
  display: block;
  z-index: -1;
  width: 90px;
  height: 90px;
  right: -24px;
  bottom: -45px;
  border: 16px solid rgba(255,255,255,.13);
}
.dashboard-stat.dashboard-stat-danger > .stat-icon,
.dashboard-stat.dashboard-stat-indigo > .stat-icon,
.dashboard-stat.dashboard-stat-success > .stat-icon,
.dashboard-stat.dashboard-stat-amber > .stat-icon {
  color: #fff;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.23);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.dashboard-stat.dashboard-stat-danger .stat-value,
.dashboard-stat.dashboard-stat-indigo .stat-value,
.dashboard-stat.dashboard-stat-success .stat-value,
.dashboard-stat.dashboard-stat-amber .stat-value { color: #fff; }
.dashboard-stat.dashboard-stat-danger .stat-label,
.dashboard-stat.dashboard-stat-indigo .stat-label,
.dashboard-stat.dashboard-stat-success .stat-label,
.dashboard-stat.dashboard-stat-amber .stat-label { color: rgba(255,255,255,.84); }
a.dashboard-stat.dashboard-stat-danger:hover,
a.dashboard-stat.dashboard-stat-indigo:hover,
a.dashboard-stat.dashboard-stat-success:hover,
a.dashboard-stat.dashboard-stat-amber:hover {
  border: 0;
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -17px var(--dashboard-card-shadow);
  filter: saturate(1.08);
}

.dashboard-panel {
  --dashboard-panel-from: #475569;
  --dashboard-panel-to: #334155;
  --dashboard-panel-body: #f8fafc;
  --dashboard-panel-body-strong: #f1f5f9;
  --dashboard-panel-border: #cbd5e1;
  --dashboard-panel-ink: #334155;
  border-color: var(--dashboard-panel-border);
  background: var(--dashboard-panel-body);
  box-shadow: 0 12px 30px -24px var(--dashboard-panel-from);
}
.dashboard-panel-due {
  --dashboard-panel-from: #e11d48;
  --dashboard-panel-to: #9f1239;
  --dashboard-panel-body: #fff1f2;
  --dashboard-panel-body-strong: #ffe4e6;
  --dashboard-panel-border: #fecdd3;
  --dashboard-panel-ink: #9f1239;
}
.dashboard-panel-mix {
  --dashboard-panel-from: #7c3aed;
  --dashboard-panel-to: #5b21b6;
  --dashboard-panel-body: #f5f3ff;
  --dashboard-panel-body-strong: #ede9fe;
  --dashboard-panel-border: #ddd6fe;
  --dashboard-panel-ink: #5b21b6;
}
.dashboard-panel-performance {
  --dashboard-panel-from: #2563eb;
  --dashboard-panel-to: #1e40af;
  --dashboard-panel-body: #eff6ff;
  --dashboard-panel-body-strong: #dbeafe;
  --dashboard-panel-border: #bfdbfe;
  --dashboard-panel-ink: #1e40af;
}
.dashboard-panel-completed {
  --dashboard-panel-from: #047857;
  --dashboard-panel-to: #065f46;
  --dashboard-panel-body: #ecfdf5;
  --dashboard-panel-body-strong: #d1fae5;
  --dashboard-panel-border: #a7f3d0;
  --dashboard-panel-ink: #065f46;
}
.dashboard-panel-forecast {
  --dashboard-panel-from: #0e7490;
  --dashboard-panel-to: #155e75;
  --dashboard-panel-body: #ecfeff;
  --dashboard-panel-body-strong: #cffafe;
  --dashboard-panel-border: #a5f3fc;
  --dashboard-panel-ink: #155e75;
}
.dashboard-panel-low-stock {
  --dashboard-panel-from: #b45309;
  --dashboard-panel-to: #92400e;
  --dashboard-panel-body: #fffbeb;
  --dashboard-panel-body-strong: #fef3c7;
  --dashboard-panel-border: #fde68a;
  --dashboard-panel-ink: #92400e;
}
.dashboard-panel > .card-header {
  color: #fff;
  background: linear-gradient(120deg, var(--dashboard-panel-from), var(--dashboard-panel-to));
  border-bottom: 0;
}
.dashboard-panel > .card-header::after {
  content: "";
  align-self: stretch;
  width: 54px;
  margin: -14px -18px -14px 0;
  order: -1;
  background: linear-gradient(115deg, rgba(255,255,255,.16), transparent);
  clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
}
.dashboard-panel > .card-header > .bi:first-child {
  color: #fff;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.dashboard-panel .card-title-group strong { color: #fff; }
.dashboard-panel .card-title-group small { color: rgba(255,255,255,.78); }
.dashboard-panel .card-header-meta,
.dashboard-panel > .card-header > .badge {
  color: #fff !important;
  background: rgba(255,255,255,.17) !important;
  border: 1px solid rgba(255,255,255,.21);
}
.dashboard-panel .card-header-action {
  color: #fff;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
}
.dashboard-panel .card-header-action:hover {
  color: var(--dashboard-panel-ink);
  background: #fff;
  border-color: #fff;
}
.dashboard-panel > .card-body {
  background: linear-gradient(145deg, var(--dashboard-panel-body), var(--dashboard-panel-body-strong));
}
.dashboard-panel .table { --bs-table-bg: transparent; }
.dashboard-panel .table thead th {
  color: var(--dashboard-panel-ink);
  background: color-mix(in srgb, var(--dashboard-panel-body-strong) 78%, #fff);
  border-color: var(--dashboard-panel-border);
}
.dashboard-panel .table tbody td {
  background: rgba(255,255,255,.48);
  border-color: color-mix(in srgb, var(--dashboard-panel-border) 72%, #fff);
}
.dashboard-panel .table tbody tr:hover > td { background: rgba(255,255,255,.82); }
.dashboard-panel .empty-state { color: var(--dashboard-panel-ink); }
.dashboard-panel .empty-state .bi {
  color: #fff;
  background: linear-gradient(135deg, var(--dashboard-panel-from), var(--dashboard-panel-to));
  border-color: transparent;
  box-shadow: 0 10px 24px -15px var(--dashboard-panel-from);
}
.dashboard-panel-low-stock .border-bottom { border-color: var(--dashboard-panel-border) !important; }
.dashboard-panel-low-stock .text-secondary { color: #9a5a16 !important; }
.dashboard-panel-completed .order-no { color: #047857; }
.dashboard-panel-forecast .progress { background: rgba(255,255,255,.75); }

.dashboard-panel-due .due-card { border-color: rgba(190,18,60,.16); }
.dashboard-panel-due .due-card.is-overdue { background: linear-gradient(145deg, #fff, #ffe4e6); }
.dashboard-panel-due .due-card.is-today { background: linear-gradient(145deg, #fff, #fef3c7); }
.dashboard-panel-due .due-card.is-soon { background: linear-gradient(145deg, #fff, #dbeafe); }
.dashboard-panel-due .due-card.is-ok { background: linear-gradient(145deg, #fff, #f1f5f9); }

/* ------------------------------------------------ colourful workspace pages */
/* Each module owns a recognisable base palette. Cards then refine that colour
   from their heading icon, so Customer, Products and Payment stay distinct. */
body.oms-app {
  --page-section-from: #4f46e5;
  --page-section-to: #3730a3;
  --page-section-soft: #eef2ff;
  --page-section-soft-strong: #e0e7ff;
  --page-section-border: #c7d2fe;
  --page-section-ink: #3730a3;
}
body.page-orders {
  --page-section-from: #e11d48;
  --page-section-to: #9f1239;
  --page-section-soft: #fff1f2;
  --page-section-soft-strong: #ffe4e6;
  --page-section-border: #fecdd3;
  --page-section-ink: #9f1239;
}
body.page-sales {
  --page-section-from: #047857;
  --page-section-to: #065f46;
  --page-section-soft: #ecfdf5;
  --page-section-soft-strong: #d1fae5;
  --page-section-border: #a7f3d0;
  --page-section-ink: #065f46;
}
body.page-inventory {
  --page-section-from: #b45309;
  --page-section-to: #92400e;
  --page-section-soft: #fffbeb;
  --page-section-soft-strong: #fef3c7;
  --page-section-border: #fde68a;
  --page-section-ink: #92400e;
}
body.page-bills {
  --page-section-from: #7c3aed;
  --page-section-to: #5b21b6;
  --page-section-soft: #f5f3ff;
  --page-section-soft-strong: #ede9fe;
  --page-section-border: #ddd6fe;
  --page-section-ink: #5b21b6;
}
body.page-customers {
  --page-section-from: #2563eb;
  --page-section-to: #1e40af;
  --page-section-soft: #eff6ff;
  --page-section-soft-strong: #dbeafe;
  --page-section-border: #bfdbfe;
  --page-section-ink: #1e40af;
}
body.page-printshops {
  --page-section-from: #7c3aed;
  --page-section-to: #5b21b6;
  --page-section-soft: #faf5ff;
  --page-section-soft-strong: #f3e8ff;
  --page-section-border: #e9d5ff;
  --page-section-ink: #6b21a8;
}
body.page-reports {
  --page-section-from: #0e7490;
  --page-section-to: #155e75;
  --page-section-soft: #ecfeff;
  --page-section-soft-strong: #cffafe;
  --page-section-border: #a5f3fc;
  --page-section-ink: #155e75;
}
body.page-setup {
  --page-section-from: #0f766e;
  --page-section-to: #115e59;
  --page-section-soft: #f0fdfa;
  --page-section-soft-strong: #ccfbf1;
  --page-section-border: #99f6e4;
  --page-section-ink: #115e59;
}
body.page-profile {
  --page-section-from: #4f46e5;
  --page-section-to: #3730a3;
  --page-section-soft: #eef2ff;
  --page-section-soft-strong: #e0e7ff;
  --page-section-border: #c7d2fe;
  --page-section-ink: #3730a3;
}

body[class*="page-"]:not(.page-dashboard) .section-heading {
  min-height: 0;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--page-section-soft), var(--page-section-soft-strong));
  border: 1px solid var(--page-section-border);
  border-left: 5px solid var(--page-section-from);
  border-radius: 13px;
}
body[class*="page-"]:not(.page-dashboard) .section-kicker,
body[class*="page-"]:not(.page-dashboard) .section-heading h2 { color: var(--page-section-ink); }

/* The filter bar sits directly on top of the list table and reads as one
   block with it, so it takes the COMPANY colour the table does. Leave it on
   the page palette and a red bar ends up sitting on a blue table. */
body[class*="page-"] .filter-bar {
  overflow: hidden;
  background: linear-gradient(145deg, var(--oms-primary-l), var(--oms-primary-s));
  border-color: var(--oms-primary-b);
  box-shadow: inset 0 4px 0 var(--oms-primary), 0 10px 25px -23px var(--oms-primary);
}
body[class*="page-"] .filter-bar::before { color: var(--oms-primary-d); }
body[class*="page-"] .filter-bar .form-control,
body[class*="page-"] .filter-bar .form-select,
body[class*="page-"] .filter-bar .input-group-text { background-color: rgba(255,255,255,.9); }

/* The list table wears the COMPANY colour, not the page one. Every other
   piece of section chrome still takes its colour from the page it is on --
   this is the one surface an operator spends the day reading, so it is the
   one that should say which company they are working in. */
body[class*="page-"] .table-wrap {
  overflow: hidden;
  background: linear-gradient(145deg, var(--oms-primary-l), var(--oms-primary-s));
  border-color: var(--oms-primary-b);
  box-shadow: 0 12px 30px -25px var(--oms-primary);
}
body[class*="page-"] .table-wrap .table { --bs-table-bg: transparent; }
body[class*="page-"] .table-wrap .table thead th {
  color: #fff;
  background: var(--oms-primary-d);
  border-color: rgba(255,255,255,.16);
}
body[class*="page-"] .table-wrap .table tbody td {
  background: rgba(255,255,255,.58);
  border-color: color-mix(in srgb, var(--oms-primary-b) 72%, #fff);
}
body[class*="page-"] .table-wrap .table tbody tr:hover > td { background: rgba(255,255,255,.88); }

.content-inner .card:not(.dashboard-panel):has(> .card-header) {
  --section-from: var(--page-section-from);
  --section-to: var(--page-section-to);
  --section-soft: var(--page-section-soft);
  --section-soft-strong: var(--page-section-soft-strong);
  --section-border: var(--page-section-border);
  --section-ink: var(--page-section-ink);
  border-color: var(--section-border);
  background: var(--section-soft);
  box-shadow: 0 12px 30px -25px var(--section-from);
}

/* People and customer information. */
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-person),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-people) {
  --section-from: #2563eb; --section-to: #1e40af;
  --section-soft: #eff6ff; --section-soft-strong: #dbeafe;
  --section-border: #bfdbfe; --section-ink: #1e40af;
}
/* Products, categories and sizes. */
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-bag) {
  --section-from: #7c3aed; --section-to: #5b21b6;
  --section-soft: #f5f3ff; --section-soft-strong: #ede9fe;
  --section-border: #ddd6fe; --section-ink: #5b21b6;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-tags) {
  --section-from: #e11d48; --section-to: #9f1239;
  --section-soft: #fff1f2; --section-soft-strong: #ffe4e6;
  --section-border: #fecdd3; --section-ink: #9f1239;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-rulers) {
  --section-from: #0e7490; --section-to: #155e75;
  --section-soft: #ecfeff; --section-soft-strong: #cffafe;
  --section-border: #a5f3fc; --section-ink: #155e75;
}
/* Delivery, pickup and print production. */
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-truck),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-shop) {
  --section-from: #c2410c; --section-to: #9a3412;
  --section-soft: #fff7ed; --section-soft-strong: #ffedd5;
  --section-border: #fed7aa; --section-ink: #9a3412;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-geo-alt) {
  --section-from: #0e7490; --section-to: #155e75;
  --section-soft: #ecfeff; --section-soft-strong: #cffafe;
  --section-border: #a5f3fc; --section-ink: #155e75;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-printer) {
  --section-from: #7c3aed; --section-to: #5b21b6;
  --section-soft: #f5f3ff; --section-soft-strong: #ede9fe;
  --section-border: #ddd6fe; --section-ink: #5b21b6;
}
/* Designers, security and workflow controls. */
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-person-badge),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-hash) {
  --section-from: #4f46e5; --section-to: #3730a3;
  --section-soft: #eef2ff; --section-soft-strong: #e0e7ff;
  --section-border: #c7d2fe; --section-ink: #3730a3;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-shield-check) {
  --section-from: #0f766e; --section-to: #115e59;
  --section-soft: #f0fdfa; --section-soft-strong: #ccfbf1;
  --section-border: #99f6e4; --section-ink: #115e59;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-arrow-right-circle) {
  --section-from: #047857; --section-to: #065f46;
  --section-soft: #ecfdf5; --section-soft-strong: #d1fae5;
  --section-border: #a7f3d0; --section-ink: #065f46;
}
/* Payments and business values. */
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-cash-stack),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-currency-exchange),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-cash-coin) {
  --section-from: #047857; --section-to: #065f46;
  --section-soft: #ecfdf5; --section-soft-strong: #d1fae5;
  --section-border: #a7f3d0; --section-ink: #065f46;
}
/* Notes, schedules and credentials. */
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-sticky) {
  --section-from: #b45309; --section-to: #92400e;
  --section-soft: #fffbeb; --section-soft-strong: #fef3c7;
  --section-border: #fde68a; --section-ink: #92400e;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-calendar-event) {
  --section-from: #e11d48; --section-to: #9f1239;
  --section-soft: #fff1f2; --section-soft-strong: #ffe4e6;
  --section-border: #fecdd3; --section-ink: #9f1239;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-key) {
  --section-from: #be123c; --section-to: #881337;
  --section-soft: #fff1f2; --section-soft-strong: #ffe4e6;
  --section-border: #fecdd3; --section-ink: #881337;
}
/* Activity, integrations and information. */
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-braces) {
  --section-from: #0e7490; --section-to: #155e75;
  --section-soft: #ecfeff; --section-soft-strong: #cffafe;
  --section-border: #a5f3fc; --section-ink: #155e75;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-clock-history) {
  --section-from: #475569; --section-to: #334155;
  --section-soft: #f8fafc; --section-soft-strong: #f1f5f9;
  --section-border: #cbd5e1; --section-ink: #334155;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-info-circle) {
  --section-from: #2563eb; --section-to: #1e40af;
  --section-soft: #eff6ff; --section-soft-strong: #dbeafe;
  --section-border: #bfdbfe; --section-ink: #1e40af;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-question-circle) {
  --section-from: #7c3aed; --section-to: #5b21b6;
  --section-soft: #f5f3ff; --section-soft-strong: #ede9fe;
  --section-border: #ddd6fe; --section-ink: #5b21b6;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-list-ul) {
  --section-from: #0f766e; --section-to: #115e59;
  --section-soft: #f0fdfa; --section-soft-strong: #ccfbf1;
  --section-border: #99f6e4; --section-ink: #115e59;
}
/* Charts and performance. */
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-graph-up),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-bar-chart) {
  --section-from: #2563eb; --section-to: #1e40af;
  --section-soft: #eff6ff; --section-soft-strong: #dbeafe;
  --section-border: #bfdbfe; --section-ink: #1e40af;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-palette) {
  --section-from: #7c3aed; --section-to: #5b21b6;
  --section-soft: #faf5ff; --section-soft-strong: #f3e8ff;
  --section-border: #e9d5ff; --section-ink: #6b21a8;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-pie-chart) {
  --section-from: #e11d48; --section-to: #9f1239;
  --section-soft: #fff1f2; --section-soft-strong: #ffe4e6;
  --section-border: #fecdd3; --section-ink: #9f1239;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-trophy) {
  --section-from: #b45309; --section-to: #92400e;
  --section-soft: #fffbeb; --section-soft-strong: #fef3c7;
  --section-border: #fde68a; --section-ink: #92400e;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-box-seam) {
  --section-from: #0f766e; --section-to: #115e59;
  --section-soft: #f0fdfa; --section-soft-strong: #ccfbf1;
  --section-border: #99f6e4; --section-ink: #115e59;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-receipt) {
  --section-from: #4f46e5; --section-to: #3730a3;
  --section-soft: #eef2ff; --section-soft-strong: #e0e7ff;
  --section-border: #c7d2fe; --section-ink: #3730a3;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-send) {
  --section-from: #2563eb; --section-to: #1e40af;
  --section-soft: #eff6ff; --section-soft-strong: #dbeafe;
  --section-border: #bfdbfe; --section-ink: #1e40af;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-check2-circle),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-check2-all),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-plus-circle) {
  --section-from: #047857; --section-to: #065f46;
  --section-soft: #ecfdf5; --section-soft-strong: #d1fae5;
  --section-border: #a7f3d0; --section-ink: #065f46;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-x-circle) {
  --section-from: #e11d48; --section-to: #9f1239;
  --section-soft: #fff1f2; --section-soft-strong: #ffe4e6;
  --section-border: #fecdd3; --section-ink: #9f1239;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-building),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-person-plus) {
  --section-from: #2563eb; --section-to: #1e40af;
  --section-soft: #eff6ff; --section-soft-strong: #dbeafe;
  --section-border: #bfdbfe; --section-ink: #1e40af;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-chat-dots),
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-list-check) {
  --section-from: #0e7490; --section-to: #155e75;
  --section-soft: #ecfeff; --section-soft-strong: #cffafe;
  --section-border: #a5f3fc; --section-ink: #155e75;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-exclamation-triangle) {
  --section-from: #b45309; --section-to: #92400e;
  --section-soft: #fffbeb; --section-soft-strong: #fef3c7;
  --section-border: #fde68a; --section-ink: #92400e;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header > .bi-graph-up-arrow) {
  --section-from: #047857; --section-to: #065f46;
  --section-soft: #ecfdf5; --section-soft-strong: #d1fae5;
  --section-border: #a7f3d0; --section-ink: #065f46;
}

/* Repeated cards still get individual identities instead of becoming a wall
   of one colour. Live fragments keep these selectors after every refresh. */
#printshopCards .row > [class*="col-"]:nth-child(6n+1) > .card {
  --section-from:#2563eb; --section-to:#1e40af; --section-soft:#eff6ff; --section-soft-strong:#dbeafe; --section-border:#bfdbfe; --section-ink:#1e40af;
}
#printshopCards .row > [class*="col-"]:nth-child(6n+2) > .card {
  --section-from:#7c3aed; --section-to:#5b21b6; --section-soft:#f5f3ff; --section-soft-strong:#ede9fe; --section-border:#ddd6fe; --section-ink:#5b21b6;
}
#printshopCards .row > [class*="col-"]:nth-child(6n+3) > .card {
  --section-from:#047857; --section-to:#065f46; --section-soft:#ecfdf5; --section-soft-strong:#d1fae5; --section-border:#a7f3d0; --section-ink:#065f46;
}
#printshopCards .row > [class*="col-"]:nth-child(6n+4) > .card {
  --section-from:#c2410c; --section-to:#9a3412; --section-soft:#fff7ed; --section-soft-strong:#ffedd5; --section-border:#fed7aa; --section-ink:#9a3412;
}
#printshopCards .row > [class*="col-"]:nth-child(6n+5) > .card {
  --section-from:#0e7490; --section-to:#155e75; --section-soft:#ecfeff; --section-soft-strong:#cffafe; --section-border:#a5f3fc; --section-ink:#155e75;
}
#printshopCards .row > [class*="col-"]:nth-child(6n+6) > .card {
  --section-from:#e11d48; --section-to:#9f1239; --section-soft:#fff1f2; --section-soft-strong:#ffe4e6; --section-border:#fecdd3; --section-ink:#9f1239;
}
.content-inner .card[data-sms-event="created"]:has(> .card-header) {
  --section-from:#4f46e5; --section-to:#3730a3; --section-soft:#eef2ff; --section-soft-strong:#e0e7ff; --section-border:#c7d2fe; --section-ink:#3730a3;
}
.content-inner .card[data-sms-event="printing"]:has(> .card-header) {
  --section-from:#7c3aed; --section-to:#5b21b6; --section-soft:#f5f3ff; --section-soft-strong:#ede9fe; --section-border:#ddd6fe; --section-ink:#5b21b6;
}
.content-inner .card[data-sms-event="ready"]:has(> .card-header) {
  --section-from:#0f766e; --section-to:#115e59; --section-soft:#f0fdfa; --section-soft-strong:#ccfbf1; --section-border:#99f6e4; --section-ink:#115e59;
}
.content-inner .card[data-sms-event="booked"]:has(> .card-header) {
  --section-from:#c2410c; --section-to:#9a3412; --section-soft:#fff7ed; --section-soft-strong:#ffedd5; --section-border:#fed7aa; --section-ink:#9a3412;
}
.content-inner .card[data-sms-event="dispatched"]:has(> .card-header) {
  --section-from:#2563eb; --section-to:#1e40af; --section-soft:#eff6ff; --section-soft-strong:#dbeafe; --section-border:#bfdbfe; --section-ink:#1e40af;
}
.content-inner .card[data-sms-event="delivered"]:has(> .card-header) {
  --section-from:#047857; --section-to:#065f46; --section-soft:#ecfdf5; --section-soft-strong:#d1fae5; --section-border:#a7f3d0; --section-ink:#065f46;
}
.content-inner .card[data-sms-event="completed"]:has(> .card-header) {
  --section-from:#0e7490; --section-to:#155e75; --section-soft:#ecfeff; --section-soft-strong:#cffafe; --section-border:#a5f3fc; --section-ink:#155e75;
}
.content-inner .card[data-sms-event="cancelled"]:has(> .card-header) {
  --section-from:#e11d48; --section-to:#9f1239; --section-soft:#fff1f2; --section-soft-strong:#ffe4e6; --section-border:#fecdd3; --section-ink:#9f1239;
}

.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header {
  color: #fff;
  background: linear-gradient(120deg, var(--section-from), var(--section-to));
  border-bottom: 0;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header > .bi:first-child {
  color: #fff;
  background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.24);
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header .bi { color: currentColor; }
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header .card-title-group strong { color: #fff; }
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header .card-title-group small { color: rgba(255,255,255,.78); }
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header .text-secondary,
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header .form-check-label,
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header > a:not(.btn) {
  color: rgba(255,255,255,.86) !important;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header > .badge {
  color: #fff !important;
  background: rgba(255,255,255,.17) !important;
  border: 1px solid rgba(255,255,255,.22);
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-header .btn-light {
  --bs-btn-bg: rgba(255,255,255,.94);
  --bs-btn-border-color: rgba(255,255,255,.75);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) > .card-body {
  background: linear-gradient(145deg, var(--section-soft), var(--section-soft-strong));
  border-color: var(--section-border) !important;
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) .list-group-item {
  background: rgba(255,255,255,.5);
  border-color: var(--section-border);
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) .table { --bs-table-bg: transparent; }
.content-inner .card:not(.dashboard-panel):has(> .card-header) .table thead th {
  color: var(--section-ink);
  background: color-mix(in srgb, var(--section-soft-strong) 78%, #fff);
  border-color: var(--section-border);
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) .table tbody td {
  background: rgba(255,255,255,.5);
  border-color: color-mix(in srgb, var(--section-border) 72%, #fff);
}
.content-inner .card:not(.dashboard-panel):has(> .card-header) .table tbody tr:hover > td { background: rgba(255,255,255,.84); }
.content-inner .card:not(.dashboard-panel):has(> .card-header) .empty-state { color: var(--section-ink); }
.content-inner .card:not(.dashboard-panel):has(> .card-header) .empty-state .bi {
  color: #fff;
  background: linear-gradient(135deg, var(--section-from), var(--section-to));
  border-color: transparent;
}

/* Headline and launcher cards are fully coloured; their existing tint class
   becomes the full-card palette instead of colouring only the icon. */
.professional-stat,
.module-card {
  --tile-from: var(--page-section-from);
  --tile-to: var(--page-section-to);
  --tile-shadow: color-mix(in srgb, var(--page-section-to) 38%, transparent);
}
.professional-stat:has(.tint-indigo), .module-card:has(.tint-indigo) { --tile-from:#4f46e5; --tile-to:#3730a3; --tile-shadow:rgba(55,48,163,.38); }
.professional-stat:has(.tint-green),  .module-card:has(.tint-green)  { --tile-from:#15803d; --tile-to:#166534; --tile-shadow:rgba(22,101,52,.36); }
.professional-stat:has(.tint-amber),  .module-card:has(.tint-amber)  { --tile-from:#c2410c; --tile-to:#9a3412; --tile-shadow:rgba(154,52,18,.36); }
.professional-stat:has(.tint-red),    .module-card:has(.tint-red)    { --tile-from:#e11d48; --tile-to:#9f1239; --tile-shadow:rgba(159,18,57,.38); }
.professional-stat:has(.tint-blue),   .module-card:has(.tint-blue)   { --tile-from:#2563eb; --tile-to:#1e40af; --tile-shadow:rgba(30,64,175,.38); }
.professional-stat:has(.tint-purple), .module-card:has(.tint-purple) { --tile-from:#7c3aed; --tile-to:#5b21b6; --tile-shadow:rgba(91,33,182,.38); }
.professional-stat:has(.tint-slate),  .module-card:has(.tint-slate)  { --tile-from:#475569; --tile-to:#334155; --tile-shadow:rgba(51,65,85,.34); }
.professional-stat:has(.tint-teal),   .module-card:has(.tint-teal)   { --tile-from:#0d9488; --tile-to:#115e59; --tile-shadow:rgba(17,94,89,.36); }
.professional-stat:has(.tint-lime),   .module-card:has(.tint-lime)   { --tile-from:#4d7c0f; --tile-to:#3f6212; --tile-shadow:rgba(63,98,18,.36); }
.professional-stat:has(.tint-pink),   .module-card:has(.tint-pink)   { --tile-from:#db2777; --tile-to:#9d174d; --tile-shadow:rgba(157,23,77,.38); }
.professional-stat,
.module-card {
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--tile-from), var(--tile-to));
  border: 0;
  border-top: 0;
  box-shadow: 0 13px 28px -17px var(--tile-shadow);
}
.professional-stat::after,
.module-card::after {
  display: block;
  z-index: -1;
  width: 92px;
  height: 92px;
  right: -30px;
  bottom: -48px;
  border: 16px solid rgba(255,255,255,.12);
}
.professional-stat > .stat-icon,
.module-card > .stat-icon {
  color: #fff;
  background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.23);
}
.professional-stat .stat-value,
.professional-stat .stat-label,
.module-card .fw-bold { color: #fff; }
.professional-stat .stat-label { color: rgba(255,255,255,.84); }
.module-card .text-secondary { color: rgba(255,255,255,.78) !important; }
.module-card > .bi-chevron-right {
  color: #fff !important;
  background: rgba(255,255,255,.15);
}
a.professional-stat:hover,
a.module-card:hover {
  border: 0;
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -17px var(--tile-shadow);
  filter: saturate(1.08);
}
a.module-card:hover > .bi-chevron-right { color: var(--tile-to) !important; background: #fff; }

.page-orders .order-summary-card {
  --summary-from: #4f46e5;
  --summary-to: #3730a3;
  color: #fff;
  background: linear-gradient(135deg, var(--summary-from), var(--summary-to));
  border: 0;
  box-shadow: 0 12px 26px -18px var(--summary-to);
}
.page-orders .row > [class*="col-"]:nth-child(4n+2) .order-summary-card { --summary-from:#047857; --summary-to:#065f46; }
.page-orders .row > [class*="col-"]:nth-child(4n+3) .order-summary-card { --summary-from:#7c3aed; --summary-to:#5b21b6; }
.page-orders .row > [class*="col-"]:nth-child(4n+4) .order-summary-card { --summary-from:#c2410c; --summary-to:#9a3412; }
.page-orders .order-summary-card .text-secondary { color: rgba(255,255,255,.78) !important; }
.page-orders .order-summary-card .h4 { color: #fff; }

/* The live totals wrapper must not become an extra grid column. Its children
   are the responsive Bootstrap columns returned by the fragment. */
#shopTotals { display: contents; }

/* ----------------------------------------------------------- login page */
.login-page {
  min-height: 100dvh;
  margin: 0;
  color: var(--oms-text);
  background: #f6f8fc;
}
.login-shell {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(460px, 1.08fr) minmax(430px, .92fr);
}
.login-showcase {
  min-height: 100%;
  padding: clamp(34px, 4.5vw, 70px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--oms-grad-1) 96%, #020617) 0%, var(--oms-grad-2) 48%, var(--oms-grad-3) 100%);
}
.login-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .15;
  background-image: radial-gradient(rgba(255,255,255,.8) .7px, transparent .7px);
  background-size: 25px 25px;
  mask-image: linear-gradient(to bottom right, #000, transparent 72%);
}
.login-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(4px); }
.login-glow-one {
  width: 340px;
  height: 340px;
  top: 10%;
  right: -150px;
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 100px rgba(255,255,255,.05);
}
.login-glow-two {
  width: 220px;
  height: 220px;
  left: -100px;
  bottom: 5%;
  background: color-mix(in srgb, var(--oms-primary) 45%, transparent);
  border: 1px solid rgba(255,255,255,.1);
}
.login-brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  font-size: 21px;
}
.login-brand > span:last-child { display: grid; line-height: 1.2; }
.login-brand strong { font-size: 16px; font-weight: 780; letter-spacing: -.02em; }
.login-brand small { margin-top: 4px; color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .04em; }
.login-showcase-copy { width: min(610px, 100%); margin: auto 0; padding: 70px 0; position: relative; z-index: 1; }
.login-eyebrow {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px;
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.07);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
}
.login-showcase-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(43px, 5.2vw, 72px);
  font-weight: 790;
  line-height: .98;
  letter-spacing: -.065em;
}
.login-showcase-copy h2 span { color: rgba(255,255,255,.58); }
.login-showcase-copy > p {
  width: min(520px, 94%);
  margin: 26px 0 32px;
  color: rgba(255,255,255,.67);
  font-size: 14px;
  line-height: 1.75;
}
.login-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.login-feature-grid > div {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  backdrop-filter: blur(8px);
}
.login-feature-grid > div > i {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: rgba(255,255,255,.12);
  font-size: 13px;
}
.login-feature-grid span { display: grid; min-width: 0; }
.login-feature-grid strong { font-size: 10.5px; }
.login-feature-grid small { color: rgba(255,255,255,.48); font-size: 9px; white-space: nowrap; }
.login-showcase-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.5);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.login-showcase-footer span { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.12); }
.login-panel {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 80px);
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, var(--oms-primary-l), transparent 25rem),
    #f7f9fc;
}
.login-card { width: 100%; max-width: 455px; }
.login-mobile-brand { display: none; }
.login-heading { margin-bottom: 30px; }
.login-welcome {
  display: block;
  margin-bottom: 7px;
  color: var(--oms-primary);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.login-heading h1 { margin: 0; color: var(--oms-text); font-size: 27px; font-weight: 770; letter-spacing: -.045em; }
.login-heading p { margin: 8px 0 0; color: var(--oms-muted); font-size: 12.5px; }
.login-input .input-group-text { min-width: 49px; background: #fff; }
.login-input .form-control { border-left: 0; }
.login-input:focus-within .input-group-text { color: var(--oms-primary); border-color: var(--oms-primary); }
.login-input:focus-within .form-control { border-color: var(--oms-primary); box-shadow: 4px 0 0 0 color-mix(in srgb, var(--oms-primary) 12%, transparent); }
.login-input:focus-within .input-group-text { box-shadow: -4px 0 0 0 color-mix(in srgb, var(--oms-primary) 12%, transparent); }
.login-input .btn { min-width: 48px; border-color: var(--oms-border-strong); color: var(--oms-muted); }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; }
.login-submit i { transition: transform .16s ease; }
.login-submit:hover i { transform: translateX(3px); }
.login-help { margin: 22px 0 0; color: #94a0b1; font-size: 10.5px; text-align: center; }
.login-help i { margin-right: 4px; color: #22a06b; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1199.98px) {
  :root { --sidebar-w: 252px; }
  .topbar { padding-inline: 22px; }
  .content { padding-inline: 22px; }
  .login-feature-grid { grid-template-columns: 1fr; width: min(330px, 100%); }
  .login-feature-grid > div { min-height: 62px; }
}

@media (max-width: 991.98px) {
  :root { --topbar-h: 68px; }
  .sidebar {
    width: min(86vw, 310px);
    transform: translateX(-105%);
    box-shadow: 24px 0 60px -24px rgba(2,6,23,.65);
  }
  .sidebar.open { transform: translateX(0); box-shadow: 24px 0 60px -24px rgba(2,6,23,.65); }
  .sidebar.open + .sidebar-backdrop { display: block; animation: omsFadeIn .18s ease; }
  .main { margin-left: 0; }
  .content { padding: 20px 18px 52px; }
  .topbar { padding-inline: 18px; }
  .login-shell { display: block; }
  .login-showcase { display: none; }
  .login-panel { min-height: 100dvh; padding: 34px; }
  .login-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 58px; }
  .login-mobile-brand .brand-mark {
    width: 40px;
    height: 40px;
    color: #fff;
    background: linear-gradient(145deg, var(--oms-primary), var(--oms-primary-d));
    border: 0;
  }
  .login-mobile-brand strong { color: var(--oms-text); font-size: 16px; }
}

@media (max-width: 767.98px) {
  .topbar { gap: 11px; padding-inline: 13px; }
  .topbar .page-title { font-size: 16px; }
  .topbar .page-title + .small { font-size: 10px; }
  .topbar-menu { width: 38px; height: 38px; }
  .user-menu-trigger { min-height: 40px; padding: 2px; border: 0; background: transparent; box-shadow: none; }
  .user-menu-trigger:hover { transform: none; box-shadow: none; }
  .user-menu-chevron { display: none; }
  .content { padding: 16px 12px 44px; }
  .mobile-page-actions { overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .mobile-page-actions::-webkit-scrollbar { display: none; }
  .mobile-page-actions > * { flex: 1 0 auto; white-space: nowrap; }
  .card-header { min-height: 54px; padding: 13px 15px; flex-wrap: wrap; }
  .card-header > .ms-auto { margin-left: auto !important; }
  .card-header > .bi:first-child + span { min-width: 0; flex: 1 1 150px; }
  .card-header > .ms-auto { max-width: 100%; }
  .card-header-action { min-height: 34px; }
  .card-body { padding: 16px; }
  .content-inner,
  .content-inner .card,
  .content-inner .card-body,
  .content-inner .filter-bar,
  .content-inner .table-wrap { min-width: 0; }
  .stat-card { min-height: 92px; padding: 14px; gap: 11px; }
  .stat-icon { width: 43px; height: 43px; border-radius: 12px; }
  .stat-value { font-size: 23px; }
  .stat-label { font-size: 10.5px; line-height: 1.25; }
  .professional-stat > :not(.stat-icon),
  .dashboard-stat > :not(.stat-icon),
  .module-card > :not(.stat-icon) { min-width: 0; }
  .professional-stat .stat-value,
  .dashboard-stat .stat-value {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
  .module-card { min-height: 112px; }
  .module-card .text-secondary { overflow-wrap: anywhere; }
  .filter-bar { padding: 13px; }
  .filter-bar .row { --bs-gutter-y: .65rem; }
  .filter-bar .row > [class*="col-"] { min-width: 0; }
  .table-scroll {
    width: 100%;
    max-width: 100%;
    margin-right: -1px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)), linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) 100% 0,
                radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.12), transparent), radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.12), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 35px 100%, 35px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .table-scroll > .table:not(.table-sm) { min-width: 640px; }
  .table > :not(caption) > * > * { padding: 11px 13px; }
  canvas { max-width: 100% !important; }
  .due-card { min-height: 0; }
  .empty-state { padding: 38px 16px; }
  .login-panel { padding: 26px; }
}

@media (max-width: 575.98px) {
  body { font-size: 13.5px; }
  .content { padding-inline: 10px; }
  .section-heading {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .section-heading p { max-width: 330px; }
  .section-date { min-height: 30px; padding-block: 5px; }
  .sidebar-context { margin-top: 10px; }
  .topbar .flex-grow-1 { max-width: calc(100vw - 114px); }
  .card,
  .table-wrap,
  .filter-bar,
  .stat-card { border-radius: 13px; }
  .card-header { font-size: 13px; }
  .card-header > .bi:first-child { width: 29px; height: 29px; }
  .content-inner .card-header > .bi:first-child + span { flex-basis: 125px; }
  .content-inner .card-header > .ms-auto.d-flex { flex-wrap: wrap; justify-content: flex-end; }
  .stat-card { padding: 12px; }
  .stat-icon { width: 39px; height: 39px; font-size: 17px; }
  .stat-value { font-size: 21px; }
  .professional-stat .stat-value[style],
  .dashboard-stat .stat-value[style] { font-size: clamp(15px, 4.8vw, 19px) !important; }
  .module-card { min-height: 0; padding: 15px; }
  .page-orders .order-summary-card .h4 {
    font-size: 16px;
    overflow-wrap: anywhere;
  }
  .content-inner .card-body div.row > div.col-5,
  .content-inner .card-body div.row > div.col-6,
  .content-inner .card-body div.row > div.col-7,
  .content-inner .card-body div.row > div.col-8 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .content-inner .card-body > .d-flex.gap-2 { flex-wrap: wrap; }
  .content-inner .card-body > .d-flex.gap-2 > .btn,
  .content-inner .card-body > .d-flex.gap-2 > form { flex: 1 1 145px; }
  .page-sales .filter-bar .d-flex.flex-wrap > .btn { flex: 1 1 calc(50% - .25rem); }
  .filter-bar .fs-5 { font-size: 1rem !important; overflow-wrap: anywhere; }
  .list-group-item > .d-flex.justify-content-between { flex-wrap: wrap; }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 34px; }
  .form-control,
  .form-select { min-height: 44px; }
  .modal-dialog { margin: 10px; }
  .login-panel { align-items: start; padding: 22px 18px; }
  .login-mobile-brand { margin-bottom: 48px; }
  .login-heading { margin-bottom: 25px; }
  .login-heading h1 { font-size: 24px; }
  .login-heading p { max-width: 310px; line-height: 1.6; }
  .login-help { margin-top: 18px; }
}

@media (max-width: 380px) {
  .stat-card { gap: 8px; }
  .stat-icon { width: 36px; height: 36px; }
  .professional-stat > .stat-icon,
  .dashboard-stat > .stat-icon { width: 33px; height: 33px; font-size: 15px; }
  .stat-value,
  .professional-stat .stat-value,
  .dashboard-stat .stat-value { font-size: 17px !important; }
  .stat-label { font-size: 9.3px; letter-spacing: .035em; }
  .professional-stat,
  .dashboard-stat { padding: 10px; }
  .page-printshops #printshopCards .row.text-center .fw-bold { font-size: 12px !important; }
  .page-printshops #printshopCards .row.text-center .text-secondary { font-size: 9.5px !important; }
  .content-inner .card-header > .bi:first-child + span { flex-basis: 105px; }
  .card-header-action { width: 100%; justify-content: center; }
  .content-inner .card-body > .d-flex.gap-2 > .btn,
  .content-inner .card-body > .d-flex.gap-2 > form { flex-basis: 100%; }
}

@keyframes omsFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  body { background: #fff !important; }
  .sidebar,
  .sidebar-backdrop,
  .topbar,
  .mobile-page-actions,
  .no-print { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  .card,
  .table-wrap { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ------------------------------------------------------- notifications */
.notif-dot {
  position: absolute; top: 2px; right: 2px;
  font-size: 10px; padding: 2px 5px; min-width: 17px;
}
.notif-menu { width: min(370px, calc(100vw - 24px)); }
.notif-list { max-height: 62vh; overflow-y: auto; }

.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-bottom: 1px solid var(--oms-border);
  color: inherit; text-decoration: none;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover      { background: #f8fafc; }
.notif-item.is-new     { background: var(--oms-primary-l); }
.notif-item.is-new:hover { background: var(--oms-primary-s); }

.notif-icon {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 15px;
}
.notif-title { display: block; font-weight: 620; font-size: 13px; line-height: 1.35; }
.notif-body  { display: block; font-size: 12px; color: var(--oms-muted); margin-top: 1px; }
.notif-when  { display: block; font-size: 11px; color: var(--oms-muted); margin-top: 3px; }

/* A counter that just changed, so the eye catches it without a reload. */
@keyframes liveFlash {
  0%   { background: var(--oms-primary-s); }
  100% { background: transparent; }
}
.live-flash { animation: liveFlash 1.1s ease-out; border-radius: 6px; }

.live-stale { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 1020; }

@media (prefers-reduced-motion: reduce) {
  .live-flash { animation: none; }
}

/* ------------------------------------------------------ live filtering */
/* While a refetch is in flight the results dim slightly and stop taking
   clicks. Deliberately understated: at 350ms it flickers if it shouts. */
[data-live-results] {
  transition: opacity .12s ease;
  position: relative;
}
[data-live-results].is-refreshing {
  opacity: .55;
  pointer-events: none;
}
[data-live-results].is-refreshing::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%2364748b' stroke-width='5' stroke-linecap='round' stroke-dasharray='90 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E")
              no-repeat center 60px;
}

@media (prefers-reduced-motion: reduce) {
  [data-live-results] { transition: none; }
}

/* ---------------------------------------------------------------------
   Type-to-find select  (assets/js/app.js -> enhanceSelect)

   The real <select> stays in the DOM and stays the field that posts; it is
   only moved out of sight. With JavaScript off .ss-native never gets its
   class and the plain dropdown is what the operator sees.
   --------------------------------------------------------------------- */
.ss                { position: relative; }
.ss .ss-native     { position: absolute; width: 1px; height: 1px; padding: 0;
                     margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

.ss-menu           { display: none; position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 3px);
                     max-height: 264px; overflow-y: auto;
                     background: var(--oms-surface); border: 1px solid var(--oms-border);
                     border-radius: var(--oms-radius-sm, 10px); box-shadow: var(--oms-shadow);
                     padding: 4px; }
.ss.is-open .ss-menu { display: block; }

.ss-item           { display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
                     padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
                     line-height: 1.3; }
.ss-item:hover,
.ss-item.is-active { background: var(--oms-primary-l); color: var(--oms-primary-d); }
.ss-item mark      { background: var(--oms-primary-s); color: inherit; padding: 0 1px; border-radius: 3px; }
.ss-note           { flex: none; font-size: 11.5px; color: var(--oms-muted); font-variant-numeric: tabular-nums; }
.ss-item.is-active .ss-note { color: var(--oms-primary-d); }
.ss-empty          { padding: 9px; font-size: 13px; color: var(--oms-muted); }

/* ---------------------------------------------------------------------
   Company colour picker  (Setup > Business Profile)

   A set another company already holds is shown rather than hidden, so it
   is obvious the colours are shared out across companies and not simply
   missing.
   --------------------------------------------------------------------- */
.theme-pick        { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.theme-chip        { display: flex; align-items: center; gap: 8px; cursor: pointer;
                     border: 1px solid var(--oms-border); border-radius: var(--oms-radius-sm, 10px);
                     padding: 8px 10px; font-size: 13px; position: relative; }
.theme-chip input  { position: absolute; opacity: 0; pointer-events: none; }
.theme-chip:hover  { border-color: var(--oms-border-strong, #cbd5e1); }
.theme-chip:has(input:checked) { border-color: var(--oms-primary); box-shadow: 0 0 0 2px var(--oms-primary-s); }
.theme-chip.is-taken { opacity: .5; cursor: not-allowed; background: var(--oms-surface-soft, #f8fafc); }

.theme-dots        { display: inline-flex; flex: none; }
.theme-dots span   { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--oms-surface); margin-left: -5px; }
.theme-dots span:first-child { margin-left: 0; }
.theme-name        { font-weight: 600; }
.theme-owner       { font-size: 10.5px; color: var(--oms-muted); margin-left: auto; }

/* ---------------------------------------------------------------------
   Per-user screen picker  (Setup > Users)

   Grouped the way the sidebar is, so the form reads like the app it is
   granting access to.
   --------------------------------------------------------------------- */
.perm-pick        { max-height: 340px; overflow-y: auto; background: var(--oms-surface-soft, #f8fafc); }
.perm-group       { margin-bottom: 10px; }
.perm-group:last-child { margin-bottom: 0; }
.perm-group-head  { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
                    text-transform: uppercase; letter-spacing: .06em; color: var(--oms-muted);
                    padding: 2px 4px 4px; border-bottom: 1px solid var(--oms-border); margin-bottom: 4px; }
.perm-group-head > span:first-child { flex: 1; }

.perm-item        { display: flex; gap: 8px; align-items: flex-start; padding: 5px 6px;
                    border-radius: 7px; cursor: pointer; }
.perm-item:hover  { background: var(--oms-surface); }
.perm-item input  { margin-top: 2px; flex: none; }
.perm-name        { display: block; font-size: 13px; font-weight: 600; }
.perm-help        { display: block; font-size: 11.5px; color: var(--oms-muted); line-height: 1.35; }

/* ---------------------------------------------------------------------
   List tables wear the company colour

   The header, the panel behind the rows and the borders all read the --oms-*
   variables Theme::styleBlock() writes into the head (see the page-section
   rules above), so switching company repaints the table with no work here.
   What follows is only what those rules do not already cover.
   --------------------------------------------------------------------- */

/* A ticked row takes a little of the accent, so a selection reads as part of
   the same scheme rather than as a grey the theme does not know about. */
body[class*="page-"] .table-wrap .table tbody tr:has(.row-pick:checked) > td {
  background: color-mix(in srgb, var(--oms-primary) 14%, #fff);
}

/* An overdue or due-today row keeps its own red and amber -- that is meaning,
   not decoration, and it must not be washed out by the accent. Those rules
   already carry !important, so nothing more is needed here; this note is so
   the next person does not add the tint back on top of them. */