/* ==========================================================================
   Infomail Design System
   Layered on top of Bootstrap 5 (behavior) to own the entire visual layer.
   Loaded LAST in base.blade.php → wins specificity.
   ========================================================================== */

/* ===== Design tokens ====================================================== */
:root {
  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Neutrals (cool, slight blue tint) */
  --bg-0: oklch(99% 0.003 240);
  --bg-1: oklch(97.5% 0.004 240);
  --bg-2: oklch(95% 0.006 240);
  --bg-3: oklch(92% 0.008 240);
  --bg-inv: oklch(18% 0.015 240);

  --border-1: oklch(92% 0.008 240);
  --border-2: oklch(87% 0.01 240);
  --border-3: oklch(80% 0.012 240);

  --fg-0: oklch(20% 0.015 240);
  --fg-1: oklch(38% 0.012 240);
  --fg-2: oklch(55% 0.01 240);
  --fg-3: oklch(70% 0.008 240);
  --fg-inv: oklch(98% 0.003 240);

  /* Accent — bridged to tenant brand when provided */
  --accent: var(--im-brand, oklch(58% 0.14 220));
  --accent-hover: var(--im-brand-strong, oklch(52% 0.15 220));
  --accent-soft: oklch(94% 0.04 220);
  --accent-soft-fg: oklch(38% 0.12 220);
  --accent-line: oklch(80% 0.08 220);

  /* Semantic */
  --success: oklch(60% 0.13 155);
  --success-soft: oklch(94% 0.04 155);
  --success-soft-fg: oklch(38% 0.11 155);
  --warn: oklch(72% 0.14 75);
  --warn-soft: oklch(95% 0.05 75);
  --warn-soft-fg: oklch(42% 0.12 75);
  --danger: oklch(60% 0.17 25);
  --danger-soft: oklch(95% 0.04 25);
  --danger-soft-fg: oklch(42% 0.15 25);
  --purple: oklch(58% 0.16 290);
  --purple-soft: oklch(95% 0.04 290);
  --purple-soft-fg: oklch(40% 0.14 290);

  /* Density — comfortable (default) */
  --h-row: 40px;
  --h-input: 34px;
  --h-btn: 34px;
  --pad-sm: 8px;
  --pad-md: 12px;
  --pad-lg: 16px;
  --pad-xl: 24px;
  --gap-sm: 6px;
  --gap-md: 10px;
  --gap-lg: 16px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-1: 0 1px 2px oklch(20% 0.02 240 / 0.04), 0 0 0 1px oklch(20% 0.02 240 / 0.04);
  --shadow-2: 0 4px 12px oklch(20% 0.02 240 / 0.06), 0 1px 3px oklch(20% 0.02 240 / 0.06);
  --shadow-pop: 0 16px 48px oklch(20% 0.02 240 / 0.12), 0 2px 6px oklch(20% 0.02 240 / 0.08);

  --sidebar-width: 224px;
}

[data-density="compact"] {
  --h-row: 32px;
  --h-input: 28px;
  --h-btn: 28px;
  --pad-sm: 6px;
  --pad-md: 8px;
  --pad-lg: 12px;
  --pad-xl: 18px;
  --gap-sm: 4px;
  --gap-md: 6px;
  --gap-lg: 10px;
  --fs-md: 12px;
  --fs-lg: 14px;
  --fs-xl: 17px;
  --fs-2xl: 22px;
  --sidebar-width: 200px;
}

/* ===== Reset & base ======================================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--fg-0);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
.infomail-body { background: var(--bg-1); }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.tnum { font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }

/* ===== App shell ========================================================== */
.infomail-body.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  height: 100vh;
  background: var(--bg-1);
  overflow: hidden;
}
body.sidebar-collapsed.app-shell { grid-template-columns: 56px 1fr; }

.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.sidebar-brand {
  padding: 14px var(--pad-lg) 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
}
.sidebar-brand a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.sidebar-brand img { max-height: 28px; width: auto; }
body.sidebar-collapsed .sidebar-brand img { display: none; }
body.sidebar-collapsed .sidebar-brand .brand-name { display: none; }

.brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, oklch(55% 0.16 200) 100%);
  display: grid; place-items: center;
  color: white;
  flex-shrink: 0;
}

.brand-plan {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--fg-2);
  padding: 2px 6px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
}
body.sidebar-collapsed .brand-plan { display: none; }

.sidebar-desktop-toggle,
.sidebar-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.sidebar-desktop-toggle:hover,
.sidebar-close:hover { background: var(--bg-2); color: var(--fg-0); }
.sidebar-close { display: none; }

/* Sidebar search trigger (opens command palette) */
.sidebar-search { padding: 0 var(--pad-lg) var(--pad-md); }
.cmd-btn {
  width: 100%;
  height: var(--h-input);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  font-size: var(--fs-sm);
}
.cmd-btn:hover { background: var(--bg-2); border-color: var(--border-2); }
.cmd-btn .kbd { margin-left: auto; }
body.sidebar-collapsed .sidebar-search { padding: 0 6px var(--pad-md); }
body.sidebar-collapsed .cmd-btn span:not(.kbd) { display: none; }
body.sidebar-collapsed .cmd-btn { justify-content: center; padding: 0; }

