/* ===============================================================
   dashboard.css — Modern Responsive Redesign · Click2Call Panel

   SIDEBAR BEHAVIOUR: Always fixed on the LEFT on ALL screen sizes.
   modernizr.css hides the sidebar at <480px — we override that here.

   Breakpoints:
     Mobile  : < 576px   → cards single column, sidebar 52px
     Mobile+ : 576–767px → cards 2 columns,     sidebar 52px
     Tablet  : 768–1024px→ cards 2 columns,     sidebar 60px
     Desktop : >1024px   → cards 3+ columns,    sidebar 60px
   =============================================================== */

/* ---------------------------------------------------------------
   CSS Custom Properties
--------------------------------------------------------------- */
:root {
  --sidebar-w-desktop : 60px;
  --sidebar-w-mobile  : 52px;
  --header-h          : 56px;
  --c-sidebar         : #0f172a;
  --c-header          : #1e293b;
  --c-body-bg         : #f0f4f8;
  --c-text-muted      : #94a3b8;
  --c-white           : #ffffff;
  --radius-card       : 16px;
  --radius-icon       : 12px;
  --shadow-card       : 0 2px 20px rgba(0,0,0,0.08);
  --shadow-hover      : 0 10px 36px rgba(0,0,0,0.16);
  --ease              : cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------
   Base
--------------------------------------------------------------- */
html, body {
  overflow-x: hidden;
  background-color: var(--c-body-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
               Ubuntu, Cantarell, 'Open Sans', sans-serif;
}

/* ---------------------------------------------------------------
   TOP NAVBAR
--------------------------------------------------------------- */
.navbar.navbar-dark.bg-dark {
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%) !important;
  height: var(--header-h);
  min-height: var(--header-h);
  padding: 0 16px;
  box-shadow: 0 1px 12px rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.navbar-brand {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px;
  color: #f1f5f9 !important;
}

.back_btn {
  color: #64748b !important;
  font-size: 15px;
  transition: color 0.2s;
}
.back_btn:hover { color: #cbd5e1 !important; }

/* Nav links */
.navbar-nav .nav-link {
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  padding: 4px 8px !important;
  transition: color 0.2s;
}
.navbar-nav .nav-link:hover { color: #f1f5f9 !important; }
.navbar-nav .dropdown-toggle { color: #cbd5e1 !important; }

/* Balance chips */
#balance, #fs, #fe {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  font-size: 11.5px;
  color: #94a3b8 !important;
}

/* ---------------------------------------------------------------
   NAVBAR DROPDOWN — Dark theme, proper z-index, no clipping
--------------------------------------------------------------- */

/* Ensure the dropdown sits above the sidebar (z-index 1030)
   and any other fixed-position elements. */
.navbar-nav .dropdown {
  position: static;   /* let the menu inherit stacking from the navbar */
}

.navbar-nav .dropdown-menu,
.dropdown-menu.common-font {
  /* Dark navy background matching the overall UI */
  background: #1a2744 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.30),
    0 12px 40px rgba(0,0,0,0.55) !important;
  padding: 6px !important;
  min-width: 210px !important;

  /* Lift well above navbar (1030) and sidebar (1030) */
  z-index: 1055 !important;

  /* Smooth appearance */
  animation: dropdownFadeIn 0.18s ease;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Individual items */
.navbar-nav .dropdown-menu .dropdown-item,
.dropdown-menu.common-font .dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500;
  padding: 10px 14px !important;
  color: #cbd5e1 !important;
  background: transparent !important;
  transition: background 0.16s ease, color 0.16s ease;
  line-height: 1.4;
  white-space: normal;
}

.navbar-nav .dropdown-menu .dropdown-item i.fa,
.dropdown-menu.common-font .dropdown-item i.fa {
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.75;
  flex-shrink: 0;
}

/* Hover / focus state */
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus,
.dropdown-menu.common-font .dropdown-item:hover,
.dropdown-menu.common-font .dropdown-item:focus {
  background: rgba(99,102,241,0.18) !important;
  color: #ffffff !important;
}

.navbar-nav .dropdown-menu .dropdown-item:hover i.fa,
.dropdown-menu.common-font .dropdown-item:hover i.fa {
  opacity: 1;
}

/* Hairline separator between items */
.navbar-nav .dropdown-menu .dropdown-item + .dropdown-item,
.dropdown-menu.common-font .dropdown-item + .dropdown-item {
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Special colour for the Logout item */
.navbar-nav .dropdown-menu .dropdown-item[href="/logout"],
.dropdown-menu.common-font .dropdown-item[href="/logout"] {
  color: #f87171 !important;
}
.navbar-nav .dropdown-menu .dropdown-item[href="/logout"]:hover,
.dropdown-menu.common-font .dropdown-item[href="/logout"]:hover {
  background: rgba(248,113,113,0.15) !important;
  color: #fca5a5 !important;
}

/* ---------------------------------------------------------------
   SIDEBAR  — Always fixed left, icon-only strip
   Override modernizr.css which collapses sidebar on <480px.
--------------------------------------------------------------- */

/* Desktop (≥480px via modernizr.css): sidebar is 60px, already fixed */
@media (min-width: 480px) {
  nav.main-menu {
    background: linear-gradient(180deg, #0f172a 0%, #131f32 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.05);
    box-shadow: 2px 0 14px rgba(0,0,0,0.28);
  }

  nav.main-menu .nav-icon {
    color: #4e6380;
    font-size: 18px !important;
    transition: color 0.2s;
  }

  .no-touch nav.main-menu li:hover > a,
  nav.main-menu li.active > a {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-radius: 0;
  }

  .no-touch nav.main-menu li:hover > a .nav-icon,
  nav.main-menu li.active > a .nav-icon {
    color: #fff !important;
  }
}

/* Mobile (<480px): modernizr.css makes sidebar position:relative width:100% max-height:0.
   We forcibly restore it as a fixed left strip. */
@media (max-width: 479px) {
  nav.main-menu {
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--sidebar-w-mobile) !important;
    max-height: calc(100vh - var(--header-h)) !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #0f172a 0%, #131f32 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    z-index: 1030 !important;
    /* Kill any transform/transition that would hide it */
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
  }

  /* List items: full-width block in the narrow strip */
  nav.main-menu > ul {
    margin: 0 !important;
  }

  nav.main-menu li {
    display: block !important;
    width: var(--sidebar-w-mobile) !important;
    position: relative !important;
  }

  nav.main-menu li > a {
    display: table !important;
    width: var(--sidebar-w-mobile) !important;
    text-decoration: none;
  }

  nav.main-menu .nav-icon {
    position: relative !important;
    display: table-cell !important;
    width: var(--sidebar-w-mobile) !important;
    height: 44px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 16px !important;
    color: #4e6380;
    transition: color 0.2s;
  }

  /* Active / hover */
  .no-touch nav.main-menu li:hover > a,
  nav.main-menu li.active > a {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  }

  .no-touch nav.main-menu li:hover > a .nav-icon,
  nav.main-menu li.active > a .nav-icon {
    color: #fff !important;
  }
}

/* ---------------------------------------------------------------
   MAIN CONTENT AREA
   Always offset by sidebar width — no margin-left: 0 on mobile.
--------------------------------------------------------------- */
.main {
  background: var(--c-body-bg) !important;
  margin-bottom: 50px;
}

/* Desktop: sidebar is 60px (set in head.ejs inline styles already) */
/* Mobile override: sidebar is 52px, so reduce left margin */
@media (max-width: 479px) {
  .main {
    margin-left: var(--sidebar-w-mobile) !important;
    margin-top: calc(var(--header-h) + 10px) !important;
    padding: 0 8px !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .main {
    margin-left: var(--sidebar-w-desktop) !important;
    padding: 0 10px !important;
  }
}

/* ---------------------------------------------------------------
   DASHBOARD SECTION HEADER (title row above cards)
--------------------------------------------------------------- */
.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.dashboard-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.1px;
}

.last-updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   STAT CARDS — Modern gradient + hover lift
--------------------------------------------------------------- */
.stat-card {
  border-radius: var(--radius-card) !important;
  border: none !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  height: 100%;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover) !important;
}

/* Decorative background circles */
.stat-card::before {
  content: '';
  position: absolute;
  top: -24px;
  right: -24px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  pointer-events: none;
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: -36px;
  left: 16px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}

/* Colour gradients per Bootstrap colour class */
.stat-card.bg-danger   { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important; }
.stat-card.bg-orange   { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important; }
.stat-card.bg-purple   { background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important; }
.stat-card.bg-cyan     { background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%) !important; }
.stat-card.bg-success  { background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%) !important; }
.stat-card.bg-info     { background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important; }
.stat-card.bg-primary  { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important; }
.stat-card.bg-warning  { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important; }
.stat-card.bg-secondary{ background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important; }

/* Card body */
.stat-card .card-body {
  padding: 20px 20px 16px !important;
  position: relative;
  z-index: 1;
}

/* Icon container */
.stat-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-icon);
  background: rgba(255,255,255,0.18);
  font-size: 18px;
  color: #fff;
  margin-bottom: 14px;
}

