/* ==========================================================================
   American Band Rep Portal — supplemental styles (copied from the StylePLUS Dealer Portal so both look alike)
   Loaded AFTER assets/css/styles.css.

   Why this file exists: styles.css is a PRECOMPILED Tailwind build that only
   contains the ~1900 classes the Metronic demos happened to use. There is no
   Tailwind step in this project (deploy is plain static + serverless), so any
   class not already in that build has to be defined here by hand.

   Before using a Tailwind class in a new page, check it exists:
       grep -x 'md:grid-cols-2' scratch/css-classes.txt
   or just add it below. Everything here is written against Metronic's own
   custom properties (--primary, --muted-foreground, …) so light and dark
   themes both work without a second set of rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Semantic tokens Metronic doesn't expose as variables.
   The palette values are lifted from its own --color-* scale so these sit in
   the same colour space as everything else rather than being eyeballed.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   0. Brand accent — American Band.
   The ABA logo neon (#DFFE12) cannot carry text on white (1.1:1), so on light
   surfaces --primary is near-black #1F1F1F (ABA's own site uses black buttons;
   16.6:1 under white text). On dark surfaces — the black sidebar and the dark
   theme — --primary is the neon itself with near-black text on it (17:1).
   --brand keeps the neon for decorative use.
   -------------------------------------------------------------------------- */
:root {
  --primary:            #1F1F1F;
  --primary-foreground: var(--color-white);
  --brand:              #DFFE12;
}

.dark {
  --primary:            #DFFE12;
  --primary-foreground: #1F1F1F;
}

:root {
  --success:            var(--color-green-600);
  --success-foreground: var(--color-white);
  --success-soft:       var(--color-green-50);
  --warning:            var(--color-yellow-600);
  --warning-foreground: var(--color-white);
  --warning-soft:       var(--color-yellow-50);
  --info:               var(--color-blue-600);
  --info-foreground:    var(--color-white);
  --info-soft:          var(--color-blue-50);
  --violet:             var(--color-violet-600);
  --violet-soft:        var(--color-violet-50);
}

.dark {
  --success-soft: color-mix(in oklch, var(--color-green-950)  70%, transparent);
  --warning-soft: color-mix(in oklch, var(--color-yellow-950) 70%, transparent);
  --info-soft:    color-mix(in oklch, var(--color-blue-950)   70%, transparent);
  --violet-soft:  color-mix(in oklch, var(--color-violet-950) 70%, transparent);
}

/* --------------------------------------------------------------------------
   2. Utility classes missing from the compiled build.
   Named exactly as Tailwind would, so that if a real build step is ever added
   these rules can simply be deleted rather than hunted down in the markup.
   -------------------------------------------------------------------------- */
.grid-cols-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6     { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.line-clamp-1,
.line-clamp-2,
.line-clamp-3    { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1    { -webkit-line-clamp: 1; }
.line-clamp-2    { -webkit-line-clamp: 2; }
.line-clamp-3    { -webkit-line-clamp: 3; }
.opacity-60      { opacity: .6; }
.opacity-70      { opacity: .7; }
.max-w-lg        { max-width: 32rem; }
.max-w-md        { max-width: 28rem; }
.max-w-xl        { max-width: 36rem; }
.min-w-0         { min-width: 0; }
.mt-0\.5         { margin-top: .125rem; }
.mt-1            { margin-top: .25rem; }
.gap-y-2         { row-gap: .5rem; }
.ms-3            { margin-inline-start: .75rem; }
.mt-8            { margin-top: 2rem; }
.tabular-nums    { font-variant-numeric: tabular-nums; }

/* Used throughout the dark sidebar. layout-10's markup references it, but the
   starter-kit build never compiled it — only .kt-link-inverse exists there.
   Scoped regions carry their own --foreground, so this resolves light inside
   the dark sidebar and dark on a light page, which is what "inverse" meant. */
.text-inverse    { color: var(--foreground); }
.whitespace-pre-wrap { white-space: pre-wrap; }

@media (min-width: 48rem) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:flex        { display: flex; }
  .md\:hidden      { display: none; }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
}
@media (min-width: 80rem) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   3. Status, priority and area colour chips.
   One driver class (.sp-chip) plus a modifier, so a status badge is styled in
   exactly one place no matter which of the five screens renders it.
   -------------------------------------------------------------------------- */
.sp-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .1875rem .5rem; border-radius: .375rem;
  font-size: .75rem; font-weight: 500; line-height: 1.25rem;
  white-space: nowrap;
}
.sp-chip i { font-size: .8125rem; }

