/* ═══════════════════════════════════════════════════════════
   LMP Command Center — Styles
   Brand tokens from lowermypge.com CLAUDE.md.
   Admin-only semantic colors are documented below (approved
   exception to the "no new colours" rule for category dots).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand tokens (from lowermypge.com site) ── */
  --ede-midnight: #07192E;
  --ede-sky:      #0BA5E8;
  --ede-gold:     #C9A84C;
  --ede-white:    #FFFFFF;
  --ede-mist:     #EAF6FD;

  /* ── Dark surface derivatives (white-overlay on midnight) ── */
  --bg:         var(--ede-midnight);
  --surface:    rgba(255,255,255,0.03);
  --card:       rgba(255,255,255,0.04);
  --card-hover: rgba(255,255,255,0.06);
  --border:     rgba(255,255,255,0.07);
  --border-hi:  rgba(255,255,255,0.14);

  /* ── Text (midnight-bg WCAG-safe) ── */
  --t1: #FFFFFF;                       /* 17.7:1 on midnight */
  --t2: rgba(255,255,255,0.65);        /* body secondary */
  --t3: rgba(255,255,255,0.38);        /* muted/meta */

  /* ── Category accents (admin-only semantic) ── */
  --cat-mark:    var(--ede-sky);       /* brand sky */
  --cat-jenessa: #a98af5;              /* violet — personal other */
  --cat-family:  var(--ede-gold);      /* brand gold (shared/family) */
  --cat-work:    #34d399;              /* teal — business */
  --cat-solar:   #fb923c;              /* orange — solar/LowerMyPGE */

  /* ── Status accents ── */
  --status-red:   #f87171;
  --status-green: #4ade80;
  --gold-dim:     rgba(201,168,76,0.14);
  --gold-glow:    rgba(201,168,76,0.28);

  /* ── Typography ── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Figtree', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;  /* documented exception — data density */

  /* ── Sizing ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --sw: 226px;
  --topbar-h: 54px;
  --status-h: 32px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--t1);
  font-size:14px;
  line-height:1.5;
}

/* ─── LOGIN GATE ─────────────────────────────────── */
.login-gate{
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  z-index:50;  /* below Netlify Identity widget (z-index:99) so login modal can appear */
  flex-direction:column;gap:20px;padding:40px;
}
/* Keep Identity widget iframe above login-gate */
#netlify-identity-widget{z-index:2000 !important;}
.login-card{
  max-width:380px;width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px 28px;
  text-align:center;
}
.login-brand{
  font-family:var(--font-display);
  font-size:28px;color:var(--ede-gold);
  margin-bottom:6px;
  line-height:1;
}
.login-sub{
  font-family:var(--font-mono);
  font-size:10px;color:var(--t3);
  letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:22px;
}
.login-msg{
  color:var(--t2);font-size:13.5px;line-height:1.6;
  margin-bottom:22px;
}
.btn-login{
  background:var(--ede-sky);color:var(--ede-midnight);
  font-family:var(--font-body);font-weight:600;
  padding:12px 24px;border-radius:var(--r-sm);
  border:none;cursor:pointer;font-size:14px;
  width:100%;
}
.btn-login:hover{background:#0C9AD2;}

/* ─── SIDEBAR ────────────────────────────────────── */
.app{display:flex;height:100vh;}
.sidebar{
  width:var(--sw);min-width:var(--sw);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
}
.sb-logo{
  padding:18px 18px 14px;
  border-bottom:1px solid var(--border);
}
.logo-mark{
  font-family:var(--font-display);
  font-size:21px;
  color:var(--ede-gold);
  letter-spacing:0.01em;
  line-height:1;
}
.logo-sub{
  font-family:var(--font-mono);
  font-size:9px;color:var(--t3);
  letter-spacing:0.1em;text-transform:uppercase;
  margin-top:4px;
}
.sb-nav{padding:10px 8px;flex:1;overflow-y:auto;}
.nav-sect{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--t3);
  padding:10px 10px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--t2);font-size:13px;
  transition:all 0.15s;margin-bottom:1px;
  user-select:none;
}
.nav-item:hover{background:rgba(255,255,255,0.04);color:var(--t1);}
.nav-item.active{background:var(--gold-dim);color:var(--ede-gold);}
.nav-ico{width:16px;text-align:center;font-size:13px;opacity:.75;}
.nav-badge{
  margin-left:auto;background:var(--status-red);
  color:#fff;font-size:9px;font-weight:600;
  padding:1px 5px;border-radius:10px;
  font-family:var(--font-mono);
}
.nav-badge.amber{background:var(--ede-gold);color:var(--ede-midnight);}

