/* =========================================================================
 * styles.css — atelier parallel · 事務所待辦
 * Organised: tokens → base → sidebar → board → calendar → overlays
 * The whole palette lives in :root; change a token to re-skin globally.
 * ========================================================================= */

:root {
  --ink: #111;
  --paper: #fff;
  --panel: #faf9f7;
  --line: #111;            /* structural hairlines (1px solid #111) */
  --line-soft: #e4e2dd;
  --line-softer: #efeee9;
  --muted: #8d8a84;
  --muted-2: #a8a59e;
  --muted-3: #b8b5ae;
  --faint: #cbc8c1;
  --faint-2: #d8d6d1;
  --red: #e5342a;
  --hover: #f0eee9;
  --hover-2: #f4f3f1;
  --sans: 'Helvetica Neue', Helvetica, 'Noto Sans TC', Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --head-h: 100px;          /* shared height of sidebar head / lane head / cal toolbar */
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
  color: var(--ink);
}
button { font-family: inherit; color: inherit; }
input, select { font-family: inherit; outline: none; }
::selection { background: var(--ink); color: #fff; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--faint-2); }
*::-webkit-scrollbar-track { background: transparent; }
.mono { font-family: var(--mono); }

.app {
  display: flex;
  height: 100vh;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

/* ========================= SIDEBAR ========================= */
.sidebar {
  width: 262px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  overflow-y: auto;
}

.sidebar__head {
  height: var(--head-h);
  flex-shrink: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand__mark { width: 13px; height: 13px; background: var(--ink); display: inline-block; }
.brand__name { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; }
.brand__sub { margin-top: 8px; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.brand__sub .mono { font-size: 10px; letter-spacing: 0.1em; }

.pageswitch { display: flex; border: 1px solid var(--line); margin-top: 15px; }
.pageswitch__btn {
  flex: 1; padding: 8px 0; background: var(--paper); color: var(--ink);
  border: none; cursor: pointer; font-size: 13px;
}
.pageswitch__btn + .pageswitch__btn { border-left: 1px solid var(--line); }
.pageswitch__btn:hover { background: var(--hover); }
.pageswitch__btn.is-active { background: var(--ink); color: #fff; }

/* stats grid */
.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft); border-bottom: 1px solid var(--line);
}
.stat { background: var(--panel); padding: 13px 16px; }
.stat__label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--muted); }
.stat__label--red { color: var(--red); }
.stat__num { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1; margin-top: 3px; }
.stat__num--red { color: var(--red); }

/* controls (board) + today line */
.controls { padding: 15px 22px 6px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.controls__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sort { display: flex; align-items: center; gap: 7px; }
.sort__label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--muted); }
.seg { display: flex; border: 1px solid var(--line); }
.seg__btn { padding: 5px 9px; background: var(--paper); color: var(--ink); border: none; cursor: pointer; font-size: 11px; }
.seg__btn + .seg__btn { border-left: 1px solid var(--line); }
.seg__btn:hover { background: var(--hover-2); }
.seg__btn.is-active { background: var(--ink); color: #fff; }
.checkbtn { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 4px 0; }
.checkbox {
  width: 15px; height: 15px; border: 1.5px solid var(--ink); background: var(--paper);
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff;
}
.checkbox.is-on { background: var(--ink); }
.checkbtn span:last-child { font-size: 12px; color: var(--ink); }
.today-line { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }

/* project nav */
.nav { padding: 16px 22px 8px; }
.nav__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; cursor: context-menu; }
.nav__title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); }
.nav__hint { font-family: var(--mono); font-size: 9px; color: var(--muted-3); letter-spacing: 0.04em; }
.proj-row {
  display: grid; grid-template-columns: 11px 50px 1fr 22px; gap: 9px; align-items: center;
  width: 100%; text-align: left; background: none; border: none; padding: 8px 0; cursor: pointer;
  border-bottom: 1px solid var(--line-softer);
}
.proj-row:hover { background: var(--hover); }
.proj-dot { width: 9px; height: 9px; border: 1px solid var(--muted-3); display: inline-block; }
.proj-dot.is-active { background: var(--ink); border-color: var(--ink); }
.proj-code { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.proj-name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-count { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }

.add-dashed {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 1px dashed var(--muted-3); padding: 9px 10px; margin-top: 11px;
  cursor: pointer; color: #555;
}
.add-dashed:hover { background: var(--hover); border-color: var(--ink); color: var(--ink); }
.add-dashed__plus { font-size: 14px; line-height: 1; }
.add-dashed span:nth-child(2) { font-size: 13px; }
.add-dashed__en { font-family: var(--mono); font-size: 9px; color: var(--muted-2); letter-spacing: 0.08em; margin-left: auto; }

/* team */
.team { margin-top: auto; padding: 18px 22px; border-top: 1px solid var(--line-soft); }
.team__list { display: flex; flex-direction: column; gap: 9px; }
.member { display: flex; align-items: center; gap: 9px; cursor: context-menu; }
.member:hover { background: var(--hover); }
.avatar { border-radius: 50%; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar--sm { width: 22px; height: 22px; font-size: 11px; }
.avatar--md { width: 24px; height: 24px; font-size: 11px; }
.member-name { font-size: 12.5px; }
.member-role { font-size: 11px; color: var(--muted); margin-left: auto; }

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

/* ---- board ---- */
.board { flex: 1; display: flex; overflow: auto; background: var(--paper); }
.lane {
  width: 328px; flex-shrink: 0; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.lane__head {
  height: var(--head-h); padding: 0 18px; border-bottom: 1px solid var(--line);
  background: var(--panel); display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 1;
}
.lane__meta { min-width: 0; flex: 1; }
.lane__codeline { display: flex; align-items: baseline; gap: 9px; }
.lane__code { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.lane__overdue { font-family: var(--mono); font-size: 10px; color: var(--red); letter-spacing: 0.06em; }
.lane__name { font-size: 15.5px; font-weight: 500; margin-top: 5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane__en { font-family: var(--mono); font-size: 10px; color: var(--muted-2); letter-spacing: 0.06em; margin-top: 3px; }
.lane__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lane__count { display: flex; align-items: baseline; gap: 4px; }
.lane__num { font-family: var(--mono); font-size: 20px; font-weight: 600; line-height: 1; }
.lane__unit { font-size: 10px; color: var(--muted); }
.lane__add {
  width: 24px; height: 24px; border: 1px solid var(--ink); background: var(--paper);
  cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lane__add:hover { background: var(--ink); color: #fff; }
.lane__body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); min-height: 0; }

.empty { padding: 24px 10px; text-align: center; border: 1px dashed var(--line-soft); }
.empty .mono { font-size: 11px; letter-spacing: 0.1em; color: var(--faint); }

.task { border: 1px solid var(--ink); border-left: 3px solid var(--ink); padding: 8px 11px; display: flex; flex-direction: column; gap: 5px; background: var(--paper); }
.task:hover { background: var(--panel); }
.task--high { border-left-color: var(--red); }
.task--mid  { border-left-color: var(--ink); }
.task--low  { border-left-color: var(--faint); }
.task--done { border-left-color: var(--faint-2); }
.task__row1 { display: flex; gap: 8px; align-items: center; }
.check {
  width: 16px; height: 16px; border: 1.5px solid var(--ink); background: var(--paper);
  cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
}
.check:hover { background: #e8e6e1; }
.check.is-done { background: var(--ink); }
.check.is-done:hover { background: var(--ink); }
.check--xs { width: 14px; height: 14px; margin-top: 1px; }
.task__title { font-size: 13.5px; line-height: 1.3; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task__title.is-done { color: var(--muted-2); text-decoration: line-through; }
.task__due { font-family: var(--mono); font-size: 11px; color: var(--ink); flex-shrink: 0; }
.task__due.is-overdue { color: var(--red); }
.task__row2 { display: flex; align-items: center; gap: 6px; padding-left: 24px; white-space: nowrap; overflow: hidden; }
.task__row2 > * { flex-shrink: 0; }
.prio-btn { font-family: var(--mono); font-size: 11px; background: none; border: none; cursor: pointer; padding: 0; }
.prio--high { color: var(--red); }
.prio--mid { color: var(--ink); }
.prio--low { color: var(--muted-2); }
.sep { color: var(--faint-2); }
.meta { font-size: 11.5px; color: #444; }
.cat-chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; border: 1px solid var(--faint-2); padding: 1px 5px; color: #555; }
.status-btn { font-size: 11.5px; background: none; border: none; cursor: pointer; padding: 0; color: var(--ink); border-bottom: 1px dotted var(--muted-3); }
.task__rel { font-size: 10px; color: var(--red); margin-left: auto; }

.board__addcol { width: 64px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 16px; }
.board__addbtn { width: 36px; height: 36px; border: 1px dashed var(--muted-3); background: var(--paper); cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; color: #555; }
.board__addbtn:hover { background: var(--panel); border-color: var(--ink); color: var(--ink); }
.board__empty { padding: 90px 28px; width: 100%; text-align: center; }
.board__empty-zh { font-size: 13px; letter-spacing: 0.12em; color: var(--muted-3); }
.board__empty-sub { font-size: 13px; margin-top: 9px; color: var(--muted-3); }

/* ---- calendar toolbar ---- */
.cal-toolbar {
  height: var(--head-h); padding: 0 26px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-shrink: 0;
}
.cal-toolbar__left { display: flex; align-items: center; gap: 20px; }
.cal-nav { display: flex; border: 1px solid var(--line); }
.cal-nav__btn { width: 32px; height: 32px; background: var(--paper); border: none; cursor: pointer; font-size: 16px; }
.cal-nav__btn + .cal-nav__btn { border-left: 1px solid var(--line); }
.cal-nav__btn:hover { background: var(--hover-2); }
.cal-nav__today { width: auto; padding: 0 12px; font-size: 12px; }
.cal-titleblock { display: flex; align-items: baseline; gap: 12px; }
.cal-title { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 0.9; }
.cal-sub { font-size: 13px; color: var(--muted); }
.viewtabs { display: flex; border: 1px solid var(--line); }
.viewtab { padding: 7px 15px; background: var(--paper); color: var(--ink); border: none; cursor: pointer; font-size: 13px; }
.viewtab + .viewtab { border-left: 1px solid var(--line); }
.viewtab:hover { background: var(--hover-2); }
.viewtab.is-active { background: var(--ink); color: #fff; }

.cal-body { flex: 1; overflow: auto; background: var(--paper); }

/* ---- calendar: day ---- */
.day { padding: 24px 26px 60px; max-width: 1080px; }
.day__count { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 22px; }
.day__empty { padding: 80px 0; text-align: center; }
.day__empty .mono { font-size: 13px; letter-spacing: 0.12em; color: var(--muted-3); }
.daygroup { margin-bottom: 32px; }
.daygroup__head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--ink); padding-bottom: 7px; }
.daygroup__head--overdue { border-bottom-color: var(--red); }
.daygroup__head--overdue .daygroup__label, .daygroup__head--overdue .daygroup__count { color: var(--red); }
.daygroup__labelwrap { display: flex; align-items: baseline; gap: 11px; }
.daygroup__label { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; }
.daygroup__sub { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; }
.daygroup__count { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.dayrow {
  display: grid; grid-template-columns: 20px minmax(0,1fr) 90px 96px 116px 130px; gap: 16px;
  align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line-soft);
}
.dayrow:hover { background: var(--panel); }
.dayrow .check { width: 18px; height: 18px; font-size: 11px; }
.dayrow__main { min-width: 0; }
.dayrow__title { font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dayrow__title.is-done { color: var(--muted-2); text-decoration: line-through; }
.dayrow__meta { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dayrow .prio-btn { text-align: left; letter-spacing: 0.04em; }
.dayrow__phase { font-size: 13px; color: var(--ink); }
.owner { display: flex; align-items: center; gap: 7px; min-width: 0; }
.owner__name { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- calendar: week ---- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line-soft); min-height: 100%; }
.weekday { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-width: 0; }
.weekday__head { padding: 11px; border-bottom: 1px solid var(--faint-2); display: flex; justify-content: space-between; align-items: baseline; cursor: pointer; }
.weekday__head:hover { background: var(--panel); }
.weekday__head.is-today { border-bottom-color: var(--ink); background: var(--ink); color: #fff; }
.weekday__name { font-size: 13px; color: var(--ink); }
.weekday__head.is-today .weekday__name { color: #fff; }
.weekday__en { font-size: 9px; color: var(--muted-2); letter-spacing: 0.08em; margin-top: 1px; }
.weekday__head.is-today .weekday__en { color: #fff; opacity: 0.7; }
.weekday__num { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--muted); }
.weekday__head.is-today .weekday__num { color: #fff; }
.weekday__body { flex: 1; display: flex; flex-direction: column; }
.weekday__fill { flex: 1; min-height: 60px; }
.wtask { padding: 9px 11px; border-bottom: 1px solid var(--line-softer); display: flex; gap: 8px; align-items: flex-start; }
.wtask:hover { background: var(--panel); }
.wtask__main { min-width: 0; flex: 1; }
.wtask__top { display: flex; align-items: center; gap: 6px; }
.pdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pdot--high { background: var(--red); }
.pdot--mid { background: var(--ink); }
.pdot--low { border: 1px solid var(--muted-3); }
.wtask__code { font-size: 9px; color: var(--muted); letter-spacing: 0.04em; }
.wtask__title { font-size: 12px; color: var(--ink); margin-top: 3px; line-height: 1.3; }
.wtask__title.is-done { color: var(--muted-2); text-decoration: line-through; }
.wtask__meta { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ---- calendar: month ---- */
.month__heads { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.mhead { padding: 9px 10px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); background: var(--panel); display: flex; align-items: baseline; gap: 6px; }
.mhead__zh { font-size: 12px; color: var(--ink); }
.mhead__en { font-size: 9px; color: var(--muted-2); letter-spacing: 0.08em; }
.month__grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cell { min-height: 104px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 7px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.cell:hover { background: var(--panel); }
.cell__top { display: flex; justify-content: flex-end; }
.cell__num { font-size: 12px; color: var(--ink); padding: 3px 2px; }
.cell__num--out { color: var(--faint); }
.cell__num--today { width: 23px; height: 23px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
.bar { display: flex; gap: 5px; align-items: center; min-width: 0; }
.bar__dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.bar__dot--high { background: var(--red); }
.bar__dot--norm { background: var(--ink); }
.bar__title { font-size: 10.5px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell__more { font-size: 10px; color: var(--muted); }

/* ========================= OVERLAYS ========================= */
/* context menu */
.menu-scrim { position: fixed; inset: 0; z-index: 55; }
.menu { position: fixed; z-index: 56; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 12px 32px rgba(0,0,0,0.22); min-width: 178px; }
.menu__label { padding: 9px 13px; border-bottom: 1px solid var(--line-soft); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.menu__item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--paper); border: none; padding: 11px 13px; cursor: pointer; font-size: 13px; color: var(--ink); }
.menu__item:hover { background: var(--hover-2); }
.menu__item--danger { color: var(--red); }
.menu__item--danger:hover { background: #fcecea; }
.menu__icon { font-size: 13px; width: 14px; }

/* modals */
.modal-backdrop { position: fixed; inset: 0; background: rgba(17,17,17,0.42); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--paper); width: 460px; max-width: 94vw; border: 1px solid var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,0.25); }
.modal--lg { width: 540px; }
.modal--sm { width: 420px; }
.modal__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--ink); }
.modal__titlewrap { display: flex; align-items: baseline; gap: 10px; }
.modal__title { font-size: 16px; font-weight: 600; }
.modal__tag { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; }
.modal__close { width: 28px; height: 28px; border: 1px solid var(--faint-2); background: var(--paper); cursor: pointer; font-size: 14px; }
.modal__close:hover { background: var(--hover-2); }
.modal__body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-code { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
.field { min-width: 0; }
.field__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; margin-bottom: 7px; display: block; }
.field__input { width: 100%; border: 1px solid var(--ink); padding: 9px; font-size: 14px; background: var(--paper); }
.field__input--underline { border: none; border-bottom: 1.5px solid var(--ink); padding: 8px 2px; font-size: 16px; background: transparent; }
.field__select { width: 100%; border: 1px solid var(--ink); padding: 9px; background: var(--paper); font-size: 13px; cursor: pointer; }
input.mono, .field__input.mono { font-family: var(--mono); }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line-soft); }
.btn { padding: 10px 18px; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; font-size: 13px; }
.btn--ghost:hover { background: var(--hover-2); }
.btn--primary { padding: 10px 22px; background: var(--ink); color: #fff; }
.btn--primary:hover { background: #333; }
.btn--primary:disabled { background: var(--line-soft); color: var(--muted-2); border-color: var(--line-soft); cursor: not-allowed; }