/* Cadence -- dark-glass Logen theme (navy/gold). Touch-first, desktop-friendly. */
:root{
  --bg:#0b121a; --bg2:#0F1923; --panel:#16222e; --panel2:#1c2a38;
  --line:#26384a; --text:#e8eef4; --muted:#93a4b5; --faint:#6b7d8f;
  --gold:#c9a14a; --gold2:#e0bd6a; --navy:#0F1923;
  --p1:#d9534f; --p2:#d9953f; --p3:#5f7488;
  --ok:#3fae74; --warn:#d9953f; --high:#d9534f; --info:#4a90d9;
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.35);
  --safe-t:max(env(safe-area-inset-top),10px);
  --safe-b:max(env(safe-area-inset-bottom),10px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh; font-size:15px; line-height:1.45;
}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif; font-weight:600; margin:0}

/* ---------- top bar ---------- */
#topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:10px;
  padding:var(--safe-t) 14px 10px; background:rgba(15,25,35,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
#title{flex:1; font-family:Georgia,serif; font-size:19px; font-weight:600; text-align:center}
.iconbtn{
  background:var(--panel); color:var(--text); border:1px solid var(--line);
  width:36px; height:36px; border-radius:10px; font-size:18px; cursor:pointer;
}
#topRight{display:flex; gap:8px; min-width:36px; justify-content:flex-end}

/* ---------- tab bar (bottom nav) ---------- */
#tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
  padding:6px 6px var(--safe-b); background:rgba(15,25,35,.94);
  backdrop-filter:blur(12px); border-top:1px solid var(--line);
}
#tabbar button{
  flex:1; background:none; border:none; color:var(--faint); font-size:11px;
  padding:6px 2px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;
}
#tabbar button .ic{font-size:19px}
#tabbar button.active{color:var(--gold2)}
#tabbar button .badge{
  position:absolute; transform:translate(14px,-4px); background:var(--p1); color:#fff;
  font-size:9px; min-width:15px; height:15px; border-radius:8px; padding:0 3px; line-height:15px;
}

/* ---------- layout ---------- */
#app{max-width:720px; margin:0 auto; padding:14px 14px 96px}
.section{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
  font-family:-apple-system,sans-serif; font-weight:700; margin:18px 2px 8px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px; box-shadow:var(--shadow)}
.small{font-size:13px} .muted{color:var(--muted)} .faint{color:var(--faint)}
.row{display:flex; gap:8px; align-items:center}
.spacer{height:10px} .grow{flex:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text);
  padding:11px 14px; border-radius:11px; font-size:15px; cursor:pointer; font-weight:600}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:default}
