/* ============================================================
   WOW Studio CRM — Screen layouts (Phase 2 + 3)
   Depends on tokens.css + components.css. Only patterns that a
   specific screen needs; generic components stay in components.css.
   ============================================================ */

[hidden] { display: none !important; }

/* ---------- Filter bar above tables / grids ---------- */
.filter-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.filter-bar .field { flex-direction: row; align-items: center; gap: var(--space-2); }
.filter-bar .field label { color: var(--text-muted); font-weight: var(--weight-regular); white-space: nowrap; }
.filter-bar .select, .filter-bar .input { width: auto; min-width: 150px; }
.filter-bar .spacer { flex: 1; }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--bg-surface); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; color: var(--text-secondary); }
.chip.active { background: var(--color-primary-600); color: #fff; border-color: var(--color-primary-600); }
.chip .n { background: rgba(0,0,0,0.08); border-radius: var(--radius-full); padding: 0 6px; }
.chip.active .n { background: rgba(255,255,255,0.22); }

/* ---------- Entity header (detail pages) ---------- */
.entity-head { display: flex; align-items: flex-start; gap: var(--space-4); }
.entity-head .avatar { width: 48px; height: 48px; font-size: var(--text-lg); }
.entity-head .avatar.sq { border-radius: var(--radius-md); }
.entity-head h1 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.entity-head .meta { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--text-muted); font-size: var(--text-sm); margin-top: 4px; }
.entity-head .meta b { color: var(--text-primary); font-weight: var(--weight-medium); }

/* ---------- Two-column detail layout ---------- */
.layout-side { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-5); align-items: start; }
.layout-side-left { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-5); align-items: start; }
.col > * + * { margin-top: var(--space-4); }
.sticky-col { position: sticky; top: calc(var(--topbar-height) + var(--space-5)); }

/* ---------- Settings / sub navigation ---------- */
.subnav { display: flex; flex-direction: column; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-2); }
.subnav a { padding: 8px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--weight-medium); }
.subnav a:hover { background: var(--bg-subtle); text-decoration: none; color: var(--text-primary); }
.subnav a.active { background: var(--color-primary-50); color: var(--color-primary-700); }
.subnav .group { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 10px 12px 4px; }

