/*
 * Vendor Portal — Shopify-Admin-Inspired Theme
 * Repaints the existing Preline/Tabler admin template to a dark-sidebar /
 * light-content layout modelled on the Shopify Admin UI, with the real
 * colour language (status badges, KPI trends, the sidebar's own dark
 * palette) restored. Loaded LAST (after the template bundle, custom.css
 * and ui-density.css) so these rules win the cascade without editing the
 * vendored template files themselves.
 *
 * Two colour systems live side by side on purpose:
 *  - CONTENT tokens (--color-ink / --color-cream / …) describe the light
 *    page area. The site is light-only — dark mode has been removed from
 *    the product (theme-controller.js always applies light) — so these
 *    are fixed values now, not a flippable pair.
 *  - SIDEBAR tokens (--sb-*) are their own fixed dark shell, independent
 *    of the content tokens — the nav stays a dark near-black shell
 *    regardless, the same way Shopify's own sidebar does.
 */

:root {
  /* ---- Content area: ink (text) / cream (background) ---- */
  --color-ink: #1b1c1c;
  --color-cream: #faf6f5;
  --color-surface: #ffffff;   /* the right-hand content panel — always pure white, never cream-tinted */
  --color-brand-maroon: var(--color-ink);
  --color-on-maroon: var(--color-cream);
  --color-slate: rgba(27, 28, 28, 0.62);
  --color-silver: rgba(27, 28, 28, 0.18);
  --color-blush: rgba(27, 28, 28, 0.08);
  --color-fog: rgba(27, 28, 28, 0.05);
  --color-mist: rgba(27, 28, 28, 0.07);

  /* ---- Sidebar: fixed dark shell, independent of the theme switcher ---- */
  --sb-bg: #121214;
  --sb-bg-raised: #1b1b1e;
  --sb-text: #d4d4d6;
  --sb-text-muted: #8c8c90;
  --sb-hover-bg: rgba(255, 255, 255, 0.06);
  --sb-active-bg: rgba(255, 255, 255, 0.1);
  --sb-active-text: #ffffff;
  --sb-border: rgba(255, 255, 255, 0.08);
  --sb-accent: #008060;
  --sb-accent-soft: rgba(0, 128, 96, 0.18);

  --gradient-overlay: linear-gradient(180deg, rgba(27, 28, 28, 0.55) 0%, rgba(27, 28, 28, 0.75) 100%);
  --shadow-btn-box: 0 1px 2px rgba(27, 28, 28, 0.08);
  --shadow-card: 0 1px 2px rgba(27, 28, 28, 0.04), 0 1px 1px rgba(27, 28, 28, 0.03);
  --shadow-popover: 0 12px 28px rgba(27, 28, 28, 0.16), 0 2px 6px rgba(27, 28, 28, 0.06);

  /* ---- Border-radius design system ----
     The single source for every rounded corner in the app — buttons,
     cards, inputs, dropdowns, modals, badges, pills, avatars, the
     sidebar, pagination, tabs, tooltips, nested containers. Change a
     tier here and every component using it follows, across both site
     themes (shape is not recoloured by html.dark, so this block is not
     repeated there). Every other stylesheet (custom.css, ui-density.css,
     chat.css, product-form.css, trade*.css, product-choices.css,
     product-approvals.css, resources.css, public-pages.css,
     page-builder.css, form-kit.css) reads these instead of a literal
     px value; component-scoped vars like --ui-radius / --ch-radius
     resolve to one of these tiers rather than holding their own figure. */
  --radius-none: 0px;
  --radius-xs:   4px;    /* micro accents — tiny icon badges, slim tags, thumbnail corners */
  --radius-sm:   6px;    /* small controls — sidebar nav items, small chips, toggles, avatars */
  --radius-md:   8px;    /* default — buttons, inputs, cards, dropdown menus, badges */
  --radius-lg:   10px;   /* prominent cards, search bars, popovers, table wrappers */
  --radius-xl:   12px;   /* large surfaces — modals, feature cards, picker dialogs */
  --radius-2xl:  16px;   /* hero / floating panels — the page shell's own corners */
  --radius-full: 9999px; /* pills, status badges, avatars, circular icon buttons */

  /* ---- Spacing scale (design guideline) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --color-button-primary: var(--color-ink);
  --color-button-primary-hover: rgba(27, 28, 28, 0.85);
  --color-button-secondary: #ffffff;
  --color-button-secondary-hover: var(--color-fog);
  --color-button-outline: var(--color-silver);

  /* ---- Real status colours (Shopify Polaris-style palette) ---- */
  --hue-success-bg: #d4f3dd;
  --hue-success-text: #0f7a3d;
  --hue-success-strong: #008060;
  --hue-warning-bg: #ffefc6;
  --hue-warning-text: #946200;
  --hue-danger-bg: #fde2df;
  --hue-danger-text: #c0290f;
  --hue-info-bg: #e3f1ff;
  --hue-info-text: #1f6fb2;
  --hue-accent-bg: #f1e4ff;
  --hue-accent-text: #7c3aed;
  --hue-neutral-bg: #f1f1f1;
  --hue-neutral-text: #5c5c5c;

  /* ---- Repaint the template's own theme variables ----
     The compiled template (app-ea958bbc.css) reads colors as
     "R G B" triples via rgb(var(--x)), so overriding these here
     recolors every .ti-btn-primary / .ti-custom-table-head divider /
     page background / bg-success / text-danger / etc. across the whole
     app with no markup changes. */
  --color-primary: 27 28 28;          /* ink — primary buttons stay near-black, like "Create order" */
  --color-primary-rgb: 27, 28, 28;
  --color-secondary: 109 109 109;
  --color-success: 0 128 96;          /* #008060 */
  --color-danger: 192 41 15;          /* #c0290f */
  --color-warning: 148 98 0;          /* #946200 */
  --color-info: 31 111 178;           /* #1f6fb2 */
  --body-bg: 250 246 245;
  --default-text-color: 27 28 28;
  --default-border: 225 225 227;
  --muted: 109 109 109;
  --menu-bg: 255 255 255;
  --header-bg: 255 255 255;
  --menu-border-color: 236 236 236;
  --header-border-color: 236 236 236;
  --menu-prime-color: 27 28 28;
}

