/* =============================================================
   Paychex Sales App — CSS
   Desktop: fixed sidebar + topbar
   Mobile:  sticky top bar + fixed bottom nav tab bar
   ============================================================= */

:root {
  --navy:  #002d72;
  --red:   #e31837;
  --bg:    #f0f2f5;
}

/* ── Reset ─────────────────────────────────────────────────── */
body { margin: 0; padding: 0; background: var(--bg); }

/* ── Desktop sidebar ────────────────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 240px;
  height: 100vh;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto;
}

#sidebar .sidebar-brand  { padding: 1.25rem 1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.15); }
#sidebar .brand-name     { font-size: 1.4rem; font-weight: 800; letter-spacing: .08em; color: #fff; line-height: 1.1; }
#sidebar .brand-sub      { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: .2rem; }

#sidebar nav             { flex: 1; padding: .75rem 0; }
#sidebar nav a           { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem; transition: background .15s; }
#sidebar nav a i         { font-size: 1rem; flex-shrink: 0; }
#sidebar nav a:hover     { background: rgba(255,255,255,.1); color: #fff; }
#sidebar nav a.active    { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; border-left: 3px solid var(--red); padding-left: calc(.75rem - 3px); }

#sidebar .sidebar-footer { padding: .75rem 1rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .75rem; color: rgba(255,255,255,.5); }

/* ── Desktop main area ──────────────────────────────────────── */
#main {
  margin-left: 240px;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

#topbar {
  background: #fff;
  padding: .6rem 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 900;
}
#topbar .page-title { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin: 0; }

#content { padding: 1.5rem; flex: 1; }
.flash-container { padding: .75rem 1.5rem 0; }

/* ── Mobile top bar (hidden on desktop) ─────────────────────── */
#mobile-topbar {
  display: none;
  background: var(--navy);
  color: #fff;
  padding: .65rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1001;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.mobile-brand     { font-size: 1rem; font-weight: 800; letter-spacing: .08em; line-height: 1.1; }
.mobile-brand-sub { font-size: .6rem; opacity: .65; }
.mobile-page-title{ font-size: .85rem; font-weight: 600; text-align: right; opacity: .9; max-width: 55%; word-break: break-word; }

/* ── Mobile bottom nav (hidden on desktop) ──────────────────── */
#mobile-bottomnav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid #dee2e6;
  height: 60px;
}
#mobile-bottomnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #6c757d;
  text-decoration: none;
  font-size: .6rem;
  font-weight: 500;
  transition: color .15s;
}
#mobile-bottomnav a i      { font-size: 1.25rem; }
#mobile-bottomnav a.active { color: var(--navy); }
#mobile-bottomnav a.nav-highlight       { color: var(--red); }
#mobile-bottomnav a.nav-highlight.active{ color: var(--red); }

/* ── "More" bottom sheet ────────────────────────────────────── */
#moreDrawer { border-radius: 16px 16px 0 0; }
.more-drawer-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  color: #212529;
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid #f0f0f0;
  transition: background .15s;
}
.more-drawer-link i      { font-size: 1.3rem; color: var(--navy); width: 1.5rem; text-align: center; }
.more-drawer-link:hover  { background: #f8f9fa; }
.more-drawer-link.active { font-weight: 600; color: var(--navy); }

/* ── KPI cards ──────────────────────────────────────────────── */
.kpi-card            { border-left: 4px solid var(--navy); border-radius: 8px; background: #fff; }
.kpi-card .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.kpi-card .kpi-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
.kpi-card .progress  { height: 6px; border-radius: 3px; }
.kpi-card.kpi-red    { border-left-color: #dc3545; }
.kpi-card.kpi-green  { border-left-color: #198754; }
.kpi-card.kpi-blue   { border-left-color: #0d6efd; }
.kpi-card.kpi-yellow { border-left-color: #ffc107; }

/* ── Status dots ────────────────────────────────────────────── */
.status-dot        { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.status-dot.red    { background: #dc3545; }
.status-dot.yellow { background: #ffc107; }
.status-dot.green  { background: #198754; }
.status-dot.gray   { background: #6c757d; }

/* ── Schedule blocks ────────────────────────────────────────── */
.schedule-block         { border-left: 4px solid #dee2e6; padding: 8px 12px; margin-bottom: 8px; border-radius: 0 6px 6px 0; background: #fff; }
.schedule-block.meeting { border-left-color: var(--navy); }
.schedule-block.dial    { border-left-color: #0d6efd; }
.schedule-block.d2d     { border-left-color: #198754; }
.schedule-block.cpa     { border-left-color: var(--red); }
.schedule-block.desk    { border-left-color: #6c757d; }

/* ── Tier headers (CPA tracker) ─────────────────────────────── */
.tier-section  { margin-bottom: 2rem; }
.tier-header   { background: var(--navy); color: #fff; padding: 8px 16px; border-radius: 6px 6px 0 0; font-weight: 600; }

/* ── Email preview ──────────────────────────────────────────── */
.email-preview { font-family: system-ui,-apple-system,sans-serif; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; white-space: pre-wrap; font-size: .9rem; line-height: 1.6; color: #212529; }

/* ── Mobile responsive ──────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Kill the desktop sidebar and its main-area offset */
  #sidebar  { display: none !important; }
  #topbar   { display: none !important; }
  #main     { margin-left: 0 !important; }

  /* Show mobile chrome */
  #mobile-topbar    { display: flex !important; }
  #mobile-bottomnav { display: flex !important; }

  /* Content: tighten padding, leave room for bottom nav */
  #content         { padding: .75rem .75rem 80px; }
  .flash-container { padding: .5rem .75rem 0; }

  /* Cards: reduce visual weight */
  .card { border-radius: .5rem !important; }

  /* KPI values slightly smaller on phone */
  .kpi-card .kpi-value { font-size: 1.6rem; }

  /* Tables: horizontal scroll instead of overflow */
  table { min-width: 500px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: .375rem; }

  /* Forms: full-width inputs, comfortable tap targets */
  .form-control,
  .form-select   { font-size: 1rem !important; min-height: 44px; }
  .btn           { min-height: 44px; font-size: .95rem; }
  label          { font-size: .9rem; }

  /* Reduce column density on small screens */
  .row-cols-mobile-1 > * { flex: 0 0 100%; max-width: 100%; }

  /* Email preview: smaller text on phone */
  .email-preview { font-size: .8rem; padding: 12px; }
}

/* ── Utilities ──────────────────────────────────────────────── */
.shadow-sm  { box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; }
.rounded-3  { border-radius: .5rem !important; }