/* ---------- Timetable additions ---------- */
.tt-wrap { overflow: auto; }
.tt-grid { min-width: 900px; }
.tt-grid .tt-cell { overflow: visible; }
.tt-grid .tt-head.today { background: var(--color-primary-50); color: var(--color-primary-700); }
.tt-grid .tt-head.holiday { background: var(--color-danger-50); color: var(--color-danger-700); }
.tt-grid .tt-head .note { display: block; font-size: 10px; font-weight: var(--weight-regular); }
.tt-grid .tt-cell.now { box-shadow: inset 0 2px 0 var(--color-danger-500); }
.slot-chip { --h: 24px; height: var(--h); display: flex; flex-direction: column; justify-content: flex-start; line-height: 1.25; padding: 2px 6px; }
.slot-chip.hiphop { --c: #D9480F; }
.slot-chip.violin { --c: #2B8A9E; }
.slot-chip.vocal { --c: #7048E8; }
.slot-chip.trial { --c: var(--color-accent-700); }
.slot-chip.tentative { border-left-style: dotted; background: repeating-linear-gradient(135deg, var(--color-warning-50) 0 4px, #fff 4px 8px); }
.slot-chip.pending::before { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-danger-500); }
.slot-chip:hover { box-shadow: var(--shadow-md); z-index: 2; }
.slot-chip .r { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--color-gray-300)); display: inline-block; }
.legend i.ballet { --c: #B5468A; } .legend i.jazz { --c: var(--color-accent-500); } .legend i.piano { --c: var(--color-info-500); }
.legend i.contemporary { --c: #2A9D8F; } .legend i.hiphop { --c: #D9480F; } .legend i.violin { --c: #2B8A9E; } .legend i.vocal { --c: #7048E8; }
.legend i.rental { --c: var(--color-gray-500); } .legend i.trial { --c: var(--color-accent-700); }
.legend i.idle { background: var(--color-success-50); border: 1px solid var(--color-success-100); }
.legend i.off { background: repeating-linear-gradient(135deg, var(--color-gray-100) 0 3px, #fff 3px 6px); border: 1px solid var(--border-default); }
.legend i.holiday { background: var(--color-danger-100); } .legend i.term-break { background: var(--color-accent-100); } .legend i.off-day { background: var(--color-gray-200); }
.legend i.moved { background: var(--color-warning-100); border: 1px dashed var(--color-warning-500); }

/* ---------- Availability grid (rooms × 30-min cells) ---------- */
.avail { display: grid; grid-template-columns: 150px repeat(var(--cols, 28), 1fr); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); font-size: var(--text-xs); min-width: 1000px; }
.avail .h { background: var(--bg-subtle); padding: 6px 4px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-muted); border-left: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); white-space: nowrap; overflow: hidden; }
.avail .h.hour { color: var(--text-primary); font-weight: var(--weight-semibold); }
.avail .rh { padding: 8px 12px; border-top: 1px solid var(--border-default); background: var(--bg-surface); font-weight: var(--weight-medium); font-size: var(--text-sm); display: flex; flex-direction: column; justify-content: center; }
.avail .rh .sub { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-regular); }
.avail .c { --c: var(--color-gray-300); height: 44px; border-top: 1px solid var(--border-default); border-left: 1px solid var(--border-default); position: relative; cursor: pointer; }
.avail .c.hour { border-left-color: var(--border-strong); }
.avail .c.idle { background: var(--color-success-50); }
.avail .c.idle:hover { background: var(--color-success-100); }
.avail .c.off { background: repeating-linear-gradient(135deg, var(--color-gray-100) 0 4px, #fff 4px 8px); cursor: not-allowed; }
.avail .c.busy { background: color-mix(in srgb, var(--c) 18%, white); border-top: 3px solid var(--c); cursor: default; }
.avail .c.busy.start { border-left: 3px solid var(--c); }
.avail .c.busy.tentative { background: repeating-linear-gradient(135deg, var(--color-warning-50) 0 4px, #fff 4px 8px); border-top-color: var(--color-warning-500); }
.avail .c .lbl { position: absolute; left: 4px; top: 6px; right: 0; white-space: nowrap; overflow: visible; font-weight: var(--weight-medium); color: var(--text-primary); z-index: 1; pointer-events: none; }
.avail .c.ballet { --c: #B5468A; } .avail .c.jazz { --c: var(--color-accent-500); } .avail .c.piano { --c: var(--color-info-500); }
.avail .c.contemporary { --c: #2A9D8F; } .avail .c.hiphop { --c: #D9480F; } .avail .c.violin { --c: #2B8A9E; } .avail .c.vocal { --c: #7048E8; }
.avail .c.rental { --c: var(--color-gray-500); } .avail .c.trial { --c: var(--color-accent-700); }
.avail .c.selected { outline: 2px solid var(--color-primary-600); outline-offset: -2px; background: var(--color-primary-50); }

/* ---------- Year view ---------- */
.year { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.month { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.month h4 { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.month h4 .term { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-regular); }
.month .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.month .dow { font-size: 10px; text-align: center; color: var(--text-muted); text-transform: uppercase; }
.year-day { width: 100%; aspect-ratio: 1; height: auto; cursor: default; position: relative; }
.year-day.moved::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-warning-500); }
.year-day.blank { visibility: hidden; }
.year-day.weekend { color: var(--color-gray-400); }
.year.editable .year-day:not(.blank) { cursor: pointer; }
.year.editable .year-day:not(.blank):hover { outline: 1px solid var(--color-primary-400); }

/* ---------- Lead board tweaks ---------- */
.kanban { grid-auto-columns: minmax(220px, 1fr); }
.lead-card .tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

/* ---------- Wizard (convert to client, new class, new booking) ---------- */
.wizard-steps { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.wizard-steps .ws { flex: 1; padding: 8px 10px; border-radius: var(--radius-md); background: var(--bg-subtle); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); display: flex; gap: 8px; align-items: center; }
.wizard-steps .ws .n { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-gray-300); display: grid; place-items: center; font-size: 10px; }
.wizard-steps .ws.done { color: var(--color-success-700); background: var(--color-success-50); }
.wizard-steps .ws.done .n { background: var(--color-success-500); border-color: var(--color-success-500); color: #fff; }
.wizard-steps .ws.current { color: var(--color-primary-700); background: var(--color-primary-50); }
.wizard-steps .ws.current .n { border-color: var(--color-primary-600); }
.wizard-panel[hidden] { display: none; }

/* ---------- Conflict check / preview boxes ---------- */
.check-list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 6px; }
.check-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.check-list .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.check-list .ok .icon { color: var(--color-success-500); }
.check-list .warn .icon { color: var(--color-warning-500); }
.check-list .bad .icon { color: var(--color-danger-500); }
.preview-box { background: var(--bg-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.preview-box .big { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* ---------- Invoice document ---------- */
.invoice-doc { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); }
.invoice-doc .doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-6); }
.invoice-doc .doc-head h2 { font-size: var(--text-2xl); }
.invoice-doc .doc-no { font-family: var(--font-mono); font-size: var(--text-md); }
.invoice-doc .parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); font-size: var(--text-sm); }
.invoice-doc .parties h4 { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.invoice-doc .totals { margin-left: auto; width: 320px; font-size: var(--text-sm); }
.invoice-doc .totals div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-default); }
.invoice-doc .totals div.grand { font-weight: var(--weight-semibold); font-size: var(--text-md); border-bottom: 0; border-top: 2px solid var(--border-strong); }
.invoice-doc .totals div.due { color: var(--color-danger-700); font-weight: var(--weight-semibold); }
.line-editor .table td { vertical-align: top; }
.line-editor .input, .line-editor .select { height: 32px; font-size: var(--text-sm); }

/* ---------- Fee run / salary run ---------- */
.run-bar { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: var(--space-4); align-items: end; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.run-bar .run-meta { font-size: var(--text-xs); color: var(--text-muted); align-self: center; }
.buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.bucket { --c: var(--color-gray-500); background: var(--bg-surface); border: 1px solid var(--border-default); border-top: 4px solid var(--c); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); cursor: pointer; }
.bucket.active { box-shadow: 0 0 0 2px var(--c); }
.bucket .b-label { font-size: var(--text-sm); color: var(--text-muted); display: flex; justify-content: space-between; }
.bucket .b-count { font-size: var(--text-2xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.bucket .b-total { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bucket.paid { --c: var(--status-paid); } .bucket.partial { --c: var(--status-partially-paid); }
.bucket.unpaid { --c: var(--status-unpaid); } .bucket.checking { --c: var(--status-needs-checking); }
.bucket.draft { --c: var(--status-draft); } .bucket.confirmed { --c: var(--status-confirmed); } .bucket.signed { --c: var(--status-signed-off); } .bucket.rejected { --c: var(--status-rejected); }
.diff-add td { background: var(--color-success-50) !important; }
.diff-del td { background: var(--color-danger-50) !important; text-decoration: line-through; color: var(--text-muted); }
.candidate { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; background: var(--bg-surface); }
.candidate.suggested { border-color: var(--color-primary-400); background: var(--color-primary-50); }
.candidate + .candidate { margin-top: 4px; }

/* ---------- Salary sheet ---------- */
.sheet-status { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
.sheet-status .stepper { flex: 1; }
.flag-reason { display: flex; gap: var(--space-2); align-items: center; }
.flag-reason .input { height: 30px; font-size: var(--text-xs); }
.sheet-total { display: flex; justify-content: flex-end; gap: var(--space-8); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); }
.sheet-total b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

/* ---------- Pending work / misc ---------- */
.age { font-variant-numeric: tabular-nums; color: var(--color-danger-700); font-weight: var(--weight-medium); }
.credit-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--color-primary-700); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.credit-pill.zero { background: var(--bg-subtle); color: var(--text-muted); }
.rate-cell { display: flex; flex-direction: column; gap: 2px; }
.rate-cell .sub { font-size: var(--text-xs); color: var(--text-muted); }
.notice { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.hl { background: var(--color-accent-50); }
.mini-table { font-size: var(--text-xs); }
.mini-table th, .mini-table td { padding: 4px 8px; }
.stat.sm .stat-value { font-size: var(--text-xl); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.progress { height: 8px; background: var(--color-gray-200); border-radius: var(--radius-full); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--color-primary-500); }
.progress.warn i { background: var(--color-warning-500); }
.progress.ok i { background: var(--color-success-500); }
.bars { display: flex; flex-direction: column; gap: 8px; font-size: var(--text-xs); }
.bars .bar-row { display: grid; grid-template-columns: 120px 1fr 70px; gap: var(--space-3); align-items: center; }
.role-note { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; }
[data-role-only][hidden], [data-role-hide][hidden] { display: none !important; }
.badge.sm { height: 18px; font-size: 10px; padding: 0 6px; }
.table td.actions { width: 1%; white-space: nowrap; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.subtotal td { background: var(--bg-subtle); font-weight: var(--weight-semibold); }
.table tbody tr.group-head td { background: var(--color-primary-50); color: var(--color-primary-700); font-weight: var(--weight-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.cal-tools { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.cal-tools .paint { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--bg-surface); cursor: pointer; font-size: var(--text-xs); }
.cal-tools .paint.active { border-color: var(--color-primary-600); box-shadow: 0 0 0 2px var(--color-primary-100); }
.cal-tools .paint i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }