/* =====================================================================
   ServiceGeni — Global Theme System  ("Nova" design language)
   ---------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for brand colors, surfaces, radii and fonts.

   ▸ To re-theme the WHOLE app, change the values in the `:root` block
     marked "BRAND TOKENS" below. Every Nova component (sg-*) and the
     re-pointed legacy variables derive from these, so one edit cascades
     everywhere.

   ▸ Component classes are namespaced `sg-` so they never collide with
     Bootstrap / Soft UI. Layout stays Bootstrap-first & mobile-first.
   ===================================================================== */

/* Manrope — the Nova typeface. Imported here so ANY layout that links this
   single file gets the font automatically (no per-layout <link> needed). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------
   1. BRAND TOKENS  — change these to recolor the entire application
   --------------------------------------------------------------------- */
:root {
  /* Accent (purple) */
  --sg-accent:        #7c5cff;
  --sg-accent-strong: #6b46f8;
  --sg-accent-soft:   #9b7cff;
  --sg-accent-2:      #c08bff;            /* gradient end-stop */
  --sg-accent-rgb:    124, 92, 255;       /* drives rgba(var(--sg-accent-rgb), a) */
  --sg-on-accent:     #ffffff;            /* text on top of accent fills   */
  --sg-accent-grad:   linear-gradient(135deg, var(--sg-accent) 0%, var(--sg-accent-2) 100%);

  /* Status colors */
  --sg-pos:    #34d399;
  --sg-pos-rgb: 52, 211, 153;
  --sg-info:   #60a5fa;
  --sg-info-rgb: 96, 165, 250;
  --sg-warn:   #fbbf24;
  --sg-danger: #fb6f92;
  --sg-danger-rgb: 251, 111, 146;

  /* Shape */
  --sg-radius:    18px;
  --sg-radius-sm: 12px;
  --sg-radius-lg: 22px;
  --sg-radius-pill: 999px;

  /* Type */
  --sg-font: 'Manrope', 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Re-point legacy variables so old components follow the brand too. */
  --purple-primary: var(--sg-accent);
  --purple-glow:    var(--sg-accent-soft);
  --purple-soft:    var(--sg-accent-soft);

  /* Retire the old cyan brand: map the legacy --primary-* family (used across
     custom-style.css for icons, borders, shadows, pagination, hovers…) onto the
     purple accent so nothing renders cyan/blue anymore. Loaded after
     custom-style.css, so these win. */
  --primary-color:   var(--sg-accent);
  --primary-dark:    var(--sg-accent-strong);
  --primary-rgba-08: rgba(var(--sg-accent-rgb), .08);
  --primary-rgba-10: rgba(var(--sg-accent-rgb), .10);
  --primary-rgba-14: rgba(var(--sg-accent-rgb), .14);
  --primary-rgba-18: rgba(var(--sg-accent-rgb), .18);
  --primary-rgba-20: rgba(var(--sg-accent-rgb), .20);
  --primary-rgba-24: rgba(var(--sg-accent-rgb), .24);
  --primary-rgba-25: rgba(var(--sg-accent-rgb), .25);
  --primary-rgba-34: rgba(var(--sg-accent-rgb), .34);
  --primary-rgba-35: rgba(var(--sg-accent-rgb), .35);
  --primary-rgba-50: rgba(var(--sg-accent-rgb), .50);
  --primary-rgba-60: rgba(var(--sg-accent-rgb), .60);
}

/* ---------------------------------------------------------------------
   2. SURFACE TOKENS  — resolved per color-mode (dark is the default)
   --------------------------------------------------------------------- */
body.dark-mode,
.dark-mode,
html.dark-mode {
  --sg-bg:        #0e1014;
  --sg-surface:   #171a21;
  --sg-surface-2: #1d212a;
  --sg-line:      #242a35;
  --sg-ink:       #f3f6f8;
  --sg-muted:     #8b94a3;
  --sg-elev:      0 18px 40px -18px rgba(0, 0, 0, .65);
}

body:not(.dark-mode) {
  --sg-bg:        #f4f0ff;
  --sg-surface:   #ffffff;
  --sg-surface-2: #f7f5ff;
  --sg-line:      rgba(var(--sg-accent-rgb), .18);
  --sg-ink:       #344767;
  --sg-muted:     #67748e;
  --sg-elev:      0 12px 30px rgba(69, 44, 128, .12);

  /* keep the legacy light-mode purple aliases in sync */
  --lm-purple:        var(--sg-accent);
  --lm-purple-strong: var(--sg-accent-strong);
  --lm-purple-soft:   var(--sg-accent-soft);
}