body {
  background-color: var(--color-cream) !important;
  color: var(--color-ink) !important;
}

/* =========================================================================
   Tailwind rounded-* utility bridge
   -------------------------------------------------------------------------
   The compiled template bundle (app-ea958bbc.css, vendored — never hand-
   edited per project convention) only ever shipped four of these utility
   classes with a literal px value: rounded-none, rounded-sm, rounded-md,
   rounded-full. Every other rounded-* class used across the Blade views
   — rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, the bare "rounded",
   and the corner-specific ones (rounded-t-lg, rounded-tr-3xl, …) — was
   never defined anywhere in the loaded CSS, so those elements have
   rendered with NO corner rounding at all (sign-up's role cards, the
   role-picker page, dropdown menus, the auth photo panels' outer
   corners, etc.). This section both fixes that gap and makes every one
   of these utilities read from the one radius scale above, so the whole
   app's rounding can be retuned from this single file.
   ========================================================================= */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-xs); }
.rounded      { border-radius: var(--radius-xs); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-3xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

.rounded-t-none  { border-top-left-radius: var(--radius-none); border-top-right-radius: var(--radius-none); }
.rounded-t-lg    { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.rounded-r-lg    { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.rounded-tl-lg   { border-top-left-radius: var(--radius-lg); }
.rounded-bl-lg   { border-bottom-left-radius: var(--radius-lg); }
.rounded-br-lg   { border-bottom-right-radius: var(--radius-lg); }
.rounded-br-none { border-bottom-right-radius: var(--radius-none); }
.rounded-tr-3xl  { border-top-right-radius: var(--radius-2xl); }
.rounded-br-3xl  { border-bottom-right-radius: var(--radius-2xl); }

/* =========================================================================
   Button colour bridge
   -------------------------------------------------------------------------
   .ti-btn-primary / .bg-primary / .btn-primary already repaint black via
   the --color-primary / --color-button-primary root tokens above (see
   "Repaint the template's own theme variables"). A handful of pages were
   built with raw Tailwind "solid button" utility classes instead of that
   shared convention (bg-purple-600, bg-indigo-600, …, each hardcoding its
   own RGB rather than reading a variable), which is why a stray button
   could still show up in an accent colour instead of black.

   Rather than patch each blade file, every one of those utility classes
   is bridged here to the SAME root button tokens, so the whole app's
   button colour is controlled from one place (--color-button-primary /
   --color-button-primary-hover in :root) — change it there and every
   button, from every class name, follows. Deliberately scoped to the
   solid 600/700 shades only (the ones actually used for buttons) — NOT
   the 50/100 light shades or the /10-/20 opacity tints, which are status
   badges and stat-tile icon backgrounds elsewhere in the app and must
   keep their own colour.
   ========================================================================= */
.bg-indigo-600, .bg-purple-600, .bg-violet-600, .bg-blue-600,
.bg-indigo-700, .bg-purple-700, .bg-violet-700, .bg-blue-700 {
  background-color: var(--color-button-primary) !important;
}

.bg-indigo-600:hover, .bg-purple-600:hover, .bg-violet-600:hover, .bg-blue-600:hover,
.bg-indigo-700:hover, .bg-purple-700:hover, .bg-violet-700:hover, .bg-blue-700:hover,
.hover\:bg-indigo-700:hover, .hover\:bg-purple-700:hover,
.hover\:bg-violet-700:hover, .hover\:bg-blue-700:hover {
  background-color: var(--color-button-primary-hover) !important;
}

/* =========================================================================
   Glass utility — applied selectively to floating surfaces (dropdowns,
   modals, the sticky page header) rather than the whole page, per the
   "avoid visual noise" guidance. Plain surfaces (cards, tables, the
   sidebar) stay solid, matching the mostly-flat look of the reference.
   ========================================================================= */
.glass-panel {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-popover);
}

/* ---------------------------------------------------------------------
   Cards / panels (.box, .box-body — the project's "card" replacement)
   --------------------------------------------------------------------- */
.box {
  border-radius: var(--radius-md) !important;
  border-color: var(--color-silver) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ---------------------------------------------------------------------
   Form controls
   --------------------------------------------------------------------- */
.ti-form-input,
.ti-form-select,
select.ti-form-input,
textarea.ti-form-input {
  border-radius: var(--radius-md) !important;
  border-color: var(--color-silver) !important;
  color: var(--color-ink);
}

.ti-form-input::placeholder {
  color: var(--color-slate);
}

.ti-form-input:focus,
.ti-form-select:focus {
  border-color: var(--color-brand-maroon) !important;
  box-shadow: 0 0 0 3px rgba(27, 28, 28, 0.12) !important;
  outline: none;
}

.ti-form-checkbox:checked,
.ti-form-radio:checked {
  background-color: var(--color-brand-maroon) !important;
  border-color: var(--color-brand-maroon) !important;
}

/* ---------------------------------------------------------------------
   Template's own button classes (ti-btn-*) — most already read
   --color-primary / --color-secondary above and repaint automatically.
   These fill the remaining gaps (radius, the light/secondary look).
   --------------------------------------------------------------------- */
.ti-btn {
  border-radius: var(--radius-md);
}

.ti-btn-secondary,
.ti-btn-light {
  background-color: #ffffff !important;
  border: 1px solid var(--color-silver) !important;
  color: var(--color-ink) !important;
}

.ti-btn-secondary:hover,
.ti-btn-light:hover {
  background-color: var(--color-fog) !important;
}

.ti-btn-outline-primary {
  border-color: var(--color-silver) !important;
  color: var(--color-ink) !important;
}

.ti-btn-outline-primary:hover {
  background-color: var(--color-fog) !important;
  color: var(--color-ink) !important;
}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.ti-custom-table th {
  background-color: #fbfbfb !important;
  color: var(--color-slate);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-silver) !important;
}

.ti-custom-table td {
  border-bottom: 1px solid var(--color-fog);
}

.ti-custom-table tbody tr:hover {
  background-color: var(--color-fog);
}

/* ---------------------------------------------------------------------
   Badges / links that key off the primary color
   --------------------------------------------------------------------- */
.bg-primary\/10 {
  background-color: var(--color-fog) !important;
}

.text-primary {
  color: var(--color-ink) !important;
}

/* =========================================================================
   Buttons — rounded-rectangle (8px), not a pill, matching the reference's
   "Export / More actions / Create order" button shapes. Primary stays
   near-black; secondary is a bordered white button; outline is a quiet
   bordered ghost.
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 var(--space-4);
  height: 36px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn-primary {
  background-color: var(--color-button-primary);
  color: var(--color-on-maroon);
  box-shadow: var(--shadow-btn-box);
}

.btn-primary:hover {
  background-color: var(--color-button-primary-hover);
}

.btn-secondary {
  background-color: var(--color-button-secondary);
  border-color: var(--color-silver);
  color: var(--color-ink);
}

.btn-secondary:hover {
  background-color: var(--color-button-secondary-hover);
}

.btn-outline {
  border: 1px solid var(--color-button-outline);
  background: #ffffff;
  color: var(--color-ink);
}

.btn-outline:hover {
  background-color: var(--color-fog);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--color-mist);
}

.btn-full {
  width: 100%;
}

@media (max-width: 1024px) {
  .btn {
    padding: 0 var(--space-5);
    height: 42px;
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .btn {
    padding: 0 var(--space-3);
    height: 36px;
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------
   Button sizes
   --------------------------------------------------------------------- */
.btn-lg {
  height: 42px;
  padding: 0 var(--space-5);
  font-size: 14.5px;
}

.btn-sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: 13px;
}

.btn-xs {
  height: 28px;
  padding: 0 var(--space-2);
  font-size: 12px;
}

/* =========================================================================
   Chips — tabs / filter pills. Stay pill-shaped (tags and segment
   controls read naturally as pills even in Shopify's own UI).
   ========================================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.chip-lg {
  height: 30px;
  padding: 0 var(--space-4);
  font-size: 13.5px;
}

.chip-full {
  width: 100%;
}

.chip,
.chip-inactive {
  background-color: transparent;
  color: var(--color-slate);
}

.chip-active {
  background-color: var(--color-ink);
  color: var(--color-cream);
}

.chip-outline {
  background-color: transparent;
  border: 1px solid var(--color-silver);
  color: var(--color-ink);
}

.chip-outline.chip-active {
  border-color: var(--color-ink);
  background-color: var(--color-ink);
  color: var(--color-cream);
}

.chip:disabled,
.chip.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* =========================================================================
   Alerts — soft coloured banners (Polaris-style): tinted background,
   matching left border, coloured icon.
   ========================================================================= */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  border-left-width: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  background-color: var(--hue-neutral-bg);
  color: var(--color-ink);
}

