/* ==========================================================================
   Dashboard UI
   --------------------------------------------------------------------------
   One stylesheet for the whole dashboard: tokens, app shell, components and
   the Bootstrap/Tailwind-style utilities the views are written with.

   Colours are NOT hard-coded here. ThemeService prints the active theme
   (global or whitelabel) as CSS variables in the page head; the values in
   section 1 are only fallbacks that match the default Wasabi preset.

   Base tokens (per mode):  --primary --background --surface --sidebar
                            --border --text --text-muted
   Computed per mode:       --primary-foreground --primary-ink (readable as
                            text) --success/-ink/-foreground, warning, danger,
                            info, --hover-mix, --icon-* glyphs
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --radius: 12px;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --primary: #8cb944;
  --background: #0a0c0b;
  --surface: #141816;
  --sidebar: #0d100e;
  --border: #252a27;
  --text: #eceeec;
  --text-muted: #959c98;
  --primary-foreground: #0a0c0b;
  --primary-ink: #8cb944;
  --primary-rgb: 140, 185, 68;
  --hover-mix: #ffffff;
  --success: #36c055;  --success-foreground: #0a0c0b; --success-ink: #36c055;
  --warning: #f5a524;  --warning-foreground: #0a0c0b; --warning-ink: #f5a524;
  --danger: #d92632;   --danger-foreground: #ffffff;  --danger-ink: #dd4e57;
  --info: #5b9bf8;     --info-foreground: #0a0c0b;    --info-ink: #5b9bf8;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-sm: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.06);
  --btn-highlight: none;
}

[data-theme="light"] {
  color-scheme: light;
  --primary: #6f9b34;
  --background: #f3f5f3;
  --surface: #ffffff;
  --sidebar: #fafbfa;
  --border: #e0e4e1;
  --text: #131614;
  --text-muted: #5b6460;
  --primary-foreground: #131614;
  --primary-ink: #5d802e;
  --primary-rgb: 111, 155, 52;
  --hover-mix: #000000;
  --success-foreground: #131614; --success-ink: #2a853e;
  --warning-foreground: #131614; --warning-ink: #9b6c1e;
  --danger-foreground: #ffffff;  --danger-ink: #d92632;
  --info-foreground: #131614;    --info-ink: #4573b4;

  --shadow-xs: 0 1px 2px rgb(16 24 20 / 0.05);
  --shadow-sm: 0 1px 2px rgb(16 24 20 / 0.05), 0 1px 3px rgb(16 24 20 / 0.04);
  --shadow-md: 0 1px 2px rgb(16 24 20 / 0.04), 0 8px 24px -12px rgb(16 24 20 / 0.12);
  --shadow-lg: 0 24px 48px -16px rgb(16 24 20 / 0.22), 0 0 0 1px rgb(16 24 20 / 0.05);
  --btn-highlight: none;
}

/* Derived tokens + aliases for the shadcn/Bootstrap variable names the views
   already use. Re-declared on every themed element and on .theme-scope so
   live previews (theme editor) recompute them from their own base colours. */
:root,
[data-theme],
.theme-scope {
  --radius-sm: max(calc(var(--radius) - 4px), 0px);
  --radius-xs: max(calc(var(--radius) - 6px), 0px);
  --radius-lg: calc(var(--radius) + 4px);

  --surface-2: color-mix(in srgb, var(--surface) 95%, var(--text));
  --surface-3: color-mix(in srgb, var(--surface) 90%, var(--text));
  --surface-sunken: color-mix(in srgb, var(--background) 55%, var(--surface));
  --border-strong: color-mix(in srgb, var(--border) 82%, var(--text));
  --input-bg: var(--surface-sunken);
  --input-border: color-mix(in srgb, var(--border) 90%, var(--text));

  --primary-hover: color-mix(in srgb, var(--primary) 84%, var(--hover-mix));
  --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --primary-soft-2: color-mix(in srgb, var(--primary) 20%, transparent);
  --primary-border: color-mix(in srgb, var(--primary) 40%, transparent);
  --ring: color-mix(in srgb, var(--text) 18%, transparent);
  --focus-ring: 0 0 0 3px var(--ring);

  --success-soft: color-mix(in srgb, var(--success) 13%, transparent);
  --success-border: color-mix(in srgb, var(--success) 30%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 14%, transparent);
  --warning-border: color-mix(in srgb, var(--warning) 32%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 13%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 32%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 13%, transparent);
  --info-border: color-mix(in srgb, var(--info) 30%, transparent);
  --neutral-soft: color-mix(in srgb, var(--text) 7%, transparent);
  --neutral-border: color-mix(in srgb, var(--text) 13%, transparent);

  /* shadcn names */
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --popover: var(--surface);
  --popover-foreground: var(--text);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--text);
  --muted: var(--surface-2);
  --muted-foreground: var(--text-muted);
  --accent: var(--surface-2);
  --accent-foreground: var(--text);
  --destructive: var(--danger);
  --destructive-foreground: var(--danger-foreground);
  --input: var(--input-border);
  --sidebar-foreground: var(--text);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--surface-2);
  --sidebar-accent-foreground: var(--text);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --chart-1: var(--primary);
  --chart-2: var(--info);
  --chart-3: var(--warning);
  --chart-4: var(--danger);
  --chart-5: var(--text-muted);
  --radius-md: var(--radius-sm);

  /* older custom names used by a few pages */
  --primary-color: var(--primary);
  --text-color: var(--text);
  --border-color: var(--border);
  --primary-bg: var(--background);
  --secondary-bg: var(--surface);
  --accent-bg: var(--surface-2);
}


/* Bright brand colours (e.g. wasabi lime) are too faint as chart fills on white */
[data-theme="light"] {
  --chart-1: color-mix(in srgb, var(--primary) 55%, var(--primary-ink));
}

/* 2. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.55;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.003em;
  color: var(--text);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

li + li {
  margin-top: 0.125rem;
}

dl { margin: 0 0 1rem; }
dt { font-weight: 600; }
dd { margin: 0 0 0.5rem; }

hr {
  margin: 1.25rem 0;
  border: 0;
  border-top: 1px solid var(--border);
  opacity: 1;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--text);
  text-decoration-color: var(--text-muted);
}

b, strong {
  font-weight: 600;
}

small, .small {
  font-size: 0.8125rem;
}

img, svg {
  vertical-align: middle;
}

img {
  max-width: 100%;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

label {
  display: inline-block;
  font-weight: 500;
}

table {
  border-collapse: collapse;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

code {
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
  background: var(--neutral-soft);
  color: var(--text);
  word-break: break-word;
}

a > code {
  color: inherit;
}

pre {
  display: block;
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  line-height: 1.6;
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

kbd {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
}

::selection {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 55%, transparent);
  outline-offset: 2px;
}

/* Thin, theme-coloured scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

[hidden] {
  display: none !important;
}

.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
  line-height: 1;
}


/* 3. App shell
   ========================================================================== */

/* Block layout (not flex) so stray closing tags in a page can't pull
   content out of the main column and squeeze it */
.app {
  --sidebar-width: 264px;
  min-height: 100vh;
}

/* Sidebar ---------------------------------------------------------------- */

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  transition: width 0.2s ease, transform 0.25s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 64px;
  padding: 0 1rem 0 1.125rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.sidebar-brand__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  text-decoration: none;
}

.sidebar-brand__link:hover {
  color: var(--text);
}

.sidebar-brand__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.sidebar-brand__logo img {
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
}

.sidebar-brand__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--btn-highlight);
  font-size: 0.95rem;
}

.sidebar-brand__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sidebar-brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-brand__name em {
  font-style: normal;
  color: var(--text);
}

.sidebar-brand__tag {
  display: none;
}

.app-sidebar .sidebar-close {
  display: none;
  margin-left: auto;
}

