/* ==========================================================================
FBC Operating Console — tasks.css
========================================================================== */
.tm, .tm-overlay {
  --tm-font: 'Inter', 'Inter Variable', var(--font-stack);
  --pri-urgent-bg: #fdeaea;  --pri-urgent-fg: #b02a1e;
  --pri-high-bg:   #fdf3dd;  --pri-high-fg:   #a4690b;
  --pri-normal-bg: #e6eef6;  --pri-normal-fg: #1f4e79;
  --pri-low-bg:    #f1f2f4;  --pri-low-fg:    #6c757d;
  --st-notstarted-bg: #f1f2f4; --st-notstarted-fg: #6c757d;
  --st-progress-bg:   #e6eef6; --st-progress-fg:   #1f4e79;
  --st-hold-bg:       #fdf3dd; --st-hold-fg:       #a4690b;
  --st-done-bg:       #e2f3e8; --st-done-fg:       #1d7a48;
  --tm-row-h: 54px;
  --tm-detail-side: 300px;
}
.tm { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; font-family: var(--tm-font); background: var(--color-bg); }
.tm-head { display: flex; align-items: center; gap: var(--sp-7); padding: var(--sp-6) var(--sp-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.tm-head__title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.tm-head__title h1 { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; color: var(--color-text); }
.tm-head__sub { font-size: var(--fs-sm); color: var(--color-muted); }
.tm-stats { display: flex; gap: var(--sp-3); }
.tm-stat { display: flex; flex-direction: column; gap: 1px; min-width: 82px; padding: var(--sp-3) var(--sp-5); background: var(--color-surface-2); border: 1px solid var(--color-border-light); border-left: 3px solid var(--color-faint); border-radius: var(--radius-2); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.tm-stat:hover { background: var(--color-primary-soft); }
.tm-stat.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.tm-stat--danger  { border-left-color: var(--color-danger); }
.tm-stat--warning { border-left-color: var(--color-warning); }
.tm-stat--primary { border-left-color: var(--color-primary); }
.tm-stat--success { border-left-color: var(--color-success); }
.tm-stat__value { font-size: var(--fs-lg); font-weight: 600; line-height: 1.1; }
.tm-stat__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.tm-head__actions { display: flex; gap: var(--sp-3); }
.tm-views { display: flex; gap: var(--sp-1); padding: 0 var(--sp-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.tm-view-btn { position: relative; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--color-muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.tm-view-btn:hover { color: var(--color-text); }
.tm-view-btn.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.tm-view-btn__count { padding: 1px 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--color-muted); background: var(--color-surface-2); border-radius: var(--radius-pill); }
.tm-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-5) var(--sp-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.tm-search { position: relative; flex: 1 1 200px; max-width: 300px; }
.tm-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--color-faint); pointer-events: none; }
.tm-search input { width: 100%; height: 32px; padding: 0 var(--sp-5) 0 28px; font: inherit; font-size: var(--fs-base); color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-2); outline: none; }
.tm-search input:focus { border-color: var(--color-primary); background: var(--color-surface); }
.tm-select { height: 32px; padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-base); color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-2); cursor: pointer; outline: none; }
.tm-select:focus { border-color: var(--color-primary); }
.tm-select.is-set { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 500; }
.tm-toolbar__sep { width: 1px; height: 20px; background: var(--color-border); }
.tm-link-btn { padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-base); color: var(--color-primary); background: none; border: 0; border-radius: var(--radius-1); cursor: pointer; }
.tm-link-btn:hover { background: var(--color-primary-soft); }
.tm-bulk { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-8); font-size: var(--fs-base); color: #fff; background: var(--color-primary); }
.tm-bulk b { font-weight: 600; }
.tm-bulk__spacer { margin-left: auto; }
.tm-bulk button { padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-base); color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-1); cursor: pointer; }
.tm-bulk button:hover { background: rgba(255, 255, 255, .26); }
.tm-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-7) var(--sp-8) var(--sp-9); }
.tm-view[hidden] { display: none; }
.tm-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: 64px var(--sp-8); text-align: center; color: var(--color-muted); }
.tm-empty strong { font-size: var(--fs-lg); font-weight: 600; color: var(--color-text); }
.tm-empty span { font-size: var(--fs-base); }
.tm-group { margin-bottom: var(--sp-8); }
.tm-group__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.tm-group__head b { padding: 1px 6px; font-size: var(--fs-xs); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.tm-table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-3); box-shadow: var(--shadow-sm); overflow: hidden; }
.tm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.tm-table thead th { position: sticky; top: 0; z-index: 2; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-xs); font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.tm-table th.is-sortable { cursor: pointer; user-select: none; }
.tm-table th.is-sortable:hover { color: var(--color-text); }
.tm-table th .tm-sort { margin-left: 4px; opacity: 0; }
.tm-table th.is-sorted { color: var(--color-primary); }
.tm-table th.is-sorted .tm-sort { opacity: 1; }
.task-row { height: var(--tm-row-h); cursor: pointer; transition: background .15s ease; }
.task-row > td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.task-row:last-child > td { border-bottom: 0; }
.task-row:hover > td { background: var(--color-primary-soft); }
.task-row.is-selected > td { background: var(--color-primary-soft); }
.task-row.is-overdue .date-due { color: var(--color-danger); font-weight: 600; }
.task-row.is-done .subject-text { color: var(--color-muted); text-decoration: line-through; }
.task-row > td:first-child { border-left: 3px solid transparent; }
.task-row[data-priority="Urgent"] > td:first-child { border-left-color: var(--pri-urgent-fg); }
.task-row[data-priority="High"]   > td:first-child { border-left-color: var(--pri-high-fg); }
.task-row[data-priority="Normal"] > td:first-child { border-left-color: var(--pri-normal-fg); }
.task-row[data-priority="Low"]    > td:first-child { border-left-color: var(--color-faint); }
.task-cell--check { width: 72px; white-space: nowrap; }
.task-cell--check > * { vertical-align: middle; }
.check-wrap { display: flex; align-items: center; gap: var(--sp-2); }
.tm-checkbox { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.flag-btn { padding: 2px; color: var(--color-faint); background: none; border: 0; border-radius: var(--radius-1); cursor: pointer; line-height: 1; }
.flag-btn:hover { color: var(--color-warning); background: var(--color-surface-2); }
.flag-btn.is-on { color: var(--color-danger); }
.flag-btn.is-on svg { fill: currentColor; }
.task-cell--subject { min-width: 260px; }
.subject-text { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--color-text); line-height: 1.35; }
.subject-meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: 3px; flex-wrap: wrap; }
.owner-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--color-muted); }
.avatar { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 9px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--color-primary); border-radius: 50%; }
.avatar--lg { width: 28px; height: 28px; font-size: 11px; }
.category-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; font-size: var(--fs-sm); font-weight: 500; border-radius: var(--radius-pill); background: var(--cat-bg, var(--color-surface-2)); color: var(--cat-fg, var(--color-muted)); }
.category-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.subject-meta .tm-proj { font-size: var(--fs-sm); color: var(--color-faint); }
.task-cell--dates { width: 132px; }
.date-start { font-size: var(--fs-sm); color: var(--color-muted); }
.date-due { display: flex; align-items: center; gap: 4px; font-size: var(--fs-base); color: var(--color-text); }
.date-none { font-style: italic; color: var(--color-faint); }
.task-cell--status { width: 138px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: var(--fs-sm); font-weight: 600; border: 0; border-radius: var(--radius-pill); cursor: pointer; font-family: inherit; }
.status-pill svg { opacity: .55; }
.status-pill[data-status="Not Started"] { background: var(--st-notstarted-bg); color: var(--st-notstarted-fg); }
.status-pill[data-status="In Progress"] { background: var(--st-progress-bg); color: var(--st-progress-fg); }
.status-pill[data-status="On Hold"]     { background: var(--st-hold-bg); color: var(--st-hold-fg); }
.status-pill[data-status="Completed"]   { background: var(--st-done-bg); color: var(--st-done-fg); }
.priority-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius-pill); }
.priority-badge[data-priority="Urgent"] { background: var(--pri-urgent-bg); color: var(--pri-urgent-fg); }
.priority-badge[data-priority="High"]   { background: var(--pri-high-bg); color: var(--pri-high-fg); }
.priority-badge[data-priority="Normal"] { background: var(--pri-normal-bg); color: var(--pri-normal-fg); }
.priority-badge[data-priority="Low"]    { background: var(--pri-low-bg); color: var(--pri-low-fg); }
.task-cell--progress { width: 116px; }
.progress-wrap { display: flex; align-items: center; gap: var(--sp-3); }
.progress-bar { flex: 1; height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--color-primary); border-radius: 2px; transition: width .2s ease; }
.progress-fill.is-full { background: var(--color-success); }
.progress-label { min-width: 30px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted); text-align: right; }
.task-cell--reminder { width: 64px; text-align: center; }
.reminder-icon { display: inline-flex; color: var(--color-warning); }
.reminder-icon.is-off { color: var(--color-border); }
.task-cell--row-actions { width: 40px; text-align: right; }
.row-menu-btn { padding: 3px; color: var(--color-faint); background: none; border: 0; border-radius: var(--radius-1); cursor: pointer; line-height: 1; }
.row-menu-btn:hover { color: var(--color-text); background: var(--color-surface-2); }
.tm-menu { position: fixed; z-index: 60; min-width: 168px; padding: var(--sp-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-3); box-shadow: var(--shadow-md); }
.tm-menu[hidden] { display: none; }
.tm-menu button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); font: inherit; font-size: var(--fs-base); text-align: left; color: var(--color-text); background: none; border: 0; border-radius: var(--radius-1); cursor: pointer; }
.tm-menu button:hover { background: var(--color-primary-soft); }
.tm-menu button.is-danger { color: var(--color-danger); }
.tm-menu__sep { height: 1px; margin: var(--sp-2) 0; background: var(--color-border-light); }
.tm-cards { display: none; }
.tm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr); gap: var(--sp-6); align-items: start; overflow-x: auto; padding-bottom: var(--sp-5); }
.tm-col { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-3); }
.tm-col.is-dropping { border-color: var(--color-primary); background: var(--color-primary-soft); }
.tm-col__head { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.tm-col__head b { margin-left: auto; padding: 1px 7px; font-size: var(--fs-xs); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.tm-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-faint); border-radius: var(--radius-2); box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; }
.tm-card:hover { box-shadow: var(--shadow-md); }
.tm-card.is-dragging { opacity: .45; }
.tm-card[data-priority="Urgent"] { border-left-color: var(--pri-urgent-fg); }
.tm-card[data-priority="High"]   { border-left-color: var(--pri-high-fg); }
.tm-card[data-priority="Normal"] { border-left-color: var(--pri-normal-fg); }
.tm-card__subject { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.tm-card__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tm-card__foot { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--color-muted); }
.tm-card__foot .progress-bar { width: 54px; flex: 0 0 auto; }
.tm-rem-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.tm-rem-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.tm-rem-head p { margin: 0; font-size: var(--fs-base); color: var(--color-muted); }
.rem-row > td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.rem-row:hover > td { background: var(--color-surface-2); }
.rem-row.is-past .rem-when { color: var(--color-danger); font-weight: 600; }
.rem-when { display: flex; flex-direction: column; gap: 1px; }
.rem-when b { font-size: var(--fs-base); font-weight: 600; }
.rem-when span { font-size: var(--fs-sm); color: var(--color-muted); }
.rem-channel { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-pill); }
.rem-channel--email { color: var(--cat-pa); background: #f0e9f3; }
.tm-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); color: var(--color-muted); cursor: pointer; }
.tm-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tm-toggle__track { width: 32px; height: 18px; padding: 2px; background: var(--color-border); border-radius: var(--radius-pill); transition: background .2s ease; }
.tm-toggle__knob { display: block; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.tm-toggle input:checked + .tm-toggle__track { background: var(--color-success); }
.tm-toggle input:checked + .tm-toggle__track .tm-toggle__knob { transform: translateX(14px); }
.category-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--sp-6); }
.cat-card { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6); background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--cat-color, var(--color-primary)); border-radius: var(--radius-3); box-shadow: var(--shadow-sm); }
.cat-card__head { display: flex; align-items: center; gap: var(--sp-4); }
.cat-swatch { width: 24px; height: 24px; border-radius: var(--radius-2); background: var(--cat-color, var(--color-primary)); flex: 0 0 auto; }
.cat-card__name { font-size: var(--fs-md); font-weight: 600; }
.cat-card__count { font-size: var(--fs-sm); color: var(--color-muted); }
.cat-card__foot { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--color-border-light); }
.cat-card__foot .tm-link-btn { margin-left: auto; }
.cat-card__del { color: var(--color-danger); }
.cat-card__del:hover { background: var(--color-danger-soft); }
.cat-add { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6); background: var(--color-surface-2); border: 1px dashed var(--color-border); border-radius: var(--radius-3); }
.cat-add h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.swatch-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.swatch-btn { width: 22px; height: 22px; border: 2px solid transparent; border-radius: var(--radius-2); cursor: pointer; padding: 0; }
.swatch-btn.is-active { border-color: var(--color-text); }
.tm-overlay { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; font-family: var(--tm-font); background: var(--color-bg); }
.tm-overlay[hidden] { display: none; }
.tw-bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.tw-bar__crumb { font-size: var(--fs-base); color: var(--color-muted); margin-right: auto; }
.tw-bar__crumb b { color: var(--color-text); font-weight: 600; }
.tw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--tm-detail-side); overflow: hidden; }
.tw-main { overflow: auto; padding: var(--sp-8) var(--sp-9); }
.tw-title-row { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.tw-title { flex: 1; margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--color-text); text-wrap: pretty; border: 1px solid transparent; border-radius: var(--radius-2); padding: 2px 6px; margin-left: -6px; }
.tw-title:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); }
.tw-badges { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-8); flex-wrap: wrap; }
.tw-section { margin-bottom: var(--sp-9); }
.tw-section > h3 { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.tw-desc { min-height: 76px; padding: var(--sp-5); font-size: var(--fs-md); line-height: 1.6; color: var(--color-text); white-space: pre-wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-3); text-wrap: pretty; }
.tw-desc:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.tw-desc:empty::before { content: 'Add a description…'; color: var(--color-faint); }
.subtasks-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--sp-4); }
.subtask-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-2); }
.subtask-row.is-done .subtask-text { color: var(--color-muted); text-decoration: line-through; }
.subtask-text { flex: 1; }
.subtask-del { color: var(--color-faint); background: none; border: 0; cursor: pointer; padding: 2px; line-height: 1; }
.subtask-del:hover { color: var(--color-danger); }
.tw-inline-add { display: flex; gap: var(--sp-3); }
.tw-inline-add input { flex: 1; height: 32px; padding: 0 var(--sp-5); font: inherit; font-size: var(--fs-base); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2); outline: none; }
.tw-inline-add input:focus { border-color: var(--color-primary); }
.attachments-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.attach-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-base); background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-2); }
.attach-row__name { flex: 1; font-weight: 500; }
.attach-row__meta { font-size: var(--fs-sm); color: var(--color-muted); }
.dropzone { display: grid; place-items: center; padding: var(--sp-7); font-size: var(--fs-base); color: var(--color-muted); background: var(--color-surface-2); border: 1px dashed var(--color-border); border-radius: var(--radius-3); }
.dropzone.is-over { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.thread-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.thread-msg { display: flex; gap: var(--sp-4); max-width: 76%; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-base); line-height: 1.55; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-3); }
.thread-msg--me { align-self: flex-end; background: var(--color-primary-soft); border-color: transparent; }
.thread-msg__who { font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted); margin-bottom: 2px; }
.tw-side { overflow: auto; padding: var(--sp-8) var(--sp-7); background: var(--color-surface); border-left: 1px solid var(--color-border); }
.detail-meta-grid { display: flex; flex-direction: column; gap: var(--sp-6); }
.meta-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.meta-item > label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.meta-item__value { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); }
.tw-side__sep { height: 1px; margin: var(--sp-8) 0; background: var(--color-border-light); }
.tw-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.tm-modal-scrim { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--sp-8); background: rgba(15, 20, 28, .42); font-family: var(--tm-font); }
.tm-modal-scrim[hidden] { display: none; }
.task-form-modal { width: 100%; max-width: 700px; max-height: 88vh; display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.tfm__head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-8); border-bottom: 1px solid var(--color-border); }
.tfm__head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; margin-right: auto; }
.tfm__body { flex: 1; overflow: auto; padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-9); }
.tfm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.tfm__grid--full { grid-template-columns: 1fr; }
.fld { display: flex; flex-direction: column; gap: var(--sp-2); }
.fld--span { grid-column: 1 / -1; }
.fld > label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.fld input, .fld select, .fld textarea { font: inherit; font-size: var(--fs-md); color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-2); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.fld input, .fld select { height: 34px; padding: 0 var(--sp-4); }
.fld textarea { min-height: 84px; padding: var(--sp-4); line-height: 1.55; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.fld.is-invalid input, .fld.is-invalid select { border-color: var(--color-danger); }
.fld__error { font-size: var(--fs-sm); color: var(--color-danger); }
.fld__error[hidden] { display: none; }
.fld__hint { font-size: var(--fs-sm); color: var(--color-faint); }
.fld__range { display: flex; align-items: center; gap: var(--sp-4); }
.fld__range input[type="range"] { flex: 1; height: auto; padding: 0; background: none; border: 0; accent-color: var(--color-primary); }
.fld__range b { min-width: 38px; font-size: var(--fs-md); font-weight: 600; text-align: right; }
.tfm__section-label { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.tfm__section-label::after { content: ''; flex: 1; height: 1px; background: var(--color-border-light); }
.tfm__foot { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-8); background: var(--color-surface-2); border-top: 1px solid var(--color-border); }
.tfm__foot .tm-btn--primary { margin-left: auto; }
.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); height: 32px; padding: 0 var(--sp-6); font: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2); cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.tm-btn:hover { background: var(--color-surface-2); border-color: var(--color-faint); }
.tm-btn--primary { color: #fff; background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.tm-btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.tm-btn--success { color: #fff; background: var(--color-success); border-color: var(--color-success); font-weight: 600; }
.tm-btn--success:hover { filter: brightness(.94); background: var(--color-success); }
.tm-btn--danger { color: var(--color-danger); border-color: var(--color-border); }
.tm-btn--danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger); }
.tm-btn--block { width: 100%; }
.tm-btn--icon { width: 32px; padding: 0; }
.tm-btn[disabled] { opacity: .6; cursor: default; }
.tm-btn__spin { display: none; width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: tm-spin .7s linear infinite; }
.tm-btn.is-loading .tm-btn__spin { display: block; }
@keyframes tm-spin { to { transform: rotate(360deg); } }
.tm-toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 12px); padding: var(--sp-4) var(--sp-7); font-family: var(--tm-font); font-size: var(--fs-base); color: #fff; background: #23272f; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.tm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1200px) {
  .tw-body { grid-template-columns: 1fr; overflow: auto; }
  .tw-main, .tw-side { overflow: visible; }
  .tw-side { border-left: 0; border-top: 1px solid var(--color-border); }
  .task-cell--progress, .task-cell--reminder { display: none; }
}
@media (max-width: 768px) {
  .tm-head { flex-wrap: wrap; }
  .tm-stats { order: 3; width: 100%; overflow-x: auto; }
  .tm-body { padding: var(--sp-5); }
  .tm-table-wrap { display: none; }
  .tm-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
  .tm-mcard { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-faint); border-radius: var(--radius-3); box-shadow: var(--shadow-sm); }
  .tm-mcard[data-priority="Urgent"] { border-left-color: var(--pri-urgent-fg); }
  .tm-mcard[data-priority="High"]   { border-left-color: var(--pri-high-fg); }
  .tm-mcard__top { display: flex; align-items: flex-start; gap: var(--sp-3); }
  .tm-mcard__subject { flex: 1; font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
  .tm-mcard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--color-muted); border-top: 1px solid var(--color-border-light); padding-top: var(--sp-3); }
  .tm-mcard__grid b { display: block; font-size: var(--fs-base); color: var(--color-text); font-weight: 600; }
  .tfm__grid { grid-template-columns: 1fr; }
  .tm-modal-scrim { padding: 0; place-items: stretch; }
  .task-form-modal { max-width: none; max-height: none; border-radius: 0; }
}