/* ============================================
   GOLDEN MED HEALTH — DASHBOARD STYLESHEET
   Dual-role: Owner (Nehemiah) + Agent (ELPD)
   ============================================ */
:root {
  --db-bg:       #0f1117;
  --db-surface:  #1a1d27;
  --db-border:   rgba(255,255,255,.07);
  --db-muted:    rgba(255,255,255,.4);
  --db-text:     rgba(255,255,255,.88);
  --db-label:    rgba(255,255,255,.5);
  --red:         #C8102E;
  --red-dark:    #9E0B23;
  --red-glow:    rgba(200,16,46,.18);
  --green:       #22c55e;
  --green-bg:    rgba(34,197,94,.12);
  --yellow:      #eab308;
  --yellow-bg:   rgba(234,179,8,.12);
  --blue:        #3b82f6;
  --blue-bg:     rgba(59,130,246,.12);
  --purple:      #a855f7;
  --purple-bg:   rgba(168,85,247,.12);
  --font-head:   'Oswald', sans-serif;
  --font-body:   'Lato', sans-serif;
  --sidebar-w:   240px;
  --topbar-h:    64px;
  --radius:      8px;
  --radius-lg:   12px;
  --transition:  .2s ease;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; }
body { font-family:var(--font-body); background:var(--db-bg); color:var(--db-text); min-height:100vh; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

/* ---- LOGIN SCREEN ---- */
.login-screen {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 30% 20%, rgba(200,16,46,.12) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 80%, rgba(200,16,46,.08) 0%, transparent 55%), #0f1117;
  padding:20px;
}
.login-card {
  width:100%; max-width:420px;
  background:var(--db-surface);
  border:1px solid var(--db-border);
  border-radius:var(--radius-lg);
  padding:40px 36px;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo img { width:52px; height:52px; margin:0 auto 10px; }
.login-logo h1 { font-family:var(--font-head); font-size:1.3rem; color:var(--db-text); }
.login-logo p { color:var(--db-muted); font-size:.82rem; margin-top:4px; }
.login-roles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px; }
.role-btn {
  padding:12px; border-radius:var(--radius);
  border:2px solid var(--db-border);
  background:transparent; cursor:pointer;
  text-align:center; transition:all var(--transition);
  color:var(--db-muted); font-family:var(--font-body);
}
.role-btn .role-icon { font-size:1.4rem; display:block; margin-bottom:4px; }
.role-btn .role-name { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.role-btn:hover { border-color:var(--red); color:var(--db-text); }
.role-btn.active { border-color:var(--red); background:var(--red-glow); color:var(--db-text); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--db-label); margin-bottom:6px; }
.form-group input {
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,.05); border:1px solid var(--db-border);
  border-radius:var(--radius); color:var(--db-text);
  font-family:var(--font-body); font-size:.9rem;
  transition:border-color var(--transition);
}
.form-group input:focus { outline:none; border-color:var(--red); }
.form-group input::placeholder { color:rgba(255,255,255,.2); }
.btn-login {
  width:100%; padding:14px; border:none; border-radius:var(--radius);
  background:var(--red); color:#fff;
  font-family:var(--font-head); font-size:1rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:background var(--transition);
  margin-top:4px;
}
.btn-login:hover { background:var(--red-dark); }
.login-error { color:#f87171; font-size:.82rem; margin-top:10px; text-align:center; display:none; }

/* ---- DASHBOARD LAYOUT ---- */
.dashboard { display:none; min-height:100vh; }
.dashboard.visible { display:flex; }

/* SIDEBAR */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--db-surface);
  border-right:1px solid var(--db-border);
  height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.sidebar-logo {
  display:flex; align-items:center; gap:10px;
  padding:20px 16px; border-bottom:1px solid var(--db-border);
  flex-shrink:0;
}
.sidebar-logo img { width:32px; height:32px; }
.sidebar-logo .logo-text { font-family:var(--font-head); font-size:.9rem; line-height:1.2; color:var(--db-text); }
.sidebar-logo .logo-text span { color:var(--red); display:block; font-size:.75rem; }
.sidebar-user {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--db-border);
  flex-shrink:0;
}
.user-avatar {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:.85rem;
  flex-shrink:0;
}
.user-avatar.owner { background:var(--red); color:#fff; }
.user-avatar.agent { background:var(--blue); color:#fff; }
.user-info .name { font-size:.85rem; font-weight:700; color:var(--db-text); }
.user-info .role-tag { font-size:.7rem; color:var(--db-muted); text-transform:uppercase; letter-spacing:.06em; }
.sidebar-nav { flex:1; padding:12px 0; }
.nav-section-label {
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--db-muted);
  padding:10px 16px 6px;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; cursor:pointer; border-radius:6px;
  margin:1px 8px;
  font-size:.875rem; color:var(--db-muted);
  transition:all var(--transition);
  border:none; background:none; width:calc(100% - 16px);
  text-align:left; font-family:var(--font-body);
}
.nav-item:hover { background:rgba(255,255,255,.05); color:var(--db-text); }
.nav-item.active { background:var(--red-glow); color:var(--db-text); }
.nav-item.active .nav-icon { color:var(--red); }
.nav-icon { width:18px; font-size:1rem; flex-shrink:0; }
.nav-badge {
  margin-left:auto; background:var(--red);
  color:#fff; font-size:.65rem; font-weight:700;
  padding:2px 7px; border-radius:99px;
}
.sidebar-footer { padding:16px; border-top:1px solid var(--db-border); flex-shrink:0; }
.btn-logout {
  width:100%; padding:9px; background:rgba(255,255,255,.05);
  border:1px solid var(--db-border); border-radius:var(--radius);
  color:var(--db-muted); font-size:.8rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-body); transition:all var(--transition);
}
.btn-logout:hover { background:rgba(200,16,46,.15); color:var(--red); border-color:var(--red); }

