/* SAI Team PWA — restyled to match the SAI Brain (light glassmorphic theme).
   Layout is mobile-first: the Brain's left sidebar becomes a compact stats
   strip stacked on top. Ported tokens/components from the Brain's style.css. */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============ THEME TOKENS (Brain light theme) ============ */
:root {
  --text: #1c1c1c;
  --muted: rgba(28, 28, 28, 0.62);
  --muted-2: rgba(28, 28, 28, 0.40);
  --hero-text: #161616;

  --glass: rgba(250, 250, 250, 0.66);
  --glass-light: rgba(250, 250, 250, 0.42);
  --card: rgba(20, 20, 20, 0.05);

  --stroke: rgba(20, 20, 20, 0.14);
  --stroke-soft: rgba(20, 20, 20, 0.08);
  --ring-line: rgba(20, 20, 20, 0.22);

  --tint: rgba(20, 20, 20, 0.05);
  --tint-strong: rgba(20, 20, 20, 0.10);
  --shade: rgba(20, 20, 20, 0.05);
  --shade-strong: rgba(20, 20, 20, 0.08);
  --shade-hover: rgba(20, 20, 20, 0.12);
  --scroll-thumb: rgba(20, 20, 20, 0.24);

  --pill: rgba(247, 247, 247, 0.94);
  --pill-hover: rgba(255, 255, 255, 0.99);

  --ink: #232323;            /* dark neutral button (Brain) */
  --ink-hover: #3a3a3a;

  /* SAI red — kept ONLY for primary actions + alerts, so brand identity
     survives inside the otherwise-monochrome Brain look. */
  --accent: #E5252D;
  --accent-hover: #c41a22;
  --accent-ink: #ffffff;
  --accent-soft: rgba(229, 37, 45, 0.10);

  --green: #2e7d32;
  --green-soft: rgba(46, 125, 50, 0.10);
  --amber: #b26a00;
  --error: #b5482e;

  --bg:
    radial-gradient(130% 120% at 72% 8%, #f4f4f4 0%, #e8e8e8 32%, #d6d6d6 62%, #c4c4c4 85%, #b6b6b6 100%),
    #d4d4d4;
  --overlay:
    radial-gradient(120% 110% at 70% 6%, rgba(255, 255, 255, 0.30) 0%, rgba(220, 220, 220, 0.10) 70%, rgba(200, 200, 200, 0.06) 100%),
    rgba(255, 255, 255, 0.10);
  --panel-shadow:
    0 20px 48px rgba(40, 40, 40, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  --radius: 22px;
  --radius-sm: 14px;
  --radius-card: 16px;
}

html, body { min-height: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  background-attachment: fixed;
  min-height: 100dvh;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--overlay);
}

/* ============ APP SHELL ============ */
.app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  max-width: 640px;
  margin: 0 auto;
  min-height: 100dvh;
}

.panel {
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(125%);
  -webkit-backdrop-filter: blur(34px) saturate(125%);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
}

/* ============ TOP BAR: brand + tabs ============ */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 13px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 10px;
  background: #ededed; border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.16);
}
.logo img { height: 20px; width: auto; display: block; }
.brand-name {
  font-family: "Sora", sans-serif; font-weight: 500;
  font-size: 16px; letter-spacing: .2px;
}
.user-bar { margin-left: auto; }

/* pill tabs */
.tabs { display: flex; align-items: center; gap: 6px; }
.tabs[hidden] { display: none; }
.tab {
  font-family: "Inter", sans-serif; font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text);
  background: var(--shade-strong);
  border-color: var(--tint);
}

/* ============ AVATAR + MENU ============ */
.avatar-wrap { position: relative; }
.avatar-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.avatar-btn:hover, .avatar-btn.is-open { background: var(--ink-hover); }
.user-menu {
  position: absolute; right: 0; top: 46px;
  min-width: 200px; padding: 12px;
  background: var(--pill);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .14s, transform .14s, visibility .14s;
  z-index: 40;
}
.user-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu-name { font-family: "Sora", sans-serif; font-weight: 600; font-size: 14px; }
.user-menu-email { font-size: 12px; color: var(--muted); margin: 2px 0 10px; word-break: break-all; }