.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1;
}

.sidebar-nav,
.sidebar-inner {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--pad-sm);
}
.nav-group, .sidebar-section { margin-bottom: var(--pad-md); }
.nav-group-label,
.sidebar-section-label {
  padding: 8px 12px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-section-header {
  padding: 0;
  color: var(--fg-2);
  user-select: none;
  cursor: pointer;
}
.sidebar-section-header:hover .sidebar-section-label { color: var(--fg-1); }
.sidebar-section-caret {
  font-size: 10px;
  transition: transform 160ms;
  color: var(--fg-3);
  margin-right: 10px;
}
.sidebar-section.is-collapsed .sidebar-section-items { display: none; }
.sidebar-section.is-collapsed .sidebar-section-caret { transform: rotate(-90deg); }
body.sidebar-collapsed .sidebar-section-label span,
body.sidebar-collapsed .sidebar-section-caret,
body.sidebar-collapsed .nav-group-label { display: none; }
body.sidebar-collapsed .sidebar-section-label { justify-content: center; padding: 8px 0 4px; }

.sidebar-section-items,
.nav-group .nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-item, .sidebar-section-items > li.nav-item {
  display: block;
  padding: 0;
  background: none;
  border: none;
}
.nav-item .nav-link,
.nav-group .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: 30px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  color: var(--fg-1);
  cursor: pointer;
  position: relative;
  user-select: none;
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.nav-item .nav-link:hover,
.nav-group .nav-link:hover {
  background: var(--bg-2);
  color: var(--fg-0);
  text-decoration: none;
}
.nav-item.active > .nav-link,
.nav-group .nav-link.active {
  background: var(--bg-2);
  color: var(--fg-0);
  font-weight: 500;
}
.nav-item.active > .nav-link::before,
.nav-group .nav-link.active::before {
  content: "";
  position: absolute;
  left: -4px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-item .nav-link i,
.nav-group .nav-link i {
  width: 14px;
  flex-shrink: 0;
  opacity: 0.75;
  font-size: 14px;
}
.nav-item.active .nav-link i { opacity: 1; color: var(--accent); }
.nav-item .nav-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sidebar-collapsed .nav-item .nav-link span:not(.badge) { display: none; }
body.sidebar-collapsed .nav-item .nav-link { justify-content: center; padding: 0; }
body.sidebar-collapsed .nav-item .nav-link .badge { display: none; }

.nav-item .badge,
.nav-group .badge,
.badge-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.sidebar-footer {
  padding: var(--pad-md);
  border-top: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(70% 0.12 280), oklch(65% 0.13 200));
  color: white;
  font-size: 10px;
  font-weight: 600;
  display: grid; place-items: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.sidebar-user { flex: 1; min-width: 0; line-height: 1.2; }
.sidebar-user .u-name { font-size: var(--fs-md); font-weight: 500; color: var(--fg-0); }
.sidebar-user .u-sub { font-size: var(--fs-xs); color: var(--fg-2); }
body.sidebar-collapsed .sidebar-user { display: none; }

/* ===== Main area ========================================================== */
.main-wrapper, .main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-0);
  border-radius: var(--radius-lg) 0 0 0;
  margin: 6px 6px 6px 0;
  border: 1px solid var(--border-1);
  border-right: none;
  border-bottom: none;
  box-shadow: var(--shadow-1);
  min-width: 0;
}

.main-header { flex-shrink: 0; }
.infomail-page-header {
  padding: 0 !important;
  background: transparent !important;
  border: none;
}
.header-shell {
  height: 48px;
  border-bottom: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  padding: 0 var(--pad-xl);
  gap: var(--pad-md);
}
[data-density="compact"] .header-shell { height: 40px; }

.sidebar-toggle {
  display: none;
  width: 32px; height: 32px;
  padding: 0 !important;
  border: 1px solid var(--border-1) !important;
  background: var(--bg-0) !important;
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
  color: var(--fg-1);
}
.sidebar-toggle-label { display: none; }

.header-title-group {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Breadcrumbs */
.breadcrumbs, .crumbs, .infomail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-md);
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs .sep, .breadcrumbs .sep { color: var(--fg-3); display: inline-flex; }
.crumbs .c1, .breadcrumbs .c1 { color: var(--fg-2); }
.crumbs .c2, .breadcrumbs .c2 { color: var(--fg-0); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--fg-3); }