/* ---------------------------------------------------------------------
   3. GLOBAL TYPE  — Manrope across the app (Soft UI metrics preserved)
   --------------------------------------------------------------------- */
body {
  font-family: var(--sg-font);
}
h1, h2, h3, h4, h5, h6,
.sg, .sg * {
  font-family: var(--sg-font);
}

/* =====================================================================
   4. COMPONENTS  (Nova design language — Bootstrap-friendly, mobile-first)
   ===================================================================== */

/* ---- 4.1 Page header / command-bar title row ---------------------- */
.sg-pageheader {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.sg-pageheader__titles { min-width: 0; }
.sg-pageheader__title {
  font-size: clamp(22px, 4.5vw, 32px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0;
  color: var(--sg-ink);
}
.sg-pageheader__sub {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sg-muted);
  margin: 5px 0 0;
}
.sg-pageheader__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
@media (min-width: 768px) {
  .sg-pageheader {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .sg-pageheader__actions { justify-content: flex-end; }
}

/* ---- 4.2 Chips & CTA ---------------------------------------------- */
.sg-chip {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--sg-muted);
  background: var(--sg-surface);
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  padding: 8px 13px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.sg-chip:hover { color: var(--sg-ink); }
.sg-chip.is-on {
  color: var(--sg-on-accent);
  background: var(--sg-accent);
  border-color: var(--sg-accent);
}
.sg-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--sg-on-accent);
  background: var(--sg-accent-grad);
  border: 0;
  border-radius: 11px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 22px -10px var(--sg-accent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sg-cta:hover {
  color: var(--sg-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px var(--sg-accent);
}

/* ---- 4.3 Surface card --------------------------------------------- */
.sg-card {
  background: var(--sg-surface);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-elev);
}
.sg-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--sg-line);
}
.sg-card__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin: 0;
  color: var(--sg-ink);
}
.sg-card__body { padding: 18px; }

/* ---- 4.4 Bento grid: hero chart + 2x2 tile grid -------------------- */
.sg-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .sg-bento { grid-template-columns: repeat(2, 1fr); }
  .sg-bento__hero { grid-column: 1 / -1; }   /* hero full-width; 4 tiles 2x2 below */
}
@media (min-width: 900px) {
  /* 900px (not 992) so laptops at 125–150% display scaling still get the
     compact desktop layout (hero + small 2x2 tiles) instead of the big
     2-column medium layout. */
  .sg-bento { grid-template-columns: 2fr 1fr 1fr; }     /* hero + two tile columns */
  .sg-bento__hero { grid-column: 1; grid-row: 1 / 3; }  /* hero spans both rows; the 4 tiles form a 2x2 on the right */
}
.sg-bento__wide { grid-column: 1 / -1; }
/* hero card fills its cell; the chart grows to fill the height cleanly */
.sg-bento__hero { display: flex; }
.sg-bento__hero > .sg-card__body { display: flex; flex-direction: column; width: 100%; }

/* ---- 4.5 Stat tile ------------------------------------------------- */
.sg-stat {
  position: relative;
  background: var(--sg-surface);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-elev);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
.sg-stat__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: capitalize;
  color: var(--sg-muted);
  margin: 0;
}
.sg-stat__num {
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.05;
  margin: 8px 0 4px;
  color: var(--sg-ink);
}
.sg-stat__meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--sg-muted);
  margin: 0;
}
.sg-stat__chart {
  position: absolute;
  top: 46px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.sg-stat--feature {
  background: var(--sg-accent-grad);
  border: 0;
  color: var(--sg-on-accent);
  box-shadow: 0 14px 34px -16px var(--sg-accent);
}
/* Feature (gradient) tile: force solid white text so it stays readable over
   the purple gradient, defeating Soft UI's dark/light `p`,`small` overrides. */
.sg-stat--feature .sg-stat__label,
.sg-stat--feature .sg-stat__num,
.sg-stat--feature .sg-stat__meta,
.sg-stat--feature p,
.sg-stat--feature span,
.sg-stat--feature .sg-stat__num span { color: var(--sg-on-accent) !important; }
.sg-stat__bar {
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .28);
  margin-top: 12px;
  overflow: hidden;
}
.sg-stat__bar > span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: #fff;
}