/* Big number */
.legend-value {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  letter-spacing: -1.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-value i {
  font-size: 18px !important;
  opacity: 0.70;
}

.legend-value a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Label */
.legend-desc {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.82) !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-bottom: 0 !important;
  /* Disable old hover zoom */
  transition: none !important;
}

.legend-desc:hover {
  font-size: 12px !important;
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------
   CARD GRID   (card-view wrappers)
   Desktop: 3 per row  (col-md-4 handles)
   Tablet : 2 per row  (forced below)
   Mobile : 1 per row  (col-12 handles, sidebar stays visible)
--------------------------------------------------------------- */
.card-view {
  padding: 0 10px 18px;
}

/* Tablet: 768–1024px → 2 per row */
@media (min-width: 576px) and (max-width: 1024px) {
  .card-view {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Mobile (<576px) → 1 per row (full width minus sidebar) */
@media (max-width: 575px) {
  .card-view {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 0 14px !important;
  }
}

/* ---------------------------------------------------------------
   INNER CARDS (non-stat pages: tables, forms, etc.)
--------------------------------------------------------------- */
.card {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.07) !important;
}

.card-header {
  border-radius: 14px 14px 0 0 !important;
  font-weight: 600;
  font-size: 13.5px;
  padding: 12px 18px !important;
}

.card-header.bg-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

/* ---------------------------------------------------------------
   NAVBAR — COMPACT ON MOBILE
--------------------------------------------------------------- */
@media (max-width: 479px) {
  .navbar.navbar-dark.bg-dark {
    padding: 0 10px;
  }

  .navbar-brand {
    font-size: 13px !important;
    letter-spacing: 0;
  }

  /* Hide balance/sms/email chips on very small screens to save space */
  #balance, #fs, #fe {
    display: none !important;
  }

  /* Smaller stat numbers */
  .legend-value {
    font-size: 28px !important;
    letter-spacing: -1px;
  }

  .stat-card-icon {
    width: 38px;
    height: 38px;
    font-size: 15px;
    margin-bottom: 10px;
  }

  .stat-card .card-body {
    padding: 16px 14px 12px !important;
  }

  .legend-desc { font-size: 10px !important; }

  .dashboard-section-title { font-size: 13px; }
  .last-updated-badge { font-size: 10px; padding: 3px 8px; }
}

/* ---------------------------------------------------------------
   FOOTER
--------------------------------------------------------------- */
.footer {
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%) !important;
  color: #64748b !important;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 12px !important;
  padding-top: 10px !important;
}

