/* ============================================================
   MODERN CRM THEME — overrides for _Sidebar.cshtml / _Layout.cshtml
   Loaded AFTER site.css (see _LayoutHead.cshtml) so these rules win
   the cascade without needing !important everywhere.
   Visual language ported from Lead360_NSPBrand prototype.
   ============================================================ */

:root {
  /* ---- brand tokens (from the approved Lead 360 prototype) ---- */
  --p1: #7C3AED; /* primary purple */
  --p2: #6027CC; /* dark purple (hover)  */
  --p3: #9F67F7; /* light purple (accents) */
  --pb: #F0EBFF; /* purple bg tint */

  /* ---- override site.css / Bootstrap blue everywhere ---- */
  --nsp-primary-blue: #7C3AED;
  --nsp-blue-light: #9F67F7;
  --nsp-blue-dark: #6027CC;
  --bs-primary: #7C3AED;
  --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: #7C3AED;
  --bs-link-hover-color: #6027CC;
  --bs-link-color-rgb: 124, 58, 237;
  --bs-link-hover-color-rgb: 96, 39, 204;

  --sb-bg: #0D1025; /* sidebar background */
  --sb-bg2: #131630; /* sidebar hover */
  --page-bg: #F4F6FB; /* page background */
  --card: #FFFFFF;
  --card2: #F8F9FC;
  --b1: #E4E7F0; /* border */

  --t1: #0F1120;
  --t2: #3D4460;
  --t3: #7E86A8; /* text on light surfaces */

  --green: #10B981;
  --amber: #F59E0B;
  --red: #EF4444;
  --blue: #3B82F6;
  /* ---- reuse the existing layout plumbing but with new widths ---- */
  --sidebar-total-width: 250px;
  --sidebar-collapsed-width: 58px;
  --sidebar-header-height: 56px;
}

/* Bootstrap's .btn-primary hardcodes its own --bs-btn-bg, so the
   --bs-primary var above doesn't reach it — force it directly. */
.btn-primary {
  --bs-btn-bg: #7C3AED !important;
  --bs-btn-border-color: #7C3AED !important;
  --bs-btn-hover-bg: #6027CC !important;
  --bs-btn-hover-border-color: #6027CC !important;
  --bs-btn-active-bg: #6027CC !important;
  --bs-btn-active-border-color: #6027CC !important;
  --bs-btn-focus-shadow-rgb: 124, 58, 237;
  background-color: #7C3AED !important;
  border-color: #7C3AED !important;
}

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    background-color: #6027CC !important;
    border-color: #6027CC !important;
  }

/* ================= SIDEBAR SHELL ================= */
/* .s-sidebar keeps its old fixed-position/width mechanism from site.css —
   we only restyle what's inside it. */
.s-sidebar {
  background: var(--sb-bg);
}

.sb-shell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sb-logo {
  height: var(--sidebar-header-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}

  .sb-logo img {
    height: 26px;
    object-fit: contain;
    flex: 0 0 auto;
  }

.sb-logo-text {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(135deg,#A78BFA,#7C3AED);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.s-sidebar.collapsed .sb-logo-text {
  display: none;
}

.sb-ws {
  margin: 10px 12px;
  padding: 7px 10px;
  flex: 0 0 auto;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
}

.sb-ws-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p3);
  box-shadow: 0 0 6px var(--p3);
  flex: 0 0 auto;
}

.sb-ws-text {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  letter-spacing: .04em;
}

.s-sidebar.collapsed .sb-ws {
  justify-content: center;
  padding: 8px;
}

.s-sidebar.collapsed .sb-ws-text {
  display: none;
}

.sb-search {
  margin: 2px 12px 6px;
  flex: 0 0 auto;
}

.s-sidebar.collapsed .sb-search {
  display: none;
}

.sb-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 7px 9px;
}

  .sb-search-wrap input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    color: #fff;
    font-size: 12.5px;
    font-family: 'Inter',sans-serif;
  }

    .sb-search-wrap input::placeholder {
      color: rgba(255,255,255,.35);
    }

  .sb-search-wrap i {
    color: rgba(255,255,255,.35);
    font-size: 11px;
  }

.sb-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
}

  .sb-nav::-webkit-scrollbar {
    display: none;
  }

.sb-sec {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.22);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 14px 16px 5px;
  white-space: nowrap;
}