/* trend pill */
.sg-trend {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--sg-radius-pill);
  white-space: nowrap;
}
.sg-trend.up   { color: var(--sg-pos);    background: rgba(var(--sg-pos-rgb), .14); }
.sg-trend.down { color: var(--sg-danger); background: rgba(var(--sg-danger-rgb), .14); }

/* Legacy .text-success / .text-danger trend markers (kept for the date-range
   JS that re-injects them) rendered as Nova pills inside stat tiles/hero. */
.sg-stat .text-success,
.sg-bento__hero .text-success,
.sg-stat .text-danger,
.sg-bento__hero .text-danger {
  display: inline-block;
  font-weight: 800;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: var(--sg-radius-pill);
}
.sg-stat .text-success,
.sg-bento__hero .text-success { color: var(--sg-pos) !important;    background: rgba(var(--sg-pos-rgb), .14); }
.sg-stat .text-danger,
.sg-bento__hero .text-danger  { color: var(--sg-danger) !important; background: rgba(var(--sg-danger-rgb), .14); }
.sg-stat--feature .text-success,
.sg-stat--feature .text-danger { color: #fff !important; background: rgba(255, 255, 255, .20); }

/* ---- 4.6 Funnel ribbon -------------------------------------------- */
.sg-funnel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--sg-surface);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-elev);
  padding: 18px 22px;
}
.sg-funnel__stage { flex: 1; min-width: 0; }
.sg-funnel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sg-funnel__label { font-size: 13px; font-weight: 800; color: var(--sg-muted); }
.sg-funnel__val   { font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--sg-ink); }
.sg-funnel__track {
  height: 10px;
  border-radius: 6px;
  background: var(--sg-surface-2);
  overflow: hidden;
}
.sg-funnel__fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--sg-accent);
}
.sg-funnel__conv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--sg-muted);
  font-size: 12.5px;
  font-weight: 800;
}
.sg-funnel__conv b { color: var(--sg-accent); }
.sg-funnel__arrow { transform: rotate(90deg); opacity: .5; }
@media (min-width: 992px) {
  .sg-funnel { flex-direction: row; align-items: center; gap: 0; }
  .sg-funnel__conv { flex: 0 0 78px; flex-direction: column; gap: 2px; }
  .sg-funnel__arrow { transform: none; }
}

/* ---- 4.7 Badges (call outcome / status) --------------------------- */
.sg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.sg-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 7px;
}
.sg-badge.is-done   { color: var(--sg-pos);    background: rgba(var(--sg-pos-rgb), .14); }
.sg-badge.is-booked { color: var(--sg-on-accent); background: var(--sg-accent); }
.sg-badge.is-qual   { color: var(--sg-info);   background: rgba(var(--sg-info-rgb), .16); }
.sg-badge.is-miss   { color: var(--sg-muted);  background: var(--sg-surface-2); }
.sg-badge.is-warn   { color: var(--sg-warn);   background: rgba(251, 191, 36, .16); }

/* ---- 4.8 Ghost / toolbar buttons ---------------------------------- */
.sg-ghost {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sg-muted);
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.sg-ghost:hover { color: var(--sg-ink); border-color: var(--sg-accent); }

/* ---- 4.9 Avatar / monogram ---------------------------------------- */
.sg-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 34px;
}

/* ---- 4.10 Hero area chart card ------------------------------------ */
.sg-hero-num {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1;
  color: var(--sg-ink);
}
.sg-hero-swatch {
  width: 11px; height: 11px;
  border-radius: 3px;
  background: var(--sg-accent);
  display: inline-block;
}
.sg-hero-chartwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 230px;
  margin-top: 10px;
}
@media (max-width: 575.98px) {
  .sg-hero-chartwrap { min-height: 180px; }
}

/* ---- Month / Week / Day segmented toggle (hero chart range) -------- */
.sg-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  border-radius: 11px;
  padding: 4px;
  flex: 0 0 auto;
}
.sg-toggle__btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--sg-muted);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.sg-toggle__btn:hover { color: var(--sg-ink); }
.sg-toggle__btn.is-on { color: var(--sg-on-accent); background: var(--sg-accent); }

/* =====================================================================
   8. Table card border (drop the purple glow) + purple pagination
   ===================================================================== */
