/* ==========================================================================
   ShippCart UI layer
   Loaded after the Rasket theme (app.min.css). Re-themes the admin around the
   ShippCart brand: indigo primary, lime accent, softer surfaces, rounder
   corners, lighter tables and pill-style icon actions. Light + dark aware.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --sc-brand: #4f46a5;
  --sc-brand-600: #443b95;
  --sc-brand-700: #3a3282;
  --sc-brand-rgb: 79, 70, 165;
  --sc-accent: #a6d51f;
  --sc-accent-rgb: 166, 213, 31;
  --sc-accent-ink: #5f7d0a;

  --sc-heading: #1e2140;
  --sc-text: #4f586c;
  --sc-muted: #8a93a6;
  --sc-border: #e7e9f0;
  --sc-border-strong: #d6dae4;
  --sc-surface: #ffffff;
  --sc-surface-2: #f7f8fb;
  --sc-soft: #f1f2f8;
  --sc-page: #f5f6fa;
  --sc-thead: #f6f7fb;
  --sc-row-hover: rgba(79, 70, 165, 0.045);
  --sc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --sc-shadow-md: 0 10px 30px -12px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.05);
  --sc-shadow-brand: 0 1px 2px rgba(79, 70, 165, 0.25), 0 6px 14px -6px rgba(79, 70, 165, 0.55);
  --sc-radius: 14px;
  --sc-radius-sm: 10px;

  --sc-success-ink: #0f8a71;
  --sc-warning-ink: #b8670f;
  --sc-info-ink: #128a8c;
  --sc-danger-ink: #c93a4a;
  --sc-secondary-ink: #4a5a6b;
  --sc-dark-ink: #323a46;

  /* Rebind Bootstrap / Rasket primary to the brand */
  --bs-primary: var(--sc-brand);
  --bs-primary-rgb: var(--sc-brand-rgb);
  --bs-primary-bg-subtle: #ecebf8;
  --bs-primary-border-subtle: #c9c4ee;
  --bs-primary-text-emphasis: var(--sc-brand-700);
  --bs-link-color: var(--sc-brand);
  --bs-link-color-rgb: var(--sc-brand-rgb);
  --bs-link-hover-color: var(--sc-brand-600);
  --bs-link-hover-color-rgb: 68, 59, 149;
  --bs-body-bg: var(--sc-page);
  --bs-body-bg-rgb: 245, 246, 250;
  --bs-body-color: var(--sc-text);
  --bs-body-color-rgb: 79, 88, 108;
  --bs-headings-color: var(--sc-heading);
  --bs-border-color: var(--sc-border);
  --bs-border-radius: 0.65rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 0.9rem;
  --bs-box-shadow: var(--sc-shadow-sm);
  --bs-font-sans-serif: "Inter", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-bs-theme=dark] {
  --sc-brand: #8b83e0;
  --sc-brand-600: #9d96e8;
  --sc-brand-700: #b3adf0;
  --sc-brand-rgb: 139, 131, 224;
  --sc-accent-ink: #c5e75a;

  --sc-heading: #eceef6;
  --sc-text: #aab3c5;
  --sc-muted: #7f889c;
  --sc-border: #2a3040;
  --sc-border-strong: #363d50;
  --sc-surface: #1c212c;
  --sc-surface-2: #202633;
  --sc-soft: #242a38;
  --sc-page: #141821;
  --sc-thead: #1f2531;
  --sc-row-hover: rgba(139, 131, 224, 0.08);
  --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sc-shadow-md: 0 14px 34px -12px rgba(0, 0, 0, 0.6);
  --sc-shadow-brand: 0 6px 16px -6px rgba(139, 131, 224, 0.55);

  --sc-success-ink: #5fd6bb;
  --sc-warning-ink: #fbc98d;
  --sc-info-ink: #6fe0e1;
  --sc-danger-ink: #f58e9a;
  --sc-secondary-ink: #b3bfcc;
  --sc-dark-ink: #e2e6ee;

  --bs-primary: var(--sc-brand);
  --bs-primary-rgb: var(--sc-brand-rgb);
  --bs-primary-bg-subtle: #262a45;
  --bs-primary-border-subtle: #3f3f78;
  --bs-primary-text-emphasis: var(--sc-brand-700);
  --bs-link-color: var(--sc-brand);
  --bs-link-color-rgb: var(--sc-brand-rgb);
  --bs-link-hover-color: var(--sc-brand-600);
  --bs-body-bg: var(--sc-page);
  --bs-body-bg-rgb: 20, 24, 33;
  --bs-body-color: var(--sc-text);
  --bs-body-color-rgb: 170, 179, 197;
  --bs-headings-color: var(--sc-heading);
  --bs-secondary-bg: var(--sc-surface);
  --bs-secondary-bg-rgb: 28, 33, 44;
  --bs-tertiary-bg: var(--sc-soft);
  --bs-border-color: var(--sc-border);
}

body {
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.002em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--sc-heading);
  letter-spacing: -0.015em;
}

.page-content h3 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-muted { color: var(--sc-muted) !important; }