/* MAIN AREA */
.main-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* TOPBAR */
.topbar {
  height:var(--topbar-h); flex-shrink:0;
  background:var(--db-surface); border-bottom:1px solid var(--db-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; gap:16px;
}
.topbar-title { font-family:var(--font-head); font-size:1.1rem; color:var(--db-text); }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-badge {
  padding:4px 12px; border-radius:99px; font-size:.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.07em;
}
.topbar-badge.owner { background:var(--red-glow); color:var(--red); border:1px solid rgba(200,16,46,.3); }
.topbar-badge.agent { background:var(--blue-bg); color:var(--blue); border:1px solid rgba(59,130,246,.3); }
.notif-btn {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid var(--db-border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; color:var(--db-muted);
  transition:all var(--transition);
}
.notif-btn:hover { color:var(--db-text); border-color:rgba(255,255,255,.15); }
.notif-dot {
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:50%; background:var(--red);
}

/* CONTENT */
.content-area { flex:1; overflow-y:auto; padding:28px 24px; }
.page { display:none; }
.page.active { display:block; }

/* ---- WIDGETS ---- */
.page-header { margin-bottom:28px; }
.page-header h2 { font-family:var(--font-head); font-size:1.5rem; color:var(--db-text); margin-bottom:4px; }
.page-header p { color:var(--db-muted); font-size:.875rem; }

/* KPI CARDS */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi-card {
  background:var(--db-surface); border:1px solid var(--db-border);
  border-radius:var(--radius-lg); padding:20px;
  position:relative; overflow:hidden;
}
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.kpi-card.red::before { background:var(--red); }
.kpi-card.green::before { background:var(--green); }
.kpi-card.blue::before { background:var(--blue); }
.kpi-card.purple::before { background:var(--purple); }
.kpi-card.yellow::before { background:var(--yellow); }
.kpi-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--db-muted); margin-bottom:8px; }
.kpi-value { font-family:var(--font-head); font-size:2rem; font-weight:700; color:var(--db-text); line-height:1; }
.kpi-sub { font-size:.75rem; color:var(--db-muted); margin-top:6px; }
.kpi-change { font-size:.75rem; margin-top:6px; }
.kpi-change.up { color:var(--green); }
.kpi-change.down { color:#f87171; }
.kpi-icon {
  position:absolute; right:16px; top:16px;
  font-size:1.6rem; opacity:.15;
}

/* CHARTS */
.chart-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:24px; }
.chart-card {
  background:var(--db-surface); border:1px solid var(--db-border);
  border-radius:var(--radius-lg); padding:20px;
}
.chart-card h4 { font-family:var(--font-head); color:var(--db-text); margin-bottom:4px; font-size:.95rem; }
.chart-card .sub { color:var(--db-muted); font-size:.78rem; margin-bottom:16px; }
.chart-placeholder {
  display:flex; align-items:flex-end; gap:6px;
  height:160px; border-bottom:1px solid var(--db-border);
  border-left:1px solid var(--db-border);
  padding:0 8px 0; overflow:hidden;
}
.bar {
  flex:1; border-radius:4px 4px 0 0;
  min-width:12px; transition:opacity var(--transition);
  cursor:pointer; position:relative;
}
.bar:hover { opacity:.8; }
.bar-red { background:linear-gradient(180deg, var(--red) 0%, rgba(200,16,46,.4) 100%); }
.bar-blue { background:linear-gradient(180deg, var(--blue) 0%, rgba(59,130,246,.4) 100%); }
.donut-wrap {
  width:140px; height:140px; margin:0 auto;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.donut-wrap svg { position:absolute; inset:0; transform:rotate(-90deg); }
.donut-center { text-align:center; z-index:1; }
.donut-center .big { font-family:var(--font-head); font-size:1.6rem; color:var(--db-text); }
.donut-center .small { font-size:.7rem; color:var(--db-muted); }
.donut-legend { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.donut-legend-item { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--db-muted); }
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* TABLES */
.data-table-wrap {
  background:var(--db-surface); border:1px solid var(--db-border);
  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px;
}
.table-header {
  padding:16px 20px; border-bottom:1px solid var(--db-border);
  display:flex; align-items:center; justify-content:space-between;
}
.table-header h4 { font-family:var(--font-head); font-size:.95rem; color:var(--db-text); }
.table-header .sub { color:var(--db-muted); font-size:.78rem; }
.table-actions { display:flex; gap:8px; }
.tbl-btn {
  padding:6px 14px; border-radius:var(--radius);
  border:1px solid var(--db-border); background:rgba(255,255,255,.04);
  color:var(--db-muted); font-size:.78rem; cursor:pointer;
  transition:all var(--transition); font-family:var(--font-body);
}
.tbl-btn:hover { border-color:var(--red); color:var(--db-text); }
.tbl-btn.primary { background:var(--red); border-color:var(--red); color:#fff; }
table { width:100%; border-collapse:collapse; }
table th {
  padding:10px 20px; text-align:left;
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--db-muted);
  border-bottom:1px solid var(--db-border);
  background:rgba(255,255,255,.02);
}
table td {
  padding:13px 20px; font-size:.85rem; color:var(--db-text);
  border-bottom:1px solid rgba(255,255,255,.04);
}
table tr:last-child td { border-bottom:none; }
table tr:hover td { background:rgba(255,255,255,.03); }
.td-email { color:var(--db-muted); font-size:.82rem; }
.td-date { color:var(--db-muted); font-size:.8rem; }
.status-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:99px;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.status-pill.new { background:var(--blue-bg); color:var(--blue); }
.status-pill.hot { background:var(--red-glow); color:var(--red); }
.status-pill.warm { background:var(--yellow-bg); color:var(--yellow); }
.status-pill.closed { background:var(--green-bg); color:var(--green); }
.status-pill.cold { background:rgba(255,255,255,.05); color:var(--db-muted); }
.status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.source-tag {
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:.7rem; background:rgba(255,255,255,.06); color:var(--db-muted);
}

/* COMMISSION PANEL */
.commission-card {
  background:linear-gradient(135deg, #1a0d11 0%, #1a1d27 100%);
  border:1px solid rgba(200,16,46,.25); border-radius:var(--radius-lg);
  padding:24px; margin-bottom:24px;
  position:relative; overflow:hidden;
}
.commission-card::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,16,46,.15) 0%, transparent 70%);
}
.commission-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.comm-item .label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--db-muted); margin-bottom:6px; }
.comm-item .value { font-family:var(--font-head); font-size:1.8rem; font-weight:700; color:var(--db-text); line-height:1; }
.comm-item .value.highlight { color:var(--green); }
.comm-item .sub { font-size:.72rem; color:var(--db-muted); margin-top:4px; }
.rate-badge {
  position:absolute; top:16px; right:16px;
  background:var(--red); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.07em;
  padding:4px 12px; border-radius:99px;
}

