/* ============================================================
   EmailTool — application theme
   Bootstrap 5.3 + this file. One accent colour, neutral surfaces,
   soft status colours. Light and dark via [data-bs-theme].
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root,
[data-bs-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f2f4f7;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --text: #101828;
  --text-2: #475467;
  --text-3: #667085;

  --accent: #2f5bd8;
  --accent-hover: #2549b3;
  --accent-soft: #eef3fe;
  --accent-rgb: 47, 91, 216;

  --success: #079455;
  --success-text: #067647;
  --success-soft: #ecfdf3;
  --success-border: #abefc6;
  --warning: #dc6803;
  --warning-text: #b54708;
  --warning-soft: #fffaeb;
  --warning-border: #fedf89;
  --danger: #d92d20;
  --danger-text: #b42318;
  --danger-soft: #fef3f2;
  --danger-border: #fecdca;
  --info: #0b7fc1;
  --info-text: #026aa2;
  --info-soft: #f0f9ff;
  --info-border: #b9e6fe;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, .14), 0 4px 8px -4px rgba(16, 24, 40, .05);

  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --sidebar-w: 248px;
  --header-h: 56px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Bootstrap bridge */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: .875rem;
  --bs-body-line-height: 1.5;
  --bs-secondary-color: var(--text-3);
  --bs-tertiary-bg: var(--surface-2);
  --bs-secondary-bg: var(--surface-3);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-success-rgb: 7, 148, 85;
  --bs-danger-rgb: 217, 45, 32;
  --bs-warning-rgb: 220, 104, 3;
  --bs-info-rgb: 11, 127, 193;
  --bs-secondary-rgb: 102, 112, 133;
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: var(--accent-rgb);
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: 37, 73, 179;
  --bs-heading-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-code-color: var(--text-2);
}

[data-bs-theme="dark"] {
  --bg: #0c111d;
  --surface: #151b28;
  --surface-2: #1b2232;
  --surface-3: #232b3c;
  --border: #293041;
  --border-strong: #3a4357;
  --text: #f2f4f7;
  --text-2: #c4c9d4;
  --text-3: #8e96a8;

  --accent: #6d94f5;
  --accent-hover: #8aa9f7;
  --accent-soft: rgba(109, 148, 245, .14);
  --accent-rgb: 109, 148, 245;

  --success: #2fb574;
  --success-text: #5fd39a;
  --success-soft: rgba(47, 181, 116, .14);
  --success-border: rgba(47, 181, 116, .35);
  --warning: #f0933a;
  --warning-text: #f7b06b;
  --warning-soft: rgba(240, 147, 58, .14);
  --warning-border: rgba(240, 147, 58, .35);
  --danger: #f0584b;
  --danger-text: #f88f85;
  --danger-soft: rgba(240, 88, 75, .14);
  --danger-border: rgba(240, 88, 75, .35);
  --info: #3aa7e6;
  --info-text: #7cc4f0;
  --info-soft: rgba(58, 167, 230, .14);
  --info-border: rgba(58, 167, 230, .35);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, .6);

  --bs-success-rgb: 47, 181, 116;
  --bs-danger-rgb: 240, 88, 75;
  --bs-warning-rgb: 240, 147, 58;
  --bs-info-rgb: 58, 167, 230;
  --bs-secondary-rgb: 142, 150, 168;
  --bs-link-hover-color-rgb: 138, 169, 247;
  --bs-code-color: var(--text-2);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: .875rem;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text); font-weight: 600; letter-spacing: -.01em; }
h1, .h1 { font-size: 1.375rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.125rem; }
h4, .h4 { font-size: 1rem; }
h5, .h5 { font-size: .9375rem; }
h6, .h6 { font-size: .8125rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
hr { border-color: var(--border); opacity: 1; }
small, .small { font-size: .8125rem; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: .8125em; }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; color: var(--text); }
kbd { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
::selection { background: rgba(var(--accent-rgb), .2); }
.text-muted, .text-secondary, .text-body-secondary { color: var(--text-3) !important; }
.text-dark, .text-body { color: var(--text) !important; }
.text-primary { color: var(--accent) !important; }
.text-success { color: var(--success-text) !important; }
.text-danger { color: var(--danger-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-info { color: var(--info-text) !important; }
.bg-light { background: var(--surface-2) !important; color: var(--text); }
.bg-white { background: var(--surface) !important; }
.bg-success-subtle { background: var(--success-soft) !important; }
.bg-danger-subtle { background: var(--danger-soft) !important; }
.bg-warning-subtle { background: var(--warning-soft) !important; }
.bg-info-subtle { background: var(--info-soft) !important; }
.bg-primary-subtle { background: var(--accent-soft) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }
.shadow, .shadow-sm { box-shadow: var(--shadow-xs) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- App shell ---------- */
.app-wrapper { min-height: 100vh; }
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: transform .2s ease;
}
.app-header, .app-main, .app-footer { margin-left: var(--sidebar-w); transition: margin-left .2s ease; }
body.sidebar-collapse .app-sidebar { transform: translateX(-100%); }
body.sidebar-collapse .app-header,
body.sidebar-collapse .app-main,
body.sidebar-collapse .app-footer { margin-left: 0; }
.sidebar-backdrop { display: none; }

.sidebar-brand { height: var(--header-h); flex-shrink: 0; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--border); }
.brand-link { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.brand-link:hover { color: var(--text); }
.brand-mark {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: .8125rem;
}

.sidebar-wrapper { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px 16px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-nav .nav-header { padding: 16px 10px 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
/* Groups that open and close */
.sidebar-nav .nav-group-items { list-style: none; margin: 0; padding: 0; }
.sidebar-nav .nav-group-toggle { display: flex; align-items: center; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 6px; }
.sidebar-nav .nav-group-toggle:hover { color: var(--text); }
.sidebar-nav .nav-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sidebar-nav .nav-group-chevron { margin-left: auto; font-size: .625rem; transition: transform .15s ease; }
.sidebar-nav .nav-group.is-closed .nav-group-chevron { transform: rotate(-90deg); }
.sidebar-nav .nav-group.is-closed .nav-group-items { display: none; }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 1px;
  border-radius: var(--radius-xs);
  color: var(--text-2); font-size: .875rem; font-weight: 500; line-height: 1.3;
  transition: background .12s ease, color .12s ease;
}
.sidebar-nav .nav-link .nav-icon { width: 16px; text-align: center; font-size: .8125rem; color: var(--text-3); flex-shrink: 0; transition: color .12s ease; }
.sidebar-nav .nav-link:hover { background: var(--surface-3); color: var(--text); }
.sidebar-nav .nav-link:hover .nav-icon { color: var(--text-2); }
.sidebar-nav .nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar-nav .nav-link.active .nav-icon { color: var(--accent); }
.sidebar-foot { flex-shrink: 0; padding: 10px 20px; border-top: 1px solid var(--border); font-size: .75rem; color: var(--text-3); }

.app-header {
  position: sticky; top: 0; z-index: 1030;
  height: var(--header-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-btn {
  width: 34px; height: 34px; flex-shrink: 0; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--text-2); font-size: .875rem;
  transition: background .12s ease, color .12s ease;
}
.header-btn:hover, .header-btn[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
.header-count {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--danger); color: #fff;
  font-size: .625rem; font-weight: 600; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.header-search { position: relative; flex: 0 1 360px; margin-left: 4px; }
.header-search > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: .75rem; pointer-events: none; }
.header-search input {
  width: 100%; height: 34px; padding: 0 44px 0 32px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-size: .8125rem;
  outline: none; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.header-search input::placeholder { color: var(--text-3); }
.header-search input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16); }
.header-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .6875rem; }
.jump-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050;
  max-height: 320px; overflow-y: auto; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.jump-results a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-xs); color: var(--text); font-size: .8125rem; }
.jump-results a i { width: 16px; text-align: center; color: var(--text-3); font-size: .75rem; }
.jump-results a small { margin-left: auto; color: var(--text-3); font-size: .75rem; }
.jump-results a.is-active, .jump-results a:hover { background: var(--accent-soft); color: var(--accent); }
.jump-results .jump-empty { padding: 10px; color: var(--text-3); font-size: .8125rem; }

.user-menu { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 4px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text); font-size: .8125rem; font-weight: 500; }
.user-menu:hover, .user-menu[aria-expanded="true"] { background: var(--surface-3); }
.user-menu .fa-chevron-down { font-size: .5625rem; color: var(--text-3); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: .6875rem; font-weight: 600;
}
.avatar-lg { width: 34px; height: 34px; font-size: .8125rem; }
.notif-menu { width: 340px; padding: 0; }
.notif-menu .notif-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .8125rem; }
.notif-menu .notif-list { max-height: 320px; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .8125rem; color: var(--text); }
.notif-item:last-child { border-bottom: 0; }
.notif-item i { margin-top: 3px; width: 14px; text-align: center; color: var(--text-3); font-size: .75rem; }
.notif-item time { display: block; color: var(--text-3); font-size: .75rem; margin-top: 1px; }
.notif-empty { padding: 28px 14px; text-align: center; color: var(--text-3); font-size: .8125rem; }
.notif-menu .notif-foot { display: block; padding: 10px 14px; border-top: 1px solid var(--border); text-align: center; font-size: .8125rem; font-weight: 500; }

