/* ==========================================================================
   RevenueTie — Unified Design System (Active/Blue)
   Same variable names as custom-green.css — swap which file is linked in
   the layout to switch color profiles. All custom styling lives here.
   ========================================================================== */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS — change these to restyle the entire app
   ========================================================================== */
:root {

  /* ── Brand colors ── */
  --cc-primary:          #1A6EFF;
  --cc-primary-dark:     #0D56D6;
  --cc-primary-light:    #E5EFFF;
  --cc-primary-rgb:      26, 110, 255;

  /* ── Neutrals ── */
  --cc-bg:               #f8f8f6;
  --cc-surface:          #ffffff;
  --cc-border:           #E8E8E4;
  --cc-border-light:     #F1EFE8;
  --cc-muted-bg:         #F1EFE8;
  --cc-text:             #2C2C2A;
  --cc-text-muted:       #888780;
  --cc-text-light:       #c8c8c4;

  /* ── Semantic ──
     Success stays its own green — a status color (paid, closed-won),
     not the brand color. Everything interactive (buttons, links) is
     blue; only pills/badges that mean "success" use --cc-success.   */
  --cc-danger:           #FA320A;
  --cc-danger-bg:        #FDE7E2;
  --cc-warning:          #854F0B;
  --cc-warning-bg:       #FAEEDA;
  --cc-success:          #1D9E75;
  --cc-success-bg:       #E1F5EE;
  --cc-success-rgb:      29, 158, 117;

  /* ── Secondary / toolbar button surfaces ── */
  --cc-secondary-bg:        rgb(248 248 246);
  --cc-secondary-bg-hover:  rgba(197, 197, 201, .32);
  --cc-shadow-rgb:          0, 0, 0;
  --cc-toolbar-border-rgb:  197, 197, 201;
  --cc-btn-radius:          7px;

  /* ── Bootstrap overrides ── */
  --primary-rgb:         var(--cc-primary-rgb);
  --secondary-rgb:       var(--cc-primary-rgb);
  --success-rgb:         var(--cc-success-rgb);
  --links-rgb:           var(--cc-primary-rgb);

  /* ── Nav colors — used by BOTH main sidebar and settings secondary nav ──
     Change these two groups and both navs update together              */
  --secondary-menu-active-bg:    #ededee;
  --secondary-menu-active-color: var(--cc-text);
  --secondary-menu-hover-bg:     #ededee;
  --secondary-menu-hover-color:  var(--cc-text);

  /* ── Typography ── */
  --cc-font:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cc-radius:           8px;
  --cc-radius-sm:        6px;
  --cc-radius-lg:        12px;
  --cc-radius-pill:      20px;

  /* ════════════════════════════════════════════════════════
     SIZE SCALE — change --cc-size to 1, 2, 3, 4, or 5
     1 = compact  |  2 = default  |  3 = comfortable
     4 = large    |  5 = extra large / accessibility
     ════════════════════════════════════════════════════════ */
  --cc-size: 3;

  /* Base unit */
  --cc-unit: calc(var(--cc-size) * 4px);

  /* Font sizes          sz1  sz2  sz3  sz4  sz5  */
  --cc-text-xs:   calc(9px  + var(--cc-size) * 1px);  /* 10  11  12  13  14 */
  --cc-text-sm:   calc(10px + var(--cc-size) * 1px);  /* 11  12  13  14  15 */
  --cc-text-base: calc(11px + var(--cc-size) * 1px);  /* 12  13  14  15  16 */
  --cc-text-md:   calc(12px + var(--cc-size) * 1px);  /* 13  14  15  16  17 */
  --cc-text-lg:   calc(14px + var(--cc-size) * 2px);  /* 16  18  20  22  24 */
  --cc-text-xl:   calc(16px + var(--cc-size) * 3px);  /* 19  22  25  28  31 */
  --cc-text-2xl:  calc(18px + var(--cc-size) * 4px);  /* 22  26  30  34  38 */
  --cc-text-3xl:  calc(20px + var(--cc-size) * 5px);  /* 25  30  35  40  45 */

  /* Spacing               sz1  sz2  sz3  sz4  sz5 */
  --cc-space-xs: calc(2px  + var(--cc-size) * 1px);  /*  3   4   5   6   7 */
  --cc-space-sm: calc(4px  + var(--cc-size) * 2px);  /*  6   8  10  12  14 */
  --cc-space-md: calc(6px  + var(--cc-size) * 3px);  /*  9  12  15  18  21 */
  --cc-space-lg: calc(8px  + var(--cc-size) * 4px);  /* 12  16  20  24  28 */
  --cc-space-xl: calc(12px + var(--cc-size) * 5px);  /* 17  22  27  32  37 */

  /* Input / button height — set explicitly to match --cc-size
     size:  1    2    3    4    5
            28   32   35   40   46
     Update BOTH lines when changing --cc-size              */
  --cc-input-h:     35px;
  --cc-btn-h:       40px;
  --cc-input-pad-x: calc(6px + var(--cc-size) * 2px); /* 8  10  12  14  16 */

  /* Labels */
  --cc-label-size:   var(--cc-text-sm);
  --cc-label-weight: 500;
}