.header-utilities { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.sep-v { width: 1px; height: 18px; background: var(--border-1); }

.main-content, .content-shell {
  flex: 1;
  overflow-y: auto;
  padding: var(--pad-xl);
}
.content-shell { padding: 0; }
.main-content { padding: var(--pad-xl); }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--pad-xl);
  gap: var(--pad-lg);
  flex-wrap: wrap;
}
.page-title, h1.page-title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--fg-0);
}
.page-sub {
  font-size: var(--fs-md);
  color: var(--fg-1);
  margin: 0;
}
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ===== Buttons ============================================================ */
.btn {
  height: var(--h-btn);
  min-height: var(--h-btn);
  padding: 0 12px;
  border: 1px solid var(--border-2);
  background: var(--bg-0);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms, border-color 120ms, transform 60ms, color 120ms;
  color: var(--fg-0);
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.btn:hover { background: var(--bg-2); color: var(--fg-0); text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; }
.btn i { font-size: 14px; }

.btn-primary, .btn.btn-primary {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.btn-secondary, .btn.btn-secondary {
  background: var(--bg-0) !important;
  color: var(--fg-0) !important;
  border-color: var(--border-2) !important;
}
.btn-secondary:hover, .btn.btn-secondary:hover { background: var(--bg-2) !important; }
.btn-light, .btn.btn-light {
  background: var(--bg-0) !important;
  color: var(--fg-0) !important;
  border-color: var(--border-2) !important;
}
.btn-light:hover, .btn.btn-light:hover { background: var(--bg-2) !important; }
.btn-dark, .btn.btn-dark {
  background: var(--fg-0) !important;
  color: var(--fg-inv) !important;
  border-color: var(--fg-0) !important;
}
.btn-dark:hover, .btn.btn-dark:hover { background: oklch(28% 0.02 240) !important; }
.btn-outline-primary, .btn.btn-outline-primary {
  background: transparent !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-outline-primary:hover, .btn.btn-outline-primary:hover {
  background: var(--accent-soft) !important;
  color: var(--accent-soft-fg) !important;
}
.btn-outline-secondary, .btn.btn-outline-secondary {
  background: transparent !important;
  color: var(--fg-1) !important;
  border-color: var(--border-2) !important;
}
.btn-outline-secondary:hover, .btn.btn-outline-secondary:hover {
  background: var(--bg-2) !important; color: var(--fg-0) !important;
}
.btn-outline-danger, .btn.btn-outline-danger {
  background: transparent !important;
  color: var(--danger) !important;
  border-color: oklch(80% 0.1 25) !important;
}
.btn-outline-danger:hover, .btn.btn-outline-danger:hover {
  background: var(--danger-soft) !important;
  color: var(--danger-soft-fg) !important;
}
.btn-success, .btn.btn-success {
  background: var(--success) !important;
  color: white !important;
  border-color: var(--success) !important;
}
.btn-danger, .btn.btn-danger {
  background: var(--danger) !important;
  color: white !important;
  border-color: var(--danger) !important;
}
.btn-warning, .btn.btn-warning {
  background: var(--warn) !important;
  color: oklch(22% 0.02 75) !important;
  border-color: var(--warn) !important;
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-1);
}
.btn-ghost:hover { background: var(--bg-2); color: var(--fg-0); }
.btn-accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); }

.btn-sm, .btn.btn-sm { height: 28px; min-height: 28px; padding: 0 10px; font-size: var(--fs-sm); }
.btn-lg, .btn.btn-lg { height: 40px; min-height: 40px; padding: 0 18px; font-size: var(--fs-md); }
.btn-icon { width: var(--h-btn); padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 28px; }
.btn-block { width: 100%; justify-content: center; }

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group > .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:hover, .btn-group > .btn:focus-visible { z-index: 1; }

/* ===== Forms ============================================================== */
.form-control,
.form-select,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
.input, .select {
  height: var(--h-input);
  padding: 0 10px;
  border: 1px solid var(--border-2);
  background: var(--bg-0);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  color: var(--fg-0);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  width: 100%;
  box-shadow: none;
}
textarea.form-control, .textarea {
  min-height: 72px;
  height: auto;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
  border: 1px solid var(--border-2);
  background: var(--bg-0);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  color: var(--fg-0);
  width: 100%;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.form-control:hover, .form-select:hover, .input:hover, .select:hover, textarea.form-control:hover { border-color: var(--border-3); }
.form-control:focus, .form-select:focus, .input:focus, .select:focus, textarea.form-control:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(58% 0.14 220 / 0.15);
  outline: none;
}
.form-control.is-invalid, .form-select.is-invalid, textarea.form-control.is-invalid {
  border-color: var(--danger);
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px oklch(60% 0.17 25 / 0.15); }
.invalid-feedback { color: var(--danger); font-size: var(--fs-xs); margin-top: 4px; display: block; }
.form-text, .field-hint { font-size: var(--fs-xs); color: var(--fg-2); margin-top: 4px; }
.form-label, .field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-0);
  margin-bottom: 6px;
}
.col-form-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-0);
  padding-top: 8px;
}

/* Force flex layout with explicit gap regardless of Bootstrap's `.form-check
   { padding-left: 1.5em }` + `.form-check-input { float: left; margin-left:
   -1.5em }` defaults, which still partially apply on some pages because
   the negative margin survives even when float is neutralised. The
   !important markers are unfortunate but necessary while the legacy
   bootstrap css still loads before us in the cascade. */
.form-check {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: auto;
  padding-left: 0 !important;
  margin-bottom: 6px;
}
.form-check-input {
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-3);
  border-radius: 3px;
  background: var(--bg-0);
  cursor: pointer;
  transition: all 120ms;
}
/* Layout-related overrides need !important because Bootstrap's
   `.form-check-input { float: left; margin-left: -1.5em }` is otherwise
   re-applied per-page and forces the input to overlap the label. We
   intentionally limit the !important to layout properties (float, margin,
   flex-shrink) so size/border overrides on `.form-switch .form-check-input`
   etc. continue to work. */