/* ============ STATS STRIP ============ */
.stats {
  display: flex; align-items: center; justify-content: space-around;
  gap: 8px; padding: 16px 8px;
}
.stats[hidden] { display: none; }
.stat-cell {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
.stat-cell + .stat-cell { border-left: 1px solid var(--stroke-soft); }
.stat-big {
  font-family: "Sora", sans-serif; font-weight: 600;
  font-size: 34px; line-height: 1; letter-spacing: -1px;
}
.stat-cap { font-size: 11px; color: var(--muted); letter-spacing: .2px; }
.stat-cell.warn .stat-big { color: var(--accent); }

.mini-ring { position: relative; width: 58px; height: 58px; }
.mini-ring svg { width: 100%; height: 100%; }
.mr-track { fill: none; stroke: var(--stroke); stroke-width: 5; }
.mr-prog {
  fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);
}
.mr-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 15px;
}

/* ============ CONTENT ============ */
.content { padding: 16px 14px 22px; }
.loading, .empty-state {
  padding: 28px 6px; text-align: center;
  color: var(--muted); font-size: 14px; line-height: 1.5;
}

/* top bar inside the task list: weekly motivator + add-task */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.week-counter {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--green);
  background: var(--green-soft);
  border-radius: 999px; padding: 6px 12px;
}
.week-counter .tick { font-weight: 700; }

/* ============ MONDAY-STYLE STATUS GROUPS ============ */
.task-group {
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--stroke-soft);
  border-radius: 14px;
  overflow: hidden;
}
.task-group-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px;
  border-left: 3px solid var(--muted);
  border-bottom: 1px solid var(--stroke-soft);
  background: var(--glass-light);
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 13px;
}
.task-group.collapsible .task-group-head { cursor: pointer; }
.task-group.collapsible .task-group-head:hover { background: var(--shade); }
.task-group-caret { font-size: 10px; color: var(--muted); transition: transform .2s; display: inline-block; }
.task-group.open .task-group-caret { transform: rotate(90deg); }
.task-group-title { flex: 1; }
.task-group-count {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--tint); border-radius: 999px; padding: 1px 9px;
}
.task-group.collapsible:not(.open) .task-group-head { border-bottom: none; }
.task-group.collapsible:not(.open) .task-group-body { display: none; }