/* Remove the purple border/glow from the call-log cards */
body.dark-mode .page-dashboard .card.glass-effect,
body.dark-mode .page-dashboard .card.glass-effect:hover {
  border: 1px solid var(--sg-line) !important;
  border-color: var(--sg-line) !important;
  box-shadow: var(--sg-elev) !important;
}
body.dark-mode .page-dashboard .card.glass-effect::before,
body.dark-mode .page-dashboard .card.glass-effect:hover::before { content: none !important; }

/* DataTables / Bootstrap pagination: active page = purple (not blue/cyan).
   Selectors are extra-specific to beat custom-style.css's
   `.dark-mode .pagination .page-item.active .page-link { background: var(--primary-color) }`. */
body.dark-mode .page-dashboard .pagination .page-item.active .page-link,
body.dark-mode .page-dashboard .pagination .page-item.active > .page-link,
body:not(.dark-mode) .page-dashboard .pagination .page-item.active .page-link,
.page-dashboard .dataTables_paginate .paginate_button.current,
.page-dashboard .dataTables_paginate .paginate_button.current:hover {
  background: var(--sg-accent) !important;
  background-color: var(--sg-accent) !important;
  background-image: none !important;
  border-color: var(--sg-accent) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(var(--sg-accent-rgb), .45) !important;
}
.page-dashboard .dataTables_paginate .paginate_button:hover,
.page-dashboard .page-item .page-link:hover {
  color: var(--sg-accent) !important;
  border-color: var(--sg-accent) !important;
}

/* =====================================================================
   5. COMMAND-BAR  — restyle the shared top navbar into the Nova bar
   (purely visual; structure & functionality untouched)
   ===================================================================== */
.navbar-main.sg-commandbar {
  background: var(--sg-bg) !important;
  border: 1px solid transparent !important;
  border-radius: var(--sg-radius) !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
/* Blend the command bar into the page — same bg as the body, no border/shadow,
   so it doesn't read as a separate surface. Beats the global dark rule
   `body.dark-mode .navbar-main { background: var(--dark-surface); border-color }`. */
body.dark-mode .navbar-main.sg-commandbar {
  background: var(--sg-bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Light mode: blend in too — transparent so the page's white→lavender gradient
   shows straight through instead of a solid lavender band. */
body:not(.dark-mode) .navbar-main.sg-commandbar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.sg-commandbar .nav-link { color: var(--sg-ink) !important; }
.sg-commandbar .sg-locchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink);
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  border-radius: 11px;
  padding: 7px 12px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sg-commandbar .sg-locchip i { color: var(--sg-accent); }

/* =====================================================================
   6. DARK-MODE surfaces — flat, matching the standalone Nova design
   ===================================================================== */
body.dark-mode .sg-card,
body.dark-mode .sg-stat:not(.sg-stat--feature),
body.dark-mode .sg-funnel {
  background: var(--sg-surface);
}

/* =====================================================================
   7. Dashboard "Recent calls" table (#signals) — ALL styling lives here
   (not inline in dashboard.html, which keeps reverting). Column narrowing
   uses nth-child for the User-role layout, so it needs NO classes in the
   template: Caller(1) From(2) Date(3) Duration(4) Service(5) Appt(6)
   Vehicle(7) Qualified(8) Scheduled(9) Attended(10).
   ===================================================================== */
.page-dashboard #signals,
.page-dashboard #ringcentralSignals { table-layout: auto !important; }
.page-dashboard #signals thead th,
.page-dashboard #ringcentralSignals thead th {
  text-align: left !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--sg-muted) !important;
  padding: 13px 16px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  border-bottom: 1px solid var(--sg-line) !important;
}
.page-dashboard #signals thead th i,
.page-dashboard #ringcentralSignals thead th i { display: none !important; }
.page-dashboard #signals tbody td,
.page-dashboard #ringcentralSignals tbody td {
  text-align: left !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--sg-line) !important;
  font-size: 13px;
}
/* short columns shrink to content, never wrap (fixes one-letter-per-line) */
.page-dashboard #signals thead th:nth-child(4),
.page-dashboard #signals tbody td:nth-child(4),
.page-dashboard #signals thead th:nth-child(8),
.page-dashboard #signals tbody td:nth-child(8),
.page-dashboard #signals thead th:nth-child(9),
.page-dashboard #signals tbody td:nth-child(9),
.page-dashboard #signals thead th:nth-child(10),
.page-dashboard #signals tbody td:nth-child(10) {
  width: 1px;
  white-space: nowrap !important;
  word-break: keep-all !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.page-dashboard #signals tbody td:nth-child(9) .text-center,