.form-check-input,
.form-check .form-check-input {
  margin: 0 !important;
  margin-left: 0 !important;
  float: none !important;
  flex-shrink: 0 !important;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,6 5,9 10,3'/></svg>");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.form-check-input[type="radio"]:checked {
  background-image: radial-gradient(circle, white 2px, var(--accent) 3px);
}
.form-check-input:focus { box-shadow: 0 0 0 3px oklch(58% 0.14 220 / 0.15); outline: none; }
.form-check-label { font-size: var(--fs-md); color: var(--fg-1); cursor: pointer; margin: 0; }

.form-switch .form-check-input {
  width: 30px;
  height: 18px;
  border-radius: 20px;
  border: none;
  background: var(--border-3);
  background-image: none;
  position: relative;
  transition: background 150ms;
}
.form-switch .form-check-input::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 150ms;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.form-switch .form-check-input:checked { background: var(--accent); }
.form-switch .form-check-input:checked::after { transform: translateX(12px); background-image: none; }

.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.input-group > .btn,
.input-group > .input-group-text {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.input-group > :not(:first-child):not(:last-child) { border-radius: 0; }
.input-group > *:not(:last-child) { border-right: 0; }
.input-group-text {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  color: var(--fg-1);
  font-size: var(--fs-md);
}

.input-search {
  display: flex; align-items: center; gap: 8px;
  height: var(--h-input);
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--bg-0);
  max-width: 320px;
  transition: border-color 120ms, box-shadow 120ms;
}
.input-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(58% 0.14 220 / 0.15);
}
.input-search input { border: none; outline: none; background: transparent; flex: 1; padding: 0; height: 100%; }
.input-search i { color: var(--fg-2); }

/* ===== Cards / panels ===================================================== */
.card, .card.card {
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.card-header, .card-head {
  padding: var(--pad-md) var(--pad-lg);
  border-bottom: 1px solid var(--border-1);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title, .card-head .title {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--fg-0);
  margin: 0;
}
.card-body { padding: var(--pad-lg); }
.card-compact .card-body { padding: var(--pad-md); }
.card-footer {
  padding: var(--pad-md) var(--pad-lg);
  border-top: 1px solid var(--border-1);
  background: transparent;
}

/* ===== Badges / pills ===================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  min-height: 18px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid var(--border-1);
  white-space: nowrap;
  line-height: 1.4;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.b-success, .badge.text-bg-success, .badge.bg-success {
  background: var(--success-soft) !important;
  color: var(--success-soft-fg) !important;
  border-color: transparent;
}
.badge.b-warn, .badge.text-bg-warning, .badge.bg-warning {
  background: var(--warn-soft) !important;
  color: var(--warn-soft-fg) !important;
  border-color: transparent;
}
.badge.b-danger, .badge.text-bg-danger, .badge.bg-danger {
  background: var(--danger-soft) !important;
  color: var(--danger-soft-fg) !important;
  border-color: transparent;
}
.badge.b-accent, .badge.text-bg-primary, .badge.bg-primary {
  background: var(--accent-soft) !important;
  color: var(--accent-soft-fg) !important;
  border-color: transparent;
}
.badge.b-purple { background: var(--purple-soft); color: var(--purple-soft-fg); border-color: transparent; }
.badge.b-neutral, .badge.text-bg-secondary, .badge.bg-secondary {
  background: var(--bg-2) !important;
  color: var(--fg-1) !important;
  border-color: var(--border-1);
}
.badge.text-bg-info, .badge.bg-info {
  background: var(--accent-soft) !important;
  color: var(--accent-soft-fg) !important;
  border-color: transparent;
}
.badge.text-bg-light, .badge.bg-light {
  background: var(--bg-2) !important;
  color: var(--fg-1) !important;
}
.badge.text-bg-dark, .badge.bg-dark {
  background: var(--fg-0) !important;
  color: var(--fg-inv) !important;
}

/* ===== Tables ============================================================= */
.table, .tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  margin: 0;
  color: var(--fg-0);
}
.table thead th, .tbl thead th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  padding: 0 var(--pad-md);
  height: 36px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}
.table tbody td, .tbl tbody td {
  padding: 0 var(--pad-md);
  height: var(--h-row);
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
  border-top: none;
  color: var(--fg-0);
}
.table tbody tr:hover, .tbl tbody tr:hover { background: var(--bg-1); }
.table tbody tr.selected, .tbl tbody tr.selected { background: var(--accent-soft); }
.table .num, .tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num, .tbl th.num { text-align: right; }
.table > :not(caption) > * > * { background: transparent; box-shadow: none; }
.table-responsive {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: var(--bg-0);
}
.table-responsive > .table { margin: 0; }
.table-light > :not(caption) > * > * { background: var(--bg-1); }
.table-hover > tbody > tr:hover > * { background: var(--bg-1); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--bg-1); }