.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.75rem 1rem;
  scrollbar-gutter: stable;
}

.nav-section + .nav-section {
  margin-top: 1.125rem;
}

.nav-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.625rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 34px;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.nav-item:hover .nav-item-icon {
  color: var(--text);
}

.nav-item-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item.active {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.active::before {
  content: none;
}

.nav-item.active .nav-item-icon {
  color: var(--text);
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}

.user-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.user-chip:hover,
.user-chip[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--border);
}

.avatar {
  display: none;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.75rem;
}

.avatar__status {
  display: none;
}

.user-chip__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.user-chip__name {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip__role {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.user-chip__role i {
  display: none;
}

.user-chip__chevron {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.user-menu {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(100% - 0.25rem);
  z-index: 10;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.user-menu.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.user-menu__header {
  padding: 0.5rem 0.625rem 0.625rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.user-menu__email {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer {
  position: relative;
}

/* Collapsed (icon-only) sidebar on desktop */
@media (min-width: 992px) {
  html.sidebar-collapsed .app {
    --sidebar-width: 72px;
  }

  html.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 0;
  }

  html.sidebar-collapsed .sidebar-brand__link {
    flex: none;
  }

  html.sidebar-collapsed .sidebar-brand__text,
  html.sidebar-collapsed .nav-item-text,
  html.sidebar-collapsed .user-chip__meta,
  html.sidebar-collapsed .user-chip__chevron {
    display: none;
  }

  html.sidebar-collapsed .nav-section-title {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  html.sidebar-collapsed .nav-section-title::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--border-strong);
  }

  html.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 0.5rem;
  }

  html.sidebar-collapsed .nav-item-icon {
    width: auto;
    font-size: 1rem;
  }

  html.sidebar-collapsed .user-chip {
    justify-content: center;
    padding: 0.375rem;
  }

  html.sidebar-collapsed .user-menu {
    left: calc(100% + 0.5rem);
    right: auto;
    bottom: 0.75rem;
    width: 220px;
  }
}

/* Main column ------------------------------------------------------------ */

/* Keep .app-main free of anything that creates a stacking context
   (isolation, z-index, transforms): it would trap Bootstrap modals under
   their body-level backdrop */
.app-main {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.2s ease;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 60px;
  padding: 0 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.topbar-crumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.topbar-crumbs a {
  color: var(--text-muted);
}

.topbar-crumbs a:hover {
  color: var(--text);
}

.topbar-crumbs__sep {
  font-size: 0.625rem;
  opacity: 0.6;
}

.topbar-crumbs__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-weight: 500;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.icon-btn--ghost {
  border-color: transparent;
  background: transparent;
}

.theme-toggle .theme-icon-light { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-light { display: inline-block; }
[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }

.topbar-user {
  display: none;
}

.topbar-user__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user .avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 0.6875rem;
}

.sidebar-toggle-btn {
  display: none;
}

/* Page header ------------------------------------------------------------ */

.page-header-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 2rem 2rem 0;
}

.page-header-bar__text {
  min-width: 0;
  max-width: 760px;
}

.page-eyebrow {
  display: none;
}

.page-eyebrow::before {
  content: none;
}

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.page-description {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.page-header-bar__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-body {
  flex: 1;
  padding: 1.5rem 2rem 3rem;
  min-width: 0;
}

.page-body > .alert:first-child {
  margin-top: 0;
}

.app-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.25rem 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1025;
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Mobile/tablet: sidebar becomes an off-canvas drawer */
@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  html.sidebar-open .app-sidebar {
    transform: none;
    box-shadow: var(--shadow-lg);
  }

  html.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  html.sidebar-open body {
    overflow: hidden;
  }

  .app-main {
    margin-left: 0;
  }

  .sidebar-toggle-btn,
  .app-sidebar .sidebar-close {
    display: inline-flex;
  }

  .sidebar-collapse-btn {
    display: none !important;
  }

  .app-topbar {
    padding: 0 1rem;
  }

  .page-header-bar {
    padding: 1.5rem 1rem 0;
  }

  .page-body {
    padding: 1.25rem 1rem 2.5rem;
  }

  .app-footer {
    padding: 1rem;
  }
}

@media (max-width: 575.98px) {
  .topbar-user__email {
    display: none;
  }

  .topbar-user {
    padding: 0.25rem;
  }

  .page-title {
    font-size: 1.5rem;
  }
}


/* 4. Components
   ========================================================================== */

/* Cards ------------------------------------------------------------------ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  word-wrap: break-word;
}

.grid > .card,
.row > [class*="col"] > .card.h-100,
.stats-grid > .card {
  margin-bottom: 0;
}

.card > .table-responsive:last-child,
.card > .table:last-child,
.card > .card-body:last-child,
.card > .card-content:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.card > :first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.875rem 1.25rem;
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}

.card-header > :only-child:not(.btn):not(.badge) {
  flex: 1;
}

/* Title + description as direct siblings (the <x-card-*> components) stack vertically */
.card-header:has(> .card-description) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  margin: 0;
}

.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-dark {
  border-bottom-color: transparent;
}

.card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
}

h3.card-title,
.card-title.text-2xl {
  font-size: 1.0625rem;
}

.card-title i {
  color: var(--text-muted);
  margin-right: 0.375rem;
  font-size: 0.875em;
}

.card-description,
.card-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.card-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.card-body,
.card-content {
  flex: 1 1 auto;
  padding: 1.25rem;
  min-width: 0;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* <x-card-header> renders "flex flex-col space-y-1.5 p-6" */
.card > .flex.flex-col.p-6:first-child {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.card > .flex.flex-col.p-6:first-child + .card-content {
  padding-top: 1.25rem;
}

.card-content.p-0,
.card-body.p-0 {
  padding: 0;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Forms that wrap a card's body + footer keep the card's rounded corners */
.card > form:last-child > .card-footer:last-child {
  border-bottom-left-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

.card-footer.text-start,
.card-footer.justify-content-start {
  justify-content: flex-start;
}

.card.border-danger { border-color: var(--danger-border); }
.card.border-warning,
.card.border-success,
.card.border-primary,
.card.border-info { border-color: var(--border); }

/* Solid colour cards (old stat cards) render as tinted panels */
.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-info {
  color: var(--text) !important;
}

.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-info { background: var(--surface) !important; border-color: var(--border); }

.card.bg-primary .text-white,
.card.bg-success .text-white,
.card.bg-danger .text-white,
.card.bg-warning .text-white,
.card.bg-info .text-white,
.card.bg-primary.text-white,
.card.bg-success.text-white,
.card.bg-danger.text-white,
.card.bg-warning.text-white,
.card.bg-info.text-white {
  color: var(--text) !important;
}

.card.bg-primary .card-body,
.card.bg-success .card-body,
.card.bg-danger .card-body,
.card.bg-warning .card-body,
.card.bg-info .card-body {
  background: transparent;
}

.card .display-4 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}



.compact-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.compact-card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-3);
  --btn-hover-fg: var(--text);
  --btn-hover-border: var(--border-strong);
  --btn-shadow: var(--shadow-xs);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-border);
  text-decoration: none;
}

.btn:active:not(:disabled):not(.disabled) {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--btn-shadow), var(--focus-ring);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn i,
.btn svg {
  font-size: 0.875em;
  flex-shrink: 0;
}

/* Icon spacing comes from `gap`; neutralise the old margin helpers inside buttons */
.btn > i[class*="me-"],
.btn > i[class*="mr-"],
.btn > i[class*="ms-"],
.btn > i[class*="ml-"] {
  margin: 0 !important;
}

.btn-primary,
.btn-default.btn-primary {
  --btn-bg: var(--primary);
  --btn-fg: var(--primary-foreground);
  --btn-border: color-mix(in srgb, var(--primary) 75%, #000);
  --btn-hover-bg: var(--primary-hover);
  --btn-hover-fg: var(--primary-foreground);
  --btn-hover-border: color-mix(in srgb, var(--primary-hover) 75%, #000);
  --btn-shadow: var(--btn-highlight);
}

.btn-secondary,
.btn-light,
.btn-default {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
}

.btn-outline,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
  --btn-bg: color-mix(in srgb, var(--surface) 50%, transparent);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-fg: var(--text);
  --btn-hover-border: color-mix(in srgb, var(--border-strong) 70%, var(--text));
}

.btn-outline-primary {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-fg: var(--text);
  --btn-hover-border: color-mix(in srgb, var(--border-strong) 70%, var(--text));
  --btn-shadow: none;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-muted);
  --btn-border: transparent;
  --btn-hover-bg: var(--surface-2);
  --btn-hover-fg: var(--text);
  --btn-hover-border: transparent;
  --btn-shadow: none;
}

.btn-link {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: transparent;
  --btn-hover-bg: transparent;
  --btn-hover-fg: var(--text);
  --btn-hover-border: transparent;
  --btn-shadow: none;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

.btn-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-danger,
.btn-destructive {
  --btn-bg: var(--danger);
  --btn-fg: var(--danger-foreground);
  --btn-border: color-mix(in srgb, var(--danger) 75%, #000);
  --btn-hover-bg: color-mix(in srgb, var(--danger) 86%, var(--hover-mix));
  --btn-hover-fg: var(--danger-foreground);
  --btn-hover-border: transparent;
  --btn-shadow: var(--btn-highlight);
}

.btn-success {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-3);
  --btn-hover-fg: var(--text);
  --btn-hover-border: var(--border-strong);
  --btn-shadow: none;
}

.btn-warning {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-3);
  --btn-hover-fg: var(--text);
  --btn-hover-border: var(--border-strong);
  --btn-shadow: none;
}

.btn-info {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-3);
  --btn-hover-fg: var(--text);
  --btn-hover-border: var(--border-strong);
  --btn-shadow: none;
}

