/* ═══════════════════════════════════════
   Pulse — Layout: login, sidebar, topbar, main
   ═══════════════════════════════════════ */

/* ── LOGIN ── */
#login-screen { position:fixed;inset:0;background:var(--bg);z-index:999;display:flex;align-items:center;justify-content:center;padding:16px; }
.login-box { background:var(--bg1);border:1px solid var(--border2);border-radius:16px;padding:36px;width:380px;max-width:100%; }
.login-logo { display:flex;align-items:center;gap:10px;margin-bottom:28px; }
.login-dot  { width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0; }
.login-name { font-family:var(--serif);font-size:22px; }
.login-title { font-size:15px;font-weight:500;margin-bottom:4px; }
.login-sub   { font-size:12px;color:var(--text3);margin-bottom:24px; }
.lf          { margin-bottom:14px; }
.lf label    { display:block;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;margin-bottom:5px; }
.lf input    { width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;color:var(--text);font-size:13px;font-family:var(--sans);outline:none;transition:border .15s; }
.lf input:focus { border-color:var(--accent); }
.login-btn   { width:100%;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:11px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--sans);margin-top:4px;transition:background .15s; }
.login-btn:hover { background:#6b9ff8; }
.login-err   { font-size:12px;color:var(--red);margin-top:8px;display:none;text-align:center; }
.login-footer { font-size:11px;color:var(--text3);text-align:center;margin-top:20px; }

/* ── APP SHELL ── */
.app { display:flex;height:100vh;position:relative; }
.sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:49; }

/* ── SIDEBAR ── */
.sidebar { width:var(--sidebar);min-width:var(--sidebar);background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s;z-index:50; }
.logo-wrap  { padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.logo-inner { display:flex;align-items:center;gap:8px; }
.logo-dot   { width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700; }
.logo-name  { font-family:var(--serif);font-size:17px;letter-spacing:-.5px; }
.logo-tag   { font-size:10px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase; }
.sidebar-close { display:none;background:none;border:none;color:var(--text3);cursor:pointer;font-size:20px;padding:2px; }

.office-picker       { padding:10px 12px;border-bottom:1px solid var(--border); }
.office-picker label { font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:5px; }
.office-picker select { width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;padding:6px 8px;font-family:var(--sans);outline:none; }

.sec       { padding:14px 8px 4px; }
.sec-label { font-size:10px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;padding:0 8px;margin-bottom:4px; }

/* Nav items */
.ni { display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--text2);font-size:13px;transition:all .15s;margin-bottom:1px;white-space:nowrap;overflow:hidden;border:none;background:none;width:100%;font-family:var(--sans);text-align:left; }
.ni:hover       { background:var(--bg2);color:var(--text); }
.ni.active      { background:rgba(79,142,247,.12);color:var(--accent); }
.ni .icon       { width:15px;height:15px;flex-shrink:0;opacity:.7; }
.ni.active .icon { opacity:1; }
.nb             { margin-left:auto;font-size:10px;padding:1px 5px;border-radius:4px;background:rgba(79,142,247,.2);color:var(--accent);font-family:var(--mono); }
.nb.g { background:rgba(52,211,153,.15);color:var(--green); }
.nb.r { background:rgba(248,113,113,.15);color:var(--red); }
.nb.a { background:rgba(251,191,36,.15);color:var(--amber); }

.sidebar-bottom { margin-top:auto;padding:10px 8px;border-top:1px solid var(--border); }
.sync-row { display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:11px;color:var(--text3); }
.sdot { width:6px;height:6px;border-radius:50%;background:var(--green);animation:pdot 2s infinite;flex-shrink:0; }

/* ── MAIN ── */
.main    { flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0; }
.topbar  { height:var(--topbar);min-height:var(--topbar);background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px; }
.hamburger   { display:none;background:none;border:none;color:var(--text2);cursor:pointer;padding:4px;flex-shrink:0; }
.topbar-title { font-size:14px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.topbar-sub   { font-size:11px;color:var(--text3);margin-left:4px;font-weight:400; }
.topbar-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }

.content { flex:1;overflow-y:auto;padding:16px; }

/* ── VIEWS ── */
.view        { display:none; }
.view.active { display:block; }

/* ── BRANCH BANNER ── */
.branch-banner { display:none;align-items:center;gap:8px;background:rgba(79,142,247,.08);border:1px solid rgba(79,142,247,.2);border-radius:8px;padding:8px 14px;margin-bottom:14px;font-size:12px;color:var(--accent); }
.bb-dot { width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .sidebar { position:fixed;top:0;left:0;height:100%;transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-close { display:block; }
  .sidebar-overlay.open { display:block; }
  .hamburger { display:block; }
  .grid-2, .grid-3, .mkt-grid-2 { grid-template-columns:1fr !important; }
  .field-row, .field-row-3 { grid-template-columns:1fr !important; }
  .kpi-grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  /* Bigger fonts on mobile */
  .kc-value { font-size:28px !important; }
  .kc-label { font-size:12px !important; }
  .kc-sub   { font-size:12px !important; }
  .card-title { font-size:14px !important; }
  .tbl td, .tbl th { font-size:12px !important; padding:8px 6px !important; }
  /* Topbar compact */
  #topbar-title { font-size:13px !important; }
  .topbar-sub { display:none; }
  /* KPI grid 2 cols on mobile */
  #mkt-kpis { grid-template-columns:repeat(2,1fr) !important; }
}