.s-sidebar.collapsed .sb-sec {
  display: none;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  margin: 1px 6px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255,255,255,.72); /* brighter — was .55 */
  font-size: 12.5px;
  transition: all .15s;
  position: relative;
  text-decoration: none;
  min-width: 0;
  overflow: hidden; /* prevent blowout */
}

  .sb-item:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.95);
  }

  .sb-item.active {
    background: rgba(124,58,237,.25);
    color: #fff;
    font-weight: 500;
  }

    .sb-item.active::before {
      content: '';
      position: absolute;
      inset-inline-start: 0;
      top: 6px;
      bottom: 6px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--p1);
    }
  /* icon — fixed width, never shrinks */
  .sb-item i,
  .sb-sub-item i,
  .sb-subcat i {
    width: 16px;
    text-align: center;
    font-size: 12px;
  }
  .sb-item i {
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
    opacity: .75;
    font-size: 13px;
  }

  .sb-item.active i {
    opacity: 1;
  }

  /* label — takes remaining space, truncates if needed */
  .sb-item > span:not(.sb-item-badge):not(.sb-arrow) {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

/* badge — shrink-proof, pushed right by label flex */
.sb-item-badge {
  flex: 0 0 auto;
  background: var(--p1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-inline-start: 4px;
}

/* arrow — always visible, never pushed out */
.sb-arrow {
  flex: 0 0 14px !important;
  width: 14px !important;
  text-align: center;
  transition: transform .2s;
  opacity: .75 !important; /* was .5 — now visible */
  font-size: 10px;
  color: rgba(255,255,255,.75) !important;
  margin-inline-start: 2px;
  display: flex !important; /* force visible */
  align-items: center;
  justify-content: center;
}

.sb-item.open-parent .sb-arrow {
  transform: rotate(180deg);
}

/* collapsed state */
.s-sidebar.collapsed .sb-item {
  padding: 10px;
  margin: 1px 6px;
  justify-content: center;
  overflow: visible;
}

  .s-sidebar.collapsed .sb-item > span:not(.sb-item-badge):not(.sb-arrow),
  .s-sidebar.collapsed .sb-item-badge,
  .s-sidebar.collapsed .sb-arrow {
    display: none;
  }

  .s-sidebar.collapsed .sb-item.active::before {
    display: none;
  }

/* sub-items — brighter text */
.sb-sub-item {
  color: rgba(255,255,255,.6) !important; /* was .42 */
}

  .sb-sub-item:hover {
    color: rgba(255,255,255,.9) !important;
  }

  .sb-sub-item.active {
    color: #C4B5FD !important;
    font-weight: 600;
  }

/* section headers — slightly brighter */
.sb-sec {
  color: rgba(255,255,255,.35) !important;
}

.sb-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
}

  .sb-sub.open {
    max-height: 600px;
  }

.sb-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 38px;
  margin: 1px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,.42);
  font-size: 12.5px;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}

  .sb-sub-item:hover {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.8);
  }

  .sb-sub-item.active {
    color: var(--p3);
    font-weight: 600;
  }

/* sub-category — a depth>0 node that itself has children (e.g. "Payment Masters").
   Distinct from a plain leaf link: bold, collapsible, own chevron. */
.sb-subcat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 26px;
  margin: 2px 8px 0;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  transition: all .15s;
  white-space: nowrap;
}

  .sb-subcat:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.95);
  }

  .sb-subcat.active,
  .sb-subcat.open-parent {
    color: #fff;
    font-weight: 500;
  }

  .sb-subcat .sb-arrow {
    margin-left: auto;
    font-size: 9px;
    transition: transform .2s;
  }

  .sb-subcat.open-parent .sb-arrow {
    transform: rotate(180deg);
  }

/* indent leaves progressively deeper under a sub-category */
.sb-sub-item[data-indent="2"] { padding-left: 50px; }
.sb-sub-item[data-indent="3"] { padding-left: 62px; }

.s-sidebar.collapsed .sb-subcat {
  display: none;
}

.s-sidebar.collapsed .sb-sub,
.s-sidebar.collapsed .sb-sub-item {
  display: none;
}

.sb-empty {
  padding: 8px 16px;
  font-size: 11.5px;
  color: rgba(255,255,255,.3);
  font-style: italic;
}

.sb-foot {
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: rgba(255,255,255,.35);
  font-size: 12px;
  flex: 0 0 auto;
  transition: color .15s;
}

  .sb-foot:hover {
    color: rgba(255,255,255,.75);
  }

