/* ============================================================================
   crm-modern.css  —  Gurita CRM design + dark/light/auto theme layer
   Loaded after adminlte.min.css so these rules win cascade ties.

   Design language: quiet, editorial SaaS. One desaturated indigo accent,
   cool slate neutrals, flat surfaces (no gradients), Inter typography,
   muted semantic colors. All values flow from the --crm-* tokens below;
   [data-bs-theme="dark"] overrides them so every component adapts.

   The accent is brand-driven: admin/index.php emits --crm-brand and
   --crm-brand-rgb from Site Settings → Primary Color. Everything here
   derives from those two values via color-mix(), so changing the brand
   color in Site Settings rethemes the whole CRM.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — light mode (defaults)
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand accent — --crm-brand(-rgb) are injected by admin/index.php from
     Site Settings; the fallbacks keep standalone pages (login) on-palette. */
  --crm-primary:      var(--crm-brand, #4f46e5);
  --crm-primary-rgb:  var(--crm-brand-rgb, 79, 70, 229);
  --crm-primary-dark: color-mix(in srgb, var(--crm-primary) 82%, #000);
  --crm-primary-soft: color-mix(in srgb, var(--crm-primary) 10%, transparent);
  --crm-primary-glow: color-mix(in srgb, var(--crm-primary) 22%, transparent);
  /* Accent for TEXT/icons — lightened in dark mode for legibility while
     buttons/badges keep the solid accent. */
  --crm-accent-ink:   var(--crm-primary);
  /* Legacy alias (referenced by inline styles in admin/index.php) */
  --gurita-primary:   var(--crm-primary);

  /* Semantic — muted, not neon */
  --crm-success: #059669;
  --crm-warning: #d97706;
  --crm-danger:  #dc2626;
  --crm-info:    #0284c7;

  /* Surfaces — cool slate neutrals */
  --crm-bg:        #f4f6f9;
  --crm-surface:   #ffffff;
  --crm-surface-2: #f8fafc;
  --crm-border:    #e5e9f0;
  --crm-row-line:  color-mix(in srgb, var(--crm-border) 65%, transparent);

  /* Text */
  --crm-ink:   #101828;
  --crm-muted: #64748b;
  --crm-faint: #94a3b8;

  /* Typography */
  --crm-font: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont,
              'Segoe UI', system-ui, sans-serif;

  /* Radii */
  --crm-r:    12px;
  --crm-r-sm: 8px;
  --crm-r-lg: 16px;

  /* Elevations — soft and small; depth comes from borders, not blur */
  --crm-s1: 0 1px 2px rgba(16,24,40,.05);
  --crm-s2: 0 2px 8px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --crm-s3: 0 8px 24px rgba(16,24,40,.10);
  --crm-s4: 0 20px 48px rgba(16,24,40,.16);

  /* Speed */
  --crm-t: .18s cubic-bezier(.4,0,.2,1);

  /* ── Bootstrap variable remap ──────────────────────────────────────────
     Rethemes every var-driven utility (.text-primary, .bg-*-subtle,
     .text-bg-*, .badge, .progress-bar, links) without touching markup. */
  --bs-primary:               var(--crm-primary);
  --bs-primary-rgb:           var(--crm-primary-rgb);
  --bs-primary-bg-subtle:     color-mix(in srgb, var(--crm-primary) 9%, #fff);
  --bs-primary-border-subtle: color-mix(in srgb, var(--crm-primary) 25%, #fff);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--crm-primary) 80%, #000);

  --bs-success: var(--crm-success);  --bs-success-rgb: 5, 150, 105;
  --bs-success-bg-subtle:     color-mix(in srgb, var(--crm-success) 9%, #fff);
  --bs-success-border-subtle: color-mix(in srgb, var(--crm-success) 25%, #fff);
  --bs-success-text-emphasis: color-mix(in srgb, var(--crm-success) 80%, #000);

  --bs-warning: var(--crm-warning);  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-bg-subtle:     color-mix(in srgb, var(--crm-warning) 10%, #fff);
  --bs-warning-border-subtle: color-mix(in srgb, var(--crm-warning) 28%, #fff);
  --bs-warning-text-emphasis: color-mix(in srgb, var(--crm-warning) 80%, #000);

  --bs-danger: var(--crm-danger);    --bs-danger-rgb: 220, 38, 38;
  --bs-danger-bg-subtle:      color-mix(in srgb, var(--crm-danger) 8%, #fff);
  --bs-danger-border-subtle:  color-mix(in srgb, var(--crm-danger) 25%, #fff);
  --bs-danger-text-emphasis:  color-mix(in srgb, var(--crm-danger) 80%, #000);

  --bs-info: var(--crm-info);        --bs-info-rgb: 2, 132, 199;
  --bs-info-bg-subtle:        color-mix(in srgb, var(--crm-info) 9%, #fff);
  --bs-info-border-subtle:    color-mix(in srgb, var(--crm-info) 25%, #fff);
  --bs-info-text-emphasis:    color-mix(in srgb, var(--crm-info) 80%, #000);

  --bs-link-color:       var(--crm-accent-ink);
  --bs-link-color-rgb:   var(--crm-primary-rgb);
  --bs-link-hover-color: var(--crm-primary-dark);
}

/* ── Dark-mode token overrides ───────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --crm-bg:        #0b1120;
  --crm-surface:   #111a2e;
  --crm-surface-2: #172136;
  --crm-border:    #1f2d45;
  --crm-ink:       #e2e8f0;
  --crm-muted:     #94a3b8;
  --crm-faint:     #64748b;

  --crm-accent-ink: color-mix(in srgb, var(--crm-primary) 55%, #fff);

  --crm-s1: 0 1px 2px rgba(0,0,0,.40);
  --crm-s2: 0 2px 8px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.30);
  --crm-s3: 0 8px 24px rgba(0,0,0,.48);
  --crm-s4: 0 20px 48px rgba(0,0,0,.60);

  --bs-primary-bg-subtle:     color-mix(in srgb, var(--crm-primary) 18%, #0b1120);
  --bs-primary-border-subtle: color-mix(in srgb, var(--crm-primary) 32%, #0b1120);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--crm-primary) 50%, #fff);

  --bs-success-bg-subtle:     color-mix(in srgb, var(--crm-success) 16%, #0b1120);
  --bs-success-border-subtle: color-mix(in srgb, var(--crm-success) 30%, #0b1120);
  --bs-success-text-emphasis: color-mix(in srgb, var(--crm-success) 55%, #fff);

  --bs-warning-bg-subtle:     color-mix(in srgb, var(--crm-warning) 16%, #0b1120);
  --bs-warning-border-subtle: color-mix(in srgb, var(--crm-warning) 30%, #0b1120);
  --bs-warning-text-emphasis: color-mix(in srgb, var(--crm-warning) 60%, #fff);

  --bs-danger-bg-subtle:      color-mix(in srgb, var(--crm-danger) 16%, #0b1120);
  --bs-danger-border-subtle:  color-mix(in srgb, var(--crm-danger) 30%, #0b1120);
  --bs-danger-text-emphasis:  color-mix(in srgb, var(--crm-danger) 55%, #fff);

  --bs-info-bg-subtle:        color-mix(in srgb, var(--crm-info) 16%, #0b1120);
  --bs-info-border-subtle:    color-mix(in srgb, var(--crm-info) 30%, #0b1120);
  --bs-info-text-emphasis:    color-mix(in srgb, var(--crm-info) 55%, #fff);

  --bs-link-color:       var(--crm-accent-ink);
  --bs-link-hover-color: color-mix(in srgb, var(--crm-primary) 40%, #fff);
}

/* Accent text stays readable on dark surfaces (solid accent is too dark) */
[data-bs-theme="dark"] .text-primary { color: var(--crm-accent-ink) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--crm-font);
  background: var(--crm-bg) !important;
  color: var(--crm-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.bg-body-tertiary { background: var(--crm-bg) !important; }

/* Visible keyboard focus everywhere — never removed, only styled */
:focus-visible {
  outline: 2px solid var(--crm-primary);
  outline-offset: 2px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb       { background: #1f2d45; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ══════════════════════════════════════════════════════════════════════════════
   3. APP HEADER (top navbar)
   ══════════════════════════════════════════════════════════════════════════════ */
.app-header.navbar {
  border-bottom: 1px solid var(--crm-border);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,.88) !important;
  transition: background var(--crm-t), border-color var(--crm-t);
  z-index: 1040;
  min-height: 52px;
}
[data-bs-theme="dark"] .app-header.navbar {
  background: rgba(17,26,46,.90) !important;
}

.navbar-brand-text {
  font-weight: 600; font-size: 14px;
  color: var(--crm-ink);
  letter-spacing: -.01em;
}

.app-header .nav-link {
  color: var(--crm-muted);
  border-radius: var(--crm-r-sm);
  padding: 6px 10px;
  transition: color var(--crm-t), background var(--crm-t);
}
.app-header .nav-link:hover { color: var(--crm-ink); background: var(--crm-surface-2); }

/* Date badge — quiet chip instead of a solid grey pill */
.app-header .badge.bg-secondary {
  background: var(--crm-surface-2) !important;
  color: var(--crm-muted);
  border: 1px solid var(--crm-border);
  font-weight: 500;
}

/* Theme toggle button */
#btnThemeToggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border-radius: var(--crm-r-sm);
  border: 1px solid var(--crm-border);
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
  transition: all var(--crm-t);
  vertical-align: middle;
}
#btnThemeToggle:hover {
  color: var(--crm-accent-ink);
  border-color: color-mix(in srgb, var(--crm-primary) 30%, transparent);
  background: var(--crm-primary-soft);
}
#btnThemeToggle i { font-size: 14px; pointer-events: none; }

/* Notifications badge */
.navbar-badge { font-size: 9px; padding: 2px 5px; }

/* ══════════════════════════════════════════════════════════════════════════════
   4. SIDEBAR
   ══════════════════════════════════════════════════════════════════════════════ */
.app-sidebar {
  background: #0d1424 !important;
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: none;
}

/* Brand */
.sidebar-brand .brand-link {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
}
.sidebar-brand .brand-text {
  color: #fff; font-weight: 600; font-size: 14.5px; letter-spacing: -.01em;
}

/* Nav items — slim, flat, accent-tinted active state */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link {
  margin: 1px 12px;
  border-radius: var(--crm-r-sm);
  color: rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--crm-t), background var(--crm-t);
  padding: 8px 12px;
}
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active,
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link.active {
  color: #fff !important;
  background: color-mix(in srgb, var(--crm-primary) 24%, transparent) !important;
  box-shadow: none;
}
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link .nav-icon {
  color: rgba(255,255,255,.35);
  width: 20px; text-align: center;
  font-size: 15px;
  transition: color var(--crm-t);
}
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:hover .nav-icon { color: rgba(255,255,255,.75); }
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active .nav-icon,
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link.active .nav-icon {
  color: color-mix(in srgb, var(--crm-primary) 45%, #fff) !important;
}

/* Sign-out separator */
.sidebar-wrapper .sidebar-menu > .nav-item.mt-3 {
  margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
  margin-left: 12px; margin-right: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. CONTENT AREA
   ══════════════════════════════════════════════════════════════════════════════ */
.app-content-header {
  background: transparent;
  border-bottom: 0;
  padding: 1.1rem 0 .1rem;
}
.app-content-header h3 {
  font-size: 18px; font-weight: 700; color: var(--crm-ink); letter-spacing: -.02em;
}
.app-content { padding: 1.25rem 1.25rem 1.5rem; }

/* Breadcrumb */
.breadcrumb { background: transparent; margin: 0; font-size: 12.5px; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--crm-faint); }
.breadcrumb-item a { color: var(--crm-muted); text-decoration: none; transition: color var(--crm-t); }
.breadcrumb-item a:hover { color: var(--crm-accent-ink); }
.breadcrumb-item.active { color: var(--crm-ink); font-weight: 500; }

/* Footer */
.app-footer {
  border-top: 1px solid var(--crm-border);
  background: var(--crm-surface) !important;
  color: var(--crm-muted);
  font-size: 12.5px;
  padding: .8rem 1.25rem;
}
.app-footer a { color: var(--crm-muted); }
.app-footer a:hover { color: var(--crm-accent-ink); }

/* ══════════════════════════════════════════════════════════════════════════════
   6. CARDS — flat surfaces, hairline borders, no hover theatrics
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .card {
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-r);
  box-shadow: var(--crm-s1);
  transition: border-color var(--crm-t);
  overflow: hidden;
}

.app-main .card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--crm-border);
  padding: .95rem 1.25rem .85rem;
}
.app-main .card > .card-header .card-title {
  font-size: 14px; font-weight: 600; color: var(--crm-ink);
  margin: 0; letter-spacing: -.01em;
}
.app-main .card > .card-body { padding: 1.25rem; }
.app-main .card > .card-body.p-0 { padding: 0 !important; }

.app-main .btn-tool { color: var(--crm-faint); border-radius: var(--crm-r-sm); transition: all var(--crm-t); }
.app-main .btn-tool:hover { color: var(--crm-ink); background: var(--crm-surface-2); }

/* ══════════════════════════════════════════════════════════════════════════════
   7. INFO-BOXES (stat widgets) — tinted icon chips instead of gradients
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .info-box {
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-r);
  box-shadow: var(--crm-s1);
  padding: 16px 18px;
  min-height: auto;
  transition: transform var(--crm-t), box-shadow var(--crm-t);
  overflow: hidden;
}
.app-main .info-box:hover { transform: translateY(-2px); box-shadow: var(--crm-s2); }

.app-main .info-box .info-box-icon {
  width: 48px; height: 48px; border-radius: var(--crm-r-sm);
  font-size: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.app-main .info-box .info-box-content { padding: 0 0 0 14px; display: flex; flex-direction: column; justify-content: center; }
.app-main .info-box .info-box-text   { font-size: 11px; color: var(--crm-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.app-main .info-box .info-box-number { font-size: 24px; font-weight: 700; color: var(--crm-ink); line-height: 1.15; letter-spacing: -.02em; }

/* Tinted icon chips (soft background + emphasized icon color) */
.app-main .info-box-icon.text-bg-primary   { background: var(--bs-primary-bg-subtle) !important;  color: var(--bs-primary-text-emphasis) !important; }
.app-main .info-box-icon.text-bg-success   { background: var(--bs-success-bg-subtle) !important;  color: var(--bs-success-text-emphasis) !important; }
.app-main .info-box-icon.text-bg-warning   { background: var(--bs-warning-bg-subtle) !important;  color: var(--bs-warning-text-emphasis) !important; }
.app-main .info-box-icon.text-bg-danger    { background: var(--bs-danger-bg-subtle) !important;   color: var(--bs-danger-text-emphasis) !important; }
.app-main .info-box-icon.text-bg-info      { background: var(--bs-info-bg-subtle) !important;     color: var(--bs-info-text-emphasis) !important; }
.app-main .info-box-icon.text-bg-secondary { background: var(--crm-surface-2) !important;         color: var(--crm-muted) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   8. SMALL-BOX — flattened from solid gradients to tinted surfaces
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .small-box {
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-r);
  box-shadow: var(--crm-s1);
  overflow: hidden;
  transition: transform var(--crm-t), box-shadow var(--crm-t);
}
.app-main .small-box:hover { transform: translateY(-2px); box-shadow: var(--crm-s2); }
.app-main .small-box > .inner h3 { font-weight: 700; letter-spacing: -.02em; }

.app-main .small-box.text-bg-primary   { background: var(--bs-primary-bg-subtle) !important;  color: var(--bs-primary-text-emphasis) !important;  border-color: var(--bs-primary-border-subtle); }
.app-main .small-box.text-bg-success   { background: var(--bs-success-bg-subtle) !important;  color: var(--bs-success-text-emphasis) !important;  border-color: var(--bs-success-border-subtle); }
.app-main .small-box.text-bg-warning   { background: var(--bs-warning-bg-subtle) !important;  color: var(--bs-warning-text-emphasis) !important;  border-color: var(--bs-warning-border-subtle); }
.app-main .small-box.text-bg-danger    { background: var(--bs-danger-bg-subtle) !important;   color: var(--bs-danger-text-emphasis) !important;   border-color: var(--bs-danger-border-subtle); }
.app-main .small-box.text-bg-info      { background: var(--bs-info-bg-subtle) !important;     color: var(--bs-info-text-emphasis) !important;     border-color: var(--bs-info-border-subtle); }
.app-main .small-box.text-bg-secondary { background: var(--crm-surface-2) !important;         color: var(--crm-ink) !important; }

/* Inner text/icon/footer inherit the tinted emphasis color */
.app-main .small-box .small-box-icon { color: currentColor; opacity: .18; }
.app-main .small-box .small-box-footer,
.app-main .small-box .small-box-footer.text-light,
.app-main .small-box .text-light {
  color: inherit !important;
  opacity: .78;
  background: rgba(0,0,0,.04);
}
[data-bs-theme="dark"] .app-main .small-box .small-box-footer,
[data-bs-theme="dark"] .app-main .small-box .text-light { background: rgba(255,255,255,.04); }

/* ══════════════════════════════════════════════════════════════════════════════
   9. TABLES — light row separators, no grid, comfortable padding
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .table { color: var(--crm-ink); }
.app-main .table > thead.table-light th,
.app-main .table > thead th {
  background: transparent;
  color: var(--crm-muted);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--crm-border);
  padding: .6rem 1rem;
  white-space: nowrap;
}
.app-main .table > tbody td {
  vertical-align: middle;
  border-color: var(--crm-row-line);
  padding: .72rem 1rem;
  color: var(--crm-ink);
}
.app-main .table-hover > tbody > tr { transition: background var(--crm-t); }
.app-main .table-hover > tbody > tr:hover > * { background: var(--crm-surface-2); }

[data-bs-theme="dark"] .app-main .table > thead.table-light th,
[data-bs-theme="dark"] .app-main .table > thead th {
  background: transparent;
  border-bottom-color: var(--crm-border);
  color: var(--crm-muted);
}
[data-bs-theme="dark"] .app-main .table > tbody td { border-color: var(--crm-row-line); }
[data-bs-theme="dark"] .app-main .table-hover > tbody > tr:hover > * { background: var(--crm-surface-2); }

/* ══════════════════════════════════════════════════════════════════════════════
   10. BUTTONS — flat triad: solid primary / neutral secondary / ghost outline
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .btn, .modal .btn { border-radius: var(--crm-r-sm); font-weight: 600; font-size: 13px; transition: all var(--crm-t); }
.app-main .btn-sm, .modal .btn-sm { font-size: 12.5px; }

.app-main .btn-primary, .modal .btn-primary {
  --bs-btn-bg: var(--crm-primary);
  --bs-btn-border-color: var(--crm-primary);
  --bs-btn-hover-bg: var(--crm-primary-dark);
  --bs-btn-hover-border-color: var(--crm-primary-dark);
  --bs-btn-active-bg: var(--crm-primary-dark);
  --bs-btn-active-border-color: var(--crm-primary-dark);
  --bs-btn-disabled-bg: var(--crm-primary);
  --bs-btn-disabled-border-color: var(--crm-primary);
  --bs-btn-focus-shadow-rgb: var(--crm-primary-rgb);
  background-image: none;
  box-shadow: none;
}
.app-main .btn-primary:hover, .modal .btn-primary:hover { box-shadow: var(--crm-s2); }

/* Neutral secondary (modal Cancel etc.) */
.app-main .btn-secondary, .modal .btn-secondary {
  --bs-btn-bg: var(--crm-surface-2);
  --bs-btn-color: var(--crm-ink);
  --bs-btn-border-color: var(--crm-border);
  --bs-btn-hover-bg: color-mix(in srgb, var(--crm-ink) 7%, var(--crm-surface-2));
  --bs-btn-hover-color: var(--crm-ink);
  --bs-btn-hover-border-color: var(--crm-border);
  --bs-btn-active-bg: color-mix(in srgb, var(--crm-ink) 10%, var(--crm-surface-2));
  --bs-btn-active-color: var(--crm-ink);
  --bs-btn-active-border-color: var(--crm-border);
}

/* Ghost accent */
.app-main .btn-outline-primary, .modal .btn-outline-primary {
  --bs-btn-color: var(--crm-accent-ink);
  --bs-btn-border-color: color-mix(in srgb, var(--crm-primary) 35%, transparent);
  --bs-btn-hover-color: var(--crm-accent-ink);
  --bs-btn-hover-bg: var(--crm-primary-soft);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--crm-primary) 45%, transparent);
  --bs-btn-active-color: var(--crm-accent-ink);
  --bs-btn-active-bg: var(--crm-primary-glow);
  --bs-btn-active-border-color: color-mix(in srgb, var(--crm-primary) 45%, transparent);
}

/* Ghost neutral */
.app-main .btn-outline-secondary, .modal .btn-outline-secondary {
  --bs-btn-color: var(--crm-muted);
  --bs-btn-border-color: var(--crm-border);
  --bs-btn-hover-color: var(--crm-ink);
  --bs-btn-hover-bg: var(--crm-surface-2);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--crm-muted) 40%, var(--crm-border));
  --bs-btn-active-color: var(--crm-ink);
  --bs-btn-active-bg: var(--crm-surface-2);
  --bs-btn-active-border-color: var(--crm-border);
}

/* Semantic buttons — muted palette, flat */
.app-main .btn-success, .modal .btn-success {
  --bs-btn-bg: var(--crm-success); --bs-btn-border-color: var(--crm-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--crm-success) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--crm-success) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--crm-success) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--crm-success) 80%, #000);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.app-main .btn-danger, .modal .btn-danger {
  --bs-btn-bg: var(--crm-danger); --bs-btn-border-color: var(--crm-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--crm-danger) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--crm-danger) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--crm-danger) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--crm-danger) 80%, #000);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.app-main .btn-warning, .modal .btn-warning {
  --bs-btn-bg: var(--crm-warning); --bs-btn-border-color: var(--crm-warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--crm-warning) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--crm-warning) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--crm-warning) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--crm-warning) 80%, #000);
}
.app-main .btn-info, .modal .btn-info {
  --bs-btn-bg: var(--crm-info); --bs-btn-border-color: var(--crm-info);
  --bs-btn-hover-bg: color-mix(in srgb, var(--crm-info) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--crm-info) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--crm-info) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--crm-info) 80%, #000);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}

.app-main .btn-group .btn { border-radius: var(--crm-r-sm); }

/* ══════════════════════════════════════════════════════════════════════════════
   11. BADGES
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .badge {
  font-weight: 600; letter-spacing: .01em;
  padding: .3em .6em; border-radius: 6px; font-size: 11.5px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   12. FORMS
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .form-control,
.app-main .form-select,
.app-main .input-group-text {
  border-radius: var(--crm-r-sm);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  color: var(--crm-ink);
  font-size: 13.5px;
  transition: border-color var(--crm-t), box-shadow var(--crm-t), background var(--crm-t);
}
.app-main .input-group > .form-control,
.app-main .input-group > .form-select { border-radius: 0; }
.app-main .input-group > :first-child { border-top-left-radius: var(--crm-r-sm); border-bottom-left-radius: var(--crm-r-sm); }
.app-main .input-group > :last-child  { border-top-right-radius: var(--crm-r-sm); border-bottom-right-radius: var(--crm-r-sm); }
.app-main .form-control:hover:not(:focus),
.app-main .form-select:hover:not(:focus) { border-color: color-mix(in srgb, var(--crm-muted) 35%, var(--crm-border)); }
.app-main .form-control:focus,
.app-main .form-select:focus {
  border-color: var(--crm-primary);
  box-shadow: 0 0 0 3px var(--crm-primary-soft);
  background: var(--crm-surface);
  color: var(--crm-ink);
}
.app-main .form-label { color: var(--crm-ink); font-weight: 500; font-size: 13px; }
.app-main .form-text  { color: var(--crm-muted); font-size: 12px; }

.app-main .form-check-input:checked { background-color: var(--crm-primary); border-color: var(--crm-primary); }
.app-main .form-check-input:focus  { border-color: var(--crm-primary); box-shadow: 0 0 0 3px var(--crm-primary-soft); }

[data-bs-theme="dark"] .app-main .form-control,
[data-bs-theme="dark"] .app-main .form-select,
[data-bs-theme="dark"] .app-main .input-group-text {
  background: var(--crm-surface-2);
  border-color: var(--crm-border);
  color: var(--crm-ink);
}
[data-bs-theme="dark"] .app-main .form-control:focus,
[data-bs-theme="dark"] .app-main .form-select:focus {
  background: var(--crm-surface-2);
}
[data-bs-theme="dark"] .app-main .form-control::placeholder { color: var(--crm-faint); }

/* ══════════════════════════════════════════════════════════════════════════════
   13. TABS
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .nav-tabs { border-bottom: 1px solid var(--crm-border); gap: 2px; }
.app-main .nav-tabs .nav-link {
  border: 0; color: var(--crm-muted); font-weight: 500; font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 0; padding: .6rem 1rem;
  transition: color var(--crm-t), border-color var(--crm-t);
}
.app-main .nav-tabs .nav-link:hover { color: var(--crm-ink); }
.app-main .nav-tabs .nav-link.active {
  color: var(--crm-accent-ink); background: transparent; font-weight: 600;
  border-bottom-color: var(--crm-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   14. MODALS
   ══════════════════════════════════════════════════════════════════════════════ */
.modal-backdrop.show { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.modal-content {
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-r-lg);
  overflow: hidden;
  box-shadow: var(--crm-s4);
  background: var(--crm-surface);
  animation: modalIn .2s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.modal-header {
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--crm-border);
  background: var(--crm-surface);
  color: var(--crm-ink);
}
.modal-header .modal-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.modal-header.bg-primary { background: var(--crm-primary) !important; border: 0; color: #fff; }
.modal-header.bg-warning { border: 0; }
.modal-header.bg-danger  { border: 0; }

.modal-body {
  padding: 1.4rem;
  background: var(--crm-surface);
  color: var(--crm-ink);
}
.modal-footer {
  border-top: 1px solid var(--crm-border);
  padding: .9rem 1.4rem;
  background: var(--crm-surface-2);
}

[data-bs-theme="dark"] .modal-header { background: var(--crm-surface); }
[data-bs-theme="dark"] .modal-body   { background: var(--crm-surface); }
[data-bs-theme="dark"] .modal-footer { background: var(--crm-surface-2); }

/* ══════════════════════════════════════════════════════════════════════════════
   15. DROPDOWNS
   ══════════════════════════════════════════════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-r);
  box-shadow: var(--crm-s3);
  padding: .35rem;
  background: var(--crm-surface);
  animation: dropIn .14s cubic-bezier(.4,0,.2,1);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.dropdown-item {
  border-radius: var(--crm-r-sm); font-size: 13.5px; color: var(--crm-ink);
  padding: .5rem .85rem;
  transition: background var(--crm-t);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--crm-surface-2); color: var(--crm-ink); }
.dropdown-divider { border-color: var(--crm-border); margin: .35rem 0; }
.dropdown-header {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--crm-faint); padding: .5rem .85rem;
}
.user-header.bg-primary {
  background: var(--crm-primary) !important;
  padding: 18px; text-align: center;
}
[data-bs-theme="dark"] .dropdown-menu { background: var(--crm-surface); border-color: var(--crm-border); }

/* ══════════════════════════════════════════════════════════════════════════════
   16. ALERTS — derived from semantic tokens, adapts to both themes
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .alert { border-radius: var(--crm-r-sm); border: 1px solid; font-size: 13.5px; }
.app-main .alert-success {
  background: color-mix(in srgb, var(--crm-success) 8%, var(--crm-surface));
  color: color-mix(in srgb, var(--crm-success) 70%, var(--crm-ink));
  border-color: color-mix(in srgb, var(--crm-success) 25%, var(--crm-surface));
}
.app-main .alert-danger {
  background: color-mix(in srgb, var(--crm-danger) 7%, var(--crm-surface));
  color: color-mix(in srgb, var(--crm-danger) 70%, var(--crm-ink));
  border-color: color-mix(in srgb, var(--crm-danger) 25%, var(--crm-surface));
}
.app-main .alert-warning {
  background: color-mix(in srgb, var(--crm-warning) 8%, var(--crm-surface));
  color: color-mix(in srgb, var(--crm-warning) 65%, var(--crm-ink));
  border-color: color-mix(in srgb, var(--crm-warning) 28%, var(--crm-surface));
}
.app-main .alert-info {
  background: color-mix(in srgb, var(--crm-info) 8%, var(--crm-surface));
  color: color-mix(in srgb, var(--crm-info) 70%, var(--crm-ink));
  border-color: color-mix(in srgb, var(--crm-info) 25%, var(--crm-surface));
}

/* Callouts */
.app-main .callout {
  border: 1px solid var(--crm-border); border-left-width: 3px;
  border-radius: var(--crm-r-sm); background: var(--crm-surface); box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   17. DATATABLES
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .dataTables_wrapper .dataTables_filter input,
.app-main .dataTables_wrapper .dataTables_length select {
  border-radius: var(--crm-r-sm); border: 1px solid var(--crm-border);
  background: var(--crm-surface); color: var(--crm-ink);
  padding: 4px 10px; font-size: 13px;
  transition: border-color var(--crm-t), box-shadow var(--crm-t);
}
.app-main .dataTables_wrapper .dataTables_filter input:focus {
  outline: none; border-color: var(--crm-primary); box-shadow: 0 0 0 3px var(--crm-primary-soft);
}
.app-main .dataTables_wrapper .dataTables_info { color: var(--crm-muted); font-size: 12.5px; }

/* ── Control padding inside .card-body.p-0 ────────────────────────────────
   Every data table in this CRM lives in a .card-body.p-0 so the table itself
   can run edge-to-edge under the card header. DataTables injects its own
   control rows into that same zero-padding container — length + search above
   the table, info + pagination below — so they inherited no horizontal
   padding and sat flush against the card edge. "Show", "Showing 1 to N" and
   "Next" were visibly clipped at the rounded corners.

   Padded to 1rem to line up with the table's own cell padding
   (.app-main .table > tbody td is .72rem 1rem), so the length menu aligns
   with the first column and the pager aligns with the last.

   Targeting the four control elements rather than the wrapper's .row/.col
   matters: it works for both the default Bootstrap-5 dom and the custom dom
   in guests/index.php, and it leaves the row that holds the <table> alone —
   padding that one would inset the table and misalign every column. */
.app-main .card-body.p-0 .dataTables_wrapper .dataTables_length,
.app-main .card-body.p-0 .dataTables_wrapper .dataTables_filter,
.app-main .card-body.p-0 .dataTables_wrapper .dataTables_info,
.app-main .card-body.p-0 .dataTables_wrapper .dataTables_paginate {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Vertical breathing room so the top controls don't collide with the card
   header's bottom border and the bottom controls don't touch the card
   footer. :first-child/:last-child rather than fixed classes, since the
   two dom strings in use order their rows differently. */
.app-main .card-body.p-0 .dataTables_wrapper > .row:first-child { padding-top: .85rem; }
.app-main .card-body.p-0 .dataTables_wrapper > .row:last-child  { padding-bottom: .85rem; }

/* Pagination — one uniform style for every table in the CRM.
   DataTables runs with the Bootstrap 5 integration (see admin/index.php),
   so its pager renders as ul.pagination > li.page-item > a.page-link —
   the same markup the logs module builds by hand (#logsPagination).
   Styling .pagination generically keeps them identical, and the explicit
   padding/font-size below also neutralizes size variants (.pagination-sm). */
.app-main .pagination { margin-bottom: 0; gap: 4px; }
.app-main .pagination .page-link {
  border-radius: var(--crm-r-sm) !important;
  border: 1px solid transparent;
  margin-left: 0;
  background: transparent;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 1.4;
  padding: 4px 10px;
  box-shadow: none !important;
  transition: all var(--crm-t);
}
.app-main .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  background: var(--crm-surface-2); border-color: var(--crm-border); color: var(--crm-ink);
}
.app-main .pagination .page-item.active .page-link {
  background: var(--crm-primary); border-color: var(--crm-primary); color: #fff;
}
.app-main .pagination .page-item.disabled .page-link,
.app-main .pagination .page-item.disabled .page-link:hover {
  background: transparent; border-color: transparent;
  color: var(--crm-faint); cursor: not-allowed;
}

[data-bs-theme="dark"] .app-main .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .app-main .dataTables_wrapper .dataTables_length select {
  background: var(--crm-surface-2); border-color: var(--crm-border); color: var(--crm-ink);
}

/* ══════════════════════════════════════════════════════════════════════════════
   18. TOAST
   ══════════════════════════════════════════════════════════════════════════════ */
.crm-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  min-width: 240px; max-width: 360px;
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-r-sm);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 11px;
  box-shadow: var(--crm-s3);
  border-left: 3px solid;
  font-size: 13.5px; font-weight: 500;
  color: var(--crm-ink);
  animation: toastIn .2s cubic-bezier(.4,0,.2,1);
  transition: opacity var(--crm-t), transform var(--crm-t);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px) translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   19. EMPTY STATES
   ══════════════════════════════════════════════════════════════════════════════ */
.app-main .crm-empty,
.app-main .text-center.text-muted.py-4,
.app-main .text-center.text-muted.py-5 { color: var(--crm-faint) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   20. PROGRESS BARS
   ══════════════════════════════════════════════════════════════════════════════ */
.progress { border-radius: 99px; overflow: hidden; background: var(--crm-border); height: 6px; }
.progress-bar { transition: width .8s cubic-bezier(.4,0,.2,1) .1s; border-radius: 99px; }

/* ══════════════════════════════════════════════════════════════════════════════
   21. DASHBOARD — KPI CARDS (flat, tinted icon chips)
   ══════════════════════════════════════════════════════════════════════════════ */
#kpiRow .kpi-card {
  display: flex; align-items: center; gap: 15px;
  background: var(--crm-surface); border-radius: var(--crm-r); padding: 18px 20px;
  box-shadow: var(--crm-s1);
  border: 1px solid var(--crm-border);
  transition: transform var(--crm-t), box-shadow var(--crm-t), border-color var(--crm-t);
  overflow: hidden;
}
#kpiRow a:hover .kpi-card {
  transform: translateY(-2px);
  box-shadow: var(--crm-s2);
  border-color: color-mix(in srgb, var(--crm-primary) 30%, var(--crm-border));
}