.alert i {
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 1px;
}

.alert-success {
  background-color: var(--hue-success-bg);
  border-left-color: var(--hue-success-strong);
  color: #0a5c2e;
}

.alert-success i { color: var(--hue-success-strong); }

.alert-danger {
  background-color: var(--hue-danger-bg);
  border-left-color: var(--hue-danger-text);
  color: #8f1f0a;
}

.alert-danger i { color: var(--hue-danger-text); }

.alert-warning {
  background-color: var(--hue-warning-bg);
  border-left-color: var(--hue-warning-text);
  color: #6b4900;
}

.alert-warning i { color: var(--hue-warning-text); }

.alert-info {
  background-color: var(--hue-info-bg);
  border-left-color: var(--hue-info-text);
  color: #164e7a;
}

.alert-info i { color: var(--hue-info-text); }

/* =========================================================================
   Page toolbar — title row sits in .page-header; this slim row beneath it
   carries a one-line description (left) and the page's primary action
   (right).
   ========================================================================= */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page-toolbar p {
  color: var(--color-slate);
  font-size: 13.5px;
}

/* =========================================================================
   Filter chip row
   ========================================================================= */
.filter-chip-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: var(--space-4);
  scrollbar-width: thin;
}

.filter-chip-row .chip {
  flex-shrink: 0;
}

/* =========================================================================
   Status dot — a small coloured indicator usable alongside a badge for
   extra texture. Optional now that badges carry full colour themselves.
   ========================================================================= */
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

.status-dot-neutral { background: var(--hue-neutral-text); }
.status-dot-muted { background: var(--color-silver); }
.status-dot-info { background: var(--hue-info-text); }
.status-dot-accent { background: var(--hue-accent-text); }
.status-dot-warning { background: var(--hue-warning-text); }
.status-dot-success { background: var(--hue-success-strong); }
.status-dot-danger { background: var(--hue-danger-text); }

/* =========================================================================
   Status badges — real colour pills (Shopify Polaris palette).
   ========================================================================= */
.badge-status {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  line-height: 1.5;
}

.badge-neutral { background: var(--hue-neutral-bg); color: var(--hue-neutral-text); }
.badge-info { background: var(--hue-info-bg); color: var(--hue-info-text); }
.badge-accent { background: var(--hue-accent-bg); color: var(--hue-accent-text); }
.badge-warning { background: var(--hue-warning-bg); color: var(--hue-warning-text); }
.badge-success { background: var(--hue-success-bg); color: var(--hue-success-text); }
.badge-danger { background: var(--hue-danger-bg); color: var(--hue-danger-text); }
.badge-muted { background: var(--hue-neutral-bg); color: #9a9a9a; }

/* =========================================================================
   KPI / stat tiles — a flat, borderless strip (numbers carry the
   information, not coloured card fills), matching the reference's
   KPI row. A variant only tints the figure itself.
   ========================================================================= */
.stat-tile {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5) var(--space-3) 0;
  border: none;
  border-right: 1px solid var(--color-fog);
  background: transparent;
}