.page-dashboard #signals tbody td:nth-child(10) .text-center { text-align: center !important; }
/* widen both call-log tables to the card's inner edges — card width unchanged */
.page-dashboard .table-responsive:has(#signals),
.page-dashboard .table-responsive:has(#ringcentralSignals) {
  margin-left: -1.5rem !important;
  margin-right: -1.5rem !important;
  width: calc(100% + 3rem) !important;
}

/* =====================================================================
   9. GLOBAL SURFACE MAPPING  (applies the Nova theme to EVERY page)
   ---------------------------------------------------------------------
   Maps Soft UI / Bootstrap structural classes (.card, .btn, .form-*,
   aside.sidenav, .modal …) onto the Nova palette. Previously this lived
   inline only in layouts/base.html, so pages on other layouts (admin,
   auth, student, technician) stayed unthemed. It now lives in this one
   shared file: any layout that links servicegeni-theme.css is fully
   themed. Defines the legacy --dark-* vars the rules below depend on.
   ===================================================================== */
:root {
  --glass-bg: rgba(255, 255, 255, 0.35);
  --dark-bg-start: #0e1014;
  --dark-bg-end: #0e1014;
  --dark-glow: rgba(155, 107, 255, 0);
  --dark-surface: #171a21;
  --dark-surface-alt: #1d212a;
  --dark-border: #242a35;
  --dark-text: #f3f6f8;
  --dark-muted: #8b94a3;
  --dark-accent-1: #7928ca;
  --dark-accent-2: #ff0080;
}

body.dark-mode {
  --glass-bg: rgba(18, 18, 18, 0.4);
  --dark-accent-1: var(--purple-primary);
  --dark-accent-2: var(--purple-glow);
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--sg-font);
  background:
    radial-gradient(circle at 90% 50%, rgba(124, 92, 255, 0.15) 0%, rgba(124, 92, 255, 0) 50%),
    linear-gradient(to bottom right, #ffffff, #f4f0ff);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: none !important;
  color: #000000;
  min-height: 100%;
  position: relative;
}

body.dark-mode {
  /* !important defeats Soft UI's `.bg-gray-100 { background-color:#f8f9fa !important }`. */
  background: #0e1014 !important;
  color: var(--dark-text);
}

body.dark-mode .card,
body.dark-mode .navbar-main,
body.dark-mode .dropdown-menu,
body.dark-mode .table,
body.dark-mode .list-group-item,
body.dark-mode .modal-content {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer,
body.dark-mode .navbar,
body.dark-mode .input-group-text {
  background: transparent !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .text-dark,
body.dark-mode .text-body {
  color: var(--dark-text) !important;
}

body.dark-mode .text-secondary,
body.dark-mode .text-muted,
body.dark-mode p,
body.dark-mode small {
  color: var(--dark-muted) !important;
}

body.dark-mode .bg-gradient-info,
body.dark-mode .bg-gradient-primary {
  background-image: linear-gradient(310deg, var(--dark-accent-1) 0%, var(--dark-accent-2) 100%) !important;
  color: #fff !important;
}

body.dark-mode .btn-outline-info,
body.dark-mode .btn-outline-primary {
  border-color: rgba(183, 113, 255, 0.7) !important;
  color: #caa5ff !important;
}

body.dark-mode .btn-outline-info:hover,
body.dark-mode .btn-outline-primary:hover {
  background: rgba(121, 40, 202, 0.2) !important;
  color: #fff !important;
}

body.dark-mode .btn,
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-info,
body.dark-mode .btn-primary,
body.dark-mode .btn.bg-gradient-primary,
body.dark-mode .btn.bg-gradient-info {
  background:
    linear-gradient(180deg, rgba(124, 92, 255, 0.15), rgba(124, 92, 255, 0.03)),
    rgba(18, 23, 42, 0.8) !important;
  border: 1px solid rgba(124, 92, 255, 0.4) !important;
  color: #cbbdff !important;
  border-radius: 12px !important;
  padding: 0.5rem 1rem !important;
  box-shadow: 0 0 15px rgba(124, 92, 255, 0.25);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.dark-mode .btn::before,
body.dark-mode .btn-outline-primary::before,
body.dark-mode .btn-outline-info::before,
body.dark-mode .btn-primary::before,
body.dark-mode .btn.bg-gradient-primary::before,
body.dark-mode .btn.bg-gradient-info::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 95% at 50% -18%, rgba(155, 124, 255, 0.5) 0%, rgba(155, 124, 255, 0.2) 35%, rgba(155, 124, 255, 0.06) 58%, rgba(155, 124, 255, 0) 80%);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.dark-mode .btn-primary::before,
body.dark-mode .btn.bg-gradient-primary::before,
body.dark-mode .btn.bg-gradient-info::before {
  background: radial-gradient(140% 100% at 50% -16%, rgba(183, 156, 255, 0.58) 0%, rgba(183, 156, 255, 0.24) 34%, rgba(183, 156, 255, 0.08) 56%, rgba(183, 156, 255, 0) 80%);
}

body.dark-mode .btn>* {
  position: relative;
  z-index: 1;
}

body.dark-mode .btn:hover,
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-info:hover,
body.dark-mode .btn-primary:hover,
body.dark-mode .btn.bg-gradient-primary:hover,
body.dark-mode .btn.bg-gradient-info:hover {
  border-color: rgba(155, 124, 255, 0.7) !important;
  box-shadow: 0 0 20px rgba(124, 92, 255, 0.32);
  transform: translateY(-2px);
  color: #e4d9ff !important;
  background:
    linear-gradient(180deg, rgba(124, 92, 255, 0.18), rgba(124, 92, 255, 0.05)),
    rgba(18, 23, 42, 0.82) !important;
}

body.dark-mode .btn:hover::before,
body.dark-mode .btn-outline-primary:hover::before,
body.dark-mode .btn-outline-info:hover::before,
body.dark-mode .btn-primary:hover::before,
body.dark-mode .btn.bg-gradient-primary:hover::before,
body.dark-mode .btn.bg-gradient-info:hover::before {
  opacity: 1;
  transform: scale(1.03);
}

body.dark-mode .btn-primary,
body.dark-mode .btn.bg-gradient-primary,
body.dark-mode .btn.bg-gradient-info {
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.32);
}

body.dark-mode .btn:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode .form-check-input:focus {
  border-color: var(--purple-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.16), 0 0 15px rgba(124, 92, 255, 0.25) !important;
}

/* Sidebar (light) */
aside.sidenav {
  background-color: #ffffff !important;
  color: #344767 !important;
  z-index: 1030 !important;
}

aside.sidenav a.nav-link {
  color: #344767 !important;
}

aside.sidenav .nav-link-text {
  color: #344767 !important;
}

aside.sidenav .sidenav-normal,
aside.sidenav .sidenav-normal span,
aside.sidenav .sidenav-normal .text-sm {
  color: #67748e !important;
}

aside.sidenav a.nav-link.active {
  background-color: rgba(124, 92, 255, 0.1) !important;
}

aside.sidenav a.nav-link.active .nav-link-text {
  color: #5a39d9 !important;
  font-weight: 600;
}

aside.sidenav a.nav-link.active .sidenav-normal,
aside.sidenav a.nav-link.active .sidenav-normal span,
aside.sidenav a.nav-link.active .sidenav-normal .text-sm {
  color: #5a39d9 !important;
  font-weight: 600;
}

aside.sidenav .text-secondary {
  color: #67748e !important;
}

aside.sidenav hr.horizontal {
  border-color: rgba(124, 92, 255, 0.2) !important;
}

/* Light mode: ensure all body text is visible */
body:not(.dark-mode) .text-body,
body:not(.dark-mode) .nav-link.text-body {
  color: #344767 !important;
}

body:not(.dark-mode) .form-label,
body:not(.dark-mode) label {
  color: #344767 !important;
}

body:not(.dark-mode) .form-control {
  color: #344767 !important;
  background-color: #ffffff !important;
  border-color: rgba(124, 92, 255, 0.25) !important;
}

body:not(.dark-mode) .form-select {
  color: #344767 !important;
  background-color: #ffffff !important;
  border-color: rgba(124, 92, 255, 0.25) !important;
}

body:not(.dark-mode) .input-group-text {
  color: #344767 !important;
  background-color: #f8f6ff !important;
  border-color: rgba(124, 92, 255, 0.25) !important;
}

body:not(.dark-mode) .sidenav-toggler-line {
  background-color: #344767 !important;
}

body:not(.dark-mode) .navbar .nav-link .d-sm-inline {
  color: #344767 !important;
}

body.dark-mode aside.sidenav,
aside.sidenav.dark-mode {
  background: #171a21 !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode aside.sidenav a.nav-link,
aside.sidenav.dark-mode a.nav-link {
  color: var(--dark-muted) !important;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  background: transparent !important;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.2s ease, color 0.2s ease;
}

body.dark-mode aside.sidenav .nav-link-text,
aside.sidenav.dark-mode .nav-link-text {
  color: var(--dark-muted) !important;
}

body.dark-mode aside.sidenav .sidenav-normal,
body.dark-mode aside.sidenav .sidenav-normal span,
body.dark-mode aside.sidenav .sidenav-normal .text-sm,
aside.sidenav.dark-mode .sidenav-normal,
aside.sidenav.dark-mode .sidenav-normal span,
aside.sidenav.dark-mode .sidenav-normal .text-sm {
  color: var(--dark-muted) !important;
}

body.dark-mode aside.sidenav a.nav-link::before,
aside.sidenav.dark-mode a.nav-link::before {
  content: none;
}

body.dark-mode aside.sidenav a.nav-link>*,
aside.sidenav.dark-mode a.nav-link>* {
  position: relative;
  z-index: 1;
}

body.dark-mode aside.sidenav a.nav-link:hover,
aside.sidenav.dark-mode a.nav-link:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e5dbff !important;
}

body.dark-mode aside.sidenav a.nav-link.active,
aside.sidenav.dark-mode a.nav-link.active {
  background: var(--sg-accent-grad, linear-gradient(135deg, #7c5cff 0%, #c08bff 100%)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px -10px rgba(124, 92, 255, 0.6) !important;
}

body.dark-mode aside.sidenav a.nav-link.active .nav-link-text,
aside.sidenav.dark-mode a.nav-link.active .nav-link-text {
  color: #ffffff !important;
}

body.dark-mode aside.sidenav a.nav-link.active .sidenav-normal,
body.dark-mode aside.sidenav a.nav-link.active .sidenav-normal span,
aside.sidenav.dark-mode a.nav-link.active .sidenav-normal,
aside.sidenav.dark-mode a.nav-link.active .sidenav-normal span {
  color: #ffffff !important;
}

body.dark-mode aside.sidenav a.nav-link .icon,
aside.sidenav.dark-mode a.nav-link .icon {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #c6b8f4 !important;
}

body.dark-mode aside.sidenav a.nav-link.active .icon,
aside.sidenav.dark-mode a.nav-link.active .icon,
body.dark-mode .sidenav[data-color="primary"] .navbar-nav>.nav-item>.nav-link.active .icon,
body.dark-mode .sidenav[data-color="info"] .navbar-nav>.nav-item>.nav-link.active .icon {
  background-image: linear-gradient(310deg, var(--dark-accent-1), var(--dark-accent-2)) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  aside.sidenav.dark-mode {
    background-color: #171a21 !important;
    color: var(--dark-text) !important;
  }

  aside.sidenav {
    background-color: #ffffff !important;
    color: #344767 !important;
  }
}

.modal {
  position: fixed !important;
  z-index: 1050 !important;
}

.modal-backdrop {
  z-index: 1040 !important;
}

/* =====================================================================
   10. GLOBAL NOVA DATA TABLES  — unify every data table to the dashboard look
   ---------------------------------------------------------------------
   Brings ALL data tables app-wide in line with the dashboard's call-log
   tables: clean uppercase muted headers (no icons), thin row separators,
   flat rows (no zebra striping), subtle hover. Scoped to .main-content so
   it only touches page content (not the auth screens). VISUAL ONLY — it
   deliberately does NOT set text-align, so numeric / centered columns keep
   their intended alignment (e.g. right-aligned money on the reporting
   tables). The dashboard's own #signals / #ringcentralSignals keep their
   more-specific ID-scoped rules, so they are unaffected. Covers the custom
   admin `.rc-table` too. High specificity + !important so it wins over the
   per-page table CSS (reporting-table, rc-table, table-glass, …).
   ===================================================================== */
body .main-content table.table:not(.expand-details-table) > thead > tr > th,
body .main-content table.rc-table > thead > tr > th {
  text-transform: uppercase !important;
  letter-spacing: .05em;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: var(--sg-muted) !important;
  /* opaque card surface (not transparent) so sticky headers in scrollable
     tables, e.g. the reporting tables, don't show rows through them */
  background: var(--sg-surface) !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--sg-line) !important;
  border-top: 0 !important;
  opacity: 1 !important;
  vertical-align: middle;
}
body .main-content table.table:not(.expand-details-table) > thead > tr > th i,
body .main-content table.rc-table > thead > tr > th i { display: none !important; }

body .main-content table.table:not(.expand-details-table) > tbody > tr > td,
body .main-content table.rc-table > tbody > tr > td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--sg-line) !important;
  border-top: 0 !important;
  vertical-align: middle;
  font-size: 13px;
  color: var(--sg-ink);
}

/* flatten zebra striping so striped tables match the flat dashboard rows */
body .main-content table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: transparent !important;
}