.btn-dark {
  --btn-bg: var(--text);
  --btn-fg: var(--surface);
  --btn-border: transparent;
  --btn-hover-bg: color-mix(in srgb, var(--text) 85%, var(--surface));
  --btn-hover-fg: var(--surface);
}

.btn-outline-danger {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--danger-soft);
  --btn-hover-fg: var(--danger-ink);
  --btn-hover-border: var(--danger-border);
  --btn-shadow: none;
}

.btn-outline-success {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-fg: var(--text);
  --btn-hover-border: color-mix(in srgb, var(--border-strong) 70%, var(--text));
  --btn-shadow: none;
}

.btn-outline-warning {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-fg: var(--text);
  --btn-hover-border: color-mix(in srgb, var(--border-strong) 70%, var(--text));
  --btn-shadow: none;
}

.btn-outline-info {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-fg: var(--text);
  --btn-hover-border: color-mix(in srgb, var(--border-strong) 70%, var(--text));
  --btn-shadow: none;
}

.btn-sm,
.btn-group-sm > .btn {
  min-height: 30px;
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  border-radius: var(--radius-xs);
  gap: 0.375rem;
}

.btn-lg,
.btn-group-lg > .btn {
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
}

.btn-icon {
  width: 36px;
  padding: 0;
}

.btn-sm.btn-icon {
  width: 30px;
}

.btn-block,
.btn.w-100,
.btn.w-full {
  display: flex;
  width: 100%;
}

.btn.justify-start,
.btn.justify-content-start {
  justify-content: flex-start;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn {
  position: relative;
  flex: 0 1 auto;
}

.btn-group > .btn:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus-visible,
.btn-group > .btn.active {
  z-index: 1;
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-check:checked + .btn,
.btn.active {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-close::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

.btn-close > * {
  display: none;
}

.close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* Forms ------------------------------------------------------------------ */

.form-label,
.col-form-label,
.form-group > label,
.mb-3 > label:not(.form-check-label):not(.custom-control-label) {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}

.col-form-label {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  margin-bottom: 0;
}

.form-label .required,
label .required,
.text-required {
  color: var(--danger-ink);
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.form-control,
.form-select,
.input,
.custom-select,
textarea.input,
input.shadcn-form-control {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background-color: var(--input-bg);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: var(--shadow-xs);
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-control::placeholder,
.input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--text-muted) 75%, transparent);
  opacity: 1;
}

.form-control:hover,
.form-select:hover,
.input:hover {
  border-color: var(--border-strong);
}

.form-control:focus,
.form-select:focus,
.input:focus,
.custom-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--text) 35%, var(--input-border));
  box-shadow: var(--focus-ring);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.input:disabled {
  background-color: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}

.form-control[readonly]:focus {
  box-shadow: none;
}

textarea.form-control,
textarea.input {
  min-height: 88px;
  resize: vertical;
  line-height: 1.55;
}

.form-control.font-mono,
.form-control.font-monospace,
textarea.font-monospace {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.form-select,
select.form-control,
.custom-select,
select.input {
  padding-right: 2.25rem;
  background-image: var(--icon-chevron);
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 16px 16px;
  cursor: pointer;
}

select[multiple].form-control,
select[multiple].form-select,
select[size].form-control {
  padding-right: 0.75rem;
  background-image: none;
}

.form-select option,
select.form-control option {
  background-color: var(--surface);
  color: var(--text);
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select {
  min-height: 32px;
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-xs);
}

.form-select-sm {
  padding-right: 2rem;
}

.form-control-lg {
  min-height: 46px;
  font-size: 1rem;
}

.form-control[type="file"] {
  padding: 0.3125rem;
  cursor: pointer;
}

.form-control::file-selector-button {
  margin: 0 0.75rem 0 0;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
}

.form-control-color,
input[type="color"].form-control {
  width: 46px;
  height: 38px;
  min-height: 38px;
  padding: 4px;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-sm) - 4px); }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: calc(var(--radius-sm) - 4px); }

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.input.is-invalid {
  border-color: var(--danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--success);
}

.invalid-feedback {
  display: none;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--danger-ink);
}

.is-invalid ~ .invalid-feedback,
.is-invalid + .invalid-feedback,
.was-validated :invalid ~ .invalid-feedback,
.invalid-feedback.d-block,
.has-error .invalid-feedback {
  display: block;
}

.valid-feedback {
  display: none;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--success-ink);
}

/* Checkboxes, radios, switches */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 1.5rem;
  margin-bottom: 0.25rem;
  padding-left: 0;
}

.form-check-inline {
  display: inline-flex;
  margin-right: 1rem;
}

.form-check-label,
.custom-control-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}

.form-check-input,
.custom-control-input,
.custom-checkbox,
input[type="checkbox"].rule-checkbox,
input[type="checkbox"]#select-all,
.shadcn-checkbox-input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0.1875rem 0 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--input-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-check-input[type="radio"],
.custom-radio .custom-control-input {
  border-radius: 50%;
}

.form-check-input:hover,
.custom-control-input:hover {
  border-color: color-mix(in srgb, var(--text) 40%, var(--border-strong));
}

.form-check-input:focus-visible,
.custom-control-input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--text) 45%, var(--border-strong));
  box-shadow: var(--focus-ring);
}

.form-check-input:checked,
.custom-control-input:checked,
.custom-checkbox:checked,
input[type="checkbox"].rule-checkbox:checked,
input[type="checkbox"]#select-all:checked,
.shadcn-checkbox-input:checked {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: var(--icon-check);
}

.form-check-input[type="radio"]:checked,
.custom-radio .custom-control-input:checked {
  background-image: var(--icon-radio);
}

.form-check-input:indeterminate,
input[type="checkbox"]#select-all:indeterminate {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: var(--icon-indeterminate);
}

