/* Hoodad ERP: one comfortable scale and one interaction language.
   Load after the feature styles. Workspace rules stay out of client reports. */
body[data-app-page] {
  --ui-text: 15px;
  --ui-label: 14px;
  --ui-caption: 13px;
  --ui-heading: 18px;
  --ui-focus: #12a5bc;
  --ui-soft: #edf6fc;
  --ui-border: #d9e7f2;
  --ui-shadow: 0 6px 24px #17365008;
  --muted: #526a80;
  --cyan-dark: #087286;
  --amber: #886017;
  --red: #b13e50;
  --green: #126e52;
  --workspace-gutter-start: 8px;
  --workspace-gutter-end: 27px;
  font-size: var(--ui-text);
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body[data-app-page][data-theme="dark"] {
  --muted: #adc0d5;
  --ui-soft: #142c43;
  --ui-border: #29435f;
  --ui-shadow: 0 6px 24px #00000012;
}
body[data-app-page] :is(button, input, textarea, select) { font-family: inherit; }
body[data-app-page] :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
body[data-app-page] :is(.app-main, #main, .panel, .stack, .detail-grid, .dashboard-columns, .project-card, .form-grid, .field) { min-inline-size: 0; }
body[data-app-page] :is(.small, .help) { font-size: var(--ui-label); line-height: 1.85; }
body[data-app-page] .muted { color: var(--muted); }
body[data-app-page] :is(.breadcrumbs, .workspace-status, .app-footer, .stat-label, .stat-footer, .metric-inline small, .info-row dt, .workload-count, .section-title .count, .project-card p, .project-card-meta, .task-copy small, .task-date, .review-card p, .review-meta, .legend-item) { color: var(--muted); }
body[data-app-page] :is(.page-heading, .dashboard-welcome) { gap: 20px; margin-bottom: 24px; }
body[data-app-page] .page-heading { align-items: flex-start; flex-wrap: wrap; }
body[data-app-page] .page-heading > :first-child { flex: 1 1 280px; min-width: 0; }
body[data-app-page] .page-heading .heading-actions { max-width: 100%; padding-block-start: 4px; }
body[data-app-page] .page-heading .heading-actions:empty { display: none; }
body[data-app-page] .page-heading h1 { overflow-wrap: anywhere; }
body[data-app-page] :is(.page-heading h1, .dashboard-welcome h1) {
  font-size: clamp(26px, 2.35vw, 36px);
  line-height: 1.5;
  font-weight: 680;
  letter-spacing: -.6px;
}
body[data-app-page] :is(.page-heading p, .dashboard-welcome p) { font-size: var(--ui-label); line-height: 1.9; color: var(--muted); }
body[data-app-page] :is(.eyebrow, .dashboard-welcome .eyebrow, .panel-eyebrow, .ai-status-heading .eyebrow) { font-size: 13px; letter-spacing: .3px; }
body[data-app-page] :is(.eyebrow, .ai-status-heading .eyebrow) { color: var(--muted); }
html[lang="fa"] body[data-app-page] :is(.eyebrow, .page-heading h1, .dashboard-welcome h1) { letter-spacing: 0; }
body[data-app-page] :is(.section-title, .form-section-title, .dynamic-header h3, .dynamic-section .dynamic-header h3) { font-size: 17px; line-height: 1.8; font-weight: 650; }
body[data-app-page] :is(.rich-text, .info-row, .notice, .readonly-text, .task-scope-summary p) { font-size: var(--ui-text); line-height: 1.95; }
body[data-app-page] .notice:not(.warning):not(.error) { color: var(--cyan-dark); }
body[data-app-page]:not([data-theme="dark"]) .notice.warning { color: #886017; }
body[data-app-page] :is(.rich-text, .notice, .field .help, .info-row, .attachment-copy, .task-scope-summary) { overflow-wrap: anywhere; }
body[data-app-page] :is(.breadcrumbs, .workspace-status) { font-size: var(--ui-caption); line-height: 1.7; }
body[data-app-page] .workspace-trail { min-height: 28px; gap: 16px; }
body[data-app-page] .app-footer { font-size: var(--ui-caption); line-height: 1.8; gap: 16px; flex-wrap: wrap; }
body[data-app-page] .app-footer > span:first-child { font-size: 13px; letter-spacing: .5px; }

/* Navigation: readable labels, generous hit areas, and a clear selected state. */
body[data-app-page] .brand small { font-size: 13px; letter-spacing: .8px; }
body[data-app-page] .brand small { color: var(--muted); }
body[data-app-page] .workspace-tabs { padding: 4px; gap: 3px; }
body[data-app-page] .workspace-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: var(--ui-label); padding: 8px 16px; }
body[data-app-page] .workspace-tab.active { font-weight: 700; box-shadow: 0 3px 9px #12a5bc24; }
body[data-app-page] .search-trigger { min-height: 44px; font-size: var(--ui-label); gap: 8px; }
body[data-app-page] .search-trigger kbd { font: inherit; font-size: 13px; min-width: 22px; text-align: center; }
body[data-app-page] .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
body[data-app-page] .language-button { min-width: 44px; width: 44px; height: 44px; font-size: 13px; font-weight: 650; }
body[data-app-page] .language-button { color: var(--cyan-dark); }
body[data-app-page] .topbar-account { min-height: 44px; }
body[data-app-page] #topbar-account { max-width: 150px; line-height: 1.55; }
body[data-app-page] #topbar-account strong { font-size: 13px; }
body[data-app-page] #topbar-account small { font-size: 13px; color: var(--muted); }
body[data-app-page] :is(.avatar, .topbar-account .avatar, .task-card .avatar) { font-size: 13px; }
body[data-app-page] .sidebar { overflow: visible; }
body[data-app-page] .nav-item { min-height: 46px; height: 46px; }
body[data-app-page] .nav-item:hover { box-shadow: inset 0 0 0 1px #12a5bc24; }
body[data-app-page] .nav-item.active { box-shadow: 0 4px 12px #12a5bc25; }
body[data-app-page] .theme-switch .icon-button { width: 44px; height: 44px; }
body[data-app-page] .nav-count { font-size: 13px; min-width: 19px; height: 19px; line-height: 19px; inset-inline-end: -2px; inset-block-start: 0; }
body[data-app-page] .sidebar-user :is(strong, small) { font-size: 13px; line-height: 1.7; }
/* Tooltips use viewport coordinates supplied on hover and keyboard focus, so
   the scrolling navigation capsule never clips a label. */
body[data-app-page] .nav-item[data-tooltip] > .nav-tooltip {
  position: fixed;
  top: var(--tooltip-top, 50%);
  left: var(--tooltip-left, 92px);
  right: auto;
  bottom: auto;
  z-index: 100;
  display: block;
  width: max-content;
  height: auto;
  max-width: min(260px, calc(100vw - 110px));
  padding: 9px 14px;
  border: 1px solid #25435e;
  border-radius: 11px;
  background: #102b49;
  color: #fff;
  box-shadow: 0 7px 20px #0c284126;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity .15s ease, visibility .15s ease;
}
body[data-app-page] .nav-item[data-tooltip]:is(:hover, :focus-visible) > .nav-tooltip { opacity: 1; visibility: visible; }

/* Shared actions, filters and tabs. */
body[data-app-page] .button,
body[data-app-page] :is(.heading-actions, .dashboard-welcome-actions, .attachment-actions, .workflow-actions, .ai-status-actions) .button {
  min-height: 44px;
  padding: 9px 17px;
  font-size: var(--ui-label);
  line-height: 1.7;
  font-weight: 600;
  border-radius: 14px;
  justify-content: center;
  gap: 8px;
}
body[data-app-page] #topbar-create .button { min-height: 44px; }
body[data-app-page] .button-small { min-height: 42px; padding: 7px 13px; font-size: var(--ui-label); }
body[data-app-page] .button-primary { color: #062d3a; background: #12a5bc; border-color: #12a5bc; box-shadow: 0 3px 8px #12a5bc1a; }
body[data-app-page] .button-primary:hover { background: #25b4c8; border-color: #25b4c8; color: #062d3a; }
body[data-app-page] :is(.text-link, .personal-work-footer .text-link, .dash-overview .text-link) { font-size: var(--ui-label); line-height: 1.7; min-height: 42px; }
body[data-app-page] .text-link .icon { width: 16px; height: 16px; }
body[data-app-page] .toolbar { align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
body[data-app-page] :is(.toolbar-start, .toolbar-end, .heading-actions, .workflow-actions) { gap: 10px; min-width: 0; flex-wrap: wrap; }
body[data-app-page] :is(.toolbar-start, .toolbar-end) { align-items: flex-end; }
body[data-app-page] .toolbar-start { flex: 1 1 320px; }
body[data-app-page] .toolbar-end { flex: 0 1 auto; }
body[data-app-page] .filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 140px; max-width: 100%; flex: 0 1 auto; }
body[data-app-page] .filter-field.filter-field-search { flex: 1 1 240px; min-width: min(240px, 100%); max-width: 420px; }
body[data-app-page] .filter-label { display: block; font-size: 13px; font-weight: 550; line-height: 1.7; color: var(--muted); padding-inline: 3px; }
body[data-app-page] .filter-field > .filter-select { width: 100%; }
/* The outer label controls width; its inner search row must never grow vertically. */
body[data-app-page] .filter-field > .search-field { flex: none; width: 100%; min-width: 0; max-width: none; }
body[data-app-page] .search-field .input { width: 100%; min-height: 46px; padding-inline-start: 43px; border-radius: 14px; }
body[data-app-page] .filter-select { min-height: 46px; font-size: var(--ui-label); padding-block: 9px; border-radius: 14px; max-width: 100%; }
body[data-app-page] .filter-select[data-saved-view] { max-width: min(280px, 100%); }
body[data-app-page] .segmented { border: 1px solid var(--ui-border); padding: 4px; border-radius: 15px; gap: 3px; max-width: 100%; flex-wrap: wrap; }
body[data-app-page] .segmented button,
body[data-app-page] .chart-group-controls .segmented button { min-height: 40px; border-radius: 11px; font-size: var(--ui-label); padding: 7px 13px; line-height: 1.6; }
body[data-app-page] .segmented button.active { font-weight: 650; }
body[data-app-page] .tabs { gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ui-border); max-width: 100%; scrollbar-width: thin; }
body[data-app-page] .tab { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 10px 15px; border-radius: 12px; font-size: var(--ui-label); line-height: 1.7; white-space: nowrap; transition: background .18s, color .18s; }
body[data-app-page] .tab { color: var(--muted); }
body[data-app-page] .tab:hover { color: var(--cyan-dark); background: var(--ui-soft); }
body[data-app-page] .tab.active { color: var(--cyan-dark); background: var(--cyan-pale); font-weight: 700; }
body[data-app-page] .tab.active::after { inset-inline: 14px; bottom: -7px; height: 3px; border-radius: 5px; }
body[data-app-page] .kiss-tabs { gap: 8px; }
body[data-app-page] .more-tabs { position: relative; }
body[data-app-page] .more-tabs > summary { font-size: var(--ui-label); min-height: 46px; padding: 10px 15px; border-radius: 12px; }
body[data-app-page] .more-tabs > summary:hover { background: var(--ui-soft); }
body[data-app-page] .more-tabs > div { gap: 8px; }
body[data-app-page] :is(.date-chip, .calendar-title) { font-size: var(--ui-label); }
body[data-app-page] .page-guide { margin: 0 0 24px; border: 1px solid var(--ui-border); border-radius: 15px; background: var(--ui-soft); min-width: 0; }
body[data-app-page] .page-guide > summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 13px 18px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; line-height: 1.8; }
body[data-app-page] .page-guide > summary::-webkit-details-marker { display: none; }
body[data-app-page] .page-guide > summary :is(strong, .page-guide-title) { font-size: 14px; line-height: 1.8; }
body[data-app-page] .page-guide > summary > .icon { width: 18px; height: 18px; color: var(--cyan-dark); }
body[data-app-page] .page-guide[open] > summary { border-bottom: 1px solid var(--ui-border); }
body[data-app-page] :is(.page-guide-body, .page-guide > div, .page-guide > p) { padding: 15px 18px 17px; margin: 0; font-size: 14px; line-height: 1.95; color: var(--muted); overflow-wrap: anywhere; }
body[data-app-page] .page-guide :is(p, li) { font-size: 14px; line-height: 1.95; }
body[data-app-page] .page-guide-body > :first-child { margin-top: 0; }
body[data-app-page] .page-guide-body > :last-child { margin-bottom: 0; }

/* Consistent cards, readable data, and clear supporting information. */
body[data-app-page] :is(.panel, .project-card, .stat-card, .dash-overview .panel) { border: 1px solid var(--ui-border); border-radius: 20px; box-shadow: var(--ui-shadow); }
body[data-app-page] :is(.panel-header, .dash-overview .panel-header) { padding: 22px 24px 17px; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
body[data-app-page] :is(.panel-header h2, .dash-overview .panel-header h2) { font-size: var(--ui-heading); line-height: 1.65; font-weight: 650; }
body[data-app-page] :is(.panel-header p, .dash-overview .panel-header p) { font-size: var(--ui-label); line-height: 1.85; color: var(--muted); margin-top: 5px; }
body[data-app-page] .panel-body { padding: 0 24px 24px; }
body[data-app-page] .panel-footer { gap: 12px; flex-wrap: wrap; padding: 16px 24px; font-size: var(--ui-label); }
body[data-app-page] :is(.stats-grid, .dashboard-columns, .detail-grid, .stack, .project-grid) { gap: 20px; }
body[data-app-page] .stat-card { padding: 21px 22px; min-height: 148px; }
body[data-app-page] :is(.stat-label, .stat-footer, .progress-row, .legend-item, .legend-item strong) { font-size: var(--ui-label); line-height: 1.8; }
body[data-app-page] .stat-number { font-size: 34px; line-height: 1.5; font-weight: 650; }
body[data-app-page] .stat-footer { gap: 7px; flex-wrap: wrap; }
body[data-app-page] :is(.progress, .project-health-item .progress) { height: 6px; }
body[data-app-page] .table-wrap { max-width: 100%; overscroll-behavior-inline: contain; scrollbar-width: thin; }
body[data-app-page] :is(th, .dash-overview .table-wrap table th, .dynamic-section .dynamic-table th) { font-size: var(--ui-label); line-height: 1.8; font-weight: 600; padding: 13px 20px; }
body[data-app-page] th { color: var(--muted); }
body[data-app-page] :is(td, .dash-overview .table-wrap table td) { font-size: var(--ui-text); line-height: 1.8; padding: 16px 20px; }
body[data-app-page] :is(.cell-title, .dash-overview .cell-title) { font-size: var(--ui-text); font-weight: 600; line-height: 1.8; }
body[data-app-page] :is(.cell-subtitle, .dash-overview .cell-subtitle) { font-size: var(--ui-label); color: var(--muted); line-height: 1.8; margin-top: 4px; }
body[data-app-page] :is(.badge, .dash-overview .badge) { font-size: var(--ui-caption); line-height: 1.7; padding: 4px 10px; border-radius: 9px; gap: 6px; }
body[data-app-page] .badge::before { width: 5px; height: 5px; }
body[data-app-page] .badge:not([class*="badge-"]) { color: var(--muted); }
body[data-app-page]:not([data-theme="dark"]) .badge-green { color: #126e52; }
body[data-app-page]:not([data-theme="dark"]) .badge-cyan { color: #096f80; }
body[data-app-page]:not([data-theme="dark"]) .badge-amber { color: #886017; }
body[data-app-page]:not([data-theme="dark"]) .badge-purple { color: #70519a; }
body[data-app-page]:not([data-theme="dark"]) .badge-red { color: #b13e50; }
body[data-app-page]:not([data-theme="dark"]) .badge-navy { color: #445d78; }
body[data-app-page]:not([data-theme="dark"]) .button-cyan { color: #087286; }
body[data-app-page] :is(.project-card h3, .task-card h3, .review-card h3, .kiss-steps h2) { font-size: 17px; line-height: 1.8; }
body[data-app-page] :is(.project-card p, .project-card-meta, .project-meta, .project-card-footer, .task-card .task-project, .task-card-bottom, .priority, .task-copy small, .task-date, .review-card p, .review-meta, .workload-count, .section-title .count) { font-size: var(--ui-label); line-height: 1.8; }
body[data-app-page] .task-copy strong { font-size: var(--ui-text); line-height: 1.8; }
body[data-app-page] .workload-name { font-size: var(--ui-label); line-height: 1.8; min-width: 0; overflow-wrap: anywhere; }
body[data-app-page] :is(.board-header, .board-count, .board-add) { font-size: var(--ui-label); }
body[data-app-page] .board-add { min-height: 44px; }
body[data-app-page] .task-card { padding: 16px; }
body[data-app-page] :is(.task-card, .project-card) { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
body[data-app-page] :is(.task-card, .project-card):hover { border-color: #a5d6e2; box-shadow: 0 7px 24px #123d5c0c; }
body[data-app-page] :is(.activity-copy, .dashboard-activity .activity-copy, .comment p, .notification-item, .attachment strong, .attachment-feedback, .ai-proposal-status > p, .ai-status-error, .kiss-steps p) { font-size: var(--ui-label); line-height: 1.9; }
body[data-app-page] :is(.activity-copy time, .dashboard-activity .activity-copy time, .comment time, .notification-item time, .ai-status-meta, .picked-files-list small, .attachment-blockers small) { font-size: var(--ui-caption); color: var(--muted); line-height: 1.9; }
body[data-app-page] :is(.comment strong, .picked-files-list strong, .attachment-copy > strong) { font-size: var(--ui-text); }
body[data-app-page] :is(.empty-state h3, .empty-state strong, .work-empty > strong) { font-size: 18px; }
body[data-app-page] :is(.empty-state p, .work-empty p) { font-size: var(--ui-label); line-height: 1.9; }
body[data-app-page] .info-row { align-items: flex-start; gap: 18px; }
body[data-app-page] .info-row dd { min-width: 0; }
body[data-app-page] .metric-inline { gap: 20px; flex-wrap: wrap; }
body[data-app-page] .metric-inline small { font-size: var(--ui-label); line-height: 1.8; }
body[data-app-page] :is(.initial-plan-metrics span, .initial-plan-estimates dt, .initial-plan-warnings, .initial-plan-incomplete, .plan-feature-id, .task-proposal-label) { font-size: var(--ui-label); }
body[data-app-page] .workflow-step { font-size: var(--ui-label); line-height: 1.8; }
body[data-app-page] .step-number { font-size: var(--ui-label); }
body[data-app-page] .ai-hero h2 { font-size: 22px; line-height: 1.7; }
body[data-app-page] .ai-hero p { font-size: var(--ui-label); line-height: 1.9; }
body[data-app-page] .ai-budget { font-size: var(--ui-label); line-height: 1.8; }
body[data-app-page] .ai-budget small { font-size: var(--ui-caption); line-height: 1.8; }

/* Forms use the same field height and remain comfortable in dense editors. */
body[data-app-page] .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
body[data-app-page] .field { gap: 8px; }
body[data-app-page] :is(.field label, .checkbox-field, .role-option, .client-section-options label, .ai-structure-option) { font-size: var(--ui-label); line-height: 1.8; color: var(--text); }
body[data-app-page] :is(.field .help, .client-section-picker .help, #app-dialog [data-ai-detail-help], #app-dialog [data-ai-revision-structure] .help) { font-size: var(--ui-label); color: var(--muted); line-height: 1.85; }
body[data-app-page] :is(.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .dynamic-section .dynamic-table input, .dynamic-section .dynamic-table textarea, .dynamic-section .dynamic-table select) {
  min-height: 46px;
  font-size: var(--ui-text);
  line-height: 1.8;
  padding: 10px 13px;
  border: 1px solid #cbdce9;
  border-radius: 12px;
  box-shadow: 0 1px 2px #122b4303;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body[data-app-page] :is(.input, .field input, .field select, .field textarea):hover { border-color: #9bbdcd; }
body[data-app-page] :is(.input, .field input, .field select, .field textarea):focus { border-color: #12a5bc; box-shadow: 0 0 0 3px #12a5bc16; }
body[data-app-page] :is(input, textarea)::placeholder { color: #6c8296; }
body[data-app-page] .field textarea { min-height: 120px; resize: vertical; }
body[data-app-page] .checkbox-field { min-height: 42px; gap: 10px; cursor: pointer; }
body[data-app-page] :is(.checkbox-field input, .role-option input) { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; accent-color: #087d90; cursor: pointer; }
body[data-app-page] .role-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body[data-app-page] .role-option { min-height: 50px; padding: 12px; border-radius: 12px; gap: 10px; }
body[data-app-page] .role-option:has(input:checked) { border-color: #12a5bc; background: var(--cyan-pale); }
body[data-app-page] .form-section-title { margin: 28px 0 18px; padding-bottom: 12px; }
body[data-app-page] :is(.form-details, .client-section-picker, .file-picker) { border-radius: 14px; border-color: var(--ui-border); }
body[data-app-page] .form-details > summary { font-size: var(--ui-label); min-height: 50px; padding: 14px 18px; }
body[data-app-page] .form-details-body { padding: 20px; }
body[data-app-page] .dynamic-header { gap: 12px; margin-bottom: 14px; }
body[data-app-page] .dynamic-table { max-width: 100%; border-radius: 13px; overscroll-behavior-inline: contain; }
body[data-app-page] .dynamic-table td { padding: 9px; }
body[data-app-page] .dynamic-table :is(input, select) { min-width: 86px; }
body[data-app-page] .dynamic-table textarea { min-width: 180px; min-height: 90px; }
body[data-app-page] .dynamic-table .icon-button { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
body[data-app-page] .file-picker input[type="file"] { font-size: var(--ui-label); }
body[data-app-page] .file-picker input[type="file"]::file-selector-button { min-height: 42px; border-radius: 9px; }
body[data-app-page] :is(.file-picker-error, .credentials-box, .toast) { font-size: var(--ui-label); line-height: 1.9; }
body[data-app-page] :is(.localized-date-hint, .date-picker-weekday) { font-size: 13px; line-height: 1.8; }
body[data-app-page] :is(.localized-date-error, .date-picker-message, .date-picker-title) { font-size: 14px; line-height: 1.8; }
body[data-app-page] .date-picker-day { min-height: 42px; font-size: 14px; }
body[data-app-page] .date-picker-nav { min-height: 42px; }
body[data-app-page] .date-picker-header { grid-template-columns: 32px 32px minmax(0, 1fr) 32px 32px; }
body[data-app-page] .date-picker-footer button,
body[data-app-page] .date-picker-popover > button { min-height: 42px; font-size: 14px; }

/* Personal dashboard: chart labels, filters and metrics remain readable. */
body[data-app-page] .dash-overview { --dash-muted: #566f88; }
body[data-app-page] .dashboard-kpis { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 24px; }
body[data-app-page] .dash-kpi { padding: 20px; border-color: var(--ui-border); border-radius: 18px; }
body[data-app-page] .kpi-top { font-size: var(--ui-label); line-height: 1.75; min-height: 30px; gap: 10px; }
body[data-app-page] .kpi-icon { width: 30px; height: 30px; border-radius: 10px; }
body[data-app-page] .kpi-icon .icon { width: 17px; height: 17px; }
body[data-app-page] .kpi-value { font-size: 34px; font-weight: 650; margin-block: 10px 7px; }
body[data-app-page] .kpi-bottom { font-size: var(--ui-caption); line-height: 1.8; min-height: 34px; gap: 12px; }
body[data-app-page] .kpi-bottom > span:first-child { max-width: 75%; }
body[data-app-page] .kpi-spark { max-width: 82px; height: 32px; }
body[data-app-page] :is(.insight-periods button, .insight-metrics button, .work-filters button, .compare-toggle) { min-height: 42px; font-size: var(--ui-label); line-height: 1.7; }
body[data-app-page] .insight-periods { padding: 3px; gap: 3px; flex-wrap: wrap; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-soft); }
body[data-app-page] .insight-periods button { border-radius: 12px; padding: 7px 14px; }
body[data-app-page] .insight-periods button.active { color: #075f70; font-weight: 650; }
body[data-app-page] .dashboard-welcome-actions { flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
body[data-app-page] .chart-group-controls { gap: 12px; justify-content: flex-start; }
body[data-app-page] .compare-toggle { gap: 9px; padding-inline: 3px; }
body[data-app-page] .compare-toggle i { width: 34px; height: 22px; flex-shrink: 0; }
body[data-app-page] .compare-toggle i::after { width: 16px; height: 16px; }
body[data-app-page] .insight-metrics { gap: 7px; margin-bottom: 20px; }
body[data-app-page] .insight-metrics button { padding: 7px 12px; border: 1px solid var(--ui-border); border-radius: 12px; }
body[data-app-page] .insight-metrics button.active { border-color: #12a5bc; font-weight: 650; }
body[data-app-page] .metric-dot { width: 7px; height: 7px; flex-shrink: 0; }
body[data-app-page] .chart-summary { gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
body[data-app-page] .chart-summary > strong { font-size: 36px; font-weight: 650; }
body[data-app-page] .chart-summary > div:nth-child(2) > span { font-size: var(--ui-label); }
body[data-app-page] :is(.chart-summary small, .chart-key, .monthly-key, .chart-footnote, .gauge-description) { font-size: var(--ui-caption); line-height: 1.8; }
body[data-app-page] .chart-key { gap: 12px; padding-block-start: 0; align-self: center; }
body[data-app-page] .chart-key > span { gap: 7px; }
body[data-app-page] :is(.chart-empty-note, .chart-data, .chart-data table, .gauge-copy small, .gauge-stats span) { font-size: var(--ui-label); line-height: 1.85; }
body[data-app-page] .chart-footnote { padding-block: 14px; gap: 10px; }
body[data-app-page] .chart-footnote > span:last-child { white-space: normal; }
body[data-app-page] .chart-data summary { min-height: 44px; padding-block: 12px; font-size: var(--ui-label); line-height: 1.8; }
body[data-app-page] .chart-data summary .icon { width: 16px; height: 16px; }
body[data-app-page] .insight-main-canvas { height: 280px; }
body[data-app-page] .monthly-key { gap: 12px; padding-block: 16px 10px; }
body[data-app-page] .monthly-key i { width: 7px; height: 7px; }
body[data-app-page] .gauge-copy strong { font-size: 34px; }
body[data-app-page] .gauge-stats strong { font-size: 22px; }
body[data-app-page] .gauge-stats { padding-block: 18px; }
body[data-app-page] .gauge-description { margin-bottom: 22px; }
body[data-app-page] .work-filters { flex-wrap: wrap; overflow: visible; gap: 6px; padding-bottom: 16px; }
body[data-app-page] .work-filters button { padding: 7px 12px; border-radius: 12px; }
body[data-app-page] .work-filters button span { font-size: var(--ui-caption); }
body[data-app-page] .work-count { height: 30px; min-width: 30px; font-size: var(--ui-label); }
body[data-app-page] .personal-work-list { max-height: 450px; }
body[data-app-page] .personal-work-item { padding-block: 18px; gap: 12px; }
body[data-app-page] .personal-work-copy strong { font-size: var(--ui-text); line-height: 1.8; white-space: normal; overflow-wrap: anywhere; }
body[data-app-page] .personal-work-copy > small { font-size: var(--ui-label); line-height: 1.8; }
body[data-app-page] .personal-work-meta { font-size: var(--ui-caption); line-height: 1.8; }
body[data-app-page] .personal-work-icon { width: 40px; height: 42px; }
body[data-app-page] .personal-work-footer { padding-block: 14px 18px; }
body[data-app-page] .project-health-item { padding-block: 18px; }
body[data-app-page] .project-health-item strong { font-size: var(--ui-text); line-height: 1.8; }
body[data-app-page] :is(.project-health-item small, .project-health-item .progress-row > span) { font-size: var(--ui-caption); line-height: 1.8; }

/* Timeline and calendar keep the detail inside their own scroll containers. */
body[data-app-page] :is(.ht-toolbar button, .ht-toolbar select) { font-size: var(--ui-label); min-height: 44px; padding: 8px 13px; border-radius: 11px; }
body[data-app-page] :is(.ht-toolbar .ht-range, .ht-legend, .ht-unscheduled, .ht-error, .ht-variance, .ht-tick) { font-size: var(--ui-caption); line-height: 1.8; }
body[data-app-page] .ht-label { font-size: var(--ui-label); line-height: 1.8; }
body[data-app-page] .ht-bar { font-size: 13px; height: 25px; top: 12px; line-height: 1.4; padding-block: 3px; }
/* Dependency paths in timeline.js share these exact row/header dimensions. */
body[data-app-page] :is(.ht-row, .ht-track) { min-height: 53px; }
body[data-app-page] .ht-head { height: 46px; min-height: 46px; }
body[data-app-page] .ht-head .ht-track { min-height: 0; }
body[data-app-page] .ht-head .ht-label { padding-block: 9px; }
body[data-app-page] .ht-tick { line-height: 1.4; padding-block: 13px; }
body[data-app-page] .ht-unscheduled { padding-block: 14px; }
body[data-app-page] .ht-confirm p { font-size: var(--ui-label); }
body[data-app-page] .ht-confirm button { min-height: 44px; font-size: var(--ui-label); }
body[data-app-page] :is(.calendar-day-name, .calendar-date) { font-size: var(--ui-label); }
body[data-app-page] .calendar-event { font-size: var(--ui-caption); line-height: 1.75; padding: 5px 7px; }

/* Native dialog semantics and keyboard focus are retained. */
body[data-app-page].sheet-open { overflow: hidden; overscroll-behavior: none; }
body[data-app-page] .app-dialog.workspace-sheet {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  margin: 0;
  width: min(760px, 92vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-inline-end: 0;
  border-radius: 0;
  border-start-start-radius: 26px;
  border-end-start-radius: 26px;
  box-shadow: -16px 0 70px #102b4926;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
}
body[data-app-page] .workspace-sheet[open] { display: flex; flex-direction: column; animation: workspace-sheet-enter .25s cubic-bezier(.2, .8, .2, 1); }
html[dir="rtl"] body[data-app-page] .workspace-sheet[open] { animation-name: workspace-sheet-enter-rtl; }
body[data-app-page] .app-dialog.workspace-sheet.large { width: min(960px, 94vw); }
body[data-app-page] .app-dialog.workspace-sheet.sheet-compact { width: min(520px, 92vw); }
body[data-app-page] .workspace-sheet::backdrop { background: #09233d73; backdrop-filter: blur(5px); }
body[data-app-page] .workspace-sheet .sheet-handle { display: none; }
body[data-app-page] .workspace-sheet .dialog-header { flex: 0 0 auto; position: sticky; inset-block-start: 0; z-index: 3; padding: 22px 28px; background: var(--surface); border-bottom: 1px solid var(--ui-border); min-height: 84px; gap: 16px; }
body[data-app-page] .workspace-sheet .dialog-header h2 { font-size: 20px; font-weight: 650; line-height: 1.7; overflow-wrap: anywhere; }
body[data-app-page] .workspace-sheet .dialog-header .icon-button { flex: 0 0 44px; background: var(--ui-soft); }
body[data-app-page] .workspace-sheet .sheet-intro { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; padding: 20px 28px; background: linear-gradient(115deg, var(--ui-soft), var(--surface)); border-bottom: 1px solid var(--ui-border); }
body[data-app-page] .workspace-sheet .sheet-illustration { display: block; width: 124px; height: 94px; object-fit: contain; flex: 0 0 124px; }
body[data-app-page] .workspace-sheet .sheet-copy { min-width: 0; }
body[data-app-page] .workspace-sheet .sheet-intro :is(h3, strong) { display: block; font-size: 16px; line-height: 1.8; font-weight: 650; margin: 0 0 4px; }
body[data-app-page] .workspace-sheet .sheet-intro :is(p, .help) { margin: 0; font-size: var(--ui-label); line-height: 1.85; color: var(--muted); }
body[data-app-page] .workspace-sheet #dialog-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
body[data-app-page] .workspace-sheet .dialog-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: 26px 28px; scroll-padding-block: 18px; }
body[data-app-page] .workspace-sheet .dialog-body > :first-child { margin-top: 0; }
body[data-app-page] .workspace-sheet .dialog-body > :last-child { margin-bottom: 0; }
body[data-app-page] .workspace-sheet .dialog-footer { flex: 0 0 auto; position: sticky; inset-block-end: 0; z-index: 3; gap: 12px; padding: 18px 28px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--surface); box-shadow: 0 -5px 18px #102b4905; }
body[data-app-page] .workspace-sheet .dialog-footer .button-primary { min-width: 140px; }
body[data-app-page] .workspace-sheet .sheet-discard:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; flex: 1 1 100%; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid #ead7ac; border-radius: 12px; background: var(--amber-pale); color: var(--amber); font-size: 14px; line-height: 1.85; }
body[data-app-page] .workspace-sheet .sheet-discard > :first-child { flex: 1 1 200px; }
body[data-app-page] .workspace-sheet .dialog-error { margin-bottom: 20px; }
body[data-app-page] .sheet-compact .form-grid { grid-template-columns: 1fr; }
@keyframes workspace-sheet-enter { from { opacity: .5; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes workspace-sheet-enter-rtl { from { opacity: .5; transform: translateX(-36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes workspace-sheet-rise { from { opacity: .5; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }

/* Authentication shares the same scale without inheriting workspace layout. */
.auth-page { font-size: 15px; line-height: 1.9; }
.auth-page :is(.field label, .field .help, .auth-note, .auth-demo .small, .auth-advanced > summary, .auth-back) { font-size: 14px; line-height: 1.9; }
.auth-page :is(.field input, .field select, .field textarea) { min-height: 48px; padding: 11px 14px; font-size: 16px; border-radius: 12px; }
.auth-page .button { min-height: 46px; font-size: 14px; border-radius: 12px; }
.auth-page .language-button { min-width: 44px; min-height: 44px; font-size: 13px; }
.auth-page .intro { font-size: 15px; line-height: 1.9; }
.auth-page .auth-brand-copy p { font-size: 16px; line-height: 2; }
.auth-page .brand small { font-size: 13px; }
.auth-page .auth-brand-footer { font-size: 14px; line-height: 1.9; }

/* Dark surfaces use the same hierarchy, borders and brand accent. */
body[data-app-page][data-theme="dark"] :is(.tab.active, .tab:hover) { color: #76d5e2; background: #143247; }
body[data-app-page][data-theme="dark"] .dash-overview { --dash-muted: #adc0d5; }
body[data-app-page][data-theme="dark"] .badge:not([class*="badge-"]) { color: #c4d4e6; background: #20364d; }
body[data-app-page][data-theme="dark"] .insight-periods button.active { color: #d3edf5; background: #183b55; }
body[data-app-page][data-theme="dark"] :is(.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .dynamic-section .dynamic-table input, .dynamic-section .dynamic-table textarea, .dynamic-section .dynamic-table select) { border-color: #31516e; }
body[data-app-page][data-theme="dark"] :is(input, textarea)::placeholder { color: #9bb3cc; }
body[data-app-page][data-theme="dark"] .workspace-sheet .sheet-illustration { border-radius: 14px; background: #edf6fc; }
body[data-app-page][data-theme="dark"] .workspace-sheet .dialog-header,
body[data-app-page][data-theme="dark"] .workspace-sheet .dialog-footer { background: #0b182b; }

@media (min-width: 1680px) {
  body[data-app-page] .dashboard-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body[data-app-page] .dash-kpi { padding-inline: 17px; }
}
@media (max-width: 1450px) and (min-width: 761px) {
  body[data-app-page] .topbar { gap: 12px; }
  body[data-app-page] .brand { min-width: 130px; gap: 7px; }
  body[data-app-page] .workspace-tab { padding-inline: 12px; }
  body[data-app-page] .search-trigger > span:not(:first-child),
  body[data-app-page] .search-trigger kbd { display: none; }
  body[data-app-page] .search-trigger { width: 44px; justify-content: center; padding: 0; }
}
@media (max-width: 1180px) {
  body[data-app-page] :is(.dashboard-secondary-grid, .dashboard-bottom-grid) { grid-template-columns: minmax(0, 1fr); }
  body[data-app-page] .dashboard-activity { grid-column: auto; }
  body[data-app-page] .dashboard-activity .activity-list { display: block; }
  body[data-app-page] .dashboard-welcome { align-items: flex-start; flex-wrap: wrap; }
  body[data-app-page] .dashboard-welcome-actions { justify-content: flex-start; }
  body[data-app-page] .toolbar-start { flex-basis: 100%; }
}
@media (max-width: 980px) and (min-width: 761px) {
  body[data-app-page] { --workspace-gutter-start: 5px; --workspace-gutter-end: 18px; }
  body[data-app-page] .topbar { padding-inline: 12px; gap: 9px; }
  body[data-app-page] .brand { min-width: 0; }
  body[data-app-page] .brand img { width: 35px; }
  body[data-app-page] .brand strong { font-size: 16px; }
  body[data-app-page] .brand small { display: none; }
  body[data-app-page] .workspace-tab { font-size: 13px; padding-inline: 10px; }
  body[data-app-page] .topbar-actions { gap: 4px; }
  body[data-app-page] #topbar-create .button { min-width: 44px; width: 44px; height: 44px; padding: 0; font-size: 0; gap: 0; }
  body[data-app-page] .topbar-account { padding: 3px; }
  body[data-app-page] .account-chevron { display: none; }
}
@media (max-width: 760px) {
  body[data-app-page] { font-size: 16px; --workspace-gutter-start: 16px; --workspace-gutter-end: 16px; }
  body[data-app-page] .topbar { min-height: 70px; height: 70px; padding-inline: 10px; gap: 6px; }
  body[data-app-page] .topbar-start { gap: 3px; }
  body[data-app-page] .brand { gap: 5px; }
  body[data-app-page] .topbar .brand > span { display: block; }
  body[data-app-page] .topbar .brand strong { display: none; }
  body[data-app-page] .topbar .brand small { display: block; font-size: 13px; font-weight: 650; line-height: 1.5; white-space: nowrap; letter-spacing: 0; margin: 0; }
  body[data-app-page] .brand img { width: 26px; height: 27px; }
  body[data-app-page] .topbar .icon-button,
  body[data-app-page] .search-trigger,
  body[data-app-page] .language-button,
  body[data-app-page] #topbar-create .button { width: 42px; height: 44px; min-width: 42px; min-height: 44px; }
  body[data-app-page] .topbar-actions { gap: 2px; }
  body[data-app-page] .topbar-account { min-width: 42px; min-height: 44px; padding: 3px; justify-content: center; }
  body[data-app-page] .topbar-account .avatar { width: 34px; height: 34px; }
  body[data-app-page] .sidebar { inset-block-start: 90px; overflow-y: auto; }
  body[data-app-page] .nav-capsule { overflow: visible; }
  body[data-app-page] .rail-heading { font-size: var(--ui-caption); }
  body[data-app-page] .nav-item { font-size: 15px; min-height: 48px; height: auto; padding-block: 9px; }
  body[data-app-page] .nav-item[data-tooltip] > .nav-tooltip { display: none; }
  body[data-app-page] .nav-count { position: static; min-width: 23px; height: 23px; line-height: 23px; border-radius: 7px; }
  body[data-app-page] .theme-switch .icon-button { min-width: 44px; height: 44px; }
  body[data-app-page] .app-main { padding-block-start: 96px; }
  body[data-app-page] .breadcrumbs { font-size: var(--ui-caption); }
  body[data-app-page] :is(.page-heading h1, .dashboard-welcome h1) { font-size: 27px; line-height: 1.6; }
  body[data-app-page] :is(.page-heading p, .dashboard-welcome p) { font-size: var(--ui-label); max-width: 100%; }
  body[data-app-page] .dashboard-welcome-actions { width: 100%; justify-content: space-between; flex-direction: row; align-items: center; margin-top: 8px; }
  body[data-app-page] :is(.panel-header, .dash-overview .panel-header) { padding: 20px 18px 16px; gap: 12px; }
  body[data-app-page] .panel-body { padding: 0 18px 20px; }
  body[data-app-page] .panel-footer { padding: 14px 18px; }
  body[data-app-page] :is(.panel-header h2, .dash-overview .panel-header h2) { font-size: 18px; }
  body[data-app-page] .toolbar { gap: 12px; }
  body[data-app-page] :is(.toolbar-start, .toolbar-end) { width: 100%; gap: 10px; flex: none; }
  body[data-app-page] .filter-field.filter-field-search { flex-basis: 100%; max-width: none; }
  body[data-app-page] .filter-select { flex: 1 1 145px; width: auto; max-width: 100%; }
  body[data-app-page] .filter-field { flex: 1 1 140px; min-width: 0; }
  body[data-app-page] .filter-field > .filter-select { flex: none; }
  body[data-app-page] .filter-select[data-saved-view] { max-width: 100%; }
  body[data-app-page] .tabs { gap: 6px; }
  body[data-app-page] .tab { font-size: var(--ui-label); padding-inline: 13px; }
  body[data-app-page] :is(.input, .filter-select, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .dynamic-section .dynamic-table input, .dynamic-section .dynamic-table textarea, .dynamic-section .dynamic-table select) { font-size: 16px; }
  body[data-app-page] .stats-grid { gap: 14px; }
  body[data-app-page] .stat-card { min-height: 145px; padding: 17px; }
  body[data-app-page] .stat-number { font-size: 30px; }
  body[data-app-page] .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body[data-app-page] .dash-kpi { padding: 17px 15px; }
  body[data-app-page] .kpi-top { align-items: flex-start; gap: 8px; font-size: 13px; }
  body[data-app-page] .kpi-value { font-size: 31px; }
  body[data-app-page] .kpi-bottom { font-size: 13px; flex-wrap: wrap; gap: 8px; }
  body[data-app-page] .kpi-bottom > span:first-child { max-width: 100%; }
  body[data-app-page] .kpi-spark { max-width: 62px; }
  body[data-app-page] .chart-group-controls { width: 100%; justify-content: flex-start; gap: 10px; }
  body[data-app-page] .insight-chart-body { padding-inline: 18px; }
  body[data-app-page] .insight-metrics { gap: 6px; }
  body[data-app-page] .insight-metrics button { padding-inline: 10px; font-size: 13px; }
  body[data-app-page] .chart-summary > strong { font-size: 32px; }
  body[data-app-page] .chart-key { margin-inline-start: 0; width: 100%; justify-content: flex-start; }
  body[data-app-page] .insight-main-canvas { height: 250px; }
  body[data-app-page] .chart-footnote > span:last-child { margin-inline-start: 0; }
  body[data-app-page] .work-filters { padding-inline: 14px; gap: 5px; }
  body[data-app-page] .work-filters button { font-size: 13px; padding-inline: 9px; }
  body[data-app-page] .personal-work-list { padding-inline: 18px; max-height: 460px; }
  body[data-app-page] .personal-work-item { align-items: flex-start; }
  body[data-app-page] .personal-work-meta time { margin-inline-start: 0; }
  body[data-app-page] .work-open { margin-block-start: 8px; }
  body[data-app-page] .calendar-grid { min-width: 0; max-width: 100%; overflow-x: auto; grid-template-columns: repeat(7, minmax(95px, 1fr)); overscroll-behavior-inline: contain; scrollbar-width: thin; }
  body[data-app-page] .calendar-grid.week-view { min-width: 0; grid-template-columns: repeat(7, minmax(105px, 1fr)); }
  body[data-app-page] .calendar-cell { min-height: 115px; padding: 6px; }
  body[data-app-page] .calendar-event { font-size: 13px; padding: 4px 6px; }
  body[data-app-page] .calendar-date { font-size: 14px; }
  body[data-app-page] .ht-label { font-size: 14px; }
  body[data-app-page] .initial-plan-estimates { gap: 18px; }
  body[data-app-page] .initial-plan-estimates dt { font-size: 14px; }
  body[data-app-page] .workload-row { flex-wrap: wrap; gap: 10px; }
  body[data-app-page] .workload-name { flex: 1 1 auto; }
  body[data-app-page] .workload-track { flex-basis: 100%; order: 4; }
  body[data-app-page] .workload-count { margin-inline-start: auto; }
}
@media (max-width: 640px) {
  body[data-app-page] :is(.form-grid, .role-options, .client-section-options) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body[data-app-page] .field.full { grid-column: auto; }
  body[data-app-page] .form-details-body { padding: 16px; }
  body[data-app-page] .effort-summary .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-app-page] .info-row { gap: 10px; flex-wrap: wrap; }
  body[data-app-page] .info-row > :last-child { overflow-wrap: anywhere; }
  body[data-app-page] .app-dialog.workspace-sheet,
  body[data-app-page] .app-dialog.workspace-sheet.large,
  body[data-app-page] .app-dialog.workspace-sheet.sheet-compact {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline: 0;
    width: 100%;
    max-width: 100vw;
    height: 92dvh;
    max-height: 92dvh;
    border: 1px solid var(--ui-border);
    border-block-end: 0;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -16px 70px #102b4926;
  }
  body[data-app-page] .workspace-sheet[open],
  html[dir="rtl"] body[data-app-page] .workspace-sheet[open] { animation-name: workspace-sheet-rise; }
  body[data-app-page] .workspace-sheet .sheet-handle { display: block; width: 42px; height: 5px; flex: 0 0 5px; margin: 10px auto 0; border-radius: 5px; background: #aec4d6; }
  body[data-app-page] .workspace-sheet .dialog-header { min-height: 70px; padding: 13px 18px 16px; }
  body[data-app-page] .workspace-sheet .dialog-header h2 { font-size: 19px; }
  body[data-app-page] .workspace-sheet .sheet-intro { display: flow-root; padding: 15px 18px; }
  body[data-app-page] .workspace-sheet .sheet-illustration { float: left; width: 84px; height: 72px; margin-inline-end: 13px; margin-block-end: 6px; }
  html[dir="rtl"] body[data-app-page] .workspace-sheet .sheet-illustration { float: right; }
  body[data-app-page] .workspace-sheet .sheet-intro :is(h3, strong) { font-size: 15px; }
  body[data-app-page] .workspace-sheet .sheet-intro :is(p, .help) { font-size: 14px; }
  body[data-app-page] .workspace-sheet .dialog-body { padding: 21px 18px; }
  body[data-app-page] .workspace-sheet .dialog-footer { padding: 14px 18px max(14px, env(safe-area-inset-bottom)); gap: 10px; flex-wrap: wrap; }
  body[data-app-page] .workspace-sheet .dialog-footer .button { flex: 1 1 auto; min-height: 46px; }
  body[data-app-page] .workspace-sheet .dialog-footer .button-primary { flex-grow: 2; }
  body[data-app-page] .workspace-sheet.sheet-compact { height: auto; }
  body[data-app-page] .workspace-sheet.sheet-compact .dialog-body { max-height: 50dvh; }
}
@media (max-width: 390px) {
  body[data-app-page] { --workspace-gutter-start: 12px; --workspace-gutter-end: 12px; }
  body[data-app-page] .topbar { inset-inline: 7px; gap: 3px; padding-inline: 7px; }
  body[data-app-page] .brand strong { font-size: 14px; }
  body[data-app-page] .topbar-start { gap: 0; }
  body[data-app-page] .topbar-actions { gap: 0; }
  body[data-app-page] .topbar .icon-button,
  body[data-app-page] .search-trigger,
  body[data-app-page] .language-button,
  body[data-app-page] #topbar-create .button { width: 42px; min-width: 42px; }
  body[data-app-page] .topbar-account { min-width: 42px; padding-inline: 0; }
  body[data-app-page] .topbar-account .avatar { width: 30px; height: 30px; }
  body[data-app-page] #topbar-create { display: none; }
  body[data-app-page] .kpi-top { flex-direction: column; }
  body[data-app-page] .dashboard-welcome-actions { align-items: stretch; }
  body[data-app-page] .insight-periods { width: 100%; justify-content: space-between; }
  body[data-app-page] .workspace-sheet .sheet-illustration { width: 66px; height: 62px; flex-basis: 66px; }
}
@media (max-width: 350px) {
  body[data-app-page] .topbar .brand { min-width: 0; }
  body[data-app-page] .topbar .brand img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-app-page] :is(.workspace-sheet[open], .dash-kpi, .kpi-meter i) { animation: none; }
  body[data-app-page] :is(.nav-tooltip, .button, .tab, .task-card, .project-card, .nav-item, .dash-kpi) { transition: none; }
  body[data-app-page] :is(.project-card, .dash-kpi):hover { transform: none; }
}
@media screen {
  /* Breadcrumbs, page headers, content and footer share one responsive container. */
  body[data-app-page] .app-main > :is(#main, .workspace-trail, .app-footer) {
    width: 100%;
    max-width: 1800px;
    margin-inline: auto;
    padding-inline: var(--workspace-gutter-start) var(--workspace-gutter-end);
  }
}
@media print {
  body[data-app-page] { font-size: 12pt; }
  body[data-app-page] .nav-tooltip { display: none; }
  body[data-app-page] :is(.panel, .project-card, .stat-card) { box-shadow: none; }
}

body[data-app-page] .proposal-feature-code { white-space:nowrap; font-size:14px; font-weight:650; color:var(--cyan-dark,#087d90); }

/* Audit: readable controls and calendar labels retain Hoodad's palette. */
body[data-app-page] .tab-options { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
body[data-app-page] .segmented button:not(.active) { color: var(--text); }
body[data-app-page] .calendar-day-name,
body[data-app-page] .calendar-cell.outside .calendar-date { color: var(--text); }
body[data-app-page]:not([data-theme="dark"]) .avatar:not(.avatar-navy) { color: #08677b; }
body[data-app-page] :is(.table-wrap,.calendar-grid):focus-visible { outline: 2px solid var(--cyan-dark); outline-offset: 3px; }
@media (pointer: coarse) {
  body[data-app-page] :is(.icon-button,.language-button) { min-width: 44px; min-height: 44px; }
}
body[data-app-page][data-theme] .segmented button.active { color: #052933; background: var(--cyan); }