/* ==========================================================================
   2. GLOBAL BASE
   ========================================================================== */
body {
  background-color: var(--cc-bg);
  font-family: var(--cc-font);
  font-size: var(--cc-text-base);
  color: var(--cc-text);
}

a { color: var(--cc-primary); }
a:hover { color: var(--cc-primary-dark); }

p {
  font-size: var(--cc-text-base);
  color: var(--cc-text);
}

h1 { font-size: var(--cc-text-3xl); }
h2 { font-size: var(--cc-text-2xl); }
h3 { font-size: var(--cc-text-xl); }
h4, h5 { font-size: var(--cc-text-lg); }
h6 { font-size: var(--cc-text-md); }

/* ==========================================================================
   3. FORM CONTROLS — scale with --cc-size
   ========================================================================== */
.form-control,
.form-select {
  height: var(--cc-input-h);
  font-size: var(--cc-text-base) !important;
  font-family: var(--cc-font);
  padding: 0 var(--cc-input-pad-x);
  border-color: var(--cc-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 3px rgba(var(--cc-primary-rgb), .12);
}
textarea.form-control {
  height: auto;
  padding: var(--cc-space-sm) var(--cc-input-pad-x);
}
.form-control-sm, .form-select-sm {
  height: var(--cc-input-h);
  font-size: var(--cc-text-sm) !important;
  padding: 0 calc(var(--cc-input-pad-x) - 2px);
}
.form-label,
label.form-label {
  font-size: var(--cc-label-size);
  font-weight: var(--cc-label-weight);
  color: var(--cc-text-muted);
  margin-bottom: var(--cc-space-xs);
  font-family: var(--cc-font);
}
.form-check-input {
  background-color: #fafafa;
  border: 1px solid var(--cc-border);
}
.form-check-input:checked {
  background-color: var(--cc-primary);
  border-color: var(--cc-primary);
}
.form-check-input:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 3px rgba(var(--cc-primary-rgb), .15);
}
.table-responsive {
  border-radius: 12px;
  border: 1px solid var(--cc-border);
}
.border-cus-12  { border-radius: 12px !important; }
.border-cus-col { border: 1px solid var(--cc-border) !important; box-shadow: unset !important; }
.border-cus-no-shadow { box-shadow: unset !important; }

/* ==========================================================================
   4. BUTTONS — scale with --cc-size
   ========================================================================== */
