:root{
  --bg:#fafafa;
  --card:#fff;
  --border:#e5e7eb;
  --muted:#6b7280;
  --text:#111827;

  --navHover:#f9fafb;
  --navActive:#f3f4f6;

  --iconBg:#fff;
  --iconText:#374151;

  --softBorder:#f3f4f6;

  /* ===== Brand + Bubble Buttons ===== */
  /* Pick ONE brand accent (swap anytime) */

  /* ✅ 5-Color Palette (Roles First) */
  /* ===== Pastel Signal Palette (same roles, calmer) ===== */
  --accent:#7DD3FC;     /* soft cyan / sky */
  --accentText:#0b1f2a;

  --success:#86EFAC;    /* soft green */
  --warning:#FDE68A;    /* soft yellow */
  --danger:#FCA5A5;     /* soft red */
  --meta:#9CA3AF;       /* neutral gray */

  /* Bubble depth tuning */
  --btnRadius: 999px;
  --btnShadow: 0 10px 22px rgba(0,0,0,.10);
  --btnShadowHover: 0 14px 30px rgba(0,0,0,.14);
  --btnInsetTop: inset 0 1px 0 rgba(255,255,255,.55);
  --btnInsetBottom: inset 0 -1px 0 rgba(0,0,0,.12);
}


/* Dark mode variables (supports body.dark AND data-theme) */
html[data-theme="dark"],
body[data-theme="dark"],
html.dark,
body.dark{
  /* lighter, still “dark mode” */
  --bg:#0f172a;
  --card:#111c32;

  /* slightly softer borders so it doesn’t feel “boxed in” */
  --border:#263244;
  --softBorder:#223044;

  --muted:#9ca3af;
  --text:#e5e7eb;

  --navHover:#141f36;
  --navActive:#1b2942;

  --iconBg:#0f172a;
  --iconText:#e5e7eb;

  /* keep your palette */
  --accent:#7DD3FC;
  --accentText:#0b1f2a;

  --success:#86EFAC;
  --warning:#FDE68A;
  --danger:#FCA5A5;
  --meta:#9CA3AF;

  /* bubble depth */
  --btnShadow: 0 12px 26px rgba(0,0,0,.40);
  --btnShadowHover: 0 16px 34px rgba(0,0,0,.50);
  --btnInsetTop: inset 0 1px 0 rgba(255,255,255,.14);
  --btnInsetBottom: inset 0 -1px 0 rgba(0,0,0,.50);
}





/* Visibility helpers */
.mobileOnly{ display:none; }
.desktopOnly{ display:block; }

@media (max-width: 900px){
  .mobileOnly{ display:initial; }
  .desktopOnly{ display:none !important; }
}

* { box-sizing: border-box; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

/* ===== Layout (sidebar + content) ===== */
.app{
  display:grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

aside{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 240px; /* keeps sidebar consistent across pages */
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
}

/* Brand + meta */
.brand{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  padding: 4px 10px;
}

.meta{
  color: var(--muted);
  font-size: 13px;
  padding: 0 10px;
  margin-top: 4px;

  /* keeps it on one line like your screenshot */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav */
.nav{
  margin-top: 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
  border: 1px solid transparent;
}

.nav a:hover{
  background: var(--navHover);
  border-color: var(--softBorder);
}

.nav a.active{
  background: var(--navActive);
  border-color: var(--border);
  font-weight: 700;
}

/* make click/press match active so it doesn't flash weird */
.nav a:active{
  background: var(--navActive);
}

/* ===== Right-side icons ===== */
.icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--iconBg);
  color: var(--iconText);
  flex: 0 0 auto;
}
.icon svg{
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.spacer { height: 12px; }

/* ===== Dark mode toggle ===== */
.themeToggleWrap{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 92px; /* sits above Local-first card */
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.themeToggleLabel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}

.themeHint{
  color: var(--muted);
  font-size: 12px;
}

.themeToggle{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--navActive);
  position: relative;
  cursor: pointer;
  padding: 0;
}

.themeToggle .knob{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: left .18s ease;
}

html[data-theme="dark"] .themeToggle .knob{
  left: 21px;
}

/* ===== Sidebar footer ===== */
.sideFooter{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  color: var(--muted);
  font-size: 12px;
  padding: 10px;
  border: 1px solid var(--softBorder);
  border-radius: 12px;
  background: var(--bg);
}

/* ===== Main content ===== */
main{
  padding: 24px;
  max-width: 980px;
  margin: 0 auto;
  width:100%;
}

.pageTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom: 14px;
}
.pageTitle{ font-weight: 900; font-size: 18px; }
.pageSub{ color: var(--muted); font-size: 13px; margin-top:4px; }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top: 16px;
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}
.card h2{ margin:0; font-size: 15px; }
.card .sub{ margin-top:6px; color: var(--muted); font-size:13px; }