.app-main { min-height: calc(100vh - var(--header-h) - 45px); padding: 0 8px; }
.app-content-header { padding: 24px 0 4px; }
.app-content-header h1, .app-content-header .h1 { font-size: 1.375rem; font-weight: 600; margin: 0; line-height: 1.3; }
.app-content-header .breadcrumb { margin: 0; font-size: .8125rem; }
.app-content { padding: 12px 0 32px; }
.app-footer { display: flex; justify-content: space-between; gap: 12px; padding: 12px 28px; border-top: 1px solid var(--border); color: var(--text-3); font-size: .75rem; }
.page-title { font-size: 1.375rem; font-weight: 600; margin: 0; }
.page-subtitle { color: var(--text-3); font-size: .8125rem; margin: 2px 0 0; }

@media (max-width: 991.98px) {
  .app-header, .app-main, .app-footer { margin-left: 0 !important; }
  .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.sidebar-open .app-sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(16, 24, 40, .45); }
  .header-search { display: none; }
  .app-header { padding: 0 12px; }
  .app-main { padding: 0; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  color: var(--text);
  margin-bottom: 1.25rem;
  --bs-card-cap-bg: transparent;
  --bs-card-border-color: var(--border);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.125rem;
}
.row > [class*="col"] > .card.h-100 { margin-bottom: 0; }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: .875rem 1.25rem;
  font-weight: 600;
  color: var(--text);
}
.card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card-header:has(> .card-tools) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: .9375rem; font-weight: 600; margin: 0; color: var(--text); line-height: 1.4; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { margin-bottom: 0; font-size: .9375rem; }
.card-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.card-footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: .875rem 1.25rem; }
.card-footer:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.card-outline, .card-primary.card-outline { border-top: 1px solid var(--border); }
/* Solid coloured cards (legacy markup) become neutral cards with a status rule */
.card.text-white[class*="bg-"], .card.text-bg-primary, .card.text-bg-success, .card.text-bg-info, .card.text-bg-warning, .card.text-bg-danger, .card.text-bg-secondary, .card.text-bg-dark {
  background: var(--surface) !important; color: var(--text) !important;
  box-shadow: inset 3px 0 0 var(--card-rule, var(--border-strong)), var(--shadow-xs);
}
.card.bg-primary, .card.text-bg-primary { --card-rule: var(--accent); }
.card.bg-success, .card.text-bg-success { --card-rule: var(--success); }
.card.bg-info, .card.text-bg-info { --card-rule: var(--info); }
.card.bg-warning, .card.text-bg-warning { --card-rule: var(--warning); }
.card.bg-danger, .card.text-bg-danger { --card-rule: var(--danger); }
.card.text-white[class*="bg-"] .card-title, .card.text-white[class*="bg-"] h6 { color: var(--text-3) !important; font-size: .8125rem; font-weight: 500; margin-bottom: 6px; }
.card.text-white[class*="bg-"] h2, .card.text-white[class*="bg-"] h3, .card.text-white[class*="bg-"] h4 { color: var(--text) !important; font-size: 1.5rem; font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.card.text-white[class*="bg-"] .text-white, .card.text-white[class*="bg-"] a { color: var(--accent) !important; }
.card.text-white[class*="bg-"] .card-title i, .card.text-white[class*="bg-"] h6 i { color: var(--card-rule, var(--text-3)); margin-right: 2px; }

/* ---------- Stat cards ---------- */
.stat-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.stat-card-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; }
.stat-details { display: flex; flex-direction: column; min-width: 0; }
.stat-label { font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 4px; }
.stat-sub { font-size: .8125rem; color: var(--text-3); margin-top: 2px; }
.stat-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: .875rem; }
.stat-footer { margin-top: auto; padding: 10px 20px; border-top: 1px solid var(--border); font-size: .8125rem; font-weight: 500; color: var(--text-2); display: flex; align-items: center; justify-content: space-between; }
.stat-footer:hover { color: var(--accent); }
.stat-footer i { font-size: .6875rem; }

.mini-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.mini-stat-value { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mini-stat-label { font-size: .75rem; color: var(--text-3); font-weight: 500; }

.meter { margin-bottom: 18px; }
.meter:last-child { margin-bottom: 0; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: .8125rem; }
.meter-head span:first-child { color: var(--text-2); font-weight: 500; }
.meter-head span:last-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.status-line { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: .8125rem; color: var(--text-2); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.status-dot.is-success { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.status-dot.is-warning { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.status-dot.is-danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.check-list li:first-child { padding-top: 0; }
.check-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.check-list strong { display: block; font-weight: 500; font-size: .875rem; }
.check-list small { color: var(--text-3); }
.empty-state { padding: 36px 16px; text-align: center; color: var(--text-3); font-size: .8125rem; }
.empty-state i { display: block; font-size: 1.25rem; margin-bottom: 8px; opacity: .6; }

/* AdminLTE-style small boxes used on report pages */
.small-box {
  position: relative; display: block; height: calc(100% - 1rem); margin-bottom: 1rem; padding: 16px 18px;
  background: var(--surface) !important; color: var(--text) !important;
  border: 1px solid var(--border); border-radius: var(--radius) !important;
  box-shadow: inset 3px 0 0 var(--box-rule, var(--border-strong)), var(--shadow-xs);
  text-align: left !important;
}
.small-box.bg-primary { --box-rule: var(--accent); }
.small-box.bg-success { --box-rule: var(--success); }
.small-box.bg-info { --box-rule: var(--info); }
.small-box.bg-warning { --box-rule: var(--warning); }
.small-box.bg-danger { --box-rule: var(--danger); }
.small-box .inner { padding: 0; }
.small-box h3, .small-box h4, .small-box h5 { font-size: 1.5rem; font-weight: 600; margin: 0 0 2px; color: var(--text) !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.small-box p, .small-box small, .small-box span { font-size: .8125rem; color: var(--text-3) !important; margin: 0; }
.small-box .icon { display: none; }
.small-box-footer { display: block; margin-top: 8px; font-size: .8125rem; color: var(--accent) !important; }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; --bs-btn-padding-x: .875rem; --bs-btn-padding-y: .4375rem;
  --bs-btn-border-radius: var(--radius-sm); --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.25rem; box-shadow: var(--shadow-xs); white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn > i { font-size: .8125em; }
.btn.w-100, .btn.d-block { display: flex; }
.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: .8125rem; --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .25rem; --bs-btn-border-radius: var(--radius-xs); }
.btn-lg { --bs-btn-font-size: .9375rem; --bs-btn-padding-x: 1.125rem; --bs-btn-padding-y: .5625rem; --bs-btn-border-radius: var(--radius-sm); }
.btn-link { box-shadow: none; --bs-btn-color: var(--accent); --bs-btn-hover-color: var(--accent-hover); }
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-disabled-color: #fff;
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0c111d; --bs-btn-hover-color: #0c111d; --bs-btn-active-color: #0c111d; --bs-btn-disabled-color: #0c111d; }
.btn-secondary, .btn-light, .btn-default, .btn-outline-secondary, .btn-outline-dark {
  --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border-strong); --bs-btn-color: var(--text-2);
  --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border-strong); --bs-btn-active-color: var(--text);
  --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--border); --bs-btn-disabled-color: var(--text-3);
}
.btn-dark {
  --bs-btn-bg: var(--text); --bs-btn-border-color: var(--text); --bs-btn-color: var(--surface);
  --bs-btn-hover-bg: var(--text-2); --bs-btn-hover-border-color: var(--text-2); --bs-btn-hover-color: var(--surface);
}
.btn-success {
  --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--success-text); --bs-btn-hover-border-color: var(--success-text); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--success-text); --bs-btn-active-border-color: var(--success-text); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--success); --bs-btn-disabled-border-color: var(--success); --bs-btn-disabled-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--danger-text); --bs-btn-hover-border-color: var(--danger-text); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--danger-text); --bs-btn-active-border-color: var(--danger-text); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger); --bs-btn-disabled-color: #fff;
}
.btn-info, .btn-outline-primary, .btn-outline-info {
  --bs-btn-bg: var(--surface); --bs-btn-border-color: rgba(var(--accent-rgb), .45); --bs-btn-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--accent);
  --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--accent); --bs-btn-active-color: var(--accent);
  --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--border); --bs-btn-disabled-color: var(--text-3);
}
.btn-warning, .btn-outline-warning {
  --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--warning-border); --bs-btn-color: var(--warning-text);
  --bs-btn-hover-bg: var(--warning-soft); --bs-btn-hover-border-color: var(--warning); --bs-btn-hover-color: var(--warning-text);
  --bs-btn-active-bg: var(--warning-soft); --bs-btn-active-border-color: var(--warning); --bs-btn-active-color: var(--warning-text);
}
.btn-outline-success {
  --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--success-border); --bs-btn-color: var(--success-text);
  --bs-btn-hover-bg: var(--success-soft); --bs-btn-hover-border-color: var(--success); --bs-btn-hover-color: var(--success-text);
  --bs-btn-active-bg: var(--success-soft); --bs-btn-active-border-color: var(--success); --bs-btn-active-color: var(--success-text);
}
.btn-outline-danger {
  --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--danger-border); --bs-btn-color: var(--danger-text);
  --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: var(--danger-text);
  --bs-btn-active-bg: var(--danger-soft); --bs-btn-active-border-color: var(--danger); --bs-btn-active-color: var(--danger-text);
}
.btn-outline-light { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border-strong); --bs-btn-color: var(--text-2); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text); }
.btn-group > .btn { box-shadow: none; }
.btn-close { opacity: .5; font-size: .75rem; }
.btn-close:hover { opacity: .9; }