/* MARKETING HUB */
.campaign-card {
  background:var(--db-surface); border:1px solid var(--db-border);
  border-radius:var(--radius-lg); padding:20px;
  display:flex; align-items:center; gap:16px;
  cursor:pointer; transition:border-color var(--transition);
  margin-bottom:10px;
}
.campaign-card:hover { border-color:rgba(255,255,255,.15); }
.campaign-icon {
  width:48px; height:48px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0;
}
.campaign-info { flex:1; }
.campaign-title { font-weight:700; font-size:.9rem; color:var(--db-text); margin-bottom:3px; }
.campaign-sub { font-size:.78rem; color:var(--db-muted); }
.campaign-status { flex-shrink:0; }

/* EMAIL SEQUENCE */
.email-seq { display:flex; flex-direction:column; gap:0; position:relative; }
.email-seq::before {
  content:''; position:absolute; left:19px; top:40px; bottom:40px;
  width:2px; background:var(--db-border);
}
.seq-item { display:flex; gap:16px; align-items:flex-start; position:relative; padding-bottom:20px; }
.seq-item:last-child { padding-bottom:0; }
.seq-num {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:.85rem; font-weight:700;
  background:var(--db-surface); border:2px solid var(--db-border);
  color:var(--db-muted); z-index:1;
}
.seq-num.active { background:var(--red); border-color:var(--red); color:#fff; }
.seq-content { flex:1; padding-top:6px; }
.seq-content .day { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--db-muted); margin-bottom:3px; }
.seq-content .subject { font-size:.875rem; font-weight:700; color:var(--db-text); margin-bottom:3px; }
.seq-content .preview { font-size:.78rem; color:var(--db-muted); }
.seq-content .open-rate { font-size:.72rem; color:var(--green); margin-top:4px; }