.s-sidebar.collapsed .sb-foot span {
  display: none;
}

.s-sidebar.collapsed .sb-foot {
  justify-content: center;
}

.sb-foot-ico {
  transition: transform .25s;
}

.s-sidebar.collapsed .sb-foot-ico {
  transform: rotate(180deg);
}

/* ================= TOPBAR ================= */
.topbar {
  height: 56px;
  flex: 0 0 56px;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--b1);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
}

.tb-bc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--t3);
  overflow: hidden;
  white-space: nowrap;
}

  .tb-bc .sep {
    opacity: .5;
  }

  .tb-bc .cur {
    color: var(--t1);
    font-weight: 600;
  }

.tb-sp {
  flex: 1;
}

.tb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.tb-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--b1);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t3);
  transition: all .15s;
  text-decoration: none;
  position: relative;
}

  .tb-btn:hover {
    background: var(--card2);
    border-color: #C8CDDE;
    color: var(--t1);
  }

.tb-divider {
  width: 1px;
  height: 22px;
  background: var(--b1);
}

.tb-notif-dot {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid #fff;
}

.tb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--p1),var(--p3));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(124,58,237,.35);
  border: none;
}

/* ================= PAGE SHELL ================= */
.s-main {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  min-height: 0 !important;
  background: var(--page-bg) !important;
}

.page {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

section.content {
  background: transparent !important;
}

@media (max-width:768px) {
  .s-main {
    padding: 0 !important;
  }

  .page {
    padding: 12px;
  }

  .topbar {
    padding: 0 14px 0 60px;
  }
}

/* ============================================================
   PATCH v1.1 — layout wiring + sidebar width + missing rules
   ============================================================ */

/* ── APP SHELL FLEX LAYOUT ── */
.app {
  display: flex !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: var(--page-bg) !important;
}

/* ── SIDEBAR WIDTH ── */
.s-sidebar {
  width: var(--sidebar-total-width) !important;
  min-width: var(--sidebar-total-width) !important;
  max-width: var(--sidebar-total-width) !important;
  flex: 0 0 var(--sidebar-total-width) !important;
  height: 100vh !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  overflow: hidden !important;
  transition: width .25s, min-width .25s, max-width .25s, flex-basis .25s !important;
  z-index: 100 !important;
}

  .s-sidebar.collapsed {
    width: var(--sidebar-collapsed-width) !important;
    min-width: var(--sidebar-collapsed-width) !important;
    max-width: var(--sidebar-collapsed-width) !important;
    flex: 0 0 var(--sidebar-collapsed-width) !important;
  }

/* ── MAIN ── */
.s-main {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.topbar {
  flex: 0 0 56px !important;
  z-index: 50 !important;
}

/* ── PAGE CONTENT ── */
.page {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 24px !important;
  background: var(--page-bg) !important;
  min-height: 0 !important;
}

.s-layout-main, .main-container, section.content {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── KILL OLD TWO-PANEL SIDEBAR ── */
.s-sidebar-icon-strip,
.s-sidebar-category-panel,
.s-sidebar-menu-label {
  display: none !important;
}

/* ── BODY ── */
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--page-bg) !important;
}

  body #PageBackground {
    display: none !important;
  }

/* ── MOBILE ── */
.s-mobile-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  background: var(--p1);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(124,58,237,.35);
}

@media(max-width:768px) {
  .s-mobile-toggle {
    display: flex !important;
  }

  .s-sidebar {
    position: fixed !important;
    left: -260px !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 999 !important;
    transition: left .25s !important;
    width: 230px !important;
    min-width: 230px !important;
    flex: none !important;
  }

    .s-sidebar.mobile-open {
      left: 0 !important;
    }

  .s-main {
    width: 100% !important;
    margin: 0 !important;
  }

  .topbar {
    padding-left: 56px !important;
  }
}

/* ── SCROLLBAR ── */
/*.page::-webkit-scrollbar{ width:4px; }
.page::-webkit-scrollbar-thumb{ background:var(--b1); border-radius:4px; }*/
.sb-nav::-webkit-scrollbar {
  display: none;
}

/* ── BREADCRUMB ── */
.tb-bc .sep {
  margin: 0 4px;
}