/* Keyboard focus ring */
:focus-visible {
  outline: 3px solid rgba(var(--sc-brand-rgb), 0.35);
  outline-offset: 2px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   2. Sidebar
   -------------------------------------------------------------------------- */
html[data-menu-color=light],
html[data-menu-color=light][data-bs-theme=light] {
  --bs-main-nav-bg: #ffffff;
  --bs-main-nav-item-color: #5b6478;
  --bs-main-nav-item-hover-bg: rgba(79, 70, 165, 0.08);
  --bs-main-nav-item-hover-color: #4f46a5;
  --bs-main-nav-border-color: #e7e9f0;
}
html[data-menu-color=dark],
html[data-menu-color=brand],
html[data-bs-theme=dark][data-menu-color=light],
html[data-bs-theme=dark][data-menu-color=dark] {
  --bs-main-nav-bg: #191d2c;
  --bs-main-nav-item-color: #a9b0c6;
  --bs-main-nav-item-hover-bg: rgba(255, 255, 255, 0.07);
  --bs-main-nav-item-hover-color: #ffffff;
  --bs-main-nav-border-color: #262b3e;
}

.wrapper .main-nav {
  box-shadow: none;
  border-right: 1px solid var(--bs-main-nav-border-color);
}

.wrapper .main-nav .navbar-nav { padding: 0.25rem 12px; }

.wrapper .main-nav .menu-title {
  height: auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.55;
  padding: 1.1rem 0.85rem 0.4rem;
}

.wrapper .main-nav .navbar-nav .nav-item .nav-link {
  position: relative;
  border-radius: 0.7rem;
  padding: 0.55rem 0.7rem;
  margin: 2px 0;
  gap: 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}
.wrapper .main-nav .navbar-nav .nav-item .nav-link .nav-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 0.6rem;
  font-size: 1.2rem;
  background: transparent;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.wrapper .main-nav .navbar-nav .nav-item .nav-link:hover,
.wrapper .main-nav .navbar-nav .nav-item .nav-link:focus,
.wrapper .main-nav .navbar-nav .nav-item .nav-link[aria-expanded=true] {
  background-color: var(--bs-main-nav-item-hover-bg);
  color: var(--bs-main-nav-item-hover-color);
}
.wrapper .main-nav .navbar-nav .nav-item .nav-link.active,
.wrapper .main-nav .navbar-nav .nav-item .nav-link:active {
  background-color: var(--bs-main-nav-item-hover-bg);
  color: var(--bs-main-nav-item-hover-color);
  font-weight: 600;
}
.wrapper .main-nav .navbar-nav .nav-item .nav-link.active .nav-icon {
  background: var(--sc-brand);
  color: #fff;
  box-shadow: var(--sc-shadow-brand);
}
.wrapper .main-nav .navbar-nav .nav-item .nav-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 4px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: var(--sc-accent);
}
.wrapper .main-nav .navbar-nav .nav-item .nav-link.menu-arrow::after { opacity: 0.55; }

/* Shortcut launchers never show the active state; only the Navigation section does */
.wrapper .main-nav .navbar-nav .nav-item.sc-shortcut .nav-link.active {
  background-color: transparent;
  color: var(--bs-main-nav-item-color);
  font-weight: 500;
}
.wrapper .main-nav .navbar-nav .nav-item.sc-shortcut .nav-link.active:hover,
.wrapper .main-nav .navbar-nav .nav-item.sc-shortcut .nav-link.active:focus {
  background-color: var(--bs-main-nav-item-hover-bg);
  color: var(--bs-main-nav-item-hover-color);
}
.wrapper .main-nav .navbar-nav .nav-item.sc-shortcut .nav-link.active .nav-icon {
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.wrapper .main-nav .navbar-nav .nav-item.sc-shortcut .nav-link.active::before { display: none; }

.wrapper .main-nav .navbar-nav .sub-navbar-nav { padding: 0.15rem 0 0.35rem; }
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item { padding: 1px 0; }
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item .sub-nav-link {
  border-radius: 0.6rem;
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem 0.45rem 2.9rem;
  transition: background-color .18s ease, color .18s ease;
}
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item .sub-nav-link::before {
  left: 1.35rem;
  width: 5px;
  height: 5px;
  opacity: 0.5;
}
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item .sub-nav-link:hover,
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item .sub-nav-link.active {
  background-color: var(--bs-main-nav-item-hover-bg);
  color: var(--bs-main-nav-item-hover-color);
}
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item.active .sub-nav-link,
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item .sub-nav-link.active {
  background-color: var(--bs-main-nav-item-hover-bg);
  color: var(--bs-main-nav-item-hover-color);
  font-weight: 600;
}
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item.active .sub-nav-link::before {
  background-color: var(--sc-accent);
  opacity: 1;
}
.wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item .sub-nav-link.active::before {
  background-color: var(--sc-accent);
  opacity: 1;
}

/* The theme's floating pin button overlaps the brand plate; the topbar toggle replaces it */
.main-nav .button-sm-hover { display: none !important; }

/* Brand plate: keeps the purple + lime logo legible on any sidebar colour */
.main-nav .logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--bs-topbar-height);
  line-height: 1;
  padding: 0 14px;
  border-bottom: 1px solid var(--bs-main-nav-border-color);
}
.sc-brand {
  display: block;
  width: 100%;
  text-decoration: none;
}
.sc-brand-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e7e9f0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 16px -10px rgba(79, 70, 165, 0.35);
  transition: box-shadow .2s ease, transform .2s ease;
}
.sc-brand:hover .sc-brand-plate {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 22px -10px rgba(79, 70, 165, 0.5);
  transform: translateY(-1px);
}
.sc-brand-logo { display: block; height: 30px; width: auto; }
.sc-brand-mark {
  display: none;
  font-family: "Inter", "Public Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.06em;
  line-height: 1;
  color: #4a3f8f;
}
.sc-brand-mark em { font-style: inherit; color: #9ccf13; }

html[data-menu-size=condensed] .main-nav .logo-box,
html[data-menu-size=sm-hover] .main-nav:not(:hover) .logo-box { padding: 0 10px; }
html[data-menu-size=condensed] .main-nav .sc-brand-plate,
html[data-menu-size=sm-hover] .main-nav:not(:hover) .sc-brand-plate { padding: 0; width: 48px; margin: 0 auto; }
html[data-menu-size=condensed] .main-nav .sc-brand-logo,
html[data-menu-size=sm-hover] .main-nav:not(:hover) .sc-brand-logo { display: none; }
html[data-menu-size=condensed] .main-nav .sc-brand-mark,
html[data-menu-size=sm-hover] .main-nav:not(:hover) .sc-brand-mark { display: inline-block; }

/* --------------------------------------------------------------------------
   3. Topbar
   -------------------------------------------------------------------------- */
html[data-topbar-color=light] { --bs-topbar-bg: rgba(255, 255, 255, 0.86); --bs-topbar-item-color: #5b6478; }
html[data-bs-theme=dark][data-topbar-color=light],
html[data-topbar-color=dark] { --bs-topbar-bg: rgba(28, 33, 44, 0.86); --bs-topbar-item-color: #aab3c5; }

.topbar {
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sc-border);
}
.topbar .navbar-header {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0.75rem;
}
.topbar .topbar-item .topbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  color: var(--bs-topbar-item-color);
  transition: background-color .18s ease, color .18s ease;
}
.topbar .topbar-item .topbar-button:hover {
  background: var(--sc-soft);
  color: var(--sc-heading);
}
.topbar .topbar-item .topbar-button iconify-icon { font-size: 22px; }

.topbar .sc-menu-toggle { display: inline-flex; margin-left: -0.35rem; }

.sc-greeting {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sc-greeting-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-muted);
}
.sc-greeting-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sc-heading);
}