/* ===== Alerts ============================================================= */
.alert {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: var(--fs-md);
  margin-bottom: var(--pad-md);
  line-height: 1.5;
}
.alert-success, .alert.alert-success {
  background: var(--success-soft);
  color: var(--success-soft-fg);
  border-color: transparent;
}
.alert-warning, .alert.alert-warning {
  background: var(--warn-soft);
  color: var(--warn-soft-fg);
  border-color: transparent;
}
.alert-danger, .alert.alert-danger {
  background: var(--danger-soft);
  color: var(--danger-soft-fg);
  border-color: transparent;
}
.alert-info, .alert-primary, .alert.alert-info, .alert.alert-primary {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border-color: transparent;
}

/* ===== Toolbar / filters ================================================== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--pad-md) 0;
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px dashed var(--border-3);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  cursor: pointer;
  transition: all 120ms;
}
.filter-chip:hover { background: var(--bg-2); border-style: solid; color: var(--fg-0); }
.filter-chip.active {
  border-style: solid;
  border-color: var(--border-2);
  background: var(--bg-0);
  color: var(--fg-0);
}
.filter-chip .val {
  padding: 0 4px;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border-radius: 3px;
  margin-left: 2px;
  font-weight: 500;
}

/* ===== Tabs =============================================================== */
.tabs, .nav.nav-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: var(--pad-lg);
  padding: 0;
  list-style: none;
}
.tab, .nav-tabs .nav-link {
  padding: 8px 14px;
  font-size: var(--fs-md);
  color: var(--fg-2);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
  background: transparent;
  transition: color 120ms, border-color 120ms;
  text-decoration: none;
}
.tab:hover, .nav-tabs .nav-link:hover {
  color: var(--fg-0);
  border-color: transparent;
  background: transparent;
  text-decoration: none;
}
.tab.active, .nav-tabs .nav-link.active {
  color: var(--fg-0);
  border-bottom-color: var(--fg-0);
  background: transparent !important;
}

.nav-pills { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0 0 var(--pad-md); }
.nav-pills .nav-link {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background: transparent;
  border: none;
}
.nav-pills .nav-link:hover { background: var(--bg-2); color: var(--fg-0); }
.nav-pills .nav-link.active { background: var(--accent); color: white; }

/* ===== Empty state ======================================================== */
.empty {
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-ico {
  width: 48px; height: 48px;
  background: var(--bg-2);
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--fg-2);
  margin-bottom: 4px;
  font-size: 22px;
}
.empty-title { font-size: var(--fs-lg); font-weight: 600; color: var(--fg-0); }
.empty-desc { font-size: var(--fs-md); color: var(--fg-1); max-width: 360px; line-height: 1.5; }
.empty-actions { margin-top: 12px; display: flex; gap: 8px; }

/* ===== Metrics ============================================================ */
.metric {
  /* Label fills the top, value pinned to the bottom — keeps numbers
     aligned across cards even when labels wrap to a different number of
     lines (e.g. "Tasso medio di click" vs "Avg Open Rate"). */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--pad-lg);
  height: 100%;
  min-height: 96px;
  justify-content: space-between;
  box-sizing: border-box;
}
/* When .metric is the direct child of .card, let the card stretch to
   match siblings in a grid row so all values land on the same baseline. */
.card > .metric {
  flex: 1 1 auto;
}
.metric-label {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Reserve space for at least 1.5 lines so single-line labels don't
     collapse the row height; multi-line labels still expand naturally. */
  min-height: 1.4em;
  line-height: 1.3;
}
.metric-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--fg-0);
  /* Push value to bottom — backup in case justify-content fails (older
     browsers or when wrapped in a different ancestor). */
  margin-top: auto;
}
.metric-delta {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.metric-delta.up { color: var(--success-soft-fg); }
.metric-delta.down { color: var(--danger-soft-fg); }
.metric-spark { height: 28px; margin-top: 4px; }

/* ===== Layout grids ======================================================= */
.grid-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pad-md);
  margin-bottom: var(--pad-xl);
}
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--pad-lg); }
.grid-2-eq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pad-lg); }
@media (max-width: 1100px) {
  .grid-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-2-eq { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grid-metrics { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}

/* ===== Activity list ====================================================== */
.activity-item {
  padding: 10px 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-1);
  font-size: var(--fs-md);
}
.activity-item:last-child { border-bottom: none; }
.activity-item .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
  flex-shrink: 0;
}
.activity-item .meta { color: var(--fg-2); font-size: var(--fs-xs); margin-top: 2px; }

/* ===== Command palette ==================================================== */
.overlay {
  position: fixed; inset: 0;
  background: oklch(20% 0.02 240 / 0.3);
  backdrop-filter: blur(4px);
  z-index: 1080;
  display: grid;
  place-items: start center;
  padding-top: 120px;
  animation: im-fadeIn 120ms ease;
}
@keyframes im-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes im-popIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes im-slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cmdk {
  width: 560px;
  max-width: 92vw;
  background: var(--bg-0);
  border-radius: 12px;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: im-popIn 140ms ease;
}
.cmdk-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-0);
}
.cmdk-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.cmdk-group-label {
  padding: 8px 10px 4px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: 34px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--fg-0);
}
.cmdk-item:hover, .cmdk-item.active { background: var(--accent-soft); color: var(--accent-soft-fg); }