/* Row actions in tables: quiet icon buttons, colour on hover */
td .btn.btn-sm:not(.btn-primary):not(.btn-outline-primary), td .btn-group-sm > .btn:not(.btn-primary) {
  --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--text-3);
  --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--text);
  --bs-btn-padding-x: .4375rem; box-shadow: none; min-width: 28px;
}
td .btn.btn-sm.btn-danger, td .btn.btn-sm.btn-outline-danger { --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-color: var(--danger-text); --bs-btn-active-bg: var(--danger-soft); --bs-btn-active-color: var(--danger-text); }
td .btn.btn-sm.btn-success, td .btn.btn-sm.btn-outline-success { --bs-btn-hover-bg: var(--success-soft); --bs-btn-hover-color: var(--success-text); --bs-btn-active-bg: var(--success-soft); --bs-btn-active-color: var(--success-text); }
td .btn.btn-sm.btn-info, td .btn.btn-sm.btn-outline-info { --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--accent); }
td .btn.btn-sm.btn-warning, td .btn.btn-sm.btn-outline-warning { --bs-btn-hover-bg: var(--warning-soft); --bs-btn-hover-color: var(--warning-text); }

/* ---------- Forms ---------- */
.form-label, label.form-label, .col-form-label { font-size: .8125rem; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.form-text { color: var(--text-3); font-size: .8125rem; }
.form-control, .form-select {
  min-height: 36px; padding: .375rem .75rem;
  font-size: .875rem; color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: var(--text-3); opacity: .8; }
.form-control:focus, .form-select:focus { color: var(--text); background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); color: var(--text-2); }
.form-control-sm, .form-select-sm { min-height: 30px; font-size: .8125rem; border-radius: var(--radius-xs); }
.form-control-lg, .form-select-lg { min-height: 42px; font-size: .9375rem; border-radius: var(--radius-sm); }
textarea.form-control { min-height: 84px; }
.form-control[type="file"] { padding: .3125rem .75rem; }
.form-control[type="color"] { padding: .25rem; }
.input-group-text { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-3); font-size: .875rem; }
.input-group > .form-control, .input-group > .form-select, .input-group > .btn { box-shadow: none; }
.form-check-input { border-color: var(--border-strong); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.form-check-label { color: var(--text); }
.form-switch .form-check-input { width: 2.125em; height: 1.1875em; }
.form-range::-webkit-slider-thumb { background: var(--accent); }
.form-range::-moz-range-thumb { background: var(--accent); }
.invalid-feedback { color: var(--danger-text); font-size: .8125rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
fieldset legend { font-size: .9375rem; font-weight: 600; }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border);
  --bs-table-striped-bg: transparent; --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text);
  --bs-table-active-bg: var(--accent-soft); --bs-table-active-color: var(--text);
  margin-bottom: 0; font-size: .8125rem; vertical-align: middle;
}
.table > :not(caption) > * > * { padding: .6875rem 1rem; border-width: 0 0 1px; }
.table-sm > :not(caption) > * > * { padding: .4375rem .75rem; }
.table > thead > tr > th, .table > thead > tr > td {
  background: var(--surface-2); color: var(--text-3);
  font-size: .75rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
}
.card-body.p-0 > .table > thead > tr > th, .card-body.p-0 > .table-responsive > .table > thead > tr > th { border-top: 0; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.table > tbody > tr:hover > * { background: var(--surface-2); }
.table-bordered { border: 1px solid var(--border); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
.table-dark, .table-light, .table > thead.table-dark > tr > th, .table > thead.table-light > tr > th { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text-3); background: var(--surface-2); color: var(--text-3); }
.table a { font-weight: 500; }
.table-responsive { border-radius: var(--radius-sm); }

/* DataTables (2.x and 1.13 class names) */
.dt-container, .dataTables_wrapper { font-size: .8125rem; color: var(--text-2); }
.dt-container > .row, .dataTables_wrapper > .row { align-items: center; margin-left: 0; margin-right: 0; }
.dt-container > .row > *, .dataTables_wrapper > .row > * { padding-left: 0; padding-right: 0; }
.dt-container > .row:first-child, .dataTables_wrapper > .row:first-child { margin-bottom: 12px; }
.dt-container > .row:last-child, .dataTables_wrapper > .row:last-child { margin-top: 12px; }
.dt-container .dt-search input, .dataTables_filter input { min-height: 32px; min-width: 220px; margin-left: 6px !important; font-size: .8125rem; }
.dt-container .dt-length select, .dataTables_length select { min-height: 32px; width: auto; display: inline-block; margin: 0 6px; font-size: .8125rem; padding-right: 2rem; }
.dt-container .dt-length label, .dt-container .dt-search label, .dataTables_length label, .dataTables_filter label { color: var(--text-3); font-size: .8125rem; margin: 0; }
.dt-container .dt-info, .dataTables_info { color: var(--text-3); padding-top: 0 !important; }
.dt-container .dt-paging .pagination, .dataTables_paginate .pagination { margin: 0; justify-content: flex-end; }
div.dt-processing, .dataTables_processing { background: var(--surface) !important; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); color: var(--text-2); font-size: .8125rem; }
div.dt-processing > div:last-child > div { background: var(--accent) !important; }
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order { opacity: .7; }
table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
table.dataTable td.dt-empty { padding: 32px 16px; color: var(--text-3); }

/* ---------- Badges ---------- */
.badge {
  --bs-badge-font-size: .75rem; --bs-badge-font-weight: 500; --bs-badge-padding-x: .5rem; --bs-badge-padding-y: .1875rem; --bs-badge-border-radius: 999px;
  line-height: 1.25; letter-spacing: 0; border: 1px solid transparent;
}
.badge.bg-primary, .badge.text-bg-primary, .badge.bg-indigo, .badge.bg-purple { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: rgba(var(--accent-rgb), .25); }
.badge.bg-success, .badge.text-bg-success { background: var(--success-soft) !important; color: var(--success-text) !important; border-color: var(--success-border); }
.badge.bg-danger, .badge.text-bg-danger { background: var(--danger-soft) !important; color: var(--danger-text) !important; border-color: var(--danger-border); }
.badge.bg-warning, .badge.text-bg-warning { background: var(--warning-soft) !important; color: var(--warning-text) !important; border-color: var(--warning-border); }
.badge.bg-info, .badge.text-bg-info { background: var(--info-soft) !important; color: var(--info-text) !important; border-color: var(--info-border); }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light, .badge.bg-dark, .badge.text-bg-dark { background: var(--surface-3) !important; color: var(--text-2) !important; border-color: var(--border); }
.badge.bg-success-subtle { border-color: var(--success-border); }
.badge.bg-danger-subtle { border-color: var(--danger-border); }
.badge.bg-warning-subtle { border-color: var(--warning-border); }
.badge.bg-info-subtle { border-color: var(--info-border); }