.stat-tile .stat-value { font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--color-ink); }
.stat-tile .stat-label { font-size: 0.75rem; font-weight: 500; margin-top: var(--space-1); color: var(--color-slate); }

.stat-tile-neutral .stat-value { color: var(--color-ink); }
.stat-tile-warning .stat-value { color: var(--hue-warning-text); }
.stat-tile-danger .stat-value { color: var(--hue-danger-text); }
.stat-tile-success .stat-value { color: var(--hue-success-strong); }

/* A status-coloured wash for a detail page's header/status bar. */
.status-bar-neutral { background: var(--hue-neutral-bg); }
.status-bar-info { background: var(--hue-info-bg); }
.status-bar-accent { background: var(--hue-accent-bg); }
.status-bar-warning { background: var(--hue-warning-bg); }
.status-bar-success { background: var(--hue-success-bg); }
.status-bar-danger { background: var(--hue-danger-bg); }

/* =========================================================================
   Layout & structure pass — sidebar, header, page-header, dashboard shell.
   ========================================================================= */

/* ---------------------------------------------------------------------
   Sidebar — fixed dark shell, logo header, nav items, active state,
   category labels. Not conditional on html.dark: it stays this colour
   in both site themes, like the reference.
   --------------------------------------------------------------------- */
.app-sidebar {
  background-color: var(--sb-bg) !important;
  border-color: var(--sb-border) !important;
}

.app-sidebar .main-sidebar-header {
  border-bottom-color: var(--sb-border) !important;
  background-color: var(--sb-bg) !important;
}

/* The logo asset is a raster-pattern SVG (not a clean single-colour
   vector), so inverting it to white produces an illegible silhouette.
   A small light chip behind it keeps it legible on the dark sidebar
   regardless of the logo's own native colours. */
.app-sidebar .main-sidebar-header .header-logo {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 6px 10px;
}

.app-sidebar .main-logo {
  max-height: 22px;
  width: auto;
}

.app-sidebar .main-menu {
  padding: 6px 8px var(--space-4) !important;
  padding-bottom: 2rem !important;
}

.app-sidebar .main-menu li.slide{    margin-top: 0;}

.app-sidebar .side-menu__item,
.app-sidebar .side-menu__item .side-menu__label {
  position: relative;
  color: var(--sb-text) !important;
}

.app-sidebar .side-menu__item {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 1px;
  border-radius: var(--radius-md) !important;
  font-size: 12px;
  line-height: 1.3;
  transition: background-color 120ms ease, color 120ms ease;
}

.app-sidebar .side-menu__icon,
.app-sidebar .side-menu__item i:not(.side-menu__angle) {
  color: var(--sb-text-muted) !important;
  fill: var(--sb-text-muted) !important;
  font-size: 15px;
  width: 17px;
  text-align: center;
  flex-shrink: 0;
}

.app-sidebar .side-menu__item:hover,
.app-sidebar .side-menu__item:hover .side-menu__label {
  background-color: var(--sb-hover-bg) !important;
  color: var(--sb-active-text) !important;
}

.app-sidebar .side-menu__item:active {
  background-color: var(--sb-active-bg) !important;
}

.app-sidebar .side-menu__item:hover i,
.app-sidebar .side-menu__item:hover .side-menu__icon {
  color: var(--sb-active-text) !important;
}

.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item.active .side-menu__label {
  background-color: var(--sb-active-bg) !important;
  color: var(--sb-active-text) !important;
  font-weight: 600;
}

.app-sidebar .side-menu__item.active i,
.app-sidebar .side-menu__item.active .side-menu__icon {
  color: var(--sb-active-text) !important;
}

/* Same vertical padding, font-size (and inherited line-height: 1.3 from
   the top-level .side-menu__item rule above) as a flat top-level item
   like the Marketplace section's — only the left indent and the muted
   colour still mark a row as nested, not a taller/larger-text row. */
.app-sidebar .slide-menu.child1 .side-menu__item,
.app-sidebar .slide-menu.child2 .side-menu__item,
.app-sidebar .slide-menu.child1 .side-menu__item .side-menu__label,
.app-sidebar .slide-menu.child2 .side-menu__item .side-menu__label {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  padding-left: var(--space-4) !important;
  margin-bottom: 1px;
  border-radius: var(--radius-sm) !important;
  color: var(--sb-text-muted) !important;
  font-size: 12px;
  line-height: 1.3;
  transition: background-color 120ms ease, color 120ms ease;
}

.app-sidebar .slide-menu.child1 .side-menu__item:hover,
.app-sidebar .slide-menu.child1 .side-menu__item.active,
.app-sidebar .slide-menu.child2 .side-menu__item:hover,
.app-sidebar .slide-menu.child2 .side-menu__item.active,
.app-sidebar .slide-menu.child1 .side-menu__item:hover .side-menu__label,
.app-sidebar .slide-menu.child1 .side-menu__item.active .side-menu__label,
.app-sidebar .slide-menu.child2 .side-menu__item:hover .side-menu__label,
.app-sidebar .slide-menu.child2 .side-menu__item.active .side-menu__label {
  color: var(--sb-active-text) !important;
  background-color: var(--sb-hover-bg) !important;
}

/* The template's own bullet-dot marker for icon-less nested items sits
   at a fixed offset meant for a narrower light-sidebar gutter and
   overlaps the label's first letter in this layout — switched off
   rather than fought, since the reference's own sub-items (All Brands,
   Register Brand) carry no marker at all, just indentation. */
.app-sidebar .slide-menu.child1 .side-menu__item:before,
.app-sidebar .slide-menu.child2 .side-menu__item:before,
.app-sidebar .slide-menu.child3 .side-menu__item:before {
  display: none !important;
}

/* Icon-less nested items (All Brands, Register Brand) line their text up
   under the icon-bearing rows above them (Melborn Waters' icon + gap). */
.app-sidebar .slide-menu.child1 .side-menu__item:not(:has(i)),
.app-sidebar .slide-menu.child2 .side-menu__item:not(:has(i)) {
  padding-left: calc(var(--space-4) + 1.125rem + var(--space-1)) !important;
}