/* ══ ACTIVE SECTION HEADER HIGHLIGHT ══════════════════════════
   When a nav item inside a section is active, highlight the
   section header above it with a purple left bar + brighter text.
   Uses the .active-section class added by JS below.
   ══════════════════════════════════════════════════════════════ */

/* default section header */
.sb-sec {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.32);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 14px 16px 5px;
  white-space: nowrap;
  position: relative;
  transition: color .2s;
}

  /* active section header — brighter + purple left bar */
  .sb-sec.active-section {
    color: rgba(255,255,255,.85) !important;
  }

    .sb-sec.active-section::before {
      content: '';
      position: absolute;
      inset-inline-start: 0;
      top: 14px;
      bottom: 5px;
      width: 3px;
      background: var(--p1);
      border-radius: 0 3px 3px 0;
    }

/* collapsed — hide section headers entirely */
.s-sidebar.collapsed .sb-sec {
  display: none;
}

/* ============================================================
   NSP IBE — MODAL REDESIGN  v1.0
   Purple brand · matches new CRM theme
   ============================================================ */

/* ── MODAL OVERLAY ── */
/*.modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15,17,32,.6) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}*/
.modal[style*="display: block"],
.modal[style*="display:block"],
.modal[style*="display: flex"],
.modal[style*="display:flex"] {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15,17,32,.6) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal {
  display: none;
}

/* ── MODAL CONTENT BOX ── */
.modal-content {
  background: #fff !important;
  border-radius: 16px !important;
  width: 400px !important;
  max-width: 92vw !important;
  min-width: 360px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.25) !important;
  overflow: hidden !important;
  animation: modalIn .2s cubic-bezier(.22,.61,.36,1) !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── MODAL HEADER — purple gradient ── */
.modal-header {
  background: #0D1025 !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

  .modal-header h3 {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .modal-header h3 i {
    opacity: .85;
  }

.modal-header .modal-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .75 !important;
}

  .modal-header .btn-close:hover {
    opacity: 1 !important;
  }

/* ── MODAL CLOSE BTN ── */
.modal-close {
  background: rgba(255,255,255,.15) !important;
  border: none !important;
  color: #fff !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  flex-shrink: 0 !important;
}

  .modal-close:hover {
    background: rgba(255,255,255,.25) !important;
  }

/* ── MODAL BODY ── */
.modal-body {
  padding: 22px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  background: #F8FAFC !important;
}

/* Serenity's confirm/message dialogs draw a 60px icon via ::before at
   top:8px/left:14px inside .modal-body — restore clearance for it. */
.s-ConfirmDialog .modal-body,
.s-MessageDialog .modal-body {
  padding: 22px 24px 22px 90px !important;
  min-height: 76px !important;
  position: relative !important;
}

/* ── MODAL INFO BOX ── */
.modal-info {
  background: #EEF2FF !important;
  border: 1px solid #C7D7F9 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
  font-size: 13px !important;
  color: #3730A3 !important;
}

  .modal-info p {
    margin: 0 0 4px;
  }

    .modal-info p:last-child {
      margin: 0;
    }

/* ── MODAL FOOTER ── */
.modal-footer {
  padding: 14px 22px !important;
  border-top: 1px solid #E4E7F0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}

/* ── MODAL BUTTONS ── */
.modal-btn {
  padding: 9px 20px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: none !important;
  transition: all .15s !important;
  font-family: inherit !important;
}

.modal-btn-primary {
  background: var(--p1) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124,58,237,.3) !important;
}

  .modal-btn-primary:hover {
    background: var(--p2) !important;
  }

  .modal-btn-primary:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
  }

.modal-btn-secondary {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #E2E8F0 !important;
}

  .modal-btn-secondary:hover {
    background: #E2E8F0 !important;
  }

/* ── FORM ELEMENTS INSIDE MODALS ── */
.modal-body label,
.modal-body .filter-group label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #64748B !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  display: block !important;
  margin-bottom: 5px !important;
}

.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="tel"],
.modal-body textarea,
.modal-body select {
  width: 100% !important;
  padding: 9px 12px !important;
  border: 1.5px solid #E4E7F0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: #0F1120 !important;
  background: #fff !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
}

  .modal-body input:focus,
  .modal-body textarea:focus,
  .modal-body select:focus {
    border-color: var(--p1) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.1) !important;
  }

.modal-body textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