/* colour-coding per status (Monday palette; titles darkened for light-bg contrast) */
.task-group.g-pending .task-group-head { border-left-color: #579bfc; } .task-group.g-pending .task-group-title { color: #2b6fd6; }
.task-group.g-cannot  .task-group-head { border-left-color: #e2445c; } .task-group.g-cannot  .task-group-title { color: #c8324a; }
.task-group.g-later   .task-group-head { border-left-color: #fdab3d; } .task-group.g-later   .task-group-title { color: #b3701a; }
.task-group.g-done    .task-group-head { border-left-color: #00c875; } .task-group.g-done    .task-group-title { color: #08935a; }
.task-group.g-mention .task-group-head { border-left-color: #a25ddc; } .task-group.g-mention .task-group-title { color: #7e42bd; }
.task-group.g-assigned .task-group-head { border-left-color: #6c8ae4; } .task-group.g-assigned .task-group-title { color: #4560b8; }

/* cards become flush rows inside a group */
.task-group .kpi-card {
  background: transparent; border: none; border-radius: 0;
  margin: 0; padding: 12px 14px;
  border-top: 1px solid var(--stroke-soft);
}
.task-group-body > .kpi-card:first-child { border-top: none; }
.task-group .mentioned-card { border-left: none; }

/* ============ TASK CARDS ============ */
.card, .kpi-card {
  background: var(--card);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-card);
  padding: 13px 14px;
  margin-bottom: 8px;
}
.kpi-card .row { display: flex; gap: 12px; align-items: flex-start; }
.kpi-card .left { flex: 1; min-width: 0; }
.kpi-card .right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  flex-shrink: 0;
}

.title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.title-line .num {
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 12px;
  color: var(--muted-2);
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--tint); border-radius: 7px;
}
.title-line .title { font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.done-tick { color: var(--green); flex-shrink: 0; }

.meta {
  margin-top: 6px; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
}
.dot-sep { color: var(--muted-2); }
.pill {
  display: inline-block; font-size: 10.5px; letter-spacing: .2px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--tint); color: var(--muted);
}
.pill.prio { font-weight: 600; color: #fff; }
.pill.prio.p1 { background: #e2445c; }
.pill.prio.p2 { background: #fdab3d; color: #3d2800; }
.pill.prio.p3 { background: #579bfc; }
.done-on { color: var(--green); }
.notes {
  margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  white-space: pre-wrap;
}

/* overdue + acknowledgement banners */
.overdue-banner {
  margin-top: 8px; font-size: 12px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 9px; padding: 6px 10px; display: inline-block;
}
.kpi-card.is-overdue { border-color: var(--accent); }
.ack-banner {
  margin-top: 9px; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid rgba(229,37,45,.25);
  border-radius: 11px; padding: 8px 10px;
}
.ack-banner.overdue { background: rgba(229,37,45,.16); }
.ack-cd { font-size: 12px; font-weight: 600; color: var(--accent); }
.ack-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; border: none;
  background: var(--accent); color: var(--accent-ink);
  transition: background .15s;
}
.ack-btn:hover { background: var(--accent-hover); }
.ack-btn:disabled { opacity: .55; cursor: default; }
.ack-done { margin-top: 8px; font-size: 12px; color: var(--green); }

/* Monday-style status cell: a full-colour dropdown (blue/red/orange/green) */
.status-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: #fff; border: none; border-radius: 7px;
  padding: 7px 26px 7px 12px;
  background-color: #579bfc;
  background-repeat: no-repeat; background-position: right 8px center;
  background-size: 11px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.status-select option { color: #1c1c1c; background: #fff; }
.status-select.status-pending { background-color: #579bfc; }
.status-select.status-cannot  { background-color: #e2445c; }
.status-select.status-later   { background-color: #fdab3d; }
.status-select.status-done    { background-color: #00c875; }

.bring-back { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bring-back-chips { display: none; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bring-back.open .bring-back-chips { display: flex; }

/* comment / mention buttons */
.comment-btn, .mention-btn {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; position: relative;
  border: 1px solid var(--stroke-soft);
  background: var(--tint); color: var(--muted);
  cursor: pointer; transition: color .15s, background .15s;
}
.comment-btn:hover, .mention-btn:hover { color: var(--text); background: var(--tint-strong); }
.comment-btn.has-count { color: var(--text); }
.comment-btn .count {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 10px; font-weight: 600; line-height: 16px;
  background: var(--ink); color: #fff; border-radius: 999px;
}
.comment-btn.is-open { background: var(--tint-strong); color: var(--text); }

/* comment thread (slides open) */
.comments-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease;
}
.comments-panel.open { max-height: 1200px; }
.comments-inner {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--stroke-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.comment .who { font-size: 11.5px; color: var(--muted); }
.comment .body { font-size: 13px; line-height: 1.4; margin-top: 2px; }
.comment.empty-comment .body { color: var(--muted-2); font-style: italic; }
.reply-row { display: flex; gap: 8px; margin-top: 4px; }
.reply-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--stroke); background: var(--pill); color: var(--text);
  outline: none;
}
.reply-row input:focus { border-color: var(--muted-2); }

/* ============ "ADDED TO" (mentioned) CARDS ============ */
.mentioned-card { border-left: 3px solid var(--accent); }
.mentioned-card.my-part-done { opacity: .72; }
.added-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 2px 9px;
}
.mention-msg {
  margin-top: 8px; font-size: 12.5px; line-height: 1.4; font-style: italic;
  color: var(--text); background: var(--tint);
  border-radius: 10px; padding: 8px 10px;
}
.done-btn { white-space: nowrap; }
.done-btn.is-done {
  background: var(--green-soft); color: var(--green);
  border: 1px solid rgba(46,125,50,.3);
}

/* ---- "Tasks you assigned" (read-only record) ---- */
.assigned-to { color: var(--text); font-weight: 500; }
.assigned-ack { margin-top: 6px; font-size: 11.5px; }
.assigned-ack.waiting { color: var(--amber); }
.assigned-ack.done { color: var(--green); }
.status-pill {
  font-size: 11px; font-weight: 600; color: #fff;
  border-radius: 7px; padding: 6px 11px; white-space: nowrap;
}
.status-pill.status-pending { background: #579bfc; }
.status-pill.status-cannot  { background: #e2445c; }
.status-pill.status-later   { background: #fdab3d; }
.status-pill.status-done    { background: #00c875; }

/* ============ BUTTONS ============ */
.btn {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  padding: 9px 16px; border-radius: 11px;
  border: 1px solid var(--stroke);
  background: var(--pill); color: var(--text);
  transition: background .15s, border-color .15s, transform .12s;
}
.btn:hover { background: var(--pill-hover); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-block { width: 100%; display: block; }
.btn-sm { font-size: 12px; padding: 6px 12px; border-radius: 9px; }
.add-task-btn { white-space: nowrap; }

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 20, 20, 0.34);
  backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 18px;
}
.modal-dialog {
  width: 100%; max-width: 400px;
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(125%);
  -webkit-backdrop-filter: blur(34px) saturate(125%);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: var(--panel-shadow);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.modal-title { font-family: "Sora", sans-serif; font-weight: 600; font-size: 17px; }
.modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.modal-label { font-size: 12px; color: var(--muted); margin-top: 10px; }
.modal-dialog input, .modal-dialog textarea, .modal-input {
  width: 100%; font: inherit; font-size: 14px;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--stroke); background: var(--pill); color: var(--text);
  outline: none; resize: vertical;
}
.modal-dialog input:focus, .modal-dialog textarea:focus, .modal-input:focus { border-color: var(--muted-2); }
.modal-msg { min-height: 16px; font-size: 12.5px; color: var(--muted); }
.modal-msg.error { color: var(--error); }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ============ LOGIN ============ */
.login-wrap {
  max-width: 360px; margin: 24px auto; padding: 6px;
  display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.login-wrap .logo { align-self: center; margin-bottom: 4px; }
.login-wrap h2 { font-family: "Sora", sans-serif; font-weight: 500; font-size: 22px; }
.login-wrap p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.login-wrap input {
  width: 100%; font: inherit; font-size: 14px;
  padding: 12px 14px; border-radius: 13px;
  border: 1px solid var(--stroke); background: var(--pill); color: var(--text);
  outline: none;
}
.login-wrap input:focus { border-color: var(--muted-2); }
.msg { min-height: 16px; font-size: 12.5px; color: var(--muted); }
.msg.error { color: var(--error); }

/* ============ TOAST ============ */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 90; max-width: 88vw;
  font-size: 13px; font-weight: 500;
  padding: 11px 18px; border-radius: 999px;
  background: var(--ink); color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  animation: toast-in .2s ease;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }

/* ============ LOGIN-ONLY SHELL TWEAKS ============ */
/* Before sign-in: hide the brand bar (the login card carries its own logo) and
   centre the login card in the viewport. */
body:not(.signed-in) .topbar { display: none; }
body:not(.signed-in) .app { justify-content: center; }

/* ============ SLIDE-IN SIDEBAR (drawer) ============ */
/* edge pull-tab — press to reveal the sidebar */
.drawer-tab {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 55;
  width: 26px; height: 66px;
  display: grid; place-items: center;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  border: 1px solid var(--stroke); border-left: none;
  border-radius: 0 14px 14px 0;
  box-shadow: 3px 6px 18px rgba(40, 40, 40, 0.16);
  color: var(--muted); cursor: pointer;
  transition: color .15s, opacity .2s;
}
.drawer-tab:hover { color: var(--text); }
.drawer-tab svg { width: 18px; height: 18px; }
body:not(.signed-in) .drawer-tab { display: none; }
body.drawer-open .drawer-tab { opacity: 0; pointer-events: none; }

body.drawer-open { overflow: hidden; }

.drawer-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 20, 20, 0.38);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
body.drawer-open .drawer-scrim { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; left: 0; z-index: 70;
  width: 272px; max-width: 82vw; height: 100%;
  padding: 18px 18px 26px;
  display: flex; flex-direction: column; gap: 26px;
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(125%);
  -webkit-backdrop-filter: blur(40px) saturate(125%);
  border-right: 1px solid var(--stroke);
  box-shadow: 0 20px 60px rgba(40, 40, 40, 0.22);
  transform: translateX(-108%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  overflow-y: auto;
}
body.drawer-open .drawer { transform: translateX(0); }

.drawer-brand { display: flex; align-items: center; gap: 10px; }
.drawer-brand .brand-name { font-family: "Sora", sans-serif; font-weight: 500; font-size: 16px; }
.drawer-close {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--stroke-soft); background: var(--tint); color: var(--muted);
}
.drawer-close:hover { color: var(--text); }
.drawer-close svg { width: 18px; height: 18px; }

/* widgets — Brain Tasks-sidebar, ported: stat + grad-bar · ring · rows · comments card */
.drawer-widgets { flex: 1; display: flex; flex-direction: column; }

.drawer-widgets .stat { margin-top: 6px; display: flex; align-items: center; gap: 16px; }
.drawer-widgets .stat-num { font-family: "Sora", sans-serif; font-weight: 600; font-size: 52px; line-height: .9; letter-spacing: -1px; }
.drawer-widgets .stat-divider { width: 1px; align-self: stretch; background: var(--stroke); margin: 4px 0; }
.drawer-widgets .stat-meta { display: flex; flex-direction: column; }
.drawer-widgets .stat-label { font-size: 11.5px; line-height: 1.25; color: var(--muted); letter-spacing: .2px; }
.drawer-widgets .grad-bar { margin-top: 9px; width: 56px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #9a9a9a, #c6c6c6 45%, #efefef 70%, #a6a6a6); }

.drawer-widgets .ring-wrap { margin-top: 28px; display: flex; flex-direction: column; align-items: center; }
.drawer-widgets .ring-label { font-size: 12px; color: var(--muted); margin-bottom: 14px; letter-spacing: .3px; }
.drawer-widgets .ring { position: relative; width: 168px; height: 168px; }
.drawer-widgets .ring svg { width: 100%; height: 100%; }
.drawer-widgets .ring-ticks { fill: none; stroke: var(--ring-line); stroke-width: 1.4; stroke-dasharray: 1 7; }
.drawer-widgets .ring-track { fill: none; stroke: var(--stroke); stroke-width: 3; }
.drawer-widgets .ring-prog { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.drawer-widgets .ring-knob { fill: var(--ink); }
.drawer-widgets .ring-center { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Sora", sans-serif; font-weight: 500; font-size: 30px; letter-spacing: .5px; }

.drawer-widgets .sb-rows { margin-top: 28px; display: flex; flex-direction: column; }
.drawer-widgets .sb-row { display: flex; align-items: center; padding: 9px 0; border-top: 1px solid var(--stroke-soft); font-size: 12.5px; color: var(--muted); }
.drawer-widgets .sb-row-val { margin-left: auto; font-family: "Sora", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: -.2px; color: var(--text); }

.drawer-widgets .cc { margin-top: auto; position: relative; background: var(--card); border: 1px solid var(--stroke-soft); border-radius: 20px; padding: 18px; }
.drawer-widgets .cc-head { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.drawer-widgets .cc-icon { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); border: 1px solid var(--stroke-soft); color: var(--text); }
.drawer-widgets .cc-icon svg { width: 20px; height: 20px; }
.drawer-widgets .cc-num { font-family: "Sora", sans-serif; font-weight: 600; font-size: 44px; letter-spacing: -1px; margin-top: 18px; }
.drawer-widgets .cc-bar { margin-top: 14px; height: 7px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.drawer-widgets .cc-bar span { display: block; height: 100%; width: 60%; border-radius: 999px; background: linear-gradient(90deg, #8a8a8a, #b4b4b4 60%, #d8d8d8); }

/* ============ WIDE SCREEN — Brain-style desktop layout ============ */
/* Below 980px the mobile view is untouched. At/above it: a persistent left
   sidebar (the drawer, pinned) + a main column with the Brain-style task table. */
@media (min-width: 980px) {
  body { display: flex; flex-direction: row; align-items: flex-start; }
  body.drawer-open { overflow: auto; }
  .drawer-tab, .drawer-scrim { display: none !important; }
  .drawer-close { display: none; }

  .drawer {
    position: sticky; top: 0; align-self: flex-start; order: -1;
    transform: none !important;
    width: 292px; max-width: none; height: 100dvh; flex-shrink: 0;
    border-radius: 0; border-right: 1px solid var(--stroke); box-shadow: none;
    overflow-y: auto;
  }

  .app { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 16px 20px 22px; }

  /* top bar: tabs on the left, avatar on the right (brand lives in the sidebar) */
  .topbar { flex-direction: row; align-items: center; }
  .topbar .tabs { order: 1; }
  .topbar .brand { order: 2; margin-left: auto; }
  .topbar .brand .logo, .topbar .brand-name { display: none; }

  /* the mobile stats strip is redundant on wide — the sidebar shows the widgets */
  .stats { display: none; }
  .content { padding: 18px 20px 24px; }

  /* ---- task tables ---- */
  .tbl-head { border-bottom: 1px solid var(--stroke-soft); }
  .tbl-head .tbl-cell {
    font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted-2); font-weight: 600;
  }
  .tbl-row { display: grid; align-items: center; gap: 12px; padding: 9px 14px; }
  .tbl-line + .tbl-line { border-top: 1px solid var(--stroke-soft); }
  .tbl-row.is-overdue { background: rgba(229, 37, 45, .05); }
  .tbl-cell { min-width: 0; font-size: 13px; }

  /* column templates per section */
  .cols-pending .tbl-row, .cols-cannot .tbl-row, .cols-later .tbl-row, .cols-done .tbl-row {
    grid-template-columns: minmax(0, 1fr) 148px 100px 104px;
  }
  .cols-assigned .tbl-row { grid-template-columns: minmax(0, 1fr) 140px 120px 96px 104px; }
  .cols-mention .tbl-row { grid-template-columns: minmax(0, 1fr) 150px 150px 96px; }

  .tbl-task { display: flex; flex-direction: column; gap: 4px; }
  .tbl-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .tbl-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbl-task .notes { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .tbl-task .overdue-banner, .tbl-task .ack-banner, .tbl-task .ack-done, .tbl-task .assigned-ack { margin-top: 5px; }
  .tbl-person { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbl-date { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .tbl-status .status-select { width: 100%; }
  .tbl-comments { display: flex; align-items: center; gap: 6px; }

  /* comment / mention bubble */
  .task-bubble {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 5px 9px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--stroke-soft); background: var(--tint); color: var(--muted);
    transition: color .15s, background .15s;
  }
  .task-bubble:hover { background: var(--tint-strong); color: var(--text); }
  .task-bubble.has, .task-bubble.open { color: var(--text); }
  .task-bubble svg { width: 15px; height: 15px; }
  .task-bubble-n { font-size: 11px; font-weight: 700; }

  /* expandable comment thread (spans the row) */
  .tbl-comments-panel {
    padding: 12px 14px 14px; border-top: 1px solid var(--stroke-soft);
    background: var(--tint); display: flex; flex-direction: column; gap: 10px;
  }
  .tbl-comments-panel[hidden] { display: none; }
}

/* ============ HEADER ACTIONS (refresh + sign out) ============ */
.brand-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.brand-actions[hidden] { display: none; }
.user-bar { margin-left: 6px; }
.hdr-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--stroke-soft); background: var(--tint); color: var(--muted);
  cursor: pointer; transition: color .15s, background .15s;
}
.hdr-btn:hover { color: var(--text); background: var(--tint-strong); }
.hdr-btn svg { width: 18px; height: 18px; }
.hdr-btn.spinning svg { animation: hdr-spin .8s linear infinite; }
@keyframes hdr-spin { to { transform: rotate(360deg); } }

/* profile icon is a plain identity badge — non-interactive */
.avatar-static { cursor: default; }
.avatar-static:hover { background: var(--ink); }