.app-sidebar .slide__category {
  padding: 10px 10px 4px !important;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sb-text-muted) !important;
  opacity: 1 !important;
}

.app-sidebar li.slide:first-child .slide__category {
  padding-top: 0.25rem !important;
}

.app-sidebar .side-menu__angle {
  color: var(--sb-text-muted) !important;
}

.app-sidebar .ri-arrow-right-s-line {
  color: var(--sb-text-muted) !important;
}

/* Collapsible-group chevron rotates to match an open group, Shopify-style */
.app-sidebar li.active > .side-menu__item .side-menu__angle {
  transform: rotate(90deg);
}

/* Brand switcher widget — colours live in custom.css, with enough
   selector specificity (aside.app-sidebar .sidebar-brand-switch …) to
   win the cascade. It now targets the dark sidebar palette (--sb-*)
   instead of the content ink/cream tokens. */

/* Sidebar search trigger row (the "Search ⌘K" affordance above the nav,
   matching the reference) */
.sb-search-trigger {
display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 2px 10px;
    margin: 0px 0 0px;
    border-radius: var(--radius-full);
    border: 1px solid var(--sb-border);
    background: var(--sb-bg-raised);
    color: var(--sb-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.sb-search-trigger:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.sb-search-trigger i {
  font-size: 13px;
  color: var(--sb-text-muted);
  flex-shrink: 0;
}

.sb-search-trigger span:not(.sb-kbd) {
  flex: 1;
  text-align: left;
}

.sb-search-trigger .sb-kbd {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 1px solid var(--sb-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--sb-text-muted);
  flex-shrink: 0;
}

/* Bottom-pinned workspace/brand switcher, like the reference's company
   switcher at the foot of the nav — achieved with flex order, not a DOM
   move, so nothing JS-wired by id has to change. */
.app-sidebar .main-menu {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100%;
}

.app-sidebar li.slide:has(.sidebar-brand-switch) {
  order: 9999;
  margin-top: auto;
  padding-top: var(--space-2);
  margin-bottom: 0;
  /* border-top: 1px solid var(--sb-border); */
}

/* ---------------------------------------------------------------------
   Right-side panel — the reference shows the header + content area as
   one floating white card, rounded on all four corners, inset from the
   dark backdrop on every side. Scoped to html[data-menu-styles="dark"]
   (forced only on Backend dashboard pages, see the sidebar section
   above) so Control Panel and the sign-in page — which still use the
   template's default light menu style and have no matching fixed-dark
   sidebar — are completely unaffected.

   The header is position:fixed with left:0/right:0 spanning the full
   viewport width (its background sits hidden under the sidebar, which
   insets its own content via padding-left:16rem); .content is a normal
   flow box already offset with margin-left:16rem. Both are overridden
   here with a real margin on every side instead, which is what makes
   the rounded corners show — a decorative overlay can't fake a corner
   that doesn't exist on the real box. */
html[data-menu-styles="dark"] body {
  background-color: var(--sb-bg) !important;
}

/* Header hidden — its options (profile, Add Brand, notifications) now
   live in the sidebar's own bottom bar / brand-switcher dropdown
   instead. display:none rather than removing the @include, since
   header.blade.php also carries the Add-Brand subscription modal and
   its script (window.openSubscriptionModal) that the sidebar's "Add
   Brand" row — and the dashboard's flash-redirect auto-open — still
   call; both sit as DOM siblings after </header>, so hiding just the
   <header> element leaves them untouched and still functional. */
html[data-menu-styles="dark"] .header.custom-sticky {
  display: none !important;
}

html[data-menu-styles="dark"] .content {
  /* No header above it any more, so no 71px of height to leave room
     for — just the same 10px inset the header used to have on every
     other side — and all four corners round now that this is the
     only floating card left. Pure white (--color-surface), not the
     cream page-background tint, so this panel always reads as white. */
  margin: 3px 3px 3px calc(16rem + 10px) !important;
  background-color: var(--color-surface) !important;
  border-radius: var(--radius-2xl) !important;
  padding: 1rem 0rem;
}

/* ---------------------------------------------------------------------
   Header — minimal, light chrome; icon buttons, dropdown menus
   --------------------------------------------------------------------- */
.header.custom-sticky {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--color-fog) !important;
  box-shadow: none !important;
}

.header-right .bg-gray-100 {
  background-color: var(--color-fog) !important;
}

.header-right .hover\:bg-gray-200:hover {
  background-color: var(--color-blush) !important;
}

.header-right .text-gray-500 {
  color: var(--color-slate) !important;
}

/* The header's own search trigger is superseded by the sidebar's
   "Search" row above — hidden rather than removed, so the modal trigger
   markup (and its JS binding) is untouched. Scoped to .header-right so it
   cannot also catch the search modal's own class of the same name (see
   _search_modal.blade.php, which was renamed to gsearch-* specifically
   to stop sharing this class — this scoping is a belt-and-braces second
   fix of the same collision). */
.header-right .header-search {
  display: none !important;
}

/* =========================================================================
   Global search popup (sidebar "Search" row → #search-modal) — a wide
   centered card: search bar on top, filter chips, a quiet empty-state
   placeholder, and a keyboard hint in the footer. Layout/behaviour
   (open/close, Preline overlay) is untouched; this only restyles it.
   ========================================================================= */
.gsearch-box {
  max-width: 680px !important;
  margin: 8vh auto 0 !important;
}

.gsearch-content {
  border-radius: var(--radius-2xl) !important;
  border: 1px solid var(--color-silver) !important;
  box-shadow: var(--shadow-popover) !important;
  overflow: hidden;
}

.gsearch-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-fog);
}

.gsearch-icon {
  flex-shrink: 0;
  font-size: 19px;
  color: var(--color-slate);
}

.gsearch-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--color-ink);
}

.gsearch-input::placeholder {
  color: var(--color-slate);
}

.gsearch-filter {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-slate);
  font-size: 17px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.gsearch-filter:hover {
  background: var(--color-fog);
  color: var(--color-ink);
}