.sp-chip--planning    { background: var(--muted);        color: var(--muted-foreground); }
.sp-chip--active      { background: var(--info-soft);    color: var(--info); }
.sp-chip--on_hold     { background: var(--warning-soft); color: var(--warning); }
.sp-chip--blocked     { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }
.sp-chip--done        { background: var(--success-soft); color: var(--success); }
.sp-chip--archived    { background: var(--muted);        color: var(--muted-foreground); }

.sp-chip--todo        { background: var(--muted);        color: var(--muted-foreground); }
.sp-chip--in_progress { background: var(--info-soft);    color: var(--info); }
.sp-chip--review      { background: var(--violet-soft);  color: var(--violet); }

.sp-chip--pending     { background: var(--muted);        color: var(--muted-foreground); }
.sp-chip--at_risk     { background: var(--warning-soft); color: var(--warning); }
.sp-chip--hit         { background: var(--success-soft); color: var(--success); }
.sp-chip--missed      { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }

.sp-chip--confidential {
  background: color-mix(in oklch, var(--destructive) 10%, transparent);
  color: var(--destructive);
  border: 1px solid color-mix(in oklch, var(--destructive) 25%, transparent);
}

/* Priority reads as a dot rather than another badge — with a status chip
   already on every row, a second full badge turns the list into noise. */
.sp-priority {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; color: var(--muted-foreground); white-space: nowrap;
}
.sp-priority::before {
  content: ''; width: .5rem; height: .5rem; border-radius: 9999px; flex: none;
  background: var(--muted-foreground);
}
.sp-priority--urgent::before { background: var(--destructive); }
.sp-priority--high::before   { background: var(--warning); }
.sp-priority--medium::before { background: var(--info); }
.sp-priority--low::before    { background: var(--color-zinc-400); }

/* --------------------------------------------------------------------------
   4. Initials avatar. No file uploads anywhere in this app — colour comes
   from users.avatar_color so a person's chip never changes on them.
   -------------------------------------------------------------------------- */
.sp-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 9999px; flex: none;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  color: var(--color-white); background: var(--color-zinc-500);
  user-select: none;
}
.sp-avatar--sm { width: 1.5rem;  height: 1.5rem;  font-size: .625rem; }
.sp-avatar--lg { width: 2.75rem; height: 2.75rem; font-size: .9375rem; }

.sp-avatar--primary     { background: var(--primary); }
.sp-avatar--success     { background: var(--success); }
.sp-avatar--warning     { background: var(--warning); }
.sp-avatar--info        { background: var(--info); }
.sp-avatar--violet      { background: var(--violet); }
.sp-avatar--destructive { background: var(--destructive); }
.sp-avatar--zinc        { background: var(--color-zinc-500); }
/* Brand mark: the white-lettered ABA logo, made for the black sidebar. */
.sp-mark {
  height: 2.25rem; width: auto; flex: none; display: block;
}

.sp-avatar--empty {
  background: transparent; border: 1px dashed var(--input); color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   7. Cards / links / empty states
   -------------------------------------------------------------------------- */
/* Whole-card link, without wrapping the card in an <a>.
   A card that contains its own links (a website, a tag) cannot itself be an
   anchor — HTML forbids nested anchors and the parser silently tears the card
   apart. So the card stays a <div>, one inner link stretches an invisible
   ::after over the whole surface, and anything else that must stay clickable
   is lifted above it with .sp-above. */
.sp-link-card { display: block; position: relative;
                transition: border-color .15s ease, box-shadow .15s ease; }

.sp-stretch { text-decoration: none; color: inherit; }
.sp-stretch::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
.sp-stretch:hover { color: var(--primary); }

/* Sits above the stretched overlay so it remains independently clickable. */
.sp-above { position: relative; z-index: 2; }

/* Keyboard focus has to be visible on the card, since the focused element is
   now a link inside it rather than the card itself. */
.sp-link-card:focus-within { border-color: var(--primary); }
.sp-stretch:focus-visible { outline: none; }
.sp-link-card:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--input));
  box-shadow: 0 1px 3px rgb(0 0 0 / .06);
}

.sp-stat__value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--mono); }
.sp-stat__label { font-size: .8125rem; color: var(--muted-foreground); margin-top: .25rem; }

.sp-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: var(--muted-foreground);
}
.sp-empty i { font-size: 1.75rem; opacity: .5; }

/* --------------------------------------------------------------------------
   9. Login page
   -------------------------------------------------------------------------- */