.sb-accounts{
  border-top:1px solid var(--border);
  padding:12px 8px;
}
.acc-sect{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--t3);
  padding:0 10px 8px;
}
.acc-item{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px;border-radius:var(--r-sm);
  cursor:pointer;transition:background 0.15s;
  margin-bottom:1px;
}
.acc-item:hover{background:rgba(255,255,255,0.04);}
.acc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.acc-info{flex:1;min-width:0;}
.acc-name{
  font-size:11.5px;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.acc-label{font-size:9.5px;color:var(--t3);font-family:var(--font-mono);}
.acc-cnt{font-size:10px;color:var(--t3);font-family:var(--font-mono);}

.sb-bottom{
  border-top:1px solid var(--border);
  padding:10px 8px;
}
.sb-btn{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--t2);font-size:12.5px;
  transition:all 0.15s;width:100%;background:none;border:none;
  font-family:var(--font-body);
}
.sb-btn:hover{background:rgba(255,255,255,0.04);color:var(--t1);}
.profile-chip{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--r-sm);
  background:var(--gold-dim);
  font-size:11px;font-family:var(--font-mono);
  color:var(--ede-gold);
  margin-bottom:6px;
}

/* ─── MAIN ───────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;gap:12px;
  padding:0 20px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}
.topbar-title{
  font-family:var(--font-display);
  font-size:18px;color:var(--t1);
  letter-spacing:0.01em;
}
.topbar-date{
  font-family:var(--font-mono);
  font-size:10.5px;color:var(--t3);letter-spacing:0.04em;
}
.topbar-spacer{flex:1;}
.refresh-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--status-green);
  box-shadow:0 0 6px var(--status-green);
  flex-shrink:0;
}

.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;cursor:pointer;
  border:none;font-family:var(--font-body);
  transition:all 0.15s;white-space:nowrap;
}
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);color:var(--t2);
}
.btn-ghost:hover{border-color:var(--border-hi);color:var(--t1);}
.btn-gold{background:var(--ede-gold);color:var(--ede-midnight);font-weight:600;}
.btn-gold:hover{background:#D9B862;}
.btn-sky{
  background:rgba(11,165,232,0.14);
  border:1px solid rgba(11,165,232,0.28);
  color:var(--ede-sky);
}
.btn-sky:hover{background:rgba(11,165,232,0.22);}
.btn-sm{padding:5px 10px;font-size:11px;}

.content{
  flex:1;overflow-y:auto;
  padding:18px 20px;
  display:flex;flex-direction:column;gap:16px;
}

/* ─── TODO PANEL ─────────────────────────────────── */
.todo-panel,.inbox-panel,.cal-panel,.resp-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.todo-panel,.resp-panel{flex-shrink:0;}
.inbox-panel,.cal-panel{display:flex;flex-direction:column;min-height:0;}

.panel-hdr{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
}
.panel-ttl{
  font-family:var(--font-display);
  font-size:17px;color:var(--t1);
  letter-spacing:0.01em;
}
.panel-sub{
  font-size:10.5px;color:var(--t3);
  font-family:var(--font-mono);
}
.ph-spacer{flex:1;}

.todo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.todo-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 16px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background 0.15s;
}
.todo-item:hover{background:var(--card-hover);}
.todo-item.done-item .todo-text{
  text-decoration:line-through;color:var(--t3);
}
.chk{
  width:17px;height:17px;min-width:17px;
  border:1.5px solid var(--border-hi);
  border-radius:4px;display:flex;align-items:center;
  justify-content:center;transition:all 0.2s;
  margin-top:2px;flex-shrink:0;cursor:pointer;
}
.chk.checked{background:var(--cat-work);border-color:var(--cat-work);}
.chk.checked::after{content:'✓';color:var(--ede-midnight);font-size:10px;font-weight:700;}
.todo-body{flex:1;min-width:0;}
.todo-text{font-size:12.5px;color:var(--t1);line-height:1.4;}
.todo-meta{font-size:10.5px;color:var(--t3);margin-top:2px;font-family:var(--font-mono);}
.prio{
  width:5px;height:5px;border-radius:50%;
  margin-top:6px;flex-shrink:0;
}

