/* CustomApp Standup Board — shared theme.
 *
 * Brand tokens + shell chrome, ported from the prototype's look
 * (docs/index.html:10-303). This file owns only the SHARED shell: reset,
 * topbar, controls, summary strip, chips/pills, buttons, modal chrome, and
 * legend — the pieces every future module reuses. View-specific grids
 * (daily/weekly/monthly) and form/comment styling are left to their own
 * modules/<name>/*.css per the module convention (CLAUDE.md "Conventions"),
 * so this file stays a single stable shared file that later plans don't need
 * to keep editing.
 *
 * Never inline colours — everything below is a CSS custom property.
 */

:root{
  --brand:#5CBDB4;
  --brand-dark:#3E9C93;
  --brand-deep:#2E7A73;
  --brand-tint:#E7F5F3;
  --ink:#4A4A4A;
  --ink-soft:#7C8489;
  --surface:#FFFFFF;
  --canvas:#F5F8F8;
  --line:#E2EAE9;
  --danger:#D64550;
  --danger-tint:#FBEBEC;
  --leave:#E8A33D;
  --leave-tint:#FCF3E3;
  --commit:#5A7BD8;
  --commit-tint:#EBEFFA;
  --done:#6FA96F;
  /* Semantic tokens for the views and forms the rebuild plans add. Defined
     here, once, because those plans run CONCURRENTLY: two of them each adding
     the colours they need to this shared file would collide on it. Every value
     is taken from the prototype's CSS (docs/index.html lines 9-304) so the
     rebuilt board matches it. Plans must use these and never a hex literal. */
  --blocker:#A33A43;
  --blocker-tint:#FBEBEC;
  --holiday:#9A6A14;
  --holiday-tint:#F0D9AE;
  --weekend:#EEF1F1;
  --milestone:#6B4E9B;
  --milestone-tint:#EFEAF6;
  --progress:#3D5BB5;
  --progress-tint:#E9EDF0;
  --done-tint:#E9F2E9;
  --muted:#B9C1C1;
  --meta:#4A5A66;
  /* Five more the prototype uses that the first pass missed. Same reasoning:
     added here by hand because plans 02 and 04a run concurrently and each
     would otherwise have to edit this shared file to get them. */
  --blocker-border:#EFC3C7;   /* .task-row.is-blocked border  (index.html:114) */
  --leave-badge:#F6E3BF;      /* leave badge fill             (index.html:109) */
  --leave-badge-line:#F0D390; /* leave badge border           (index.html:146) */
  --today-cell:#F2FAF9;       /* .day-cell.is-today           (index.html:143) */
  --weekend-cell:#FAFBFB;     /* .month-day.weekend           (index.html:166) */
  --radius:10px;
  --shadow:0 1px 2px rgba(46,122,115,.08), 0 2px 8px rgba(46,122,115,.06);
  --spotlight:0 8px 28px rgba(46,122,115,.28);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:"Nunito Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--canvas);color:var(--ink);line-height:1.45;min-height:100vh;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--brand-dark);outline-offset:2px;border-radius:6px}
select,input,textarea{font:inherit;color:var(--ink)}

/* ---------- Header ---------- */
.topbar{background:var(--brand);color:#fff;padding:0 24px}
.topbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 0}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand-name{font-weight:800;font-size:1.25rem;letter-spacing:.2px;color:#fff}
.brand-sub{font-weight:600;font-size:.95rem;color:rgba(255,255,255,.85)}
.today-label{margin-left:auto;font-weight:600;font-size:.9rem;color:#fff;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;white-space:nowrap}
.demo-flag{font-size:.75rem;font-weight:700;background:#fff;color:var(--brand-deep);padding:2px 8px;border-radius:999px}

/* ---------- Controls ---------- */
.controls{background:var(--surface);border-bottom:1px solid var(--line);padding:0 24px;position:sticky;top:0;z-index:20}
.controls-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0}
.view-tabs{display:flex;background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:3px}
.view-tabs button{padding:7px 20px;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--ink-soft)}
.view-tabs button.active{background:var(--brand);color:#fff}
.nav-group{display:flex;align-items:center;gap:6px}
.nav-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--ink-soft)}
.nav-btn:hover{border-color:var(--brand);color:var(--brand-dark)}
.range-label{font-weight:800;font-size:1rem;min-width:200px;text-align:center}
.jump-today{font-size:.85rem;font-weight:700;color:var(--brand-dark);padding:6px 12px;border:1px solid var(--brand);border-radius:8px}
.jump-today:hover{background:var(--brand-tint)}
.filters{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap;align-items:center}
.filters select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:.88rem;font-weight:600;max-width:185px}
.clear-filters{font-size:.85rem;font-weight:700;color:var(--danger);padding:6px 10px;display:none}
.clear-filters.visible{display:inline-block}
.add-btn{font-size:.9rem;font-weight:800;color:#fff;background:var(--brand-dark);padding:8px 18px;border-radius:8px;white-space:nowrap}
.add-btn:hover{background:var(--brand-deep)}

/* ---------- Layout ---------- */
main{max-width:1280px;margin:0 auto;padding:22px 24px 60px}

/* ---------- Summary strip ---------- */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.summary-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;text-align:left;
}
.summary-card:hover{border-color:var(--brand-dark);box-shadow:var(--spotlight)}
.summary-card.active{border-color:var(--brand-dark);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand-dark)}
.summary-num{font-size:1.7rem;font-weight:800;line-height:1}
.summary-card.blockers .summary-num{color:var(--danger)}
.summary-card.commits .summary-num{color:var(--commit)}
.summary-card.leave .summary-num{color:var(--leave)}
.summary-card.tasks .summary-num{color:var(--brand-dark)}
.summary-text{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.summary-hint{display:block;font-size:.72rem;font-weight:700;color:var(--brand-dark);margin-top:1px}

/* ---------- Focus banner ---------- */
.focus-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--brand-tint);border:1px solid var(--brand);border-radius:var(--radius);
  padding:10px 16px;margin-bottom:16px;font-size:.9rem;font-weight:600;
}
.focus-banner strong{font-weight:800;color:var(--brand-deep)}
.focus-clear{margin-left:auto;font-size:.85rem;font-weight:800;color:var(--brand-deep);border:1px solid var(--brand-dark);border-radius:8px;padding:5px 12px;background:var(--surface)}
.focus-clear:hover{background:var(--brand)}
.focus-list{display:flex;flex-direction:column;gap:10px;max-width:820px}
.focus-section{font-weight:800;font-size:.95rem;margin:10px 0 2px;color:var(--ink-soft)}