.gsearch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
}

.gsearch-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none !important;
  background: #ffffff;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.gsearch-chip:hover {
  background: var(--color-fog);
  border-color: var(--color-slate);
  color: var(--color-ink);
}

.gsearch-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: var(--space-5);
  text-align: center;
}

.gsearch-empty span {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-slate);
}

.gsearch-foot {
  justify-content: flex-end !important;
  padding: var(--space-3) var(--space-5) !important;
  border-top: 1px solid var(--color-fog) !important;
}

.gsearch-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-slate);
}

.gsearch-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-sm);
  background: var(--color-fog);
  color: var(--color-ink);
  font-size: 12px;
  font-family: inherit;
}

.ti-dropdown-menu {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-popover) !important;
  border: 1px solid var(--color-silver) !important;
}

.ti-dropdown-item:hover {
  background-color: var(--color-fog) !important;
}

/* ---------------------------------------------------------------------
   Page header — the shared title + breadcrumb block used across ~115
   pages (see CLAUDE.md §6.1 "Required page wrapper"). Compact, quiet
   breadcrumb, closer to the reference's density.
   --------------------------------------------------------------------- */
.page-header {
  margin-bottom: var(--space-4);
}

.page-header h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
  letter-spacing: -0.01em;
}

.page-header ol li a {
  color: var(--color-slate) !important;
}

.page-header ol .ti-chevrons-right {
  color: var(--color-silver) !important;
}

.page-header ol li[aria-current="page"] {
  color: var(--color-slate) !important;
}

/* ---------------------------------------------------------------------
   Stat / dashboard cards — the .box.stat-card pattern used on dashboards
   --------------------------------------------------------------------- */
.box.stat-card {
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.box.stat-card:hover {
  box-shadow: 0 4px 12px rgba(27, 28, 28, 0.08) !important;
}

/* ---------------------------------------------------------------------
   Pagination — compact arrow controls + a centred page-range label,
   closer to the reference's "‹ 1–50 ›" footer control.
   --------------------------------------------------------------------- */
.pg-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.pg-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-silver);
  color: var(--color-ink);
  background: #ffffff;
  transition: background-color 150ms ease, opacity 150ms ease;
}

.pg-arrow:hover {
  background-color: var(--color-fog);
}

.pg-arrow[disabled],
.pg-arrow.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pg-label {
  font-size: 13px;
  color: var(--color-slate);
}

/* ---------------------------------------------------------------------
   Brand subscription modal (resources/views/Backend/common/header.blade.php)
   ships its own inline <style>; this loads after it and repaints to the
   palette without touching that markup.
   --------------------------------------------------------------------- */
#subscriptionModal .sm-cycle-toggle button.is-active {
  color: var(--color-ink);
}

#subscriptionModal .sm-card.is-popular {
  border-color: var(--color-ink) !important;
  box-shadow: 0 0 0 2px rgba(27, 28, 28, 0.14) !important;
}

#subscriptionModal .sm-card .sm-popular-badge {
  background: var(--color-ink) !important;
  color: var(--color-cream) !important;
}

#subscriptionModal .sm-card .sm-cta {
  background: var(--color-button-primary) !important;
  color: var(--color-on-maroon) !important;
}

#subscriptionModal .sm-card .sm-cta:hover {
  background: var(--color-button-primary-hover) !important;
}

#subscriptionModal .sm-card.is-popular .sm-cta {
  background: var(--color-ink) !important;
}

#subscriptionModal .sm-cycle-toggle {
  background: var(--color-fog) !important;
}

/* =========================================================================
   Header drawer — the theme toggle, Messages, Notifications and the
   profile menu (Profile / Add Brand / Settings / Log Out) all live here
   now, behind one avatar trigger in the header, instead of four separate
   header icons each opening their own small dropdown.
   ========================================================================= */
.hd-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.hd-trigger-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--hue-success-strong);
  border: 2px solid #ffffff;
}

.hd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.hd-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.hd-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--color-cream);
  color: var(--color-ink);
  box-shadow: var(--shadow-popover);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms ease;
}

.hd-drawer.is-open {
  transform: translateX(0);
}

.hd-drawer-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-silver);
  flex-shrink: 0;
}

.hd-drawer-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.hd-drawer-who {
  flex: 1;
  min-width: 0;
}

.hd-drawer-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-drawer-headline {
  font-size: 12px;
  color: var(--color-slate);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-drawer-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 0;
  background: transparent;
  color: var(--color-slate);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.hd-drawer-close:hover {
  background: var(--color-fog);
  color: var(--color-ink);
}

.hd-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}

.hd-drawer-section {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-fog);
}

.hd-drawer-section:last-child {
  border-bottom: 0;
}

.hd-drawer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.hd-drawer-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-slate);
}

.hd-drawer-mark-all {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.hd-drawer-mark-all:hover {
  text-decoration: underline;
}

.hd-drawer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  color: var(--color-ink);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color 120ms ease;
}

.hd-drawer-row:hover {
  background: var(--color-fog);
}

.hd-drawer-row-icon {
  font-size: 17px;
  color: var(--color-slate);
}

.hd-drawer-row-label {
  flex: 1;
}

.hd-drawer-notify-list {
  max-height: 320px;
  overflow-y: auto;
}

.hd-drawer-viewall {
  margin-top: var(--space-3);
}

.hd-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hd-drawer-foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-silver);
  flex-shrink: 0;
}

.hd-drawer-logout {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-1);
  background: transparent;
  border: 0;
  color: var(--hue-danger-text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-md);
  transition: background-color 120ms ease;
}

.hd-drawer-logout:hover {
  background: var(--hue-danger-bg);
}

@media (max-width: 480px) {
  .hd-drawer { width: 100%; max-width: 100%; }
}

.authentication-page{background-color: white;}

/* Auth / onboarding pages always stay on the light surface, regardless
   of the signed-in theme toggle (these render before anyone is signed
   in, so there's no personal preference to honour yet). */