.big{ font-weight: 900; font-size: 28px; margin-top: 10px; }

.list{
  margin-top:12px;
  border:1px solid var(--softBorder);
  border-radius:10px;
  overflow:hidden;
  background: var(--card);
}

.row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-top:1px solid var(--softBorder);
}
.row:first-child{ border-top:0; }

.title{ font-weight:600; }

.small{
  color: var(--muted);
  font-size: 12px;
  text-align:right;
  white-space:nowrap;
}

.full{ grid-column: 1 / -1; }
.empty{ color: var(--muted); font-size: 13px; padding: 12px; }

a{ color: inherit; }

footer{
  color: var(--muted);
  text-align:center;
  padding:16px;
  margin-top: 24px;
  font-size: 13px;
}

/* =========================
   Mobile bottom dock + profile popover
   (KEEP THIS BLOCK LAST in app.css)
   ========================= */
@media (max-width: 900px){
  /* Stop side-by-side layout */
  .app{
    display:block !important;
    min-height:100vh;
  }

  /* FORCE bottom dock */
  .app > aside{
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 64px !important;

    padding: 8px 10px !important;
    box-sizing: border-box !important;

    border-top: 1px solid var(--border) !important;
    border-right: 0 !important;

    background: var(--card) !important;
    z-index: 999 !important;
  }

  /* Hide sidebar-only content */
  .app > aside .brand,
  .app > aside .meta,
  .app > aside .sideFooter,
  .app > aside .sideLogout,
  .app > aside .themeToggleWrap{
    display:none !important;
  }

  /* Nav row */
  .app > aside .nav{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-around !important;
    gap:6px !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* Anchor links in dock */
  .app > aside .nav a,
  .app > aside .nav .navBtn{
    width:52px !important;
    height:48px !important;
    padding:0 !important;
    border-radius:14px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--text) !important;
    cursor: pointer !important;
  }

  /* Hide text labels */
  .app > aside .nav a > span:first-child,
  .app > aside .nav .navBtn > span:first-child{
    display:none !important;
  }

  /* Bigger icons */
  .app > aside .nav a svg,
  .app > aside .nav .navBtn svg{
    width:22px !important;
    height:22px !important;
  }

  /* Active tab styling */
  .app > aside .nav a.active{
    background: var(--navActive) !important;
    border-color: var(--border) !important;
  }

  /* Hide Activity icon on MOBILE (it lives in the profile popover instead) */
  .app > aside .nav a[data-route="activity"]{
    display:none !important;
  }

  /* Make main content leave space for dock */
  .app > main{
    padding-bottom: calc(64px + 14px) !important;
  }

  /* ===== Profile popover ===== */
  .mobileMenu{
    position: fixed;
    right: 12px;
    bottom: calc(64px + 10px);
    width: 180px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0,0,0,.14);

    padding: 6px;
    display: none;
    z-index: 1000;
  }

  .mobileMenu.open{ display:block; }

  .mmItem{
    width:100%;
    text-align:left;
    padding:10px 10px;
    border-radius:10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    cursor:pointer;
    font: inherit;
  }
  .mmItem:hover{ background: var(--navHover); border-color: var(--softBorder); }
  .mmItem.danger{ color: #ef4444; }
}

@media (max-width: 900px){
  /* hard kill Activity in the dock */
  aside nav.nav a.desktopOnly{
    display:none !important;
  }

  /* make sure Profile shows */
  aside nav.nav a.mobileOnly{
    display:flex !important;
  }
}

/* =========================================================
   Force-hide / show specific nav items across breakpoints
   (PUT THIS AT THE VERY END OF app.css)
   ========================================================= */

/* Desktop: never show mobile-only items */
@media (min-width: 901px){
  aside nav.nav a.mobileOnly{
    display:none !important;
  }
}

/* Mobile: never show desktop-only items */
@media (max-width: 900px){
  aside nav.nav a.desktopOnly{
    display:none !important;
  }
  aside nav.nav a.mobileOnly{
    display:flex !important;
  }
}

/* =========================================================
   BRAND ACCENT APPLICATION (ADD ONLY — no removals)
   Makes --accent visible in a smart, low-noise way
   ========================================================= */



/* 2) Card headers get a subtle cyan underline (structure, not decoration) */
.card h2{
  position: relative;
  padding-bottom: 8px;
}
.card h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:42px;
  height:2px;
  border-radius:999px;
  background: var(--accent);
  opacity:.55;
}

/* 3) Focus ring uses accent (instant “premium” feel) */
:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent), transparent 45%);
  outline-offset: 2px;
  border-radius: 12px;
}