/* subtle row hover (works in both light & dark via tokens) */
body .main-content table.table:not(.expand-details-table) > tbody > tr:hover > td,
body .main-content table.rc-table > tbody > tr:hover > td {
  background: var(--sg-surface-2) !important;
}

/* drop the final row's separator for a clean card edge */
body .main-content table.table:not(.expand-details-table) > tbody > tr:last-child > td,
body .main-content table.rc-table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

/* Neutralize hardcoded light surfaces inside dark content (e.g. poshub's
   `card-header bg-white`) so they don't punch a white hole in dark mode. */
body.dark-mode .main-content .card-header.bg-white,
body.dark-mode .main-content .card.bg-white {
  background-color: transparent !important;
}

/* =====================================================================
   11. RESPONSIVE HARDENING  — mobile-first polish for every screen
   ---------------------------------------------------------------------
   Durable, additive rules so pages, cards, graphs and tables adapt
   cleanly from phones → tablets → desktops. Single source (here) so it
   applies app-wide. Uses `overflow-x: clip` (not hidden) so it never
   breaks position:sticky headers/navbars.
   ===================================================================== */

/* 1) Never let a page scroll sideways. clip = no scroll container created. */
.main-content { overflow-x: clip; }

/* 2) Charts / canvases never exceed their container (graphs stay fluid). */
.main-content canvas { max-width: 100% !important; }
.chart-wrap { position: relative; width: 100%; }
/* keep the hero area chart from collapsing on small screens */
@media (max-width: 575.98px) {
  .sg-hero-chartwrap { min-height: 200px; }
}