/* ─── TWO-COL (inbox + calendar) ─────────────────── */
.two-col{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:16px;
  flex:1;min-height:0;
}

.tabs{
  display:flex;
  border-bottom:1px solid var(--border);
  padding:0 16px;gap:0;flex-shrink:0;
}
.tab{
  padding:11px 12px;
  font-size:12px;color:var(--t3);
  cursor:pointer;border-bottom:2px solid transparent;
  transition:all 0.15s;white-space:nowrap;
  display:flex;align-items:center;gap:6px;
  margin-bottom:-1px;
}
.tab:hover{color:var(--t2);}
.tab.active{color:var(--t1);border-bottom-color:var(--ede-gold);}
.tab-cnt{
  font-size:9.5px;
  background:rgba(255,255,255,0.07);
  padding:1px 6px;border-radius:10px;
  font-family:var(--font-mono);
}
.tab.active .tab-cnt{background:var(--gold-dim);color:var(--ede-gold);}

.email-list{overflow-y:auto;flex:1;}
.email-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 16px;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background 0.15s;
  position:relative;
}
.email-item:hover{background:var(--card-hover);}
.email-item.unread::before{
  content:'';position:absolute;left:6px;top:50%;
  transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;
  background:var(--ede-sky);
}
.ava{
  width:33px;height:33px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;flex-shrink:0;
  font-family:var(--font-mono);
}
.einfo{flex:1;min-width:0;}
.efrom-row{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.efrom{
  font-size:12.5px;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.efrom.unread{font-weight:600;}
.etime{font-size:9.5px;color:var(--t3);flex-shrink:0;font-family:var(--font-mono);}
.esubj{
  font-size:12px;color:var(--t2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.esnip{
  font-size:11px;color:var(--t3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.etags{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap;}
.etag{
  font-size:9.5px;padding:2px 7px;border-radius:10px;
  font-family:var(--font-mono);font-weight:500;
}
.t-urgent{background:rgba(248,113,113,0.14);color:var(--status-red);}
.t-action{background:rgba(11,165,232,0.14);color:var(--ede-sky);}
.t-fyi   {background:rgba(255,255,255,0.06);color:var(--t3);}
.t-lead  {background:rgba(251,146,60,0.14);color:#fb923c;}
.t-cal   {background:rgba(52,211,153,0.12);color:var(--cat-work);}

.connect-placeholder{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;gap:12px;
  color:var(--t3);text-align:center;
}
.connect-icon{font-size:28px;opacity:.4;}
.connect-text{font-size:13px;color:var(--t2);}
.connect-sub{font-size:11px;color:var(--t3);font-family:var(--font-mono);}

/* ─── CALENDAR ──────────────────────────────────── */
.cal-legend{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.leg{
  display:flex;align-items:center;gap:5px;
  font-size:10px;color:var(--t2);
  font-family:var(--font-mono);
}
.leg-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.cal-list{overflow-y:auto;flex:1;}
.cal-day-lbl{
  font-size:9.5px;font-family:var(--font-mono);
  letter-spacing:0.07em;color:var(--t3);
  padding:8px 14px 3px;text-transform:uppercase;
}
.cal-ev{
  display:flex;align-items:flex-start;gap:9px;
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background 0.15s;
}
.cal-ev:hover{background:var(--card-hover);}
.cal-bar{
  width:3px;border-radius:2px;
  align-self:stretch;min-height:26px;flex-shrink:0;
}
.cal-info{flex:1;min-width:0;}
.cal-ttl{font-size:12.5px;color:var(--t1);}
.cal-time{font-size:10px;color:var(--t3);font-family:var(--font-mono);margin-top:2px;}
.cal-owner{font-size:10px;margin-top:3px;}
.ctag{
  font-size:9px;padding:2px 6px;border-radius:10px;
  font-family:var(--font-mono);font-weight:500;
  white-space:nowrap;
}

.upload-zone{
  margin:12px;
  border:1.5px dashed var(--border);
  border-radius:var(--r-md);
  padding:14px 12px;text-align:center;
  cursor:pointer;transition:all 0.2s;
  flex-shrink:0;
}
.upload-zone:hover{border-color:var(--ede-gold);background:var(--gold-dim);}
.upload-ico{font-size:18px;margin-bottom:6px;opacity:.6;}
.upload-txt{font-size:11.5px;color:var(--t2);}
.upload-sub{font-size:10px;color:var(--t3);font-family:var(--font-mono);margin-top:2px;}

/* ─── RESPONSES ─────────────────────────────────── */
.resp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.resp-item{
  padding:14px 18px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
  cursor:pointer;transition:background 0.15s;
}
.resp-item:hover{background:var(--card-hover);}
.resp-item.sel{background:var(--gold-dim);border-color:var(--gold-glow);}
.resp-to{font-size:10px;color:var(--t3);font-family:var(--font-mono);}
.resp-action{font-size:13px;font-weight:500;}
.resp-preview{font-size:11.5px;color:var(--t2);line-height:1.5;}
.resp-foot{display:flex;gap:7px;margin-top:4px;}
.resp-sel{display:flex;align-items:center;gap:6px;font-size:11px;}
.resp-chk{
  width:15px;height:15px;border:1.5px solid var(--border-hi);
  border-radius:3px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:all 0.15s;
  flex-shrink:0;
}
.resp-chk.sel{background:var(--ede-gold);border-color:var(--ede-gold);}
.resp-chk.sel::after{content:'✓';color:var(--ede-midnight);font-size:9px;font-weight:700;}

.draft-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;
  border-top:1px solid var(--border);
  background:var(--gold-dim);
  flex-shrink:0;
}
.draft-txt{font-size:12px;color:var(--ede-gold);font-family:var(--font-mono);}

/* ─── MODAL (photo upload) ──────────────────────── */
.modal-ov{
  position:fixed;inset:0;background:rgba(0,0,0,0.75);
  z-index:100;display:none;align-items:center;justify-content:center;
}
.modal-ov.open{display:flex;}
.modal{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px;width:500px;max-width:90vw;
  background-color:#0d2340;  /* solid override — rgba cards look transparent over backdrop */
}
.modal-ttl{font-family:var(--font-display);font-size:20px;margin-bottom:6px;}
.modal-sub{font-size:12px;color:var(--t3);margin-bottom:18px;font-family:var(--font-mono);}
.drop-zone{
  border:2px dashed var(--border-hi);
  border-radius:var(--r-md);
  padding:36px 20px;text-align:center;
  cursor:pointer;transition:all 0.2s;margin-bottom:16px;
}
.drop-zone:hover,.drop-zone.drag{border-color:var(--ede-gold);background:var(--gold-dim);}
.drop-ico{font-size:30px;margin-bottom:10px;opacity:.6;}
.drop-txt{font-size:13.5px;color:var(--t2);}
.drop-sub{font-size:10.5px;color:var(--t3);margin-top:4px;font-family:var(--font-mono);}
.preview-img{
  width:100%;border-radius:var(--r-md);
  border:1px solid var(--border);margin-bottom:14px;
  max-height:200px;object-fit:cover;display:none;
}
.ai-result{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px;margin-bottom:14px;
  display:none;
}
.ai-result-ttl{font-size:11px;color:var(--ede-gold);font-family:var(--font-mono);margin-bottom:8px;}
.ai-result-body{font-size:12.5px;color:var(--t1);line-height:1.6;}
.modal-foot{display:flex;gap:9px;justify-content:flex-end;}

/* ─── STATUS BAR ────────────────────────────────── */
.status-bar{
  height:var(--status-h);
  border-top:1px solid var(--border);
  background:var(--bg);
  display:flex;align-items:center;gap:14px;
  padding:0 20px;flex-shrink:0;
}
.status-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--status-green);
  box-shadow:0 0 5px var(--status-green);
}
.status-txt{font-size:10px;color:var(--t3);font-family:var(--font-mono);}
.status-spacer{flex:1;}
.sep{color:var(--t3);font-family:var(--font-mono);font-size:10px;}

/* ─── UTILITIES ─────────────────────────────────── */
.hidden{display:none!important;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp 0.35s ease both;}

::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2);}