#kpiRow .kpi-icon {
  width: 46px; height: 46px; border-radius: var(--crm-r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}

#kpiRow .kpi-primary .kpi-icon { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
#kpiRow .kpi-success .kpi-icon { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
#kpiRow .kpi-warning .kpi-icon { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
#kpiRow .kpi-danger  .kpi-icon { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis); }

#kpiRow .kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--crm-ink); letter-spacing: -.02em; }
#kpiRow .kpi-label { font-size: 11.5px; font-weight: 600; color: var(--crm-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }
#kpiRow .kpi-delta { font-size: 11.5px; font-weight: 500; margin-top: 5px; }

/* ══════════════════════════════════════════════════════════════════════════════
   22. DASHBOARD — MODULE TILES
   ══════════════════════════════════════════════════════════════════════════════ */
.module-tile {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: var(--crm-r); height: 100%;
  transition: transform var(--crm-t), box-shadow var(--crm-t), border-color var(--crm-t);
  text-decoration: none;
}
.module-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--crm-s2);
  border-color: color-mix(in srgb, var(--crm-primary) 35%, var(--crm-border));
}
.module-tile-icon {
  width: 40px; height: 40px; border-radius: var(--crm-r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.module-tile-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--crm-ink); }
.module-tile-meta  { display: block; font-size: 11px; color: var(--crm-faint); margin-top: 1px; }
.module-tile-chevron { color: var(--crm-faint); font-size: 13px; transition: transform var(--crm-t), color var(--crm-t); margin-left: auto; }
.module-tile:hover .module-tile-chevron { color: var(--crm-accent-ink); transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════════════════
   23. DASHBOARD — HERO GREETING
   ══════════════════════════════════════════════════════════════════════════════ */
.dash-hero {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--crm-primary) 6%, var(--crm-surface)) 0%,
    var(--crm-surface) 65%);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-r);
  padding: 22px 26px;
}
.dash-hero-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--crm-accent-ink); margin-bottom: 4px;
}
.dash-hero-title {
  font-size: 1.4rem; font-weight: 700; color: var(--crm-ink);
  margin: 0 0 4px; letter-spacing: -.02em;
}
.dash-hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--crm-surface); border: 1px solid var(--crm-border);
  border-radius: 999px; padding: 5px 14px;
  font-size: 12.5px; font-weight: 500; color: var(--crm-ink);
}
.dash-hero-pill-divider { color: var(--crm-faint); }