/* ---------- Alerts ---------- */
.alert { --bs-alert-padding-x: 1rem; --bs-alert-padding-y: .75rem; --bs-alert-border-radius: var(--radius-sm); font-size: .875rem; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success-text); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-text); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-text); }
.alert-info, .alert-primary { background: var(--info-soft); border-color: var(--info-border); color: var(--info-text); }
.alert-secondary, .alert-light { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
.alert a, .alert .alert-link { color: inherit; font-weight: 600; text-decoration: underline; }
.alert-dismissible .btn-close { padding: .9375rem 1rem; }

/* ---------- Navs, tabs, pagination ---------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--border); border-bottom: 1px solid var(--border); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; padding: .625rem .75rem; color: var(--text-3); font-weight: 500; font-size: .875rem; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.nav-tabs .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); background: transparent; }
.card-header .nav-tabs { margin-bottom: -.9375rem; border-bottom: 0; }
.nav-pills .nav-link { color: var(--text-2); font-weight: 500; border-radius: var(--radius-xs); padding: .4375rem .75rem; }
.nav-pills .nav-link.active { background: var(--accent-soft); color: var(--accent); }
.pagination { --bs-pagination-font-size: .8125rem; --bs-pagination-padding-x: .6875rem; --bs-pagination-padding-y: .3125rem; --bs-pagination-color: var(--text-2); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--border-strong); --bs-pagination-hover-color: var(--text); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-border-color: var(--border-strong); --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); --bs-pagination-active-color: var(--accent); --bs-pagination-active-bg: var(--accent-soft); --bs-pagination-active-border-color: rgba(var(--accent-rgb), .45); --bs-pagination-disabled-color: var(--text-3); --bs-pagination-disabled-bg: var(--surface-2); --bs-pagination-disabled-border-color: var(--border); --bs-pagination-border-radius: var(--radius-xs); gap: 0; }
.page-link { font-weight: 500; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-3); --bs-breadcrumb-item-active-color: var(--text-3); font-size: .8125rem; }

/* ---------- Overlays ---------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-dropdown-border-radius: var(--radius-sm); --bs-dropdown-font-size: .8125rem;
  --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-3); --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-active-bg: var(--accent-soft); --bs-dropdown-link-active-color: var(--accent); --bs-dropdown-divider-bg: var(--border);
  --bs-dropdown-padding-y: .25rem; --bs-dropdown-item-padding-x: .75rem; --bs-dropdown-item-padding-y: .4375rem; --bs-dropdown-header-color: var(--text-3);
  box-shadow: var(--shadow-lg); margin-top: 6px !important;
}
.dropdown-item { border-radius: 4px; margin: 0 4px; width: auto; display: flex; align-items: center; gap: 8px; }
.dropdown-item i { width: 14px; text-align: center; color: var(--text-3); font-size: .75rem; }
.dropdown-item.text-danger i { color: inherit; }
.dropdown-divider { margin: .25rem 0; }
.modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--border); --bs-modal-border-radius: 12px; --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); --bs-modal-header-padding: 1rem 1.25rem; --bs-modal-padding: 1.25rem; --bs-modal-footer-gap: .5rem; --bs-modal-inner-border-radius: 11px; --bs-modal-box-shadow: var(--shadow-lg); }
.modal-content { box-shadow: var(--shadow-lg); }
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-header.bg-primary, .modal-header.bg-success, .modal-header.bg-danger, .modal-header.bg-info, .modal-header.bg-warning, .modal-header.bg-dark { background: var(--surface) !important; color: var(--text) !important; }
.modal-header .btn-close-white { filter: none; }
.modal-footer { background: var(--surface-2); padding: .75rem 1.25rem; border-radius: 0 0 11px 11px; }
.modal-backdrop { --bs-backdrop-bg: #101828; --bs-backdrop-opacity: .5; }
.tooltip { --bs-tooltip-font-size: .75rem; --bs-tooltip-bg: #101828; --bs-tooltip-border-radius: 6px; }
.toast { --bs-toast-bg: var(--surface); --bs-toast-border-color: var(--border); --bs-toast-header-bg: var(--surface); box-shadow: var(--shadow-lg); }
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--border); --bs-list-group-action-hover-bg: var(--surface-2); --bs-list-group-active-bg: var(--accent-soft); --bs-list-group-active-color: var(--accent); --bs-list-group-active-border-color: var(--border); font-size: .875rem; }
.accordion { --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--border); --bs-accordion-active-bg: var(--surface-2); --bs-accordion-active-color: var(--text); --bs-accordion-btn-focus-box-shadow: none; }
.progress { --bs-progress-height: 6px; --bs-progress-bg: var(--surface-3); --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--accent); }
.progress-bar { border-radius: 999px; }
.spinner-border { --bs-spinner-border-width: 2px; }

/* SweetAlert2 */
.swal2-popup { font-family: var(--font-sans); font-size: .875rem; border-radius: 12px !important; background: var(--surface) !important; color: var(--text) !important; }
.swal2-title { font-size: 1.125rem !important; font-weight: 600 !important; color: var(--text) !important; }
.swal2-html-container { color: var(--text-2) !important; font-size: .875rem !important; }
.swal2-styled { border-radius: var(--radius-sm) !important; font-size: .875rem !important; font-weight: 500 !important; padding: .5rem 1rem !important; box-shadow: none !important; }
.swal2-styled.swal2-confirm { background: var(--accent) !important; }
.swal2-styled.swal2-cancel { background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--border-strong) !important; }

/* ---------- Auth and public pages ---------- */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; background: var(--bg); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--text); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.auth-brand .brand-mark { width: 32px; height: 32px; border-radius: 8px; font-size: .875rem; }
.auth-card { width: 100%; max-width: 400px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); }
.auth-card.is-wide { max-width: 520px; }
.auth-card h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 4px; }
.auth-card .auth-sub { color: var(--text-3); font-size: .875rem; margin: 0 0 24px; }
.auth-card .btn-primary { min-height: 40px; }
.auth-foot { margin-top: 20px; color: var(--text-3); font-size: .75rem; text-align: center; }
.auth-foot a { font-weight: 500; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .app-sidebar, .app-header, .app-footer { display: none !important; }
  .app-main { margin: 0 !important; }
}

/* ============================================================
   Soft colour layer — gentle tints on top of the neutral base
   ============================================================ */
:root, [data-bs-theme="light"] {
  --bg: #f4f6fb;
  --surface-2: #f8f9fd;
  --surface-3: #eff2f9;
  --wash: linear-gradient(180deg, #e9effd 0%, rgba(233, 239, 253, 0) 100%);
  --sidebar-bg: #fbfcff;
  --brand-gradient: linear-gradient(135deg, #3d6be6 0%, #7a6cf0 100%);
  --blue: #2f5bd8;   --blue-soft: #eaf0fe;
  --green: #0e9f6e;  --green-soft: #e6f8f0;
  --violet: #6d5ae6; --violet-soft: #f0eefe;
  --amber: #d9820b;  --amber-soft: #fff4de;
  --rose: #e04f6e;   --rose-soft: #feecf0;
  --teal: #0f96a8;   --teal-soft: #e3f6f9;
}
[data-bs-theme="dark"] {
  --bg: #0c111d;
  --surface-2: #1b2232;
  --surface-3: #232b3c;
  --wash: linear-gradient(180deg, rgba(109, 148, 245, .09) 0%, rgba(109, 148, 245, 0) 100%);
  --sidebar-bg: #131927;
  --brand-gradient: linear-gradient(135deg, #5b85f0 0%, #8d80f5 100%);
  --blue: #7fa2f7;   --blue-soft: rgba(109, 148, 245, .16);
  --green: #4cc993;  --green-soft: rgba(47, 181, 116, .16);
  --violet: #a79bf7; --violet-soft: rgba(141, 128, 245, .18);
  --amber: #f3b25c;  --amber-soft: rgba(240, 147, 58, .16);
  --rose: #f58aa1;   --rose-soft: rgba(224, 79, 110, .18);
  --teal: #5fcbd9;   --teal-soft: rgba(15, 150, 168, .2);
}

/* Page wash: a faint tint behind the top of every page */
.app-main { background: var(--wash) no-repeat top / 100% 260px; }
.auth-page { background: var(--wash) no-repeat top / 100% 380px, var(--bg); }

/* Brand, sidebar, avatar */
.brand-mark { background: var(--brand-gradient); box-shadow: 0 2px 6px rgba(61, 107, 230, .28); }
.app-sidebar { background: var(--sidebar-bg); }
.sidebar-nav .nav-link.active { position: relative; }
.sidebar-nav .nav-link.active::before { content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.avatar { background: var(--violet-soft); color: var(--violet); }
.btn-primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px rgba(var(--accent-rgb), .22); }

/* Tones */
.tone, .tone-blue { --tone: var(--blue); --tone-soft: var(--blue-soft); }
.tone-green { --tone: var(--green); --tone-soft: var(--green-soft); }
.tone-violet { --tone: var(--violet); --tone-soft: var(--violet-soft); }
.tone-amber { --tone: var(--amber); --tone-soft: var(--amber-soft); }
.tone-rose { --tone: var(--rose); --tone-soft: var(--rose-soft); }
.tone-teal { --tone: var(--teal); --tone-soft: var(--teal-soft); }
span.tone, span[class*="tone-"] { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--tone-soft); color: var(--tone); font-size: .8125rem; flex-shrink: 0; }

.stat-card[class*="tone-"] { background: linear-gradient(180deg, var(--tone-soft) 0%, var(--surface) 62%); border-color: color-mix(in srgb, var(--tone) 16%, var(--border)); }
.stat-card[class*="tone-"] .stat-icon { background: var(--surface); color: var(--tone); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.stat-card[class*="tone-"] .stat-footer:hover { color: var(--tone); }
.mini-stat[class*="tone-"] { background: var(--tone-soft); border-color: transparent; }
.mini-stat[class*="tone-"] .mini-stat-value { color: var(--tone); }

/* Soft card-title icons and report boxes */
.card-title > i:first-child, .card-header > h1 > i:first-child, .card-header > h2 > i:first-child, .card-header > h3 > i:first-child, .card-header > h5 > i:first-child {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px !important;
  border-radius: 7px; background: var(--accent-soft); color: var(--accent) !important; font-size: .75rem; vertical-align: middle;
}
.small-box { background: linear-gradient(180deg, color-mix(in srgb, var(--box-rule, var(--border-strong)) 7%, var(--surface)) 0%, var(--surface) 70%) !important; }

/* ---------- Sign-in ---------- */
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: .875rem; pointer-events: none; }
.input-icon > .form-control { padding-left: 40px; padding-right: 42px; }
.input-icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-3); }
.input-icon-btn:hover, .input-icon-btn:focus-visible { background: var(--surface-3); color: var(--text); }