/* ---------- Chips / pills (shared across every future view/form) ---------- */
.chip{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.chip.client{background:var(--brand-tint);color:var(--brand-deep)}
.chip.project{background:#EEF1F1;color:var(--ink-soft)}
.chip.person{background:#E9EDF0;color:#4A5A66}
.chip.role{background:#FDF0DA;color:#9A6A14}
.chip.status-todo{background:#EEF1F1;color:var(--ink-soft)}
.chip.status-progress{background:var(--brand-tint);color:var(--brand-deep)}
.chip.status-done{background:#E9F2E9;color:#4C7A4C}
.chip.blocker{background:var(--danger);color:#fff}
.chip.commit{background:var(--commit-tint);color:#3D5BB5}
.chip.date{background:#EEF1F1;color:var(--ink-soft)}
.chip.comments{background:#F0EBF7;color:#6B4E9B}

/* ---------- Legend ---------- */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.legend span{display:flex;align-items:center;gap:6px}
.dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.dot.d-brand{background:var(--brand)}
.dot.d-danger{background:var(--danger)}
.dot.d-commit{background:var(--commit)}
.dot.d-leave{background:var(--leave)}
.dot.d-milestone{background:var(--brand-deep)}
.footnote{margin-top:14px;font-size:.78rem;color:var(--ink-soft);font-weight:600}

/* ---------- Modal chrome (contents are each module's own concern) ---------- */
/* NOTE: vendors/bootstrap/bootstrap.min.css defines .modal, .modal-backdrop,
 * .modal-body and .modal-title too, and it loads BEFORE this file. Every
 * property Bootstrap sets that we do not re-declare here still applies. The
 * width/height and position resets below are load-bearing, not tidiness:
 * without them Bootstrap's own layout wins. See the .modal rule. */
.modal-backdrop{position:fixed;inset:0;width:auto;height:auto;background:rgba(74,74,74,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:4vh 20px 20px}
.modal-backdrop.open{display:flex}
/* position/top/left/height reset Bootstrap's `.modal{position:fixed;top:0;
 * left:0;width:100%;height:100%}`. Without them the dialog leaves the
 * backdrop's flex flow entirely and pins itself to the viewport's top-left,
 * stretched to max-height - it looks uncentred and half-empty, and the
 * backdrop's justify-content:center silently does nothing. */
.modal{position:relative;top:auto;left:auto;height:auto;background:var(--surface);border-radius:14px;max-width:760px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.2);overflow:hidden;max-height:92vh;display:flex;flex-direction:column}
.modal-head{background:var(--brand);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.modal-title{font-weight:800;font-size:1.05rem;color:#fff}
.modal-close{color:#fff;font-size:1.3rem;line-height:1;padding:2px 6px;border-radius:6px}
.modal-close:hover{background:rgba(255,255,255,.2)}
.modal-body{padding:18px 20px;overflow-y:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{font-size:.9rem;font-weight:800;padding:8px 18px;border-radius:8px}
.btn.primary{background:var(--brand-dark);color:#fff}
.btn.primary:hover{background:var(--brand-deep)}
.btn.ghost{border:1px solid var(--line);color:var(--ink-soft)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand-dark)}
.btn.danger{border:1px solid var(--danger);color:var(--danger)}
.btn.danger:hover{background:var(--danger);color:#fff}

/* ---------- Sign-in page (index.html) ---------- */
.signin-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.signin-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 28px;max-width:360px;width:100%;text-align:center}
.signin-card .brand-name{color:var(--brand-deep);display:block;font-size:1.4rem}
.signin-card .brand-sub{color:var(--ink-soft);display:block;margin-bottom:18px}
.signin-hint{font-size:.85rem;color:var(--ink-soft);margin-bottom:18px}
.signin-card .btn{width:100%}
.signin-error{color:var(--danger);font-size:.85rem;font-weight:600;margin-top:14px}

/* ---------- Presenter spotlight (hover highlights, dims siblings) ----------
 * Ported verbatim from docs/index.html:176-196. The base classes these
 * selectors target (.person-card, .task-row, table.week, .month-day, …) are
 * defined by the view modules that don't exist yet — that's fine, an unused
 * selector is inert until a later module supplies the markup. */
@media (hover:hover){
  .summary:has(.summary-card:hover) .summary-card:not(:hover){opacity:.45}

  .day-grid:has(.person-card:hover) .person-card:not(:hover){opacity:.4}
  .person-card:hover{border-color:var(--brand-dark);box-shadow:var(--spotlight)}

  .person-body:has(.task-row:hover) .task-row:not(:hover){opacity:.45}
  .focus-list:has(.task-row:hover) .task-row:not(:hover){opacity:.4}
  .modal-list:has(.task-row:hover) .task-row:not(:hover){opacity:.45}
  .task-row:hover{border-color:var(--brand-dark);box-shadow:var(--spotlight)}

  table.week tbody:has(tr:hover) tr:not(:hover){opacity:.4}
  td.day-cell:has(.mini-task:hover) .mini-task:not(:hover){opacity:.5}
  .mini-task:hover{border-color:currentColor;box-shadow:var(--spotlight)}
  .leave-cell-label:hover{box-shadow:var(--spotlight)}

  .month-grid:has(.month-day:hover) .month-day:not(:hover){opacity:.45}
  .month-day:hover{box-shadow:inset 0 0 0 2px var(--brand-dark)}
  .month-item:hover{border-color:currentColor}
}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .topbar,.controls{padding:0 14px}
  main{padding:16px 14px 50px}
  .today-label{margin-left:0;width:100%;text-align:center}
  .filters{margin-left:0;width:100%}
  .filters select{flex:1;max-width:none;min-width:120px}
  .range-label{min-width:0;flex:1;font-size:.9rem}
  .controls-inner{gap:10px}
}

/* Respect a visitor's reduced-motion preference — only elements this file
 * actually defines get a transition; each module adds its own for anything
 * it introduces (mini-task, month-item, person-card, table.week rows, …). */
@media (prefers-reduced-motion: no-preference){
  .nav-btn,.summary-card,.btn{
    transition:border-color .15s ease, background .15s ease, opacity .18s ease, box-shadow .18s ease;
  }
}