/* ══════════════════════════════════════════════════════════════════════════════
   24. GUEST AVATAR
   ══════════════════════════════════════════════════════════════════════════════ */
.guest-initial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;
  background: var(--crm-primary); overflow: hidden;
}
.guest-initial.inactive { background: var(--crm-faint); }

/* ══════════════════════════════════════════════════════════════════════════════
   25. MOBILE RESPONSIVENESS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Reduce content padding on small screens ─────────────────────── */
@media (max-width: 767.98px) {
  .app-content { padding: 1rem .75rem; }
  .app-content-header h3 { font-size: 15px; }
}
@media (max-width: 575.98px) {
  .app-content { padding: .75rem .5rem; }
  .app-content-header { padding: .5rem 0; }
}

/* ── Horizontal scroll for dense card tables ─────────────────────── */
/* Targets .card-body.p-0 which is the pattern used for all data tables
   in this CRM (guests, users, roles, bookings). Allows horizontal panning
   on narrower screens before the Responsive extension hides columns. */
@media (max-width: 991.98px) {
  .app-main .card-body.p-0 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── DataTables: controls layout on mobile ───────────────────────── */
@media (max-width: 575.98px) {
  .app-main .dataTables_wrapper .dataTables_filter {
    text-align: left;
  }
  .app-main .dataTables_wrapper .dataTables_filter label {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .app-main .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0 !important;
  }
  .app-main .dataTables_wrapper .dataTables_info {
    text-align: center;
    margin-top: .35rem;
  }
  .app-main .dataTables_wrapper .dataTables_paginate {
    text-align: center;
    margin-top: .35rem;
  }
  .app-main .dataTables_wrapper .pagination {
    justify-content: center;
  }
  .app-main .pagination .page-link {
    padding: 3px 7px;
    font-size: 11.5px;
  }
}

/* ── DataTables Responsive child rows ───────────────────────────── */
/* Style the collapsed-column child rows that the Responsive extension
   inserts when columns are hidden at small breakpoints. */
.dtr-details { width: 100%; }
.dtr-details td { padding: .3rem 0; font-size: 12.5px; }
.dtr-title { color: var(--crm-muted); font-weight: 600; text-transform: uppercase;
             font-size: 10.5px; letter-spacing: .04em; width: 35%; }
.dtr-data  { color: var(--crm-ink); }
td.child   { background: var(--crm-surface-2) !important;
             border-bottom: 1px solid var(--crm-border) !important; }
[data-bs-theme="dark"] td.child { background: var(--crm-surface-2) !important; }

/* ── Action bar: filters stack under buttons on xs ───────────────── */
@media (max-width: 575.98px) {
  .d-flex.flex-wrap.gap-2.align-items-center.mb-3 > .ms-auto {
    width: 100%;
    margin-left: 0 !important;
  }
  .d-flex.flex-wrap.gap-2.align-items-center.mb-3 > .ms-auto > .form-select {
    width: 100% !important;
    margin-bottom: .25rem;
  }
  .d-flex.flex-wrap.gap-2.align-items-center.mb-3 > .ms-auto > .d-flex {
    width: 100%;
    flex-wrap: wrap;
  }
  .d-flex.flex-wrap.gap-2.align-items-center.mb-3 > .ms-auto > .d-flex > .form-select {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ── Bookings filter bar: date pickers on mobile ─────────────────── */
@media (max-width: 767.98px) {
  /* Let the flex-grow inputs wrap when there isn't enough room */
  .card-body .d-flex.flex-wrap.gap-3.align-items-end > div { flex-shrink: 1; }
}
@media (max-width: 575.98px) {
  .card-body .d-flex.flex-wrap.gap-3.align-items-end > div { width: 100%; }
  .card-body .d-flex.flex-wrap.gap-3.align-items-end .d-flex.gap-2 {
    flex-wrap: wrap;
  }
}

/* ── Modals: near-full-width with small margin on phones ─────────── */
@media (max-width: 575.98px) {
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    margin: .5rem auto;
    max-width: calc(100vw - 1rem);
  }
  .modal-content {
    border-radius: var(--crm-r-sm);
  }
  .modal-header { padding: .9rem 1rem; }
  .modal-body   { padding: 1rem; }
  .modal-footer { padding: .75rem 1rem; }
  .modal-body .row.g-3 > [class*="col-md"] { width: 100%; }
}

/* ── Toast: stretch to near-full-width on mobile ─────────────────── */
@media (max-width: 575.98px) {
  .crm-toast {
    left: 12px;
    right: 12px;
    bottom: 16px;
    max-width: none;
    min-width: 0;
  }
}

/* ── KPI / info-box widgets: compact on mobile ───────────────────── */
@media (max-width: 575.98px) {
  #kpiRow .kpi-card    { padding: 14px 16px; gap: 12px; }
  #kpiRow .kpi-icon    { width: 40px; height: 40px; font-size: 17px; }
  #kpiRow .kpi-value   { font-size: 22px; }
  #kpiRow .kpi-delta   { display: none; }

  .app-main .info-box  { padding: 14px 16px; }
  .app-main .info-box .info-box-icon   { width: 42px; height: 42px; font-size: 17px; }
  .app-main .info-box .info-box-number { font-size: 21px; }
}

/* ── Dashboard hero: compact on mobile ──────────────────────────── */
@media (max-width: 575.98px) {
  .dash-hero       { padding: 16px; }
  .dash-hero-title { font-size: 1.2rem; }
  .dash-hero-pill  { font-size: 11.5px; padding: 4px 10px; }
}

/* ── Module tiles: denser on mobile ─────────────────────────────── */
@media (max-width: 575.98px) {
  .module-tile { padding: 12px 14px; gap: 10px; }
  .module-tile-icon { width: 36px; height: 36px; font-size: 16px; }
}

/* ── Required form fields: consistent red asterisk marker ───────── */
.required-mark {
  color: var(--crm-danger);
  font-weight: 700;
  margin-left: 2px;
}

/* ── Sidebar: modules the current role can't access are shown
   locked/greyed instead of being silently omitted, so staff know
   the feature exists rather than assuming it's missing. ─────────── */
.sidebar-menu .nav-link.disabled {
  opacity: .45;
  pointer-events: none;
  user-select: none;
}