/* ── FILTER ROW INSIDE MODALS ── */
.modal-body .filter-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.modal-body .filter-group {
  margin-bottom: 0 !important;
}

/* ── IMPORT DROP ZONE ── */
#importDropZone {
  border: 2px dashed #C7D7F9 !important;
  border-radius: 12px !important;
  padding: 32px !important;
  text-align: center !important;
  cursor: pointer !important;
  background: #F8FAFC !important;
  transition: all .2s !important;
}

  #importDropZone:hover {
    border-color: var(--p1) !important;
    background: #F0EBFF !important;
  }

  #importDropZone i {
    color: var(--p1) !important;
  }

/* ── DOWNLOAD TEMPLATE BTN ── */
#downloadTemplateBtn {
  background: linear-gradient(135deg, var(--p1), var(--p2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 2px 8px rgba(124,58,237,.3) !important;
}

/* ── ACTIVITY POPUP HEADER — purple ── */
#callRecordsModal > div > div:first-child {
  /*background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%) !important;*/
}

/* ── ACTIVITY DETAIL ITEMS — 2 col not 4 ── */


/* ── SEND EMAIL HEADER ── */
#emailModal .modal-header {
  background: #0D1025 !important;
}

/* ── CHANGE STATUS HEADER ── */
#bulkStatusModal .modal-header {
  background: #0D1025 !important;
}

/* ── NEW LEAD HEADER ── */
#newLeadModal .modal-header {
  background: #0D1025 !important;
}

/* ── IMPORT HEADER ── */
#importLeadsModal .modal-header {
  background: #0D1025 !important;
}

/* ============================================================
   ACTIVITY POPUP — v2.0 full redesign
   ============================================================ */

/* ── POPUP HEADER ── */

#callRecordsModal > div > div:first-child {
  /*background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%) !important;*/
  padding: 20px 24px !important;
  border-radius: 16px 16px 0 0 !important;
}
/* Force activity popup header to match all other modals */
#callRecordsModal .modal-header {
  background: #0D1025 !important;
}


/* ── ACTIVITY LEFT PANEL ── */


.call-record-card {
  border-radius: 10px !important;
  border: 1.5px solid transparent !important;
  margin-bottom: 6px !important;
  transition: all .15s !important;
  background: #fff !important;
}

  .call-record-card:hover {
    border-color: var(--p1) !important;
    background: #FAF8FF !important;
  }

  .call-record-card.active {
    border-color: var(--p1) !important;
    background: #F0EBFF !important;
  }

/* ── DETAIL SECTION HEADERS — distinguished from labels ── */
#callRecordsModal .detail-section-header,
#callRecordsModal > div > div:last-child > div > div > div:first-child {
  background: #fff !important;
  padding: 14px 18px !important;
  /*border-bottom: 2px solid var(--p1) !important;*/
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── DETAIL ITEMS — clean card style ── */
.detail-item {
  background: #fff !important;
  border: 1px solid #F1F5F9 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 4px !important;
}

.detail-item-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--p1) !important; /* purple — distinguishes from value */
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  margin-bottom: 5px !important;
}

.detail-item-value {
  font-size: 13px !important;
  color: #0F1120 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.detail-item.full-width {
  grid-column: 1 / -1 !important;
}

/* ── SECTION TITLE ── */


/* ── TRANSCRIPT PANEL — distinguished ── */