body.error-page {
  background-color: #ffffff !important;
}

/* =========================================================================
   Auth pages — left-side visual (sign-in, sign-up). A slow CSS-only
   crossfade between the 3 interior shots in public/Common/images,
   replacing the template's broken local <img> reference and its
   external (laravelui.spruko.com demo CDN) .cover background-image.
   ========================================================================= */
.cover {
  background-image: none !important;
}

/* The compiled template also paints a near-opaque ink overlay via
   .cover:before (background-color: rgb(var(--color-primary) / .95)) —
   harmless behind the sign-in/sign-up slideshow (which sits above it),
   but a near-solid black box on the auth pages that don't include it
   (forgot/reset-password, verify-otp) now that .cover's own background
   image is removed above. Switched off outright. */
.cover:before {
  content: none !important;
  display: none !important;
}

.auth-cover-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--sb-bg);
}

.auth-cover-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: authCoverFade 18s infinite;
}

.auth-cover-slide:nth-child(1) { animation-delay: 0s; }
.auth-cover-slide:nth-child(2) { animation-delay: 6s; }
.auth-cover-slide:nth-child(3) { animation-delay: 12s; }

@keyframes authCoverFade {
  0%, 100% { opacity: 0; }
  4% { opacity: 1; }
  28% { opacity: 1; }
  34% { opacity: 0; }
}

.auth-cover-shade {
  position: absolute;
  inset: 0;
  background: var(--gradient-overlay);
}

/* ============================================================
   Mobile sidebar drawer (Backend only).
   The vendor template's own off-canvas sidebar needs a `toggled`
   attribute this layout's <html> tag never sets, and its trigger
   button lived in the header, which is hidden entirely above.
   Re-implemented here with our own `.mobile-sidebar-open` class
   (toggled by layout.blade.php's inline script) instead — reusing
   the vendor's own #responsive-overlay backdrop, which is already
   fully styled via its `.active` class, rather than re-styling it.
   `991.98px` matches this bundle's own compiled `lg:` breakpoint
   (992px) and the vendor JS's own `innerWidth >= 992` check. */
html[data-menu-styles="dark"] .mobile-sidebar-toggle {
  display: none;
}

@media (max-width: 991.98px) {
  html[data-menu-styles="dark"] .mobile-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 60;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 8px);
    background: var(--sb-bg, #1b1c1c);
    color: #fff;
    border: none;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }

  html[data-menu-styles="dark"] .app-sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease;
  }

  html[data-menu-styles="dark"].mobile-sidebar-open .app-sidebar {
    transform: translateX(0) !important;
  }

  html[data-menu-styles="dark"].mobile-sidebar-open body {
    overflow: hidden;
  }

  html[data-menu-styles="dark"] .content {
    margin: 10px !important;
  }
}
/* =========================================================================
   Role cards — sign-up ("Please select your role") and the role picker
   after Google sign-in. The cards are labels wrapping a hidden radio; the
   template's Tailwind `peer-checked:` utilities are not in the pre-built
   CSS (no Tailwind build runs), and peer-* only reaches siblings anyway,
   so the selected state is drawn here from the radio with :has().
   ========================================================================= */
.role-option {
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

label:hover > .role-option {
  border-color: var(--color-slate) !important;
  box-shadow: var(--shadow-card);
}

label:has(> input[type="radio"]:checked) > .role-option {
  border-color: var(--color-ink) !important;
  background-color: var(--color-fog) !important;
  box-shadow: 0 0 0 1px var(--color-ink);
}

label:has(> input[type="radio"]:focus-visible) > .role-option {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

label:has(> input[type="radio"]:checked) .role-option__name {
  font-weight: 600;
  color: var(--color-ink) !important;
}

/* The arrow on the right: faint on hover, solid once chosen. */
.role-option__mark {
  color: var(--color-ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 150ms ease, transform 150ms ease;
}

label:hover .role-option__mark {
  opacity: 0.4;
  transform: translateX(0);
}

label:has(> input[type="radio"]:checked) .role-option__mark {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================================================
   Onboarding (after sign-up): Categories → Sub-categories → Styles →
   Brands. Shell in resources/views/Backend/pages/onboarding/_top/_bottom,
   cards in _option. A card is a label wrapping a hidden checkbox; its
   selected look is drawn from the checkbox with :has().
   ========================================================================= */
.ob-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-cream); }

.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
          padding: 20px 32px; }
.ob-logo { height: 26px; width: auto; }
.ob-steps { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--color-slate); }
.ob-steps__bar { display: flex; gap: 4px; }
.ob-steps__bar span { width: 28px; height: 4px; border-radius: var(--radius-full); background: var(--color-silver); }
.ob-steps__bar span.is-done { background: var(--color-ink); }

.ob-main { flex: 1; display: flex; justify-content: center; padding: 16px 24px 64px; }
.ob-wrap { width: 100%; max-width: 920px; }
.ob-panel { background: var(--color-surface); border: 1px solid var(--color-mist); border-radius: var(--radius-xl);
            box-shadow: var(--shadow-card); padding: 36px 36px 28px; }

.ob-title { font-size: 24px; font-weight: 600; color: var(--color-ink); text-align: center; margin: 0 0 6px; line-height: 1.3; }
.ob-sub { font-size: 14px; color: var(--color-slate); text-align: center; margin: 0 auto 28px; max-width: 520px; }
.ob-muted { font-size: 13.5px; color: var(--color-slate); grid-column: 1 / -1; margin: 8px 0; }

.ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .ob-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ob-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ob-grid--narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ob-option { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px;
             padding: 12px 14px; background: #fff; border: 1px solid var(--color-silver);
             border-radius: var(--radius-md); cursor: pointer; text-align: left;
             transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; }
