:root {
  --bg: #f6f7f9;
  --panel: #fff;
  --ink: #20242a;
  --muted: #69717c;
  --line: #dfe4e8;
  --accent: #1f7a5b;
  --danger: #a93535;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #16241f; }
.login-view.is-hidden { display: none; }
.login-card { width: min(100%, 420px); display: grid; gap: 14px; border-radius: 8px; background: white; padding: 24px; box-shadow: 0 18px 45px rgba(0,0,0,.22); }
.login-brand { color: var(--ink); margin-bottom: 4px; }
.login-brand small { color: var(--muted); }
.login-card .primary { width: 100%; min-height: 46px; }
.app.is-locked { display: none; }

.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #16241f; color: white; padding: 24px; display: grid; align-content: start; gap: 28px; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: #d8efe5; color: #153b2d; font-weight: 700; }
.brand strong, .brand small { display: block; }
.brand small { color: #b8c8c1; }
nav { display: grid; gap: 8px; }
.nav { border: 0; border-radius: 8px; padding: 12px; text-align: left; background: transparent; color: #dce8e3; }
.nav.is-active, .nav:hover { background: rgba(255,255,255,.1); color: white; }

main { padding: 28px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 20px; }
.topbar p { margin: 0 0 6px; color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 13px; }
h1, h2 { margin: 0; }
.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 14px; }
.section-head label { min-width: 220px; }
.report-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; justify-content: flex-end; }
.actions { display: flex; gap: 10px; }
.actions > button:not(.primary) { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; color: var(--ink); }
.sync-status { align-self: center; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); padding: 8px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sync-status.is-saving { border-color: #d4b767; color: #806317; background: #fff9e8; }
.sync-status.is-ok { border-color: #b9d8ca; color: #245343; background: #f2faf6; }
.sync-status.is-error { border-color: #d7aaaa; color: var(--danger); background: #fff5f5; }
input, select, textarea { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: white; }
textarea { min-height: 90px; padding-top: 10px; resize: vertical; }
.primary { border: 0; border-radius: 8px; padding: 0 32px; min-width: 220px; background: var(--accent); color: white; font-weight: 700; }

#addClient {
  min-width: 320px;
  min-height: 48px;
  white-space: nowrap;
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.stats article { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.stats article:hover, .stats article.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,122,91,.12); }
.stats article:active { transform: translateY(1px); }
.stats span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.stats strong { font-size: 28px; }

.view { display: none; }
.view.is-visible { display: block; }
.task-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.today-panel { display: grid; gap: 12px; margin-bottom: 18px; }
.today-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.today-panel-head h2, .today-panel-head p { margin: 0; }
.today-panel-head p { color: var(--muted); }
.today-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; justify-content: end; }
.today-panel-actions button, .today-panel-head > button { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; color: var(--ink); }
.today-panel.is-collapsed .today-panel-body { display: none; }
.filter-stack { display: grid; gap: 8px; justify-items: end; }
.branch-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.branch-filter button { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; color: var(--ink); }
.branch-filter button:hover, .branch-filter button.is-active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px rgba(31,122,91,.12); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; gap: 12px; }
.card.is-timed-task { border-color: #d5a72c; box-shadow: inset 4px 0 0 #d5a72c, 0 0 0 2px rgba(213,167,44,.12); }
.card.is-timed-task .task-box { background: #fff8df; }
.card header { display: flex; justify-content: space-between; gap: 12px; }
.card h3 { margin: 0 0 4px; }
.status { border-radius: 999px; background: #eef3f1; color: #245343; padding: 6px 10px; font-size: 12px; font-weight: 700; height: fit-content; white-space: nowrap; }
.phone-line, .quick-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phone-line p, .card p { margin: 0; color: var(--muted); }
.client-number { font-size: 12px; font-weight: 700; color: var(--accent) !important; }
.pinned-notes { display: grid; gap: 8px; }
.pinned-note { border: 1px solid #e1bf63; border-left: 5px solid #d4a72c; border-radius: 8px; background: #fff8df; padding: 10px 12px; }
.pinned-note strong { display: block; color: #7c5600; font-size: 13px; margin-bottom: 4px; }
.pinned-note p { margin: 0; color: var(--ink); white-space: pre-wrap; }
.icon, .quick-links a, .quick-links span { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--accent); text-decoration: none; font-weight: 700; padding: 0 8px; }
.quick-links span { color: var(--muted); background: #f8faf9; }
.quick-links .is-priority { border-color: var(--accent); background: var(--accent); color: white; box-shadow: 0 0 0 2px rgba(31,122,91,.14); }
.task-box { display: grid; gap: 7px; border-radius: 8px; background: #f8faf9; padding: 12px; }
.task-box strong { display: block; }
.task-time-priority { color: #7b5800; font-size: 13px; font-weight: 800; }
.task-date.is-overdue { color: var(--danger); font-weight: 700; }
.latest { color: var(--ink); }
.card-actions button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 12px; }
.danger-action { min-height: 42px; border: 1px solid #d7aaaa; border-radius: 8px; background: #fff5f5; color: var(--danger); padding: 0 14px; font-weight: 700; justify-self: start; }
.delete-zone { display: grid; gap: 10px; justify-items: start; border-top: 1px solid var(--line); padding-top: 14px; }

.table-wrap { overflow: auto; background: white; border: 1px solid var(--line); border-radius: 8px; margin-top: 14px; }
table { width: 100%; min-width: 1360px; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 12px; text-align: left; vertical-align: top; }
th { background: #edf2f0; position: sticky; top: 0; }
.table-link, .table-note-preview { border: 0; background: transparent; color: var(--accent); padding: 0; text-align: left; font: inherit; cursor: pointer; }
.table-link { font-weight: 700; }
.table-note-preview { color: var(--ink); max-width: 320px; line-height: 1.35; }
.table-link:hover, .table-note-preview:hover { text-decoration: underline; }

.shift-status { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; margin-top: 14px; }
.shift-status strong, .shift-status span { display: block; }
.shift-status span, .shift-card p { color: var(--muted); }
.shift-status button, .shift-card button { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 14px; color: var(--ink); }
.shift-controls { display: flex; align-items: end; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.shift-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; min-width: 180px; }
.shift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.shift-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; gap: 12px; }
.shift-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,122,91,.12); }
.shift-card.wide { grid-column: 1 / -1; }
.shift-card header { display: flex; justify-content: space-between; gap: 12px; }
.shift-card h3, .shift-card p { margin: 0; }
.shift-warning { color: var(--danger); font-weight: 700; }
.shift-requests { border-color: #e6b780; background: #fffaf3; }
.shift-request { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.shift-request:first-of-type { border-top: 0; padding-top: 0; }
.shift-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.shift-table { min-width: 720px; background: white; }
.shift-table th, .shift-table td { padding: 10px 12px; }

.employee-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.employee-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; }
.employee-form legend { color: var(--muted); font-size: 13px; }
.employee-form fieldset label { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 7px; min-height: 28px; color: var(--ink); }
.employee-form input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--accent); }
.employee-list { display: grid; gap: 10px; }
.employee-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.employee-item h3, .employee-item p { margin: 0; }
.employee-item p { color: var(--muted); }
.employee-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.employee-item button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 12px; }
.employee-item button[data-delete-employee] { border-color: #d7aaaa; background: #fff5f5; color: var(--danger); }

.section-note { margin: 6px 0 0; color: var(--muted); }
.source-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.source-manager { display: grid; gap: 10px; }
.source-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.source-item.is-hidden-source { background: #f8faf9; color: var(--muted); }
.source-item strong, .source-item span { display: block; }
.source-item span { color: var(--muted); margin-top: 3px; }
.source-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.source-actions button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 12px; }

.schedule-owner-tools { display: grid; gap: 14px; margin-bottom: 16px; }
.schedule-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.schedule-form button.primary { min-width: 180px; }
.schedule-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.schedule-settings-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.schedule-settings-card h3 { margin: 0 0 10px; }
.schedule-settings-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.schedule-settings-card li { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.schedule-settings-card li:first-child { border-top: 0; padding-top: 0; }
.schedule-settings-card button, .schedule-row button { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 10px; }
.schedule-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.schedule-columns h3 { margin: 0 0 10px; }
.schedule-list { display: grid; gap: 10px; }
.schedule-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.schedule-row strong, .schedule-row span, .schedule-row small { display: block; }
.schedule-row span, .schedule-row small, .schedule-settings-card p { color: var(--muted); }
.schedule-day-list { display: grid; gap: 14px; }
.schedule-day-group h3 { margin: 0 0 10px; }
.schedule-list.compact { gap: 8px; }
.calendar-shell { overflow: auto; background: white; border: 1px solid var(--line); border-radius: 8px; }
.calendar-grid { display: grid; grid-template-columns: 72px repeat(var(--day-count), minmax(220px, 1fr)); min-width: calc(72px + var(--day-count) * 220px); }
.calendar-corner, .calendar-day-head { position: sticky; top: 0; z-index: 2; background: #edf2f0; border-bottom: 1px solid var(--line); min-height: 54px; }
.calendar-corner { left: 0; z-index: 3; border-right: 1px solid var(--line); }
.calendar-day-head { padding: 10px 12px; font-weight: 700; }
.calendar-day-head small { display: block; color: var(--muted); font-weight: 400; margin-top: 3px; }
.calendar-hours { position: sticky; left: 0; z-index: 1; display: grid; grid-template-rows: repeat(var(--hour-count), 60px) 1px; background: white; border-right: 1px solid var(--line); }
.calendar-hours span { color: var(--muted); font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.calendar-day-col { position: relative; min-height: calc(var(--hour-count) * 60px); background: linear-gradient(to bottom, transparent 59px, var(--line) 60px); background-size: 100% 60px; border-right: 1px solid var(--line); }
.calendar-event { position: absolute; left: 8px; right: 8px; overflow: hidden; display: grid; align-content: start; gap: 2px; border: 1px solid #b9d8ca; border-left: 4px solid var(--accent); border-radius: 8px; background: #f2faf6; padding: 7px 8px; }
.calendar-event strong { font-size: 13px; }
.calendar-event span, .calendar-event small { color: var(--muted); font-size: 12px; }

.report-summary { display: grid; gap: 12px; margin-bottom: 14px; }
.report-summary-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.report-summary-row.is-funnel { padding-top: 4px; }
.report-summary article { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.report-summary article[data-report-status] { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.report-summary article[data-report-status]:hover { border-color: #90a8d8; transform: translateY(-1px); }
.report-summary article[data-report-status].is-active { border-color: #4d6fb3; box-shadow: 0 0 0 3px rgba(77, 111, 179, .14); }
.report-summary span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.report-summary strong { font-size: 26px; }
.report-list { display: grid; gap: 12px; }
.report-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 16px; align-items: stretch; }
.report-item[hidden] { display: none; }
.report-item.is-missed { border-color: #ddb0a8; background: #fffafa; }
.report-item.is-processed { border-color: #b9d8ca; }
.report-item.is-info { border-color: #c9d6e8; background: #fbfdff; }
.report-item-main { min-width: 0; display: grid; gap: 12px; align-content: start; }
.report-item header { display: flex; justify-content: space-between; gap: 12px; }
.report-item h3, .report-item p, .report-item ul, .report-item small { margin: 0; }
.report-item ul { padding-left: 20px; color: var(--muted); }
.report-previous-note { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; padding: 14px; display: grid; gap: 10px; align-content: start; }
.report-previous-note > strong { font-size: 14px; }
.report-previous-note p { line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-previous-note small, .report-previous-note .muted { color: var(--muted); }
.employee-stats { display: grid; gap: 12px; margin-bottom: 14px; }
.employee-stats-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.employee-stats-head h3, .employee-stats-head p { margin: 0; }
.employee-stats-head p { color: var(--muted); }
.employee-stats-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
.employee-stats-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 72px repeat(5, minmax(120px, 1fr)); gap: 8px; align-items: center; min-width: 900px; padding: 12px 14px; border-top: 1px solid var(--line); }
.employee-stats-row.is-funnel { grid-template-columns: minmax(160px, 1.4fr) 72px repeat(4, minmax(130px, 1fr)); min-width: 800px; }
.employee-stats-row.is-retarget { grid-template-columns: minmax(180px, 1fr) 120px; min-width: 360px; }
.employee-stats-row:first-child { border-top: 0; }
.employee-stats-row.is-head { color: var(--muted); font-size: 13px; background: #f8faf9; }
.employee-stats-row strong { font-size: 20px; }
.source-stats { display: grid; gap: 12px; margin-bottom: 14px; }
.source-stats-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
.source-stats-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) 80px repeat(4, minmax(120px, 1fr)); gap: 8px; align-items: center; min-width: 760px; padding: 12px 14px; border-top: 1px solid var(--line); }
.source-stats-row:first-child { border-top: 0; }
.source-stats-row.is-head { color: var(--muted); font-size: 13px; background: #f8faf9; }
.source-stats-row.is-total { background: #f3f7f5; font-weight: 700; }
.source-stats-row strong { font-size: 20px; }
.source-stat-button { min-height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); padding: 6px 8px; text-align: left; }
.source-stat-button:not(:disabled):hover, .source-stat-button.is-active { border-color: var(--accent); background: #f2faf6; color: var(--accent); }
.source-stat-button:disabled { cursor: default; opacity: 1; }
.source-stats-detail { display: grid; gap: 8px; margin-top: 10px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.source-stats-detail h4, .source-stats-detail p { margin: 0; }
.source-stats-detail button { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 9px 12px; text-align: left; }
.source-stats-detail button:hover { border-color: var(--accent); }
.source-stats-detail span { color: var(--muted); }
.campaign-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.campaign-form textarea { resize: vertical; }
.campaign-list { display: grid; gap: 12px; }
.campaign-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 12px; }
.campaign-item header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.campaign-item header div:first-child { display: grid; gap: 4px; }
.campaign-item span, .campaign-item p { color: var(--muted); margin: 0; }
.campaign-title-button { border: 0; background: transparent; color: var(--ink); padding: 0; display: grid; gap: 4px; text-align: left; cursor: pointer; }
.campaign-title-button:hover strong { color: var(--accent); }
.campaign-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.campaign-metrics span { background: #f8faf9; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 4px; }
.campaign-metrics strong { color: var(--ink); font-size: 18px; }
.campaign-stat-button { background: #f8faf9; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 4px; color: var(--muted); text-align: left; cursor: pointer; }
.campaign-stat-button:hover, .campaign-stat-button.is-active, .campaign-report-button:hover, .campaign-report-button.is-active { border-color: var(--accent); background: #edf8f3; }
.campaign-stat-button:disabled, .campaign-report-button:disabled { cursor: default; opacity: .55; }
.campaign-report-head { margin-top: 18px; }
.campaign-report-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
.campaign-report-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(8, minmax(92px, 1fr)); gap: 8px; align-items: center; min-width: 1040px; padding: 12px 14px; border-top: 1px solid var(--line); }
.campaign-report-row:first-child { border-top: 0; }
.campaign-report-row.is-head { color: var(--muted); font-size: 13px; background: #f8faf9; }
.campaign-report-row span:first-child { display: grid; gap: 3px; }
.campaign-report-row small { color: var(--muted); }
.campaign-report-button { min-height: 38px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); padding: 6px; text-align: left; cursor: pointer; }
.campaign-report-button.is-name { display: grid; gap: 3px; }
.campaign-stats-detail { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; padding: 12px; margin-top: 10px; }
.campaign-stats-detail h4, .campaign-stats-detail p { margin: 0; }
.campaign-stats-detail button { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr); gap: 12px; align-items: center; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 9px 12px; text-align: left; }
.campaign-stats-detail button:hover { border-color: var(--accent); }
.campaign-stats-detail span { color: var(--muted); }
.event-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.event-list { display: grid; gap: 14px; }
.event-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 12px; }
.event-item header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.event-item h3, .event-item p { margin: 0; }
.event-item header div { display: grid; gap: 4px; }
.event-item header span { color: var(--muted); }
.event-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.event-totals span { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 4px; color: var(--muted); }
.event-totals strong { color: var(--ink); font-size: 20px; }
.is-profit { color: #167451 !important; }
.is-loss { color: var(--danger) !important; }
.event-entry-form { display: grid; grid-template-columns: 140px minmax(180px, 1fr) 160px auto; gap: 8px; align-items: end; }
.event-entries { display: grid; gap: 6px; }
.event-entries > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.event-entries p { color: var(--muted); }
.event-notes { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.event-notes h4, .event-note p, .event-note-list p { margin: 0; }
.event-note-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.event-note-list { display: grid; gap: 8px; }
.event-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; padding: 10px; }
.event-note small { color: var(--muted); }
.event-note p { grid-column: 1; white-space: pre-wrap; }
.event-note-actions { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; align-items: start; }
.event-note-actions button { min-height: 32px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 9px; }
.event-note-edit-form { grid-column: 1 / -1; display: grid; gap: 8px; }
.event-note-edit-form[hidden] { display: none; }
.event-note-edit-form textarea { min-height: 72px; }
.event-note-edit-form div { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.event-note-edit-form button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 12px; }
.event-note-edit-form button[type="submit"] { border-color: var(--accent); background: var(--accent); color: white; }
.regulation-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 12px; margin-bottom: 16px; }
.regulation-list { display: grid; gap: 12px; }
.regulation-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 12px; }
.regulation-item header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.regulation-item header div:first-child { display: grid; gap: 4px; }
.regulation-item h3, .regulation-item p { margin: 0; }
.regulation-item span { color: var(--muted); }
.regulation-item p { white-space: pre-wrap; line-height: 1.45; }
.regulation-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }

dialog { width: min(900px, calc(100vw - 28px)); border: 0; border-radius: 8px; padding: 0; box-shadow: 0 18px 45px rgba(25,36,52,.18); }
dialog::backdrop { background: rgba(12,20,17,.48); }
.close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 999px; font-size: 24px; }
.details { padding: 28px; display: grid; gap: 16px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button, .guard button, .guard a { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 9px 12px; text-decoration: none; color: var(--ink); }
.tabs button.is-active { background: var(--accent); border-color: var(--accent); color: white; }
.pane { display: none; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fbfcfc; }
.pane.is-visible { display: grid; gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.system-field input[readonly] { background: #edf2f0; color: var(--ink); cursor: default; font-weight: 700; }
.wide { grid-column: 1 / -1; }
.save-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.save-button { min-height: 48px; width: min(100%, 460px); justify-self: start; transition: background-color .18s ease, color .18s ease; }
.save-button.is-saving, .save-button.is-saving:disabled { background: #d4a72c; color: #30250b; opacity: 1; }
.save-progress { min-height: 20px; color: var(--muted); font-size: 13px; font-weight: 700; }
.save-progress.is-error { color: var(--danger); }
.select-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; }
.add-option { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--accent); font-size: 22px; font-weight: 700; }
.option-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-top: 8px; }
.option-editor button { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 0 10px; }
.inline-link { border: 0; background: transparent; color: var(--accent); padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.parent-link-field { position: relative; }
.parent-suggestions { display: grid; gap: 6px; }
.parent-suggestions button { text-align: left; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 9px 10px; }
.parent-link-field [data-clear-parent] { justify-self: start; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); padding: 8px 10px; }
.note { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: white; }
.note.is-pinned { border-color: #e1bf63; background: #fff8df; }
.note-pin { float: right; width: 34px; height: 34px; border: 1px solid #e1bf63; border-radius: 8px; background: white; color: #a06d00; font-size: 20px; line-height: 1; }
.note small { color: var(--muted); }
.note-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.note-add { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--accent); font-size: 24px; font-weight: 700; line-height: 1; }
.note-composer { display: grid; gap: 10px; }
.note-composer[hidden] { display: none; }
.note-list { display: grid; gap: 10px; }
.guard:not(:empty) { border: 1px solid #e6b780; border-radius: 8px; background: #fff7ed; padding: 14px; display: grid; gap: 12px; }
.guard-actions, .checks { display: flex; flex-wrap: wrap; gap: 8px; }
.error { color: var(--danger); font-weight: 700; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .topbar, .actions { align-items: stretch; flex-direction: column; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section-head { align-items: stretch; flex-direction: column; }
  .report-controls { align-items: stretch; flex-direction: column; }
  .task-toolbar { align-items: stretch; flex-direction: column; }
  .today-panel-head, .today-panel-actions { align-items: stretch; flex-direction: column; }
  .filter-stack { justify-items: stretch; }
  .report-summary-row { grid-template-columns: repeat(2, 1fr); }
  .report-item { grid-template-columns: 1fr; }
  .shift-status { align-items: stretch; flex-direction: column; }
  .shift-grid { grid-template-columns: 1fr; }
  .employee-form { grid-template-columns: 1fr; }
  .schedule-form, .schedule-settings, .schedule-columns { grid-template-columns: 1fr; }
  .schedule-row { align-items: stretch; flex-direction: column; }
  .campaign-form { grid-template-columns: 1fr; }
  .event-form, .event-entry-form, .event-note-form, .event-totals, .regulation-form { grid-template-columns: 1fr; }
  .campaign-stats-detail button { grid-template-columns: 1fr; gap: 4px; }
  .employee-item { align-items: stretch; flex-direction: column; }
  .source-form { grid-template-columns: 1fr; }
  .source-item { align-items: stretch; flex-direction: column; }
  .source-actions { justify-content: start; }
  .form-grid { grid-template-columns: 1fr; }
}