.sp-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: var(--muted);
}
.sp-login__card {
  width: 100%; max-width: 25rem; background: var(--background);
  border: 1px solid var(--border); border-radius: .75rem;
  padding: 2rem; box-shadow: 0 4px 24px rgb(0 0 0 / .06);
}
.sp-login__brand {
  display: flex; flex-direction: column; align-items: center; gap: .375rem; margin-bottom: 1.75rem;
}
.sp-login__logo {
  width: 11rem; height: auto; display: block; margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   10. Toasts — bottom-right, non-blocking. Never use alert(): a modal dialog
   in this app would block the extension-driven browser session.
   -------------------------------------------------------------------------- */
.sp-toasts {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.sp-toast {
  pointer-events: auto; min-width: 16rem; max-width: 24rem;
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .75rem .875rem; border-radius: .5rem;
  background: var(--mono); color: var(--mono-foreground);
  font-size: .8125rem; box-shadow: 0 8px 24px rgb(0 0 0 / .18);
  animation: sp-toast-in .18s ease-out;
}
.sp-toast--error   { background: var(--destructive); color: var(--color-white); }
.sp-toast--success { background: var(--success);     color: var(--color-white); }
@keyframes sp-toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

/* Screen-reader-only, for labels the layout doesn't show. */
.sp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------------------
   Shared components carried over from the Management Suite (same names, so a
   pattern learned in one app reads the same in the other).
   -------------------------------------------------------------------------- */
.kt-footer { flex-shrink: 0; }
.sp-modal {
  display: flex; position: fixed; inset: 0; z-index: 100;
  align-items: flex-start; justify-content: center;
  background: rgb(0 0 0 / .45); overflow-y: auto; padding: 3rem 1rem;
}
.sp-modal__panel {
  width: 100%; max-width: 34rem; background: var(--background);
  border: 1px solid var(--border); border-radius: .75rem; margin-top: 8vh; align-self: flex-start;
}
.sp-modal__panel--wide { max-width: 46rem; }
.sp-tablewrap { width: 100%; overflow-x: auto; }
.sp-dtable { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.sp-dtable th, .sp-dtable td {
  padding: .625rem .75rem; text-align: left; border-bottom: 1px solid var(--border);
  vertical-align: middle; white-space: nowrap;
}
.sp-dtable thead th {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--muted-foreground); background: var(--muted);
}
.sp-dtable tbody tr:hover { background: color-mix(in oklch, var(--accent) 45%, transparent); }
.sp-dtable tbody tr:last-child td { border-bottom: 0; }
.sp-dtable__num  { text-align: right !important; font-variant-numeric: tabular-nums; }
.sp-dtable__name { font-weight: 500; color: var(--mono); text-decoration: none; }
.sp-dtable__name:hover { color: var(--primary); }
.sp-dtable__sub  { display: block; margin-top: .125rem; font-size: .6875rem; color: var(--muted-foreground); }
.sp-dtable__wrap { white-space: normal !important; min-width: 14rem; }
.sp-notice {
  display: flex; gap: .625rem; padding: .75rem .875rem; border-radius: .5rem;
  font-size: .8125rem; line-height: 1.45;
}
.sp-notice i { font-size: 1rem; flex-shrink: 0; margin-top: .0625rem; }
.sp-notice--warn { background: var(--warning-soft); color: var(--warning); }
.sp-notice--bad  { background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive); }
.sp-notice--info { background: var(--info-soft); color: var(--info); }
.sp-notice--ok   { background: var(--success-soft); color: var(--success); }
.sp-deflist { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.sp-deflist > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .8125rem; }
.sp-deflist dt { color: var(--muted-foreground); flex-shrink: 0; }
.sp-deflist dd { color: var(--foreground); text-align: right; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sp-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--border); }
.sp-tabs__btn { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .75rem; font-size: .875rem;
  font-weight: 500; color: var(--secondary-foreground); border-bottom: 2px solid transparent; background: none; cursor: pointer; }
.sp-tabs__btn:hover { color: var(--foreground); }
.sp-tabs__btn.is-on { color: var(--primary); border-bottom-color: var(--primary); }
.sp-tabs__n { font-size: .6875rem; background: var(--muted); border-radius: 9999px; padding: 0 .375rem; color: var(--secondary-foreground); }

/* ==========================================================================
   Dealer Portal components (dp-)
   ========================================================================== */
.dp-text-danger { color: var(--destructive); }
.dp-muted { color: var(--muted-foreground); }