.signin-body { background: var(--surface); }
.signin { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(380px, 5fr) 7fr; }

/* The brand panel: dark in both themes */
.signin-panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px; color: #e6ebff;
  background:
    radial-gradient(600px 420px at 100% 0%, rgba(99, 102, 241, .35) 0%, rgba(99, 102, 241, 0) 70%),
    radial-gradient(520px 420px at 0% 100%, rgba(16, 185, 129, .18) 0%, rgba(16, 185, 129, 0) 70%),
    linear-gradient(165deg, #0d1736 0%, #111c44 55%, #0b1430 100%);
}
.signin-panel::before { /* faint dot grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.signin-panel > * { position: relative; }
.signin-brand { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.signin-mark { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .875rem;
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%); box-shadow: 0 6px 16px -6px rgba(79, 124, 255, .7); }
.signin-logo { height: 34px; max-width: 170px; object-fit: contain; }
.signin-panel .signin-logo { background: rgba(255, 255, 255, .95); border-radius: 8px; padding: 4px 8px; }
.signin-panel-body { max-width: 460px; }
.signin-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 600; color: #9fb2ff; margin: 0 0 12px; }
.signin-panel h2 { font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: #fff; margin: 0 0 28px; }
.signin-features { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 18px; }
.signin-features li { display: flex; gap: 14px; align-items: flex-start; }
.signin-features li > span { flex: 0 0 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #c7d3ff; font-size: .85rem; }
.signin-features strong { display: block; color: #fff; font-weight: 600; font-size: .9375rem; }
.signin-features small { display: block; color: #aab6d8; font-size: .8125rem; line-height: 1.45; margin-top: 2px; }
.signin-preview { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 14px 16px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: 400px; }
.signin-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.signin-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.signin-line { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.signin-line.w-40 { width: 40%; }
.signin-pill { margin-left: auto; font-size: .7rem; font-weight: 600; color: #c7d3ff; background: rgba(99, 102, 241, .28); border-radius: 999px; padding: 2px 9px; }
.signin-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.signin-bar i:nth-child(1) { background: #34d399; }
.signin-bar i:nth-child(2) { background: #f87171; }
.signin-bar i:nth-child(3) { background: #94a3b8; }
.signin-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .72rem; color: #aab6d8; }
.signin-legend b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.lg-ok { background: #34d399; } .lg-bad { background: #f87171; } .lg-skip { background: #94a3b8; } .lg-wait { background: rgba(255, 255, 255, .25); }
.signin-panel-foot { font-size: .75rem; color: #8090b8; }

/* The form */
.signin-main { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--surface); }
.signin-form-wrap { width: 100%; max-width: 400px; }
.signin-brand-mobile { display: none; color: var(--text); margin-bottom: 32px; }
.signin-main h1 { font-size: 1.625rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); margin: 0 0 6px; }
.signin-sub { color: var(--text-3); font-size: .9375rem; margin: 0 0 28px; }
.signin-main .form-label { font-weight: 500; color: var(--text-2); }
.signin-main .form-control-lg { font-size: .9375rem; min-height: 46px; border-radius: var(--radius-sm); }
.signin-main .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); }
.signin-main .form-control.is-invalid { border-color: var(--danger); background-image: none; }
.signin-main .btn-lg { min-height: 46px; font-size: .9375rem; font-weight: 600; border-radius: var(--radius-sm); }
.signin-link { font-weight: 500; text-decoration: none; }
.signin-link:hover { text-decoration: underline; }
.signin-alert { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 20px; font-size: .875rem; border: 1px solid; }
.signin-alert i { margin-top: 3px; }
.signin-alert.is-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-text); }
.signin-alert.is-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-text); }
.signin-alert.is-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success-text); }
.signin-field-error { color: var(--danger-text); font-size: .8125rem; margin-top: 6px; }
.signin-caps { color: var(--warning-text); font-size: .8125rem; margin-top: 6px; }
.signin-help { color: var(--text-3); font-size: .875rem; text-align: center; margin: 22px 0 0; }
.signin-secure { display: flex; gap: 10px; align-items: flex-start; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-3); font-size: .78rem; line-height: 1.5; }
.signin-secure i { color: var(--success); margin-top: 2px; }
.signin-foot-mobile { display: none; color: var(--text-3); font-size: .75rem; margin: 20px 0 0; text-align: center; }

@media (max-width: 991.98px) {
  .signin { grid-template-columns: 1fr; }
  .signin-panel { display: none; }
  .signin-main { align-items: flex-start; padding: 40px 20px; }
  .signin-brand-mobile { display: flex; }
  .signin-foot-mobile { display: block; }
}
@media (min-width: 992px) and (max-height: 720px) {
  .signin-preview { display: none; }
}

/* ---------- Searchable pickers (Tom Select) ---------- */
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0 !important; border: 0; box-shadow: none; background: none; min-height: 0; }
.ts-wrapper .ts-control, .ts-wrapper.single.input-active .ts-control {
  min-height: 36px; padding: .375rem 2rem .375rem .75rem; font-size: .875rem; color: var(--text);
  background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
}
.ts-wrapper .ts-control input { color: var(--text); font-size: .875rem; }
.ts-wrapper .ts-control input::placeholder { color: var(--text-3); }
.ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.ts-dropdown { margin-top: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: .8125rem; overflow: hidden; }
.ts-dropdown .option, .ts-dropdown .no-results { padding: 7px 12px; color: var(--text); }
.ts-dropdown .no-results { color: var(--text-3); }
.ts-dropdown .active { background: var(--accent-soft); color: var(--accent); }
.ts-dropdown .spinner { display: none; }
/* Progress bars that carry a label need room for the text (the default bar is a 6px line) */
.progress:has(> .progress-bar:not(:empty)) { --bs-progress-height: 20px; position: relative; }
.progress > .progress-bar:not(:empty) { font-size: .6875rem; font-weight: 600; line-height: 20px; overflow: visible; white-space: nowrap; min-width: 2.75rem; padding: 0 8px; }
.meter-head span:last-child { font-size: 1.125rem; }
.meter .progress { --bs-progress-height: 8px; }
/* Pages rendered through layouts/admin (job queue, API keys): same page-title look as the rest */
.layout-page > .app-content > .container-fluid.mt-4 { margin-top: 0 !important; padding-top: 12px; }
.layout-page .container-fluid > .row:first-child h2 { font-size: 1.375rem; font-weight: 600; margin: 0; line-height: 1.3; }
.layout-page .container-fluid > .row:first-child h2 > i { display: none; }
.layout-page .container-fluid > .row:first-child .btn { --bs-btn-font-size: .8125rem; --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .25rem; }
.stat-footer.text-muted:hover { color: var(--text-3) !important; }