/* 3) The call-log tables use edge-to-edge negative margins on desktop,
      which overflow on phones. Neutralize below lg — the tables keep
      their own horizontal scroll via .table-responsive. */
@media (max-width: 991.98px) {
  .page-dashboard .table-responsive:has(#signals),
  .page-dashboard .table-responsive:has(#ringcentralSignals) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* 4) Make sure every data table can scroll on narrow screens even if a
      template forgot the wrapper, without squashing columns. */
.main-content .table-responsive { -webkit-overflow-scrolling: touch; }

/* 5) Tighter spacing + sensible wrapping on phones. */
@media (max-width: 575.98px) {
  .main-content > .container-fluid,
  .main-content > .container { padding-left: .75rem !important; padding-right: .75rem !important; }
  .card > .card-body { padding: 1rem !important; }
  .sg-card__body { padding: 16px !important; }
  .sg-stat { padding: 16px !important; }
  .sg-funnel { padding: 16px !important; }
  /* command bar wraps its chips instead of overflowing the row */
  .navbar-main.sg-commandbar .container-fluid { flex-wrap: wrap; row-gap: 8px; }
  /* rein in oversized titles */
  .sg-pageheader__title { font-size: clamp(20px, 6.5vw, 28px) !important; }
}

/* 6) Segmented toggles / chip groups wrap instead of overflowing. */
@media (max-width: 575.98px) {
  .sg-toggle { flex-wrap: wrap; }
  .sg-pageheader__actions { width: 100%; }
}

/* 7) Stat tiles: when the bento stacks (below lg) tiles shrink to their text
      height, and the absolutely-positioned donut + sparkline (top:46px, ~76px
      tall → ends ~122px) get clipped by the tile's overflow:hidden. Give the
      stacked tiles enough height so the mini-charts always fit inside. */
@media (max-width: 899.98px) {
  .page-dashboard .sg-stat { min-height: 132px; }
}

/* 8) "Avg. Talk Time" shows a duration ("2m 29s") — longer than the single-
      number tiles, and the 3-col tiles are narrow (their width = viewport minus
      the sidebar, so a viewport media query can't tell). Keep this value a notch
      smaller than the counts at EVERY width so it always fits the tile. */
.page-dashboard #heroAvgNum { font-size: clamp(22px, 3.2vw, 34px) !important; }