.ob-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ob-option__img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.ob-option__name { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; color: var(--color-ink); }
.ob-option__check { flex: none; width: 18px; height: 18px; display: grid; place-items: center;
                    border: 1.5px solid var(--color-silver); border-radius: var(--radius-full);
                    color: #fff; transition: background-color 120ms ease, border-color 120ms ease; }
.ob-option__check svg { width: 11px; height: 11px; opacity: 0; transition: opacity 120ms ease; }

.ob-option:hover { border-color: var(--color-slate); }
.ob-option:has(input:checked) { border-color: var(--color-ink); background: var(--color-fog);
                                box-shadow: 0 0 0 1px var(--color-ink); }
.ob-option:has(input:checked) .ob-option__name { font-weight: 600; }
.ob-option:has(input:checked) .ob-option__check { background: var(--color-ink); border-color: var(--color-ink); }
.ob-option:has(input:checked) .ob-option__check svg { opacity: 1; }
.ob-option:has(input:focus-visible) { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* Sub-categories: categories on the left, their options on the right */
.ob-split { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .ob-split { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; } }
.ob-tabs { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 767px) { .ob-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; } }
.ob-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
          padding: 9px 12px; font-size: 14px; color: var(--color-ink); text-align: left; white-space: nowrap;
          background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
          transition: background-color 120ms ease, border-color 120ms ease; }
.ob-tab:hover { background: var(--color-fog); }
.ob-tab.is-active { background: var(--color-fog); border-color: var(--color-silver); font-weight: 600; }
.ob-tab__count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center;
                 font-size: 11.5px; font-weight: 600; color: #fff; background: var(--color-ink);
                 border-radius: var(--radius-full); }
.ob-tab__count[hidden] { display: none; }

.ob-error { margin-top: 16px; font-size: 13px; color: #c0290f; text-align: center; }

.ob-actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 20px;
              border-top: 1px solid var(--color-mist); }
.ob-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-slate); }
.ob-back:hover { color: var(--color-ink); }
.ob-count { margin-left: auto; font-size: 13px; color: var(--color-slate); }
.ob-next { min-width: 180px; height: 44px; font-size: 14px; font-weight: 600; justify-content: center; }
.ob-next:disabled { opacity: .7; cursor: not-allowed; }

@media (max-width: 560px) {
  .ob-top { padding: 16px; }
  .ob-panel { padding: 24px 16px 20px; }
  .ob-actions { flex-wrap: wrap; }
  .ob-count { order: -1; width: 100%; margin-left: 0; text-align: center; }
  .ob-next { flex: 1; }
}

.ob-footer { text-align: center; font-size: 12px; padding: 14px; color: var(--color-slate);
             border-top: 1px solid var(--color-mist); }
.ob-footer a { color: var(--color-slate); }
.ob-footer a:hover { color: var(--color-ink); text-decoration: underline; }

/* Sub-categories: a category still needing a pick when Next is pressed */
.ob-tab.is-missing { border-color: #c0290f; color: #c0290f; }
.ob-tab.is-missing::after { content: "Pick one"; margin-left: auto; font-size: 11px; font-weight: 600;
                            color: #c0290f; }
.ob-tab.is-missing .ob-tab__count { display: none; }

/* Onboarding: the count line before anything is picked */
.ob-count.is-empty { color: var(--color-ink); font-weight: 500; }

/* =========================================================================
   Terms and Conditions / Privacy Policy (§3.78): the public pages
   (resources/views/legal/show) and the "please accept" page in the portal
   (Backend/pages/legal/accept). .lp-doc styles the published text.
   ========================================================================= */
.lp-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-cream); color: var(--color-ink); }
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 32px; }
.lp-logo { height: 26px; width: auto; display: block; }
.lp-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-nav a { font-size: 13.5px; padding: 7px 12px; border-radius: var(--radius-md); color: var(--color-slate); text-decoration: none; }
.lp-nav a:hover { background: var(--color-fog); color: var(--color-ink); }
.lp-nav a.is-active { background: var(--color-surface); color: var(--color-ink); font-weight: 600; box-shadow: var(--shadow-card); }
.lp-main { flex: 1; display: flex; justify-content: center; padding: 8px 20px 64px; }
.lp-card { width: 100%; max-width: 820px; background: var(--color-surface); border: 1px solid var(--color-mist);
           border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 40px 44px; }
.lp-title { font-size: 28px; font-weight: 600; line-height: 1.25; margin: 0 0 8px; }
.lp-meta { font-size: 13px; color: var(--color-slate); margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--color-mist); }
.lp-page .ob-footer span { margin: 0 8px; }

.lp-doc { font-size: 15px; line-height: 1.7; color: var(--color-ink); overflow-wrap: anywhere; }
.lp-doc h1, .lp-doc h2 { font-size: 19px; font-weight: 600; margin: 28px 0 10px; line-height: 1.35; }
.lp-doc h3, .lp-doc h4 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
.lp-doc p { margin: 0 0 14px; }
.lp-doc ul, .lp-doc ol { margin: 0 0 14px; padding-left: 24px; }
.lp-doc ul { list-style: disc; }
.lp-doc ol { list-style: decimal; }
.lp-doc li { margin-bottom: 6px; }
.lp-doc a { color: var(--color-ink); text-decoration: underline; }
.lp-doc blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid var(--color-silver); background: var(--color-fog);
                     border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.lp-doc .ql-align-center { text-align: center; }
.lp-doc .ql-align-right { text-align: right; }

@media (max-width: 640px) {
  .lp-top { padding: 16px; }
  .lp-card { padding: 24px 18px; }
  .lp-title { font-size: 23px; }
}

/* "Please accept" page in the portal */
.la-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
.la-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
           border: 1px solid var(--color-silver); border-radius: var(--radius-md); background: #fff; text-align: left; }
.la-item b { display: block; font-size: 14.5px; color: var(--color-ink); }
.la-item span { font-size: 12.5px; color: var(--color-slate); }
.la-item a { flex: none; font-size: 13.5px; font-weight: 500; color: var(--color-ink); text-decoration: underline; }
.la-agree { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md);
            background: var(--color-fog); font-size: 14px; color: var(--color-ink); text-align: left; cursor: pointer; }
.la-agree input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--color-ink); flex: none; }
.la-agree a { text-decoration: underline; color: var(--color-ink); }