/* ---------- Settings page ---------- */
.settings-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--header-h) + 16px); gap: 2px; }
.settings-nav .nav-link {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-weight: 500; font-size: .875rem;
}
.settings-nav .nav-link > i { width: 16px; margin-top: 3px; text-align: center; color: var(--text-3); font-size: .8125rem; }
.settings-nav .nav-link small { display: block; margin-top: 1px; color: var(--text-3); font-size: .75rem; font-weight: 400; }
.settings-nav .nav-link:hover { background: var(--surface-3); color: var(--text); }
.settings-nav .nav-link.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--border); }
.settings-nav .nav-link.active > i { color: var(--accent); }
.settings-content { min-width: 0; }
.section-help { margin: 2px 0 0; color: var(--text-3); font-size: .8125rem; font-weight: 400; }

.account-list { display: grid; gap: 10px; }
.account-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.account-row.is-active { border-color: var(--success-border); background: linear-gradient(90deg, var(--success-soft) 0%, var(--surface) 55%); }
.account-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text-3); font-size: .875rem; }
.account-row.is-active .account-icon { background: var(--surface); color: var(--success-text); box-shadow: var(--shadow-xs); }
.account-main { flex: 1 1 auto; min-width: 0; }
.account-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; word-break: break-word; }
.account-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 3px; color: var(--text-3); font-size: .8125rem; }
.account-meta i { width: 14px; font-size: .6875rem; }
.account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }

.setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.setting-toggle .form-switch .form-check-input { width: 2.5em; height: 1.375em; margin: 0; cursor: pointer; }
.rate-summary { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--text-2); font-size: .8125rem; }
.rate-summary > i { color: var(--info-text); margin-right: 4px; }
.preset-group { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-group .btn.active { --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: rgba(var(--accent-rgb), .45); --bs-btn-active-color: var(--accent); }

@media (max-width: 991.98px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* minmax: the menu row scrolls instead of widening the page */
  .settings-nav { position: static; flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .settings-nav .nav-link { width: auto; white-space: nowrap; }
  .settings-nav .nav-link small { display: none; }
  .account-row { flex-wrap: wrap; }
  .account-actions { width: 100%; justify-content: flex-start; }
}.account-actions form { display: inline-flex; margin: 0; }
.account-actions .btn { min-height: 30px; }

/* Settings menu as its own panel */
.settings-menu { position: sticky; top: calc(var(--header-h) + 16px); padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.settings-menu-title { padding: 6px 10px 10px; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.settings-menu .settings-nav { position: static; gap: 4px; }
.settings-nav .nav-link { align-items: center; padding: 10px; border: 1px solid transparent; position: relative; }
.settings-nav-icon { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text-3); font-size: .8125rem; transition: background .12s ease, color .12s ease; }
.settings-nav-text { flex: 1 1 auto; min-width: 0; }
.settings-nav-arrow { font-size: .625rem; color: var(--text-3); opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.settings-nav .nav-link:hover { background: var(--surface-2); }
.settings-nav .nav-link:hover .settings-nav-arrow { opacity: .6; }
.settings-nav .nav-link.active { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .22); color: var(--accent); box-shadow: none; }
.settings-nav .nav-link.active .settings-nav-icon { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-xs); }
.settings-nav .nav-link.active .settings-nav-arrow { opacity: 1; color: var(--accent); }
.settings-nav .nav-link.active small { color: var(--text-2); }
.settings-nav .nav-link:nth-child(1) .settings-nav-icon { background: var(--blue-soft); color: var(--blue); }
.settings-nav .nav-link:nth-child(2) .settings-nav-icon { background: var(--green-soft); color: var(--green); }
.settings-nav .nav-link:nth-child(3) .settings-nav-icon { background: var(--violet-soft); color: var(--violet); }
.settings-nav .nav-link:nth-child(4) .settings-nav-icon { background: var(--amber-soft); color: var(--amber); }
.settings-nav .nav-link.active .settings-nav-icon { background: var(--surface); }
@media (max-width: 991.98px) {
  .settings-menu { position: static; padding: 6px; }
  .settings-menu-title, .settings-nav-arrow { display: none; }
}
/* ---------- Standard page header panel (built by app.js on every module) ---------- */
.app-content-header { padding: 20px 0 8px; }
.page-head {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.page-head-icon {
  width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 1rem;
}
.page-head-body { flex: 1 1 auto; min-width: 0; }
.page-head-body > .row { --bs-gutter-x: 0; margin: 0 !important; align-items: center; row-gap: 8px; }
.page-head-body h1, .page-head-body h2 { font-size: 1.25rem; font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: -.01em; }
.page-head-body h2 > i { display: none; }
.page-head-body .page-subtitle, .page-head-body small.text-muted { margin: 1px 0 0; font-size: .8125rem; color: var(--text-3); }
.page-eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); line-height: 1.2; margin-bottom: 1px; }
.page-head .breadcrumb { margin: 0; justify-content: flex-end; }
.page-head .text-end .btn + .btn, .page-head .text-end a + a { margin-left: 4px; }
.page-head-wrap { padding: 8px 0 16px; }
.app-content-header.pt-3 { padding-top: 8px !important; }
@media (max-width: 575.98px) {
  .page-head { padding: 12px 14px; gap: 12px; }
  .page-head-icon { width: 36px; height: 36px; font-size: .875rem; }
  .page-head-body .text-end { text-align: left !important; }
}.page-head-wrap { padding: 0 0 16px; }
.page-head-wrap .btn, .page-head .text-end > .btn { --bs-btn-font-size: .8125rem; --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .25rem; }

/* ---------- Tables: consistent spacing and quiet rows everywhere ---------- */
.card-body.p-0 > .dt-container, .card-body.p-0 > .dataTables_wrapper,
.card-body.p-0 > .table-responsive > .dt-container, .card-body.p-0 > .table-responsive > .dataTables_wrapper { padding: 16px 20px; }
table.dataTable.table-striped > tbody > tr > *, table.dataTable > tbody > tr.odd > *, table.dataTable > tbody > tr.even > * { box-shadow: none !important; background-color: transparent; }
table.dataTable > tbody > tr:hover > * { background-color: var(--surface-2); }
table.dataTable td.dt-empty, table.dataTable td.dataTables_empty { background: transparent !important; text-align: center; padding: 36px 16px !important; color: var(--text-3); }
table.dataTable > tbody > tr:has(> td.dt-empty):hover > * { background: transparent; }
.dt-container .dt-layout-row, .dt-container > .row { --bs-gutter-x: 0; }
.table td .empty-state { padding: 20px 16px; }
.card-header:has(> [data-date-range]) { align-items: center !important; }

/* Searchable pickers keep the normal field outline */
.ts-wrapper.form-select .ts-control, .ts-wrapper.form-control .ts-control, .ts-wrapper.single .ts-control {
  border: 1px solid var(--border-strong) !important; background-color: var(--surface) !important; background-image: none !important;
}
.ts-wrapper.single .ts-control::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg);
}
.ts-wrapper.focus .ts-control { border-color: var(--accent) !important; }

/* Form beside list: keeps the form in view while the list scrolls */
@media (min-width: 992px) { .sticky-form { position: sticky; top: calc(var(--header-h) + 16px); } }

/* People in tables */
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person .avatar { width: 32px; height: 32px; font-size: .75rem; }
.person-name { font-weight: 600; color: var(--text); line-height: 1.3; }
.person-sub { color: var(--text-3); font-size: .75rem; line-height: 1.3; }
.table .form-switch { padding-left: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 0; margin: 0; }
.table .form-switch .form-check-input { margin: 0; float: none; cursor: pointer; }
.table .form-switch .form-check-input:disabled { cursor: not-allowed; }

/* Steps of a drip sequence */
.step-list { display: grid; gap: 8px; }
.step-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.step-number { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: .8125rem; }
.step-main { flex: 1 1 auto; min-width: 0; }
.step-subject { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-meta { color: var(--text-3); font-size: .75rem; }
.step-form { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
/* Notifications: mark all read */
.notif-read-all { border: 0; background: transparent; padding: 2px 6px; border-radius: var(--radius-xs); color: var(--accent); font-size: .75rem; font-weight: 500; }
.notif-read-all:hover { background: var(--accent-soft); }
.notif-read-all:disabled { opacity: .6; }
.notif-read-all i { font-size: .6875rem; margin-right: 2px; }

/* Campaign details: cover band */
.campaign-cover { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px; border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--border)); border-radius: var(--radius); background: linear-gradient(120deg, var(--blue-soft) 0%, var(--violet-soft) 55%, var(--teal-soft) 100%); box-shadow: var(--shadow-xs); }
.campaign-cover-main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; flex: 1 1 420px; }
.campaign-cover-icon { width: 52px; height: 52px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--surface); color: var(--blue); font-size: 1.25rem; box-shadow: var(--shadow-xs); }
.campaign-cover-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.campaign-cover-subject { margin: 4px 0 10px; color: var(--text-2); font-size: .9375rem; overflow-wrap: anywhere; }
.campaign-cover-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8125rem; color: var(--text-2); }
.campaign-cover-meta i, .campaign-cover-subject i { color: var(--text-3); margin-right: 4px; }
.campaign-cover-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 575.98px) {
  .campaign-cover { padding: 18px 16px; }
  .campaign-cover-icon { display: none; }
  .campaign-cover-actions .btn { flex: 1 1 auto; }
}