/* ===== Modal ============================================================== */
.modal-content {
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
}
.modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-1);
}
.modal-title { font-weight: 600; font-size: var(--fs-lg); color: var(--fg-0); }
.modal-body { padding: 18px 20px; color: var(--fg-0); }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-1);
  gap: 8px;
}
.modal-backdrop { background: oklch(20% 0.02 240); }
.modal-backdrop.show { opacity: 0.4; }

/* ===== Dropdown menus ===================================================== */
.dropdown-menu {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  font-size: var(--fs-md);
  min-width: 180px;
  background: var(--bg-0);
}
.dropdown-item {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-0);
  font-size: var(--fs-md);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-2); color: var(--fg-0); }
.dropdown-item.active, .dropdown-item:active { background: var(--accent-soft); color: var(--accent-soft-fg); }
.dropdown-divider { border-top: 1px solid var(--border-1); margin: 4px 0; }
.dropdown-header {
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ===== Toasts ============================================================= */
.toast-stack, .infomail-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
}
.toast, .infomail-toast {
  padding: 10px 14px;
  background: var(--bg-inv);
  color: var(--fg-inv);
  border-radius: 8px;
  font-size: var(--fs-md);
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  animation: im-slideUp 200ms ease;
  border: none;
}

/* ===== Pagination ========================================================= */
.pagination {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-link {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
  background: var(--bg-0);
  color: var(--fg-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-link:hover { background: var(--bg-2); color: var(--fg-0); border-color: var(--border-2); text-decoration: none; }
.page-item.active .page-link {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.page-item.disabled .page-link { opacity: 0.45; pointer-events: none; }

/* ===== Misc =============================================================== */
hr { border: none; border-top: 1px solid var(--border-1); margin: var(--pad-lg) 0; }
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 4px;
  background: var(--bg-2);
  color: var(--fg-0);
  border-radius: 3px;
  border: 1px solid var(--border-1);
}
kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 3px;
  padding: 1px 4px;
}

.row-flex { display: flex; align-items: center; gap: var(--gap-md); }
.col-flex { display: flex; flex-direction: column; gap: var(--gap-md); }
.muted { color: var(--fg-2); }
.flex-1 { flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-accent { color: var(--accent); }

.dot-status {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-status.green { background: var(--success); box-shadow: 0 0 0 3px oklch(60% 0.13 155 / 0.15); }
.dot-status.gray { background: var(--fg-3); }
.dot-status.yellow { background: var(--warn); }
.dot-status.red { background: var(--danger); }

/* ===== Auth shell ========================================================= */
.infomail-body.auth-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, oklch(94% 0.04 220) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, oklch(95% 0.04 290) 0%, transparent 40%),
    var(--bg-1);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 32px;
}
.auth-card .auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.auth-card .auth-brand img { max-height: 40px; width: auto; }
.auth-card h1 {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  text-align: center;
}
.auth-card .auth-sub {
  color: var(--fg-1);
  font-size: var(--fs-md);
  text-align: center;
  margin: 0 0 18px;
}

/* ===== Responsive ========================================================= */
@media (max-width: 991px) {
  .infomail-body.app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.show { transform: translateX(0); }
  .sidebar-close { display: grid; }
  .sidebar-desktop-toggle { display: none; }
  .sidebar-toggle { display: inline-flex; }
  .main-wrapper { margin: 0; border-radius: 0; border: none; }
  .sidebar-overlay {
    position: fixed; inset: 0;
    background: oklch(20% 0.02 240 / 0.35);
    z-index: 1049;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
  }
  .sidebar-overlay.show { opacity: 1; pointer-events: auto; }
  .main-content { padding: var(--pad-lg); }
}

/* ===== Bootstrap legacy compatibility ==================================== */
/* Neutralize noisy Bootstrap theming we don't want */
.bg-light { background: var(--bg-1) !important; }
.bg-white { background: var(--bg-0) !important; }
.bg-primary { background: var(--accent) !important; }
.bg-success { background: var(--success) !important; }
.bg-danger { background: var(--danger) !important; }
.bg-warning { background: var(--warn) !important; }
.text-primary { color: var(--accent) !important; }
.text-success { color: var(--success-soft-fg) !important; }
.text-danger { color: var(--danger-soft-fg) !important; }
.text-warning { color: var(--warn-soft-fg) !important; }
.text-muted { color: var(--fg-2) !important; }
.text-dark { color: var(--fg-0) !important; }
.border { border-color: var(--border-1) !important; }

/* Bootstrap-select compatibility */
.bootstrap-select > .dropdown-toggle {
  height: var(--h-input);
  padding: 0 10px !important;
  border: 1px solid var(--border-2) !important;
  background: var(--bg-0) !important;
  color: var(--fg-0) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--fs-md) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
.bootstrap-select .dropdown-menu {
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-pop) !important;
  padding: 4px !important;
}
.bootstrap-select .dropdown-menu li a {
  padding: 6px 10px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--fg-0) !important;
  font-size: var(--fs-md) !important;
}
.bootstrap-select .dropdown-menu li a:hover { background: var(--bg-2) !important; }
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.selected a {
  background: var(--accent-soft) !important;
  color: var(--accent-soft-fg) !important;
}