/* =========================================================
   CARD COLOR THEMING (soft, pastel, intentional)
   ========================================================= */

/* Shared behavior */
.card.card-danger,
.card.card-success,
.card.card-accent{
  position: relative;
  border-top-width: 2px;
}

/* Header underline inherits card color */
.card.card-danger h2::after,
.card.card-success h2::after,
.card.card-accent h2::after{
  width: 48px;
  height: 2px;
  border-radius: 999px;
  opacity: .9;
}

/* ===== Due Today — soft red ===== */
.card.card-danger{
  border-top-color: var(--danger);
}
.card.card-danger h2::after{
  background: var(--danger);
}

/* Optional: make KPI number slightly tinted */
.card.card-danger .big{
  color: #7f1d1d; /* deep muted red */
}

/* ===== Newest Leads — soft green ===== */
.card.card-success{
  border-top-color: var(--success);
}
.card.card-success h2::after{
  background: var(--success);
}
.card.card-success .big{
  color: #14532d; /* deep muted green */
}

/* ===== Attention Needed — brand cyan ===== */
.card.card-accent{
  border-top-color: var(--accent);
}
.card.card-accent h2::after{
  background: var(--accent);
}
.card.card-accent .big{
  color: #0b3a4a; /* deep cyan ink */
}

/* Soft top tint (very subtle) */
.card.card-danger{ box-shadow: inset 0 2px 0 rgba(252,165,165,.60); }
.card.card-success{ box-shadow: inset 0 2px 0 rgba(134,239,172,.60); }
.card.card-accent{ box-shadow: inset 0 2px 0 rgba(125,211,252,.65); }

/* KPI value semantics inside Attention Needed */
.card.card-accent .kpiVal.warn{ color:#92400e; }   /* warm amber ink */
.card.card-accent .kpiVal.danger{ color:#7f1d1d; } /* deep red ink */
.card.card-accent .kpiVal.good{ color:#14532d; }   /* deep green ink */


/* =========================================================
   CARD COLOR WASH ON HOVER (soft + premium)
   ========================================================= */

/* Base: ensure smooth transitions */
.card{
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background-color .18s ease;
}

/* ===== Due Today (red) ===== */
.card.card-danger:hover{
  background-color: rgba(252,165,165,.08);
}

/* ===== Newest Leads (green) ===== */
.card.card-success:hover{
  background-color: rgba(134,239,172,.08);
}

/* ===== Attention Needed (cyan) ===== */
.card.card-accent:hover{
  background-color: rgba(125,211,252,.10);
}

/* =========================================
   Calendar day coloring (subtle, semantic)
   ========================================= */

.dayCell{
  position: relative;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Priority ring (thin, not loud) */
.dayCell.hasOverdue{
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger), transparent 55%);
}
.dayCell.hasToday{
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent), transparent 55%);
}

/* Upcoming “money heat”: subtle corner wash, intensity via --heat (0..1) */
.dayCell.hasUpcoming::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  /* cap intensity so it never takes over */
  background: color-mix(
    in oklab,
    var(--success),
    transparent calc(92% - (var(--heat, 0) * 10%))
  );
}

/* Dots inside day cell (whatever class you use for them) */
.dayCell .dot{
  background: var(--meta);
}

/* Dot color follows urgency */
.dayCell.hasUpcoming .dot{
  background: color-mix(in oklab, var(--success), transparent 35%);
}
.dayCell.hasToday .dot{
  background: color-mix(in oklab, var(--accent), transparent 30%);
}
.dayCell.hasOverdue .dot{
  background: color-mix(in oklab, var(--danger), transparent 25%);
}

/* =========================================================
   AUTH BUTTON (ICON-ONLY WHEN LOGGED IN)
   ========================================================= */

#authBtn{
  width: 32px;
  height: 32px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;            /* curved rectangle, NOT pill */
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);

  cursor: pointer;
}

#authBtn:hover{
  background: var(--navHover);
}

/* Power icon inside */
#authBtn svg{
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.brand .brandC{ color:#ef4444; } /* red */
.brand .brandR{ color:#3b82f6; } /* blue */
.brand .brandM{ color:#22c55e; } /* green */


.brand .brandC,
.brand .brandR,
.brand .brandM{
  font-weight: 950;
}

/* Icon-only pill CTA (reuses pillCta.green colors) */
.pillCta.iconOnly{
  width: 32px;
  height: 32px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* White icon on green CTA */
.pillCta.green.iconOnly{
  color: #ffffff;
}

.pillCta.iconOnly svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* ===== Sidebar nav icon circle sizing ===== */
aside .nav a .icon{
  width: 30px;        /* was ~32–34 */
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* keep SVG crisp inside */
aside .nav a .icon svg{
  width: 16px;        /* was ~16–18 */
  height: 16px;
}