/* ---- status chips: RMA, order and dealer states share .sp-chip's shape ---- */
.dp-st--requested { background: var(--warning-soft); color: var(--warning); }
.dp-st--approved  { background: var(--info-soft);    color: var(--info); }
.dp-st--rejected  { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }
.dp-st--received  { background: var(--violet-soft);  color: var(--violet); }
.dp-st--credited  { background: var(--success-soft); color: var(--success); }
.dp-st--closed    { background: var(--muted);        color: var(--muted-foreground); }
.dp-st--cancelled { background: var(--muted);        color: var(--muted-foreground); }
.dp-st--o-open      { background: var(--info-soft);    color: var(--info); }
.dp-st--o-partial   { background: var(--warning-soft); color: var(--warning); }
.dp-st--o-complete  { background: var(--success-soft); color: var(--success); }
.dp-st--o-cancelled { background: var(--muted);        color: var(--muted-foreground); }
.dp-st--d-active   { background: var(--success-soft); color: var(--success); }
.dp-st--d-on_hold  { background: var(--warning-soft); color: var(--warning); }
.dp-st--d-inactive { background: var(--muted);        color: var(--muted-foreground); }

/* ---- staff "view as" bar ---- */
.dp-viewbar { background: var(--muted); border-bottom: 1px solid var(--border); margin: -1.25rem 0 1rem; color: var(--secondary-foreground); }
.dp-viewbar--on { background: var(--warning-soft); color: var(--warning); }
.dp-viewbar--on b { color: var(--mono); }
.dp-viewpick { width: auto; min-width: 14rem; max-width: 100%; }