/* Fix z-index issues already handled in base.blade */
.bootstrap-select .dropdown-menu { z-index: 1056; }

/* Breadcrumbs (Bootstrap legacy markup) */
.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
  font-size: var(--fs-md);
  background: transparent;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
}
.breadcrumb-item:last-child { color: var(--fg-0); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--fg-3);
  padding: 0;
  font-size: 14px;
}

/* Legacy `workflow-*` custom utility classes from existing infomail-custom.css:
   keep visual parity so untouched views still look good */
.workflow-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pad-lg);
  margin-bottom: var(--pad-xl);
  flex-wrap: wrap;
}
.workflow-toolbar-copy { max-width: 720px; }
.workflow-panel-kicker {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  font-weight: 600;
  margin-bottom: 4px;
}
.workflow-toolbar h2 {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--fg-0);
}
.workflow-toolbar p { font-size: var(--fs-md); color: var(--fg-1); margin: 0; }

.workflow-filters {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--pad-md);
  padding: var(--pad-md);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  margin-bottom: var(--pad-md);
}
.workflow-filters form {
  display: contents;
}
.workflow-filters .workflow-field { display: flex; flex-direction: column; gap: 4px; }
.workflow-filters label {
  font-size: var(--fs-xs);
  color: var(--fg-2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workflow-table {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
  overflow: hidden;
}
.workflow-table .table-responsive { border: none; border-radius: 0; }
.workflow-table .table { margin: 0; }
.workflow-empty { padding: 32px 16px; text-align: center; color: var(--fg-2); }

/* Utilities used across existing views */
.infomail-content, .content-shell { min-width: 0; }

/* Hide legacy decorative elements we don't need */
.bg-gradient-primary, .bg-gradient-secondary { background: var(--bg-1) !important; }

/* ===== Layout overrides — neutralise legacy custom.css ===================== */

/* The legacy `infomail-custom.css` ships `.infomail-body.app-shell { padding-left: var(--sidebar-width) }`
   which fights with the modern grid layout (and was sized at 300px while the
   grid expects 224px). Force the grid path so the central content area
   actually uses the full available width. */
.infomail-body.app-shell { padding-left: 0 !important; }
body.sidebar-collapsed.app-shell { padding-left: 0 !important; }

/* Sidebar must be white (light) on tenant + admin, regardless of what the
   legacy custom.css sets as `--sidebar-bg`. We win on specificity here by
   prefixing with the body class. */
body.infomail-body .sidebar,
body.infomail-body.app-shell .sidebar,
body.admin-shell-body .sidebar {
  background: var(--bg-1) !important;
  color: var(--fg-0) !important;
}
body.infomail-body .sidebar .nav-link,
body.admin-shell-body .sidebar .nav-link {
  color: var(--fg-1) !important;
}
body.infomail-body .sidebar .nav-link:hover,
body.admin-shell-body .sidebar .nav-link:hover,
body.infomail-body .sidebar .nav-link.active,
body.admin-shell-body .sidebar .nav-link.active {
  background: var(--bg-2) !important;
  color: var(--fg-0) !important;
}
body.infomail-body .sidebar-section-label,
body.admin-shell-body .sidebar-section-label {
  color: var(--fg-2) !important;
}
body.infomail-body .sidebar-brand a,
body.admin-shell-body .sidebar-brand a { color: var(--fg-0) !important; }

/* Main wrapper occupies the full remaining width — no max-width or
   padding-left on the parent. Margin/border decorations from design.css
   still apply. */
.main-wrapper { max-width: none !important; width: auto !important; }


/* Override legacy `position: fixed` sidebar so it stays in the grid flow. */
body.infomail-body.app-shell .sidebar,
body.admin-shell-body.app-shell .sidebar,
body.admin-shell-body .sidebar {
  position: static !important;
  inset: auto !important;
  box-shadow: none !important;
  width: auto !important;
  z-index: auto !important;
}

/* Legacy custom.css ships `.infomail-body .sidebar li.nav-item a.nav-link`
   (specificity 0,2,4) with white-on-dark colors. Match the same path here
   so our overrides actually win. */
body.infomail-body .sidebar li.nav-item a.nav-link,
body.infomail-body .sidebar-nav .nav-link,
body.infomail-body .sidebar .nav-link,
body.admin-shell-body .sidebar li.nav-item a.nav-link,
body.admin-shell-body .sidebar-nav .nav-link,
body.admin-shell-body .sidebar .nav-link {
  color: var(--fg-0) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
body.infomail-body .sidebar li.nav-item:not(.sidebar-header) a.nav-link:hover,
body.infomail-body .sidebar li.nav-item.active:not(.sidebar-header) a.nav-link,
body.infomail-body .sidebar-nav .nav-link:hover,
body.infomail-body .sidebar-nav .nav-link.active,
body.admin-shell-body .sidebar li.nav-item:not(.sidebar-header) a.nav-link:hover,
body.admin-shell-body .sidebar li.nav-item.active:not(.sidebar-header) a.nav-link,
body.admin-shell-body .sidebar-nav .nav-link:hover,
body.admin-shell-body .sidebar-nav .nav-link.active {
  color: var(--fg-0) !important;
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ===== Sidebar brand strip — neutralise legacy dark pill ===================
   The legacy `infomail-custom.css` paints `.sidebar-brand` with the dark
   `--sidebar-bg` and renders the desktop-toggle as a glassy pill made for
   a dark sidebar (rgba white tints, 999px radius). On the redesigned
   light sidebar that produced an olive-tinted strip with a high-contrast
   dark toggle button — visually disconnected from the rest. Force the
   brand strip to inherit the sidebar background and re-style the toggle
   to match the modern look. */
body.infomail-body .sidebar-brand,
body.admin-shell-body .sidebar-brand {
  background: transparent !important;
  min-height: auto !important;
  padding: 14px var(--pad-lg) 12px !important;
  position: static !important;
  border-bottom: 1px solid var(--border-1);
}
body.infomail-body .sidebar-desktop-toggle,
body.infomail-body .sidebar-close,
body.admin-shell-body .sidebar-desktop-toggle,
body.admin-shell-body .sidebar-close {
  background: transparent !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--fg-2) !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}
body.infomail-body .sidebar-desktop-toggle:hover,
body.infomail-body .sidebar-close:hover,
body.admin-shell-body .sidebar-desktop-toggle:hover,
body.admin-shell-body .sidebar-close:hover {
  background: var(--bg-2) !important;
  color: var(--fg-0) !important;
  border-color: var(--border-2) !important;
}
/* Hide the legacy toggle label ("MENU" text) — the icon alone suffices
   on the redesigned compact strip. */
body.infomail-body .sidebar-desktop-toggle-label,
body.admin-shell-body .sidebar-desktop-toggle-label,
body.infomail-body .sidebar-toggle-label,
body.admin-shell-body .sidebar-toggle-label { display: none !important; }

/* ===== Tenant-customisable token wiring ===================================
   Each token below comes from a dedicated branding form field. Without
   these selectors, setting "Link Color" or "Button Primary BG" in the
   admin would have no effect even though the token was emitted in
   :root — the previous design-system rules read --accent for
   everything. */

/* Links: the tenant can pin a different colour from the accent. */
body.infomail-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge),
body.admin-shell-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) {
  color: var(--link, var(--accent));
}
body.infomail-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover,
body.admin-shell-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover {
  color: var(--link-hover, var(--accent-hover));
}

/* Headings: H1-H6 follow the tenant's heading colour and font when set. */
body.infomail-body h1, body.infomail-body h2, body.infomail-body h3,
body.infomail-body h4, body.infomail-body h5, body.infomail-body h6,
body.infomail-body .h1, body.infomail-body .h2, body.infomail-body .h3,
body.infomail-body .h4, body.infomail-body .h5, body.infomail-body .h6,
body.admin-shell-body h1, body.admin-shell-body h2, body.admin-shell-body h3,
body.admin-shell-body h4, body.admin-shell-body h5, body.admin-shell-body h6 {
  color: var(--heading-color, var(--fg-0));
  font-family: var(--font-heading, var(--font-sans));
}

/* Primary buttons: tenant can override bg / text independently from
   accent. We target both Bootstrap's .btn-primary (legacy admin pages)
   and the design system's .btn-accent (new shells). */
body.infomail-body .btn-primary,
body.admin-shell-body .btn-primary,
body.infomail-body .btn-accent,
body.admin-shell-body .btn-accent {
  background-color: var(--btn-primary-bg, var(--accent)) !important;
  border-color:     var(--btn-primary-bg, var(--accent)) !important;
  color:            var(--btn-primary-text, #ffffff) !important;
}
body.infomail-body .btn-primary:hover,
body.admin-shell-body .btn-primary:hover,
body.infomail-body .btn-accent:hover,
body.admin-shell-body .btn-accent:hover {
  background-color: var(--btn-primary-hover-bg, var(--accent-hover)) !important;
  border-color:     var(--btn-primary-hover-bg, var(--accent-hover)) !important;
  color:            var(--btn-primary-text, #ffffff) !important;
}

/* Sidebar: the tenant can customise the nav-link text colour and the
   active-item background. We respect the existing light-sidebar
   contract — when both Sidebar Text and Sidebar Active are white the
   user clearly came from the legacy dark scheme; we ignore those
   defaults and keep the accessible light-sidebar palette. The check
   is done in PHP before emitting the tokens, but as a CSS-only safety
   net we also keep the previous dark-mode override. */
body.infomail-body .sidebar .nav-link,
body.admin-shell-body .sidebar .nav-link {
  color: var(--sidebar-text, var(--fg-1));
}
body.infomail-body .sidebar .nav-link.active,
body.admin-shell-body .sidebar .nav-link.active,
body.infomail-body .sidebar li.nav-item.active a.nav-link,
body.admin-shell-body .sidebar li.nav-item.active a.nav-link {
  background: var(--sidebar-active, var(--accent-soft)) !important;
  color: var(--sidebar-active-fg, var(--accent-soft-fg, var(--fg-0))) !important;
}