.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-check-input:disabled ~ .form-check-label {
  opacity: 0.6;
}

.form-switch {
  padding-left: 0;
}

.form-switch .form-check-input,
.custom-switch .custom-control-input {
  width: 34px;
  height: 20px;
  margin-top: 0.0625rem;
  border-radius: 999px;
  background-color: var(--surface-3);
  background-image: var(--icon-switch-off);
  background-size: 18px 18px;
  background-position: left 1px center;
  transition: background-position 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.form-switch .form-check-input:checked,
.custom-switch .custom-control-input:checked {
  background-color: var(--primary);
  background-image: var(--icon-switch-on);
  background-position: right 1px center;
}

.custom-control {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 1.5rem;
  padding-left: 0;
}

.custom-control-label::before,
.custom-control-label::after {
  display: none;
}

.custom-file-label {
  display: block;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-muted);
}

/* Input groups */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .select2-container {
  position: relative;
  flex: 1 1 auto;
  width: 1% !important;
  min-width: 0;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}

.input-group-text,
.input-group-prepend > .input-group-text,
.input-group-append > .input-group-text {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.invalid-feedback),
.input-group > .input-group-append > :first-child {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > :not(:last-child):not(.dropdown-menu),
.input-group > .input-group-prepend > :last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .invalid-feedback {
  width: 100%;
}

.input-group .btn {
  min-height: 38px;
  box-shadow: none;
}

.input-group-sm .btn,
.input-group-sm .input-group-text {
  min-height: 32px;
}

.form-floating {
  position: relative;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Select2 ---------------------------------------------------------------- */

.select2-container {
  min-width: 0;
  font-size: 0.875rem;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 38px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background-color: var(--input-bg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1;
  padding: 0 2.25rem 0 0.75rem;
  color: var(--text);
  line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 0.5rem;
  height: 100%;
  width: 18px;
  background: var(--icon-chevron) center / 16px 16px no-repeat;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 0.25rem;
  color: var(--text-muted);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: color-mix(in srgb, var(--text) 35%, var(--input-border));
  box-shadow: var(--focus-ring);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 0.375rem;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin: 8px 0 0 0.375rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
  color: color-mix(in srgb, var(--text-muted) 75%, transparent);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right-color: var(--border-strong);
  color: var(--text-muted);
}

.select2-dropdown,
.select2-dark-theme {
  z-index: 1060;
  overflow: hidden;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg);
}

.select2-container--open .select2-dropdown--below {
  margin-top: 4px;
}

.select2-container--open .select2-dropdown--above {
  margin-top: -4px;
}

.select2-search--dropdown {
  padding: 0.5rem;
  background: transparent !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 34px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  background: var(--input-bg) !important;
  color: var(--text) !important;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 280px;
  padding: 0.25rem;
  background: transparent !important;
}

.select2-results__option,
.select2-dark-theme .select2-results__option {
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radius-xs);
  background-color: transparent !important;
  color: var(--text) !important;
  font-size: 0.8125rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background-color: var(--surface-3) !important;
  color: var(--text) !important;
  font-weight: 600;
}

.select2-container--default .select2-results__option--disabled {
  color: var(--text-muted) !important;
}

.select2-container--default .select2-results__group {
  padding: 0.5rem 0.625rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Tables ----------------------------------------------------------------- */

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table thead th {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.table > thead.table-light > tr > th,
.table > thead.thead-light > tr > th,
.table > thead.table-dark > tr > th,
.table > thead.thead-dark > tr > th {
  background: transparent;
  color: var(--text-muted);
}

.table > tbody > tr:last-child > * {
  border-bottom: 0;
}

.table > tbody > tr {
  transition: background-color 0.12s ease;
}

.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > * {
  background-color: color-mix(in srgb, var(--surface-2) 75%, transparent);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: color-mix(in srgb, var(--surface-2) 40%, transparent);
}

.table-bordered > :not(caption) > * > * {
  border: 1px solid var(--border);
}

.table-sm > :not(caption) > * > *,
.table-compact > :not(caption) > * > * {
  padding: 0.4375rem 0.75rem;
}

.table-compact {
  font-size: 0.8125rem;
}

.table-borderless > :not(caption) > * > * {
  border-bottom: 0;
}

.table thead th.text-end,
.table th.text-end,
.table thead th.text-right,
.table th.text-right,
.table td.text-end,
.table td.text-right {
  text-align: right;
}

.table th.text-center,
.table td.text-center {
  text-align: center;
}

.table .btn {
  min-height: 28px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-xs);
}

.table .btn-sm {
  min-height: 26px;
  padding: 0.1875rem 0.4375rem;
}

.table code {
  font-size: 0.75rem;
  white-space: nowrap;
  word-break: normal;
}

.table-danger > *,
tr.table-danger > * {
  background-color: var(--danger-soft) !important;
}

.table-warning > *,
tr.table-warning > * {
  background-color: var(--warning-soft) !important;
}

.table-success > *,
tr.table-success > * {
  background-color: var(--success-soft) !important;
}

.table-info > *,
tr.table-info > * {
  background-color: var(--info-soft) !important;
}

.table-active > *,
tr.table-active > *,
tr.table-light > *,
tr.table-secondary > * {
  background-color: var(--surface-2) !important;
}

.table-sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
}

/* Cards that wrap a table: let the table run edge to edge */
.card > .table-responsive > .table > :not(caption) > * > :first-child,
.card > .card-body.p-0 .table > :not(caption) > * > :first-child,
.card > .card-content.p-0 .table > :not(caption) > * > :first-child {
  padding-left: 1.25rem;
}

.card > .table-responsive > .table > :not(caption) > * > :last-child,
.card > .card-body.p-0 .table > :not(caption) > * > :last-child,
.card > .card-content.p-0 .table > :not(caption) > * > :last-child {
  padding-right: 1.25rem;
}

th.sortable,
.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--text);
}

.sort-indicator,
th .fa-sort,
th [class*="fa-sort-"] {
  margin-left: 0.25rem;
  font-size: 0.625rem;
  opacity: 0.6;
}

.empty-state,
.table td.empty-state {
  padding: 3rem 1rem !important;
  text-align: center;
  color: var(--text-muted);
}

.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 1.125rem;
}

/* Badges ----------------------------------------------------------------- */

.badge {
  --badge-dot: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 22px;
  padding: 0.125rem 0.5rem;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}

.badge:empty {
  display: none;
}

.badge i {
  font-size: 0.875em;
}

.badge-sm {
  min-height: 18px;
  padding: 0 0.4375rem;
  font-size: 0.625rem;
}

.badge-lg {
  min-height: 26px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

.badge.rounded-pill,
.rounded-pill {
  border-radius: 999px;
}

.badge.bg-success, .badge-success, .badge-soft-success { --badge-dot: var(--success); }
.badge.bg-danger, .badge-danger, .badge-destructive, .badge-soft-danger { --badge-dot: var(--danger); }
.badge.bg-warning, .badge-warning, .badge-soft-warning { --badge-dot: var(--warning); }
.badge.bg-info, .badge-info, .badge-soft-info { --badge-dot: var(--info); }

.badge.bg-success::before, .badge-success::before, .badge-soft-success::before,
.badge.bg-danger::before, .badge-danger::before, .badge-destructive::before, .badge-soft-danger::before,
.badge.bg-warning::before, .badge-warning::before, .badge-soft-warning::before,
.badge.bg-info::before, .badge-info::before, .badge-soft-info::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--badge-dot);
}

.badge.bg-secondary, .badge.bg-light, .badge.bg-dark, .badge-secondary,
.badge-soft-secondary, .badge-inactive, .bg-outline-secondary {
  color: var(--text-muted);
}