.btn {
  height: var(--cc-btn-h);
  font-size: var(--cc-text-base);
  font-weight: 400;
  font-family: var(--cc-font);
  padding: 0 16px;
  border-radius: var(--cc-btn-radius);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-xs);
  white-space: nowrap;
}
.btn-sm {
  height: calc(var(--cc-btn-h) - 6px);
  font-size: var(--cc-text-sm);
  padding: 0 var(--cc-space-md);
}

/* Primary — solid brand blue */
.btn-primary {
  background: var(--cc-primary);
  border-color: var(--cc-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--cc-primary-dark);
  border-color: var(--cc-primary-dark);
  color: #fff;
}

/* Secondary — translucent gray wash, no border */
.btn-outline-secondary {
  background: var(--cc-secondary-bg);
  border-color: transparent;
  color: var(--cc-text);
}
.btn-outline-secondary:hover {
  background: var(--cc-secondary-bg-hover);
  border-color: transparent;
  color: var(--cc-text);
}

/* Danger — solid, for destructive actions */
.btn-danger {
  background: var(--cc-danger);
  border-color: var(--cc-danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
  background: #E22B08;
  border-color: #E22B08;
  color: #fff;
}

/* White toolbar button — settings rows, icon actions.
   Border is an inset box-shadow, not a real border, so it renders as a
   crisp 1px hairline at any size instead of a chunky border. */
.btn-white {
  background: var(--cc-surface);
  border-color: transparent;
  color: var(--cc-text);
  box-shadow:
    0px 1px 2px 0px rgba(var(--cc-shadow-rgb), .07),
    inset 0px 0px 0px 1px rgba(var(--cc-toolbar-border-rgb), .5);
}
.btn-white:hover {
  background: var(--cc-bg);
  color: var(--cc-text);
}

/* ==========================================================================
   5. CARDS
   ========================================================================== */
.custom-card,
.custom-card-376 {
  border: 1px solid var(--cc-border);
  box-shadow: none;
  border-radius: var(--cc-radius);
  background: var(--cc-surface) !important;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--cc-border);
  padding: var(--cc-space-md) var(--cc-space-lg);
}
.card-body {
  padding: var(--cc-space-lg);
}
.card-title {
  font-size: var(--cc-text-md);
  font-weight: 600;
  color: var(--cc-text);
}

/* ==========================================================================
   6. MAIN SIDEBAR NAV
   ========================================================================== */
.app-sidebar,
.app-sidebar .main-sidebar-header {
  background: var(--cc-bg);
  border-right: 1px solid var(--cc-border);
}
.app-sidebar .main-sidebar-header { justify-content: left; }
.app-sidebar .main-sidebar-header .header-logo img {
  height: 2.3rem;
  margin-top: 6px;
}
.app-sidebar .side-menu__label {
  font-size: var(--cc-text-md);
  font-weight: 400;
  font-family: var(--cc-font);
  vertical-align: middle;
  padding-left: 4px;
  color: var(--cc-text);
}
.app-sidebar .side-menu__icon {
  margin-inline-end: .625rem;
  width: 1.15rem; height: 1.15rem;
  font-size: 1.35rem;
  color: var(--cc-text-muted);
  fill: var(--cc-text-muted);
}

/* Active — same variables as settings secondary nav */
.app-sidebar .side-menu__item.active {
  background-color: var(--secondary-menu-active-bg) !important;
  font-weight: 400;
  margin: 5px 0;
  border-radius: var(--cc-radius);
}
.app-sidebar .side-menu__item.active .side-menu__label {
  color: var(--secondary-menu-active-color) !important;
}
.app-sidebar .side-menu__item.active .side-menu__icon {
  fill: var(--secondary-menu-active-color);
  color: var(--secondary-menu-active-color);
}

/* Hover — same variables as settings secondary nav */
.app-sidebar .side-menu__item:hover {
  background-color: var(--secondary-menu-hover-bg) !important;
  border-radius: var(--cc-radius);
}
.app-sidebar .side-menu__item:hover .side-menu__label {
  color: var(--secondary-menu-hover-color) !important;
}
.app-sidebar .side-menu__item:hover .side-menu__icon {
  fill: var(--secondary-menu-hover-color);
  color: var(--secondary-menu-hover-color);
}

