/* Shared light palette. Loaded last so legacy component layouts stay intact. */
:root {
  color-scheme: light;
  --ink: #202d43;
  --text: #202d43;
  --navy: #fff;
  --cream: #f3f6fa;
  --white: #fff;
  --surface-2: #f7f9fc;
  --muted: #5e6d82;
  --line: #dce3ec;
  --blue: #2563cf;
  --green: #167449;
  --shadow: 0 3px 14px rgba(35, 55, 85, .045);
}
html, body { background: var(--cream); color: var(--ink); }
body .main { background-image: none; }
body .sidebar { background: #fff; border-right: 1px solid var(--line); }
body .brand small, body .account small { color: var(--muted); }
body .sidebar nav a { color: #53627a; }
body .sidebar nav a:hover { background: #f1f5fb; border-color: transparent; }
body .sidebar nav a.active { background: #eaf2ff; border-color: #d5e4fb; color: #205bb9; box-shadow: inset 3px 0 #2563cf; }
body .card, body .today, body .task-overview > div,
body .reports-kpis article, body .opportunity-kpis > a {
  background: #fff; color: var(--ink); border: 1px solid var(--line); backdrop-filter: none;
}
body .stat:after { display: none; }
body .eyebrow, body .back-link, body .client-card footer,
body .credential-link, body .login-recovery, body .task-form-section-title,
body .tasks-result-count strong, body .client-total strong, body .reports-result strong,
body .client-project-card footer strong, body .opportunity-timeline span { color: #245fbe; }
body .btn, body .avatar, body .employee-avatar, body .client-monogram {
  background: #2563cf !important; color: #fff; box-shadow: none !important;
}
body .btn:hover { background: #1c50ae !important; }
body .btn.secondary { background: #fff !important; color: #34465f; border: 1px solid #cbd5e1 !important; }
body .btn.secondary:hover { background: #edf3fc !important; border-color: #94accd !important; }
body .btn.danger { background: #fff1f1 !important; color: #ac283b; border: 1px solid #f1c8cf !important; }
body .btn.danger:hover { background: #ffe4e7 !important; }
body .opportunity-win { background: #167449 !important; color: #fff; }
body :is(input, select, textarea) { accent-color: #2563cf; }
body :is(.field, .task-manage-form .field, .opportunity-editor .field) :is(input, select, textarea), body .task-status-select,
body .tasks-table .task-status-select, body .history-note-form textarea,
body .inline-create :is(input, select), body .project-upload-drop > input,
body .calendar-employee-filter select {
  background: #fff; color: var(--ink); border: 1px solid #cbd5e1;
}
body .inline-create :is(input, select) { padding: 10px; }
body .field label, body .task-manage-form .field label,
body .opportunity-editor .field label, body dialog .field label { color: #46576d; }
body :is(.field, .task-manage-form .field, .opportunity-editor .field) :is(input, select, textarea)::placeholder { color: #69788d; }
body :is(.field, .task-manage-form .field, .opportunity-editor .field) :is(input, select, textarea):hover, body .task-status-select:hover { border-color: #8ea3bd; }
body :is(.field, .task-manage-form .field, .opportunity-editor .field) :is(input, select, textarea):focus, body .task-status-select:focus,
body .history-note-form textarea:focus {
  background: #fff; border-color: #2563cf; outline: 3px solid #dce9fc; box-shadow: none;
}
body :focus-visible { outline: 3px solid #80a7e7; outline-offset: 2px; }
body .task-manage-form input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .75; }
body .muted, body .table th, body .project-code, body .employee-contact,
body .date-picker-help, body .visibility-toggle small, body .task-save-bar small,
body .tasks-result-count small, body .task-overview small, body .project-progress small,
body .client-project-data small, body .client-project-card footer,
body .reports-kpis :is(small, p), body .reports-result small, body .status-legend span,
body .attention-list small, body .reports-ok small, body .reports-table-head > small,
body .reports-table td > small, body .report-progress small,
body .opportunity-kpis :is(small, span), body .opportunity-name small,
body .opportunity-probability small, body .next-action, body .opportunity-timeline time {
  color: var(--muted);
}
body .task-description, body .task-person, body .project-client, body .project-manager,
body .opportunity-timeline p { color: #34465f; }
body .task-planning, body .project-planning, body .task-person.is-empty,
body .project-manager.is-empty { color: var(--muted); }
body .table td, body .attention-list a, body .opportunity-timeline article > div { border-color: var(--line); }
body .table tbody tr:hover td { background: #f5f8fc; }
body .opportunities-table tr.is-selected td { background: #eaf2ff; }
body .badge, body .jira-fields span, body .project-status, body .reports-total {
  background: #edf2f8; color: #46576d; border-color: var(--line);
}
body .progress, body .workload-bar, body .status-stack { background: #e5ebf3; }
body .progress span, body .workload-bar span { background: #3979df; }
body .big-progress { background: conic-gradient(#3979df calc(var(--p) * 1%), #e5ebf3 0); }
body .big-progress:after { background: #fff; }
body .task-filters, body .project-chips a, body .client-project-card,
body .project-hub-empty, body .project-file-card { background: #f8fafd; border-color: var(--line); }
body .client-project-card:hover, body .opportunity-kpis > a:hover { background: #f0f5fc; border-color: #abc4e8; }
body .client-project-data span, body .client-project-card footer { border-color: var(--line); }
body .check-box, body .icon-button, body .menu-button, body .calendar-arrow {
  background: #f4f7fb; color: #405572; border: 1px solid #cbd5e1;
}
body .check-box:disabled { cursor: default; opacity: .7; }
body .toggle-track { background: #cbd5e1; }
body .toggle-track i { background: #fff; }
body .visibility-toggle input:checked + .toggle-track { background: #2563cf; }
body .calendar-weekday { background: #f1f5fa; color: #53627a; }
body .calendar-day { background: #fff; }
body .calendar-day.is-outside { background: #f5f7fa; }
body .calendar-day.is-outside .calendar-date { opacity: .65; }
body .calendar-day.is-today { background: #f0f6ff; }
body .calendar-task { background: #edf1f7; color: #263750; border-color: #cbd5e1; border-left-color: #7b8ba3; }
body .calendar-task small { color: #51637c; }
body .calendar-range:before, body .calendar-range:after { color: #51637c; }
body .calendar-task.status-doing { background: #e7f0ff; border-left-color: #3676d5; }
body .calendar-task.status-review { background: #efebfb; border-left-color: #8566ce; }
body .calendar-task.status-waiting { background: #fff4db; border-left-color: #bd891f; }
body .calendar-task.status-blocked, body .calendar-task.status-rejected,
body .calendar-task.status-cancelled { background: #ffedef; border-left-color: #c75060; }
body .calendar-task.status-done { background: #e9f5ef; border-left-color: #37936a; opacity: 1; }
body .calendar-task:hover { border-color: #729bd7; box-shadow: 0 2px 6px #23375512; }
body .calendar-unscheduled summary strong, body .calendar-unscheduled summary:before { color: #245fbe; }
body .task-stage.pending, body .task-stage.backlog, body .opportunity-stage,
body .status-pill.offline { background: #edf1f6; color: #526178; }
body .task-stage.doing, body .task-stage.review, body .opportunity-stage.sent,
body .opportunity-stage.follow_up { background: #e6efff; color: #2458ac; }
body .opportunity-stage.preparing, body .opportunity-stage.draft { background: #f0ebfb; color: #6944a5; }
body .task-stage.waiting, body .opportunity-stage.negotiation { background: #fff2d7; color: #855a10; }
body .task-stage.done, body .task-stage.approved, body .opportunity-stage.won,
body .status-pill.online, body .alert.success, body .security-note { background: #e8f5ed; color: #176c44; }
body .task-stage.blocked, body .task-stage.rejected, body .task-stage.cancelled,
body .task-stage.changes_requested, body .opportunity-stage.lost,
body .opportunity-stage.expired, body .alert.error { background: #fff0f1; color: #ad2a40; }
body .task-stat.overdue > span, body .admin-task-row .late, body .task-planning.is-late,
body .project-planning.is-late, body .overdue-count, body .next-action.is-due,
body .attention-list b, body .opportunity-kpis .is-alert :is(strong, span) { color: #b23244; }
body .reports-ok > span, body .on-time { color: #176c44; }
body .warning { background: #fff5df; color: #805615; border-color: #eddbb4; }
body .password { background: #edf2f8; color: #263750; }
body .report-client > span, body .opportunity-name > span, body .reports-kpis .kpi-icon,
body .project-hub-empty > span, body .project-file-preview { background: #eaf1fc; color: #245fbe; }
body .project-file-preview.document span, body .project-file-badges span,
body .project-files-empty > span, body .project-upload-drop > span { color: #245fbe; }
body dialog { background: #fff; color: var(--ink); border: 1px solid #d1dce9; box-shadow: 0 24px 80px #243c6333; }
body dialog::backdrop { background: rgba(36, 51, 76, .32); backdrop-filter: blur(3px); }
body dialog .dialog-head { border-color: var(--line); }
body dialog .icon-button { background: #edf2f8; color: #405572; border-color: var(--line); }
body dialog .icon-button:hover { background: #e0eaf7; color: #20334e; }
body dialog .dialog-actions, body .opportunity-form-actions,
body .opportunity-history .opportunity-danger-actions { background: #f7f9fc; border-color: var(--line); }
body.login-page, body .login-panel { background: #f3f6fa; }
body .login-art { background: radial-gradient(ellipse at 10% 90%, #d5e4fc, transparent 65%), #eaf1fb; }
body .login-art h1 span { color: #2563cf; }
body .login-art p { color: #53627a; }
body .login-box { background: #fff; box-shadow: 0 12px 48px #2337550d; }
@media (max-width: 720px) {
  body .sidebar { box-shadow: 6px 0 24px #243c6314; }
}

/* Workspace design: consistent density, typography and component shapes. */
:root {
  --cream: #f6f7f9;
  --ink: #253047;
  --text: #253047;
  --muted: #667085;
  --line: #e5e8ef;
  --radius: 12px;
  --shadow: 0 2px 5px rgba(22, 34, 56, .025);
}
html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body { line-height: 1.5; }
body :is(h1, h2, h3, p) { overflow-wrap: anywhere; }
body :is(h1, h2, h3) { font-weight: 650; }
body strong { font-weight: 600; }
body .shell { grid-template-columns: 224px minmax(0, 1fr); }
body .main { padding: 0 32px 40px; max-width: 1780px; width: 100%; margin-inline: auto; }
body .sidebar { padding: 24px 14px 18px; border-radius: 0; overflow-y: auto; }
body .brand { gap: 10px; padding: 0 8px 24px; min-height: 64px; }
body .brand img { width: 39px; }
body .brand strong { font-size: 14px; letter-spacing: -.3px; }
body .brand small { font-size: 11px; margin-top: 0; }
body .sidebar nav { gap: 4px; }
body .nav-section { color: #8992a3; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin: 22px 12px 8px; }
body .nav-section:first-child { margin-top: 2px; }
body .sidebar nav a { gap: 11px; min-height: 41px; padding: 9px 12px; border-radius: 8px; border: 0; font-size: 13px; font-weight: 500; transition: background .15s, color .15s; }
body .sidebar nav a.active { background: #edf2ff; color: #315fcb; border: 0; box-shadow: none; font-weight: 650; }
body .sidebar nav a.active:after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-left: auto; }
body .sidebar nav a > span { width: auto; text-align: left; }
body .ui-icon { flex-shrink: 0; vertical-align: middle; }
body .sidebar .ui-icon { width: 18px; height: 18px; }
body .account { border-top: 1px solid var(--line); padding: 17px 6px 0; margin-top: auto; gap: 9px; font-size: 12px; }
body .account small { font-size: 10px; }
body .avatar { width: 34px; height: 34px; border-radius: 10px; }
body .account > a { color: #8992a3; padding: 5px; border-radius: 6px; }
body .account > a:hover { background: #f2f4f8; color: #253047; }
body .topbar { min-height: 76px; border-bottom: 1px solid var(--line); margin: 0 0 28px; gap: 12px; }
body .topbar > div:first-of-type { display: flex; align-items: center; gap: 12px; min-width: 0; }
body .topbar .eyebrow { color: #7d8798; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; }
body .topbar .eyebrow:after { content: '/'; color: #b4bdca; margin-left: 12px; }
body .topbar h1 { font-size: 13px; font-weight: 550; letter-spacing: -.1px; line-height: 1.4; margin: 0; }
body .today { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; color: #7d8798; padding: 0; font-size: 12px; white-space: nowrap; }
body .today .ui-icon { width: 16px; height: 16px; }
body .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .09em; line-height: 1.5; }
body :is(.admin-heading, .opportunities-heading, .tasks-heading, .projects-heading, .reports-heading, .employee-heading) { align-items: center; gap: 20px; margin-bottom: 24px; }
body :is(.admin-heading, .opportunities-heading, .tasks-heading, .projects-heading, .reports-heading, .employee-heading) h2 { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.25; font-weight: 650; letter-spacing: -1px; margin: 5px 0 7px; }
body :is(.admin-heading, .opportunities-heading, .tasks-heading, .projects-heading, .reports-heading, .employee-heading) p.muted { font-size: 13px; margin: 0; }
body .heading-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body .btn { min-height: 38px; border-radius: 8px; padding: 9px 14px; font-size: 12px; font-weight: 550; line-height: 1.4; transition: background .15s, border-color .15s, box-shadow .15s; }
body .btn .ui-icon { width: 16px; height: 16px; }
body .btn.small { min-height: 32px; padding: 7px 11px; font-size: 11px; }
body .btn.secondary { border-color: #dde2eb !important; }
body .card { border-radius: 12px; padding: 22px; }
body .task-status-grid, body .opportunity-kpis, body .reports-kpis { gap: 14px; margin-bottom: 24px; }
body .task-stat, body .opportunity-kpis > a, body .reports-kpis article { min-height: 120px; border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
body .task-stat:hover, body .opportunity-kpis > a:hover { transform: none; border-color: #b9c9e7; box-shadow: 0 4px 14px #263b6210; }
body .task-stat > strong, body .opportunity-kpis strong, body .reports-kpis strong { font-size: 30px; line-height: 1.15; letter-spacing: -1px; font-weight: 600; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
body .task-stat > small, body .opportunity-kpis span, body .reports-kpis p { font-size: 11px; line-height: 1.4; }
body .opportunity-kpis small, body .reports-kpis small { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
body .task-stat > .task-stage, body .task-stat.overdue > span { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 0; background: transparent; display: flex; align-items: center; gap: 7px; }
body .task-stat > .task-stage:before, body .task-stat.overdue > span:before { content: ''; display: block; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
body .task-stat.overdue { border-color: #efdcdf; }
body .task-overview { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; background: #fff; }
body .task-overview > div { border: 0; border-right: 1px solid var(--line); padding: 15px 20px; gap: 5px; }
body .task-overview > div:last-child { border-right: 0; }
body .task-overview small { font-size: 11px; text-transform: none; letter-spacing: 0; }
body .task-overview strong { font-size: 25px; line-height: 1.25; }
body .section-head { margin-bottom: 18px; }
body .section-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -.35px; line-height: 1.4; }
body .section-head > .muted { font-size: 11px; }
body .field { gap: 7px; min-width: 0; }
body .field label, body .task-manage-form .field label, body .opportunity-editor .field label, body dialog .field label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
body :is(.field, .task-manage-form .field, .opportunity-editor .field) :is(input, select, textarea), body .task-status-select, body .calendar-employee-filter select, body .inline-create :is(input, select), body .history-note-form textarea { border-radius: 8px; border-color: #dce2eb; font-size: 13px; min-height: 40px; padding: 9px 11px; line-height: 1.5; }
body .field textarea { min-height: 110px; }
body .field input[type="checkbox"] { min-height: auto; width: auto; }
body :is(.tasks-filter-bar, .projects-filter-bar, .reports-filter, .opportunity-filters) { padding: 16px 18px; border-radius: 12px; gap: 12px; margin-bottom: 18px; box-shadow: none; }
body :is(.tasks-filter-bar, .projects-filter-bar, .reports-filter, .opportunity-filters) .field label { font-size: 11px; }
body .table { font-size: 13px; }
body .table th { background: #fafbfc; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 11px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
body .table td { padding: 16px; font-size: 12px; border-bottom: 1px solid #eef0f4; }
body .table tbody tr:last-child td { border-bottom: 0; }
body .table .title-link, body .opportunity-name strong, body .report-client strong { font-size: 13px; font-weight: 550; line-height: 1.4; }
body .table :is(.project-code, .opportunity-name small) { font-size: 11px; line-height: 1.5; margin-top: 3px; }
body .table .project-code { max-width: 100%; }
body .opportunity-name { gap: 12px; }
body .opportunity-name > span, body .report-client > span { border: 1px solid #dfe8f9; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; font-size: 10px; font-weight: 600; }
body .opportunity-probability { grid-template-columns: minmax(40px, 1fr) 32px; gap: 10px; }
body .opportunity-probability .progress { height: 4px; }
body .opportunity-probability small, body .next-action { font-size: 11px; font-variant-numeric: tabular-nums; }
body .opportunities-table td:nth-child(4), body .reports-table td:nth-child(6) { font-variant-numeric: tabular-nums; }
body :is(.opportunities-table-card, .reports-table-card) { padding: 20px 0 0; overflow: hidden; }
body :is(.opportunities-table-card, .reports-table-card) > .section-head { padding-inline: 20px; }
body :is(.tasks-table-card, .projects-table-card) { padding: 0; overflow: hidden; }
body .task-stage, body .opportunity-stage, body .status-pill { border-radius: 6px; font-size: 10px; font-weight: 550; line-height: 1.4; letter-spacing: 0; text-transform: none; padding: 5px 8px; }
body .badge { border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 500; }
body .task-status-select, body .tasks-table .task-status-select { font-size: 11px; min-height: 34px; height: 34px; background: #f8fafc; padding: 6px 25px 6px 9px; }
body .project-status { border-radius: 6px; border: 0; padding: 5px 8px; }
body .progress, body .progress span, body .workload-bar, body .workload-bar span { border-radius: 99px; }
body .agency-calendar { padding: 0; overflow: hidden; }
body .calendar-header { padding: 19px 22px; gap: 16px; }
body .calendar-header h2 { font-size: 19px; font-weight: 600; letter-spacing: -.5px; margin: 3px 0; }
body .calendar-header p:last-child { font-size: 12px; }
body .calendar-employee-filter label { font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; }
body .calendar-employee-filter select { min-width: 180px; height: 38px; min-height: 38px; font-size: 12px; }
body .calendar-employee-filter .btn, body .calendar-toolbar .btn, body .calendar-arrow { height: 38px; min-height: 38px; }
body .calendar-arrow { width: 36px; border-radius: 7px; background: #fff; border-color: #dde2eb; }
body .calendar-weekday { background: #fafbfc; border-right: 0; font-size: 10px; font-weight: 500; letter-spacing: .05em; padding: 10px 14px; border-radius: 0; }
body .calendar-day { border-radius: 0; padding: 8px; }
body .calendar-day.is-outside { background: #fafbfc; }
body .calendar-week { min-height: 112px; grid-template-rows: 32px repeat(var(--calendar-lanes), 46px) minmax(22px, 1fr); }
body .calendar-date strong { font-size: 11px; font-weight: 500; border-radius: 50%; width: 23px; height: 23px; }
body .calendar-range { border-radius: 5px; border-top: 0; border-right: 0; border-bottom: 0; padding: 7px 9px; margin: 2px 5px 3px; box-shadow: none; }
body .calendar-task-title { font-size: 11px; font-weight: 550; }
body .calendar-range small { font-size: 9px; line-height: 1.4; }
body .calendar-task:hover { transform: none; }
body .calendar-legend { font-size: 11px; padding-block: 14px; }
body .client-card, body .employee-card { border-radius: 12px; transition: box-shadow .15s, border-color .15s; }
body .client-card:hover, body .employee-card:hover { transform: none; border-color: #b9c9e7; box-shadow: 0 4px 14px #263b6210; }
body .client-card h3 { font-size: 18px; letter-spacing: -.5px; margin-top: 16px; }
body .client-monogram, body .employee-avatar { border-radius: 12px; }
body .client-hero h2, body .project-hero h2 { font-size: 25px; line-height: 1.25; letter-spacing: -.7px; }
body .client-project-card { border-radius: 10px; }
body .task-management-card { padding: 0; position: static; }
body .task-management-head { margin-bottom: 0; padding: 18px 20px; background: #fafbfc; border-radius: 12px 12px 0 0; }
body .task-form-section-title { font-size: 10px; font-weight: 600; }
body .task-form-section { padding: 18px 20px; }
body .task-manage-form .field :is(input, select, textarea) { width: 100%; min-width: 0; color-scheme: light; }
body .task-manage-form .field textarea { min-height: 140px; resize: vertical; }
body .task-manage-form .field input[type="date"] { min-height: 44px; }
body .task-save-bar { background: #fafbfc; border-radius: 0 0 12px 12px; }
body .task-description { font-size: 14px; line-height: 1.8; }
body .task-comment header { font-size: 12px; }
body .task-comment header small { color: var(--muted); }
body .check-box { border-radius: 6px; }
body .toggle-track { border-radius: 20px; }
body .toggle-track i { border-radius: 50%; }
body .opportunity-editor, body .opportunity-history { padding: 0; }
body .opportunity-editor > .section-head { background: #fff; }
body .opportunity-history > .section-head { margin: 0; }
body .opportunity-editor > .section-head h2 { font-size: 17px; }
body .opportunity-timeline header strong, body .opportunity-timeline p { font-size: 12px; }
body .opportunity-timeline time, body .opportunity-timeline span { font-size: 10px; }
body .opportunity-form-actions { border-radius: 0; }
body .alert { border-radius: 8px; font-size: 13px; font-weight: 500; margin: 0 0 20px; }
body dialog { border-radius: 14px; max-height: calc(100dvh - 32px); overflow-y: auto; }
body dialog .dialog-head { padding: 22px 24px; }
body dialog .dialog-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.5px; }
body dialog .icon-button { border-radius: 8px; }
body dialog .form-grid { padding: 22px 24px; gap: 18px; }
body dialog .dialog-actions { padding: 16px 24px; border-radius: 0; }
body .login-box { border-radius: 16px; }
body .login-box h2 { letter-spacing: -.8px; }
body .nav-close, body .nav-backdrop { display: none; }
@media (max-width: 1280px) {
  body .main { padding-inline: 24px; }
  body .calendar-header { flex-wrap: wrap; }
  body .calendar-controls { margin-left: auto; }
  body .task-stat, body .opportunity-kpis > a { padding: 16px; }
}
@media (min-width: 721px) and (max-height: 760px) {
  body .sidebar { padding-top: 16px; }
  body .brand { padding-bottom: 12px; }
  body .sidebar nav a { min-height: 35px; padding-block: 6px; }
  body .nav-section { margin-top: 16px; }
  body .account { margin-top: 18px; }
}
@media (max-width: 980px) {
  body .shell { grid-template-columns: 204px minmax(0,1fr); }
  body .main { padding-inline: 20px; }
  body .topbar .eyebrow { display: none; }
  body .heading-actions { flex-wrap: wrap; }
  body .calendar-controls { width: 100%; justify-content: space-between; margin-left: 0; }
  body :is(.admin-heading, .opportunities-heading) { align-items: flex-start; }
}
@media (max-width: 720px) {
  body .shell { display: block; }
  body .main { padding: 0 16px 28px; }
  body .topbar { min-height: 64px; margin-bottom: 22px; }
  body .topbar h1 { font-size: 12px; }
  body .topbar .today { display: none; }
  body .menu-button { width: 36px; height: 36px; min-width: 36px; padding: 7px; margin: 0; border-radius: 8px; }
  body .sidebar { width: 258px; left: -280px; height: 100dvh; z-index: 50; padding: 24px 16px; }
  body .sidebar.open { left: 0; }
  body.nav-open { overflow: hidden; }
  body .nav-close { display: grid; place-items: center; position: absolute; top: 17px; right: 12px; width: 30px; height: 30px; border-radius: 7px; }
  body .sidebar .brand { padding-right: 24px; }
  body .sidebar .brand img { width: 30px; }
  body .sidebar .brand strong { font-size: 13px; }
  body .sidebar .brand small { font-size: 10px; }
  body .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: #23334e55; border: 0; border-radius: 0; z-index: 40; backdrop-filter: blur(2px); }
  body :is(.admin-heading, .opportunities-heading, .tasks-heading, .projects-heading, .reports-heading, .employee-heading) { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
  body :is(.admin-heading, .opportunities-heading, .tasks-heading, .projects-heading, .reports-heading, .employee-heading) h2 { font-size: 25px; }
  body .heading-actions { justify-content: flex-start; }
  body .task-status-grid, body .opportunity-kpis, body .reports-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
  body .task-stat, body .opportunity-kpis > a, body .reports-kpis article { min-height: 108px; padding: 14px; }
  body .task-stat > strong, body .opportunity-kpis strong, body .reports-kpis strong { font-size: 27px; }
  body .opportunity-kpis > a:last-child { grid-column: 1/-1; }
  body .card { padding: 18px; }
  body .agency-calendar, body .task-management-card, body .opportunity-editor, body .opportunity-history, body .tasks-table-card, body .projects-table-card { padding: 0; }
  body .opportunities-table-card, body .reports-table-card { padding: 18px 0 0; }
  body .section-head { flex-wrap: wrap; }
  body .calendar-header { padding: 18px; gap: 14px; }
  body .calendar-controls { gap: 12px; }
  body .calendar-toolbar { flex-wrap: wrap; }
  body .calendar-employee-filter { flex-basis: 100%; }
  body .calendar-employee-filter select { min-width: 0; }
  body :is(.field, .task-manage-form .field, .opportunity-editor .field) :is(input, select, textarea) { font-size: 16px; }
  body .btn { min-height: 42px; }
  body dialog .dialog-head, body dialog .form-grid { padding: 18px; }
  body dialog .dialog-actions { padding: 14px 18px; }
  body .account { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *:before, body *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

body .task-quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body .task-quick-filters a { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 16px; border: 1px solid #dce2eb; border-radius: 8px; background: #fff; color: #46576d; font-size: 13px; font-weight: 600; text-decoration: none; }
body .task-quick-filters a:hover { border-color: #8ea3bd; background: #f5f7fb; }
body .task-quick-filters a.is-active { background: #eaf0ff; color: #2857b8; border-color: #b6c8ef; }
body .task-quick-filters a:focus-visible { outline: 3px solid #dce9fc; outline-offset: 2px; }
body .project-tasks { margin-bottom: 20px; }
body .project-tasks .table { width: 100%; }
body #quick-task-dialog .dialog-head p { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 720px) {
  body .task-quick-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .task-quick-filters a { justify-content: center; }
  body .tasks-heading .heading-actions { width: 100%; justify-content: space-between; }
  body .project-tasks { overflow-x: auto; }
}

/* Client tasks: separate unfinished work from completed and cancelled work. */
body .client-work .section-head .muted { margin: 8px 0 0; font-size: 13px; }
body .client-work-group + .client-work-group { margin-top: 26px; }
body .client-work-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
body .client-work-group h3 span { border-radius: 20px; padding: 2px 8px; background: #edf1f7; color: #526078; font-size: 12px; }
body .client-work .client-task-list { gap: 10px; }
body .client-work .client-work-row { display: grid; grid-template-columns: 26px minmax(0,1fr) 160px; gap: 12px; padding: 16px; border: 1px solid #e1e6ee; border-left: 4px solid #a4afc0; border-radius: 10px; background: #fafbfe; }
body .client-work-info { min-width: 0; }
body .client-work-info .title-link { display: block; font-size: 15px; font-weight: 650; line-height: 1.45; color: #26344c; overflow-wrap: anywhere; text-decoration: none; }
body .client-work-info .title-link:hover { text-decoration: underline; }
body .client-work-info small { font-size: 12px; line-height: 1.5; margin-top: 5px; }
body .client-work-date { display: block; color: #64748b; font-size: 12px; margin-top: 7px; }
body .client-work-date.is-overdue { color: #b42336; font-weight: 600; }
body .client-work-marker { font-size: 21px; color: #64748b; align-self: start; line-height: 1.2; }
body .client-work .task-status-form { width: 100%; }
body .client-work .task-status-select { width: 100%; min-width: 0; font-size: 12px; min-height: 38px; }
body .client-work-row[data-status="doing"], body .client-work-row[data-status="review"] { border-left-color: #3474df; background: #f2f6ff; }
body .client-work-row[data-status="blocked"] { border-left-color: #d64555; background: #fff5f5; }
body .client-work-row[data-status="waiting"] { border-left-color: #c28a19; background: #fffaf0; }
body .client-work-row[data-status="done"] { border-left-color: #299363; background: #f0faf4; }
body .client-work-row[data-status="done"] .client-work-marker, body .client-work-row[data-status="done"] .task-status-select { color: #197347; }
body .client-work-row[data-status="cancelled"], body .client-work-row[data-status="rejected"] { background: #f5f6f8; }
@media(max-width: 1400px) {
 body .client-work .client-work-row { grid-template-columns: 24px minmax(0,1fr); }
 body .client-work-row .task-status-form { grid-column: 2; max-width: 200px; }
}

body .client-work .client-task-visibility { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 8px; border: 1px solid #dce2eb; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; }
body .client-work .client-task-visibility .ui-icon { width: 14px; height: 14px; flex-shrink: 0; }
body .client-work .client-task-visibility.is-shared { background: #eaf3ff; color: #2458a4; border-color: #cbdcf5; }
body .client-work .client-task-visibility.is-internal { background: #f1f3f6; color: #526078; border-color: #dce2eb; }

body .client-work .client-visibility-form { margin: 0; }
body .client-work button.client-task-visibility { cursor: pointer; font-family: inherit; min-height: 36px; flex-wrap: wrap; text-align: left; }
body .client-work .visibility-action { border-left: 1px solid currentColor; padding-left: 8px; margin-left: 3px; text-decoration: underline; }
body .client-work button.client-task-visibility:hover { border-color: #3865ae; box-shadow: 0 0 0 1px #3865ae; }
body .client-work button.client-task-visibility:focus-visible { outline: 3px solid #7fa9ed; outline-offset: 3px; }
body .client-work-row { scroll-margin-top: 24px; }

body .project-task-cards .client-work-row { grid-template-columns: 42px minmax(0,1fr) 190px; }
body .project-task-cards .task-order-controls { display: flex; flex-direction: column; align-items: center; gap: 4px; width: auto; min-width: 0; padding: 0; }
body .project-task-cards .task-order-controls button { min-width: 34px; min-height: 34px; }
body .project-task-actions { display: grid; gap: 10px; align-content: center; }
body .project-task-cards .subtask-count { margin: 0; justify-self: start; flex-wrap: wrap; }
body .project-task-cards .task-order-dragging { outline: 2px solid #4a77cf; opacity: .75; }
@media(max-width:720px) {
 body .project-task-cards .client-work-row { grid-template-columns: 36px minmax(0,1fr); }
 body .project-task-cards .project-task-actions { grid-column: 2; }
 body .project-task-cards .task-status-form { grid-column: auto; max-width: none; }
}

body .client-search-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding: 18px 22px; }
body .client-search-form .field { flex: 1 1 280px; margin: 0; }
body .client-search-form .btn { min-height: 44px; }
@media(max-width:600px) { body .client-search-form .field { flex-basis: 100%; } }