:root {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: #24352f;
  background: #f5f6f3;
  font-synthesis: none;
  --ink: #23362f;
  --muted: #7b857f;
  --primary: #176b5b;
  --primary-dark: #115344;
  --primary-light: #eaf3ed;
  --border: #e4e8e2;
  --surface: #fff;
  --canvas: #f5f6f3;
  --danger: #b04c43;
  --shadow: 0 14px 48px #26382f14;
}

* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
button, a, input, select, textarea { outline-offset: 4px; }
:focus-visible { outline: 3px solid #6caa9a; }
button { color: inherit; }
button svg, a svg, .icon svg { flex-shrink: 0; }
svg { width: 18px; height: 18px; vertical-align: middle; }
input, select, textarea {
  width: 100%; border: 1px solid #dce2da; border-radius: 7px;
  background: #fff; padding: 10px 12px; color: var(--ink); min-height: 41px;
}
input::placeholder, textarea::placeholder { color: #929b95; }
input:focus, select:focus, textarea:focus { border-color: #72a292; }
input[type=checkbox] { width: 16px; min-height: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
input[type=file] { font-size: 12px; }
textarea { min-height: 95px; resize: vertical; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,p { margin: 0; }
h1 { font-size: 29px; letter-spacing: -.9px; line-height: 1.25; font-weight: 650; }
h2 { font-size: 19px; letter-spacing: -.4px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
h4 { font-size: 14px; font-weight: 650; }
small { font-size: 12px; }
.muted, .text-muted, .subtle { color: var(--muted); }
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700; color: var(--muted); }
.loading-screen { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 20px; color: var(--muted); }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 224px; flex: 0 0 224px; position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; background: #fcfdfa; border-right: 1px solid var(--border); padding: 28px 16px 16px; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 29px; }
.brand-mark { width: 35px; height: 35px; flex-shrink: 0; border-radius: 10px; background: var(--primary); color: white; display: grid; place-items: center; font-size: 25px; font-weight: 650; letter-spacing: -2px; }
.brand-mark svg { width: 22px; height: 22px; }
.sidebar-brand strong, .brand-name { font-size: 21px; letter-spacing: -.8px; font-weight: 700; }
.sidebar-brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .2px; }
.workspace-switcher, .workspace-badge { margin: 0 1px 23px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; background: white; display: flex; align-items: center; gap: 9px; }
.nav-label { padding: 11px 13px 9px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8f9892; }
.sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 0; border-radius: 7px; padding: 11px 13px; text-align: left; color: #6d7972; font-size: 13px; font-weight: 550; transition: background .15s; }
.nav-item svg { width: 18px; height: 18px; color: #87928b; stroke-width: 1.7; }
.nav-item:hover { background: #f0f3ed; }
.nav-item.active { color: #1d6351; background: #e8f1e9; font-weight: 650; }
.nav-item.active svg { color: var(--primary); }
.nav-count, .count { margin-left: auto; padding: 1px 6px; font-size: 10px; background: #d8e8db; border-radius: 4px; }
.sidebar-bottom { margin-top: auto; padding-top: 26px; }
.demo-notice, .demo-banner, .local-notice { border: 1px solid #e0e7d9; background: #f1f5ec; border-radius: 9px; padding: 13px; font-size: 11px; color: #71806b; }
.demo-notice strong, .local-notice strong { color: #485a41; display: block; margin-bottom: 4px; font-size: 12px; }
.demo-notice p, .local-notice p { line-height: 1.6; }
.sidebar-user { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border); margin-top: 18px; padding: 18px 7px 0; }
.sidebar-user strong { font-size: 12px; display: block; }
.sidebar-user small { color: var(--muted); font-size: 10px; }
.user-avatar, .avatar { width: 33px; height: 33px; border-radius: 50%; background: #e9e9df; color: #62705e; font-size: 11px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.workspace { margin-left: 224px; min-width: 0; flex: 1; }
.topbar { height: 73px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); background: #fcfdfa; padding: 0 35px; }
.global-search { display: flex; align-items: center; gap: 9px; color: #929c94; width: min(400px, 50%); }
.global-search input { background: transparent; border: 0; min-height: 38px; padding-left: 0; font-size: 12px; }
.global-search svg { width: 17px; height: 17px; }
.global-search kbd { font: 10px inherit; padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 11px; }
.topbar-actions .user-avatar { width: 31px; height: 31px; }
.topbar-date { color: #78847b; font-size: 12px; }
.local-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }
.local-indicator::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #72a586; }
.page-content { padding: 30px 35px 38px; max-width: 1900px; margin: 0 auto; }
.page-heading, .page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-heading p, .page-header p { color: #879189; font-size: 12px; margin-top: 7px; }
.page-heading .eyebrow { margin-bottom: 7px; }
.page-actions, .heading-actions { display: flex; gap: 9px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #dfe5dc; border-radius: 7px; background: white; color: #56665b; font-size: 12px; font-weight: 600; min-height: 37px; padding: 8px 13px; text-decoration: none; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.button:hover { background: #f4f7f0; text-decoration: none; }
.button.primary { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 2px 3px #12564714; }
.button.primary:hover { background: var(--primary-dark); }
.button.secondary { background: #fff; }
.button.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.button.ghost:hover { background: #ecf1e9; }
.button.danger { background: #fcf1ee; border-color: #f0d7d0; color: var(--danger); }
.button.small { font-size: 11px; min-height: 29px; padding: 5px 9px; gap: 5px; }
.button.icon { width: 33px; min-height: 33px; padding: 6px; }
.button svg { width: 15px; height: 15px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-bottom: 25px; }
.metric-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; position: relative; }
.metric-label { color: #7b887d; font-size: 11px; display: flex; justify-content: space-between; align-items: center; gap: 7px; }
.metric-card .metric-icon { position: absolute; top: 19px; right: 19px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #f3f5ef; color: #82947f; }
.metric-card .metric-icon svg { width: 16px; height: 16px; }
.metric-value { display: block; color: #2b3d31; font-size: 28px; letter-spacing: -.8px; line-height: 1.15; font-weight: 600; margin-top: 10px; }
.metric-value small { font-size: 14px; color: #869285; margin-left: 4px; font-weight: 400; }
.metric-detail, .metric-note { color: #949c93; font-size: 10px; margin-top: 8px; }
.metric-detail .positive, .metric-note .positive { color: #67956d; }
.panel { border: 1px solid var(--border); border-radius: 10px; background: white; overflow: hidden; }
.panel-header, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.panel-header { padding: 19px 21px; border-bottom: 1px solid var(--border); margin: 0; }
.panel-header h2, .panel-header h3 { font-size: 15px; }
.section-heading h2 { font-size: 16px; }
.section-heading .button { margin-left: auto; }
.calendar-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 21px; align-items: start; }
.calendar-toolbar { padding: 18px 19px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.calendar-toolbar h2 { font-size: 17px; letter-spacing: -.3px; margin-right: auto; }
.calendar-nav { display: flex; align-items: center; gap: 3px; }
.calendar-toolbar .button.icon { width: 26px; height: 28px; min-height: 28px; border-color: transparent; }
.view-switch { display: inline-flex; border: 1px solid var(--border); background: #f7f8f5; padding: 3px; border-radius: 7px; gap: 2px; }
.view-switch button { border: 0; background: transparent; padding: 5px 10px; border-radius: 5px; color: #929b92; font-size: 11px; font-weight: 500; }
.view-switch button.active, .view-switch button[aria-pressed=true] { background: white; color: #3a5d48; box-shadow: 0 1px 4px #1e3c2420; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 19px 16px; align-items: center; }
.filter-row select { width: auto; max-width: 185px; font-size: 10px; min-height: 30px; padding: 5px 26px 5px 9px; color: #7d8a80; border-color: #e6ebe3; }
.filter-label { color: #8d998e; font-size: 10px; }
.calendar-legend, .legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 10px; color: #899588; padding: 13px 19px; border-top: 1px solid var(--border); }
.legend-item { display: flex; gap: 6px; align-items: center; }
.legend-dot, .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.weekday-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); background: #fafbf8; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.weekday-row>div { padding: 11px 13px; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; font-weight: 650; color: #9aa294; }
.month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.day-cell { min-height: 108px; border: 0; border-right: 1px solid #edf0e9; border-bottom: 1px solid #edf0e9; padding: 7px 5px 8px; background: white; cursor: pointer; min-width: 0; transition: background .13s; }
.day-cell:nth-child(7n) { border-right: 0; }
.day-cell:hover { background: #fafcf7; }
.day-cell.outside { background: #fcfdf9; }
.day-cell.outside .day-number { color: #c6cec0; }
.day-cell.today { background: #fbfdf9; }
.day-cell.selected { background: #f0f7ee; box-shadow: inset 0 0 0 1px #a8c4a5; }
.day-number { width: 25px; height: 25px; display: inline-flex; justify-content: center; align-items: center; font-size: 11px; color: #7d897b; margin: 0 0 6px 3px; border-radius: 50%; }
.today .day-number { background: var(--primary); color: white; font-weight: 650; }
.calendar-event { display: flex; align-items: center; gap: 4px; border: 0; width: 100%; text-align: left; padding: 4px 6px; min-height: 24px; margin-bottom: 3px; border-radius: 4px; border-left: 2px solid #91aebc; background: #edf2f5; color: #678495; font-size: 9px; line-height: 1.35; overflow: hidden; cursor: pointer; }
.calendar-event:hover { filter: brightness(.97); box-shadow: 0 1px 3px #32472e18; }
.calendar-event span, .event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event svg { width: 10px; height: 10px; }
.calendar-event.status-in_progress { background: #eaf3ef; color: #4d8b73; border-left-color: #80ac94; }
.calendar-event.status-blocked { background: #fbefea; color: #b57962; border-left-color: #d99c7f; }
.calendar-event.status-review { background: #f7f1e3; color: #a28b51; border-left-color: #cbb779; }
.calendar-event.status-complete { background: #eef3ea; color: #839579; border-left-color: #a1b796; }
.calendar-event.event-invoice { background: #f0edf8; color: #9483b0; border-left-color: #b5a4cf; }
.more-events { border: 0; background: transparent; color: #9ca694; padding: 2px 4px; font-size: 9px; }
.agenda-panel { padding: 21px 19px; }
.agenda-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.agenda-heading h2 { font-size: 16px; }
.agenda-date { font-size: 11px; color: #929b8d; margin: 4px 0 20px; }
.agenda-section { margin-top: 23px; padding-top: 20px; border-top: 1px solid #eef1e9; }
.agenda-section>h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: #8f9988; margin-bottom: 13px; }
.agenda-item { padding: 13px 0; border-bottom: 1px solid #edf0e8; display: flex; align-items: flex-start; gap: 10px; }
.agenda-item:last-child { border-bottom: 0; }
.agenda-item .event-color, .agenda-color { width: 3px; align-self: stretch; min-height: 33px; background: #7da78b; border-radius: 3px; flex-shrink: 0; }
.agenda-item h3, .agenda-item strong { font-size: 12px; font-weight: 600; }
.agenda-item p { font-size: 10px; color: #9aa292; margin: 4px 0 8px; }
.agenda-item button { text-align: left; }
.agenda-item .button { text-align: center; }
.agenda-item-content { flex: 1; min-width: 0; }
.agenda-item .badge { font-size: 9px; }
.agenda-list { padding: 2px 20px 16px; }
.agenda-group { margin: 18px 0; }
.agenda-group>h3 { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.agenda-list .agenda-item { cursor: pointer; align-items: center; }
.agenda-list .agenda-item p { margin-bottom: 0; }
.agenda-list .agenda-item>.badge { margin-left: auto; }
.agenda-empty { padding: 22px 7px; color: #a2aa99; font-size: 12px; text-align: center; }
.review-callout { margin-top: 22px; border-radius: 8px; padding: 15px; background: #f7f3e8; border: 1px solid #eee6cf; }
.review-callout h3 { font-size: 12px; color: #95834e; }
.review-callout p { color: #ac9e7a; font-size: 11px; margin: 7px 0 12px; }
.week-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.week-grid .day-cell { min-height: 420px; }
.week-grid .calendar-event { padding: 8px 6px; margin-bottom: 7px; white-space: normal; }
.week-grid .calendar-event span { white-space: normal; }
.week-grid .day-number { margin-bottom: 12px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; line-height: 1.4; border-radius: 5px; font-size: 10px; font-weight: 500; background: #eff3f4; color: #748897; white-space: nowrap; }
.badge.status-planned { color: #7d8e9a; background: #eff2f4; }
.badge.status-in_progress { color: #5e9279; background: #eaf4ed; }
.badge.status-blocked, .badge.status-overdue { color: #b27762; background: #fcf0e9; }
.badge.status-review, .badge.status-partial { color: #a28b4a; background: #f8f2e2; }
.badge.status-complete, .badge.status-paid { color: #6b8c63; background: #eaf3e7; }
.badge.status-unpaid { color: #8b81a5; background: #f0edf7; }
.badge.subcontractor, .badge.receivable { background: #edf3ec; color: #668c65; }
.badge.payable { background: #f3eef8; color: #9480ad; }
.job-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.job-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 21px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.job-card:hover { border-color: #b8cbb1; box-shadow: 0 4px 18px #36482c0a; }
.job-card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 17px; }
.job-number { font-size: 10px; color: #9ba593; letter-spacing: .5px; }
.job-card h3 { font-size: 16px; margin-bottom: 7px; letter-spacing: -.2px; }
.job-card p { font-size: 11px; color: #94a08d; }
.job-card-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #8e9b86; margin: 19px 0 10px; }
.job-card-footer { border-top: 1px solid #edf0e7; margin-top: 20px; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10px; color: #8a9782; }
.progress-track { height: 5px; width: 100%; background: #edf1e8; border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: #83a87d; border-radius: 5px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
th { background: #fafbf7; border-bottom: 1px solid var(--border); color: #97a08e; text-transform: uppercase; font-size: 9px; font-weight: 650; letter-spacing: .8px; padding: 13px 18px; white-space: nowrap; }
td { padding: 17px 18px; border-bottom: 1px solid #edf0e7; color: #63735b; }
td strong { color: #4c6248; font-size: 12px; font-weight: 600; }
td small { display: block; color: #9da693; font-size: 10px; margin-top: 4px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfdf9; }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-state { padding: 50px 25px; text-align: center; color: #a0aa96; }
.empty-state svg { width: 30px; height: 30px; margin-bottom: 12px; }
.empty-state h3 { color: #687d5b; font-size: 15px; margin-bottom: 7px; }
.empty-state p { font-size: 12px; line-height: 1.7; }
.empty-state .button { margin-top: 17px; }
.empty-state.compact { padding: 23px 10px; }
.todo-list { padding: 0 20px; }
.todo-item { display: flex; align-items: flex-start; gap: 12px; padding: 17px 0; border-bottom: 1px solid #edf0e8; }
.todo-item:last-child { border-bottom: 0; }
.todo-item input { margin-top: 3px; }
.todo-item-content { flex: 1; }
.todo-item strong { font-weight: 550; font-size: 13px; }
.todo-item p { font-size: 10px; color: #929e89; margin-top: 4px; }
.todo-item.done strong { text-decoration: line-through; color: #a2ab9a; }
.todo-item.done { opacity: .72; }
.todo-item .badge { margin-left: auto; }
.day-layout, .overview-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 20px; align-items: start; }
.overview-grid>.panel { padding: 23px; }
.overview-grid { margin-bottom: 22px; }
.overview-grid h2 { font-size: 16px; margin-bottom: 16px; }
.activity-item { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid #edf0e8; font-size: 12px; }
.activity-item:last-child { border-bottom: 0; }
.activity-item p { margin-bottom: 4px; }
.activity-item small { font-size: 10px; color: #9ea894; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: #a6baa0; margin-top: 6px; flex-shrink: 0; }
.workload-row, .summary-row { display: flex; align-items: center; gap: 11px; margin: 16px 0; font-size: 12px; }
.workload-row>.progress-track { flex: 1; }
.workload-row .workload-label { width: 110px; }
.workload-row strong { width: 48px; text-align: right; }
.summary-row { justify-content: space-between; }
.summary-row strong { font-size: 17px; font-weight: 600; }
.chart-bar { display: flex; height: 11px; gap: 3px; overflow: hidden; border-radius: 4px; margin: 16px 0 24px; background: #edf2e8; }
.chart-bar>span { border-radius: 3px; }
.team-grid, .template-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.team-card, .template-card { padding: 23px; background: white; border: 1px solid var(--border); border-radius: 10px; }
.team-card>.user-avatar { width: 43px; height: 43px; margin-bottom: 14px; font-size: 14px; }
.team-card h3, .template-card h3 { font-size: 16px; margin-bottom: 5px; }
.team-card p, .template-card p { color: #97a18e; font-size: 12px; margin: 4px 0; }
.team-card .badge { margin-top: 12px; }
.template-card ol { padding-left: 20px; margin: 20px 0; font-size: 12px; color: #839377; }
.template-card li { padding: 5px 0; }
.template-card>.button { width: 100%; margin-top: 10px; }
.modal-backdrop, .drawer-backdrop { position: fixed; inset: 0; z-index: 100; background: #1c302b61; backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 28px; }
.modal { width: 490px; max-width: 100%; max-height: calc(100dvh - 56px); overflow: auto; background: white; border-radius: 13px; box-shadow: 0 24px 80px #0f2e2940; padding: 27px; animation: modal-in .15s ease-out; }
.modal.wide { width: 660px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 21px; }
.modal-header h2 { font-size: 21px; }
.modal>p, .form-description { color: #96a08f; font-size: 12px; margin: -7px 0 21px; line-height: 1.7; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, label.field { color: #6c7e60; font-size: 12px; font-weight: 550; }
.field small, .form-help { color: #9ba691; font-size: 10px; font-weight: 400; }
.field>input, .field>select, .field>textarea { font-size: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border); }
.form-error, .error-message { padding: 10px 12px; background: #fcf0ed; border: 1px solid #efd4ca; border-radius: 6px; color: #a16552; font-size: 12px; margin: 12px 0; }
.form-error:empty, .error-message:empty { display: none; }
.drawer-backdrop { justify-content: flex-end; padding: 0; }
.job-drawer { width: 630px; max-width: 100%; height: 100dvh; overflow-y: auto; background: #fcfdf9; box-shadow: -10px 0 50px #18352726; animation: drawer-in .2s ease-out; }
.drawer-header { background: #fff; padding: 25px 28px 23px; border-bottom: 1px solid var(--border); position: relative; }
.drawer-header h2 { font-size: 24px; margin: 10px 0 7px; line-height: 1.2; }
.drawer-header>p { color: #97a18c; font-size: 12px; }
.drawer-header-top { display: flex; align-items: center; gap: 10px; }
.drawer-header-top .button { margin-left: auto; }
.drawer-header-actions { display: flex; gap: 8px; margin-top: 17px; }
.drawer-body { padding: 25px 28px 40px; }
.drawer-section { margin-bottom: 29px; }
.drawer-section>h3 { margin-bottom: 15px; font-size: 15px; }
.job-facts, .job-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-bottom: 24px; padding: 19px; border: 1px solid var(--border); border-radius: 8px; background: white; }
.job-facts dt, .job-details-grid label { color: #9aa58d; font-size: 10px; margin-bottom: 5px; }
.job-facts dd { margin: 0; font-size: 12px; color: #687d5b; }
.job-details-grid strong { font-size: 12px; font-weight: 550; display: block; }
.job-notes { font-size: 12px; color: #8b9a80; padding: 15px; border: 1px solid #e7eadc; background: #f7f8f0; border-radius: 8px; line-height: 1.7; white-space: pre-wrap; }
.phase-card { border: 1px solid var(--border); border-radius: 9px; background: white; padding: 18px; margin-bottom: 12px; }
.phase-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.phase-header h4 { font-size: 13px; }
.phase-meta { font-size: 10px; color: #97a58b; margin-top: 6px; }
.phase-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.phase-actions select { width: auto; min-height: 30px; padding: 4px 8px; font-size: 11px; }
.phase-blocker, .blocker-note { padding: 10px 12px; background: #fcf2e9; color: #b38a60; font-size: 11px; border-radius: 5px; margin-top: 13px; }
.checklist { padding-top: 12px; margin-top: 13px; border-top: 1px solid #edf0e7; }
.checklist label { display: flex; align-items: flex-start; gap: 9px; color: #8b9a7e; font-size: 11px; padding: 5px 0; }
.checklist input { width: 14px; height: 14px; min-height: 14px; margin: 1px 0 0; }
.checklist input:checked+span { text-decoration: line-through; color: #a3af98; }
.update-form { padding: 17px; border: 1px solid var(--border); background: white; border-radius: 9px; margin: 16px 0 20px; }
.update-form textarea { border: 0; padding: 0; min-height: 70px; }
.update-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 7px; }
.update-form-footer input[type=file] { max-width: 65%; border: 0; padding: 2px 0; font-size: 10px; min-height: auto; }
.update-card { display: flex; gap: 11px; margin: 20px 0; }
.update-card .user-avatar { width: 29px; height: 29px; font-size: 9px; }
.update-content { flex: 1; min-width: 0; }
.update-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.update-meta strong { color: #6c805e; font-size: 12px; font-weight: 550; }
.update-meta small { font-size: 10px; color: #a2ad97; }
.update-card p { font-size: 12px; color: #879a78; white-space: pre-wrap; }
.photo-preview, .update-card img { max-width: 100%; max-height: 260px; border-radius: 8px; margin-top: 12px; display: block; object-fit: contain; border: 1px solid var(--border); }
.toast { position: fixed; left: 50%; bottom: 25px; transform: translateX(-50%); z-index: 200; max-width: calc(100vw - 40px); padding: 13px 21px; color: white; background: #285b48; border: 1px solid #ffffff20; border-radius: 9px; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease-out; }
.toast.error { background: #9c5a49; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: #fcfdf9; }
.login-story { background: #163e34; padding: 55px 70px; color: #f5f7ed; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; position: relative; overflow: hidden; }
.login-story::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#b7d5c508 1px, transparent 1px),linear-gradient(90deg,#b7d5c508 1px,transparent 1px); background-size: 48px 48px; }
.login-story>* { z-index: 1; position: relative; }
.login-story .sidebar-brand { padding: 0; }
.login-story .brand-mark { background: #edf4e5; color: #1d5741; }
.login-story .sidebar-brand small { color: #a2c1ae; }
.login-story h1 { font-size: clamp(38px,4.5vw,64px); font-weight: 500; line-height: 1.07; letter-spacing: -2px; max-width: 520px; margin: 30px 0 23px; }
.login-story h1 em { color: #b4d5b6; font-style: normal; }
.login-story p { color: #9bb8a4; font-size: 14px; line-height: 1.9; max-width: 380px; }
.login-story .eyebrow { color: #9fbaa0; letter-spacing: 2px; }
.login-story-footer { font-size: 11px; color: #89a78e; }
.login-features { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; color: #adc7af; font-size: 11px; }
.login-features>span { display: flex; align-items: center; gap: 7px; }
.login-features svg { width: 14px; height: 14px; }
.login-panel { padding: 55px 12%; align-self: center; width: 100%; max-width: 650px; justify-self: center; }
.login-panel h2 { font-size: 28px; letter-spacing: -.8px; }
.login-panel>p { color: #9aa68f; font-size: 13px; margin: 9px 0 30px; }
.login-panel .field { margin-bottom: 15px; }
.login-panel .button.primary { width: 100%; min-height: 43px; margin-top: 5px; }
.login-divider { display: flex; align-items: center; gap: 14px; font-size: 10px; color: #a1ad94; margin: 26px 0 17px; white-space: nowrap; }
.login-divider::before, .login-divider::after { content: ''; height: 1px; background: var(--border); flex: 1; }
.demo-accounts { display: grid; gap: 9px; }
.demo-account { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid #e0e7d8; background: white; border-radius: 8px; padding: 12px 14px; text-align: left; }
.demo-account:hover { border-color: #9bb58a; background: #f8fbf3; }
.demo-account strong { font-size: 12px; display: block; color: #58744a; }
.demo-account small { font-size: 10px; color: #99a78d; display: block; margin-top: 2px; }
.demo-account>svg:last-child { margin-left: auto; width: 15px; color: #9aaa8b; }
.login-note { font-size: 10px; color: #a4af98; margin-top: 23px; line-height: 1.7; text-align: center; }
.mobile-menu, .menu-toggle { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes modal-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawer-in { from { transform: translateX(24px); opacity: .5; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-in { from { opacity: 0; bottom: 17px; } to { opacity: 1; bottom: 25px; } }

@media (min-width: 1550px) {
  .calendar-layout { grid-template-columns: minmax(0,1fr) 320px; }
  .day-cell { min-height: 125px; }
  .calendar-event { font-size: 10px; }
  .calendar-toolbar { padding: 21px 23px; }
}
@media (max-width: 1200px) {
  .sidebar { width: 202px; flex-basis: 202px; padding-left: 12px; padding-right: 12px; }
  .workspace { margin-left: 202px; }
  .topbar { padding: 0 23px; }
  .page-content { padding: 25px 23px; }
  .calendar-layout { grid-template-columns: minmax(0,1fr) 237px; gap: 15px; }
  .calendar-toolbar { padding: 15px 12px; gap: 5px; }
  .calendar-toolbar h2 { font-size: 15px; }
  .calendar-toolbar .view-switch { margin-left: auto; }
  .view-switch button { padding: 5px 7px; font-size: 10px; }
  .filter-row { padding-left: 12px; padding-right: 12px; }
  .filter-row select { max-width: 130px; }
  .metric-card { padding: 16px; }
  .metric-value { font-size: 25px; }
  .metric-grid { gap: 12px; }
  .job-grid, .team-grid, .template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .agenda-panel { padding: 19px 14px; }
  .login-story { padding: 45px; }
}
@media (max-width: 1000px) {
  .calendar-layout { grid-template-columns: 1fr; }
  .agenda-panel { display: block; }
  .agenda-panel .agenda-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 0; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .day-cell { min-height: 101px; }
  .topbar-date { display: none; }
  .day-layout, .overview-grid { grid-template-columns: 1fr; }
  .login-panel { padding: 40px 9%; }
  .login-story { padding: 40px 32px; }
}
@media (max-width: 740px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: 20px 0 80px #1b3b251a; width: 224px; }
  .sidebar.open, .app-shell.menu-open .sidebar { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .mobile-menu, .menu-toggle { display: inline-flex; }
  .topbar { height: 61px; padding: 0 17px; gap: 12px; }
  .global-search { flex: 1; width: auto; }
  .global-search input { min-width: 0; font-size: 12px; }
  .global-search kbd, .topbar-actions .local-indicator { display: none; }
  .topbar-actions { gap: 6px; }
  .page-content { padding: 23px 16px; }
  .page-heading { align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  h1 { font-size: 25px; }
  .page-heading p { font-size: 11px; }
  .page-actions { gap: 5px; }
  .page-actions .button { font-size: 11px; padding: 8px 10px; }
  .metric-grid { gap: 10px; margin-bottom: 18px; }
  .metric-card { padding: 15px; }
  .metric-label { font-size: 10px; }
  .metric-value { font-size: 25px; }
  .metric-note, .metric-detail { font-size: 9px; }
  .metric-card .metric-icon { right: 13px; top: 13px; width: 25px; height: 25px; }
  .metric-card .metric-icon svg { width: 13px; height: 13px; }
  .calendar-toolbar { padding: 14px 10px; }
  .calendar-toolbar h2 { font-size: 15px; }
  .calendar-toolbar .button { font-size: 10px; padding: 4px 8px; min-height: 28px; }
  .filter-row { gap: 5px; padding: 0 10px 12px; }
  .filter-row select { font-size: 10px; max-width: 31%; padding: 4px 3px; }
  .weekday-row>div { font-size: 8px; padding: 9px 5px; text-align: center; }
  .day-cell { min-height: 91px; padding: 5px 2px; }
  .day-number { width: 21px; height: 21px; margin: 0 0 5px 1px; font-size: 10px; }
  .calendar-event { font-size: 8px; padding: 4px 3px; gap: 1px; min-height: 22px; border-left-width: 2px; }
  .calendar-event svg { display: none; }
  .more-events { font-size: 8px; padding: 1px 2px; }
  .calendar-legend { font-size: 9px; padding: 12px 10px; gap: 9px; }
  .view-switch button { padding: 4px 7px; }
  .week-grid { min-width: 570px; }
  .calendar-panel:has(.week-grid) { overflow-x: auto; }
  .calendar-panel:has(.week-grid) .weekday-row { min-width: 570px; }
  .job-grid, .team-grid, .template-grid { grid-template-columns: 1fr; }
  .job-card { padding: 19px; }
  .agenda-panel .agenda-list { grid-template-columns: 1fr; }
  .form-grid { gap: 13px; }
  .modal-backdrop { padding: 15px; }
  .modal { padding: 22px; max-height: calc(100dvh - 30px); }
  .drawer-header { padding: 21px; }
  .drawer-body { padding: 20px; }
  .job-drawer { width: 100%; }
  .login-page { grid-template-columns: 1fr; }
  .login-story { min-height: auto; padding: 27px 28px; }
  .login-story .sidebar-brand { padding-bottom: 22px; }
  .login-story h1 { font-size: 36px; max-width: 330px; margin: 10px 0 13px; letter-spacing: -1px; }
  .login-story p { font-size: 12px; max-width: 420px; }
  .login-story-footer, .login-features { display: none; }
  .login-panel { padding: 32px 28px; }
  .login-panel h2 { font-size: 25px; }
  .login-panel>p { margin-bottom: 23px; }
}
@media (max-width: 400px) {
  .page-heading { flex-wrap: wrap; }
  .calendar-toolbar { flex-wrap: wrap; }
  .calendar-toolbar h2 { width: 45%; }
  .form-grid { grid-template-columns: 1fr; }
  .field { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

/* App components */
.hidden { display: none !important; }
.full-width { width: 100%; }
.overlay-open { overflow: hidden; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: -.9px; }
.brand:hover { text-decoration: none; }
.brand-period { color: #7fa680; }
.workspace-switcher { padding: 10px 8px; gap: 8px; }
.workspace-monogram { width: 28px; height: 28px; border: 1px solid #dfe6d8; border-radius: 6px; display: grid; place-items: center; background: #f7f9f2; font-size: 12px; font-weight: 650; color: #7a8d6e; flex-shrink: 0; }
.workspace-switcher strong { font-size: 10px; font-weight: 600; display: block; }
.workspace-switcher small { font-size: 9px; color: #86927c; }
.tools-label { margin-top: 20px; }
.sidebar-user>span:nth-child(2) { flex: 1; }
.sidebar-user>.button { padding: 3px; width: 23px; min-height: 25px; }
.demo-note { border: 1px solid #e0e7d9; background: #f1f5ec; border-radius: 9px; padding: 12px; font-size: 10px; color: #6d7d65; }
.demo-note>div { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #607953; }
.demo-note svg { width: 14px; height: 14px; }
.demo-note strong { font-size: 10px; font-weight: 600; }
.demo-note p { line-height: 1.7; }
.demo-note .button { margin-top: 8px; padding-left: 0; color: #69865b; font-size: 10px; }
.export-link { margin-top: 15px; padding: 9px; font-size: 11px; }
.breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 11px; color: #97a08f; white-space: nowrap; }
.breadcrumb strong { font-weight: 550; color: #66765b; }
.breadcrumb svg { width: 12px; height: 12px; }
.topbar-actions { flex: 0 1 510px; justify-content: flex-end; min-width: 0; }
.global-search { width: 270px; max-width: 100%; }
.search-shortcut { font-size: 10px; border: 1px solid #e1e7da; border-radius: 4px; padding: 0 5px; color: #8b997f; }
.local-label { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; white-space: nowrap; color: #8c9b80; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #76a97c; }
.profile-button { padding: 0; border: 0; background: transparent; border-radius: 50%; }
.user-avatar { color: var(--avatar-color,#4b785e); background: color-mix(in srgb,var(--avatar-color,#4b785e) 11%,white); }
.workspace-footer { display: flex; justify-content: space-between; gap: 12px; padding: 0 35px 20px; color: #9da68f; font-size: 10px; }
.metric-top { color: #7a8872; font-size: 11px; padding-right: 27px; }
.metric-top .metric-icon { top: 16px; }
.metric-value { margin-top: 13px; }
.calendar-toolbar { justify-content: space-between; }
.calendar-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.calendar-toolbar-actions .view-switch { margin-left: 0; flex-shrink: 0; }
.calendar-toolbar-actions .lineup-toggle { flex-shrink: 0; }
.calendar-layout.lineup-collapsed { grid-template-columns: minmax(0,1fr); }
#calendar-lineup[hidden] { display: none; }
.calendar-date-nav { display: flex; align-items: center; gap: 4px; }
.calendar-date-nav h2 { margin-right: 12px; }
.filter-row .calendar-legend { margin-left: auto; border: 0; padding: 0; gap: 5px; font-size: 9px; }
.legend-dot { background: #89ac90; }
.invoice-dot { background: #b09cca; margin-left: 8px; }
.muted-dot { background: #e4eade; }
.select-wrap { min-width: 0; }
.day-number { border: 0; background: transparent; padding: 0; }
.today .day-number { background: var(--primary); }
.event-copy { min-width: 0; flex: 1; }
.event-copy strong { display: block; font-size: inherit; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-copy small { display: block; font-size: 9px; margin-top: 3px; opacity: .8; }
.event-dot { width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.status-dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.agenda-heading { display: block; border-bottom: 1px solid var(--border); padding-bottom: 19px; }
.agenda-heading .eyebrow { font-size: 9px; color: #92a088; letter-spacing: 1.2px; margin-bottom: 10px; }
.agenda-heading h2 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.agenda-heading h2 span { display: block; font-size: 12px; color: #88987c; font-weight: 400; margin-top: 4px; letter-spacing: 0; }
.count-label { color: #94a187; font-size: 10px; }
.agenda-heading>.count-label { display: block; margin-top: 14px; }
button.agenda-item, .day-phase, .attention-row, .upcoming-row, .job-invoice, .agenda-row-main { background: transparent; border: 0; text-align: left; width: 100%; }
button.agenda-item { border-bottom: 1px solid #edf0e8; width: 100%; }
.agenda-item-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; background: #f0f5ec; color: #7d9873; flex-shrink: 0; }
.agenda-item-icon.invoice { background: #f2eef7; color: #a18bb5; }
.agenda-item-icon svg { width: 14px; height: 14px; }
.agenda-item>span:nth-child(2) { min-width: 0; flex: 1; }
.agenda-item strong { display: block; font-size: 11px; font-weight: 550; color: #4d6743; }
.agenda-item small { display: block; font-size: 10px; color: #8b9a7f; margin: 3px 0 7px; }
.agenda-item>svg:last-child { width: 12px; height: 12px; color: #a7b39c; margin-top: 5px; }
.agenda-item:hover { background: #fbfdf8; }
.agenda-todos { margin-top: 23px; }
.agenda-todos .section-heading { margin-bottom: 5px; }
.agenda-todos h3 { font-size: 12px; }
.agenda-todos .section-heading>span { color: #9fac92; font-size: 10px; }
.todo-row { display: flex; align-items: flex-start; gap: 9px; padding: 13px 0; border-bottom: 1px solid #edf0e6; cursor: pointer; }
.todo-row input { margin: 2px 0 0; }
.todo-row>span:first-of-type { flex: 1; min-width: 0; }
.todo-row strong { display: block; font-size: 12px; font-weight: 550; color: #677c5a; }
.todo-row small { display: block; font-size: 10px; color: #91a083; margin-top: 3px; }
.todo-row.done strong { text-decoration: line-through; color: #9dab90; }
.agenda-todos .todo-row strong { font-size: 11px; }
.agenda-todos .todo-row small { font-size: 9px; }
.agenda-add { padding-top: 13px; }
.review-callout { position: relative; }
.review-callout .callout-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eee7d1; color: #a99860; margin-bottom: 10px; }
.text-button { border: 0; padding: 0; color: #45836c; font-size: 12px; background: transparent; font-weight: 550; text-align: left; }
.text-button:hover { text-decoration: underline; }
.text-button svg { width: 13px; height: 13px; margin-left: 4px; }
.review-callout .text-button { color: #9c874a; font-size: 11px; }
.quiet-day { text-align: center; padding: 30px 10px; color: #a1af92; }
.quiet-day>svg { display: block; margin: 0 auto 13px; width: 28px; height: 28px; }
.quiet-day strong { font-size: 12px; color: #849878; }
.quiet-day p { font-size: 11px; margin-top: 7px; }
.week-day { border-right: 1px solid var(--border); min-height: 430px; min-width: 0; }
.week-day:last-child { border: 0; }
.week-day.today, .week-day.selected { background: #f6faf1; }
.week-day-heading { background: #fafbf7; border: 0; border-block: 1px solid var(--border); text-align: center; width: 100%; padding: 13px 0; }
.week-day-heading>span { display: block; text-transform: uppercase; color: #9aaa8d; letter-spacing: 1px; font-size: 9px; }
.week-day-heading strong { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; margin: 4px auto 0; font-size: 15px; font-weight: 500; color: #728565; }
.week-day.today .week-day-heading strong { background: var(--primary); color: white; }
.week-day-events { padding: 9px 5px; }
.week-day .event-copy strong { white-space: normal; line-height: 1.4; }
.no-events { display: block; padding: 10px 3px; font-size: 9px; text-align: center; color: #b0bba4; }
.agenda-row { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); padding: 15px 0; }
.agenda-row-date { width: 34px; text-align: center; flex-shrink: 0; }
.agenda-row-date strong { display: block; color: #769268; font-size: 18px; font-weight: 500; }
.agenda-row-date>span { color: #a1ae94; text-transform: uppercase; font-size: 8px; letter-spacing: .5px; }
.agenda-row-main { flex: 1; padding: 0; }
.agenda-row-main strong { display: block; font-size: 12px; font-weight: 550; }
.agenda-row-main small { display: block; font-size: 10px; color: #8ea17f; margin-top: 3px; }
.agenda-range { font-size: 10px; color: #98a78c; white-space: nowrap; }
.jobs-filter { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding: 16px 18px; }
.jobs-filter .filter-row { padding: 0; }
.result-count { font-size: 10px; color: #8fa180; }
button.job-card { text-align: left; color: inherit; font-family: inherit; }
.job-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.job-card h2 { font-size: 17px; letter-spacing: -.35px; margin-bottom: 6px; }
.job-card .job-customer { color: #7f9470; font-size: 12px; }
.job-card .job-address { display: flex; align-items: center; gap: 5px; font-size: 10px; margin-top: 12px; }
.job-address svg { width: 12px; height: 12px; }
.job-card-progress { display: flex; justify-content: space-between; margin: 24px 0 9px; font-size: 10px; color: #93a385; }
.job-card-progress strong { color: #68835b; font-weight: 500; }
.progress-fill { display: block; }
.job-card-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; color: #839a74; margin-top: 17px; }
.job-card-bottom span { display: flex; align-items: center; gap: 5px; }
.job-card-bottom svg { width: 12px; height: 12px; }
.job-card-assignee { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 18px; font-size: 11px; color: #7b916c; }
.job-card-assignee>.user-avatar { width: 26px; height: 26px; font-size: 9px; }
.job-card-assignee>svg { margin-left: auto; width: 14px; height: 14px; color: #a4b099; }
.two-column { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 21px; align-items: start; }
.panel-heading { padding: 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h2 { font-size: 15px; margin: 0; }
.day-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 21px; }
.inline-field { flex-direction: row; align-items: center; font-size: 11px; }
.inline-field input { width: auto; padding: 7px 10px; font-size: 11px; min-height: 35px; }
.day-toolbar>.muted { margin-left: auto; font-size: 11px; }
.task-group { padding: 18px 21px; border-bottom: 1px solid var(--border); }
.task-group:last-child { border: 0; }
.task-group h3 { font-size: 11px; text-transform: uppercase; color: #8d9f7d; letter-spacing: .6px; display: flex; gap: 9px; align-items: center; margin-bottom: 5px; }
.task-group h3 span { background: #f1f5eb; padding: 0 5px; border-radius: 3px; font-size: 9px; }
.task-group h3.overdue-heading { color: #b28a62; }
.overdue-label { color: #b98265; font-size: 9px; }
.task-group .empty-state { padding: 25px 15px; }
.dated-todo { display: flex; align-items: center; gap: 10px; }
.dated-todo .todo-row { flex: 1; }
.dated-todo>small { color: #a2b093; font-size: 10px; white-space: nowrap; }
.completed-tasks>summary { cursor: pointer; color: #8fa180; font-size: 12px; }
.day-phase, .attention-row, .upcoming-row { display: flex; align-items: flex-start; gap: 13px; padding: 19px 21px; border-bottom: 1px solid var(--border); }
.day-phase:hover, .attention-row:hover, .upcoming-row:hover { background: #fcfdf8; }
.day-phase>span:nth-child(2), .attention-row>span:nth-child(2), .upcoming-row>span:nth-child(2) { flex: 1; min-width: 0; }
.day-phase strong, .attention-row strong, .upcoming-row strong { display: block; color: #617951; font-size: 12px; font-weight: 550; }
.day-phase small, .attention-row small, .upcoming-row small { display: block; font-size: 10px; color: #93a482; margin-top: 3px; }
.day-phase em, .attention-row p { display: block; font-size: 11px; font-style: normal; color: #ae8d68; line-height: 1.6; margin-top: 10px; }
.phase-icon, .attention-icon { width: 30px; height: 30px; display: grid; place-items: center; background: #f1f6e9; color: #89a175; border-radius: 7px; flex-shrink: 0; }
.attention-icon.blocked { background: #fcf3e9; color: #c2a077; }
.attention-icon.review { background: #f6f2e5; color: #b6a56c; }
.attention-row>.icon { width: 13px; height: 13px; margin-top: 7px; color: #aab79a; }
.overview-grid>.panel { padding: 0; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 21px; }
.table-toolbar select { width: 150px; min-height: 32px; font-size: 11px; padding: 5px 8px; }
.number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance { font-weight: 600; }
.table-footer { display: flex; justify-content: space-between; padding: 16px 21px; color: #95a587; font-size: 10px; background: #fcfdf9; }
.payment-summary { padding: 21px; border-bottom: 1px solid var(--border); }
.payment-summary:last-child { border: 0; }
.payment-summary h3 { font-size: 12px; color: #80946d; font-weight: 500; }
.payment-total { font-size: 24px; color: #526d43; font-weight: 600; letter-spacing: -.5px; margin: 11px 0 14px; }
.payment-total small { margin-left: 8px; font-size: 10px; font-weight: 400; letter-spacing: 0; color: #a0ae92; }
.payment-bar { height: 7px; border-radius: 4px; background: #eaf0e2; overflow: hidden; }
.payment-bar>span { display: block; height: 100%; background: #87a875; border-radius: 4px; }
.payment-key { display: flex; gap: 22px; margin-top: 15px; }
.payment-key>span { font-size: 10px; color: #8fa27e; }
.payment-key .legend-dot { margin-right: 5px; }
.payment-key strong { display: block; font-size: 14px; font-weight: 550; color: #698155; margin: 5px 0 0 10px; }
.upcoming-date { width: 38px; text-align: center; border: 1px solid #e2ead9; border-radius: 6px; padding: 5px; flex-shrink: 0; }
.upcoming-date strong { font-size: 17px; font-weight: 500; }
.upcoming-date small { text-transform: uppercase; font-size: 8px; letter-spacing: .4px; }
.activity-row { display: flex; gap: 13px; padding: 14px 21px; font-size: 11px; }
.activity-row p { color: #91a280; line-height: 1.7; }
.activity-row strong { color: #738d61; font-weight: 550; }
.activity-row time { color: #a8b29c; font-size: 9px; display: block; margin-top: 5px; }
.team-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; }
.team-card-top .user-avatar { width: 43px; height: 43px; font-size: 14px; }
.team-card h2 { font-size: 18px; }
.team-card>a { display: inline-block; margin-top: 10px; color: #7f9670; font-size: 11px; }
.team-stats { display: flex; gap: 20px; border-top: 1px solid var(--border); margin-top: 20px; padding-top: 15px; color: #91a280; font-size: 10px; }
.team-stats strong { display: block; font-weight: 550; font-size: 20px; color: #668152; margin-bottom: 2px; }
.team-access { font-size: 10px; color: #98a88b; margin-top: 17px; display: flex; gap: 6px; align-items: center; }
.team-access svg { width: 13px; height: 13px; }
.template-intro { display: flex; gap: 15px; align-items: center; padding: 20px; margin-bottom: 23px; background: #f0f5e9; border-color: #dfe8d5; }
.template-intro>svg { width: 24px; height: 24px; color: #85a074; }
.template-intro strong { font-size: 13px; color: #668050; font-weight: 600; }
.template-intro p { color: #8ca077; font-size: 11px; margin-top: 4px; }
.template-icon { width: 37px; height: 37px; background: #f0f5e8; color: #87a16e; border-radius: 9px; display: grid; place-items: center; margin-bottom: 20px; }
.template-card h2 { font-size: 18px; margin-bottom: 6px; }
.template-card { display: flex; flex-direction: column; }
.template-card ol { flex: 1; }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.drawer-body { height: calc(100dvh - 113px); overflow-y: auto; }
.job-drawer { overflow: hidden; }
.job-detail-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.job-facts>div>span { display: block; color: #94a385; font-size: 10px; margin-bottom: 4px; }
.job-facts strong { display: block; color: #6b805c; font-size: 12px; font-weight: 500; }
.job-notes { margin-bottom: 27px; }
.drawer-body .section-heading>span { font-size: 10px; color: #92a183; }
.phase-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.phase-card-heading h4 { color: #59724a; font-size: 13px; }
.phase-card-heading p { font-size: 10px; color: #96a588; margin-top: 5px; }
.phase-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.phase-footer>small { font-size: 9px; color: #a3af95; }
.phase-footer .phase-actions { margin: 0; }
.blocker-note { display: flex; gap: 8px; align-items: flex-start; }
.blocker-note svg { width: 13px; height: 13px; margin-top: 2px; flex-shrink: 0; }
.updates-heading { margin-top: 30px; }
.upload-button { position: relative; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 11px; color: #7c9469; }
.upload-button svg { width: 14px; height: 14px; }
.upload-button input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; max-width: none; cursor: pointer; }
.file-name { flex: 1; font-size: 9px; color: #94a782; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-hint { font-size: 10px; color: #97a88a; margin-top: 10px; line-height: 1.65; }
.update-card { display: block; padding-bottom: 19px; border-bottom: 1px solid #e6edde; }
.update-author { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.update-author strong { font-size: 11px; font-weight: 600; color: #70865e; display: block; }
.update-author time { font-size: 9px; color: #a0af92; display: block; margin-top: 2px; }
.update-card p { line-height: 1.75; }
.job-invoice { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--border); align-items: center; }
.job-invoice strong { font-size: 11px; color: #6f875c; display: block; }
.job-invoice small { display: block; font-size: 9px; color: #a0ae92; margin-top: 4px; }
.job-invoice>span:nth-child(2) { font-size: 12px; color: #789164; text-align: right; white-space: nowrap; }
.modal-header p { font-size: 12px; color: #91a183; margin-top: 7px; line-height: 1.6; }
.optional { color: #a7b298; font-size: 10px; font-weight: 400; }
.form-note { padding: 13px; margin-top: 18px; background: #f3f7ed; border-radius: 7px; display: flex; gap: 8px; font-size: 11px; color: #8da078; align-items: flex-start; line-height: 1.7; }
.form-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.modal-body>.field { margin-bottom: 17px; }
.invoice-modal-summary { border: 1px solid var(--border); border-radius: 8px; padding: 17px; margin-bottom: 22px; font-size: 12px; }
.invoice-modal-summary>.badge { float: right; }
.invoice-modal-summary>div { display: flex; gap: 25px; margin-top: 15px; font-size: 10px; color: #94a584; }
.invoice-modal-summary strong { display: block; color: #587449; font-size: 22px; font-weight: 500; margin-top: 4px; }
.payment-help { font-size: 11px; color: #8c9e7d; line-height: 1.7; margin-top: 18px; }
.payment-help .button { padding-left: 0; margin-top: 7px; }
.demo-guide { font-size: 12px; color: #8b9e7b; }
.demo-guide ol { padding-left: 20px; }
.demo-guide li { padding: 8px 0; line-height: 1.8; }
.demo-guide strong { color: #627f50; font-weight: 600; }
.demo-guide>.muted { font-size: 11px; margin-top: 18px; }
.toast { display: flex; align-items: center; gap: 10px; }
.toast>.button { color: #ffffffa0; min-height: 20px; width: 20px; padding: 0; }
.login-story>.brand { color: #f1f6e9; font-size: 26px; }
.login-story .brand-mark { width: 36px; height: 36px; }
.login-story-content { padding: 50px 0; }
.login-illustration { max-width: 430px; padding: 21px 25px; margin-top: 40px; border: 1px solid #ffffff19; background: #ffffff07; border-radius: 12px; transform: rotate(-2deg); }
.illustration-title { display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: 1.5px; color: #9cb99d; margin-bottom: 9px; }
.illustration-title svg { width: 14px; height: 14px; }
.illustration-title>.live-dot { margin-left: auto; }
.illustration-row { display: flex; align-items: center; gap: 14px; padding: 19px 0; border-bottom: 1px solid #ffffff10; }
.illustration-day { border: 1px solid #ffffff19; background: #ffffff04; border-radius: 6px; color: #94b28c; padding: 6px 8px; text-align: center; font-size: 7px; letter-spacing: 1px; }
.illustration-day b { font-size: 17px; font-weight: 500; letter-spacing: -.5px; color: #d8e8cf; }
.illustration-row>div { flex: 1; }
.illustration-row strong { font-size: 12px; color: #c8dcbf; display: block; font-weight: 500; }
.illustration-row small { font-size: 9px; color: #88a87d; display: block; margin-top: 5px; }
.illustration-row>svg { width: 14px; height: 14px; color: #8fac82; }
.mini-check { width: 21px; height: 21px; border: 1px solid #8baa7f60; border-radius: 50%; display: grid; place-items: center; color: #a9c79b; }
.mini-check svg { width: 12px; height: 12px; }
.illustration-footer { display: flex; align-items: center; gap: 12px; padding-top: 19px; color: #88aa7c; font-size: 9px; }
.avatar-stack { display: flex; padding-left: 5px; }
.avatar-stack i { width: 25px; height: 25px; margin-left: -5px; background: #8fa57b; border: 2px solid #274c3b; border-radius: 50%; display: grid; place-items: center; color: #23422d; font-size: 7px; font-style: normal; }
.avatar-stack i:nth-child(2) { background: #c3b997; }
.avatar-stack i:nth-child(3) { background: #91b1b0; }
.login-form-wrap>.local-label { font-size: 9px; letter-spacing: 1px; margin-bottom: 22px; }
.login-form-wrap>p.muted { margin: 9px 0 27px; font-size: 12px; }
.demo-divider { display: flex; align-items: center; gap: 14px; margin: 27px 0 12px; color: #98a98a; font-size: 8px; letter-spacing: 1.1px; }
.demo-divider::before, .demo-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.demo-intro { font-size: 10px; color: #94a784; text-align: center; margin-bottom: 15px; }
.demo-password { font-size: 10px; color: #98a88a; text-align: center; margin-top: 13px; }
.demo-password code { color: #768f65; background: #f1f5e9; padding: 2px 5px; border-radius: 4px; }
.login-footnote { font-size: 10px; color: #a1af92; display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 25px; }
.login-footnote svg { width: 13px; height: 13px; }
.startup-error { padding: 15vh 25px; max-width: 650px; margin: auto; }
.startup-error h1 { margin: 35px 0 15px; }
.startup-error p { margin: 15px 0; color: var(--muted); }
.table-wrap { position: relative; }
.sr-only { top: 0; left: 0; clip-path: inset(50%); }
.view-switch button { white-space: nowrap; }
.calendar-footnote { display: flex; justify-content: space-between; gap: 14px; margin-top: 16px; color: #7e8b73; font-size: 10px; }
.calendar-footnote svg { width: 13px; height: 13px; margin-right: 4px; }
.page-description, .metric-detail, .metric-note, .metric-top, .count-label,
.field-hint, .job-notes, .update-card p, .phase-card-heading p, .todo-row small,
.agenda-item small, td small, .team-card p, .template-card p { color: #708068; }
.calendar-event { color: #4e6f83; }
.calendar-event.status-in_progress { color: #39715b; }
.calendar-event.status-blocked { color: #975d46; }
.calendar-event.status-review { color: #887133; }
.calendar-event.status-complete { color: #607454; }
.calendar-event.event-invoice { color: #7e689a; }
.badge.status-planned { color: #576f80; }
.badge.status-in_progress { color: #3d7656; }
.badge.status-review, .badge.status-partial { color: #806b29; }
.badge.status-blocked, .badge.status-overdue { color: #985a40; }
.badge.status-complete, .badge.status-paid { color: #4d7142; }
.badge.status-unpaid { color: #72608b; }
.event-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar { overflow-y: auto; scrollbar-width: thin; }

/* Private appointments and invoice correspondence */
.booking-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(290px,.85fr); gap: 22px; align-items: start; }
.booking-layout>.panel { min-width: 0; }
.booking-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 21px; }
.booking-toolbar .field { min-width: 150px; max-width: 260px; flex: 1; }
.booking-toolbar .field input, .booking-toolbar .field select { font-size: 12px; }
.booking-toolbar .muted { font-size: 11px; padding-bottom: 10px; }
.booking-privacy, .email-banner { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #dbe7d9; background: #edf5ec; border-radius: 9px; padding: 15px 18px; margin-bottom: 22px; color: #627a59; font-size: 12px; line-height: 1.7; }
.booking-privacy>svg, .email-banner>svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.booking-privacy strong, .email-banner strong { display: inline; font-size: 12px; font-weight: 650; color: #3f664c; }
.booking-privacy p, .email-banner p { margin-top: 3px; }
.email-banner { background: #f3f1e9; border-color: #e9e2ce; color: #88784e; }
.email-banner strong { color: #79683c; }
.email-banner .button { margin-left: auto; }
.booking-section { margin-bottom: 22px; }
.booking-section>.field-hint { padding-inline: 20px; }
.booking-section:last-child { margin-bottom: 0; }
.booking-row { display: flex; width: 100%; text-align: left; background: transparent; align-items: flex-start; gap: 13px; padding: 19px 20px; border: 0; border-bottom: 1px solid var(--border); }
.booking-row:hover { background: #f6f8f1; }
.booking-row:last-child { border-bottom: 0; }
.booking-time { flex: 0 0 90px; color: #587863; font-size: 12px; font-variant-numeric: tabular-nums; }
.booking-time strong { display: block; color: #355d46; font-size: 14px; font-weight: 600; }
.booking-time small { display: block; color: #7e9178; font-size: 10px; margin-top: 3px; }
.booking-meta { min-width: 0; flex: 1; }
.booking-meta strong, .booking-meta h3 { display: block; color: #395d48; font-size: 13px; font-weight: 600; }
.booking-meta small, .booking-meta p { display: block; color: #74866b; font-size: 11px; margin-top: 4px; line-height: 1.6; }
.booking-meta .badge { margin-top: 7px; }
.booking-status { margin-left: auto; }
.booking-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 11px; }
.booking-row>.booking-actions { margin-top: 0; }
.booking-day-group { padding: 19px 20px; border-bottom: 1px solid var(--border); }
.booking-day-group:last-child { border: 0; }
.booking-day-group>h3 { display: flex; justify-content: space-between; gap: 9px; color: #53744d; font-size: 13px; margin-bottom: 12px; }
.booking-day-group>h3 small { font-size: 10px; color: #8ca081; font-weight: 400; }
.booking-slot-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(115px,1fr)); gap: 9px; }
.booking-slot { display: flex; flex-direction: column; gap: 2px; border: 1px solid #d6e4d4; border-radius: 7px; background: #fbfdf9; color: #40745b; min-height: 43px; padding: 10px 8px; font-size: 12px; font-weight: 550; }
.booking-slot:hover, .booking-slot.selected { border-color: #7fa991; background: #eaf3e8; }
.booking-slot:focus-visible { outline-color: #5c947a; }
.booking-slot small { display: block; font-size: 9px; font-weight: 400; color: #7c9670; margin-top: 2px; }
.booking-slot:disabled { opacity: .45; }
.booking-empty { padding: 35px 22px; text-align: center; color: #819276; }
.booking-empty h3 { color: #597448; margin-bottom: 7px; }
.availability-list { padding: 0 20px; }
.availability-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.availability-list .availability-row { padding-inline: 0; }
.availability-row:last-child { border: 0; }
.availability-row>div:first-child { display: block; min-width: 0; }
.availability-row strong { color: #4a6a43; font-size: 12px; font-weight: 600; }
.availability-row small, .availability-row p { display: block; font-size: 11px; line-height: 1.6; color: #7c9071; margin-top: 4px; }
.availability-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.availability-weekdays { display: flex; gap: 7px; flex-wrap: wrap; grid-column: 1/-1; }
.availability-weekdays label { display: inline-flex; align-items: center; gap: 6px; background: #f6f9f1; padding: 8px 10px; border: 1px solid #e2ead8; border-radius: 6px; color: #6d875d; font-size: 11px; }
.availability-weekdays input { width: 14px; min-height: 14px; height: 14px; margin: 0; }
.availability-summary { padding: 14px; background: #eef5eb; border-radius: 7px; color: #64845a; font-size: 12px; margin-bottom: 18px; }
.badge.status-confirmed { color: #416c87; background: #eaf2f8; }
.badge.status-cancelled, .badge.status-inactive { color: #8b8f85; background: #f1f2ee; }
.badge.status-preview { color: #8b713e; background: #f8f1df; }
.badge.status-sent { color: #3e7750; background: #e9f4e8; }
.badge.status-failed { color: #9b5743; background: #faece6; }
.calendar-event.event-booking { color: #5e6899; border-left-color: #9ba4cb; background: #eceffa; }
.calendar-event.event-private, .calendar-event.event-block { color: #7c7b76; border-left-color: #aba99c; background: #f0f0e9; }
.booking-detail { border: 1px solid var(--border); border-radius: 9px; padding: 17px; margin: 16px 0; }
.booking-detail p { font-size: 12px; color: #6f8563; margin: 8px 0; }
.booking-detail strong { color: #42623e; }
.booking-notes { background: #f7f8f2; border: 1px solid var(--border); padding: 13px; border-radius: 7px; white-space: pre-wrap; color: #73886a; font-size: 12px; }
.email-status { font-size: 10px; color: #839177; display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.email-status small { font-size: 9px; color: #97a489; }
.email-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 15px 0; }
.email-history { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.email-history>h3 { font-size: 14px; margin-bottom: 12px; }
.email-history-item { border: 1px solid var(--border); border-radius: 8px; padding: 15px; margin-top: 12px; background: #fcfdf9; }
.email-history-item strong { font-size: 12px; color: #56764d; font-weight: 600; }
.email-history-item p, .email-history-item small { font-size: 10px; color: #7e9171; margin-top: 5px; display: block; }
.email-history-item .email-actions { margin: 11px 0 0; gap: 6px; }
.email-history-item .button { font-size: 10px; }
.email-history-empty { font-size: 11px; color: #879c79; padding: 12px 0; }
.email-compose .field { margin-bottom: 15px; }
.email-compose textarea { min-height: 115px; }
.email-preview-frame { width: 100%; height: 375px; border: 1px solid var(--border); border-radius: 8px; background: white; margin: 14px 0; }
.email-meta { display: grid; grid-template-columns: 80px 1fr; gap: 7px 12px; font-size: 12px; padding: 15px; background: #f6f8f2; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; }
.email-meta dt { color: #8b9b7f; }
.email-meta dd { margin: 0; color: #617a54; overflow-wrap: anywhere; }
.email-message { font-size: 12px; color: #658057; line-height: 1.8; white-space: pre-wrap; background: #f8faf4; padding: 17px; border-radius: 8px; margin-top: 16px; }
.email-preview-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 15px; }
@media(max-width:1100px) { .booking-layout { grid-template-columns: 1fr; } }
@media(max-width:740px) {
 .calendar-date-nav h2 { white-space: nowrap; width: auto; }
 .booking-toolbar { gap: 10px; }
 .booking-toolbar .field { min-width: 120px; max-width: 100%; }
 .booking-privacy, .email-banner { padding: 13px; font-size: 11px; }
 .booking-row { padding: 16px; flex-wrap: wrap; gap: 10px; }
 .booking-time { flex-basis: 73px; font-size: 11px; }
 .booking-time strong { font-size: 13px; }
 .booking-row>.booking-actions { width: 100%; margin-left: 83px; }
 .booking-slot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .booking-slot { min-height: 44px; }
 .booking-day-group { padding: 16px; }
 .availability-list { padding: 0 16px; }
 .availability-weekdays { gap: 5px; }
 .availability-weekdays label { font-size: 10px; padding: 7px; }
 .email-preview-frame { height: 350px; }
 .email-meta { grid-template-columns: 1fr; gap: 3px; }
 .email-meta dd { margin-bottom: 9px; }
 .email-actions .button { font-size: 10px; }
 .email-banner { flex-wrap: wrap; }
}

@media(max-width:1200px) {
 .breadcrumb { font-size: 10px; }
 .calendar-date-nav { flex-wrap: wrap; }
 .calendar-date-nav h2 { margin-right: 5px; }
 .filter-row .calendar-legend { display: none; }
 .phase-footer { flex-wrap: wrap; }
 .metric-value { font-size: 24px; }
 .two-column { grid-template-columns: 1fr; }
 .overview-grid { grid-template-columns: 1fr 1fr; }
 .attention-row, .upcoming-row { flex-wrap: wrap; }
 .attention-row>.badge, .upcoming-row>.badge { margin-left: 43px; }
}
@media(max-width:1000px) {
 .topbar-actions>.local-label { display: none; }
 .topbar-actions { flex-basis: 300px; }
 .global-search { width: 230px; }
 .overview-grid { grid-template-columns: 1fr; }
 .agenda-heading h2 span { display: inline-block; margin-left: 8px; }
 .agenda-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
 .agenda-todos .todo-row { padding: 11px 0; }
 .review-callout { padding: 16px; }
 .review-callout .callout-icon { float: left; margin-right: 11px; }
 .login-story { padding: 40px 35px; }
 .login-illustration { padding: 17px; }
 .login-illustration strong { font-size: 10px; }
}
@media(max-width:740px) {
 html, body { overflow-x: clip; }
 .sidebar { visibility: hidden; }
 .app-shell.nav-open .sidebar { visibility: visible; }
 .app-shell.nav-open .sidebar { transform: translateX(0); }
 .nav-scrim { position: fixed; inset: 0; border: 0; background: #223d2f70; z-index: 25; }
 .breadcrumb { display: none; }
 .topbar-actions { flex: 1; }
 .global-search { width: auto; }
 .topbar-actions>.profile-button { margin-left: 5px; }
 .topbar-actions>.global-search { margin-right: auto; }
 .workspace-footer { padding: 0 16px 18px; font-size: 8px; flex-wrap: wrap; }
 .calendar-date-nav { gap: 1px; }
 .calendar-date-nav h2 { margin-right: 2px; }
 .calendar-toolbar-actions { width: 100%; justify-content: space-between; }
 .filter-row .select-wrap { max-width: 33%; }
 .filter-row .select-wrap select { max-width: 100%; width: 100%; }
 .week-grid { min-width: 570px; }
 .agenda-range { display: none; }
 .agenda-row { gap: 9px; }
 .agenda-row .badge { font-size: 8px; }
 .agenda-items { grid-template-columns: 1fr; }
 .jobs-filter { padding: 13px; gap: 8px; }
 .jobs-filter .filter-row { flex: 1; }
 .jobs-filter .select-wrap { max-width: 46%; }
 .result-count { font-size: 9px; white-space: nowrap; }
 .day-toolbar { flex-wrap: wrap; }
 .day-toolbar>.muted { width: 100%; margin: 0; font-size: 10px; }
 .day-phase { flex-wrap: wrap; }
 .day-phase>.badge { margin-left: 43px; }
 .table-toolbar { padding: 13px; }
 .table-toolbar select { max-width: 115px; }
 .table-footer { gap: 10px; flex-wrap: wrap; }
 .drawer-header h2 { font-size: 22px; }
 .drawer-body { height: calc(100dvh - 110px); padding-bottom: 45px; }
 .phase-card { padding: 14px; }
 .phase-card-heading { align-items: flex-start; }
 .phase-card-heading h4 { font-size: 12px; }
 .phase-card-heading .badge { font-size: 8px; }
 .job-invoice { flex-wrap: wrap; }
 .job-invoice>span:first-child { flex: 1; }
 .job-invoice>.badge { display: none; }
 .login-story { padding: 27px 28px; }
 .login-story-content { padding: 30px 0 0; }
 .login-story-content .eyebrow { font-size: 9px; }
 .login-illustration { display: none; }
 .login-story h1 { font-size: 35px; }
 .login-panel { padding: 30px 28px; }
 .login-form-wrap>.local-label { margin-bottom: 13px; }
 .demo-account { padding: 10px 12px; }
 .demo-accounts { gap: 7px; }
}