.btn.primary{background:var(--info); border-color:transparent; color:#fff}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold)); border-color:transparent; color:#241c08}
.btn.ghost{background:transparent}
.btn.danger{background:transparent; color:var(--high); border-color:var(--high)}
.btn.block{width:100%}
.btn.sm{padding:7px 10px; font-size:13px; border-radius:9px}
.fab{position:fixed; right:16px; bottom:calc(var(--safe-b) + 64px); z-index:40; box-shadow:var(--shadow)}

/* ---------- inputs ---------- */
input,textarea,select{
  width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:11px 12px; font-size:15px; font-family:inherit;
}
textarea{min-height:78px; resize:vertical}
.fld{display:block; font-size:12px; color:var(--faint); margin:10px 2px 5px; font-weight:600}

/* ---------- quick add ---------- */
.qa{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.qa input{font-size:16px}
.qa .btn{flex:0 0 auto}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px}
.chip{display:inline-flex; align-items:center; gap:5px; background:var(--panel2);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; color:var(--muted)}
.chip b{color:var(--text); font-weight:600}
.chip.edit{cursor:pointer; border-style:dashed}

/* ---------- task rows ---------- */
.trow{display:flex; align-items:flex-start; gap:10px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:8px; cursor:pointer}
.trow:active{background:var(--panel2)}
.trow.sel{outline:2px solid var(--gold)}
.trow .pdot{flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:5px}
.pdot.p1{background:var(--p1)} .pdot.p2{background:var(--p2)} .pdot.p3{background:var(--p3)}
.trow .tmain{flex:1; min-width:0}
.trow .ttl{font-weight:600; word-wrap:break-word}
.trow.done .ttl{text-decoration:line-through; color:var(--muted)}
.trow .tsub{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; font-size:12px; color:var(--muted); align-items:center}
.pchip{background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:1px 7px; font-size:11px}
.due{font-size:11px; padding:1px 7px; border-radius:6px; background:var(--panel2); border:1px solid var(--line)}
.due.over{color:#fff; background:var(--high); border-color:transparent}
.due.today{color:#241c08; background:var(--gold); border-color:transparent}
.rolled{color:var(--warn); font-size:11px}
.statusbadge{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 7px; border-radius:6px}
.statusbadge.submitted{background:var(--info); color:#fff}
.statusbadge.done{background:var(--ok); color:#fff}
.avatar{width:22px; height:22px; border-radius:50%; background:var(--panel2); border:1px solid var(--line);
  font-size:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--gold2); font-weight:700}
.cbox{flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:1px solid var(--line); margin-top:2px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; background:var(--bg)}
.cbox.on{background:var(--ok); border-color:transparent; color:#fff}

/* ---------- KPI strip ---------- */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; cursor:pointer}
.kpi .n{font-size:22px; font-weight:700; font-family:Georgia,serif}
.kpi .l{font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.kpi.alert .n{color:var(--high)}

/* ---------- activity log / notes ---------- */
.thread{margin-top:6px}
.note{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-bottom:7px}
.note .by{font-size:11px; color:var(--gold2); font-weight:600}
.note .when{font-size:11px; color:var(--faint)}
.act{font-size:12px; color:var(--muted); padding:4px 2px; border-bottom:1px dashed var(--line)}
.act .a{color:var(--text)}

/* ---------- bulk action bar ---------- */
#bulkbar{position:fixed; left:0; right:0; bottom:calc(var(--safe-b) + 56px); z-index:45;
  background:rgba(20,34,46,.97); border-top:1px solid var(--line); padding:10px 12px;
  display:flex; gap:8px; overflow-x:auto; backdrop-filter:blur(10px)}
#bulkbar .btn{flex:0 0 auto}

/* ---------- toast + undo ---------- */
#toast,#undobar{position:fixed; left:50%; transform:translateX(-50%); z-index:80;
  bottom:calc(var(--safe-b) + 76px); background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:11px 15px; box-shadow:var(--shadow);
  max-width:92%; font-size:14px}
#undobar{display:flex; align-items:center; gap:14px}
#undobar button{background:none; border:none; color:var(--gold2); font-weight:700; cursor:pointer; font-size:14px}

/* ---------- overlay sheet ---------- */
.ovl{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center}
.sheet{width:100%; max-width:720px; background:var(--panel); border-top-left-radius:18px; border-top-right-radius:18px;
  border:1px solid var(--line); padding:16px 16px var(--safe-b); max-height:88vh; overflow:auto}

/* ---------- empty / spinner / gate ---------- */
.empty{text-align:center; color:var(--muted); padding:50px 16px}
.empty .big{font-size:42px; margin-bottom:8px}
.spin{display:inline-block; width:16px; height:16px; border:2px solid var(--line);
  border-top-color:var(--gold2); border-radius:50%; animation:sp .7s linear infinite; vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.gate{max-width:420px; margin:48px auto 0}
.gate h3{margin-bottom:8px}
.install{max-width:480px; margin:36px auto; text-align:center}
.install ol{text-align:left; color:var(--muted); line-height:1.7}
.brandmark{font-family:Georgia,serif; font-size:30px; color:var(--gold2); letter-spacing:.02em; text-align:center; margin:8px 0 4px}

/* segmented control */
.seg{display:flex; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:6px 0}
.seg button{flex:1; background:transparent; border:none; color:var(--muted); padding:9px; font-size:13px; cursor:pointer}
.seg button.on{background:var(--panel2); color:var(--text); font-weight:600}

/* ---------- attachments ---------- */
.attachgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:8px}
.attachcell{position:relative}
.attachthumb{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); cursor:pointer; display:block}
.attachdoc{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
  width:100%; aspect-ratio:1/1; border-radius:10px; border:1px solid var(--line); background:var(--panel2);
  padding:8px; cursor:pointer; overflow:hidden}
.attachdoc .dic{font-size:26px}
.attachdoc .fn{font-size:11px; color:var(--text); word-break:break-word; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.attachdoc .sz{font-size:10px; color:var(--faint)}
.attachdel{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(11,18,26,.8); color:#fff; border:1px solid var(--line); font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center}

/* ---------- weekly review ---------- */
.rvtoggle{flex:0 0 auto; width:26px; height:26px; border-radius:50%; align-self:center;
  background:var(--bg); color:var(--faint); border:1px solid var(--line); font-size:13px; cursor:pointer}
.rvtoggle.on{background:var(--ok); border-color:transparent; color:#fff}
.trow.reviewed{opacity:.6}

@media(min-width:560px){ .kpis{grid-template-columns:repeat(6,1fr)} }