/* ACTIVITY FEED */
.activity-item {
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.activity-item:last-child { border-bottom:none; }
.act-icon {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.act-icon.lead { background:var(--blue-bg); }
.act-icon.sale { background:var(--green-bg); }
.act-icon.email { background:var(--purple-bg); }
.act-icon.visit { background:var(--yellow-bg); }
.act-text { flex:1; }
.act-text .main { font-size:.85rem; color:var(--db-text); line-height:1.4; }
.act-text .time { font-size:.72rem; color:var(--db-muted); margin-top:2px; }

/* STRATEGY CARDS */
.strategy-card {
  background:var(--db-surface); border:1px solid var(--db-border);
  border-radius:var(--radius-lg); padding:20px; margin-bottom:16px;
}
.strategy-card h4 { font-family:var(--font-head); color:var(--db-text); margin-bottom:8px; font-size:.95rem; }
.strategy-card p { color:var(--db-muted); font-size:.82rem; line-height:1.6; }
.strategy-card .step-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.strategy-card .step-list li { display:flex; gap:8px; font-size:.82rem; color:var(--db-muted); align-items:flex-start; }
.strategy-card .step-list li::before { content:'→'; color:var(--red); flex-shrink:0; }

/* PROMO BUILDER */
.promo-template {
  background:var(--db-surface); border:2px solid var(--db-border);
  border-radius:var(--radius-lg); padding:20px; cursor:pointer;
  transition:border-color var(--transition); text-align:center;
}
.promo-template:hover { border-color:var(--red); }
.promo-template.selected { border-color:var(--red); background:var(--red-glow); }
.promo-emoji { font-size:2rem; margin-bottom:8px; }
.promo-name { font-size:.85rem; font-weight:700; color:var(--db-text); margin-bottom:4px; }
.promo-desc { font-size:.75rem; color:var(--db-muted); }

/* MISC */
.section-divider { height:1px; background:var(--db-border); margin:24px 0; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.four-col { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-2 { gap:8px; }
.text-green { color:var(--green); }
.text-red { color:var(--red); }
.text-blue { color:var(--blue); }
.text-yellow { color:var(--yellow); }
.text-muted { color:var(--db-muted); }
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.tag-red { background:var(--red-glow); color:var(--red); border:1px solid rgba(200,16,46,.25); }
.tag-green { background:var(--green-bg); color:var(--green); }
.tag-blue { background:var(--blue-bg); color:var(--blue); }
.agent-only { display:none; }
.owner-only { display:none; }
.spinner-small { width:16px; height:16px; border:2px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; display:inline-block; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { text-align:center; padding:40px 20px; color:var(--db-muted); }
.empty-state .emoji { font-size:2.5rem; margin-bottom:8px; }
.empty-state p { font-size:.875rem; }
.progress-bar { height:6px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:8px; }
.progress-fill { height:100%; border-radius:99px; }

/* RESPONSIVE */
@media(max-width:900px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .chart-grid { grid-template-columns:1fr; }
  .commission-grid { grid-template-columns:repeat(2,1fr); }
  .two-col,.three-col,.four-col { grid-template-columns:1fr; }
}
@media(max-width:680px) {
  .sidebar { display:none; }
  .sidebar.mobile-open { display:flex; position:fixed; z-index:100; height:100vh; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
}