/* ==========================================================================
   CrewClever — Unified Design System
   All custom styling lives here. Change variables to restyle everything.
   ========================================================================== */

/* ── 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 — CrewClever ── */
  --cc-primary:          #FF4F00;
  --cc-primary-dark:     #CC3F00;
  --cc-primary-light:    #FFE8DC;
  --cc-primary-rgb:      255, 79, 0;

  /* ── Neutrals ── */
  --cc-bg:               #f8f8f6;
  --cc-sidebar-bg:       #f7f7f6;
  --cc-surface:          #FFFFFF;
  --cc-border:           #E8E8E4;
  --cc-border-light:     #EFEFEC;
  --cc-muted-bg:         #efeeeb;
  --cc-text:             #0F0F0F;
  --cc-text-muted:       #6B6B6B;
  --cc-text-light:       #c8c8c4;

  /* ── Semantic ── */
  --cc-danger:           #A32D2D;
  --cc-danger-bg:        #FCEBEB;
  --cc-warning:          #854F0B;
  --cc-warning-bg:       #FAEEDA;
  --cc-success:          #1E9E6B;
  --cc-success-bg:       #D4F0E4;

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

  /* ── Purple — active/selected states (Zapier-inspired) ── */
  --cc-purple:           #2d3e50;
  --cc-purple-dark:      #1a2530;
  --cc-purple-light:     #e8ecf0;
  --cc-purple-border:    #b0bec8;

  /* ── Nav colors — used by BOTH main sidebar and settings secondary nav ──
     Change these two groups and both navs update together              */
  --settings-nav-active-bg:    #e8ecf0;
  --settings-nav-active-color: #2d3e50;
  --settings-nav-hover-bg:     #f0f3f5;
  --settings-nav-hover-color:  #2d3e50;

  /* ── 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);
}
.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-family: var(--cc-font);
  padding: 0 var(--cc-space-lg);
  border-radius: var(--cc-radius-sm);
  align-items: 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);
}
.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;
}
.btn-dark {
  background: transparent;
  border: 1px solid #0F0F0F;
  color: #0F0F0F;
}
.btn-dark:hover, .btn-dark:focus {
  background: #0F0F0F;
  border-color: #0F0F0F;
  color: #fff;
}
.btn-outline-primary {
  background: transparent;
  border-color: var(--cc-primary);
  color: var(--cc-primary);
}
.btn-outline-primary:hover {
  background: var(--cc-primary);
  border-color: var(--cc-primary);
  color: #fff;
}
.btn-outline-secondary {
  background: transparent;
  border-color: #0F0F0F;
  color: #0F0F0F;
}
.btn-outline-secondary:hover {
  background: var(--cc-muted-bg);
  border-color: #0F0F0F;
  color: #0F0F0F;
}

/* ==========================================================================
   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-sidebar-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: 2rem;
  margin-top: 6px;
}
.app-sidebar .side-menu__label {
  font-size: var(--cc-text-base);
  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 */
.app-sidebar .side-menu__item.active {
  background-color: var(--settings-nav-active-bg) !important;
  font-weight: 500;
  margin: 5px 0;
  border-radius: var(--cc-radius);
}
.app-sidebar .side-menu__item.active .side-menu__label {
  color: var(--settings-nav-active-color) !important;
}
.app-sidebar .side-menu__item.active .side-menu__icon {
  fill: var(--settings-nav-active-color);
  color: var(--settings-nav-active-color);
}

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

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

/* Tabs */
.queue-tab {
  display: inline-flex; align-items: center; gap: var(--cc-space-xs);
  font-size: var(--cc-text-sm); font-weight: 500;
  padding: var(--cc-space-xs) var(--cc-space-md);
  border-radius: var(--cc-radius-pill); cursor: pointer;
  border: 1px solid var(--cc-border);
  background: transparent; color: var(--cc-text-muted);
  transition: all 0.15s; white-space: nowrap;
}
.queue-tab.active             { background: transparent; color: var(--cc-purple); border-color: transparent; border-bottom: 2px solid var(--cc-purple); border-radius: 0; font-weight: 600; }
.queue-tab:hover:not(.active) { background: var(--cc-muted-bg); color: var(--cc-text); border-color: var(--cc-border); }

/* 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-purple-light); color: var(--cc-purple-dark); font-weight: 600; }
.view-toggle-btn:hover:not(.active) { background: var(--cc-muted-bg); color: var(--cc-text); }

/* 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-muted-bg); 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-muted-bg); color: var(--cc-text-muted); font-weight: 600; }
.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 8px rgba(45,62,80,0.08); border-color: var(--cc-purple-border); }
.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-purple-light); color: var(--cc-purple-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-purple-light); color: var(--cc-purple-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-purple-light); color: var(--cc-purple-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; }
.health-dot    { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }

/* 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-purple-light); color: var(--cc-purple-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-purple); color: #fff; border-color: var(--cc-purple); }
#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-purple); box-shadow: 0 0 0 1px var(--cc-purple); }
.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. SETTINGS PAGES — secondary vertical nav + content layout
   ========================================================================== */
.settings-sidenav,
.settings-sidenav ~ *,
.settings-page-wrap,
.settings-content-col {
  font-family: var(--cc-font);
}

/* Desktop sidebar */
.settings-sidenav {
  width: 200px; flex-shrink: 0; padding-top: 4px;
  display: flex; flex-direction: column;
}
.settings-sidenav-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;
}
.settings-sidenav-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;
}
.settings-sidenav-item i { font-size: 15px; flex-shrink: 0; color: var(--cc-text-muted); transition: color .1s; }
.settings-sidenav-item:hover           { color: var(--settings-nav-hover-color); text-decoration: none; }
.settings-sidenav-item:hover i         { color: var(--settings-nav-hover-color); }
.settings-sidenav-item.active          { color: var(--settings-nav-active-color); font-weight: 500; }
.settings-sidenav-item.active i        { color: var(--settings-nav-active-color); }

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

/* Headings */
.settings-page-title {
  font-size: var(--cc-text-2xl); font-weight: 600;
  color: var(--cc-text); margin-bottom: 4px;
}
.settings-page-subtitle {
  font-size: var(--cc-text-base); color: var(--cc-text-muted); margin-bottom: 1.75rem;
}
.settings-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 settings */
.settings-page-wrap .form-label,
.settings-page-wrap label.form-label {
  font-size: var(--cc-label-size);
  font-weight: var(--cc-label-weight);
  color: var(--cc-text-muted);
}
.settings-page-wrap .form-control,
.settings-page-wrap .form-select {
  border-color: var(--cc-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text);
}
.settings-page-wrap .form-control:focus,
.settings-page-wrap .form-select:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 3px rgba(var(--cc-primary-rgb), .10);
}

/* Hint / save flash */
.settings-hint       { font-size: var(--cc-text-xs); color: var(--cc-text-muted); margin-top: 4px; }
.settings-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); }
.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--cc-border-light);
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-toggle-label { font-size: var(--cc-text-md); font-weight: 500; color: var(--cc-text); }
.settings-toggle-desc  { font-size: var(--cc-text-sm); color: var(--cc-text-muted); margin-top: 2px; }

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

  /* Mobile section list */
  .settings-mobile-list { width: 100%; padding: 0 4px; }
  .settings-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;
  }
  .settings-mobile-row:last-child { border-bottom: none; }
  .settings-mobile-row:hover { background: var(--cc-bg); }
  .settings-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;
  }
  .settings-mobile-row-icon i    { font-size: 17px; color: var(--cc-text-muted); }
  .settings-mobile-row-text      { flex: 1; min-width: 0; }
  .settings-mobile-row-title     { font-size: 14px; font-weight: 500; color: var(--cc-text); }
  .settings-mobile-row-subtitle  { font-size: 12px; color: var(--cc-text-muted); margin-top: 1px; }
  .settings-mobile-row-chevron   { font-size: 18px; color: var(--cc-text-light); flex-shrink: 0; }

  /* Back button */
  .settings-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;
  }
  .settings-mobile-back i { font-size: 18px; }
  .settings-mobile-back:hover { color: var(--cc-text); }
}

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

/* ==========================================================================
   10. CUSTOM SEARCHABLE DROPDOWNS
   ========================================================================== */
.tz-wrapper, .ph-wrapper { position: relative; }

.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; }

.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); }

.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; }

.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);
}

.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(--settings-nav-hover-bg); color: var(--settings-nav-hover-color); }
.tz-option.selected, .ph-option.selected { background: var(--settings-nav-active-bg); color: var(--settings-nav-active-color); font-weight: 500; }
.tz-option.hidden, .ph-option.hidden     { display: none; }

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

.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);
}

.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. CREWCLEVER STAGE PANEL — quick view panel styles
   ========================================================================== */

/* Section cards inside stage panels */
.nl-section {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.nl-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; cursor: pointer; user-select: none;
  transition: background 0.1s;
}
.nl-section-header:hover { background: var(--cc-muted-bg); }
.nl-section-header-left {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--cc-text-base); font-weight: 500; color: var(--cc-text);
}
.nl-section-header-left i { font-size: 15px; color: var(--cc-text-muted); }
.nl-section-toggle {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cc-muted-bg); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--cc-text); transition: background 0.12s;
  flex-shrink: 0; line-height: 1;
}
.nl-section-toggle.open { background: var(--cc-purple); color: #fff; }
.nl-section-body {
  display: none; border-top: 1px solid var(--cc-border-light); padding: 14px 16px;
}
.nl-section-body.open { display: block; }

/* Move stage bar */
.nlp-move-bar {
  background: var(--cc-surface); border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius); padding: 12px 14px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.nlp-move-label { font-size: var(--cc-text-sm); color: var(--cc-text-muted); flex-shrink: 0; }
.nlp-next-btn {
  flex: 1; padding: 8px 12px;
  background: var(--cc-purple); color: #fff;
  border: none; border-radius: var(--cc-radius-sm);
  font-size: var(--cc-text-base); font-weight: 500; cursor: pointer;
  text-align: left; display: flex; align-items: center;
  justify-content: space-between; transition: background 0.12s;
}
.nlp-next-btn:hover { background: var(--cc-purple-dark); }
.nlp-next-btn .nlp-next-arrow {
  background: rgba(255,255,255,0.2); border-radius: 20px;
  padding: 2px 8px; font-size: 11px;
}
.nlp-dots-btn {
  width: 34px; height: 34px;
  background: var(--cc-muted-bg); border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--cc-text); transition: background 0.12s;
  font-weight: 700; letter-spacing: 1px; flex-shrink: 0;
}
.nlp-dots-btn:hover { background: var(--cc-border); }

/* Contact button in mini header */
.nlp-contact-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; background: var(--cc-primary); color: #fff;
  border: none; border-radius: var(--cc-radius-sm);
  font-size: var(--cc-text-sm); font-weight: 500; cursor: pointer;
  transition: background 0.12s; white-space: nowrap;
}
.nlp-contact-btn:hover { background: var(--cc-primary-dark); }

