:root {
  --ink: #17231f;
  --muted: #66726d;
  --soft-muted: #87918d;
  --brand: #18342b;
  --brand-2: #284c3e;
  --brand-soft: #e8f0ec;
  --sage: #718f7f;
  --sage-soft: #edf3ef;
  --amber: #bd8332;
  --amber-soft: #fbf2e2;
  --danger: #a44c46;
  --danger-soft: #faecea;
  --blue: #3d718a;
  --blue-soft: #eaf3f7;
  --surface: #ffffff;
  --surface-2: #f8f8f4;
  --canvas: #f1f2ed;
  --line: #dfe3dc;
  --line-strong: #cfd5ce;
  --shadow: 0 10px 30px rgba(27, 45, 37, .08);
  --shadow-soft: 0 3px 12px rgba(27, 45, 37, .06);
  --radius: 18px;
  --radius-sm: 11px;
  --sidebar: 244px;
  --topbar: 104px;
  --touch: 44px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(61, 113, 138, .28);
  outline-offset: 2px;
}
[hidden] { display: none !important; }

.offline-banner, .update-banner {
  position: fixed; z-index: 2000; left: var(--sidebar); right: 0; top: 0;
  min-height: 34px; padding: 7px 18px; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13px; font-weight: 650;
}
.offline-banner { background: #f7e5bd; color: #664612; }
.update-banner { background: var(--brand); color: white; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1000; width: var(--sidebar); padding: 20px 16px 16px;
  display: flex; flex-direction: column; background: #142b24; color: #f7faf8; border-right: 1px solid rgba(255,255,255,.06);
}
.brand-block { display: flex; align-items: center; gap: 12px; padding: 3px 5px 18px; }
.brand-icon { border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.brand-name { font-size: 16px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.brand-subtitle { margin-top: 4px; font-size: 11px; color: rgba(255,255,255,.62); }
.house-brief {
  margin: 1px 2px 18px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px;
  background: rgba(255,255,255,.06); display: grid; gap: 3px;
}
.house-brief-label { color: rgba(255,255,255,.56); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.house-brief strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.house-brief small { color: rgba(255,255,255,.65); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav { display: grid; gap: 4px; }
.nav-item {
  width: 100%; min-height: 45px; border: 0; border-radius: 11px; padding: 0 12px; display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 9px; background: transparent;
  color: rgba(255,255,255,.72); text-align: left; cursor: pointer; transition: .16s ease;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: white; }
.nav-item.active { background: rgba(255,255,255,.13); color: white; box-shadow: inset 3px 0 0 #a9c4b6; }
.nav-icon { font-size: 19px; text-align: center; line-height: 1; }
.nav-count { min-width: 24px; padding: 3px 7px; border-radius: 99px; text-align: center; background: rgba(255,255,255,.12); font-size: 11px; }
.sidebar-footer { margin-top: auto; padding: 14px 6px 2px; display: grid; gap: 8px; border-top: 1px solid rgba(255,255,255,.09); }
.status-line { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font-size: 11px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #75b38f; box-shadow: 0 0 0 3px rgba(117,179,143,.13); }
.status-dot.offline { background: #d2a55a; }
.status-dot.error { background: #da756d; }
.status-dot.muted { background: #879c93; }
.sidebar-sync { min-height: 38px; margin-top: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: transparent; color: white; cursor: pointer; }
.sidebar-sync:hover { background: rgba(255,255,255,.08); }

.workspace { grid-column: 2; min-width: 0; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 800; min-height: var(--topbar); padding: 20px clamp(20px, 3vw, 42px) 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(241,242,237,.92);
  border-bottom: 1px solid rgba(207,213,206,.8); backdrop-filter: blur(16px);
}
.topbar-title { min-width: 0; }
.eyebrow { margin-bottom: 5px; color: var(--sage); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.topbar h1 { margin: 0; font-size: clamp(24px, 3vw, 31px); line-height: 1.05; letter-spacing: -.035em; }
.topbar p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.save-state { max-width: 180px; color: var(--soft-muted); font-size: 11px; text-align: right; }
.icon-button {
  width: var(--touch); height: var(--touch); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer;
  display: inline-grid; place-items: center; font-size: 20px; box-shadow: var(--shadow-soft);
}
.icon-button:hover { border-color: var(--sage); background: var(--sage-soft); }
.button {
  min-height: var(--touch); border: 1px solid transparent; border-radius: 12px; padding: 0 16px; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; font-weight: 750; font-size: 13px; cursor: pointer; text-decoration: none; transition: .16s ease;
}
.button:disabled { opacity: .5; cursor: not-allowed; }
.button-primary { background: var(--brand); color: white; box-shadow: 0 7px 18px rgba(24,52,43,.17); }
.button-primary:hover { background: #204438; transform: translateY(-1px); }
.button-secondary { background: var(--surface); color: var(--brand); border-color: var(--line-strong); }
.button-secondary:hover { border-color: var(--sage); background: var(--sage-soft); }
.button-danger { background: var(--danger); color: white; }
.button-ghost { background: transparent; color: var(--brand); border-color: transparent; }
.button-ghost:hover { background: var(--brand-soft); }
.button-light { background: rgba(255,255,255,.15); color: white; border-color: rgba(255,255,255,.25); }
.button-small { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
.button-icon { width: 38px; min-height: 38px; padding: 0; }

.view-root { width: 100%; max-width: 1540px; margin: 0 auto; padding: 24px clamp(18px, 3vw, 42px) 62px; }
.view-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.grid { display: grid; gap: 16px; min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-full { grid-column: 1 / -1; }

.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.card-pad { padding: 20px; }
.card-header { min-width: 0; padding: 18px 20px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-header h2, .card-header h3 { margin: 0; letter-spacing: -.02em; }
.card-header h2 { font-size: 18px; }
.card-header h3 { font-size: 15px; }
.card-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.card-body { min-width: 0; padding: 0 20px 20px; }
.card-divider { border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; }
.section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

.hero-card {
  min-width: 0; min-height: 210px; padding: 26px; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,.6fr); gap: 22px;
  border-radius: 23px; background: linear-gradient(135deg, #17352b 0%, #24483b 65%, #35604f 100%); color: white; box-shadow: var(--shadow);
}
.hero-main { min-width: 0; display: grid; align-content: space-between; gap: 24px; }
.hero-title { display: flex; align-items: center; gap: 15px; }
.health-ring {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(#a9c9b8 var(--health, 75%), rgba(255,255,255,.13) 0); position: relative;
}
.health-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #204438; }
.health-ring strong { position: relative; font-size: 24px; }
.hero-copy h2 { margin: 0; font-size: clamp(22px, 3vw, 31px); letter-spacing: -.035em; }
.hero-copy p { max-width: 680px; margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-side { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; align-content: center; }
.hero-mini { padding: 15px; min-height: 84px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(255,255,255,.07); }
.hero-mini strong { display: block; font-size: 25px; letter-spacing: -.04em; }
.hero-mini span { display: block; margin-top: 5px; color: rgba(255,255,255,.65); font-size: 11px; }

.metric-card { min-height: 120px; padding: 17px 18px; display: grid; align-content: space-between; }
.metric-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.metric-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sage-soft); color: var(--brand); }
.metric-value { margin-top: 14px; font-size: 28px; font-weight: 820; letter-spacing: -.04em; }
.metric-note { margin-top: 3px; color: var(--soft-muted); font-size: 10px; }
.metric-card.danger .metric-icon { background: var(--danger-soft); color: var(--danger); }
.metric-card.warning .metric-icon { background: var(--amber-soft); color: #8a5d1c; }
.metric-card.info .metric-icon { background: var(--blue-soft); color: var(--blue); }

.attention-list, .plain-list { display: grid; gap: 8px; }
.attention-item {
  min-height: 64px; padding: 10px 12px; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 13px; background: #fbfbf8; cursor: pointer;
}
.attention-item:hover { border-color: #bfc9c2; background: white; }
.attention-item.has-actions { grid-template-columns: 8px minmax(0,1fr) auto auto; }
.attention-item.has-actions .attention-bar { grid-column: 1; grid-row: 1; }
.attention-item.has-actions .attention-copy { grid-column: 2; grid-row: 1; }
.attention-item.has-actions .attention-date { grid-column: 3; grid-row: 1; }
.attention-item.has-actions .calendar-task-actions { grid-column: 4; grid-row: 1; }
.attention-item.done .attention-copy strong { text-decoration: line-through; text-decoration-color: #9da8a2; }
.attention-item.done, .attention-item.cancelled { background: #f7f8f5; }
.attention-item.cancelled .attention-copy strong { color: var(--muted); }
.attention-bar { align-self: stretch; border-radius: 99px; background: var(--sage); }
.attention-item.overdue .attention-bar { background: var(--danger); }
.attention-item.today .attention-bar { background: var(--amber); }
.attention-copy { min-width: 0; }
.attention-copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.attention-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.attention-date { color: var(--muted); font-size: 11px; text-align: right; }
.empty-state { padding: 32px 18px; text-align: center; color: var(--muted); }
.empty-state-icon { width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 15px; display: grid; place-items: center; background: var(--sage-soft); color: var(--brand); font-size: 24px; }
.empty-state strong { display: block; color: var(--ink); font-size: 14px; }
.empty-state p { max-width: 460px; margin: 7px auto 0; font-size: 12px; line-height: 1.5; }

.workload-chart { width: 100%; max-width: 100%; min-width: 0; min-height: 180px; display: grid; grid-template-columns: repeat(14, minmax(18px,1fr)); gap: 7px; align-items: end; padding-top: 8px; }
.workload-day { min-width: 0; display: grid; grid-template-rows: 1fr auto auto; gap: 5px; align-items: end; text-align: center; }
.workload-bar-wrap { height: 115px; display: flex; align-items: end; justify-content: center; }
.workload-bar { width: min(22px, 72%); min-height: 4px; border-radius: 7px 7px 3px 3px; background: linear-gradient(#6f9a84, #3f6d59); }
.workload-day strong { font-size: 10px; }
.workload-day small { color: var(--soft-muted); font-size: 9px; }
.workload-day.today strong { color: var(--brand); }
.workload-day.today .workload-bar { background: linear-gradient(#d0a150, #a76e20); }

.system-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.system-card { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fbfbf8; }
.system-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.system-card strong { font-size: 12px; }
.system-card span { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.category-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat-color, var(--sage)); }
.recommendation { min-width: 0; padding: 20px; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 16px; background: var(--amber-soft); border-color: #ead6ad; }
.recommendation-icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: rgba(189,131,50,.14); color: #875a1e; font-size: 25px; }
.recommendation h3 { margin: 0; font-size: 15px; }
.recommendation p { margin: 5px 0 0; color: #725b37; font-size: 12px; line-height: 1.5; }

.toolbar { padding: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.search-box { position: relative; flex: 1 1 260px; }
.search-box input { width: 100%; min-height: 42px; padding: 0 13px 0 37px; border: 1px solid var(--line); border-radius: 11px; background: #fbfbf8; color: var(--ink); }
.search-box::before { content: "⌕"; position: absolute; left: 13px; top: 9px; color: var(--soft-muted); font-size: 18px; }
.select-control, .input-control {
  min-height: 42px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; background: white; color: var(--ink);
}
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: #f5f6f2; }
.segmented button { min-height: 34px; border: 0; border-radius: 8px; padding: 0 12px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }
.segmented button.active { background: white; color: var(--brand); box-shadow: 0 2px 8px rgba(20,43,36,.08); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { min-height: 34px; border: 1px solid var(--line); border-radius: 99px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: white; color: var(--muted); font-size: 11px; cursor: pointer; }
.pill.active { border-color: #97af9f; background: var(--sage-soft); color: var(--brand); }
.pill-count { min-width: 19px; height: 19px; border-radius: 99px; display: grid; place-items: center; background: rgba(0,0,0,.06); font-size: 9px; }
.bulk-bar { padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--brand-soft); border: 1px solid #ccddd3; border-radius: 13px; }
.bulk-bar strong { font-size: 12px; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.task-groups { display: grid; gap: 16px; }
.task-group { display: grid; gap: 7px; }
.task-group-title { padding: 0 3px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.task-list { overflow: hidden; }
.task-row {
  min-height: 70px; padding: 10px 12px; display: grid; grid-template-columns: 28px 7px minmax(0, 1.6fr) minmax(100px,.65fr) 90px auto;
  align-items: center; gap: 11px; border-bottom: 1px solid var(--line); background: white;
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: #fbfcf9; }
.task-row.selected { background: var(--brand-soft); }
.task-row.done { opacity: .77; }
.task-row.done .task-title { text-decoration: line-through; text-decoration-color: #9da8a2; }
.task-row.cancelled { background: #f7f8f5; }
.task-row.cancelled .task-title { color: var(--muted); }
.task-select { width: 18px; height: 18px; accent-color: var(--brand); }
.task-stripe { align-self: stretch; min-height: 42px; border-radius: 99px; background: var(--cat-color, var(--sage)); }
.task-main { min-width: 0; }
.task-title { width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 0; background: transparent; text-align: left; font-size: 13px; font-weight: 760; cursor: pointer; }
.task-title:hover { color: var(--brand-2); }
.task-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--muted); font-size: 10px; }
.task-zone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.task-date { text-align: right; }
.task-date strong { display: block; font-size: 11px; }
.task-date small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.task-date.overdue strong { color: var(--danger); }
.task-actions { display: flex; justify-content: end; gap: 4px; }
.row-action { width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.row-action:hover { border-color: var(--line); background: white; color: var(--brand); }
.row-action.complete:hover { background: var(--sage-soft); color: var(--brand); }
.row-action.danger:hover { background: var(--danger-soft); color: var(--danger); }
.badge { min-height: 21px; padding: 2px 7px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; background: #f0f2ef; color: var(--muted); font-size: 9px; font-weight: 750; }
.badge.high, .badge.urgent { background: var(--danger-soft); color: var(--danger); }
.badge.today { background: var(--amber-soft); color: #875b1d; }
.badge.done { background: var(--sage-soft); color: var(--brand); }
.badge.cancelled { background: #eceeea; color: #626b66; }

.calendar-shell { display: grid; gap: 15px; }
.calendar-toolbar { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.calendar-nav { display: flex; align-items: center; gap: 6px; }
.calendar-period { min-width: 190px; text-align: center; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.calendar-filters { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.month-calendar { overflow: hidden; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-bottom: 1px solid var(--line); background: #f7f8f4; }
.calendar-weekdays div { padding: 10px 8px; color: var(--muted); text-align: center; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.calendar-cell { min-height: 118px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; cursor: pointer; min-width: 0; }
.calendar-cell:nth-child(7n) { border-right: 0; }
.calendar-cell:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-cell:hover { background: #fafbf8; }
.calendar-cell.outside { background: #f8f8f5; color: #a7aeaa; }
.calendar-cell.selected { box-shadow: inset 0 0 0 2px var(--sage); background: var(--sage-soft); }
.calendar-cell.today .calendar-day-number { background: var(--brand); color: white; }
.calendar-cell-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.calendar-day-number { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.calendar-count { color: var(--muted); font-size: 9px; }
.calendar-events { margin-top: 6px; display: grid; gap: 4px; }
.calendar-event { min-width: 0; padding: 4px 6px; border-left: 3px solid var(--cat-color, var(--sage)); border-radius: 5px; background: #f5f7f4; color: var(--ink); font-size: 9px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.done { opacity: .55; text-decoration: line-through; }
.calendar-event.cancelled { opacity: .62; background: #eceeea; color: var(--muted); }
.calendar-more { color: var(--muted); font-size: 9px; }
.week-calendar { display: grid; grid-template-columns: repeat(7, minmax(150px,1fr)); overflow-x: auto; }
.week-column { min-height: 520px; border-right: 1px solid var(--line); background: white; }
.week-column:last-child { border-right: 0; }
.week-header { position: sticky; top: 0; padding: 12px 10px; border-bottom: 1px solid var(--line); background: #f7f8f4; text-align: center; }
.week-header strong { display: block; font-size: 12px; }
.week-header small { color: var(--muted); font-size: 10px; }
.week-column.today .week-header { background: var(--brand-soft); color: var(--brand); }
.week-events { padding: 8px; display: grid; gap: 7px; }
.week-event { padding: 9px; border: 1px solid var(--line); border-left: 4px solid var(--cat-color, var(--sage)); border-radius: 10px; background: white; cursor: pointer; }
.week-event:hover { box-shadow: var(--shadow-soft); }
.week-event.has-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; }
.week-event-copy { min-width: 0; }
.week-event.done .week-event-copy strong { text-decoration: line-through; text-decoration-color: #9da8a2; }
.week-event.done, .week-event.cancelled { background: #f7f8f5; }
.week-event.cancelled .week-event-copy strong { color: var(--muted); }
.week-event strong { display: block; font-size: 11px; line-height: 1.35; }
.week-event small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.day-calendar { padding: 6px; display: grid; gap: 8px; }
.day-event { padding: 13px; display: grid; grid-template-columns: 56px 7px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.day-time { color: var(--muted); font-size: 11px; text-align: center; }
.day-time small { display: block; margin-top: 4px; font-size: 9px; line-height: 1.25; }
.day-stripe { align-self: stretch; border-radius: 99px; background: var(--cat-color, var(--sage)); }
.day-copy strong { display: block; font-size: 13px; }
.day-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.day-event.done .day-copy strong { text-decoration: line-through; text-decoration-color: #9da8a2; }
.day-event.done, .day-event.cancelled { background: #f7f8f5; }
.day-event.cancelled .day-copy strong { color: var(--muted); }
.calendar-task-actions { display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; justify-content: end; }
.calendar-action { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; background: white; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.calendar-action:hover, .calendar-action:focus-visible { border-color: #aebdb4; background: var(--brand-soft); color: var(--brand); outline: none; }
.calendar-action.complete { color: var(--brand); }
.calendar-action.cancel { color: #875b1d; }
.calendar-action.danger { color: var(--danger); }
.calendar-action.danger:hover, .calendar-action.danger:focus-visible { border-color: #e2bbb7; background: var(--danger-soft); color: var(--danger); }
.selected-day-card { padding: 16px; }
.selected-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.selected-day-head h3 { margin: 0; font-size: 15px; }
.overdue-notice { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--danger-soft); border: 1px solid #edc9c5; border-radius: 13px; color: #7a3935; }
.overdue-notice strong { font-size: 12px; }

.tabs { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
.tab-button { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 13px; background: white; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.tab-button.active { border-color: var(--sage); background: var(--brand-soft); color: var(--brand); }
.property-overview { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.info-list { display: grid; gap: 0; }
.info-row { padding: 11px 0; display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 14px; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-row span { color: var(--muted); font-size: 11px; }
.info-row strong { font-size: 12px; font-weight: 700; }
.entity-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.entity-card { padding: 14px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.entity-card:hover { border-color: #bfc9c2; }
.entity-card-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.entity-card strong { font-size: 12px; }
.entity-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.entity-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.entity-card-actions { display: flex; justify-content: end; gap: 5px; }

.journal-row { padding: 12px 14px; display: grid; grid-template-columns: 92px 7px minmax(0,1.5fr) minmax(110px,.7fr) 80px 90px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.journal-row:last-child { border-bottom: 0; }
.journal-date strong { display: block; font-size: 11px; }
.journal-date small { color: var(--muted); font-size: 9px; }
.journal-main strong { display: block; font-size: 12px; }
.journal-main small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-zone, .journal-number { color: var(--muted); font-size: 10px; }
.journal-number { text-align: right; }

.progress-list { display: grid; gap: 12px; }
.progress-row { display: grid; grid-template-columns: 130px minmax(0,1fr) 45px; align-items: center; gap: 11px; }
.progress-row span { font-size: 11px; }
.progress-track { height: 8px; border-radius: 99px; background: #edf0ec; overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--cat-color, var(--sage)); }
.progress-value { color: var(--muted); font-size: 10px; text-align: right; }
.analytics-table { width: 100%; border-collapse: collapse; }
.analytics-table th, .analytics-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; }
.analytics-table th { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.analytics-table td:last-child, .analytics-table th:last-child { text-align: right; }

.settings-layout { display: grid; grid-template-columns: minmax(180px,.34fr) minmax(0,1fr); gap: 18px; align-items: start; }
.settings-nav { position: sticky; top: 126px; padding: 8px; display: grid; gap: 4px; }
.settings-nav button { min-height: 40px; border: 0; border-radius: 9px; padding: 0 11px; background: transparent; color: var(--muted); text-align: left; font-size: 11px; font-weight: 700; cursor: pointer; }
.settings-nav button.active { background: var(--brand-soft); color: var(--brand); }
.settings-pane { display: grid; gap: 15px; }
.settings-section { overflow: hidden; }
.settings-section > summary { list-style: none; min-height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 780; font-size: 13px; }
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after { content: "⌄"; color: var(--muted); font-size: 18px; transition: transform .18s ease; }
.settings-section[open] > summary::after { transform: rotate(180deg); }
.settings-content { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.settings-intro { margin: 14px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.status-card { padding: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafbf8; }
.status-card strong { display: block; font-size: 12px; }
.status-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.status-chip { padding: 5px 9px; border-radius: 99px; background: var(--sage-soft); color: var(--brand); font-size: 9px; font-weight: 800; }
.status-chip.warn { background: var(--amber-soft); color: #855a1e; }
.status-chip.error { background: var(--danger-soft); color: var(--danger); }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.field { display: grid; gap: 6px; min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field.span-3 { grid-column: span 3; }
.field label { color: var(--muted); font-size: 10px; font-weight: 750; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 43px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 11px; background: white; color: var(--ink);
}
.field textarea { min-height: 86px; resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(113,143,127,.13); outline: none; }
.field-help { color: var(--soft-muted); font-size: 9px; line-height: 1.4; }
.checkbox-field { min-height: 43px; display: flex; align-items: center; gap: 9px; }
.checkbox-field input { width: 18px; height: 18px; accent-color: var(--brand); }

.standard-list { display: grid; gap: 7px; max-height: 470px; overflow: auto; padding-right: 2px; }
.standard-row { padding: 10px 11px; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.standard-row.inactive { opacity: .58; }
.standard-copy strong { display: block; font-size: 11px; }
.standard-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.standard-actions { display: flex; gap: 4px; }
.assignee-list { display: grid; gap: 7px; }
.assignee-row { min-height: 58px; padding: 10px 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.assignee-row.inactive { opacity: .58; background: #f7f8f5; }
.assignee-row strong { display: block; font-size: 11px; }
.assignee-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }

.diagnostic-list { display: grid; gap: 6px; }
.diagnostic-row { padding: 9px 10px; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fbfbf8; }
.diagnostic-icon { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-soft); color: var(--brand); font-size: 10px; font-weight: 900; }
.diagnostic-row.fail .diagnostic-icon { background: var(--danger-soft); color: var(--danger); }
.diagnostic-row strong { font-size: 10px; }
.diagnostic-row small { color: var(--muted); font-size: 9px; }

.app-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(90vh, 900px); padding: 0; border: 0; border-radius: 20px; background: transparent; box-shadow: var(--shadow); }
.app-dialog::backdrop { background: rgba(11,25,20,.48); backdrop-filter: blur(4px); }
.dialog-shell { max-height: min(90vh,900px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: white; border-radius: 20px; overflow: hidden; }
.dialog-header { min-height: 72px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.dialog-close { width: 40px; height: 40px; border: 0; border-radius: 11px; background: #f2f4f1; color: var(--muted); font-size: 24px; cursor: pointer; }
.dialog-body { min-height: 0; overflow: auto; padding: 20px; }
.dialog-footer { min-height: 70px; padding: 12px 20px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); background: #fafbf8; }
.dialog-note { padding: 11px 12px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-size: 10px; line-height: 1.5; }

.toast-stack { position: fixed; z-index: 3000; right: 18px; bottom: 18px; width: min(360px, calc(100vw - 36px)); display: grid; gap: 8px; }
.toast { padding: 12px 14px; border-radius: 12px; background: #17342a; color: white; box-shadow: var(--shadow); font-size: 11px; line-height: 1.45; animation: toast-in .22s ease both; }
.toast.error { background: #833f3b; }
.toast.warn { background: #7a581f; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.bottom-nav { display: none; }

.cat-home { --cat-color: #486A5A; }
.cat-garden { --cat-color: #668A50; }
.cat-pool { --cat-color: #3D7C91; }
.cat-water { --cat-color: #4A759A; }
.cat-septic { --cat-color: #806D55; }
.cat-irrigation { --cat-color: #5F8D7A; }
.cat-equipment { --cat-color: #6D6F7C; }
.cat-energy { --cat-color: #A3782B; }
.cat-safety { --cat-color: #9A554B; }
.cat-documents { --cat-color: #70649A; }
.cat-other { --cat-color: #6C757D; }

@media (max-width: 1180px) {
  :root { --sidebar: 218px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .entity-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .task-row { grid-template-columns: 28px 7px minmax(0,1.5fr) 95px 82px auto; }
  .task-zone { display: none; }
  .journal-row { grid-template-columns: 80px 7px minmax(0,1fr) 72px 76px; }
  .journal-zone { display: none; }
}

@media (max-width: 900px) {
  :root { --topbar: 92px; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .workspace { min-height: 100vh; }
  .offline-banner, .update-banner { left: 0; }
  .topbar { padding: 14px 16px 12px; min-height: var(--topbar); }
  .topbar p { display: none; }
  .save-state { display: none; }
  .topbar-actions .icon-button { display: none; }
  .topbar-actions .button { min-width: 44px; width: 44px; padding: 0; font-size: 0; }
  .topbar-actions .button span { font-size: 20px; }
  .view-root { padding: 16px 14px calc(92px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    position: fixed; z-index: 1200; left: 0; right: 0; bottom: 0; min-height: calc(66px + env(safe-area-inset-bottom));
    padding: 6px 7px max(6px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); background: rgba(255,255,255,.96);
    border-top: 1px solid var(--line); box-shadow: 0 -5px 24px rgba(30,46,39,.08); backdrop-filter: blur(18px);
  }
  .bottom-nav button { min-width: 0; min-height: 52px; border: 0; border-radius: 11px; display: grid; place-items: center; align-content: center; gap: 2px; background: transparent; color: var(--muted); cursor: pointer; }
  .bottom-nav button span { font-size: 19px; line-height: 1; }
  .bottom-nav button small { font-size: 9px; }
  .bottom-nav button.active { background: var(--brand-soft); color: var(--brand); }
  .hero-card { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 20px; }
  .hero-side { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .hero-mini { min-height: 72px; padding: 11px; }
  .hero-mini strong { font-size: 21px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .property-overview { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; }
  .settings-nav button { white-space: nowrap; }
  .workload-chart { overflow-x: auto; grid-template-columns: repeat(14, 38px); }
  .system-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recommendation { grid-template-columns: 44px minmax(0,1fr); }
  .recommendation .button { grid-column: 1 / -1; }
  .calendar-cell { min-height: 96px; padding: 6px; }
  .calendar-event { font-size: 8px; }
  .settings-nav { padding: 6px; }
}

@media (max-width: 620px) {
  .topbar-title .eyebrow { display: none; }
  .topbar h1 { font-size: 22px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .metric-card { min-height: 104px; padding: 13px; }
  .metric-value { font-size: 24px; }
  .hero-title { align-items: flex-start; }
  .health-ring { width: 70px; height: 70px; }
  .health-ring strong { font-size: 20px; }
  .hero-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .toolbar { align-items: stretch; }
  .search-box { flex-basis: 100%; }
  .select-control { flex: 1 1 130px; min-width: 0; }
  .task-row { min-height: 84px; padding: 10px; grid-template-columns: 23px 6px minmax(0,1fr) auto; gap: 8px; }
  .task-zone, .task-date { display: none; }
  .task-actions { gap: 1px; }
  .row-action { width: 32px; height: 32px; }
  .task-meta { gap: 4px 7px; }
  .calendar-toolbar { align-items: stretch; }
  .calendar-nav { width: 100%; justify-content: space-between; }
  .calendar-period { min-width: 0; flex: 1; }
  .calendar-weekdays div { padding: 8px 2px; font-size: 8px; }
  .calendar-cell { min-height: 82px; padding: 4px; }
  .calendar-day-number { width: 22px; height: 22px; font-size: 9px; }
  .calendar-count { display: none; }
  .calendar-events { gap: 2px; margin-top: 3px; }
  .calendar-event { min-height: 5px; padding: 0; border-left: 0; border-radius: 99px; background: var(--cat-color, var(--sage)); color: transparent; }
  .calendar-event:nth-child(n+4) { display: none; }
  .calendar-more { display: none; }
  .day-event { grid-template-columns: 46px 6px minmax(0,1fr) auto; gap: 8px; }
  .calendar-task-actions { grid-template-columns: repeat(2, 29px); gap: 3px; }
  .calendar-action { width: 29px; height: 29px; }
  .attention-item.has-actions { grid-template-columns: 7px minmax(0,1fr) auto; gap: 8px; }
  .attention-item.has-actions .attention-bar { grid-column: 1; grid-row: 1 / span 2; }
  .attention-item.has-actions .attention-copy { grid-column: 2; grid-row: 1; }
  .attention-item.has-actions .attention-date { grid-column: 2; grid-row: 2; text-align: left; }
  .attention-item.has-actions .calendar-task-actions { grid-column: 3; grid-row: 1 / span 2; }
  .week-event.has-actions { grid-template-columns: minmax(0,1fr) auto; padding: 7px; }
  .entity-grid { grid-template-columns: 1fr; }
  .journal-row { grid-template-columns: 66px 6px minmax(0,1fr) 64px; padding: 10px; gap: 8px; }
  .journal-number.duration { display: none; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .field.span-2, .field.span-3 { grid-column: auto; }
  .app-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .dialog-shell { max-height: calc(100vh - 16px); }
  .dialog-body { padding: 16px; }
  .dialog-footer { padding: 10px 14px; }
  .dialog-footer .button { flex: 1 1 120px; }
  .toast-stack { right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100vw - 20px); }
  .info-row { grid-template-columns: 105px minmax(0,1fr); }
  .progress-row { grid-template-columns: 90px minmax(0,1fr) 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .sidebar, .topbar-actions, .bottom-nav, .toolbar, .row-action, .button { display: none !important; }
  .app-shell { display: block; }
  .workspace { margin: 0; }
  .topbar { position: static; background: white; }
  .view-root { max-width: none; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* 4.7: safe import preview and compatibility status */
.import-preview { min-width: 0; }
.import-mode { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; }
.import-mode legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.import-mode .checkbox-field { align-items: flex-start; padding: 9px; border-radius: 10px; background: var(--surface-soft); }
.import-mode .checkbox-field input { margin-top: 3px; flex: 0 0 auto; }
.import-mode small { color: var(--muted); line-height: 1.45; }
.settings-content code { overflow-wrap: anywhere; }


/* 4.7.2: deterministic startup, recovery and storage warnings */
.boot-screen {
  min-height: min(560px, calc(100vh - 150px));
  display: grid;
  place-items: center;
  padding: 24px 0;
}
.boot-loading-card,
.boot-error-card {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.boot-loading-card h2,
.boot-error-card h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.025em; }
.boot-loading-card p,
.boot-error-card p { margin: 0 0 8px; color: var(--muted); line-height: 1.55; }
.boot-loading-card small,
.boot-error-card small { color: var(--soft-muted); line-height: 1.45; }
.boot-status-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 25px;
  font-weight: 850;
}
.boot-spinner {
  border: 4px solid var(--sage-soft);
  border-top-color: var(--brand);
  border-radius: 50%;
  background: transparent;
  animation: guardian-spin .9s linear infinite;
}
.boot-error-card .action-row { grid-column: 2; }
.boot-error-card > small { grid-column: 2; }
.boot-error-detail {
  grid-column: 2;
  max-height: 180px;
  overflow: auto;
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f7f3;
  color: var(--muted);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.runtime-alert {
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #ead6ad;
  border-radius: 14px;
  background: var(--amber-soft);
}
.runtime-alert strong { display: block; font-size: 13px; }
.runtime-alert p { margin: 5px 0 0; color: #725b37; font-size: 12px; line-height: 1.5; }
.save-state.error { color: var(--danger); font-weight: 750; }
@keyframes guardian-spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) {
  .boot-screen { min-height: calc(100vh - 180px); padding: 12px 0; }
  .boot-loading-card,
  .boot-error-card { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .boot-status-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; }
  .boot-error-card .action-row,
  .boot-error-card > small,
  .boot-error-detail { grid-column: 1 / -1; }
  .runtime-alert { flex-direction: column; }
}

/* 4.7.5: standard-work zones, calendar task actions and managed assignees */

/* 4.8: workload analysis, 0–24 hour planning and redistribution */
.summary-workload-link { cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.summary-workload-link:hover { border-color: #aebfb5; transform: translateY(-1px); box-shadow: var(--shadow); }
.workload-view { --workload-blue: #397fd0; --workload-blue-soft: #e7f0fd; --workload-green: #557f68; --workload-green-soft: #e7f0e7; }
.workload-page-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.workload-back { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--brand); font-size: 24px; cursor: pointer; box-shadow: var(--shadow-soft); }
.workload-tabs { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: #e9ebe7; }
.workload-tabs button { min-height: 38px; border: 0; border-radius: 10px; padding: 0 12px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 750; cursor: pointer; }
.workload-tabs button.active { background: var(--brand); color: white; box-shadow: 0 5px 12px rgba(24,52,43,.18); }
.workload-period-nav, .workload-day-nav { display: flex; align-items: center; gap: 7px; }
.workload-chart-card .card-body { overflow: hidden; }
.workload-formula-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.workload-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; color: var(--muted); font-size: 11px; }
.workload-legend span, .workload-formulas span { display: inline-flex; align-items: center; gap: 6px; }
.workload-legend i, .workload-formulas i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.legend-hours { background: var(--brand); }
.legend-month { background: #8ab267; }
.legend-day { background: var(--workload-blue); }
.workload-formulas { max-width: 550px; padding: 9px 11px; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 11px; background: #f8f9f6; color: var(--muted); font-size: 10px; }
.workload-formulas strong { color: var(--ink); }
.workload-chart-24-shell { min-width: 760px; height: 330px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 45px; gap: 4px; }
.workload-axis { height: 246px; margin-top: 28px; display: flex; flex-direction: column; justify-content: space-between; color: var(--soft-muted); font-size: 9px; }
.workload-axis-left { text-align: right; padding-right: 5px; }
.workload-axis-right { padding-left: 5px; }
.workload-chart-24 { min-width: 0; height: 330px; display: grid; grid-template-columns: repeat(var(--days, 14), minmax(46px, 1fr)); grid-auto-flow: column; gap: 5px; position: relative; background: repeating-linear-gradient(to bottom, transparent 0, transparent 60px, rgba(207,213,206,.62) 61px, transparent 62px); }
.workload-day-24 { min-width: 0; height: 330px; padding: 0 2px 2px; border: 0; border-radius: 12px; background: transparent; display: grid; grid-template-rows: 28px 246px 16px 13px 23px; align-items: end; justify-items: center; color: var(--ink); cursor: pointer; }
.workload-day-24:hover { background: rgba(232,240,236,.55); }
.workload-day-24.selected { background: rgba(232,240,236,.9); box-shadow: inset 0 0 0 1px #cbd8d0; }
.workload-day-24.today strong { color: var(--amber); }
.workload-month-share, .workload-day-share { min-width: 31px; padding: 3px 5px; border-radius: 6px; font-size: 9px; font-weight: 800; line-height: 1; }
.workload-month-share { align-self: start; background: #e1efd5; color: #4d7437; }
.workload-day-share { align-self: end; background: var(--workload-blue-soft); color: #2c67a9; }
.workload-plot { width: 100%; height: 246px; position: relative; display: flex; align-items: end; justify-content: center; }
.workload-bar-24 { width: min(26px, 70%); min-height: 0; border-radius: 8px 8px 3px 3px; background: linear-gradient(#638d73, #254f3f); box-shadow: 0 2px 6px rgba(37,79,63,.17); }
.workload-hours-label { position: absolute; bottom: calc(var(--load, 0%) + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--ink); font-size: 9px; font-weight: 800; }

.workload-day-24 strong { font-size: 10px; }
.workload-day-24 small { color: var(--soft-muted); font-size: 9px; }
.workload-scale-note { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: #f7f8f5; color: var(--muted); font-size: 10px; }
.workload-selected-card { padding: 20px; }
.selected-day-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.selected-day-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.selected-day-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.workload-kpis { margin: 18px 0 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.workload-kpi { min-height: 82px; padding: 12px 14px; display: grid; grid-template-columns: 42px auto; grid-template-rows: auto auto auto; align-content: center; column-gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fbfbf8; }
.workload-kpi-icon, .workload-mini-pie { grid-row: 1 / 4; align-self: center; width: 40px; height: 40px; border-radius: 50%; }
.workload-kpi-icon { display: grid; place-items: center; background: var(--brand); color: white; font-size: 20px; }
.workload-mini-pie { position: relative; background: conic-gradient(#88b265 var(--value), #e4e9e2 0); }
.workload-mini-pie.day { background: conic-gradient(var(--workload-blue) var(--value), #e4e9e2 0); }
.workload-mini-pie::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#fbfbf8; }
.workload-kpi strong { font-size: 22px; line-height: 1; }
.workload-kpi small { color: var(--muted); font-size: 10px; }
.workload-kpi em { color: var(--soft-muted); font-size: 9px; font-style: normal; }
.timeline-24 { min-width: 760px; height: 128px; position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(to right, rgba(222,227,221,.8) 0 1px, transparent 1px calc(100% / 24)); }
.timeline-grid { position: absolute; inset: 0; pointer-events: none; }
.timeline-grid span { position: absolute; bottom: 5px; transform: translateX(-50%); color: var(--soft-muted); font-size: 8px; }
.timeline-blocks { position: absolute; inset: 8px 8px 25px; }
.timeline-task { position: absolute; top: calc(var(--timeline-lane) * 25px); height: 22px; min-width: 16px; padding: 0 5px; border: 0; border-radius: 5px; overflow: hidden; background: var(--cat-color, var(--sage)); color: white; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,.12); }
.timeline-task.done { opacity: .58; }
.timeline-task span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 8px; font-weight: 750; }
.timeline-empty { height: 70px; display: grid; place-items: center; color: var(--soft-muted); font-size: 11px; }
.untimed-tasks { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.untimed-tasks > strong { color: var(--muted); font-size: 10px; }
.untimed-tasks button { min-height: 30px; padding: 4px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; background: #fbfbf8; color: var(--ink); font-size: 10px; cursor: pointer; }
.timeline-caption { margin-top: 9px; color: var(--muted); font-size: 10px; }
.workload-overview-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,.95fr); }
.completion-rings { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(75px,1fr)); gap: 10px; }
.completion-ring-item { min-width: 0; text-align: center; display: grid; justify-items: center; gap: 7px; }
.completion-ring-item > span { font-size: 10px; font-weight: 750; }
.completion-ring { width: 64px; height: 64px; border-radius: 50%; position: relative; display: grid; place-items: center; background: conic-gradient(#75a64e var(--completion), #e4e8e2 0); }
.completion-ring::before { content:""; position:absolute; inset:7px; border-radius:50%; background:white; }
.completion-ring strong { position: relative; font-size: 15px; }
.completion-ring-item small { color: var(--muted); font-size: 8px; }
.workload-distribution { min-width: 0; display: grid; grid-template-columns: 128px minmax(0,1fr); align-items: center; gap: 14px; }
.workload-donut { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.workload-donut::after { content:""; position:absolute; inset:30px; border-radius:50%; background:white; }
.workload-donut span { position:relative; z-index:1; display:grid; text-align:center; }
.workload-donut strong { font-size: 13px; }
.workload-donut small { color: var(--muted); font-size: 8px; }
.workload-category-list { min-width: 0; max-height: 180px; overflow: auto; display: grid; gap: 3px; }
.workload-category-list button { min-width: 0; padding: 5px 2px; border: 0; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 6px; background: transparent; text-align: left; cursor: pointer; }
.workload-category-list i { width: 8px; height: 8px; border-radius: 50%; }
.workload-category-list span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; }
.workload-category-list strong { font-size:10px; }
.workload-category-list small { grid-column: 2 / -1; color:var(--muted); font-size:8px; }
.workload-quick-actions { display: grid; gap: 6px; }
.workload-quick-actions button { min-width: 0; min-height: 48px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; display: grid; grid-template-columns: 28px minmax(0,1fr) 12px; align-items: center; gap: 8px; background: #fbfbf8; text-align: left; cursor: pointer; }
.workload-quick-actions button:hover { border-color:#b9c7be; background:white; }
.workload-quick-actions > button > span { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--sage-soft); color:var(--brand); }
.workload-quick-actions strong { display:block; font-size:10px; }
.workload-quick-actions small { display:block; margin-top:2px; color:var(--muted); font-size:8px; }
.workload-quick-actions b { color:var(--soft-muted); }
.workload-load-lists { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.workload-load-list { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fbfbf8; }
.workload-load-list.overload { border-color:#efd0cc; background:#fff6f5; }
.workload-load-list.free { border-color:#d6e4d2; background:#f7fbf4; }
.workload-load-list h3 { margin:0 0 8px; font-size:12px; }
.workload-load-list.overload h3 { color:var(--danger); }
.workload-load-list.free h3 { color:#426b3b; }
.workload-load-list p { margin:0; color:var(--muted); font-size:10px; }
.workload-load-list button { width:100%; min-height:34px; padding:5px 2px; border:0; border-top:1px solid rgba(207,213,206,.55); display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:8px; background:transparent; text-align:left; cursor:pointer; }
.workload-load-list button:first-of-type { border-top:0; }
.workload-load-list button span { font-size:10px; }
.workload-load-list button strong { font-size:10px; }
.workload-load-list button em { color:var(--muted); font-size:8px; font-style:normal; }
.workload-load-list button i { padding:2px 5px; border-radius:99px; font-size:8px; font-style:normal; }
.workload-load-list.overload button i { background:var(--danger-soft); color:var(--danger); }
.workload-load-list.free button i { background:#e3f0df; color:#426b3b; }
.workload-filters { display:grid; grid-template-columns:repeat(5,minmax(130px,1fr)); gap:10px; align-items:end; }
.workload-filter-actions { display:flex; align-items:center; gap:7px; }
.workload-filter-actions .button { flex:1; }
.workload-day-table { margin-top:18px; min-width:720px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.workload-table-head, .workload-table-row { display:grid; grid-template-columns:minmax(150px,1.4fr) .7fr .85fr .75fr .8fr 130px; align-items:center; gap:8px; padding:9px 12px; }
.workload-table-head { background:#f2f4f0; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.workload-table-row { border-top:1px solid var(--line); font-size:10px; }
.workload-table-row.selected { background:var(--sage-soft); }
.workload-table-row > button:first-child { border:0; padding:0; background:transparent; text-align:left; cursor:pointer; }
.workload-table-row > button:first-child strong { display:block; font-size:10px; }
.workload-table-row > button:first-child small { color:var(--muted); font-size:8px; }
.workload-planning-toolbar { min-width:0; padding:10px 12px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:12px; background:#f8f9f6; font-size:10px; }
.workload-planning-list { min-width:0; display:grid; gap:6px; }
.workload-planning-row { min-width:0; min-height:54px; padding:7px 9px; display:grid; grid-template-columns:22px 7px minmax(0,1fr) auto; align-items:center; gap:9px; border:1px solid var(--line); border-radius:11px; background:#fbfbf8; }
.workload-planning-row.done { opacity:.72; }
.workload-planning-row .category-dot { margin:0; }
.workload-planning-copy { min-width:0; border:0; background:transparent; text-align:left; cursor:pointer; }
.workload-planning-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; }
.workload-planning-copy small { display:block; margin-top:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:8px; }
.checkbox-field.compact { min-height:0; margin-top:5px; font-size:9px; }
.muted-copy { color:var(--muted); font-size:11px; }

@media (max-width: 1280px) {
  .workload-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workload-overview-grid > :last-child { grid-column:1 / -1; }
  .workload-filters { grid-template-columns:repeat(3,minmax(140px,1fr)); }
}
@media (max-width: 900px) {
  .workload-page-head { grid-template-columns:40px minmax(0,1fr) 40px; gap:7px; }
  .workload-tabs { overflow-x:auto; grid-template-columns:repeat(4,minmax(110px,1fr)); }
  .workload-chart-card .card-body, .workload-selected-card, .workload-day-table { overflow-x:auto; }
  .workload-formula-row { min-width:760px; }
  .workload-overview-grid { grid-template-columns:minmax(0,1fr); }
  .workload-overview-grid > :last-child { grid-column:auto; }
  .workload-filters { grid-template-columns:repeat(2,minmax(140px,1fr)); }
  .completion-rings { grid-template-columns:repeat(4,minmax(70px,1fr)); }
}
@media (max-width: 620px) {
  .workload-page-head { grid-template-columns:38px minmax(0,1fr); }
  .workload-page-head > .icon-button { display:none; }
  .workload-tabs { grid-template-columns:repeat(4,105px); }
  .workload-tabs button { min-height:34px; padding:0 8px; font-size:10px; }
  .workload-chart-card .card-header { align-items:flex-start; }
  .workload-period-nav .button { display:none; }
  .workload-formula-row { display:grid; min-width:740px; }
  .selected-day-heading { align-items:flex-start; }
  .selected-day-heading h2 { font-size:15px; }
  .workload-day-nav .button { display:none; }
  .workload-kpis { grid-template-columns:1fr; }
  .workload-kpi { min-height:66px; }
  .completion-rings { grid-template-columns:repeat(2,minmax(80px,1fr)); row-gap:16px; }
  .workload-distribution { grid-template-columns:105px minmax(0,1fr); }
  .workload-donut { width:105px; height:105px; }
  .workload-donut::after { inset:25px; }
  .workload-load-lists { grid-template-columns:1fr; }
  .workload-filters { grid-template-columns:1fr; }
  .workload-filter-actions { grid-column:1; }
  .workload-planning-toolbar { align-items:flex-start; flex-wrap:wrap; }
  .workload-planning-row { grid-template-columns:20px 6px minmax(0,1fr); }
  .workload-planning-row > .button { grid-column:3; justify-self:start; }
}


/* 4.8.2: category-aware zone selection */
.zone-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.zone-category-grid .checkbox-field {
  margin: 0;
  min-width: 0;
}
.zone-category-grid .checkbox-field span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .zone-category-grid { grid-template-columns: 1fr; }
}