/* ---- KPI tiles ---- */
.dp-kpis { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.dp-kpi { display: flex; flex-direction: column; gap: .375rem; padding: 1.25rem; border: 1px solid var(--border);
  border-radius: .75rem; background: var(--background); text-decoration: none; color: inherit; min-width: 0; }
a.dp-kpi:hover { border-color: color-mix(in oklch, var(--primary) 40%, var(--input)); }
.dp-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dp-kpi__label { font-size: .8125rem; color: var(--secondary-foreground); font-weight: 500; }
.dp-kpi__icon { width: 2.25rem; height: 2.25rem; border-radius: .5rem; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.125rem; background: color-mix(in oklch, var(--primary) 12%, transparent); color: var(--primary); }
.dp-kpi__value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--mono); font-variant-numeric: tabular-nums; }
.dp-kpi__value--pending { font-size: 1rem; font-weight: 500; color: var(--muted-foreground); line-height: 1.75rem; }
.dp-kpi__sub { font-size: .75rem; color: var(--muted-foreground); }
.dp-kpi__sub--warn { color: var(--warning); font-weight: 500; }
/* Dealer dashboard: open invoices by age, a row of 5 under the KPIs. */
.dp-aging__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .625rem; }
.dp-aging { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dp-aging--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 64rem) { .dp-aging { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .dp-aging { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dp-kpi--compact { padding: 1rem 1.25rem; }
.dp-kpi--compact .dp-kpi__value { font-size: 1.25rem; }
.dp-kpi__value--warn { color: var(--warning); }
/* Invoices page: a past-due date; six tabs that must wrap inside the card header on a phone. */
.dp-tabs-fit { max-width: 100%; min-width: 0; }
/* Phone: Invoice · Order · Due · Open only, so the amount stays on screen without a sideways scroll. */
@media (max-width: 40rem) { .dp-inv .dp-inv__opt { display: none; } }
/* Staff Open balances: the selected bucket's column is emphasized; on a phone it's the only amount column left. */
.dp-ar .dp-ar__on { font-weight: 600; color: var(--mono); background: color-mix(in oklch, var(--primary) 6%, transparent); }
@media (max-width: 40rem) { .dp-ar .dp-ar__opt { display: none; } }
/* Invoice page: payment strip + actions over the invoice PDF (rendered server-side, shown from a blob: URL). */
.dp-invbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: .75rem; }
.dp-invbar__facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0; }
.dp-invbar__facts dt { font-size: .75rem; color: var(--muted-foreground); }
.dp-invbar__facts dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; }
.dp-invbar__facts dd.dp-past-due { color: var(--warning); }
.dp-invbar__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dp-invbar__pays { margin-bottom: .75rem; }
.dp-invpages { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; border-radius: .75rem; background: var(--muted); }
.dp-invpages__page { display: block; width: 100%; max-width: 51rem; height: auto; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.dp-invpages__msg { padding: 4rem 1rem; font-size: .875rem; color: var(--secondary-foreground); text-align: center; }
@media (max-width: 40rem) { .dp-invpages { padding: .5rem; gap: .5rem; } }
/* Print: only the invoice pages, one per sheet, edge to edge (the PDF carries its own margins). */
@media print {
  @page { size: letter; margin: 0; }
  body:has(.dp-invpages) .kt-sidebar, body:has(.dp-invpages) .kt-header, body:has(.dp-invpages) footer,
  body:has(.dp-invpages) #content > .kt-container-fixed:first-child, .dp-invbar, .dp-invbar__pays { display: none !important; }
  body:has(.dp-invpages) .kt-wrapper, body:has(.dp-invpages) main, body:has(.dp-invpages) #dp_content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .dp-invpages { display: block; padding: 0; background: none; }
  .dp-invpages__page { width: 100%; max-width: none; box-shadow: none; break-after: page; }
  .dp-invpages__page:last-child { break-after: auto; }
}
.dp-past-due { color: var(--warning); font-weight: 500; }

/* ---- two-column dashboard ---- */
.dp-grid2 { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .dp-grid2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.dp-stack { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* ---- forms ---- */
.dp-form { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .dp-form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dp-form__full { grid-column: 1 / -1; }
.dp-field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.dp-field__hint { font-size: .75rem; color: var(--muted-foreground); }
.dp-req::after { content: ' *'; color: var(--destructive); }

/* ---- RMA line editor ---- */
.dp-lines td { padding: .375rem .375rem; vertical-align: top; }
.dp-lines td:first-child { padding-inline-start: 0; }
.dp-lines .kt-input { min-width: 0; }
.dp-lines__sku  { width: 30%; }
.dp-lines__qty  { width: 6.5rem; }
.dp-lines__x    { width: 2.5rem; }
@media (max-width: 40rem) {
  .dp-lines, .dp-lines tbody, .dp-lines tr, .dp-lines td { display: block; width: 100% !important; }
  .dp-lines thead { display: none; }
  .dp-lines tr { border: 1px solid var(--border); border-radius: .5rem; padding: .5rem; margin-bottom: .5rem; }
}

/* ---- RMA progress steps ---- */
.dp-steps { display: flex; gap: .25rem; flex-wrap: wrap; }
.dp-step { flex: 1 1 6rem; display: flex; flex-direction: column; gap: .375rem; font-size: .75rem; color: var(--muted-foreground); }
.dp-step__bar { height: .3125rem; border-radius: 9999px; background: var(--muted); }
.dp-step--done .dp-step__bar { background: var(--primary); }
.dp-step--done { color: var(--secondary-foreground); }
.dp-step--now  { color: var(--mono); font-weight: 600; }
.dp-step--now .dp-step__bar { background: var(--primary); }
.dp-step--stop .dp-step__bar { background: var(--destructive); }

/* ---- the big RMA number ---- */
.dp-rmanum { font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; color: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- timeline ---- */
.dp-timeline { display: flex; flex-direction: column; }
.dp-tl { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.dp-tl:last-child { border-bottom: 0; }
.dp-tl__dot { width: 2rem; height: 2rem; border-radius: 9999px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; background: var(--muted); color: var(--secondary-foreground); font-size: .875rem; }
.dp-tl__body { min-width: 0; flex: 1; }
.dp-tl__head { font-size: .8125rem; color: var(--foreground); }
.dp-tl__when { font-size: .75rem; color: var(--muted-foreground); }
.dp-tl__text { font-size: .8125rem; margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--secondary-foreground); }
.dp-tl--internal { background: var(--warning-soft); border-radius: .5rem; padding-inline: .5rem; }
/* Order page: one Freshdesk ticket about the order (a <details>, newest open). */
.dp-ordtk { border: 1px solid var(--border); border-radius: .75rem; padding: .75rem 1rem; }
.dp-ordtk__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; cursor: pointer; }
.dp-tl__tag { font-size: .6875rem; font-weight: 600; color: var(--warning); text-transform: uppercase; letter-spacing: .03em; margin-inline-start: .375rem; }

/* ---- one-time link box ---- */
.dp-linkbox { display: flex; gap: .5rem; align-items: stretch; }
.dp-linkbox .kt-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }

/* ---- integration rows ---- */
.dp-integ { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.dp-integ:last-child { border-bottom: 0; }
.dp-integ__dot { width: .625rem; height: .625rem; border-radius: 9999px; margin-top: .4rem; flex: none; background: var(--color-zinc-400); }
.dp-integ__dot--on { background: var(--success); }

/* ---- source notes under a list ---- */
.dp-sources { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .75rem; color: var(--muted-foreground); }
.dp-sources i { font-size: .8125rem; }

/* ---- widths / sizes the compiled bundle lacks ---- */
.dp-narrow { width: 100%; max-width: 40rem; }
.dp-medium { width: 100%; max-width: 56rem; }
.dp-bigicon { font-size: 2.5rem; line-height: 1; }

/* ---- Marketing → Files (Box embed), same rules as the Management Suite ---- */
.sp-boxbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sp-boxwrap { padding: 0 !important; }
.sp-boxframe {
  display: block; width: 100%; min-height: 26rem; border: 0;
  border-bottom-left-radius: .625rem; border-bottom-right-radius: .625rem;
  background: var(--muted);
}

.dp-oo-note { display: block; }

/* ---- Sign-in, set-password and forgot-password pages: black page, card unchanged (Jeff, 2026-10-13) ---- */
.sp-login.dp-login--black { background: #000; }
.dp-login--black .sp-login__card { border-color: #000; box-shadow: 0 8px 40px rgb(0 0 0 / .5); }
.dp-nowrap { white-space: nowrap; }

/* ---- Black sidebar on the interior pages (Jeff, 2026-10-13); the content area stays white ----
   The sidebar carries Metronic's `.dark` class, which re-scopes its tokens so text, icons, hover and
   dividers flip to their light-on-dark values. On top of that:
   - true black, not the dark theme's near-black;
   - --primary is the ABA neon inside the sidebar only, for the active item and hover text. */
.dp-sidebar {
  background: #000 !important;
  border-color: #1c1c1c !important;
  --primary: #DFFE12;
  color: var(--foreground);
}
.dp-sidebar .kt-menu-item.active > .kt-menu-link { background: rgb(255 255 255 / .08); }
.dp-sidebar .kt-menu-link:hover { background: rgb(255 255 255 / .06); }

/* ---- sortable table headers (Dealer accounts) ---- */
.dp-sort {
  display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; white-space: nowrap;
}
.dp-sort i { font-size: .75rem; }
.dp-sort__idle { opacity: .35; }
.dp-sort:hover, .dp-sort.is-on { color: var(--mono); }
.dp-sort:hover .dp-sort__idle { opacity: .7; }
.dp-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: .25rem; }

/* Ship-to column: a school or business name can be long; wrap rather than widen the table. */
.sp-dtable td.dp-shipto { white-space: normal; min-width: 11rem; max-width: 22rem; }

/* ---- search box with a leading magnifier (Orders) ---- */
.dp-search { position: relative; width: 100%; max-width: 20rem; }
.dp-search i { position: absolute; inset-inline-start: .7rem; top: 50%; transform: translateY(-50%);
  color: var(--muted-foreground); font-size: 1rem; pointer-events: none; z-index: 1; }
.dp-search .kt-input { padding-inline-start: 2.1rem; width: 100%; }
@media (max-width: 40rem) { .dp-search { max-width: none; } }

/* ---- order page: pick items to return ---- */
.sp-dtable th.dp-pick__box, .sp-dtable td.dp-pick__box { width: 2.25rem; padding-inline-end: 0; }
.sp-dtable .dp-pick__qty { width: 4.75rem; height: 2rem; text-align: end; margin-inline-start: auto; }
.dp-pick__hint { padding-bottom: 0; }
.dp-pick__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
/* On a phone the pick table drops SKU, Qty and "Not yet shipped" (the name carries size/color; the box caps at what
   shipped) so Return qty stays on screen. */
@media (max-width: 40rem) {
  .dp-pick .dp-pick__narrow-hide { display: none; }
  .dp-pick th, .dp-pick td { padding-inline: .5rem; }
  .dp-pick th:last-child { white-space: normal; }
  .sp-dtable .dp-pick__qty { width: 4rem; }
  .dp-pick td .sp-dtable__sub { white-space: normal; }   /* "of 75 shipped" under a box wraps instead of widening the table */
  .dp-pick .sp-dtable__wrap { min-width: 0; }   /* the 14rem item minimum is what pushed the boxes off a phone */
}
/* Laptop widths: in pick mode the SKU goes too, so the Return qty boxes fit without scrolling sideways. */
@media (max-width: 80rem) { .dp-pick .dp-pick__mid-hide { display: none; } }
/* "While Supplies Last · final sale" under an item name: amber, so it reads as a condition of sale. */
.sp-dtable .dp-final { color: var(--warning, #b45309); font-weight: 600; }
/* Pick mode: the size is what's being returned, so it reads as part of the item, not as grey small print. */
.sp-dtable .dp-pick__size { color: var(--foreground); font-weight: 600; }
/* Return form: item # / description locked to what the order says. */
.dp-lines .kt-input[readonly] { background: var(--muted); color: var(--secondary-foreground); }

/* ---- Support (Freshdesk) ---- */
.dp-attach { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.dp-attach__item { display: inline-flex; align-items: center; gap: .375rem; max-width: 100%; padding: .3rem .6rem; font-size: .75rem;
  border: 1px solid var(--border); border-radius: .5rem; color: var(--foreground); }
.dp-attach__item:hover { border-color: var(--primary); color: var(--primary); }
.dp-more summary { cursor: pointer; font-size: .75rem; color: var(--primary); margin-top: .375rem; }
.dp-filter { width: auto; min-width: 9rem; }
.sp-dtable td.dp-subject { min-width: 14rem; max-width: 28rem; }
.dp-kb { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); align-items: start; }
.dp-kb__list { display: flex; flex-direction: column; gap: .4rem; }
.dp-kb__list a { display: inline-flex; gap: .4rem; align-items: baseline; }
@media (max-width: 40rem) { .dp-kb { grid-template-columns: 1fr; } .dp-filter { flex: 1; } }

/* ---- Account: other emails for support tickets ---- */
.dp-semails { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: .625rem; }
.dp-semails__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .875rem; border-bottom: 1px solid var(--border); }
.dp-semails__row:last-child { border-bottom: 0; }
.dp-semails__add { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; }
@media (max-width: 40rem) { .dp-semails__add { grid-template-columns: 1fr; } .dp-semails__row { flex-wrap: wrap; } }

/* A2000 account match: one candidate per line, "Use" on the right. */
.dp-a2k-cand { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem 0; }
.dp-a2k-cand + .dp-a2k-cand { border-top: 1px dashed var(--border); }

/* ---- Damaged / defective report (damage-new.html) ---- */
.dp-damage__facts dd { text-align: right; }
.dp-damage__tips { list-style: decimal; padding-inline-start: 1.25rem; margin: .375rem 0; }
.dp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .75rem; }
.dp-photos__item { position: relative; margin: 0; aspect-ratio: 1; border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; background: var(--muted); }
.dp-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-photos__rm {
  position: absolute; top: .25rem; right: .25rem; width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: grid; place-items: center; background: rgb(0 0 0 / .6); color: #fff; font-size: .75rem;
}
.dp-photos__rm:hover { background: rgb(0 0 0 / .8); }
/* A file input must stay in the page for iOS Safari (display:none breaks the label-tap picker): hide it visually only. */
.dp-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* Tickler Tasks (staff viewing as a dealer, 2026-10-28). Remarks sit under the task so the table fits;
   below 1280px (phones, tablets, small laptops) each task becomes a stacked card with its own labels instead of a sideways-scrolling table. */
.dp-tk__ctl { width: auto; }
.dp-tk__find { width: 14rem; max-width: 100%; }
.dp-tk__sortable { cursor: pointer; }
.dp-tk__bad { color: var(--destructive); }
.dp-tk__link { font-weight: 600; color: var(--primary); }
.dp-tk__link:hover { text-decoration: underline; }
/* Dealer + school can be long ("BOB LOFORTE / PERFORMANCE UNIFORMS · WEST SCRANTON"): wrap them, or PO progress is pushed off the card. */
.dp-tk td[data-label="PO"] { white-space: normal; min-width: 11rem; max-width: 17rem; }
.dp-tk__remarks { margin-top: .25rem; font-size: .75rem; color: var(--secondary-foreground); font-style: italic;
  white-space: normal; max-width: 22rem; }
@media (max-width: 1279px) {
  .dp-tk thead { display: none; }
  .dp-tk, .dp-tk tbody, .dp-tk tr, .dp-tk td { display: block; width: 100%; }
  .dp-tk tr { padding: .75rem 0; border-bottom: 1px solid var(--border); }
  .dp-tk tbody tr:last-child { border-bottom: 0; }
  .dp-tk td { border: 0 !important; padding: .125rem 0 !important; }
  .dp-tk td[data-label="PO"] { padding-bottom: .375rem !important; }
  .dp-tk td[data-label]:not([data-label="PO"])::before { content: attr(data-label); display: inline-block; width: 6.5rem;
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); vertical-align: top; }
  .dp-tk td[data-label="Task"] > *, .dp-tk td[data-label="Due"] > * { margin-left: 6.5rem; }
  .dp-tk td[data-label="Task"] > b:first-child, .dp-tk td[data-label="Due"] > div:first-child { margin-left: 0; display: inline-block; }
  .dp-tk td[data-label="Due"] .sp-chip { margin-left: .5rem; }
}
.dp-tk__group td { background: var(--muted); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); }
/* PO / order pages (staff): on a phone the SKU moves under the item name and the item column may wrap, so the
   quantities stay on screen instead of scrolling sideways (same idea as .dp-pick on the dealer order page). */
.dp-tk__sku-sub { display: none; }
@media (max-width: 40rem) {
  .dp-tk-lines .dp-tk__sku { display: none; }
  .dp-tk-lines .dp-tk__sku-sub { display: block; }
  .dp-tk-lines .sp-dtable__wrap { min-width: 0; }
  .dp-tk-lines th, .dp-tk-lines td { padding-inline: .5rem; }
  .dp-tk-lines th { white-space: normal; }
}
.dp-tk__why { margin: .25rem 0 .5rem; padding: .5rem .75rem; border-radius: .375rem; color: var(--secondary-foreground);
  background: color-mix(in oklch, var(--destructive) 7%, transparent); }

/* ORDER STATUS bar (order pages, 2026-10-28): stage on the left, expected ship date on the right; stacks on a phone. */
.dp-ostat { border-inline-start: 3px solid var(--primary); }
.dp-ostat__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.dp-ostat__side { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.dp-ostat__side--end { text-align: end; }
.dp-ostat__label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }
.dp-ostat__steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dp-ostat__step { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px;
  border: 1px solid var(--border); font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .02em; }
.dp-ostat__step i { font-size: .9375rem; }
.dp-ostat__step.is-done { color: var(--success); border-color: color-mix(in oklch, var(--success) 35%, transparent); }
.dp-ostat__step.is-on { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); }
.dp-ostat__date { font-size: 1.25rem; font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .dp-ostat__side--end { text-align: start; } }

/* ---- Rep Portal (2026-10-29) ---- */
/* The white-lettered ABA logo needs a black plate where it sits on a white header (phones). */
.dp-mark-dark { background: #000; border-radius: .375rem; padding: .25rem .375rem; display: inline-flex; }
.dp-mark-dark .sp-mark { height: 1.75rem; }

/* ---- Rep orders (2026-10-29) ---- */
.rp-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: .375rem; background: var(--muted); display: block; flex: none; }
.rp-thumbcell { width: 3.5rem; }
.rp-qty { width: 4.5rem; text-align: end; }
.rp-stock { display: block; font-size: .6875rem; color: var(--muted-foreground); text-align: end; margin-top: .125rem; }
.rp-vgrid th, .rp-vgrid td { text-align: center; }
.rp-vgrid tbody th { text-align: start; white-space: nowrap; }
.rp-w-collection { width: 14rem; max-width: 100%; }
.rp-w-search { width: 14rem; max-width: 100%; }
.rp-sticky { position: sticky; top: 5rem; }
.rp-linknote { display: block; margin-top: .25rem; padding: 0; border: 0; background: none; font-size: .75rem; color: var(--secondary-foreground); text-align: start; cursor: pointer; white-space: normal; }
.rp-linknote:hover { color: var(--mono); text-decoration: underline; }
/* New-order layout: customer, products and review on the left, the order summary on the right; on a phone the summary
   sits between products and review. */
.rp-ordergrid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cust" "prod" "cart" "rev"; }
@media (min-width: 64rem) {
  .rp-ordergrid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "cust cart" "prod cart" "rev cart"; align-items: start; }
  .rp-area-cart { align-self: stretch; }
}
.rp-area-cust { grid-area: cust; } .rp-area-prod { grid-area: prod; } .rp-area-cart { grid-area: cart; min-width: 0; } .rp-area-rev { grid-area: rev; }
.rp-cart .sp-dtable__wrap { min-width: 0; }
.rp-cartqty { width: 5.5rem; }
.rp-rm { text-align: end; width: 100%; }
@media (max-width: 40rem) {
  .rp-vgrid .rp-qty { width: 3.25rem; padding-inline: .375rem; }
  .rp-vgrid th, .rp-vgrid td { padding-inline: .25rem; }
}