.sc-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--sc-border);
  background: var(--sc-surface);
  color: var(--sc-heading);
  text-decoration: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.sc-user-chip:hover { border-color: var(--sc-border-strong); box-shadow: var(--sc-shadow-sm); }
.sc-user-chip .sc-user-name { font-size: 0.85rem; font-weight: 600; line-height: 1.1; }
.sc-user-chip .sc-user-role { font-size: 0.7rem; color: var(--sc-muted); line-height: 1.1; }
.sc-user-chip iconify-icon { font-size: 18px; color: var(--sc-muted); }

/* --------------------------------------------------------------------------
   4. Avatars
   -------------------------------------------------------------------------- */
.sc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #4f46a5, #7b6fe0);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.sc-avatar--sm { width: 32px; height: 32px; border-radius: 10px; font-size: 0.7rem; }
.sc-avatar--1 { background: linear-gradient(135deg, #4f46a5, #7b6fe0); }
.sc-avatar--2 { background: linear-gradient(135deg, #0f8a71, #2fd0ad); }
.sc-avatar--3 { background: linear-gradient(135deg, #b8670f, #f8ac59); }
.sc-avatar--4 { background: linear-gradient(135deg, #128a8c, #3fd6d8); }
.sc-avatar--5 { background: linear-gradient(135deg, #c93a4a, #f3778a); }
.sc-avatar--6 { background: linear-gradient(135deg, #5f7d0a, #a6d51f); }

/* --------------------------------------------------------------------------
   5. Page header
   -------------------------------------------------------------------------- */
.sc-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.sc-page-head h3 { margin: 0; }
.sc-page-head p { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--sc-muted); }
.sc-eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-brand);
}
.sc-page-head .sc-actions-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
  --bs-card-border-radius: var(--sc-radius);
  --bs-card-inner-border-radius: calc(var(--sc-radius) - 1px);
  --bs-card-border-color: var(--sc-border);
  --bs-card-bg: var(--sc-surface);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-y: 1.35rem;
  --bs-card-spacer-x: 1.35rem;
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 1.35rem;
  box-shadow: var(--sc-shadow-sm);
}
.card-header { border-bottom-color: var(--sc-border); }
.card-title,
h5.card-title,
h6.card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sc-heading);
  letter-spacing: -0.005em;
}
.card-header .card-title { font-size: 0.95rem; }

/* Old "border border-primary" cards become a tinted top accent instead of a full coloured frame */
.card.border-primary, .card.border-success, .card.border-warning,
.card.border-info, .card.border-danger, .card.border-secondary, .card.border-dark {
  border-color: var(--sc-border) !important;
  border-top-width: 3px !important;
}
.card.border-primary   { border-top-color: var(--sc-brand) !important; }
.card.border-success   { border-top-color: rgb(var(--bs-success-rgb)) !important; }
.card.border-warning   { border-top-color: rgb(var(--bs-warning-rgb)) !important; }
.card.border-info      { border-top-color: rgb(var(--bs-info-rgb)) !important; }
.card.border-danger    { border-top-color: rgb(var(--bs-danger-rgb)) !important; }
.card.border-secondary { border-top-color: rgb(var(--bs-secondary-rgb)) !important; }
.card.border-dark      { border-top-color: var(--sc-accent) !important; }

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--sc-border);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--sc-row-hover);
  --bs-table-hover-color: var(--sc-heading);
  --bs-table-color: var(--sc-text);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.table > :not(caption) > * > * {
  padding: 0.95rem 1rem;
  border-bottom-width: 1px;
}
.table-sm > :not(caption) > * > * { padding: 0.7rem 0.85rem; }
.table > tbody { vertical-align: middle; }
.table > tbody > tr { transition: background-color .15s ease; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.table > :not(:first-child) { border-top: 0; }

.table > thead > tr > th,
.table thead.table-light > tr > th,
.table .table-light > tr > th {
  --bs-table-bg: var(--sc-thead);
  --bs-table-color: var(--sc-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sc-muted);
  background-color: var(--sc-thead);
  border-bottom: 1px solid var(--sc-border);
  border-top: 0;
  white-space: nowrap;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.table > thead > tr > th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.table > thead > tr > th:last-child  { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--sc-row-hover); }

.table td .text-primary,
.table td a.text-primary { color: var(--sc-brand) !important; font-weight: 600; }
.table td small.text-muted { font-size: 0.78rem; }
.table td[colspan] { padding: 2.75rem 1rem; text-align: center; color: var(--sc-muted); }
.table-responsive { border-radius: var(--sc-radius-sm); }

/* Cell helpers */
.sc-cell-primary { font-weight: 600; color: var(--sc-heading); }
.sc-cell-sub { display: block; font-size: 0.78rem; color: var(--sc-muted); margin-top: 1px; }
.sc-kv { display: flex; gap: 0.35rem; font-size: 0.83rem; line-height: 1.5; }
.sc-kv span:first-child { color: var(--sc-muted); min-width: 4.2rem; }
.sc-kv span:last-child { color: var(--sc-heading); font-weight: 500; }
.sc-user-cell { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.sc-user-cell a { color: var(--sc-heading); font-weight: 600; text-decoration: none; }
.sc-user-cell a:hover { color: var(--sc-brand); }

/* --------------------------------------------------------------------------
   8. Row action buttons (partials/action + hand-rolled .order-actions)
   -------------------------------------------------------------------------- */
.sc-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.sc-action,
.order-actions a {
  --sc-action-bg: rgba(var(--bs-secondary-rgb), 0.12);
  --sc-action-fg: var(--sc-secondary-ink);
  --sc-action-solid: rgb(var(--bs-secondary-rgb));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0 !important;
  border: 0;
  border-radius: 10px;
  background: var(--sc-action-bg);
  color: var(--sc-action-fg);
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sc-action:hover, .sc-action:focus-visible,
.order-actions a:hover {
  background: var(--sc-action-solid);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -8px var(--sc-action-solid);
}
.sc-action:active { transform: translateY(0); }
.sc-action iconify-icon, .sc-action i { font-size: 1.15rem; display: block; }
.order-actions { gap: 0.35rem; }

.sc-action--show        { --sc-action-bg: rgba(var(--sc-brand-rgb), 0.11);  --sc-action-fg: var(--sc-brand);        --sc-action-solid: var(--sc-brand); }
.sc-action--edit        { --sc-action-bg: rgba(var(--bs-warning-rgb), 0.16); --sc-action-fg: var(--sc-warning-ink);  --sc-action-solid: #e3902e; }
.sc-action--delete      { --sc-action-bg: rgba(var(--bs-danger-rgb), 0.12);  --sc-action-fg: var(--sc-danger-ink);   --sc-action-solid: rgb(var(--bs-danger-rgb)); }
.sc-action--impersonate { --sc-action-bg: rgba(var(--bs-info-rgb), 0.14);    --sc-action-fg: var(--sc-info-ink);     --sc-action-solid: #1aa8aa; }
.sc-action--invoice     { --sc-action-bg: rgba(var(--bs-success-rgb), 0.13);  --sc-action-fg: var(--sc-success-ink);  --sc-action-solid: rgb(var(--bs-success-rgb)); }
.sc-action--summary     { --sc-action-bg: rgba(var(--sc-accent-rgb), 0.22);  --sc-action-fg: var(--sc-accent-ink);   --sc-action-solid: #7ea41a; }
[data-bs-theme=dark] .sc-action--edit    { --sc-action-solid: #f8ac59; }
[data-bs-theme=dark] .sc-action--summary { --sc-action-solid: #a6d51f; }

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: 0.7rem;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-font-size: 0.875rem;
  letter-spacing: 0.005em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn i.bx { font-size: 1.1em; vertical-align: -0.15em; }
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-border-radius: 0.55rem;
  --bs-btn-padding-x: 0.8rem;
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-font-size: 0.8rem;
}
.btn-lg { --bs-btn-border-radius: 0.85rem; }

.btn-primary {
  --bs-btn-bg: var(--sc-brand);
  --bs-btn-border-color: var(--sc-brand);
  --bs-btn-hover-bg: var(--sc-brand-600);
  --bs-btn-hover-border-color: var(--sc-brand-600);
  --bs-btn-active-bg: var(--sc-brand-700);
  --bs-btn-active-border-color: var(--sc-brand-700);
  --bs-btn-disabled-bg: var(--sc-brand);
  --bs-btn-disabled-border-color: var(--sc-brand);
  --bs-btn-focus-shadow-rgb: var(--sc-brand-rgb);
  box-shadow: var(--sc-shadow-brand);
}
[data-bs-theme=dark] .btn-primary {
  --bs-btn-color: #14172a;
  --bs-btn-hover-color: #14172a;
  --bs-btn-active-color: #14172a;
}

/* Outline buttons become soft tinted buttons */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-warning, .btn-outline-danger, .btn-outline-info, .btn-outline-dark {
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-outline-primary   { --bs-btn-color: var(--sc-brand);         --bs-btn-bg: rgba(var(--sc-brand-rgb), 0.1);     --bs-btn-hover-bg: var(--sc-brand);            --bs-btn-active-bg: var(--sc-brand-600); }
.btn-outline-secondary { --bs-btn-color: var(--sc-secondary-ink); --bs-btn-bg: var(--sc-soft);                     --bs-btn-hover-bg: var(--sc-border-strong);    --bs-btn-hover-color: var(--sc-heading); --bs-btn-active-bg: var(--sc-border-strong); --bs-btn-active-color: var(--sc-heading); }
.btn-outline-success   { --bs-btn-color: var(--sc-success-ink);   --bs-btn-bg: rgba(var(--bs-success-rgb), 0.12);  --bs-btn-hover-bg: rgb(var(--bs-success-rgb)); --bs-btn-active-bg: rgb(var(--bs-success-rgb)); }
.btn-outline-warning   { --bs-btn-color: var(--sc-warning-ink);   --bs-btn-bg: rgba(var(--bs-warning-rgb), 0.16);  --bs-btn-hover-bg: #e3902e;                    --bs-btn-active-bg: #e3902e; }
.btn-outline-danger    { --bs-btn-color: var(--sc-danger-ink);    --bs-btn-bg: rgba(var(--bs-danger-rgb), 0.12);   --bs-btn-hover-bg: rgb(var(--bs-danger-rgb));  --bs-btn-active-bg: rgb(var(--bs-danger-rgb)); }
.btn-outline-info      { --bs-btn-color: var(--sc-info-ink);      --bs-btn-bg: rgba(var(--bs-info-rgb), 0.14);     --bs-btn-hover-bg: #1aa8aa;                    --bs-btn-active-bg: #1aa8aa; }
.btn-outline-dark      { --bs-btn-color: var(--sc-dark-ink);      --bs-btn-bg: rgba(var(--bs-dark-rgb), 0.1);      --bs-btn-hover-bg: rgb(var(--bs-dark-rgb));    --bs-btn-active-bg: rgb(var(--bs-dark-rgb)); }
[data-bs-theme=dark] .btn-outline-primary { --bs-btn-hover-color: #14172a; --bs-btn-active-color: #14172a; }

.btn-soft-primary {
  --bs-btn-color: var(--sc-brand);
  --bs-btn-bg: rgba(var(--sc-brand-rgb), 0.1);
  --bs-btn-hover-bg: var(--sc-brand);
  --bs-btn-hover-border-color: var(--sc-brand);
  --bs-btn-active-bg: var(--sc-brand);
  --bs-btn-active-border-color: var(--sc-brand);
}
.btn-secondary {
  --bs-btn-bg: var(--sc-soft);
  --bs-btn-border-color: var(--sc-soft);
  --bs-btn-color: var(--sc-heading);
  --bs-btn-hover-bg: var(--sc-border-strong);
  --bs-btn-hover-border-color: var(--sc-border-strong);
  --bs-btn-hover-color: var(--sc-heading);
  --bs-btn-active-bg: var(--sc-border-strong);
  --bs-btn-active-border-color: var(--sc-border-strong);
  --bs-btn-active-color: var(--sc-heading);
}
.btn-light {
  --bs-btn-bg: var(--sc-surface);
  --bs-btn-border-color: var(--sc-border);
  --bs-btn-color: var(--sc-heading);
  --bs-btn-hover-bg: var(--sc-soft);
  --bs-btn-hover-border-color: var(--sc-border-strong);
}
.btn-warning { --bs-btn-color: #3b2a10; --bs-btn-hover-color: #3b2a10; --bs-btn-active-color: #3b2a10; }
.btn-success, .btn-danger, .btn-info { box-shadow: var(--sc-shadow-sm); }
.btn-info { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }

/* --------------------------------------------------------------------------
   10. Badges  (solid bg-* badges become soft, tinted chips)
   -------------------------------------------------------------------------- */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: 0.6em;
  --bs-badge-padding-y: 0.42em;
  --bs-badge-font-size: 0.72em;
  --bs-badge-border-radius: 0.45rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  vertical-align: middle;
}
.badge.rounded-pill { --bs-badge-padding-x: 0.75em; }
.badge.bg-primary   { background-color: rgba(var(--sc-brand-rgb), 0.12) !important;    color: var(--sc-brand); }
.badge.bg-success   { background-color: rgba(var(--bs-success-rgb), 0.14) !important;  color: var(--sc-success-ink); }
.badge.bg-warning   { background-color: rgba(var(--bs-warning-rgb), 0.18) !important;  color: var(--sc-warning-ink); }
.badge.bg-info      { background-color: rgba(var(--bs-info-rgb), 0.14) !important;     color: var(--sc-info-ink); }
.badge.bg-danger    { background-color: rgba(var(--bs-danger-rgb), 0.12) !important;   color: var(--sc-danger-ink); }
.badge.bg-secondary { background-color: rgba(var(--bs-secondary-rgb), 0.14) !important; color: var(--sc-secondary-ink); }
.badge.bg-dark      { background-color: rgba(var(--bs-dark-rgb), 0.1) !important;      color: var(--sc-dark-ink); }
.badge.bg-light     { background-color: var(--sc-soft) !important;                     color: var(--sc-text); }
/* Views that pair bg-* with text-white / text-dark keep the soft tint and readable ink */
.badge.bg-primary.text-white,   .badge.bg-primary.text-dark   { color: var(--sc-brand) !important; }
.badge.bg-success.text-white,   .badge.bg-success.text-dark   { color: var(--sc-success-ink) !important; }
.badge.bg-warning.text-white,   .badge.bg-warning.text-dark   { color: var(--sc-warning-ink) !important; }
.badge.bg-info.text-white,      .badge.bg-info.text-dark      { color: var(--sc-info-ink) !important; }
.badge.bg-danger.text-white,    .badge.bg-danger.text-dark    { color: var(--sc-danger-ink) !important; }
.badge.bg-secondary.text-white, .badge.bg-secondary.text-dark { color: var(--sc-secondary-ink) !important; }
.badge.bg-dark.text-white,      .badge.bg-dark.text-dark      { color: var(--sc-dark-ink) !important; }
.badge.bg-light.text-white,     .badge.bg-light.text-dark     { color: var(--sc-text) !important; }
.badge.text-bg-primary   { background-color: rgba(var(--sc-brand-rgb), 0.12) !important;   color: var(--sc-brand) !important; }
.badge.text-bg-success   { background-color: rgba(var(--bs-success-rgb), 0.14) !important; color: var(--sc-success-ink) !important; }
.badge.text-bg-warning   { background-color: rgba(var(--bs-warning-rgb), 0.18) !important; color: var(--sc-warning-ink) !important; }
.badge.text-bg-info      { background-color: rgba(var(--bs-info-rgb), 0.14) !important;    color: var(--sc-info-ink) !important; }
.badge.text-bg-danger    { background-color: rgba(var(--bs-danger-rgb), 0.12) !important;  color: var(--sc-danger-ink) !important; }
.badge.text-bg-secondary { background-color: rgba(var(--bs-secondary-rgb), 0.14) !important; color: var(--sc-secondary-ink) !important; }
.badge.text-bg-dark      { background-color: rgba(var(--bs-dark-rgb), 0.1) !important;     color: var(--sc-dark-ink) !important; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sc-heading);
  margin-bottom: 0.4rem;
}
.form-control, .form-select {
  border-radius: 0.7rem;
  border-color: var(--sc-border-strong);
  background-color: var(--sc-surface);
  color: var(--sc-heading);
  padding: 0.55rem 0.9rem;
  min-height: 2.65rem;
  font-size: 0.875rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-control::placeholder { color: var(--sc-muted); opacity: 0.85; }
.form-control:focus, .form-select:focus {
  border-color: var(--sc-brand);
  background-color: var(--sc-surface);
  box-shadow: 0 0 0 4px rgba(var(--sc-brand-rgb), 0.14);
}
.form-control-sm, .form-select-sm { min-height: 2.15rem; border-radius: 0.55rem; padding: 0.35rem 0.7rem; }
.form-control-lg, .form-select-lg { min-height: 3.1rem; border-radius: 0.85rem; }
textarea.form-control { min-height: 6rem; }
.form-control[type=file] { padding: 0.45rem 0.75rem; }
.form-control::file-selector-button {
  border-radius: 0.5rem;
  background: var(--sc-soft);
  color: var(--sc-heading);
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  margin-right: 0.85rem;
}
.form-text { font-size: 0.78rem; color: var(--sc-muted); }
.input-group-text {
  border-radius: 0.7rem;
  border-color: var(--sc-border-strong);
  background: var(--sc-soft);
  color: var(--sc-muted);
  font-weight: 500;
}
.form-check-input { border-color: var(--sc-border-strong); }
.form-check-input:checked { background-color: var(--sc-brand); border-color: var(--sc-brand); }
.form-check-input:focus { border-color: var(--sc-brand); box-shadow: 0 0 0 4px rgba(var(--sc-brand-rgb), 0.14); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }

/* --------------------------------------------------------------------------
   12. Alerts, dropdowns, modals, pagination, tooltips, footer
   -------------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: 0.85rem;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 0.85rem;
  font-weight: 500;
  border-left-width: 4px;
}
.alert i.bx { font-size: 1.2em; vertical-align: -0.2em; }

.dropdown-menu {
  --bs-dropdown-border-radius: 0.85rem;
  --bs-dropdown-border-color: var(--sc-border);
  --bs-dropdown-bg: var(--sc-surface);
  --bs-dropdown-padding-y: 0.4rem;
  --bs-dropdown-item-padding-x: 0.75rem;
  --bs-dropdown-item-padding-y: 0.5rem;
  --bs-dropdown-link-hover-bg: var(--sc-soft);
  --bs-dropdown-link-hover-color: var(--sc-heading);
  --bs-dropdown-link-active-bg: rgba(var(--sc-brand-rgb), 0.1);
  --bs-dropdown-link-active-color: var(--sc-brand);
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  box-shadow: var(--sc-shadow-md);
}
.dropdown-item { border-radius: 0.55rem; font-weight: 500; font-size: 0.875rem; }
.dropdown-header { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-muted); }
.dropdown-divider { border-top-color: var(--sc-border); opacity: 1; }

.modal-content {
  --bs-modal-border-radius: 1rem;
  --bs-modal-bg: var(--sc-surface);
  --bs-modal-border-color: var(--sc-border);
  --bs-modal-header-border-color: var(--sc-border);
  --bs-modal-footer-border-color: var(--sc-border);
  box-shadow: var(--sc-shadow-md);
}
.modal-title { font-weight: 700; }

.pagination {
  --bs-pagination-border-radius: 0.6rem;
  --bs-pagination-color: var(--sc-text);
  --bs-pagination-bg: var(--sc-surface);
  --bs-pagination-border-color: var(--sc-border);
  --bs-pagination-hover-bg: var(--sc-soft);
  --bs-pagination-hover-color: var(--sc-heading);
  --bs-pagination-hover-border-color: var(--sc-border-strong);
  --bs-pagination-focus-bg: var(--sc-soft);
  --bs-pagination-focus-color: var(--sc-heading);
  --bs-pagination-focus-box-shadow: 0 0 0 4px rgba(var(--sc-brand-rgb), 0.14);
  --bs-pagination-active-bg: var(--sc-brand);
  --bs-pagination-active-border-color: var(--sc-brand);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: var(--sc-muted);
  --bs-pagination-disabled-border-color: var(--sc-border);
  gap: 0.35rem;
  margin-bottom: 0;
}
.pagination .page-link {
  border-radius: var(--bs-pagination-border-radius) !important;
  min-width: 2.25rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0;
}
.pagination .page-item.active .page-link { box-shadow: var(--sc-shadow-brand); }
.pagination .page-item:not(:first-child) .page-link { margin-left: 0; }

.tooltip { --bs-tooltip-border-radius: 0.5rem; --bs-tooltip-font-size: 0.75rem; --bs-tooltip-bg: var(--sc-heading); --bs-tooltip-opacity: 0.96; }
[data-bs-theme=dark] .tooltip { --bs-tooltip-bg: #eceef6; --bs-tooltip-color: #14172a; }

.footer {
  font-size: 0.8rem;
  color: var(--sc-muted);
  border-top: 1px solid var(--sc-border);
  background: transparent;
}

/* Thin scrollbars for the sidebar + table scroll areas */
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--sc-border-strong); border-radius: 8px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sc-action, .btn, .sc-brand-plate, .table > tbody > tr { transition: none !important; }
}

/* --------------------------------------------------------------------------
   13. Auth pages (login / register)
   Split layout: brand panel on the left, form on the right. Stacks on mobile.
   -------------------------------------------------------------------------- */
.sc-auth-body {
  margin: 0;
  background: var(--sc-page);
  color: var(--sc-text);
}
.sc-auth {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 992px) {
  .sc-auth { grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr); grid-template-rows: 1fr; }
}

/* Brand panel */
.sc-auth-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(160deg, rgba(58, 50, 130, 0.94) 0%, rgba(79, 70, 165, 0.92) 55%, rgba(46, 38, 110, 0.96) 100%),
    var(--sc-auth-hero) center / cover no-repeat,
    #3a3282;
}
.sc-auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sc-auth-hero) center / cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: luminosity;
}
.sc-auth-brand::after {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: -14rem;
  bottom: -16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sc-accent-rgb), 0.45) 0%, rgba(var(--sc-accent-rgb), 0) 68%);
  pointer-events: none;
}
.sc-auth-brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-height: 100%;
  padding: 2.25rem 2rem;
}
@media (min-width: 992px) {
  .sc-auth-brand-inner { padding: 3rem 3.25rem; }
}
@media (min-width: 1400px) {
  .sc-auth-brand-inner { padding: 3.5rem 4.5rem; }
}
.sc-auth-brand-home {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  align-self: flex-start;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.sc-auth-brand-home:hover { color: #fff; opacity: 0.9; }
.sc-auth-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  background: var(--sc-accent);
  color: #1e2140;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
}
.sc-auth-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: auto 0;
  max-width: 30rem;
}
.sc-auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.sc-auth-eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 0 4px rgba(var(--sc-accent-rgb), 0.25);
}
.sc-auth-brand-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sc-auth-brand-copy > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.6;
}
.sc-auth-features {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sc-auth-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}
.sc-auth-features li > div { display: flex; flex-direction: column; gap: 0.1rem; }
.sc-auth-features strong { color: #fff; font-size: 0.875rem; font-weight: 600; }
.sc-auth-features span:not(.sc-auth-feature-icon) { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; line-height: 1.45; }
.sc-auth-feature-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: rgba(var(--sc-accent-rgb), 0.18);
  color: var(--sc-accent);
  font-size: 1.25rem;
}
.sc-auth-brand-foot {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
}
@media (max-width: 991.98px) {
  .sc-auth-brand-inner { gap: 1.5rem; padding: 1.5rem 1.25rem 2.75rem; }
  .sc-auth-brand-copy { gap: 0.6rem; margin: 0; }
  .sc-auth-brand-copy > p, .sc-auth-features, .sc-auth-brand-foot { display: none; }
  .sc-auth-brand-copy h1 { font-size: 1.35rem; }
}

/* Form panel */
.sc-auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 2.5rem;
  background: var(--sc-surface);
}
@media (min-width: 992px) {
  .sc-auth-main { padding: 3rem 2.5rem; }
}
@media (max-width: 991.98px) {
  .sc-auth-main {
    align-items: flex-start;
    margin-top: -1.5rem;
    border-radius: 1.4rem 1.4rem 0 0;
    box-shadow: 0 -10px 30px -18px rgba(16, 24, 40, 0.3);
    padding-top: 1.75rem;
  }
}
.sc-auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sc-auth-form-sm { max-width: 26.5rem; }
.sc-auth-form-lg { max-width: 38rem; }
.sc-auth-logo { display: inline-block; align-self: flex-start; line-height: 0; }
.sc-auth-logo img { height: 34px; width: auto; }
.sc-auth-head h2 {
  margin: 0 0 0.35rem;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sc-heading);
}
.sc-auth-head p { margin: 0; color: var(--sc-muted); font-size: 0.9rem; line-height: 1.55; }

.sc-auth-fields { display: flex; flex-direction: column; gap: 1.1rem; }
.sc-field { display: flex; flex-direction: column; }
.sc-field .form-label { margin-bottom: 0.45rem; }
.sc-field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sc-field-label-row .form-label { margin-bottom: 0.45rem; }
.sc-field-control { position: relative; }
.sc-field-control .form-control,
.sc-field-control .form-select { padding-left: 2.65rem; min-height: 2.9rem; }
.sc-field-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: var(--sc-muted);
  pointer-events: none;
  transition: color .18s ease;
}
.sc-field-control:focus-within .sc-field-icon { color: var(--sc-brand); }
.sc-field-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--sc-muted);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.sc-field-toggle:hover { background: var(--sc-soft); color: var(--sc-heading); }
.sc-field-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--sc-brand-rgb), 0.2); }
.sc-field-control:has(.sc-field-toggle) .form-control { padding-right: 2.9rem; background-image: none; }
.sc-field-static {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.9rem;
  padding: 0.55rem 0.9rem 0.55rem 2.65rem;
  border: 1px solid var(--sc-border-strong);
  border-radius: 0.7rem;
  background: var(--sc-soft);
}
.sc-field-static > div { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.sc-field-static strong { font-size: 0.875rem; font-weight: 600; color: var(--sc-heading); }
.sc-field-static span { font-size: 0.75rem; color: var(--sc-muted); line-height: 1.35; }
.sc-optional {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--sc-soft);
  color: var(--sc-muted);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}