.footer a {
  color: #64748b !important;
  transition: color 0.2s;
}

.footer a:hover { color: #94a3b8 !important; }

@media (max-width: 479px) {
  .footer { font-size: 11px !important; }
}

/* ---------------------------------------------------------------
   TABLES — scroll on small screens
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .card-body { overflow-x: auto; }
  table { font-size: 0.73rem !important; }
  th, td { white-space: nowrap; padding: 5px 8px !important; }
}

/* ---------------------------------------------------------------
   FORMS
--------------------------------------------------------------- */
@media (max-width: 767px) {
  label { white-space: normal !important; }
  form label { width: auto !important; display: block !important; }
  .date_input_width { width: 100% !important; }
  .right-align { flex-wrap: wrap; justify-content: flex-start !important; gap: 6px; }
  .right-align input, .right-align button { margin-left: 0 !important; }
}

/* ---------------------------------------------------------------
   SETTINGS PAGE TILES (col-sm-2)
--------------------------------------------------------------- */
@media (max-width: 575px) {
  .col-sm-2.card-view {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .legend-settings-desc {
    font-size: 10px !important;
    white-space: normal !important;
    margin-top: 6px !important;
    padding-bottom: 4px !important;
  }

  .legend-settings-value { font-size: 20px !important; }
  .card-view { height: auto !important; }
}

/* ---------------------------------------------------------------
   MODALS
--------------------------------------------------------------- */
@media (max-width: 479px) {
  .modal-dialog {
    margin: 10px;
    max-width: calc(100% - 20px);
  }
}

/* ---------------------------------------------------------------
   SNACKBAR
--------------------------------------------------------------- */
@media (max-width: 479px) {
  #snackbar {
    min-width: 75%;
    margin-left: -37.5%;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------
   MOBILE NAVBAR Z-INDEX FIX
   Sidebar is fixed at z-index 1030. Bootstrap fixed-top navbar
   also defaults to 1030 — same stacking level causes the sidebar
   to paint over the open dropdown. Raise navbar to 1041 on mobile
   so the hamburger dropdown always floats above the sidebar.
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar.navbar-dark.bg-dark {
    z-index: 1041 !important;
  }
}

/* ---------------------------------------------------------------
   HIDE USER SUMMARY & AGENT SUMMARY FROM SIDEBAR ON MOBILE
   Class added directly in header.ejs so a class selector beats the
   EJS inline style without needing attribute-selector tricks.
--------------------------------------------------------------- */
@media (max-width: 767px) {
  nav.main-menu li.sidebar-mobile-hide {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   HAMBURGER MENU — MOBILE DROPDOWN FIX
   navbar-expand-sm means the toggler shows at < 576px.
   Bootstrap's dropdown-menu uses position:absolute which clips
   or goes off-screen inside the collapsed navbar. We force it
   to render inline so items are always visible & fully contained.
--------------------------------------------------------------- */

/* Hamburger button — better affordance on all screen sizes */
.navbar-toggler {
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.navbar-toggler:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.45) !important;
}
.navbar-toggler:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.50) !important;
}

@media (max-width: 575px) {
  /* ---- Collapsed panel background ---- */
  .navbar-collapse#navbarsExample03 {
    background: linear-gradient(180deg, #1a2744 0%, #0f172a 100%);
    border-top: 1px solid rgba(255,255,255,0.07);
    border-radius: 0 0 18px 18px;
    margin: 0 -10px;
    padding: 10px 16px 18px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
    /* Animate the panel open */
    transition: all 0.25s ease;
  }

  /* ---- "Welcome [company]" toggle label ---- */
  .navbar-collapse .nav-item.dropdown > .nav-link.dropdown-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 11px 6px !important;
    font-size: 13.5px !important;
    font-weight: 600;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    margin-bottom: 6px;
    letter-spacing: 0.1px;
  }

  /* ---- Dropdown menu: force inline, never clipped ---- */
  .navbar-collapse .dropdown-menu {
    position: static !important;  /* kills absolute positioning */
    float: none !important;
    display: block !important;    /* always visible once panel opens */
    width: 100% !important;
    min-width: 0 !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.11) !important;
    border-radius: 14px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 4px 16px rgba(0,0,0,0.25) !important;
    padding: 6px !important;
    margin: 0 !important;
    transform: none !important;   /* prevent any Bootstrap transform offset */
  }

  /* ---- Individual items ---- */
  .navbar-collapse .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: #cbd5e1 !important;
    background: transparent !important;
    transition: background 0.18s ease, color 0.18s ease;
    line-height: 1.4;
  }

  .navbar-collapse .dropdown-menu .dropdown-item:hover,
  .navbar-collapse .dropdown-menu .dropdown-item:focus {
    background: rgba(255,255,255,0.13) !important;
    color: #ffffff !important;
  }

  .navbar-collapse .dropdown-menu .dropdown-item i.fa {
    width: 18px;
    text-align: center;
    font-size: 14px;
    opacity: 0.80;
  }

  /* Subtle separator between items */
  .navbar-collapse .dropdown-menu .dropdown-item + .dropdown-item {
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  /* ---- Balance / SMS / Email chips — restore inside mobile panel ---- */
  .navbar-collapse #balance,
  .navbar-collapse #fs,
  .navbar-collapse #fe {
    display: inline-flex !important;
    margin: 8px 6px 0 0 !important;
    font-size: 11px !important;
    background: rgba(255,255,255,0.09) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    color: #94a3b8 !important;
  }
}