/* ── CHAT BUBBLES ── */
.chat-message {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.agent-avatar {
  background: var(--p1) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.customer-avatar {
  background: #1E40AF !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.message-sender {
  color: #64748B !important;
  font-size: 11px !important;
}

.message-time {
  color: #94A3B8 !important;
  font-size: 10px !important;
}

.message-bubble {
  background: #F5F3FF !important;
  color: #0F1120 !important;
  border-radius: 0 10px 10px 10px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.customer-message .message-bubble {
  background: #EDE9FE !important;
  color: #0F1120 !important;
  border-radius: 10px 0 10px 10px !important;
}



/* ── BADGES — remove old blue ── */
.direction-badge.outbound {
  background: #DCFCE7 !important;
  color: #15803D !important;
}

.direction-badge.inbound {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}

.call-badge.badge-completed {
  background: #DCFCE7 !important;
  color: #15803D !important;
}

.call-badge.badge-pending {
  background: #FEF9C3 !important;
  color: #854D0E !important;
}

.call-badge.badge-missed,
.call-badge.badge-cancelled {
  background: #FEE2E2 !important;
  color: #DC2626 !important;
}

/* ── RECORDING PLAYER ── */
audio {
  width: 100% !important;
  border-radius: 8px !important;
  accent-color: var(--p1) !important;
}






/* ============================================================
   ACTIVITY POPUP — class-based styles (no inline)
   ============================================================ */

.act-modal {
  flex-direction: column !important;
}

.act-modal-content {
  width: 92% !important;
  max-width: 1200px !important;
  height: 88vh !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* header — inherits .modal-header = #0D1025 */
.act-lead-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.act-lead-info {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
}

.act-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.act-download-btn {
  display: none;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  gap: 6px;
}

  .act-download-btn:hover {
    background: rgba(255,255,255,.25) !important;
  }

/* body split */
.act-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* left panel */
.act-left {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid #E4E7F0;
  overflow-y: auto;
  background: #F8FAFC;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.4) transparent;
}

  .act-left::-webkit-scrollbar {
    width: 4px;
  }

  .act-left::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,.4);
    border-radius: 4px;
  }

.act-left-header {
  padding: 10px 14px;
  border-bottom: 1px solid #E4E7F0;
  background: #F8FAFC;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
}

.act-list {
  padding: 8px;
}

/* right panel */
.act-right {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: #F8FAFC;
  min-width: 0;
}

/* sections */
.act-section {
  background: #fff;
  margin: 8px;
  border-radius: 12px;
  border: 1px solid #E4E7F0;
  overflow: hidden;
}

.act-section-header {
  padding: 12px 16px;
  border-bottom: 1px solid #E4E7F0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s;
}

  .act-section-header:hover {
    background: #F8FAFC;
  }

.act-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.act-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #0F1120;
  flex: 1;
}

.act-chevron {
  color: #94A3B8;
  font-size: 11px;
  flex-shrink: 0;
}

/* detail grid inside sections */
.act-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px;
}

/* transcript section */
/*.act-transcript { border: 2px solid #7C3AED !important; }*/
.act-transcript-header {
  background: #F5F3FF !important;
  border-bottom: 1px solid #EDE9FE !important;
}
/*.act-transcript-title { color: #7C3AED !important; }*/
.act-transcript-body {
  padding: 12px;
  background: #fff;
  max-height: 400px;
  overflow-y: auto;
}

/* ── CHAT MESSAGES — light theme ── */
.chat-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.agent-message {
  flex-direction: row !important;
}

.customer-message {
  flex-direction: row-reverse !important;
}

.message-content-wrapper {
  max-width: 65% !important;
  min-width: 80px !important;
}

.message-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.customer-message .message-header {
  flex-direction: row-reverse !important;
}

.message-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.message-bubble {
  background: #F5F3FF;
  color: #0F1120;
  border-radius: 0 10px 10px 10px;
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 14px;
}

.customer-message .message-bubble {
  background: #EDE9FE;
  color: #0F1120;
  border-radius: 10px 0 10px 10px;
}

.message-sender {
  color: #64748B;
  font-size: 11px;
  font-weight: 600;
}

.message-time {
  color: #94A3B8;
  font-size: 10px;
}

.agent-avatar {
  background: var(--p1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.customer-avatar {
  background: #1E40AF;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ── DETAIL ITEM — reusable ── */
.detail-item {
  padding: 10px 12px;
  border: 1px solid #F1F5F9;
  border-radius: 6px;
  background: #fff;
}

.detail-item-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--p1);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}

.detail-item-value {
  font-size: 13px;
  color: #0F1120;
  font-weight: 500;
  line-height: 1.4;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

/* ── RESTORE PANEL PADDING — site rule zeroes padding on BOTH .s-Panel
   and .s-DataGrid inside full-height pages; grids should stay flush,
   but form/detail panels (e.g. Edit Lead) need breathing room back. */
.full-height-page section.content > .s-Panel {
  padding: 24px !important;
}

/* ── PURPLE THIN SCROLLBAR — reusable class ── */
.nsp-scroll-purple {
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.4) transparent;
}

  .nsp-scroll-purple::-webkit-scrollbar {
    width: 4px;
  }

  .nsp-scroll-purple::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,.4);
    border-radius: 4px;
  }

    .nsp-scroll-purple::-webkit-scrollbar-thumb:hover {
      background: rgba(124,58,237,.7);
    }