.invalid-feedback { font-size: 0.78rem; margin-top: 0.35rem; }

.sc-auth-link { font-size: 0.8rem; font-weight: 600; color: var(--sc-brand); text-decoration: none; }
.sc-auth-link:hover { color: var(--sc-brand-600); text-decoration: underline; }

.sc-auth-check { margin: 0; padding-left: 1.75rem; }
.sc-auth-check .form-check-input { width: 1.1rem; height: 1.1rem; margin-left: -1.75rem; margin-top: 0.15rem; }
.sc-auth-check .form-check-label { font-size: 0.85rem; color: var(--sc-text); }

.sc-auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.25rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-size: 0.95rem;
}
.sc-auth-submit i { font-size: 1.25em; transition: transform .18s ease; }
.sc-auth-submit:hover i { transform: translateX(3px); }

.sc-auth-switch { margin: 0; text-align: center; font-size: 0.875rem; color: var(--sc-text); }
.sc-auth-switch a { font-weight: 700; color: var(--sc-brand); text-decoration: none; }
.sc-auth-switch a:hover { text-decoration: underline; }
.sc-auth-link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--sc-brand); cursor: pointer; }
.sc-auth-link-btn:hover { text-decoration: underline; }
.sc-auth-foot { margin: 0; text-align: center; font-size: 0.75rem; color: var(--sc-muted); }

.sc-auth-status,
.sc-auth-error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.45;
}
.sc-auth-status { background: rgba(var(--bs-success-rgb), 0.12); color: var(--sc-success-ink); }
.sc-auth-error { background: rgba(var(--bs-danger-rgb), 0.1); color: var(--sc-danger-ink); }
.sc-auth-status i, .sc-auth-error i { font-size: 1.2rem; line-height: 1.2; flex: 0 0 auto; }

/* Register: grouped sections */
.sc-auth-group {
  margin: 0;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--sc-border);
  border-radius: 1rem;
  background: var(--sc-surface-2);
}
.sc-auth-group legend {
  float: left;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sc-heading);
}
.sc-auth-group legend + .row { clear: both; }
.sc-auth-step {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--sc-brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
[data-bs-theme=dark] .sc-auth-step { color: #14172a; }
.sc-auth-group .form-control, .sc-auth-group .form-select { background-color: var(--sc-surface); }
@media (max-width: 575.98px) {
  .sc-auth-group { padding: 1rem 0.9rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-auth-submit i, .sc-field-icon, .sc-field-toggle { transition: none !important; }
}