/* Type buttons in contact section */
.nlp-type-btn {
  padding: 7px 14px;
  border: 1px solid #0F0F0F; border-radius: var(--cc-radius-sm);
  background: transparent; font-size: var(--cc-text-sm); font-weight: 500;
  color: #0F0F0F; cursor: pointer; transition: all 0.12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.nlp-type-btn:hover { background: var(--cc-muted-bg); }
.nlp-type-btn.active { background: #2d3e50; color: #fff; border-color: #2d3e50; }
.nlp-type-btn i { font-size: 13px; }

/* Day quick buttons */
.nlp-day-btn {
  flex: 1; padding: 6px 3px;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
  background: var(--cc-surface); font-size: var(--cc-text-xs);
  color: var(--cc-text-muted); cursor: pointer; transition: all 0.12s; text-align: center;
}
.nlp-day-btn:hover { background: var(--cc-muted-bg); }
.nlp-day-btn.active { background: var(--cc-purple); color: #fff; border-color: var(--cc-purple); }

/* ==========================================================================
   13. PIPELINE COLUMN STAGE ACCENTS
   ========================================================================== */
.pipeline-col-header { position: relative; }
.pipeline-col[data-stage="lead_intake"] .pipeline-col-title::before   { content:''; display:inline-block; width:3px; height:13px; background:#FF4F00; border-radius:2px; margin-right:7px; vertical-align:middle; }
.pipeline-col[data-stage="assessment"] .pipeline-col-title::before    { content:''; display:inline-block; width:3px; height:13px; background:#2d3e50; border-radius:2px; margin-right:7px; vertical-align:middle; }
.pipeline-col[data-stage="quoting"] .pipeline-col-title::before       { content:''; display:inline-block; width:3px; height:13px; background:#0ea5e9; border-radius:2px; margin-right:7px; vertical-align:middle; }
.pipeline-col[data-stage="order"] .pipeline-col-title::before         { content:''; display:inline-block; width:3px; height:13px; background:#10b981; border-radius:2px; margin-right:7px; vertical-align:middle; }
.pipeline-col[data-stage="invoicing"] .pipeline-col-title::before     { content:''; display:inline-block; width:3px; height:13px; background:#f59e0b; border-radius:2px; margin-right:7px; vertical-align:middle; }
.pipeline-col[data-stage="closed"] .pipeline-col-title::before        { content:''; display:inline-block; width:3px; height:13px; background:#6B6B6B; border-radius:2px; margin-right:7px; vertical-align:middle; }

/* ==========================================================================
   14. QUICK VIEW — lead workspace page
   ========================================================================== */

/* ── Back link ── */
.qv-back-link {
  color: var(--cc-text-muted);
  text-decoration: none;
  font-size: var(--cc-text-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.12s;
}
.qv-back-link:hover { color: var(--cc-text); }

/* ── Collapsible sections ── */
.qv-section {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--cc-surface);
}
.qv-section-header {
  padding: 11px 16px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  transition: background 0.12s;
}
.qv-section-header:hover { background: var(--cc-muted-bg); }
.qv-section-title {
  font-size: 11px; font-weight: 600;
  color: var(--cc-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 8px;
}
.qv-section-title i { color: var(--cc-text-muted) !important; font-size: 14px; }
.qv-section-chevron {
  font-size: 12px; color: var(--cc-text-muted);
  transition: transform 0.2s;
}
.qv-section-chevron.open { transform: rotate(180deg); }
.qv-section-body {
  border-top: 1px solid var(--cc-border-light);
  display: none; flex-direction: column; gap: 0;
}
.qv-section-body.open { display: flex; }
.qv-section-body-inner { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

/* ── Stage panel styles ── */
.sp-section-label {
  font-size: 11px; font-weight: 500; color: var(--cc-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.sp-type-row { display: flex; gap: 6px; }
.sp-type-btn {
  flex: 1; padding: 7px 6px; text-align: center;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
  background: var(--cc-surface); font-size: 12px; font-weight: 500;
  color: var(--cc-text-muted); cursor: pointer; transition: all 0.12s;
}
.sp-type-btn:hover { background: var(--cc-muted-bg); color: var(--cc-text); }
.sp-type-btn.active {
  background: var(--cc-purple-light);
  color: var(--cc-purple-dark);
  border-color: var(--cc-purple-border);
}
.sp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-pill {
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--cc-border);
  font-size: 12px; color: var(--cc-text-muted); cursor: pointer;
  transition: all 0.12s; user-select: none;
}
.sp-pill:hover { border-color: var(--cc-border); color: var(--cc-text); background: var(--cc-muted-bg); }
.sp-pill.active { background: var(--cc-muted-bg); color: var(--cc-text); border-color: #c8c8c4; }
.sp-day-row { display: flex; gap: 6px; }
.sp-day-btn {
  flex: 1; padding: 6px 4px; text-align: center;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
  background: var(--cc-surface); font-size: 11px;
  color: var(--cc-text-muted); cursor: pointer; transition: all 0.12s;
}
.sp-day-btn:hover { background: var(--cc-muted-bg); }
.sp-day-btn.active {
  background: var(--cc-purple-light);
  color: var(--cc-purple-dark);
  border-color: var(--cc-purple-border);
}
.sp-divider { height: 1px; background: var(--cc-border-light); }
.sp-move-main {
  width: 100%; padding: 9px 13px; background: var(--cc-muted-bg);
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
  font-size: 13px; font-weight: 500; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color 0.12s; color: var(--cc-text-muted);
}
.sp-move-main:hover { border-color: #c8c8c4; }
.sp-stage-dd {
  display: none; border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm); overflow: hidden; margin-top: 6px;
}
.sp-stage-dd.open { display: block; }
.sp-dd-grp {
  padding: 7px 12px 4px; font-size: 10px; font-weight: 500;
  color: var(--cc-text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; background: var(--cc-muted-bg);
}
.sp-dd-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-top: 1px solid var(--cc-border-light); cursor: pointer;
  transition: background 0.12s; background: var(--cc-surface);
}
.sp-dd-item:hover { background: var(--cc-muted-bg); }
.sp-dd-item.is-cur { opacity: 0.4; pointer-events: none; }
.sp-dd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sp-dd-name { font-size: 13px; color: var(--cc-text); flex: 1; }
.sp-dd-tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 20px; }
.sp-dd-tag.next { background: var(--cc-purple-light); color: var(--cc-purple-dark); }
.sp-dd-tag.skip { background: var(--cc-muted-bg); color: var(--cc-text-muted); }
.sp-move-confirm {
  width: 100%; padding: 10px; background: var(--cc-purple);
  color: #fff; border: none; border-radius: var(--cc-radius-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 0.15s; margin-top: 8px;
}
.sp-move-confirm:hover { background: var(--cc-purple-dark); }

/* ── Log activity section ── */
.act-type-select-wrap { position: relative; }
.act-type-select-wrap select {
  width: 100%; padding: 9px 36px 9px 14px;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
  background: var(--cc-surface); font-size: 13px; color: var(--cc-text);
  appearance: none; cursor: pointer; font-family: var(--cc-font);
}
.act-type-select-wrap::after {
  content: '∨'; position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); font-size: 12px;
  color: var(--cc-text-muted); pointer-events: none;
}
.act-form { display: none; flex-direction: column; gap: 10px; }
.act-form.active { display: flex; }

/* ── Estimate line items ── */
.est-line { padding: 10px 30px 8px 10px; }
.btn-remove-line {
  top: 8px; right: 8px; width: 20px; height: 20px;
  background: var(--cc-danger-bg); border-radius: 50%;
  color: var(--cc-danger); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.btn-remove-line:hover { background: #fecaca; }

/* ── Misc row buttons ── */
.measurement-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--cc-border-light);
}
.measurement-row:last-child { border-bottom: none; }
.measurement-row input { font-size: 12px; }
.btn-add-row {
  font-size: 12px; color: var(--cc-text-muted); background: none;
  border: 1px dashed var(--cc-border); border-radius: var(--cc-radius-sm);
  padding: 6px 12px; cursor: pointer; width: 100%;
  margin-top: 6px; transition: all 0.12s;
}
.btn-add-row:hover { border-color: #c8c8c4; color: var(--cc-text); }
.btn-remove-row {
  background: none; border: none; color: var(--cc-text-light);
  font-size: 16px; cursor: pointer; padding: 0 2px;
  line-height: 1; transition: color 0.12s; flex-shrink: 0;
}
.btn-remove-row:hover { color: var(--cc-danger); }

/* ── Contact shortcut buttons — all same outline dark style ── */
.contact-shortcut {
  border-color: var(--cc-border) !important;
  color: var(--cc-text) !important;
  background: transparent !important;
}
.contact-shortcut:hover {
  background: var(--cc-muted-bg) !important;
  border-color: var(--cc-text) !important;
  color: var(--cc-text) !important;
}

/* ── Lead avatar in header ── */
.lead-header-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cc-muted-bg);
  color: var(--cc-text);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Activity timeline ── */
.tl-entry .rounded-circle { flex-shrink: 0; }

/* ==========================================================================
   15. MISC FIXES
   ========================================================================== */

/* Back to Jobs / back navigation links — neutral not orange */
.qv-back-link,
a[href*="jobs"].back-link,
.back-to-jobs {
  color: var(--cc-text-muted) !important;
  text-decoration: none;
  font-size: var(--cc-text-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.qv-back-link:hover,
a[href*="jobs"].back-link:hover,
.back-to-jobs:hover {
  color: var(--cc-text) !important;
}

/* Mini header inside new-lead-panel — stage badge neutral */
.nlp-stage-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--cc-muted-bg);
  color: var(--cc-text-muted);
  border: 1px solid var(--cc-border);
}

/* nlp-move-bar next stage button — Crew Orange (primary action) */
.nlp-next-btn {
  background: var(--cc-primary) !important;
  border: none;
}
.nlp-next-btn:hover {
  background: var(--cc-primary-dark) !important;
}

/* Section toggle open state — charcoal not hard black */
.nlp-section-toggle.open {
  background: var(--cc-purple) !important;
  color: #fff;
}

/* Follow-up badge — warning amber */
.nlp-fu-badge {
  font-size: 11px;
  color: var(--cc-warning);
  background: var(--cc-warning-bg);
  border: 1px solid #F5D6A0;
  padding: 3px 9px;
  border-radius: 20px;
  margin-left: 6px;
}

/* Back to Jobs link */
#quickViewBackArrow {
  color: var(--cc-text-muted) !important;
  font-weight: 500;
}
#quickViewBackArrow:hover {
  color: var(--cc-text) !important;
}

/* nlp-log-btn — now uses standard outline dark style via .nlp-section-body .btn-outline-secondary */

/* nlp-next-btn removed — panel now uses sp-move-main dropdown */

/* ── Buttons inside nlp collapse panels — outline dark, auto width ── */
.nlp-section-body .btn-outline-secondary {
  border-color: #0F0F0F;
  color: #0F0F0F;
  background: transparent;
}
.nlp-section-body .btn-outline-secondary:hover {
  background: var(--cc-muted-bg);
  border-color: #0F0F0F;
  color: #0F0F0F;
}

/* ==========================================================================
   16. LEAD HEADER — mobile optimised
   ========================================================================== */

/* Contact dropdown items */
.contact-dd-item {
  border-bottom: 1px solid var(--cc-border-light);
  transition: background 0.1s;
}
.contact-dd-item:last-child { border-bottom: none; }
.contact-dd-item:hover { background: var(--cc-muted-bg); }

/* Copy button */
.copy-btn {
  background: var(--cc-muted-bg);
  border: none;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--cc-text-muted);
  cursor: pointer;
  line-height: 1.6;
  white-space: nowrap;
}
.copy-btn:hover { color: var(--cc-text); background: #e5e5e2; }

/* Lead header contact detail row truncation */
@media (max-width: 480px) {
  .lead-header-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   16. LEAD HEADER — mobile optimised
   ========================================================================== */

/* Contact dropdown items */
.contact-dd-item {
  border-bottom: 1px solid var(--cc-border-light);
  transition: background 0.1s;
}
.contact-dd-item:last-child { border-bottom: none; }
.contact-dd-item:hover { background: var(--cc-muted-bg); }

/* Copy button — standalone pill */
.copy-btn {
  background: var(--cc-muted-bg);
  border: none;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--cc-text-muted);
  cursor: pointer;
  line-height: 1.6;
  white-space: nowrap;
}
.copy-btn:hover { color: var(--cc-text); background: #e5e5e2; }

/* Lead header contact detail row truncation */
@media (max-width: 480px) {
  .lead-header-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   17. PANEL HISTORY SECTIONS
   ========================================================================== */

.nlp-history-wrap { margin-bottom: 10px; }
.nlp-history-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--cc-text-muted); margin-bottom: 6px;
}
.nlp-history-list {
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: var(--cc-border) transparent;
}
.nlp-history-list::-webkit-scrollbar { width: 4px; }
.nlp-history-list::-webkit-scrollbar-thumb { background: var(--cc-border); border-radius: 4px; }
.nlp-history-list .nlp-history-item { margin-bottom: 0; }
.nlp-history-item {
  background: var(--cc-muted-bg); border-radius: 6px;
  padding: 8px 10px; font-size: 12px;
}
.nlp-history-item-top {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.nlp-history-item-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cc-surface); border: 1px solid var(--cc-border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nlp-history-item-icon i { font-size: 11px; color: var(--cc-text-muted); }
.nlp-history-item-title { font-size: 12px; font-weight: 500; color: var(--cc-text); flex: 1; }
.nlp-history-item-time  { font-size: 11px; color: var(--cc-text-muted); }
.nlp-history-item-note  {
  font-size: 12px; color: var(--cc-text-muted);
  margin-top: 2px; padding-left: 28px; line-height: 1.4;
}
.nlp-history-loader {
  padding: 8px 0; display: flex; justify-content: center;
}
.nlp-history-divider {
  height: 1px; background: var(--cc-border-light); margin: 10px 0;
}
.nlp-show-more-btn {
  width: 100%; padding: 5px; font-size: 11px; color: var(--cc-text-muted);
  background: transparent; border: none;
  border-top: 1px solid var(--cc-border-light);
  cursor: pointer; margin-top: 4px; transition: color 0.12s;
}
.nlp-show-more-btn:hover { color: var(--cc-text); }

/* Current follow-up card */
.nlp-fu-card {
  background: var(--cc-muted-bg); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 10px;
}
.nlp-fu-card-icon        { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.nlp-fu-card-icon.overdue  { color: var(--cc-danger); }
.nlp-fu-card-icon.today    { color: var(--cc-warning); }
.nlp-fu-card-icon.upcoming { color: var(--cc-purple); }
.nlp-fu-card-date   { font-size: 13px; font-weight: 500; color: var(--cc-text); margin: 0 0 2px; }
.nlp-fu-card-reason { font-size: 12px; color: var(--cc-text-muted); margin: 0; }

/* ==========================================================================
   18. PRODUCT MULTI-SELECT
   ========================================================================== */

.nlp-product-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 10px;
  background: var(--cc-purple-light); border: 1px solid var(--cc-purple-border);
  border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--cc-purple-dark);
}
.nlp-product-pill-remove {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--cc-purple-dark); font-size: 14px; line-height: 1;
  display: flex; align-items: center; opacity: 0.7;
}
.nlp-product-pill-remove:hover { opacity: 1; }
.nlp-product-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  font-size: 13px; color: var(--cc-text); cursor: pointer;
  border-bottom: 1px solid var(--cc-border-light); transition: background 0.1s;
}
.nlp-product-option:last-child { border-bottom: none; }
.nlp-product-option:hover { background: var(--cc-muted-bg); }
.nlp-product-option.selected { background: var(--cc-purple-light); }
.nlp-product-option input[type=checkbox] { flex-shrink: 0; accent-color: var(--cc-purple); }

/* ==========================================================================
   19. FILE UPLOAD
   ========================================================================== */

.nlp-upload-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--cc-muted-bg);
  border: 1px solid var(--cc-border); border-radius: 6px;
  margin-bottom: 6px; font-size: 12px;
}
.nlp-upload-item .nlp-upload-status {
  font-size: 11px; color: var(--cc-text-muted); margin-left: auto; flex-shrink: 0;
}
.nlp-upload-item .nlp-upload-remove {
  background: none; border: none; color: var(--cc-text-muted);
  font-size: 16px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
}
.nlp-upload-item .nlp-upload-remove:hover { color: var(--cc-danger); }

/* ==========================================================================
   20. ASSIGN DROPDOWN
   ========================================================================== */

.nlp-assign-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  cursor: pointer; border-bottom: 1px solid var(--cc-border-light);
  transition: background 0.1s;
}
.nlp-assign-option:last-child { border-bottom: none; }
.nlp-assign-option:hover { background: var(--cc-muted-bg); }

/* ==========================================================================
   21. ACTIVITY TIMELINE FILTERS
   ========================================================================== */

#tl-filter-type,
#tl-filter-date {
  border-color: var(--cc-border);
  font-size: 12px;
  color: var(--cc-text);
  background: var(--cc-surface);
  border-radius: var(--cc-radius-sm);
}
#tl-filter-type:focus,
#tl-filter-date:focus {
  border-color: var(--cc-purple);
  box-shadow: none;
}


/* Pins Settings to the true bottom of the sidebar, outside the
   scrolling nav list — .app-sidebar is position:fixed with
   .main-sidebar filling it at height:100%, so turning the sidebar
   into a flex column lets .main-sidebar scroll independently while
   .sidebar-bottom-menu stays fixed at the end of the column. */
.app-sidebar { display: flex !important; flex-direction: column !important; }
.app-sidebar .main-sidebar { flex: 1 1 auto !important; overflow-y: auto !important; height: auto !important; }
.sidebar-bottom-menu { flex: 0 0 auto; border-top: 1px solid rgba(0, 0, 0, .08); padding: 6px 0; }
/* ── Campaign brand icons ─────────────────────────────────────
   Brand colours for the Remix brand glyphs that campaign icons fall back to
   (app/services/attribution_icons.php adds  attr-brand attr-brand-<brand>).
   Two classes deep so they win over generic grey icon rules such as
   ".attr-icon-slot i". An uploaded campaign icon (an <img>) is unaffected. */
.attr-brand.attr-brand-google    { color: #4285F4; }
.attr-brand.attr-brand-youtube   { color: #FF0000; }
.attr-brand.attr-brand-meta      { color: #0866FF; }
.attr-brand.attr-brand-facebook  { color: #1877F2; }
.attr-brand.attr-brand-messenger { color: #0084FF; }
.attr-brand.attr-brand-instagram { color: #E4405F; }
.attr-brand.attr-brand-whatsapp  { color: #25D366; }
.attr-brand.attr-brand-microsoft { color: #00A4EF; }
.attr-brand.attr-brand-linkedin  { color: #0A66C2; }
.attr-brand.attr-brand-tiktok    { color: #000000; }

/* ══════════════════════════════════════════════════════════════════
   Settings building blocks (STYLE_GUIDE.md §2) — shared by any settings
   page: grouped option boxes, option rows, info notes. First used by
   Settings > Roles & permissions.
   ══════════════════════════════════════════════════════════════════ */
.set-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: #F4F7FF; border: 1px solid #E1E9FF; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; line-height: 1.55; color: #374151;
}
.set-note > i { color: var(--cc-primary); font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.set-note a { color: var(--cc-primary); }

.set-group {
  background: #FAFAF8; border: 1px solid #EEEEEA; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.set-group-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 10px;
}
.set-group-label i { font-size: 14px; color: #9ca3af; }

.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-top: 1px solid #EEEEEA;
}
.set-group-label + .set-row { border-top: 0; padding-top: 2px; }
.set-row-text { min-width: 0; flex: 1 1 auto; }
.set-row-label { font-size: 13.5px; color: #111827; line-height: 1.55; }
.set-row-help  { font-size: 12.5px; color: #6b7280; line-height: 1.55; margin-top: 1px; }
.set-row-needs { font-size: 12px; color: #b45309; line-height: 1.5; margin-top: 2px; }
.set-row-control { flex-shrink: 0; display: flex; align-items: center; }
.set-row-control .form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; margin-top: 0; }
.set-row-control .form-switch .form-check-input:disabled { cursor: not-allowed; }
.set-row-select { width: auto; min-width: 210px; max-width: 320px; }
.set-row.is-blocked .set-row-label { color: #9ca3af; }
@media (max-width: 576px) {
  .set-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .set-row-select { min-width: 0; width: 100%; max-width: none; }
}

/* ── Roles & permissions: role tabs and the role's heading ── */
.role-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.role-tab {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #E5E7EB; background: #fff; color: #374151;
  border-radius: 999px; padding: 5px 12px; font-size: 13px; line-height: 1.4;
}
.role-tab:hover { border-color: var(--cc-primary); color: var(--cc-primary); }
.role-tab.active { background: var(--cc-primary-light); border-color: var(--cc-primary); color: var(--cc-primary-dark); font-weight: 600; }
.role-tab-count {
  min-width: 20px; padding: 0 6px; border-radius: 999px; background: #F3F4F6;
  font-size: 11px; font-weight: 600; color: #6b7280; text-align: center;
}
.role-tab.active .role-tab-count { background: #fff; color: var(--cc-primary-dark); }
.role-head-name { font-size: 15px; font-weight: 600; color: #111827; }
.role-head-desc { font-size: 13px; color: #6b7280; line-height: 1.55; }
.role-head-meta { font-size: 12px; color: #9ca3af; margin-top: 4px; }

/* ── Team & users: role badges, row actions, role picker help ── */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; line-height: 1.6;
  padding: 1px 10px; border-radius: 20px;
  background: #F3F4F6; color: #374151;
}
.role-badge.is-owner { background: #EEEDFE; color: #534AB7; }
.role-badge i { font-size: 12px; }
.role-select-help { font-size: 11.5px; color: #6b7280; line-height: 1.5; margin-top: 4px; min-height: 1em; }

.team-actions { display: inline-flex; align-items: center; gap: 4px; }
.team-action-btn {
  border: 0; background: transparent; color: #6b7280;
  padding: 3px 5px; border-radius: 6px; line-height: 1;
}
.team-action-btn i { font-size: 16px; }
.team-action-btn:hover { background: #F3F4F6; color: #111827; }
.team-action-btn.is-danger { color: #dc2626; }
.team-action-btn.is-danger:hover { background: #FEF2F2; color: #b91c1c; }

/* ── "You don't have access to this page" (app/views/no-access.php) ── */
.no-access { max-width: 420px; margin: 12vh auto 0; text-align: center; padding: 0 16px; }
.no-access-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: #F3F4F6; color: #6b7280; font-size: 24px;
}
.no-access-title { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 6px; }
.no-access-text  { font-size: 13.5px; color: #6b7280; line-height: 1.55; margin-bottom: 18px; }

.min-w-0 { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════
   PeoplePicker (public/assets/js/custom/people-picker.js) — every
   "pick a team member" control, with the person's photo or initials.
   ══════════════════════════════════════════════════════════════════ */
.pp-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; overflow: hidden; font-weight: 600; line-height: 1;
  background: #F3F4F6; color: #6b7280;
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }
.pp-avatar-md { width: 30px; height: 30px; font-size: 11.5px; }
.pp-avatar-icon { background: #F3F4F6; color: #6b7280; }
.pp-avatar-icon i { font-size: 13px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pp-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-stack { display: inline-flex; }
.pp-stack .pp-avatar { box-shadow: 0 0 0 2px #fff; }
.pp-stack .pp-avatar + .pp-avatar { margin-left: -6px; }

.pp { position: relative; }
.pp-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  min-height: 36px; padding: 5px 10px; cursor: pointer; background: #fff;
}
.pp-btn:disabled { background: #F9FAFB; cursor: default; }
.pp-btn-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; color: #111827; }
.pp-placeholder { flex: 1 1 auto; font-size: 13.5px; color: #9ca3af; }
.pp-caret { margin-left: auto; color: #9ca3af; font-size: 16px; }
.pp-you { color: #9ca3af; font-weight: 400; }
.pp-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1060;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .14); padding: 6px; max-height: 280px; overflow-y: auto;
}
.pp-search { margin-bottom: 6px; }
.pp-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent;
  padding: 6px 8px; border-radius: 7px; text-align: left; font-size: 13.5px; color: #111827; cursor: pointer;
}
.pp-opt:hover { background: #F3F4F6; }
.pp-opt.is-on { background: var(--cc-primary-light); }
.pp-opt-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
.pp-opt.is-off { opacity: .55; cursor: not-allowed; }
.pp-opt.is-off:hover { background: none; }
.pp-opt.is-off .pp-opt-name { flex-wrap: wrap; row-gap: 0; }
.pp-why { flex-basis: 100%; font-size: 11px; font-weight: 500; color: #b45309; }
.pp-owner { font-size: 10px; font-weight: 600; color: #534AB7; background: #EEEDFE; border-radius: 20px; padding: 0 7px; line-height: 1.6; }
.pp-check { font-size: 17px; color: #9ca3af; }
.pp-opt.is-on .pp-check, .pp-tick { color: var(--cc-primary); }
.pp-tick { font-size: 16px; }
.pp-sep { height: 1px; background: #EEEEEA; margin: 4px 2px; }
.pp-empty { padding: 10px 8px; font-size: 12.5px; color: #9ca3af; text-align: center; }

/* "You don't have access to this lead" (Leads workspace) */
.no-access-inline { padding: 48px 16px; text-align: center; color: #6b7280; font-size: 13.5px; }
.no-access-inline i { display: block; font-size: 26px; color: #9ca3af; margin-bottom: 8px; }

/* Leads workspace — owner (right-hand panel) with avatar */
.cp-owner-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cp-owner-opt .pp-avatar { flex-shrink: 0; }
.cp-owner-opt-name { flex: 1 1 auto; min-width: 0; }
.cp-owner-opt.is-off { opacity: .55; cursor: not-allowed; }
.cp-owner-opt.is-off:hover { background: none; }
.cp-owner-why { display: block; font-size: 11px; font-weight: 500; color: #b45309; }
.assigned-pill .pp-avatar { width: 16px; height: 16px; font-size: 7.5px; vertical-align: -3px; }
.list-style-who .pp-avatar { width: 18px; height: 18px; font-size: 8px; }
.list-style-who { display: inline-flex; align-items: center; }
.ch-user-picker { min-width: 190px; }

/* ══════════════════════════════════════════════════════════════
   Team comments (Phase 2) — the Team tab of the lead's right-hand panel
   (leads/team-panel.php), the @mention box (comment-box.js), the banner
   at the top of the timeline, the lead list marker, the header bell
   (partials/notifications-bell.php) and My notifications.
   ══════════════════════════════════════════════════════════════ */

/* Details / Team tabs at the top of the right-hand panel */
.cp-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--cc-border, #E8E8E4); flex: 0 0 auto; }
.cp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 9px; border: 0; background: none; font-size: 13px; font-weight: 600;
          color: var(--cc-text-muted, #6b7280); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.cp-tab i { font-size: 15px; }
.cp-tab:hover { color: var(--cc-text, #111827); }
.cp-tab.is-active { color: var(--cc-text, #111827); border-bottom-color: var(--cc-primary); }
.cp-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
                font-size: 11px; font-weight: 700; line-height: 1; background: #eef0f3; color: #4b5563; }
.cp-tab-badge.is-alert { background: #dc2626; color: #fff; }
@media (max-width: 768px) { .cp-tabs { display: none; } }   /* a phone switches with the workspace's own tabs */

/* the Team tab — clean, neutral cards; the brand colour only marks what needs you */
.tp-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.tp-scroll { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 16px; }
.tp-intro { display: flex; align-items: center; gap: 6px; margin: 0 4px 10px; font-size: 11.5px; color: #9aa0ab; }
.tp-empty { padding: 36px 16px; text-align: center; font-size: 13px; line-height: 1.5; color: #9aa0ab; }
.tp-thread { padding: 2px 0; }
.tp-thread + .tp-thread { margin-top: 6px; padding-top: 8px; border-top: 1px solid #f1f2f4; }
.tp-replies { margin: 2px 0 0 40px; display: flex; flex-direction: column; gap: 2px; }
.tp-c { position: relative; padding: 10px 10px 10px 12px; border-radius: 12px; transition: background .15s, box-shadow .3s; }
.tp-c:hover { background: #f8f9fb; }
.tp-c.is-waiting { background: rgba(var(--cc-primary-rgb), .055); }
.tp-c.is-flash { box-shadow: 0 0 0 3px rgba(var(--cc-primary-rgb), .18); }
.tp-c-deleted { display: flex; align-items: center; gap: 6px; font-size: 12px; font-style: italic; color: #9aa0ab; }
.tp-c-head { display: flex; align-items: center; gap: 10px; }
.tp-c-who { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 7px; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.tp-c-name { font-size: 13px; font-weight: 600; color: #111827; }
.tp-c-when { font-size: 11.5px; color: #9aa0ab; }
.tp-c-flag { align-self: center; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
             background: var(--cc-primary); color: #fff; }
.tp-c-tools { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.tp-c:hover .tp-c-tools, .tp-c:focus-within .tp-c-tools { opacity: 1; }
@media (hover: none) { .tp-c-tools { opacity: 1; } }
.tp-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: none;
           color: #9aa0ab; cursor: pointer; }
.tp-icon:hover { background: #eef0f3; color: #374151; }
.tp-c-body { margin: 4px 0 0 40px; font-size: 13.5px; line-height: 1.55; color: #1f2937; overflow-wrap: anywhere; }
.tp-c-body a { color: var(--cc-primary); text-decoration: underline; text-underline-offset: 2px; }
/* @mentions: plain coloured text, the same for everyone (@you, @someone, @all) */
.tc-mention { color: #0F6B44; font-weight: 600; }
.tp-reqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 40px; }
.tp-req { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
          background: #f3f4f6; color: #4b5563; }
.tp-req::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; }
.tp-req.is-done::before { background: #10b981; }
.tp-c-foot { display: flex; align-items: center; gap: 14px; margin: 8px 0 0 40px; }
.tp-c-foot:empty { display: none; }
.tp-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; color: #6b7280; cursor: pointer; }
.tp-link:hover { color: var(--cc-primary); }
.tp-done { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; cursor: pointer;
           border: 1px solid var(--cc-primary); background: var(--cc-primary); color: #fff; font-size: 12px; font-weight: 600; }
.tp-done:hover { filter: brightness(.94); }
.tp-done.is-done { border-color: transparent; background: #ecfdf5; color: #047857; }
.tp-done.is-done:hover { filter: none; background: #d1fae5; }
.tp-done[disabled] { opacity: .6; cursor: default; }
.tp-compose { flex: 0 0 auto; padding: 10px 12px 12px; background: #fff; border-top: 1px solid #f1f2f4; }
.tp-replying { display: flex; align-items: center; gap: 6px; margin: 0 4px 6px; font-size: 12px; color: #6b7280; }
.tp-replying .tp-link { margin-left: auto; }
.tp-box { border: 1px solid #e3e5e9; border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tp-box:focus-within { border-color: var(--cc-primary); box-shadow: 0 0 0 3px rgba(var(--cc-primary-rgb), .12); }
.tp-input { display: block; width: 100%; min-height: 44px; max-height: 180px; padding: 10px 12px 4px; resize: none; font: inherit; font-size: 13.5px; line-height: 1.5;
            border: 0; outline: none; background: transparent; color: #111827; }
.tp-input::placeholder { color: #9aa0ab; }
.tp-compose-foot { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px 12px; }
.tp-hint { font-size: 11px; color: #9aa0ab; }
.tp-hint kbd { padding: 0 4px; border-radius: 4px; background: #f3f4f6; color: #6b7280; font: inherit; font-size: 10.5px; box-shadow: none; }
@media (hover: none) { .tp-hint { visibility: hidden; } }
.tp-send { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
           background: var(--cc-primary); color: #fff; font-size: 15px; cursor: pointer; transition: opacity .15s, transform .1s; }
.tp-send:hover:not([disabled]) { filter: brightness(.94); }
.tp-send:active:not([disabled]) { transform: scale(.94); }
.tp-send[disabled] { background: #e5e7eb; color: #9aa0ab; cursor: default; }
.tp-c-body .tp-input { border: 1px solid #e3e5e9; border-radius: 10px; padding: 8px 10px; resize: vertical; }
.tp-c-body .tp-input:focus { border-color: var(--cc-primary); box-shadow: 0 0 0 3px rgba(var(--cc-primary-rgb), .12); }
.tp-edit-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* the @mention list (comment-box.js) */
.cb-wrap { position: relative; }
.cb-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 80; max-height: 260px; overflow-y: auto; padding: 5px;
           background: #fff; border: 1px solid var(--cc-border, #e5e7eb); border-radius: 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, .14); }
.cb-menu.cb-above { top: auto; bottom: calc(100% + 4px); }
.cb-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer; }
.cb-opt.is-active { background: var(--cc-bg, #f3f4f6); }
.cb-opt.is-off { cursor: not-allowed; opacity: .55; }
.cb-opt-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cb-opt-name { font-size: 13px; font-weight: 600; color: var(--cc-text, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-opt-user { font-weight: 500; color: var(--cc-text-muted, #6b7280); }
.cb-opt-sub { font-size: 11px; color: var(--cc-text-muted, #6b7280); }
.cb-opt.is-off .cb-opt-sub { color: #b45309; }
.cb-sep { height: 1px; margin: 4px 6px; background: var(--cc-border, #eee); }
.cb-empty { padding: 10px; font-size: 12px; color: var(--cc-text-light, #9ca3af); }

/* the banner at the top of the timeline: the latest request waiting on you */
.team-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 8px 8px 12px; border-radius: 12px; cursor: pointer;
               background: rgba(var(--cc-primary-rgb), .06); border: 1px solid rgba(var(--cc-primary-rgb), .18); color: #1f2937; font-size: 12.5px; line-height: 1.4; }
.team-banner:hover { background: rgba(var(--cc-primary-rgb), .09); }
.team-banner-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.team-banner-text b { font-weight: 600; color: #111827; }
.team-banner-more { font-weight: 600; color: var(--cc-primary); white-space: nowrap; }
.team-banner-open { flex: 0 0 auto; height: 28px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--cc-primary); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.team-banner-open:hover { filter: brightness(.94); }

/* the lead list: requests waiting on you */
.la-lr-right { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.la-req { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; }
.la-req i { font-size: 11px; }

/* the bell in the header */
.nb-wrap { position: relative; display: flex; align-items: center; align-self: center; height: 100%; margin: 0 6px 0 0; padding: 0; }
.nb-btn { position: relative; margin: auto 0; flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
          background: none; color: #4b5563; cursor: pointer; }
.nb-btn:hover, .nb-btn[aria-expanded="true"] { background: #f3f4f6; color: #111827; }
.nb-btn i { font-size: 19px; }
.nb-count { position: absolute; top: 1px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; box-shadow: 0 0 0 2px #fff; box-sizing: border-box;
            background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; }
.nb-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1100; width: 360px; max-width: calc(100vw - 24px); background: #fff;
           border: 1px solid #E8E8E4; border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); overflow: hidden; }
.nb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #f0f0ee; }
.nb-title { font-size: 14px; font-weight: 700; color: #111827; margin-right: auto; }
.nb-close { display: none; width: 32px; height: 32px; margin-left: 10px; border: 0; border-radius: 50%; background: #f3f4f6; color: #374151; font-size: 18px;
            align-items: center; justify-content: center; cursor: pointer; }
/* on a phone the list opens full screen, with a close button */
@media (max-width: 768px) {
  .nb-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; border: 0; border-radius: 0;
             display: flex; flex-direction: column; z-index: 2000; box-shadow: none; }
  .nb-menu[hidden] { display: none; }
  .nb-head { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 0px)); }
  .nb-close { display: inline-flex; }
  .nb-list { flex: 1 1 auto; max-height: none; }
  .nb-foot { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .nb-title { font-size: 16px; }
}
.nb-link { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--cc-primary); cursor: pointer; }
.nb-list { max-height: min(420px, 65vh); overflow-y: auto; }
.nb-item { position: relative; display: flex; gap: 10px; padding: 11px 30px 11px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid #f5f5f3; }
.nb-item:hover { background: #fafaf9; color: inherit; }
.nb-item.is-unread { background: #fffaf5; }
.nb-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-item-title { font-size: 13px; font-weight: 600; color: #111827; line-height: 1.35; }
.nb-item-snippet { font-size: 12px; color: #4b5563; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nb-item-when { font-size: 11px; color: #9ca3af; }
.nb-item-lead { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; padding: 0 6px; border-radius: 5px; background: #f3f4f6;
                font-size: 11px; font-weight: 600; color: #4b5563; }
.nb-item-lead i { font-size: 11px; color: #9ca3af; }
.nb-dot { position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--cc-primary); }
.nb-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 18px; text-align: center; font-size: 12.5px; color: #9ca3af; }
.nb-empty i { font-size: 22px; }
.nb-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; font-size: 12px; font-weight: 600; color: #6b7280; text-decoration: none; border-top: 1px solid #f0f0ee; }
.nb-foot:hover { background: #fafaf9; color: #111827; }

/* My notifications + usernames on the Team page */
.mn-wrap { max-width: 760px; }
.mn-sub { margin: 0; font-size: 13px; color: #6b7280; }
.mn-help { font-size: 13px; color: #6b7280; margin: 4px 0 12px; }
.mn-username-row { display: flex; gap: 8px; align-items: center; max-width: 380px; }
.mn-at-input { position: relative; flex: 1 1 auto; }
.mn-at { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #9ca3af; pointer-events: none; }
.mn-at-input .form-control { padding-left: 24px; }
.mn-hint { margin-top: 6px; font-size: 12px; color: #9ca3af; }
.mn-hint.mn-err { color: #dc2626; }
.mn-table { width: 100%; border-collapse: collapse; }
.mn-table th { padding: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.mn-table td { padding: 11px 0; border-top: 1px solid #f0f0ee; vertical-align: middle; }
.mn-col { width: 84px; text-align: center; }
.mn-table td.mn-col .toggle-switch { margin: 0 auto; }
.mn-saved { min-height: 16px; margin-top: 6px; font-size: 12px; color: #16a34a; text-align: right; }
.team-username { color: #4b5563; font-weight: 600; }
/* ==========================================================================
   REPORTS — shared by every report under /reports (first: Campaign Performance,
   public/assets/js/custom/campaign-report.js). General .rp-* classes inside .rp-page.
   ========================================================================== */
.rp-page { --rp-border: #E8E8E4; --rp-line: #F1EFE8; --rp-muted: #6B6A64; --rp-text: #2C2C2A; --rp-soft: #F7F7F5;
           max-width: 1320px; margin: 0 auto; padding-bottom: 48px; color: var(--rp-text); }
.rp-page .rp-muted { color: var(--rp-muted); }
.rp-page .rp-card { background: #fff; border: 1px solid var(--rp-border); border-radius: 12px; }
.rp-page .rp-head { margin: 18px 0 16px; }

/* toolbar */
.rp-page .rp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.rp-page .rp-ctl { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rp-border); background: #fff;
                   border-radius: 8px; font-size: 14px; color: var(--rp-text); max-width: 100%; }
.rp-page .rp-ctl:hover { border-color: #cfcfca; }
.rp-page .rp-ctl.rt-filter-active { border-color: var(--cc-primary); box-shadow: 0 0 0 3px var(--cc-primary-light); }
.rp-page .rp-ctl #rpPickLabel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.rp-page .rp-pick-menu { width: 400px; max-width: calc(100vw - 32px); padding: 0; border-radius: 12px; border-color: var(--rp-border); box-shadow: 0 12px 32px rgba(0,0,0,.10); overflow: hidden; }
.rp-page .rp-pick-search { position: relative; padding: 12px 12px 6px; }
.rp-page .rp-pick-search i { position: absolute; left: 22px; top: 50%; margin-top: 3px; transform: translateY(-50%); color: #9C9B95; }
.rp-page .rp-pick-search input { padding-left: 32px; }
.rp-page .rp-pick-hide { display: flex; align-items: center; gap: 6px; padding: 2px 14px 8px; font-size: 12.5px; color: var(--rp-muted); margin: 0; }
.rp-page .rp-pick-list { max-height: 340px; overflow-y: auto; border-top: 1px solid var(--rp-line); border-bottom: 1px solid var(--rp-line); padding: 4px 0; }
.rp-page .rp-pick-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin: 0; font-size: 13.5px; cursor: pointer; }
.rp-page .rp-pick-row:hover { background: var(--rp-soft); }
.rp-page .rp-pick-row.covered { color: var(--rp-muted); cursor: default; }
.rp-page .rp-pick-row input { flex: none; }
.rp-page .rp-pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-page .rp-pick-count { flex: none; font-size: 12px; color: #9C9B95; font-variant-numeric: tabular-nums; }
.rp-page .rp-pick-none { border-top: 1px solid var(--rp-line); margin-top: 4px; padding-top: 9px; }
.rp-page .rp-pick-empty { padding: 14px; font-size: 13px; color: var(--rp-muted); }
.rp-page .rp-pick-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; }
/* date button: the range on the first line, its dates (and "vs" dates) small on the second — same height as the other controls */
.rp-page .rp-range-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; line-height: 1.2; min-width: 0; }
.rp-page .rp-range-text strong { font-size: 13.5px; white-space: nowrap; }
.rp-page .rp-range-dates { font-size: 11.5px; color: var(--rp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rp-page .rp-range-dates:empty { display: none; }
.rp-page .rp-pick-all { border-bottom: 1px solid var(--rp-line); margin-bottom: 4px; padding-bottom: 9px; font-weight: 600; }

/* date menu: presets · calendar · compare (Google Ads style) */
.rp-page .rp-date-menu { width: 640px; max-width: calc(100vw - 32px); padding: 0; border-radius: 12px; border-color: var(--rp-border); box-shadow: 0 12px 32px rgba(0,0,0,.12); overflow: hidden; }
.rp-page .rp-date-body { display: flex; min-height: 0; }
.rp-page .rp-date-presets { flex: 0 0 220px; border-right: 1px solid var(--rp-line); padding: 6px 0; }
.rp-page .rp-preset { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 16px; font-size: 13.5px; color: var(--rp-text); }
.rp-page .rp-preset:hover { background: var(--rp-soft); }
.rp-page .rp-preset.active { background: var(--cc-primary-light); color: var(--cc-primary-dark); font-weight: 600; }
.rp-page .rp-preset-custom { border-bottom: 1px solid var(--rp-line); margin-bottom: 4px; }
.rp-page .rp-date-n { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 13px; color: var(--rp-muted); }
.rp-page .rp-date-n:first-of-type { border-top: 1px solid var(--rp-line); margin-top: 4px; padding-top: 10px; }
.rp-page .rp-date-n input { width: 62px; text-align: center; }
.rp-page .rp-date-n.active { color: var(--cc-primary-dark); font-weight: 600; }
.rp-page .rp-date-n.active input { border-color: var(--cc-primary); }
.rp-page .rp-date-cal { flex: 1 1 auto; padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rp-page .rp-date-inputs { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.rp-page .rp-date-inputs label { flex: 1 1 0; margin: 0; font-size: 11.5px; color: var(--rp-muted); }
.rp-page .rp-date-inputs label span { display: block; margin-bottom: 2px; }
.rp-page .rp-dash { color: #9C9B95; padding-bottom: 6px; }
.rp-page .rp-cal .flatpickr-calendar.inline { box-shadow: none; border: 0; margin: 0 auto; }
.rp-page .rp-date-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--rp-line); background: var(--rp-soft); font-size: 13px; }
.rp-page .rp-date-compare select { width: auto; }
.rp-page .rp-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; cursor: pointer; }
.rp-page .rp-switch input { width: 16px; height: 16px; }
.rp-page .rp-cmp-custom { display: inline-flex; align-items: center; gap: 6px; }
.rp-page .rp-cmp-custom[hidden] { display: none; }
.rp-page .rp-cmp-custom input { width: 140px; }
.rp-page .rp-date-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--rp-line); font-size: 12.5px; }
.rp-page .rp-date-btns { display: flex; gap: 8px; flex: none; }

/* compared with an earlier period */
.rp-page .rp-cell-delta { display: block; margin-top: 3px; }
.rp-page .rp-cell-delta:empty { display: none; }
.rp-page .rp-cell-delta .rp-delta { margin-left: 0; font-size: 10.5px; padding: 1px 6px; }
.rp-page .rp-table td.rp-click:hover .rp-delta { text-decoration: none; }
.rp-page .rp-sec-note { font-size: 12px; }
.rp-page .rp-delta { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
                     letter-spacing: 0; white-space: nowrap; line-height: 1.35; cursor: default; }
.rp-page .rp-tile > .rp-delta { align-self: flex-start; margin-left: 0; }
.rp-page .rp-delta.up   { background: #E1F5EE; color: #11694E; }
.rp-page .rp-delta.down { background: #FDE7E2; color: #B42A0A; }
.rp-page .rp-delta.flat { background: var(--rp-line); color: var(--rp-muted); }
.rp-page .rp-mode { display: inline-flex; padding: 3px; background: #F1F1EE; border-radius: 9px; gap: 2px; }
.rp-page .rp-mode-btn { border: 0; background: transparent; padding: 7px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--rp-muted); }
.rp-page .rp-mode-btn.active { background: #fff; color: var(--rp-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; }
.rp-page .rp-mode-note { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--rp-muted); margin: 0 0 16px; }
.rp-page .rp-mode-note i { color: var(--cc-primary); font-size: 15px; line-height: 1.25; }
.rp-page .rp-mode-note b { color: var(--rp-text); }

/* body */
#rpBody { display: flex; flex-direction: column; gap: 16px; transition: opacity .15s; }
#rpBody.rp-loading { opacity: .5; pointer-events: none; }   /* only where no skeleton is drawn */
/* the report's skeleton while it loads (CampaignReportView.skeleton — "LOADING STATES" below) */
.rp-page .rp-skel { display: flex; flex-direction: column; gap: 16px; }
.rp-page .rp-skel-tile { gap: 10px; }
.rp-page .rp-skel-tile .rt-skel-h-lg { height: 26px; }
.rp-page .rp-skel-boxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rp-page .rp-skel-box { display: block; height: 64px; border-radius: 10px; }
.rp-page .rp-skel-chart { display: flex; align-items: flex-end; gap: 8px; height: 200px; padding-top: 10px; }
.rp-page .rp-skel-chart .rt-skel { flex: 1 1 0; height: 55%; border-radius: 4px 4px 0 0; }
.rp-page .rp-skel-chart .rt-skel:nth-child(3n+1) { height: 35%; }
.rp-page .rp-skel-chart .rt-skel:nth-child(4n+2) { height: 80%; }
.rp-page .rp-skel-chart .rt-skel:nth-child(5n+3) { height: 62%; }
.rp-page .rp-skel-chart .rt-skel:nth-child(7n) { height: 25%; }
.rp-page .rp-skel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rp-line); }
.rp-page .rp-skel-row:first-of-type { border-top: 0; }
@media (max-width: 768px) { .rp-page .rp-skel-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-page .rp-skel-box:nth-child(n+5) { display: none; } }
.rp-page .rp-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; }
.rp-page .rp-empty > i { font-size: 30px; color: #B4B2A9; margin-bottom: 6px; }
.rp-page .rp-empty-title { font-size: 16px; font-weight: 600; }
.rp-page .rp-empty-note { font-size: 13px; color: var(--rp-muted); padding: 6px 0; }
.rp-page .rp-panel { padding: 18px 20px; min-width: 0; }
.rp-page .rp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-page .rp-sec-head h3 { font-size: 15px; font-weight: 600; margin: 0; display: flex; align-items: center; }
.rp-page .rp-funnel-pick { width: auto; max-width: 260px; }
.rp-page .rp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rp-page .rp-help { border: 0; background: none; padding: 0; margin-left: 4px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
                    border-radius: 50%; color: #9C9B95; font-size: 15px; cursor: help; flex: none; }
.rp-page .rp-help:hover, .rp-page .rp-help:focus-visible { color: var(--cc-primary); background: var(--cc-primary-light); outline: none; }
.rp-page .rp-click { cursor: pointer; }
.rp-page .rp-click:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; }

/* tiles */
.rp-page .rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rp-page .rp-tile { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.rp-page .rp-tile.rp-click:hover { border-color: #c9d9f5; box-shadow: 0 2px 10px rgba(26,110,255,.08); }
.rp-page .rp-tile.lead { border-color: var(--cc-primary); box-shadow: 0 0 0 3px var(--cc-primary-light); }
.rp-page .rp-tile-label { font-size: 13px; color: var(--rp-muted); font-weight: 500; display: flex; align-items: center; }
.rp-page .rp-tile-val { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rp-page .rp-tile.lead .rp-tile-val { color: var(--cc-primary-dark); }
.rp-page .rp-tile-sub { font-size: 12.5px; color: var(--rp-muted); }
.rp-page .rp-more { font-size: 12px; color: var(--cc-primary); margin-top: auto; padding-top: 2px; opacity: .85; }
.rp-page .rp-tile:hover .rp-more { opacity: 1; }

/* outcomes */
.rp-page .rp-outcomes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rp-page .rp-out { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--rp-soft); border: 1px solid var(--rp-line); border-left-width: 4px; }
.rp-page .rp-out:hover { border-color: #d9d8d2; }
.rp-page .rp-out-num { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-page .rp-out-label { font-size: 12.5px; color: var(--rp-muted); }
.rp-page .rp-out-neutral { border-left-color: #B4B2A9; }
.rp-page .rp-out-blue  { border-left-color: var(--cc-primary); }
.rp-page .rp-out-green { border-left-color: #1D9E75; }
.rp-page .rp-out-red   { border-left-color: #D94A35; }
.rp-page .rp-out-grey  { border-left-color: #D6D5CF; }

/* "Everything that came in = leads + not a sales lead + archived" */
.rp-page .rp-sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rp-line); }
.rp-page .rp-sum-part { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--rp-line); min-width: 0; }
.rp-page .rp-sum-part:hover { border-color: #c9d9f5; background: #F4F8FF; }
.rp-page .rp-sum-total { background: var(--cc-primary-light); border-color: #C9DCFF; }
.rp-page .rp-sum-num { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rp-page .rp-sum-total .rp-sum-num { color: var(--cc-primary-dark); }
.rp-page .rp-sum-label { display: flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--rp-muted); }
.rp-page .rp-sum-label .rp-help { width: 18px; height: 18px; font-size: 14px; }
.rp-page .rp-sum-op { align-self: center; font-size: 18px; color: #9C9B95; font-weight: 500; padding: 0 2px; }

/* share bar + rows (How leads came in) */
.rp-page .rp-share { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: #fff; margin-bottom: 12px; }
.rp-page .rp-share > span { display: block; height: 100%; }
.rp-page .rp-rows { list-style: none; margin: 0; padding: 0; }
.rp-page .rp-rows li { display: grid; grid-template-columns: 12px 1fr auto 48px; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--rp-line); font-size: 13.5px; border-radius: 6px; }
.rp-page .rp-rows li:first-child { border-top: 0; }
.rp-page .rp-rows li:hover { background: var(--rp-soft); }
.rp-page .rp-key { width: 10px; height: 10px; border-radius: 3px; }
.rp-page .rp-row-num { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.rp-page .rp-row-pct { color: var(--rp-muted); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

/* key / value grid */
.rp-page .rp-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rp-page .rp-kv-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rp-page .rp-kv-item { background: var(--rp-soft); border: 1px solid var(--rp-line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.rp-page .rp-kv-item.rp-click:hover { border-color: #c9d9f5; background: #F4F8FF; }
.rp-page .rp-kv-label { font-size: 12.5px; color: var(--rp-muted); }
.rp-page .rp-kv-val { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rp-page .rp-kv-sub { font-size: 12px; color: var(--rp-muted); margin-top: 2px; }

/* horizontal bars (stages, reasons) */
.rp-page .rp-bars { list-style: none; margin: 0; padding: 0; }
.rp-page .rp-bars li { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 2fr) 48px; align-items: center; column-gap: 12px; padding: 7px 6px; font-size: 13px; border-radius: 6px; }
.rp-page .rp-bars.rp-funnel li { grid-template-columns: minmax(110px, 1fr) minmax(70px, 1.4fr) 44px minmax(150px, 1.5fr); }
.rp-page .rp-bars li:hover { background: var(--rp-soft); }
.rp-page .rp-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rp-page .rp-bar { height: 8px; border-radius: 4px; background: var(--cc-primary-light); overflow: hidden; }
.rp-page .rp-bar > span { display: block; height: 100%; background: var(--cc-primary); border-radius: 4px; }
.rp-page .rp-bar-soft > span { background: #6E9CF2; }
.rp-page .rp-bar-num { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rp-page .rp-bar-rate { font-size: 12.5px; color: var(--rp-muted); }
.rp-page .rp-bar-rate strong { color: var(--rp-text); }

/* charts + compare table */
.rp-page .rp-chart { min-height: 220px; margin: 0 -6px; }
.rp-page .rp-chart-tall { min-height: 260px; margin-bottom: 8px; }
.rp-page .rp-tablewrap { overflow-x: auto; border: 1px solid var(--rp-line); border-radius: 10px; }
.rp-page .rp-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 13px; }
.rp-page .rp-table th, .rp-page .rp-table td { padding: 10px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-page .rp-table thead th { min-width: 84px; background: var(--rp-soft); color: var(--rp-muted); font-weight: 600; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.rp-page .rp-table th.name { text-align: left; min-width: 190px; position: sticky; left: 0; background: #fff; z-index: 1; }
.rp-page .rp-table thead th.name { background: var(--rp-soft); }
/* phones: the name column doesn't stay put (it took most of the screen) and its text wraps, so the numbers have room */
@media (max-width: 768px) {
  .rp-page .rp-table th.name { position: static; min-width: 130px; max-width: 160px; white-space: normal; }
  .rp-page .rp-table { min-width: 720px; }
}
.rp-page .rp-table tbody tr, .rp-page .rp-table tfoot tr { border-top: 1px solid var(--rp-line); }
.rp-page .rp-table tfoot tr { font-weight: 600; border-top-color: var(--rp-border); }
.rp-page .rp-table td.rp-click { color: var(--cc-primary-dark); }
.rp-page .rp-table td.rp-click:hover { background: #F4F8FF; text-decoration: underline; }
.rp-page .rp-chan { display: flex; align-items: center; gap: 8px; }
.rp-page .rp-chan-name { font-weight: 600; }
.rp-page .rp-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #F3F4F6; font-size: 13px; color: var(--rp-muted); }
.rp-page .rp-ico img { width: 14px; height: 14px; object-fit: contain; }

/* "?" inside labels, rows and table headings */
.rp-page .rp-out-label, .rp-page .rp-row-name { display: flex; align-items: center; gap: 2px; min-width: 0; }
.rp-page .rp-kv-label .rp-help { vertical-align: -4px; margin-left: 3px; }   /* stays right after the last word when the label wraps */
.rp-page .rp-kv-label .rp-help, .rp-page .rp-out-label .rp-help, .rp-page .rp-row-name .rp-help, .rp-page .rp-th .rp-help { width: 18px; height: 18px; font-size: 14px; }
.rp-page .rp-th { display: inline-flex; align-items: flex-end; justify-content: flex-end; gap: 2px; }
.rp-page .rp-th .rp-help { margin-left: 2px; }

/* notes */
.rp-page .rp-notes { display: flex; flex-direction: column; gap: 8px; }
.rp-page .rp-note { display: flex; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #F4F7FF; border: 1px solid #E1E9FF; font-size: 13px; color: #2C4A7A; }
.rp-page .rp-note i { color: var(--cc-primary); font-size: 15px; line-height: 1.3; }
.rp-page .rp-note-link { padding: 0; border: 0; background: none; margin-left: 4px; color: var(--cc-primary-dark); font-weight: 600; font-size: inherit;
                         text-decoration: underline; cursor: pointer; white-space: nowrap; }
.rp-page .rp-note-link:hover { color: var(--cc-primary); }

@media (max-width: 991px) {
  .rp-page .rp-cols { grid-template-columns: minmax(0, 1fr); }
  .rp-page .rp-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-page .rp-kv-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rp-page .rp-toolbar > * { width: 100%; }
  .rp-page .rp-ctl { width: 100%; }
  .rp-page .rp-ctl .ri-arrow-down-s-line { margin-left: auto; }
  .rp-page .rp-date-body { flex-direction: column; }
  .rp-page .rp-date-menu { max-height: calc(100vh - 140px); overflow-y: auto; }
  .rp-page .rp-date-presets { flex: none; border-right: 0; border-bottom: 1px solid var(--rp-line); max-height: 200px; overflow-y: auto; }
  .rp-page .rp-date-foot { flex-direction: column; align-items: stretch; }
  .rp-page .rp-date-btns .btn { flex: 1 1 0; }
  .rp-page .rp-mode { display: flex; }
  .rp-page .rp-mode-btn { flex: 1 1 0; }
  .rp-page .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rp-page .rp-tile { padding: 14px; }
  .rp-page .rp-tile-val { font-size: 22px; }
  .rp-page .rp-outcomes, .rp-page .rp-kv, .rp-page .rp-kv-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-page .rp-panel { padding: 16px; }
  .rp-page .rp-bars li, .rp-page .rp-bars.rp-funnel li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .rp-page .rp-bar { grid-column: 1 / -1; grid-row: 2; }
  .rp-page .rp-bar-rate { grid-column: 1 / -1; }
}

/* ── Report snapshots (Reports → Snapshots, one snapshot, the Save dialog) — report-snapshots.js ── */
.rp-page .rp-save-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 8px; font-weight: 600;
                        border: 1px solid var(--cc-primary); color: var(--cc-primary); background: #fff; }
.rp-page .rp-save-btn:hover:not(:disabled) { background: var(--cc-primary); color: #fff; }
.rp-page .rp-save-btn:disabled { border-color: var(--rp-border); color: #9C9B95; }
.sn-kind { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sn-kind.frozen { background: #E7F0FF; color: #1B4FB8; }
.sn-kind.live   { background: #E1F5EE; color: #11694E; }
.sn-modal .sn-about { font-size: 12.5px; color: #6B6A64; margin: 6px 0 14px; }
.sn-modal .sn-kinds { display: flex; flex-direction: column; gap: 8px; }
.sn-modal .sn-kind-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid #E8E8E4; border-radius: 10px; cursor: pointer; margin: 0; }
.sn-modal .sn-kind-opt:has(input:checked) { border-color: var(--cc-primary); background: #F4F8FF; }
.sn-modal .sn-kind-opt.disabled { opacity: .55; cursor: not-allowed; }
.sn-modal .sn-kind-opt input { margin-top: 3px; flex: none; }
.sn-modal .sn-kind-opt > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #6B6A64; line-height: 1.5; }
.sn-modal .sn-kind-opt b { color: #2C2C2A; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.sn-modal .sn-why { color: #B42A0A; font-size: 12px; }
.sn-modal .sn-why:empty { display: none; }
.sn-modal .sn-share { margin-top: 14px; font-size: 12.5px; color: #6B6A64; display: flex; gap: 6px; align-items: center; }

/* the list */
.rp-page .sn-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.rp-page .sn-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9C9B95; }
.rp-page .sn-search input { padding-left: 34px; min-height: 40px; }
.rp-page .sn-select { width: auto; min-height: 40px; }
.rp-page .sn-by { min-width: 200px; }
.rp-page .sn-tablewrap { background: #fff; border: 1px solid #E8E8E4; border-radius: 10px; overflow-x: auto; }   /* the Estimates table */
.rp-page table.sn-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
.rp-page .sn-table th { padding: 10px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                        color: #888780; background: #F8F8F6; border-bottom: 1px solid #E8E8E4; white-space: nowrap; text-align: left; }
.rp-page .sn-table td { padding: 10px 12px; border-bottom: 1px solid #F1EFE8; vertical-align: middle; color: #111827; }
.rp-page .sn-table th.r, .rp-page .sn-table td.r { text-align: right; }
.rp-page .sn-table tbody tr:hover { background: #FAFAF8; }
.rp-page .sn-table tbody tr:last-child td { border-bottom: 0; }
.rp-page .sn-acts { white-space: nowrap; }
.rp-page .sn-act { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; font-size: 12px; line-height: 1; margin-left: 4px; }
.rp-page .sn-act-del:hover { color: #fff; background: #FA320A; border-color: #FA320A; }
.rp-page .sn-name { font-weight: 600; color: #111827; text-decoration: none; }
.rp-page a.sn-name:hover { color: var(--cc-primary); text-decoration: underline; }
.rp-page .sn-name.locked { color: var(--rp-muted); cursor: default; }
.rp-page .sn-sub { font-size: 11px; color: #9ca3af; margin-top: 2px; }

/* one snapshot */
.rp-page .sn-back { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 13px; color: var(--rp-muted); text-decoration: none; }
.rp-page .sn-back:hover { color: var(--cc-primary); }
.rp-page .sn-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.rp-page .sn-head-main { min-width: 0; }
.rp-page .sn-head-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rp-page .sn-report { font-size: 12px; font-weight: 600; color: var(--rp-muted); text-transform: uppercase; letter-spacing: .04em; }
.rp-page .sn-covers { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--rp-muted); }
.rp-page .sn-covers i { color: #9C9B95; margin-right: 2px; }
.rp-page .sn-head-actions { display: flex; align-items: center; gap: 8px; }
.rp-page .sn-frozen, .rp-page .sn-live { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; }
.rp-page .sn-frozen { background: #EAF2FF; border: 1px solid #C9DCFF; color: #1B3F7A; }
.rp-page .sn-live { background: #EEF8F3; border: 1px solid #CBEBDC; color: #0F5A42; }
.rp-page .sn-frozen > i, .rp-page .sn-live > i { font-size: 20px; line-height: 1.2; }
.rp-page .sn-frozen b, .rp-page .sn-live b { display: block; font-size: 14px; }
@media (max-width: 640px) {
  .rp-page .rp-save-btn { margin-left: 0; width: 100%; justify-content: center; }
  .rp-page .sn-search, .rp-page .sn-select, .rp-page .sn-by { max-width: none; width: 100%; }
  .rp-page .sn-head-actions { width: 100%; }
  .rp-page .sn-head-actions .btn-outline-primary { flex: 1 1 auto; }
}
/* snapshot header buttons, comments panel, share, list chips */
.rp-page .sn-btn, .sn-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid #E8E8E4; background: #fff;
                            border-radius: 8px; font-size: 13px; font-weight: 500; color: #2C2C2A; text-decoration: none; white-space: nowrap; }
.rp-page .sn-btn:hover { border-color: #cfcfca; background: #FAFAF8; color: #2C2C2A; }
.rp-page .sn-btn i { font-size: 15px; color: #6B6A64; }
.rp-page .sn-btn.active { border-color: var(--cc-primary); background: var(--cc-primary-light); color: var(--cc-primary-dark); }
.rp-page .sn-btn.active i { color: var(--cc-primary-dark); }
.rp-page .sn-head-actions { flex-wrap: wrap; justify-content: flex-end; }
.sn-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #EEEDE8; color: #6B6A64; font-size: 11px; font-weight: 600;
            display: inline-flex; align-items: center; justify-content: center; }
.sn-badge.is-alert { background: #FA320A; color: #fff; }
.sn-pdf-menu { min-width: 280px; padding: 6px; border-radius: 10px; }
.sn-pdf-menu .dropdown-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; white-space: normal; }
.sn-pdf-menu .dropdown-item i { font-size: 18px; color: var(--cc-primary); margin-top: 1px; }
.sn-pdf-menu .dropdown-item span { display: flex; flex-direction: column; }
.sn-pdf-menu .dropdown-item small { color: #6B6A64; font-size: 12px; }
.sn-comments.offcanvas { width: 420px; max-width: 100vw; }
.sn-comments .offcanvas-header { border-bottom: 1px solid #F1EFE8; }
.sn-comments .offcanvas-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sn-comments .tp-pane { flex: 1 1 auto; min-height: 0; }
.rp-page .sn-talk { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 12px; color: #6B6A64; vertical-align: middle; }
.rp-page .sn-waiting { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #FA320A; color: #fff; font-size: 11px; font-weight: 600; vertical-align: middle; }

/* ==========================================================================
   REPORT PDF — a snapshot laid out for the browser's "Save as PDF"
   (app/views/reports/snapshot-print.php, SnapshotPrint in report-snapshots.js)
   .pr-document  portrait A4 pages, one flow    ·    .pr-slides  16:9 landscape slides
   Named pages (@page doc / slides) so no other page of the app changes how it prints.
   ========================================================================== */
@page doc    { size: A4 portrait; margin: 12mm 12mm 16mm; }
@page slides { size: 13.333in 7.5in; margin: 0; }
@page docwide { size: A4 landscape; margin: 12mm; }   /* a wide table in a document */

.pr-body { background: #EEEDEA; color: #2C2C2A; font-family: Inter, system-ui, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pr-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
          padding: 10px 20px; background: #fff; border-bottom: 1px solid #E8E8E4; box-shadow: 0 2px 8px rgba(0,0,0,.05); font-size: 13px; }
.pr-bar-text { display: flex; flex-direction: column; }
.pr-bar-text span { color: #6B6A64; }
.pr-bar-btns { display: flex; gap: 8px; }
.pr-status { text-align: center; padding: 60px 20px; color: #6B6A64; }
.pr-stage { position: absolute; left: -99999px; top: 0; }   /* drawn here, then moved into the pages */
.pr-root { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 0 60px; }
.pr-hide { display: none !important; }

/* the report inside a PDF: no hover, no "?", no scrollbars */
.rp-print .rp-tile, .rp-print .rp-kv-item, .rp-print .rp-out, .rp-print .rp-sum-part { cursor: default; box-shadow: none; }
.rp-print .rp-tablewrap { overflow: visible; }
.rp-print .rp-table { min-width: 0; font-size: 11px; }
.rp-print .rp-table th, .rp-print .rp-table td { white-space: normal; }
.pr-slides .rp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pr-body .rp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 3 + 3 tiles on a page or slide */   /* side by side on a slide, whatever the print width */
.rp-print .rp-table th, .rp-print .rp-table td { padding: 7px 6px; }
.rp-print .rp-table th.name { position: static; min-width: 150px; }
.rp-print .rp-table td.rp-click { color: inherit; }
.pr-funnel { font-size: 12.5px; color: #6B6A64; }

/* logo / company name */
.pr-logo { max-height: 34px; max-width: 170px; object-fit: contain; }
.pr-logo.big { max-height: 64px; max-width: 280px; }
.pr-company { font-weight: 700; font-size: 15px; color: #2C2C2A; }
.pr-company.big { font-size: 24px; }
.pr-powered { color: #9C9B95; font-size: 11px; white-space: nowrap; }
.pr-powered b { color: var(--cc-primary); font-weight: 700; }
.pr-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.pr-meta div { min-width: 0; }
.pr-meta dt { font-size: 11px; font-weight: 600; color: #9C9B95; text-transform: uppercase; letter-spacing: .04em; }
.pr-meta dt i { color: var(--cc-primary); }
.pr-meta dd { margin: 2px 0 0; font-size: 13px; color: #2C2C2A; }

/* ── Document ── */
.pr-doc { page: doc; width: 794px; background: #fff; padding: 40px 47px 56px; box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.pr-doc-head { border-bottom: 2px solid var(--cc-primary); padding-bottom: 18px; margin-bottom: 18px; }
.pr-doc-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pr-doc-report { font-size: 11px; font-weight: 600; color: #6B6A64; text-transform: uppercase; letter-spacing: .05em; }
.pr-doc-head h1 { font-size: 26px; font-weight: 700; margin: 0 0 14px; letter-spacing: -.01em; }
.pr-doc-body { max-width: none; padding: 0; gap: 14px; display: flex; flex-direction: column; }
.pr-doc-body > * { break-inside: avoid; page-break-inside: avoid; }
.pr-document .rp-cols { grid-template-columns: minmax(0, 1fr) !important; }
.pr-doc .pr-wide { page: docwide; }
@media print { .pr-doc .pr-wide { width: 1000px; max-width: none; } }
.pr-doc .pr-wide .rp-tablewrap { overflow: visible; }
.pr-document .rp-panel { padding: 14px 16px; }
.pr-doc-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 10px; border-top: 1px solid #E8E8E4; font-size: 11px; color: #9C9B95; }

/* ── Presentation (1280 × 720 = 13.333 × 7.5 in) ── */
.pr-slide { page: slides; position: relative; width: 1280px; height: 720px; overflow: hidden; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.10);
            display: flex; flex-direction: column; padding: 34px 50px 0; break-after: page; page-break-after: always; }
.pr-slide:last-child { break-after: auto; page-break-after: auto; }
.pr-slide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid #EEEDE8; margin-bottom: 18px; }
.pr-slide-kicker { font-size: 12px; color: #9C9B95; font-weight: 500; }
.pr-slide-head h2 { font-size: 28px; font-weight: 700; margin: 2px 0 0; letter-spacing: -.01em; color: #2C2C2A; }
.pr-slide-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pr-slide-inner { max-width: none; padding: 0; transform-origin: top left; }
.pr-slide-inner > * { margin: 0; }
.pr-slide-foot { flex: none; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: #9C9B95; border-top: 1px solid #F1EFE8; }
.pr-foot-right { display: flex; align-items: center; gap: 16px; }
.pr-page { color: #6B6A64; font-weight: 600; font-variant-numeric: tabular-nums; }

/* the cover */
.pr-cover { padding: 56px 80px 0; background: linear-gradient(135deg, #FFFFFF 55%, #F2F6FF 100%); }
.pr-cover-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--cc-primary); }
.pr-cover-top { min-height: 70px; }
.pr-cover-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.pr-cover-kicker { font-size: 15px; font-weight: 600; color: var(--cc-primary); text-transform: uppercase; letter-spacing: .08em; }
.pr-cover h1 { font-size: 54px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 10px 0 14px; max-width: 1000px; }
.pr-cover-dates { font-size: 26px; font-weight: 600; color: #2C2C2A; margin-bottom: 34px; }
.pr-cover-dates span { color: #6B6A64; font-weight: 500; }
.pr-cover .pr-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; }
.pr-cover .pr-meta dd { font-size: 15px; }

@media print {
  .pr-body { background: #fff; }
  .pr-bar, .pr-status { display: none !important; }
  .pr-root { display: block; padding: 0; gap: 0; }
  .pr-doc { width: auto; padding: 0; box-shadow: none; }
  .pr-slide { box-shadow: none; }
}
/* ==========================================================================
   CONNECTION ALERTS — app/services/ConnectionHealth.php
   .ca-pill / .ca-menu: the alert in the header (partials/connection-alert.php)
   .ca-banner: "these numbers are missing data" on Dashboard, reports, Marketing spend
              (partials/data-warning-banner.php, and campaign-report.js)
   .ca-chip: "Incomplete" on a number that is missing data
   .ca-check: Settings → Notifications → Connection alerts
   Red = broken (data stopped), amber = delayed (late, nothing lost yet).
   ========================================================================== */
.ca-wrap { position: relative; display: flex; align-items: center; align-self: center; height: 100%; margin: 0 8px 0 0; }
.ca-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; margin: auto 0; padding: 0 10px 0 7px; border: 1px solid; border-radius: 999px;
           font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; }
.ca-pill.is-bad  { background: #FDE7E2; border-color: #F6B7A6; color: #A8240A; }
.ca-pill.is-warn { background: #FAEEDA; border-color: #EBCB95; color: #854F0B; }
.ca-pill.is-bad:hover, .ca-pill.is-bad[aria-expanded="true"]   { background: #FBD9D0; }
.ca-pill.is-warn:hover, .ca-pill.is-warn[aria-expanded="true"] { background: #F6E3C2; }
.ca-pill-dot { display: inline-flex; font-size: 19px; }
.ca-pill.is-bad .ca-pill-dot  { color: #FA320A; }
.ca-pill.is-warn .ca-pill-dot { color: #E39A1B; }
.ca-pill-count { display: none; }
.ca-pill-caret { font-size: 15px; opacity: .8; }
.ca-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1100; width: 420px; max-width: calc(100vw - 24px); background: #fff;
           border: 1px solid #E8E8E4; border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); overflow: hidden; }
.ca-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #f0f0ee; }
.ca-title { font-size: 14px; font-weight: 700; color: #111827; }
.ca-close { display: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f4f6; color: #374151; font-size: 18px;
            align-items: center; justify-content: center; cursor: pointer; }
.ca-list { max-height: min(460px, 65vh); overflow-y: auto; }
.ca-item { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #f5f5f3; }
.ca-item.is-warn { background: #FFFBF3; }
.ca-src { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.ca-src-google { background: #FFF1EB; color: #C2531F; }
.ca-src-meta   { background: #EAF1FF; color: #1A5FD6; }
.ca-src-quo    { background: #EEF0FF; color: #4B4FD6; }
.ca-src-other  { background: #f3f4f6; color: #4b5563; }
.ca-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ca-item-head { display: flex; align-items: flex-start; gap: 8px; }
.ca-item-title { font-size: 13.5px; font-weight: 600; color: #111827; line-height: 1.35; }
.ca-badge { flex: 0 0 auto; margin-top: 1px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.ca-badge.is-bad  { background: #FDE7E2; color: #A8240A; }
.ca-badge.is-warn { background: #FAEEDA; color: #854F0B; }
.ca-item-text  { font-size: 12.5px; line-height: 1.5; color: #4b5563; }
.ca-item-since { font-size: 12px; color: #6b7280; }
.ca-item-ask   { font-size: 12px; font-weight: 600; color: #A8240A; }
.ca-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ca-actions .btn-link { padding-left: 4px; padding-right: 4px; font-size: 12px; color: #6b7280; text-decoration: none; }
.ca-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: #FAFAF8; font-size: 12px; color: #6b7280; }
.ca-foot a { font-weight: 600; color: var(--cc-primary); text-decoration: none; }
@media (max-width: 768px) {
  .ca-pill-text { display: none; }
  .ca-pill-count { display: inline; }
  .ca-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; border: 0; border-radius: 0;
             display: flex; flex-direction: column; z-index: 2000; box-shadow: none; }
  .ca-menu[hidden] { display: none; }
  .ca-head { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 0px)); }
  .ca-close { display: inline-flex; }
  .ca-list { flex: 1 1 auto; max-height: none; }
  .ca-foot { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
}

/* the page banner */
.ca-banners { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.ca-banner { display: flex; align-items: flex-start; gap: 14px; padding: 15px 18px; background: #fff; border: 1px solid; border-radius: 12px; }
.ca-banner.is-bad  { border-color: #F6B7A6; }
.ca-banner.is-warn { border-color: #EBCB95; background: #FFFBF3; }
.ca-banner-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.ca-banner.is-bad .ca-banner-icon  { background: #FDE7E2; color: #C4290A; }
.ca-banner.is-warn .ca-banner-icon { background: #FAEEDA; color: #854F0B; }
.ca-banner-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ca-banner-title { font-size: 14.5px; font-weight: 600; color: #111827; }
.ca-banner-text  { font-size: 13px; line-height: 1.55; color: #4b5563; }
.ca-banner-note  { font-size: 12.5px; color: #6b7280; }
.ca-banner-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.ca-banner-more { font-size: 12.5px; color: #6b7280; }
@media (max-width: 576px) {
  .ca-banner { flex-wrap: wrap; }
  .ca-banner-actions { flex-basis: 100%; }
}

/* "Incomplete" on a number that is missing data */
.ca-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #FDE7E2; color: #A8240A;
           font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.ca-incomplete { text-decoration: underline dashed #FA320A; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }

/* sidebar: a red dot on pages whose numbers are missing data */
.side-menu__item .ca-nav-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #FA320A; flex: 0 0 auto; }

/* Settings → Notifications → Connection alerts (layout per STYLE_GUIDE "Settings sections") */
.ca-set-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.ca-set-title { font-size: 15px; font-weight: 600; color: #111827; }
.ca-set-desc  { font-size: 13px; line-height: 1.55; color: #6b7280; }
.ca-set-boxes { display: flex; flex-direction: column; gap: 14px; }
.ca-set-box { background: #FAFAF8; border: 1px solid #EEEEEA; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ca-set-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; margin-bottom: 0; }
.ca-set-opt { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; color: #374151; margin: 0; }
.ca-set-opt input[type=checkbox] { margin-top: 4px; }
.ca-set-opt .ca-aside { color: #9ca3af; }
.ca-set-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; color: #374151; }
.ca-set-inline .form-select { width: auto; }
.ca-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 9px; font-size: 13.5px; line-height: 1.5; }
.ca-check-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; }
.ca-check-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1D9E75; }
.ca-check-status.is-ok      { color: #1D7A5C; }
.ca-check-status.is-delayed { color: #854F0B; }
.ca-check-status.is-delayed::before { background: #E39A1B; }
.ca-check-status.is-broken  { color: #A8240A; }
.ca-check-status.is-broken::before  { background: #FA320A; }
.ca-check-foot { font-size: 12px; color: #6b7280; }
.ca-set-info { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; background: #F4F7FF; border: 1px solid #E1E9FF; border-radius: 10px;
               font-size: 13px; line-height: 1.55; color: #33425f; }
.ca-set-info i { color: var(--cc-primary); font-size: 17px; flex: 0 0 auto; }
.ca-set-foot { margin-top: 12px; font-size: 12.5px; color: #6b7280; }

/* the bell: a connection alert has an icon instead of a person */
.pp-avatar-icon.nb-tone-bad  { background: #FDE7E2; color: #C4290A; }
.pp-avatar-icon.nb-tone-warn { background: #FAEEDA; color: #854F0B; }
.pp-avatar-icon.nb-tone-ok   { background: #E1F5EE; color: #1D7A5C; }
.ca-chip.ca-chip-first { margin: 0 6px 0 0; }   /* at the start of a line (report tiles) */

/* ==========================================================================
   REPORTS → TEAM ACTIVITY — app/views/reports/team-activity/index.php,
   public/assets/js/custom/team-activity-report.js. Inside .rp-page (shared report styles).
   ========================================================================== */
.ta-page .ta-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ta-page .ta-toolbar { gap: 8px; }
.ta-page .ta-people { width: 220px; }
.ta-page .ta-ctl { width: auto; min-width: 150px; max-width: 320px; height: 38px; padding-right: 2.25rem; }
.ta-page .ta-ctl.rt-filter-active, .ta-page .ta-search .form-control.rt-filter-active, .ta-page .pp-btn.rt-filter-active { border-color: var(--cc-primary); box-shadow: 0 0 0 3px var(--cc-primary-light); }
.ta-page .ta-custom { display: inline-flex; align-items: center; gap: 6px; }
.ta-page .ta-custom[hidden] { display: none; }
.ta-page .ta-custom .form-control { width: 150px; height: 38px; }
.ta-page .ta-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.ta-page .ta-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.ta-page .ta-search .form-control { padding-left: 30px; height: 38px; }

/* by team member */
.ta-page .ta-summary { padding: 14px 16px 6px; margin: 4px 0 16px; }
.ta-page .ta-sum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.ta-page .ta-sum-title { font-size: 14px; font-weight: 600; color: var(--rp-text); }
.ta-page .ta-sum-scroll { overflow-x: auto; }
.ta-page .ta-sum-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ta-page .ta-sum-table th { padding: 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; text-align: right; white-space: nowrap; }
.ta-page .ta-sum-table th:first-child, .ta-page .ta-sum-table td:first-child { text-align: left; padding-left: 10px; }
.ta-page .ta-sum-table td { padding: 8px 10px; border-top: 1px solid var(--rp-line); text-align: right; white-space: nowrap; }
.ta-page .ta-sum-row { cursor: pointer; }
.ta-page .ta-sum-row:hover td { background: var(--rp-soft); }
.ta-page .ta-sum-row.is-on td { background: var(--cc-primary-light); }
/* hovered / picked row: rounded ends (a table row can't be rounded, so its first and last cells are) */
.ta-page .ta-sum-row:hover td:first-child, .ta-page .ta-sum-row.is-on td:first-child { border-radius: 8px 0 0 8px; }
.ta-page .ta-sum-row:hover td:last-child,  .ta-page .ta-sum-row.is-on td:last-child  { border-radius: 0 8px 8px 0; }
.ta-page .ta-sum-row:hover td, .ta-page .ta-sum-row.is-on td,
.ta-page .ta-sum-row:hover + .ta-sum-row td, .ta-page .ta-sum-row.is-on + .ta-sum-row td { border-top-color: transparent; }
.ta-page .ta-who { display: inline-flex; align-items: center; gap: 8px; }
.ta-page .ta-who > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.ta-page .ta-who-name { font-weight: 600; color: var(--rp-text); }
.ta-page .ta-who-role { font-size: 11.5px; color: var(--rp-muted); }

/* the feed */
.ta-page .ta-feed { display: flex; flex-direction: column; gap: 14px; }
.ta-page .ta-skel-sum { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-top: 1px solid var(--rp-line); }
.ta-page .ta-skel-sum .rt-skel-w-xs { flex: 0 0 auto; margin-left: 52px; }
.ta-page .ta-skel-gap { flex: 1 1 auto; }
.ta-page .ta-skel-item .ta-body { gap: 8px; }
.ta-page .ta-day { padding: 4px 0; overflow: hidden; }
.ta-page .ta-day-head { padding: 10px 16px 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rp-muted); }
.ta-page .ta-list { list-style: none; margin: 0; padding: 0; }
.ta-page .ta-item { display: flex; gap: 12px; padding: 20px 16px; border-top: 1px solid var(--rp-line); }
.ta-page .ta-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: var(--rp-soft); color: #4b5563; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.ta-page .ta-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ta-page .ta-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.ta-page .ta-name { font-weight: 600; color: var(--rp-text); }
.ta-page .ta-role { color: var(--rp-muted); }
.ta-page .ta-role::before { content: "·"; margin-right: 7px; color: #c8c8c4; }
.ta-page .ta-time { margin-left: auto; color: var(--rp-muted); white-space: nowrap; }
.ta-page .ta-text { font-size: 14px; color: var(--rp-text); line-height: 1.45; }
.ta-page .ta-auto { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #EEF0FF; color: #4B4FD6; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }
.ta-page .ta-detail { font-size: 12.5px; color: #4b5563; line-height: 1.5; overflow-wrap: anywhere; }
.ta-page .ta-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 3px; font-size: 12px; }
.ta-page .ta-lead { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: #f3f4f6; font-weight: 600; color: #4b5563; }
.ta-page .ta-lead i { color: #9ca3af; }
.ta-page .ta-kind { color: var(--rp-muted); }
.ta-page .ta-link { font-weight: 600; color: var(--cc-primary); text-decoration: none; white-space: nowrap; }
.ta-page .ta-link:not(.is-main) { color: #4b5563; }
.ta-page .ta-link:hover { text-decoration: underline; }
.ta-page .ta-empty { padding: 44px 16px; text-align: center; color: #9ca3af; font-size: 14px; }
.ta-page .ta-empty .btn { margin-top: 10px; display: inline-flex; }
.ta-page .ta-note { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; background: #F4F7FF; border: 1px solid #E1E9FF; font-size: 13px; color: #33425f; }
.ta-page .ta-more { display: flex; justify-content: center; margin: 16px 0 24px; }
@media (max-width: 768px) {
  .ta-page .ta-people, .ta-page .ta-ctl, .ta-page .ta-search { flex: 1 1 100%; width: 100%; max-width: none; }
  .ta-page .ta-time { margin-left: 0; }
  .ta-page .ta-item { padding: 12px; }
}

/* ==========================================================================
   LOADING STATES — shared by every page (STYLE_GUIDE.md "Loading states")
   A skeleton stands in for a table / list / cards while they load:
     <span class="rt-skel rt-skel-line rt-skel-w-m rt-skel-h-md"></span>   a bar
     <span class="rt-skel rt-skel-circle"></span>                           an avatar
     <span class="rt-skel ta-icon"></span>                                   any box (takes the box's own size)
   Widths: xs 28px · s 70px · m 140px · l 40% · xl 65% · full 100%. Heights: (default) 10px · md 13px · lg 18px.
   ========================================================================== */
.rt-skel { display: inline-block; background: linear-gradient(90deg, #EEEDE8 25%, #F6F5F1 50%, #EEEDE8 75%); background-size: 200% 100%;
           animation: rtSkel 1.3s ease-in-out infinite; border-radius: 6px; color: transparent; }
.rt-skel-line { display: block; height: 10px; max-width: 100%; }
.rt-skel-circle { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; }
.rt-skel-w-xs { width: 28px; } .rt-skel-w-s { width: 70px; } .rt-skel-w-m { width: 140px; } .rt-skel-w-l { width: 40%; } .rt-skel-w-xl { width: 65%; } .rt-skel-w-full { width: 100%; }
.rt-skel-h-md { height: 13px; } .rt-skel-h-lg { height: 18px; }
@keyframes rtSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .rt-skel { animation: none; } }