/* Settings: more sections, logo, sending window */
.settings-nav .nav-link:nth-child(5) .settings-nav-icon { background: var(--rose-soft); color: var(--rose); }
.settings-nav .nav-link:nth-child(6) .settings-nav-icon { background: var(--teal-soft); color: var(--teal); }
.settings-nav .nav-link:nth-child(7) .settings-nav-icon { background: var(--amber-soft); color: var(--amber); }
.settings-nav .nav-link:nth-child(8) .settings-nav-icon { background: var(--blue-soft); color: var(--blue); }
.settings-nav .nav-link:nth-child(9) .settings-nav-icon { background: var(--violet-soft); color: var(--violet); }
.settings-nav .nav-link:nth-child(10) .settings-nav-icon { background: var(--green-soft); color: var(--green); }
.settings-nav .nav-link.active .settings-nav-icon { background: var(--surface); }
.settings-content .card + .card, .settings-content form + form .card, .settings-content form + .card { margin-top: 20px; }
.logo-preview { width: 160px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-3); font-size: 1.25rem; padding: 8px; }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.day-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.day-picker .btn-check:checked + .btn { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .45); color: var(--accent); }
#windowFields.is-off { opacity: .5; }
.brand-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; flex-shrink: 0; }
.auth-brand .brand-logo { height: 32px; max-width: 160px; }

/* ============================================================
   Refresh: brighter surfaces, dark navigation, flat page titles,
   crisp cards and tables. Overrides the layers above.
   ============================================================ */