/* ==========================================================================
   7. PIPELINE BOARD
   ========================================================================== */

/* View toggle */
.view-toggle { display: inline-flex; border: 1px solid var(--cc-border); border-radius: 7px; overflow: hidden; }
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: var(--cc-space-xs);
  padding: var(--cc-space-xs) var(--cc-space-md);
  font-size: var(--cc-text-sm); font-weight: 500;
  background: transparent; color: var(--cc-text-muted);
  border: none; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.view-toggle-btn:first-child        { border-right: 1px solid var(--cc-border); }
.view-toggle-btn.active             { background: var(--cc-primary); color: #fff; }
.view-toggle-btn:hover:not(.active) { background: var(--cc-primary-light); color: var(--cc-primary-dark); }

/* Scroll wrappers */
.main-content, .app-content, .container-fluid { overflow-x: visible !important; }
#boardScrollWrapper {
  overflow-x: scroll !important; overflow-y: visible;
  -webkit-overflow-scrolling: touch; width: 100%;
  scrollbar-width: thin; scrollbar-color: var(--cc-border) var(--cc-bg);
}
#boardScrollWrapper::-webkit-scrollbar       { height: 8px; }
#boardScrollWrapper::-webkit-scrollbar-track { background: var(--cc-bg); border-radius: 4px; }
#boardScrollWrapper::-webkit-scrollbar-thumb { background: var(--cc-border); border-radius: 4px; }
#boardScrollWrapper::-webkit-scrollbar-thumb:hover { background: #c8c8c4; }
#boardScrollTop {
  overflow-x: scroll; overflow-y: hidden; width: 100%; margin-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: var(--cc-border) var(--cc-bg);
}
#boardScrollTop::-webkit-scrollbar       { height: 8px; }
#boardScrollTop::-webkit-scrollbar-track { background: var(--cc-bg); border-radius: 4px; }
#boardScrollTop::-webkit-scrollbar-thumb { background: var(--cc-border); border-radius: 4px; }
#boardScrollTop::-webkit-scrollbar-thumb:hover { background: #c8c8c4; }
#boardScrollTop > div { height: 1px; }

/* Board layout */
#pipelineBoard {
  display: flex; gap: var(--cc-space-md);
  align-items: flex-start; min-width: max-content; padding-bottom: 12px;
}

