/* ==========================================================================
   StylePLUS Dealer Portal — supplemental styles (base copied from the Management Suite 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.
   Metronic ships a blue --primary. StylePLUS is green, so it is overridden
   here rather than by editing the precompiled styles.css.

   The logo's dominant green (#A3CD3B) is far too light to sit under white
   button text — 1.85:1, nowhere near AA. #64801E is the same hue (77°) taken
   darker to the point where BOTH directions pass: 4.52:1 under white text,
   and 4.40:1 as text on the dark sidebar/dark theme. That crossover is why a
   single value serves both themes instead of needing a light/dark pair.
   (Metronic's own blue managed only 3.68:1, so this is stricter than the
   template's baseline.)

   --brand keeps the true logo green available for decorative use, where
   contrast rules do not apply.
   -------------------------------------------------------------------------- */
:root {
  --primary:            #64801E;
  --primary-foreground: var(--color-white);
  --brand:              #A3CD3B;
}

.dark {
  --primary:            #64801E;
  --primary-foreground: var(--color-white);
}

: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. 34px matches layout-10's own logo slot; the source art is 142px
   so it stays sharp on a retina display without a second asset. The ribbon is
   green in both themes, which is why the wordmark is NOT part of this crop —
   its "Style" is black and disappears against the dark 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; }

/* ---- 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; }
.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);
}