:root, [data-bs-theme="light"] {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-3: #f1f3f8;
  --border: #e6e9f0;
  --border-strong: #d3d8e3;
  --text: #0f172a;
  --text-2: #3b4559;
  --text-3: #6b7489;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef0ff;
  --accent-rgb: 79, 70, 229;
  --bs-link-hover-color-rgb: 67, 56, 202;
  --wash: none;
  --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --radius: 12px;
  --radius-sm: 9px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
  --nav-bg: #0f1530;
  --nav-bg-2: #131a3a;
  --nav-text: #c3c9dc;
  --nav-muted: #7f88a6;
  --nav-hover: rgba(255, 255, 255, .06);
  --nav-active: rgba(129, 140, 248, .18);
  --nav-line: rgba(255, 255, 255, .07);
}
[data-bs-theme="dark"] {
  /* restated: the light values above are set on :root too, which also matches in dark mode */
  --bg: #0b1020;
  --surface: #131a2a;
  --surface-2: #182033;
  --surface-3: #1f283c;
  --border: #263049;
  --border-strong: #354262;
  --text: #f1f4fa;
  --text-2: #c4cad8;
  --text-3: #8f98ad;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --accent-soft: rgba(129, 140, 248, .15);
  --accent-rgb: 129, 140, 248;
  --wash: none;
  --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --nav-bg: #0a0f22;
  --nav-bg-2: #0d1329;
  --nav-text: #c3c9dc;
  --nav-muted: #7a83a0;
  --nav-hover: rgba(255, 255, 255, .05);
  --nav-active: rgba(129, 140, 248, .2);
  --nav-line: rgba(255, 255, 255, .06);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b1020; --bs-btn-hover-color: #0b1020; }
.app-main { background: none; }

/* Navigation: dark in both themes */
.app-sidebar { background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%); border-right: 0; }
.sidebar-brand { border-bottom: 1px solid var(--nav-line); height: 60px; }
.brand-link, .brand-link:hover { color: #fff; }
.brand-mark { background: var(--brand-gradient); box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .8); }
.sidebar-wrapper { scrollbar-color: rgba(255, 255, 255, .15) transparent; padding-top: 10px; }
.sidebar-wrapper::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); background-clip: content-box; }
.sidebar-nav .nav-header, .sidebar-nav .nav-group-toggle { color: var(--nav-muted); font-size: .66rem; letter-spacing: .09em; }
.sidebar-nav .nav-group-toggle:hover { color: #e4e8f5; }
.sidebar-nav .nav-link { color: var(--nav-text); padding: 8px 10px; }
.sidebar-nav .nav-link .nav-icon { color: var(--nav-muted); }
.sidebar-nav .nav-link:hover { background: var(--nav-hover); color: #fff; }
.sidebar-nav .nav-link:hover .nav-icon { color: #dfe3f2; }
.sidebar-nav .nav-link.active { background: var(--nav-active); color: #fff; font-weight: 600; }
.sidebar-nav .nav-link.active .nav-icon { color: #a5b4fc; }
.sidebar-nav .nav-link.active::before { background: #818cf8; left: -10px; }
.sidebar-foot { border-top: 1px solid var(--nav-line); color: var(--nav-muted); padding: 12px 18px; }
.sidebar-status { display: grid; gap: 8px; }
.sidebar-status-row { display: flex; align-items: flex-start; gap: 9px; text-decoration: none; }
.sidebar-status-row b { display: block; color: #e8ebf6; font-size: .78rem; font-weight: 600; line-height: 1.25; }
.sidebar-status-row small { display: block; color: var(--nav-muted); font-size: .7rem; line-height: 1.25; }
.sidebar-status-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; flex-shrink: 0; background: #6b7280; }
.sidebar-status-dot.is-ok { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }
.sidebar-status-dot.is-warn { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .16); }
.sidebar-status-dot.is-bad { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }
.sidebar-version { margin-top: 10px; font-size: .68rem; color: var(--nav-muted); opacity: .8; }

/* Header bar */
.app-header { height: 60px; box-shadow: 0 1px 0 var(--border); border-bottom: 0; }
.header-search input { background: var(--surface-3); border-color: transparent; }

/* Page titles: flat on the page, actions on the right */
.app-content-header { padding: 22px 0 6px; }
.page-head-wrap { padding: 0 0 14px; }
.page-head { background: none; border: 0; box-shadow: none; padding: 0; gap: 12px; }
.page-head-icon { display: none; }
.page-head-body h1, .page-head-body h2, .app-content-header h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.page-head-body .page-subtitle, .page-subtitle { color: var(--text-3); font-size: .84rem; }
.page-eyebrow { color: var(--accent); letter-spacing: .08em; }

/* Cards */
.card { border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.card-header { background: transparent; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.card-title, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { font-size: .95rem; font-weight: 650; letter-spacing: -.005em; }
.card-title > i:first-child, .card-header > h2 > i:first-child, .card-header > h3 > i:first-child, .card-header > h5 > i:first-child { background: var(--accent-soft); color: var(--accent) !important; }
.card-footer { background: var(--surface-2); }

/* Figures */
.stat-card { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.stat-card[class*="tone-"] { background: var(--surface); border-color: var(--border); }
.stat-card[class*="tone-"] .stat-icon { background: var(--tone-soft); box-shadow: none; }
.stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.mini-stat { border-radius: var(--radius-sm); }
.mini-stat-value { font-weight: 700; }

/* Tables: quiet rows, small upper-case headings */
.table > thead > tr > th, .table > thead > tr > td, table.dataTable > thead > tr > th {
  font-size: .68rem !important; font-weight: 600 !important; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3) !important; background: transparent !important; border-bottom: 1px solid var(--border) !important;
}
.table > :not(caption) > * > * { padding: .75rem 1rem; border-color: var(--border); }
.table > tbody > tr:hover > *, table.dataTable > tbody > tr:hover > * { background: #f9fafe; }
[data-bs-theme="dark"] .table > tbody > tr:hover > *, [data-bs-theme="dark"] table.dataTable > tbody > tr:hover > * { background: var(--surface-2); }
.table-responsive, .dt-container .table { border-radius: 0; }

/* Badges: outlined pills */
.badge { border-radius: 999px; font-weight: 600; padding: .32em .7em; border: 1px solid transparent; letter-spacing: .005em; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light { background: var(--surface-3) !important; color: var(--text-2) !important; border-color: var(--border); }
.badge.bg-warning, .badge.text-bg-warning { background: var(--warning-soft) !important; color: var(--warning-text) !important; border-color: var(--warning-border); }
.badge.bg-info, .badge.text-bg-info { background: var(--info-soft) !important; color: var(--info-text) !important; border-color: var(--info-border); }
.badge.bg-dark, .badge.text-bg-dark { background: #e9edf4 !important; color: #1e293b !important; border-color: #cbd3e1; }
[data-bs-theme="dark"] .badge.bg-dark, [data-bs-theme="dark"] .badge.text-bg-dark { background: #2a3550 !important; color: #e2e8f0 !important; border-color: #3a4766; }

/* Buttons and fields */
.btn { border-radius: var(--radius-sm); font-weight: 600; }
.btn-primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 10px -4px rgba(var(--accent-rgb), .55); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); }
.form-control, .form-select { border-radius: var(--radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }
.nav-pills .nav-link.active { background: var(--accent-soft); color: var(--accent); }
.progress { background: var(--surface-3); border-radius: 999px; }
.app-footer { border-top: 1px solid var(--border); background: transparent; }

/* ---------- Dashboard ---------- */
.dash-actions { flex-shrink: 0; }
@media (max-width: 1199.98px) { .dash-actions { flex-shrink: 1; min-width: 0; } }
.dash-period { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-xs); }
.dash-period a { padding: 5px 12px; border-radius: 7px; color: var(--text-2); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.dash-period a:hover { background: var(--surface-3); color: var(--text); }
.dash-period a.active { background: var(--accent-soft); color: var(--accent); }
.dash-health { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.dash-health-item { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; min-width: 0; color: inherit; text-decoration: none; border-left: 1px solid var(--border); }
.dash-health-item:first-child { border-left: 0; }
a.dash-health-item:hover { background: var(--surface-2); }
.dash-health-item i { margin-top: 2px; font-size: .95rem; }
.dash-health-item b { display: block; font-size: .8125rem; font-weight: 650; color: var(--text); line-height: 1.3; }
.dash-health-item small { display: block; color: var(--text-3); font-size: .74rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.is-ok > i { color: var(--success); } .is-warn > i { color: var(--warning); } .is-bad > i { color: var(--danger); } .is-off > i { color: var(--text-3); }
.kpi { height: 100%; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.kpi-label { display: flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.kpi-label i { font-size: .8rem; }
.kpi-value { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 10px 0 6px; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: .9rem; font-weight: 600; color: var(--text-3); margin-left: 2px; }
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; font-size: .78rem; color: var(--text-3); }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: .72rem; background: var(--surface-3); color: var(--text-2); }
.kpi-delta.up { background: var(--success-soft); color: var(--success-text); }
.kpi-delta.down { background: var(--danger-soft); color: var(--danger-text); }
.kpi-spark { width: 120px; height: 34px; flex-shrink: 0; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8125rem; color: var(--text-2); }
.dash-legend b { color: var(--text); font-weight: 650; margin-left: 4px; }
.dash-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.dash-mixbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.dash-mix-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .875rem; }
.dash-mix-row:last-child { border-bottom: 0; }
.dash-mix-row .num { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.dash-mix-row .pct { width: 52px; text-align: right; color: var(--text-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.dash-rank { list-style: none; margin: 0; padding: 0; }
.dash-rank li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.dash-rank li:last-child { border-bottom: 0; }
.dash-rank .row-top { display: flex; align-items: center; gap: 8px; font-size: .875rem; margin-bottom: 7px; }
.dash-rank .row-top .num { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: .8125rem; white-space: nowrap; }
.dash-rank .bar { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.dash-rank .bar > i { display: block; height: 100%; border-radius: 999px; }
.dash-empty { padding: 28px 12px; text-align: center; color: var(--text-3); font-size: .8125rem; }
.dash-empty i { display: block; font-size: 1.25rem; margin-bottom: 8px; opacity: .6; }
.dash-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.dash-item:last-child { border-bottom: 0; }
.dash-item-main { min-width: 0; flex: 1 1 auto; }
.dash-item-title { font-weight: 600; color: var(--accent); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-item-sub { color: var(--text-3); font-size: .78rem; }
.dash-note { color: var(--text-3); font-size: .78rem; }
@media (max-width: 1399.98px) { .dash-health { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-health-item:nth-child(4) { border-left: 0; } .dash-health-item:nth-child(n+4) { border-top: 1px solid var(--border); } }
@media (max-width: 767.98px) { .dash-health { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-health-item { border-left: 0; border-top: 1px solid var(--border); } .dash-health-item:nth-child(-n+2) { border-top: 0; } .dash-health-item:nth-child(even) { border-left: 1px solid var(--border); } }

/* Wide tables scroll inside their card instead of widening the page (phones, narrow windows) */
.dt-container:has(> table.dataTable), .dt-container :has(> table.dataTable), .card-body:has(> table.table), .card:has(> table.table) { overflow-x: auto; max-width: 100%; }
.card-body, .dt-container, .app-content .container-fluid > .row > [class*="col"] { min-width: 0; }
@media (max-width: 767.98px) {
  .dt-container .dt-search input, .dt-container .dataTables_filter input { width: 100%; }
  .app-content-header .d-flex > .btn, .page-head-body .text-end .btn { white-space: nowrap; }
}

/* ---------- Filter bars: small inputs, selects and buttons the same height ---------- */
.form-control-sm, .form-select-sm { height: 32px; padding-top: .25rem; padding-bottom: .25rem; }
.filter-bar .btn-sm, [data-date-range] .btn-sm { height: 32px; display: inline-flex; align-items: center; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.filter-bar .form-label { font-size: .75rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.filter-bar .filter-note { font-size: .8125rem; color: var(--text-3); align-self: flex-end; padding-bottom: 7px; }
/* Two numbers in one table cell: the main one, the detail under it */
.cell-sub { display: block; font-size: .75rem; color: var(--text-3); font-weight: 500; white-space: nowrap; }
/* Page numbers for card grids (not DataTables) */
.grid-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: .8125rem; color: var(--text-3); }
.grid-pager .pagination { margin: 0; }

/* ---------- Section bar: the same header on every page (structure built by app.js) ----------
   [icon] [SECTION / Title / subtitle] ............ [actions] */
.app-content-header { padding: 20px 0 6px; }
.page-head-wrap { padding: 0 0 16px; }
.page-head {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px; padding: 18px 22px 18px 24px;
  background: linear-gradient(105deg, var(--accent-soft) 0%, var(--surface) 46%);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card);
}
.page-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--accent), #8b5cf6); }
.page-head-icon {
  display: inline-flex; flex-shrink: 0; width: 48px; height: 48px; align-items: center; justify-content: center;
  border-radius: 13px; font-size: 1.1rem; color: #fff;
  background: linear-gradient(135deg, var(--accent), #8b5cf6); box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .55);
}
/* The text takes what the actions leave; the actions keep their width (up to 65%, then wrap) */
.page-head-body { flex: 1 1 0; min-width: 0; }
/* Whatever layout the page wrote around its title, the text simply stacks */
.page-head-body > .row, .page-head-body > .d-flex { display: block !important; margin: 0 !important; }
.page-head-body [class*="col-"] { width: auto !important; max-width: none !important; padding: 0 !important; flex: none !important; }
.page-head-body h1, .page-head-body h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0 !important; color: var(--text); }
.page-head-body .page-subtitle, .page-head-body p, .page-head-body .text-muted, .page-head-body small {
  display: block; margin: 3px 0 0 !important; font-size: .84rem; line-height: 1.45; color: var(--text-3) !important; max-width: 920px;
}
.page-eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.page-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; max-width: 65%; }
.page-head-actions > * { margin: 0 !important; }
.page-head-actions .d-flex, .page-head-actions .text-end { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }
.page-head-actions .btn { white-space: nowrap; }
.page-head-actions .btn + .btn, .page-head-actions a + a { margin-left: 0 !important; }
@media (max-width: 991.98px) {
  .page-head { flex-wrap: wrap; padding: 16px 18px 16px 20px; gap: 12px 14px; background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 55%); }
  .page-head-body { flex: 1 1 calc(100% - 62px); }
  .page-head-actions { max-width: none; width: 100%; flex: 1 1 100%; justify-content: flex-start; padding-left: 62px; }
  .page-head-actions .d-flex, .page-head-actions .text-end { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .page-head-icon { width: 40px; height: 40px; font-size: .95rem; border-radius: 11px; }
  .page-head-body { flex: 1 1 calc(100% - 54px); }
  .page-head-body h1, .page-head-body h2 { font-size: 1.2rem; }
  .page-head-actions { padding-left: 0; }
}

/* Searchable dropdowns: the search box sits at the top of the open list */
.ts-dropdown .dropdown-input-wrap { padding: 8px; border-bottom: 1px solid var(--border); background: var(--surface); }
.ts-dropdown .dropdown-input { width: 100%; height: 32px; padding: 4px 10px; font-size: .8125rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); outline: none; }
.ts-dropdown .dropdown-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.ts-dropdown .ts-dropdown-content { max-height: 280px; }
/* Small searchable dropdowns match the small inputs beside them */
.ts-wrapper.form-select-sm .ts-control { min-height: 32px !important; padding-top: .2rem !important; padding-bottom: .2rem !important; font-size: .8125rem; }