/* Columns */
.pipeline-col {
  flex: 0 0 270px; width: 270px;
  background: var(--cc-bg); border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 260px); transition: opacity 0.2s;
}
.pipeline-col.col-hidden         { display: none; }
.pipeline-col-header {
  padding: var(--cc-space-md) var(--cc-space-md) calc(var(--cc-space-md) - 2px);
  border-bottom: 1px solid var(--cc-border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0;
}
.pipeline-col-title {
  font-size: var(--cc-text-sm); font-weight: 600; color: var(--cc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipeline-col-count {
  font-size: var(--cc-text-xs); font-weight: 600; color: var(--cc-text-muted);
  background: var(--cc-border); border-radius: var(--cc-radius-pill);
  padding: 1px 7px; flex-shrink: 0; min-width: 22px; text-align: center;
  transition: background 0.2s, color 0.2s;
}
.pipeline-col-count.has-leads { background: var(--cc-primary); color: #fff; }
.pipeline-col-cards {
  padding: var(--cc-space-sm); overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 7px; min-height: 60px;
}

/* Lead cards */
.lead-card {
  background: var(--cc-surface); border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border);
  padding: var(--cc-space-md);
  cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s;
}
.lead-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); border-color: var(--cc-primary-light); }
.lead-card-top   { display: flex; align-items: flex-start; gap: var(--cc-space-sm); margin-bottom: var(--cc-space-sm); }
.lead-avatar {
  width: calc(26px + var(--cc-size) * 2px);
  height: calc(26px + var(--cc-size) * 2px);
  border-radius: 50%;
  background: var(--cc-primary-light); color: var(--cc-primary-dark);
  font-size: var(--cc-text-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lead-name      { font-size: var(--cc-text-base); font-weight: 600; color: var(--cc-text); line-height: 1.3; word-break: break-word; }
.lead-phone     { font-size: var(--cc-text-xs); color: var(--cc-text-muted); margin-top: 2px; }
.lead-card-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* Pills */
.due-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--cc-text-xs); font-weight: 500;
  padding: 2px 7px; border-radius: var(--cc-radius-pill); white-space: nowrap;
}
.due-overdue  { background: var(--cc-danger-bg);    color: var(--cc-danger); }
.due-today    { background: var(--cc-warning-bg);   color: var(--cc-warning); }
.due-upcoming { background: var(--cc-primary-light); color: var(--cc-primary-dark); }
.due-none     { background: var(--cc-muted-bg);     color: var(--cc-text-muted); }
.rev-pill      { font-size: var(--cc-text-xs); font-weight: 500; padding: 2px 7px; border-radius: var(--cc-radius-pill); white-space: nowrap; }
.rev-confirmed { background: var(--cc-primary-light); color: var(--cc-primary-dark); }
.rev-potential { background: var(--cc-muted-bg);     color: var(--cc-text-muted); }
.source-pill   { font-size: var(--cc-text-xs); color: var(--cc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

/* Empty / skeleton / load more */
.col-empty { padding: 18px 12px; text-align: center; font-size: var(--cc-text-xs); color: var(--cc-text-light); font-style: italic; }
.skeleton-card { background: var(--cc-surface); border-radius: var(--cc-radius-sm); border: 1px solid var(--cc-border); padding: var(--cc-space-md); }
.skeleton-line { background: var(--cc-muted-bg); border-radius: 4px; margin-bottom: 7px; animation: skshimmer 1.4s ease-in-out infinite; }
.skeleton-line:last-child { margin-bottom: 0; }
@keyframes skshimmer { 0%,100%{opacity:1} 50%{opacity:0.4} }
.load-more-btn {
  width: 100%; padding: 7px; font-size: var(--cc-text-xs); color: var(--cc-text-muted);
  background: transparent; border: none; border-top: 1px solid var(--cc-border);
  cursor: pointer; flex-shrink: 0; transition: background 0.12s;
}
.load-more-btn:hover    { background: var(--cc-primary-light); color: var(--cc-primary-dark); }
.load-more-btn:disabled { cursor: default; color: var(--cc-text-light); }

/* Filters / search */
.btn-filters { font-size: var(--cc-text-sm); color: var(--cc-text); border-color: var(--cc-border); }
.btn-filters:hover, .btn-filters:focus { background: var(--cc-muted-bg); }
.btn-filters.filter-active { background: var(--cc-primary); color: #fff; border-color: var(--cc-primary); }
#boardSearch { width: 240px; font-size: var(--cc-text-base); border-color: var(--cc-border); border-radius: var(--cc-radius-sm); }
#boardSearch:focus { border-color: var(--cc-primary); box-shadow: none; }
#hideEmptyWrap { display: none; align-items: center; gap: 6px; font-size: var(--cc-text-sm); color: var(--cc-text-muted); cursor: pointer; user-select: none; }
#hideEmptyWrap input { cursor: pointer; }

/* Offcanvas */
#leadOffcanvas { width: 800px; max-width: 100%; }
@media (max-width: 1199.98px) { #leadOffcanvas { width: 100%; } }
#leadLoader { background: rgba(255,255,255,0.85); z-index: 10; }
#leadQuickViewFrame.invisible { visibility: hidden; }

/* Lead views grid */
.lead-views-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--cc-space-lg); }
.lead-view-card {
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius);
  padding: var(--cc-space-sm) var(--cc-space-xl);
  cursor: pointer; background: var(--cc-surface); transition: .15s; width: 100%;
}
.lead-view-card:hover  { border-color: var(--cc-primary-light); }
.lead-view-card.active { border-color: var(--cc-primary); box-shadow: 0 0 0 1px var(--cc-primary); }
.lead-view-title { font-size: var(--cc-text-xs); color: var(--cc-text-muted); }
.lead-view-count { font-size: var(--cc-text-xl); font-weight: 600; margin-top: 4px; color: var(--cc-text); }

/* ==========================================================================
   8. SECONDARY-MENU LAYOUT — reusable vertical sub-nav + content column.
      Used by settings, products, funnels, and any future section that
      needs a sidenav + detail page (not settings-specific).
   ========================================================================== */
.secondary-menu,
.secondary-menu ~ *,
.content-page-wrap,
.content-col {
  font-family: var(--cc-font);
}

/* Sidebar */
.secondary-menu {
  width: 200px; flex-shrink: 0; padding-top: 4px;
  display: flex; flex-direction: column;
}
.secondary-menu-group-label {
  display: block; font-size: var(--cc-text-xs); font-weight: 600;
  color: var(--cc-text-muted); text-transform: uppercase; letter-spacing: .07em;
  padding: 16px 12px 6px; user-select: none;
}
.secondary-menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; margin: 1px 0; border-radius: var(--cc-radius-sm);
  font-size: var(--cc-text-md); font-weight: 400; color: var(--cc-text);
  text-decoration: none; transition: background .1s, color .1s;
  white-space: nowrap; width: 100%; box-sizing: border-box;
}
.secondary-menu-item i { font-size: 15px; flex-shrink: 0; color: var(--cc-text-muted); transition: color .1s; }
.secondary-menu-item:hover           { background-color: var(--secondary-menu-hover-bg); color: var(--secondary-menu-hover-color); text-decoration: none; }
.secondary-menu-item:hover i         { color: var(--secondary-menu-hover-color); }
.secondary-menu-item.active          { background-color: var(--secondary-menu-active-bg); color: var(--secondary-menu-active-color); font-weight: 500; }
.secondary-menu-item.active i        { color: var(--secondary-menu-active-color); }

/* Page structure */
.content-page-wrap { max-width: 1200px; }
.content-col        { max-width: 1000px; flex: 1; min-width: 0; }

/* Headings */
.content-page-title {
  font-size: var(--cc-text-2xl); font-weight: 600;
  color: var(--cc-text); margin-bottom: 4px;
}
.content-page-subtitle {
  font-size: var(--cc-text-base); color: var(--cc-text-muted); margin-bottom: 1.75rem;
}
.section-heading {
  font-size: var(--cc-text-md); font-weight: 600; color: var(--cc-text);
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--cc-border-light);
}