/* Bootstrap paints .bg-* with !important; keep badges neutral */
.badge.bg-primary, .badge.bg-success, .badge.bg-danger, .badge.bg-warning,
.badge.bg-info, .badge.bg-secondary, .badge.bg-light, .badge.bg-dark, .badge.bg-white {
  background: var(--surface-2) !important;
}

.badge.bg-primary, .badge.bg-success, .badge.bg-danger, .badge.bg-warning,
.badge.bg-info, .badge.bg-white, .badge.text-white, .badge.text-dark {
  color: var(--text) !important;
}

/* A dot-style status pill: <span class="status-pill"><span class="dot"></span>Online</span> */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 500;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.status-dot--success { background: var(--success); }
.status-dot--danger { background: var(--danger); }
.status-dot--warning { background: var(--warning); }
.status-dot--primary { background: var(--text-muted); }
.status-dot--info { background: var(--info); }

/* Alerts ----------------------------------------------------------------- */

.alert {
  --alert-border: var(--border);
  --alert-accent: var(--text-muted);
  position: relative;
  display: block;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--alert-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.alert > i:first-child,
.alert > .flex > i:first-child,
.alert > .d-flex > i:first-child,
.alert .alert-icon {
  color: var(--alert-accent);
}

.alert a:not(.btn) {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alert ul,
.alert ol {
  margin: 0.375rem 0 0;
}

.alert-heading {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.alert-success {
  --alert-accent: var(--success-ink);
}

.alert-danger,
.alert-error {
  --alert-border: var(--danger-border);
  --alert-accent: var(--danger-ink);
}

.alert-warning {
  --alert-border: var(--warning-border);
  --alert-accent: var(--warning-ink);
}

.alert-info {
  --alert-accent: var(--info-ink);
}

.alert-primary {
  --alert-accent: var(--text-muted);
}

.alert-secondary,
.alert-light,
.alert-dark {
  --alert-border: var(--border);
  --alert-accent: var(--text-muted);
}

.alert-dismissible {
  padding-right: 3rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.flash-stack .alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  animation: flash-in 0.25s ease both;
}

.flash-stack .alert > i {
  margin-top: 0.1875rem;
  font-size: 0.9375rem;
}

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.callout {
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.callout-info { border-left-color: var(--info); }
.callout-warning { border-left-color: var(--warning); }
.callout-danger { border-left-color: var(--danger); }
.callout-success { border-left-color: var(--success); }

/* Modals ----------------------------------------------------------------- */

.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 520px;
  margin: 1.75rem auto;
  padding: 0 1rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s ease-out;
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

.modal-dialog-scrollable {
  height: calc(100% - 3.5rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-sm { max-width: 380px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  outline: 0;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.modal-header.bg-danger,
.modal-header.bg-warning,
.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-info {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0 0 0 / 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 1;
}

@media (min-width: 576px) {
  .modal-dialog {
    margin: 3.5rem auto;
  }

  .modal-dialog-centered {
    min-height: calc(100% - 7rem);
  }
}

/* Tabs & pills ----------------------------------------------------------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
  color: var(--text);
}

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

/* .nav-item inside tabs/pills is a plain list item, not a sidebar link */
.nav-tabs .nav-item,
.nav-pills .nav-item,
.nav > .nav-item {
  display: block;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none !important;
  font-weight: inherit;
}

.nav-tabs .nav-item::before,
.nav-pills .nav-item::before,
.nav > .nav-item::before {
  display: none;
}

.nav-tabs {
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
  position: relative;
  margin-bottom: -1px;
  padding: 0.625rem 0.875rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: var(--border-strong);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

.nav-tabs .nav-link.active i {
  color: var(--text);
}

.nav-pills {
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.nav-pills .nav-link {
  border-radius: var(--radius-xs);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
}

.nav-pills .nav-link.active i {
  color: var(--text);
}

.nav-fill .nav-item,
.nav-fill > .nav-link {
  flex: 1 1 auto;
  text-align: center;
}

/* Narrow screens: tab rows scroll sideways instead of clipping */
@media (max-width: 767.98px) {
  .nav-tabs,
  .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
  }

  .nav-tabs::-webkit-scrollbar,
  .nav-pills::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

/* Dropdowns -------------------------------------------------------------- */

.dropdown,
.dropup,
.dropend,
.dropstart {
  position: relative;
}

.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.125rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  opacity: 0.7;
}

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 11rem;
  margin: 0;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
  list-style: none;
  text-align: left;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu-end {
  right: 0;
  left: auto;
}

.dropdown-item,
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.dropdown-item i,
.menu-item i {
  width: 16px;
  color: var(--text-muted);
  text-align: center;
}

.dropdown-item:hover,
.dropdown-item:focus,
.menu-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--surface-3);
  color: var(--text);
}

.dropdown-item.text-danger,
.menu-item--danger {
  color: var(--danger-ink);
}

.dropdown-item.text-danger i,
.menu-item--danger i {
  color: var(--danger-ink);
}

.dropdown-divider {
  height: 0;
  margin: 0.375rem 0;
  border-top: 1px solid var(--border);
}

.dropdown-header {
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Pagination ------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.page-item {
  margin: 0;
}

.page-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-link:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.page-item.active .page-link {
  z-index: 1;
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text);
  font-weight: 600;
}

.page-item.disabled .page-link {
  background: transparent;
  color: var(--text-muted);
  opacity: 0.55;
  pointer-events: none;
}

.pagination-info {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Laravel's default (Tailwind) paginator markup */
nav[role="navigation"] svg {
  width: 1rem;
  height: 1rem;
}

nav[role="navigation"] > .flex.justify-between.flex-1 {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

nav[role="navigation"] span[aria-current="page"] > span,
nav[role="navigation"] a.relative,
nav[role="navigation"] span.relative {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.625rem;
  margin-left: -1px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
}

nav[role="navigation"] span[aria-current="page"] > span {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border-strong);
}

nav[role="navigation"] p {
  margin: 0;
  color: var(--text-muted);
}

/* List group ------------------------------------------------------------- */

.list-group {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  list-style: none;
}

.list-group-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-action:hover {
  background: var(--surface-2);
}

.list-group-item.active {
  z-index: 1;
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text);
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

/* Progress, spinners, toasts, tooltips ----------------------------------- */

.progress {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 0.625rem;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  text-align: center;
  white-space: nowrap;
  transition: width 0.4s ease;
}

.progress-bar.bg-success { background: var(--success) !important; }
.progress-bar.bg-danger { background: var(--danger) !important; }
.progress-bar.bg-warning { background: var(--warning) !important; }
.progress-bar.bg-info { background: var(--info) !important; }

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.15) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 0.15) 50%, rgb(255 255 255 / 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0% { background-position-x: 1rem; }
}

.spinner-border {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  border: 0.2em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--text-muted);
  vertical-align: -0.125em;
  animation: spin 0.75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

.btn .spinner-border {
  color: currentColor;
}

.spinner-grow {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: grow 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes grow {
  0% { transform: scale(0); }
  50% { opacity: 1; transform: none; }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.fa-spin {
  animation-duration: 1s;
}

.toast-container {
  position: fixed;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast-container > * {
  pointer-events: auto;
}

.toast {
  width: 360px;
  max-width: calc(100vw - 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
}

.toast:not(.show) {
  display: none;
}

.toast-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

.toast-header .btn-close {
  margin-left: auto;
}

.toast-body {
  padding: 0.75rem 0.875rem;
}

.tooltip {
  position: absolute;
  z-index: 1080;
  display: block;
  margin: 0;
  font-size: 0.75rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-arrow {
  display: none;
}

.tooltip-inner {
  max-width: 260px;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.popover {
  position: absolute;
  z-index: 1070;
  max-width: 300px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.popover-body {
  padding: 0.625rem 0.75rem;
}

/* Bootstrap transitions & visibility ------------------------------------- */

.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
}

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Breadcrumb (used inside a few pages) ----------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--border-strong);
}

.breadcrumb-item.active {
  color: var(--text);
}

/* Shared dashboard pieces ------------------------------------------------ */

/* Section heading inside a page: title left, actions right */
.page-heading,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-heading h1,
.page-heading h2,
.page-heading h3,
.page-heading h4,
.section-heading h2,
.section-heading h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.page-heading .heading-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-header {
  margin-bottom: 1.25rem;
}

.page-header h1,
.page-header h2,
.page-header h3 {
  margin: 0;
}

/* Metric tiles */
.stats-grid,
.stat-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card,
.stat-tile,
.stat-overview-card,
.stats-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  min-height: 92px;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

/* Phones: two metrics per row instead of a tall single column */
@media (max-width: 575.98px) {
  .stats-grid,
  .stat-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .stats-grid .stat-card,
  .stat-tile-grid .stat-tile {
    min-height: 0;
    padding: 0.75rem 0.875rem;
  }

  .stats-grid .stat-value,
  .stat-tile-grid .stat-value {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
  }

  .stats-grid .stat-card .icon-chip {
    width: 30px;
    height: 30px;
    font-size: 0.8125rem;
  }

  .stats-grid .stat-label {
    font-size: 0.75rem;
  }
}

.stat-overview-card {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.875rem;
}

.stat-card::after,
.stat-overview-card::after {
  content: none;
}

.stat-label,
.stats-title,
.stat-caption,
.stat-card__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.stat-value,
.stats-value,
.stat-number,
.stat-card__value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-value-sm {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.stat-sub,
.stats-change,
.stat-card__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.stat-unit {
  margin-left: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.stat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.stats-icon,
.icon-chip,
.stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* Metric cards read like the website's stats row: label, number, caption */
.stat-card .icon-chip,
.stat-tile .icon-chip,
.stat-overview-card .icon-chip,
.stats-card .stats-icon,
.stat-card__icon {
  display: none;
}

/* Quick-action tiles */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.action-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.action-tile:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

.action-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.action-tile:hover .action-tile__icon {
  color: var(--text);
}

.action-tile__title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.action-tile__desc {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.action-tile__arrow {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.action-tile:hover .action-tile__arrow {
  color: var(--text);
  transform: translateX(2px);
}

/* Monospace chips for IPs, ports, keys */
.mono-chip,
.ip-badge,
.cidr-notation {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Eyebrow label, same as the website's section eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.eyebrow::before {
  content: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.divider-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.pulsate {
  animation: pulsate 1.6s ease-in-out infinite;
}

@keyframes pulsate {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.scroll-thin {
  scrollbar-width: thin;
}

.server-time,
.relative-time {
  font-variant-numeric: tabular-nums;
}

.chart-container {
  position: relative;
  width: 100%;
}


/* 5. Utilities
   --------------------------------------------------------------------------
   Bootstrap spacing scale for 0-5 (the views are mostly Bootstrap markup),
   Tailwind values for the larger steps and Tailwind-only names.
   ========================================================================== */

/* Display */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
.d-table-cell { display: table-cell !important; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.contents { display: contents; }

/* Flex */
.flex-row { flex-direction: row !important; }
.flex-column, .flex-col { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-1, .grow { flex-grow: 1 !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0 !important; }
.justify-content-start, .justify-start { justify-content: flex-start !important; }
.justify-content-end, .justify-end { justify-content: flex-end !important; }
.justify-content-center, .justify-center { justify-content: center !important; }
.justify-content-between, .justify-between { justify-content: space-between !important; }
.justify-content-around, .justify-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.align-items-start, .items-start { align-items: flex-start !important; }
.align-items-end, .items-end { align-items: flex-end !important; }
.align-items-center, .items-center { align-items: center !important; }
.align-items-baseline, .items-baseline { align-items: baseline !important; }
.align-items-stretch, .items-stretch { align-items: stretch !important; }
.align-self-start, .self-start { align-self: flex-start !important; }
.align-self-end, .self-end { align-self: flex-end !important; }
.align-self-center, .self-center { align-self: center !important; }
.align-middle { vertical-align: middle !important; }
.align-top { vertical-align: top !important; }
.align-bottom { vertical-align: bottom !important; }
.align-baseline { vertical-align: baseline !important; }
.order-first { order: -1 !important; }
.order-last { order: 6 !important; }

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-4 { row-gap: 1rem; }

.space-x-1 > * + * { margin-left: 0.25rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.space-y-0 > * + * { margin-top: 0; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }

/* Bootstrap grid */
.container,
.container-fluid,
.container-lg,
.container-xl {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.container { max-width: 1400px; }

.row {
  --gutter-x: 1.5rem;
  --gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-0.5 * var(--gutter-x));
  margin-left: calc(-0.5 * var(--gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--gutter-y);
  padding-right: calc(var(--gutter-x) * 0.5);
  padding-left: calc(var(--gutter-x) * 0.5);
  min-width: 0;
}

.g-0, .gx-0 { --gutter-x: 0; }
.g-0, .gy-0 { --gutter-y: 0; }
.g-1, .gx-1 { --gutter-x: 0.25rem; }
.g-1, .gy-1 { --gutter-y: 0.25rem; }
.g-2, .gx-2 { --gutter-x: 0.5rem; }
.g-2, .gy-2 { --gutter-y: 0.5rem; }
.g-3, .gx-3 { --gutter-x: 1rem; }
.g-3, .gy-3 { --gutter-y: 1rem; }
.g-4, .gx-4 { --gutter-x: 1.5rem; }
.g-4, .gy-4 { --gutter-y: 1.5rem; }

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.3333%; }
.col-2 { flex: 0 0 auto; width: 16.6667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.3333%; }
.col-5 { flex: 0 0 auto; width: 41.6667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.3333%; }
.col-8 { flex: 0 0 auto; width: 66.6667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
  .offset-sm-2 { margin-left: 16.6667%; }
}

@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.3333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .offset-md-3 { margin-left: 25%; }
}

@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
}

/* Margin (Bootstrap 0-5 scale) */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-16 { margin-top: 4rem !important; }
.mt-auto { margin-top: auto !important; }
.-mt-px { margin-top: -1px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.ms-0, .ml-0 { margin-left: 0 !important; }
.ms-1, .ml-1 { margin-left: 0.25rem !important; }
.ms-2, .ml-2 { margin-left: 0.5rem !important; }
.ms-3, .ml-3 { margin-left: 0.75rem !important; }
.ml-4 { margin-left: 1rem !important; }
.ms-auto, .ml-auto { margin-left: auto !important; }
.me-0, .mr-0 { margin-right: 0 !important; }
.me-1, .mr-1 { margin-right: 0.25rem !important; }
.me-2, .mr-2 { margin-right: 0.5rem !important; }
.me-3, .mr-3 { margin-right: 0.75rem !important; }
.me-auto, .mr-auto { margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.ps-0, .pl-0 { padding-left: 0 !important; }
.ps-2, .pl-2 { padding-left: 0.5rem !important; }
.ps-3, .pl-3 { padding-left: 0.75rem !important; }
.pl-5 { padding-left: 1.25rem !important; }
.pl-10 { padding-left: 2.5rem !important; }
.pe-0, .pr-0 { padding-right: 0 !important; }
.pe-2, .pr-2 { padding-right: 0.5rem !important; }
.pe-3, .pr-3 { padding-right: 0.75rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.px-\[0\.3rem\] { padding-left: 0.3rem !important; padding-right: 0.3rem !important; }
.py-\[0\.2rem\] { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }

/* Sizing */
.w-auto { width: auto !important; }
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100, .w-full { width: 100% !important; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-100, .h-full { height: 100% !important; }
.h-auto { height: auto !important; }
.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0 !important; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-7xl { max-width: 80rem; }
.max-h-64 { max-height: 16rem; }
.mw-100 { max-width: 100% !important; }
.vh-100 { height: 100vh !important; }

/* Position */
.position-relative, .relative { position: relative !important; }
.position-absolute, .absolute { position: absolute !important; }
.position-fixed, .fixed { position: fixed !important; }
.position-sticky, .sticky { position: sticky !important; }
.position-static, .static { position: static !important; }
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.start-0, .left-0 { left: 0 !important; }
.end-0, .right-0 { right: 0 !important; }
.inset-0 { inset: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* Overflow */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-visible { overflow: visible !important; }

/* Typography */
.font-sans { font-family: var(--font-sans) !important; }
.font-display { font-family: var(--font-display) !important; }
.font-mono,
.font-monospace,
.text-monospace { font-family: var(--font-mono) !important; font-size: 0.92em; }
.fs-1 { font-size: 2rem !important; }
.fs-2 { font-size: 1.625rem !important; }
.fs-3 { font-size: 1.375rem !important; }
.fs-4 { font-size: 1.125rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-6 { font-size: 0.875rem !important; }
.text-xs { font-size: 0.75rem !important; line-height: 1.1rem; }
.text-sm { font-size: 0.8125rem !important; line-height: 1.25rem; }
.text-base { font-size: 0.9375rem !important; }
.text-lg { font-size: 1.0625rem !important; line-height: 1.6rem; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem; }
.text-3xl { font-size: 1.875rem !important; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem; }
.display-4,
.display-5,
.display-6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.display-4 { font-size: 2.25rem; }
.display-5 { font-size: 2rem; }
.display-6 { font-size: 1.75rem; }
.lead { font-size: 1rem; color: var(--text-muted); }
.fw-light, .font-light { font-weight: 300 !important; }
.fw-normal, .font-normal { font-weight: 400 !important; }
.fw-medium, .font-medium { font-weight: 500 !important; }
.fw-semibold, .font-semibold { font-weight: 600 !important; }
.fw-bold, .font-bold, .font-weight-bold { font-weight: 700 !important; }
.fst-italic, .italic { font-style: italic !important; }
.text-start, .text-left { text-align: left !important; }
.text-end, .text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-uppercase, .uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize, .capitalize { text-transform: capitalize !important; }
.text-nowrap, .whitespace-nowrap { white-space: nowrap !important; }
.text-wrap { white-space: normal !important; }
.text-break, .break-all { word-break: break-word !important; overflow-wrap: anywhere; }
.text-truncate,
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-decoration-none, .no-underline { text-decoration: none !important; }
.underline { text-decoration: underline; text-underline-offset: 3px; }
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-relaxed { line-height: 1.65 !important; }
.tracking-tight { letter-spacing: -0.02em !important; }
.tracking-wide { letter-spacing: 0.04em !important; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.list-decimal { list-style: decimal; }
.list-disc { list-style: disc; }
.list-inside { list-style-position: inside; padding-left: 0; }
.antialiased { -webkit-font-smoothing: antialiased; }

/* Text colours: every status colour maps to its readable "-ink" variant */
.text-body,
.text-foreground,
.text-dark,
.text-black,
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-slate-900,
.text-slate-800 { color: var(--text) !important; }

.text-muted,
.text-muted-foreground,
.text-secondary,
.text-body-secondary,
.text-gray-600,
.text-gray-500,
.text-gray-400,
.text-slate-500,
.text-slate-400 { color: var(--text-muted) !important; }

.text-white { color: #fff !important; }
.text-primary { color: var(--text) !important; }
.text-success,
.text-green-400,
.text-green-500,
.text-green-600,
.text-green-700,
.text-green-800,
.text-emerald-500 { color: var(--success-ink) !important; }
.text-danger,
.text-destructive,
.text-red-400,
.text-red-500,
.text-red-600,
.text-red-700,
.text-red-800 { color: var(--danger-ink) !important; }
.text-warning,
.text-yellow-400,
.text-yellow-500,
.text-yellow-600,
.text-yellow-700,
.text-yellow-800,
.text-orange-500,
.text-orange-600,
.text-orange-800,
.text-amber-500 { color: var(--warning-ink) !important; }
.text-info,
.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800 { color: var(--info-ink) !important; }

/* Background colours */
.bg-primary { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }
.bg-success { background-color: var(--success) !important; color: var(--success-foreground) !important; }
.bg-danger { background-color: var(--danger) !important; color: var(--danger-foreground) !important; }
.bg-warning { background-color: var(--warning) !important; color: var(--warning-foreground) !important; }
.bg-info { background-color: var(--info) !important; color: var(--info-foreground) !important; }
.bg-secondary { background-color: var(--surface-3) !important; color: var(--text) !important; }
.bg-light,
.bg-muted,
.bg-gray-50,
.bg-gray-100 { background-color: var(--surface-2) !important; }
.bg-dark { background-color: var(--surface-sunken) !important; color: var(--text) !important; }
.bg-white,
.bg-card,
.bg-body { background-color: var(--surface) !important; }
.bg-background { background-color: var(--background) !important; }
.bg-transparent { background-color: transparent !important; }

.bg-opacity-10 { background-color: color-mix(in srgb, var(--surface) 10%, transparent) !important; }
.bg-opacity-25 { background-color: color-mix(in srgb, var(--surface) 25%, transparent) !important; }
.bg-opacity-50 { background-color: color-mix(in srgb, var(--surface) 50%, transparent) !important; }
.bg-opacity-75 { background-color: color-mix(in srgb, var(--surface) 75%, transparent) !important; }
.bg-primary.bg-opacity-10, .bg-primary.bg-opacity-25 { background-color: var(--surface-2) !important; color: var(--text) !important; }
.bg-success.bg-opacity-10, .bg-success.bg-opacity-25 { background-color: var(--success-soft) !important; color: var(--success-ink) !important; }
.bg-danger.bg-opacity-10, .bg-danger.bg-opacity-25 { background-color: var(--danger-soft) !important; color: var(--danger-ink) !important; }
.bg-warning.bg-opacity-10, .bg-warning.bg-opacity-25 { background-color: var(--warning-soft) !important; color: var(--warning-ink) !important; }
.bg-info.bg-opacity-10, .bg-info.bg-opacity-25 { background-color: var(--info-soft) !important; color: var(--info-ink) !important; }
.bg-white.bg-opacity-25 { background-color: color-mix(in srgb, var(--text) 12%, transparent) !important; }
.bg-white.bg-opacity-75 { background-color: color-mix(in srgb, var(--background) 75%, transparent) !important; }

/* Text helpers inside solid colour blocks follow the block's readable colour */
.bg-primary .text-white, .bg-primary .text-dark, .bg-primary .text-muted,
.bg-success .text-white, .bg-success .text-dark, .bg-success .text-muted,
.bg-warning .text-white, .bg-warning .text-dark, .bg-warning .text-muted,
.bg-info .text-white, .bg-info .text-dark, .bg-info .text-muted,
.bg-danger .text-white, .bg-danger .text-dark, .bg-danger .text-muted {
  color: inherit !important;
}

/* Tailwind pastel helpers become theme-aware soft tints */
.bg-green-50, .bg-green-100, .bg-green-500\/10, .bg-emerald-900\/80 { background-color: var(--success-soft) !important; }
.bg-red-50, .bg-red-100, .bg-red-500\/10 { background-color: var(--danger-soft) !important; }
.bg-yellow-50, .bg-yellow-100, .bg-yellow-500\/10, .bg-orange-50, .bg-orange-100, .bg-amber-50 { background-color: var(--warning-soft) !important; }
.bg-blue-50, .bg-blue-100, .bg-blue-500\/10 { background-color: var(--info-soft) !important; }
.border-green-200, .border-green-300, .border-green-500\/20 { border-color: var(--success-border) !important; }
.border-red-200, .border-red-300, .border-red-500\/20 { border-color: var(--danger-border) !important; }
.border-yellow-200, .border-yellow-300, .border-yellow-500\/20, .border-orange-200 { border-color: var(--warning-border) !important; }
.border-blue-200, .border-blue-300, .border-blue-500\/20 { border-color: var(--info-border) !important; }

/* Borders */
.border { border: 1px solid var(--border) !important; }
.border-0 { border: 0 !important; }
.border-top, .border-t { border-top: 1px solid var(--border) !important; }
.border-bottom, .border-b { border-bottom: 1px solid var(--border) !important; }
.border-start, .border-l { border-left: 1px solid var(--border) !important; }
.border-end, .border-r { border-right: 1px solid var(--border) !important; }
.border-top-0 { border-top: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-border,
.border-gray-200,
.border-gray-300,
.border-gray-600,
.border-secondary,
.border-light { border-color: var(--border) !important; }
.border-primary { border-color: var(--border-strong) !important; }
.border-success { border-color: var(--success-border) !important; }
.border-danger { border-color: var(--danger-border) !important; }
.border-warning { border-color: var(--warning-border) !important; }
.border-info { border-color: var(--info-border) !important; }
.border-opacity-25 { --border-opacity: 0.25; }
.border-2 { border-width: 2px !important; }
.border-dashed { border-style: dashed !important; }

.rounded { border-radius: var(--radius-sm) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-xs) !important; }
.rounded-md { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius) !important; }
.rounded-xl,
.rounded-3 { border-radius: var(--radius-lg) !important; }
.rounded-2xl { border-radius: calc(var(--radius) + 8px) !important; }
.rounded-full,
.rounded-circle { border-radius: 9999px !important; }

/* Shadows */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg,
.shadow-xl,
.shadow-2xl { box-shadow: var(--shadow-lg) !important; }

/* Misc */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }
.pointer-events-none { pointer-events: none !important; }
.cursor-pointer { cursor: pointer !important; }
.user-select-all, .select-all { user-select: all !important; }
.user-select-none, .select-none { user-select: none !important; }
.float-start, .float-left { float: left !important; }
.float-end, .float-right { float: right !important; }
.clearfix::after { content: ""; display: block; clear: both; }
.transition-all { transition: all 0.15s ease; }
.invisible { visibility: hidden !important; }
.visible { visibility: visible !important; }
.img-fluid { max-width: 100%; height: auto; }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }

/* Font Awesome sizing helpers kept for views that rely on them */
.fa-lg { font-size: 1.25em; line-height: 0.05em; vertical-align: -0.075em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }

/* Responsive utilities */
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .sm\:flex { display: flex; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:justify-center { justify-content: center; }
  .sm\:text-left { text-align: left; }
  .sm\:text-right { text-align: right; }
  .sm\:ml-0 { margin-left: 0; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .mb-md-0 { margin-bottom: 0 !important; }
  .text-md-end { text-align: right !important; }
  .justify-content-md-end { justify-content: flex-end !important; }
  .flex-md-row { flex-direction: row !important; }
  .md\:flex { display: flex; }
  .md\:inline { display: inline; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
}

@media (max-width: 991.98px) {
  .d-lg-none.sidebar-close-btn { display: inline-flex !important; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:flex { display: flex; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:gap-8 { gap: 2rem; }
  .lg\:p-8 { padding: 2rem; }
}

@media (min-width: 1280px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 6. Theme editor (Appearance + Whitelabel pages)
   ========================================================================== */

.theme-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 1.5rem;
  align-items: start;
}

.theme-editor__preview {
  position: sticky;
  top: 80px;
}

@media (max-width: 1199.98px) {
  .theme-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .theme-editor__preview {
    position: static;
  }
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.625rem;
}

.preset-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.preset-card:hover {
  border-color: var(--border-strong);
}

.preset-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.preset-card__swatch {
  display: flex;
  height: 38px;
  overflow: hidden;
  border-radius: calc(var(--radius-sm) - 3px);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.preset-card__swatch span {
  flex: 1;
}

.preset-card__swatch span:first-child {
  flex: 2;
}

.preset-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
}

.preset-card__name i {
  color: var(--text);
  opacity: 0;
}

.preset-card.is-active .preset-card__name i {
  opacity: 1;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.625rem;
}

.color-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem 0.5rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.color-field__swatch {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-sm) - 2px);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}

.color-field__swatch input[type="color"] {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.color-field__text {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.color-field__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.color-field__hint {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.color-field__hex {
  width: 84px;
  min-height: 30px;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: lowercase;
}

.mode-switch {
  display: inline-flex;
  padding: 0.1875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.mode-switch button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.mode-switch button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
}

.contrast-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Miniature dashboard used as the live preview */
.mini-app {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  box-shadow: var(--shadow-lg);
}

.mini-app__sidebar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.625rem 0.5rem;
  border-right: 1px solid var(--border);
  background: var(--sidebar);
}

.mini-app__brand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
}

.mini-app__brand span {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--primary);
}

.mini-app__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.375rem;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
}

.mini-app__nav.is-active {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

.mini-app__nav.is-active i {
  color: var(--text);
}

.mini-app__body {
  position: relative;
  padding: 0.875rem;
  overflow: hidden;
  background: var(--background);
}

.mini-app__title {
  margin: 0.25rem 0 0.625rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mini-app__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.mini-app .card,
.mini-app .stat-card {
  margin: 0;
  box-shadow: var(--shadow-sm);
}

.mini-app .stat-card {
  min-height: 0;
  padding: 0.5rem 0.625rem;
}

.mini-app .stat-label {
  font-size: 0.5625rem;
}

.mini-app .stat-value {
  font-size: 1.0625rem;
}

.mini-app .btn {
  min-height: 26px;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
}

.mini-app .badge {
  min-height: 18px;
  font-size: 0.5625rem;
}

.mini-app .form-control {
  min-height: 28px;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
}

.mini-app .table > :not(caption) > * > * {
  padding: 0.375rem 0.5rem;
  font-size: 0.6875rem;
}

.mini-app .table thead th {
  font-size: 0.5625rem;
}


/* 7. Motion & print
   ========================================================================== */

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

@media print {
  .app-sidebar,
  .app-topbar,
  .sidebar-overlay,
  .page-header-bar__actions,
  .app-footer {
    display: none !important;
  }

  .app-main {
    margin: 0 !important;
  }

  .card {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* <x-card-header class="... pb-2"> on metric cards flows straight into the value */
.card-header.space-y-0.pb-2 {
  min-height: 0;
  padding-top: 1rem;
  border-bottom: 0;
}

.card-header.space-y-0.pb-2 + .card-content {
  padding-top: 0;
}


/* 8. Auth screens (login, two-factor check)
   ========================================================================== */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: 100vh;
}

.auth__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1.5rem 2rem;
  background: var(--background);
}

.auth__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.auth__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: var(--text);
}

.auth__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 3rem 0;
}

.auth__heading {
  margin-bottom: 1.75rem;
}

.auth__heading h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.auth__heading p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.auth__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1rem;
}

.auth__fields {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.auth__fields .form-control-lg {
  min-height: 44px;
  font-size: 0.9375rem;
}

.auth__fields .input-group .btn {
  min-height: 44px;
  width: 46px;
}

.auth__fields .btn-lg {
  margin-top: 0.25rem;
}

.cf-turnstile {
  min-height: 65px;
}

.auth__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.auth__art {
  position: relative;
  overflow: hidden;
  margin: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.auth__art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
}

/* No artwork (whitelabel domains): a single centred form */
.auth--single {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 991.98px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth__art {
    display: none;
  }

  .auth__panel {
    padding: 1.25rem 1rem;
  }
}