.supervision-view { color: var(--ink); display: grid; gap: 1.2rem; margin: 0 auto; max-width: 1440px; }
.supervision-header { display: grid; gap: .45rem; }
.supervision-header h1 { font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.04em; margin: 0; }
.supervision-eyebrow { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .15em; margin: 0; }
.supervision-note { color: var(--muted); font-size: .84rem; line-height: 1.5; margin: .4rem 0; }
.supervision-panel, .supervision-selection { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; padding: 1.2rem; }
.supervision-panel h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.supervision-status { background: var(--surface-2); border-left: 4px solid var(--accent); border-radius: 8px; font-size: .88rem; line-height: 1.5; margin: 0; padding: .9rem 1rem; }
.supervision-status--stale { border-color: var(--warning); }
.supervision-status--forbidden, .supervision-status--unavailable { border-color: var(--danger); }
.supervision-selection { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.supervision-selection label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 650; min-width: 0; }
.supervision-selection label[hidden] { display: none; }
.supervision-selection input, .supervision-selection select, .supervision-selection textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); min-height: 42px; padding: .6rem; width: 100%; }
.supervision-selection .supervision-note, .supervision-form-error, .supervision-actions { grid-column: 1 / -1; }
.supervision-form-error { color: var(--danger); font-size: .85rem; margin: 0; }
.supervision-form-error:empty { display: none; }
.supervision-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.supervision-button, .supervision-pages button { background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; color: #fff; font-size: .84rem; font-weight: 650; min-height: 40px; padding: .6rem .9rem; }
.supervision-button--secondary, .supervision-pages button { background: var(--surface); border-color: var(--line); color: var(--ink); }
.supervision-button:disabled, .supervision-pages button:disabled { opacity: .55; }
.supervision-facts { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: .9rem 0; }
.supervision-facts > div { background: var(--surface-2); border-radius: 8px; display: grid; gap: .3rem; min-width: 0; padding: .75rem; }
.supervision-facts dt { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.supervision-facts dd { font-size: .86rem; font-variant-numeric: tabular-nums; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.supervision-detail { font-size: .83rem; margin-top: .65rem; }
.supervision-detail summary { color: var(--accent); cursor: pointer; font-weight: 650; line-height: 1.5; }
.supervision-reasons { display: grid; gap: .45rem; line-height: 1.45; margin: .65rem 0; padding-left: 1.2rem; }
.supervision-reasons li { min-width: 0; }
.supervision-reasons span, .supervision-reasons code { display: block; }
.supervision-reasons code { color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.supervision-scroll { margin-top: .8rem; overflow-x: auto; }
.supervision-table { border-collapse: collapse; font-size: .78rem; min-width: 760px; text-align: left; width: 100%; }
.supervision-table th, .supervision-table td { border-bottom: 1px solid var(--line); line-height: 1.5; max-width: 420px; min-width: 120px; overflow-wrap: anywhere; padding: .75rem .65rem; vertical-align: top; }
.supervision-table th { background: var(--surface-2); color: var(--muted); font-size: .72rem; }
.supervision-table .supervision-facts { display: block; margin: .4rem 0; }
.supervision-table .supervision-facts > div { margin-top: .4rem; padding: .5rem; }
.supervision-table .supervision-facts dt { font-size: .7rem; }
.supervision-table .supervision-facts dd { font-size: .75rem; }
.supervision-pages { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; margin-top: .9rem; }
.supervision-pages span { color: var(--muted); font-size: .76rem; }
.supervision-visually-hidden { clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
@media (max-width: 600px) { .supervision-selection { grid-template-columns: 1fr; } .supervision-panel, .supervision-selection { padding: 1rem; } .supervision-facts { grid-template-columns: 1fr; } }

.supervision-view { min-width: 0; }
.supervision-header h1 { font-size: clamp(26px, 3vw, 34px); }
.supervision-panel, .supervision-selection { box-shadow: 0 4px 20px rgb(15 23 42 / 3%); }
.supervision-selection input, .supervision-selection select, .supervision-selection textarea { border-radius: 10px; }
.supervision-button, .supervision-pages button { border-radius: 11px; }
.supervision-button:hover:enabled { background: #4338ca; }
.supervision-button--secondary:hover:enabled, .supervision-pages button:hover:enabled { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.supervision-facts > div { background: var(--bg, #f8fafc); border: 1px solid var(--line); border-radius: 11px; }
.supervision-scroll { max-width: 100%; border: 1px solid var(--line); border-radius: 11px; }
.supervision-table th { background: var(--bg, #f8fafc); }
.supervision-age { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; margin: -.8rem 0 0; }
.supervision-day-controls { align-items: end; display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.supervision-day-controls label { display: grid; gap: .35rem; font-size: .82rem; font-weight: 650; }
.supervision-day-controls input { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); min-height: 42px; padding: .5rem .7rem; }
.supervision-day-controls button { flex: 0 0 auto; }
.supervision-panel h3 { font-size: .95rem; margin: 1.4rem 0 .4rem; }
.supervision-operator-list { display: grid; gap: .5rem; list-style: none; margin: .9rem 0 0; padding: 0; }
.supervision-operator { align-items: center; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) auto auto; padding: .7rem .85rem; }
.supervision-operator-name { font-weight: 650; overflow-wrap: anywhere; }
.supervision-operator-state { border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; padding: .3rem .6rem; white-space: nowrap; }
.supervision-operator-state--busy, .supervision-operator-state--reserved { background: #e0e7ff; color: #3730a3; }
.supervision-operator-state--paused, .supervision-operator-state--wrap_up { background: #fef3c7; color: #92400e; }
.supervision-operator-duration { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { .supervision-operator { grid-template-columns: 1fr auto; } .supervision-operator-duration { grid-column: 1 / -1; } .supervision-table { min-width: 720px; } }