/* Form overrides inside a secondary-menu content page */
.content-page-wrap .form-label,
.content-page-wrap label.form-label {
  font-size: var(--cc-label-size);
  font-weight: var(--cc-label-weight);
  color: var(--cc-text-muted);
}
.content-page-wrap .form-control,
.content-page-wrap .form-select {
  border-color: var(--cc-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text);
}
.content-page-wrap .form-control:focus,
.content-page-wrap .form-select:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 3px rgba(var(--cc-primary-rgb), .1);
}

/* Hint / save flash */
.form-hint  { font-size: var(--cc-text-xs); color: var(--cc-text-muted); margin-top: 4px; }
.save-flash { font-size: var(--cc-text-base); color: var(--cc-primary); }

/* Toggle switch */
.toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #d1d5db;
  border-radius: 22px; cursor: pointer; transition: background .2s;
}
.toggle-slider:before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle-switch input:checked + .toggle-slider { background: var(--cc-primary); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--cc-border-light);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row-label { font-size: var(--cc-text-md); font-weight: 500; color: var(--cc-text); }
.toggle-row-desc  { font-size: var(--cc-text-sm); color: var(--cc-text-muted); margin-top: 2px; }

/* ==========================================================================
   9. MOBILE — sidenav-page drill-down pattern (reusable, not settings-only)
   ========================================================================== */
@media (max-width: 768px) {
  .content-page-wrap   { flex-direction: column !important; gap: 0 !important; }
  .secondary-menu       { display: none !important; }
  .content-col          { max-width: 100% !important; width: 100%; padding: 0 4px; }
  .content-page-title    { font-size: var(--cc-text-xl) !important; }
  .content-page-subtitle { font-size: var(--cc-text-sm) !important; margin-bottom: 1rem !important; }

  /* Mobile section list */
  .mobile-list { width: 100%; padding: 0 4px; }
  .mobile-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; text-decoration: none;
    border-bottom: 1px solid var(--cc-border-light); background: var(--cc-surface);
    transition: background .1s;
  }
  .mobile-row:last-child { border-bottom: none; }
  .mobile-row:hover { background: var(--cc-bg); }
  .mobile-row-icon {
    width: 36px; height: 36px; border-radius: var(--cc-radius-sm);
    background: var(--cc-muted-bg); display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
  }
  .mobile-row-icon i    { font-size: 17px; color: var(--cc-text-muted); }
  .mobile-row-text      { flex: 1; min-width: 0; }
  .mobile-row-title     { font-size: 14px; font-weight: 500; color: var(--cc-text); }
  .mobile-row-subtitle  { font-size: 12px; color: var(--cc-text-muted); margin-top: 1px; }
  .mobile-row-chevron   { font-size: 18px; color: var(--cc-text-light); flex-shrink: 0; }

  /* Back button */
  .mobile-back {
    display: flex !important; align-items: center; gap: 4px;
    padding: 12px 4px 6px; font-size: 14px; font-weight: 500;
    color: var(--cc-text-muted); text-decoration: none;
  }
  .mobile-back i { font-size: 18px; }
  .mobile-back:hover { color: var(--cc-text); }
}

@media (min-width: 769px) {
  .mobile-list { display: none !important; }
  .mobile-back { display: none !important; }
}

/* ==========================================================================
   10. CUSTOM SEARCHABLE DROPDOWNS
   Reusable for timezone, phone country, or any searchable select.
   Usage: wrap with class "tz-wrapper" or "ph-wrapper"
   ========================================================================== */
.tz-wrapper, .ph-wrapper { position: relative; }

/* Trigger button */
.tz-display, .ph-display {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px var(--cc-input-pad-x);
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
  background: var(--cc-surface); cursor: pointer;
  font-size: var(--cc-text-base); color: var(--cc-text);
  height: var(--cc-input-h); user-select: none;
  font-family: var(--cc-font); transition: border-color .15s;
  box-sizing: border-box;
}
.tz-display:hover, .ph-display:hover { border-color: #adb5bd; }

/* Chevron */
.tz-display .tz-chevron,
.ph-display .ph-chevron {
  font-size: 11px; color: var(--cc-text-muted); transition: transform .2s; flex-shrink: 0;
}
.tz-display.open .tz-chevron,
.ph-display.open .ph-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.tz-dropdown, .ph-dropdown {
  display: none; position: absolute; z-index: 1050;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--cc-surface); border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius); overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.tz-dropdown.open, .ph-dropdown.open { display: block; }

/* Search input */
.tz-search-wrap, .ph-search-wrap {
  padding: var(--cc-space-sm); border-bottom: 1px solid var(--cc-border-light);
}
.tz-search, .ph-search {
  width: 100%; box-sizing: border-box;
  padding: 7px var(--cc-input-pad-x) 7px 32px;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
  font-size: var(--cc-text-base); color: var(--cc-text); outline: none;
  font-family: var(--cc-font);
  background: var(--cc-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
}
.tz-search:focus, .ph-search:focus { border-color: var(--cc-primary); background-color: var(--cc-surface); }

/* Options */
.tz-list, .ph-list { max-height: 240px; overflow-y: auto; }
.tz-option, .ph-option {
  padding: 8px var(--cc-space-md);
  font-size: var(--cc-text-base); color: var(--cc-text);
  cursor: pointer; transition: background .1s; font-family: var(--cc-font);
}
.tz-option:hover, .ph-option:hover       { background: var(--secondary-menu-hover-bg); color: var(--secondary-menu-hover-color); }
.tz-option.selected, .ph-option.selected { background: var(--secondary-menu-active-bg); color: var(--secondary-menu-active-color); font-weight: 500; }
.tz-option.hidden, .ph-option.hidden     { display: none; }

/* No results */
.tz-no-results, .ph-no-results {
  padding: 12px; font-size: var(--cc-text-base);
  color: var(--cc-text-muted); text-align: center; display: none;
}

/* Divider row inside ph-list */
.ph-option-divider {
  padding: 4px var(--cc-space-md); font-size: var(--cc-text-xs);
  color: var(--cc-border); border-top: 1px solid var(--cc-border-light);
}

/* Phone input row — flag button + number input side by side */
.ph-input-row { display: flex; gap: 0; align-items: stretch; }
.ph-input-row .ph-wrapper { width: auto; flex-shrink: 0; max-height: var(--cc-input-h); }
.ph-input-row .ph-wrapper .ph-display {
  border-radius: var(--cc-radius-sm) 0 0 var(--cc-radius-sm);
  border-right: none; white-space: nowrap;
  padding: 0 10px 0 8px; gap: 6px; height: 100%;
}
.ph-input-row input[type=tel] {
  border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
  flex: 1; height: var(--cc-input-h);
}
.ph-dropdown { min-width: 260px; }

/* ==========================================================================
   11. LOGO & ICON UPLOAD
   ========================================================================== */
.cc-asset-upload {
  display: flex; align-items: normal; gap: var(--cc-space-md);
}
.cc-asset-preview {
  flex-shrink: 0; width: 80px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
  background: var(--cc-bg); overflow: hidden;
}
.cc-asset-preview.logo { height: 52px; width: 140px; }
.cc-asset-preview.icon { height: 52px; width: 140px; }
.cc-asset-preview img  { width: 100%; height: 100%; object-fit: contain; }
.cc-asset-info { display: flex; flex-direction: column; gap: var(--cc-space-xs); max-width: 140px;}

@media (max-width: 768px) {
  .cc-logo-icon-grid          { flex-direction: column !important; }
  .cc-logo-icon-grid > div    { width: 100% !important; }
  .cc-asset-preview.logo      { width: 120px; height: 60px; }
  .cc-asset-preview.icon      { width: 120px; height: 60px; }
}
/* ==========================================================================
   12. AUTHENTICATION PAGES (login, register)
   Forces the auth card to stay centered regardless of what custom.css
   (loaded before this file) does to .row/.container. Bootstrap's
   .justify-content-center only works if the row is actually display:flex —
   this guarantees that.
   ========================================================================== */
.authentication {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
}

/* Login/register submit button + links — scoped to .authentication so
   these never touch .btn-primary or links anywhere else in the app.
   !important is needed on the link because Bootstrap's own .text-primary
   utility also ships !important, so a plain override can't beat it. */
.authentication .btn-primary {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #fff !important;
}
.authentication .btn-primary:hover,
.authentication .btn-primary:focus {
  background: #2b2b2b !important;
  border-color: #2b2b2b !important;
  color: #fff !important;
}
.authentication a,
.authentication .text-primary {
  color: #6b7280 !important;
}
.authentication a:hover {
  color: #374151 !important;
}