/* Dashboard visual layer inspired by the Minimal UI reference. */
#view-dashboard { background: #fff; color: #1c252e; }
#view-dashboard .app-header { background: #fff; border-bottom: 1px dashed #e4e8eb; box-shadow: none; }
#view-dashboard .header-logo-kicker, #view-dashboard .navbar-actions .user-name { color: #1c252e; }
#view-dashboard .header-notification-trigger .bell, #view-dashboard .header-notification-trigger .bell path { fill: #637381; }
#view-dashboard .dashboard-grid { max-width: 1440px; padding: 2.5rem clamp(1rem, 3vw, 2.5rem); }
#view-dashboard .home-dashboard-view { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
#view-dashboard .home-dashboard-view::before { display: none; }
#view-dashboard .home-dashboard-topline { min-height: 250px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 1.25rem; padding: 2.5rem; border: 0; border-radius: 16px; background: radial-gradient(circle at 85% 20%, #34434a 0, transparent 38%), linear-gradient(115deg, #1b3035, #141d24 70%); color: white; }
#view-dashboard .home-dashboard-heading h1 { max-width: 24rem; margin-top: .5rem; color: #fff; font-family: Inter, sans-serif; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; letter-spacing: -.025em; }
#view-dashboard .home-dashboard-heading p { margin-top: .75rem; color: #c4cdd5; font-size: .875rem; line-height: 1.6; }
#view-dashboard .home-dashboard-kicker, #view-dashboard .home-period-label { color: #c4cdd5; letter-spacing: .04em; }
#view-dashboard .home-period-control { min-width: 11rem; }
#view-dashboard .home-period-select-wrap select { border-color: transparent; border-radius: 8px; background: #fff; color: #1c252e; }
#view-dashboard .home-context-banner { min-width: 0; min-height: 250px; margin: 0; padding: 2rem; align-items: flex-start; justify-content: flex-end; flex-direction: column; border: 0; border-radius: 16px; background: radial-gradient(ellipse at 80% 0%, #245e66 0, transparent 55%), linear-gradient(140deg, #192e3a, #10151b); color: #dfe3e8; }
#view-dashboard .home-context-copy { align-items: flex-start; flex-direction: column; font-size: .875rem; }
#view-dashboard .home-context-copy strong { color: #fff; font-size: 1.3rem; }
#view-dashboard .home-context-icon { background: rgba(255,255,255,.12); border: 0; color: #fff; }
#view-dashboard .home-context-period { color: #c4cdd5; }
#view-dashboard :is(.home-dashboard-grid, .home-analysis-grid) { grid-column: 1 / -1; margin: 0; gap: 1.5rem; }
#view-dashboard :is(.home-dashboard-card, .home-management-card) { border: 1px solid rgba(145,158,171,.12); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(145,158,171,.12); backdrop-filter: none; }
#view-dashboard :is(.home-dashboard-card, .home-management-card):hover { border-color: rgba(145,158,171,.2); box-shadow: 0 8px 24px rgba(145,158,171,.16); transform: none; }
#view-dashboard .home-dashboard-card { padding: 1.5rem; }
#view-dashboard .home-card-index { color: #919eab; letter-spacing: .04em; }
#view-dashboard :is(.home-year-card .home-total-number strong, .home-month-copy strong, .home-metric-copy span) { color: #1c252e; }
#view-dashboard .home-progress-ring { background: conic-gradient(#00a76f var(--ring-progress-angle), #e8f5ef 0); }
#view-dashboard .home-text-action { color: #007867; }
@media (max-width: 900px) { #view-dashboard .home-dashboard-view { grid-template-columns: 1fr; } #view-dashboard .home-context-banner { min-height: 150px; } #view-dashboard :is(.home-dashboard-grid, .home-analysis-grid) { grid-column: auto; } }
@media (max-width: 600px) { #view-dashboard .dashboard-grid { padding: 1rem; } #view-dashboard .home-dashboard-view { gap: 1rem; } #view-dashboard .home-dashboard-topline { min-height: 220px; padding: 1.5rem; } #view-dashboard .home-context-banner { padding: 1.5rem; } }
@media (min-width: 721px) {
  #view-dashboard .navbar-menu, #view-dashboard .navbar-actions { border-color: transparent; background: transparent; box-shadow: none; }
  #view-dashboard .navbar-menu .nav-workspace-trigger { color: #637381; }
  #view-dashboard .navbar-menu .nav-workspace-trigger:hover, #view-dashboard .navbar-menu .nav-workspace-trigger:focus-visible, #view-dashboard .navbar-menu .nav-workspace-trigger.active, #view-dashboard .navbar-menu .nav-workspace-trigger[aria-expanded="true"] { color: #b71d18; background: #ffeded; box-shadow: none; }
}
#view-dashboard .mobile-nav-toggle span { background: #1c252e; }

/* Override legacy home-specific layouts and contrast rules. */
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-view {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto auto;
  width: 100%; max-width: 100%; min-width: 0; gap: 24px; padding: 0; border: 0; border-radius: 0;
  background: #fff; box-shadow: none; overflow: visible; align-content: start;
}
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-view::before { display: none; }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-topline {
  display: flex; min-width: 0; min-height: 250px; box-sizing: border-box; align-items: flex-start;
  justify-content: center; flex-direction: column; gap: 20px; padding: 40px; border: 0; border-radius: 16px;
  background: radial-gradient(circle at 85% 20%, #34434a 0, transparent 38%), linear-gradient(115deg, #1b3035, #141d24 70%);
}
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-heading { text-align: left; }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-heading h1 { color: #fff; }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-heading p,
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-kicker,
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-period-label { color: #c4cdd5; }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-context-banner {
  box-sizing: border-box; min-width: 0; min-height: 250px; margin: 0; padding: 32px; border: 0; border-radius: 16px;
  align-items: flex-start; justify-content: flex-end; flex-direction: column;
  background: radial-gradient(ellipse at 80% 0%, #245e66 0, transparent 55%), linear-gradient(140deg, #192e3a, #10151b); color: #dfe3e8;
}
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-grid,
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-analysis-grid {
  grid-column: 1 / -1; width: 100%; min-width: 0; max-width: 100%; margin: 0; gap: 24px;
}
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard :is(.home-dashboard-card, .home-management-card) {
  box-sizing: border-box; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 24px;
  border: 1px solid rgba(145,158,171,.12); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(145,158,171,.12);
}
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-year-card :is(.home-card-header h2, .home-total-number strong, .home-total-number span, .home-card-footer-stats, .home-card-footer-stats strong) { color: #1c252e; }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-year-card .home-card-index { color: #637381; }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-year-card .home-text-action { color: #007867; }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-month-card .home-progress-ring { background: conic-gradient(#00a76f var(--ring-progress-angle), #e8f5ef 0); }
@media (max-width: 900px) {
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-view { grid-template-columns: minmax(0, 1fr); }
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-context-banner { min-height: 150px; }
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-view { gap: 16px; }
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-topline { min-height: 220px; padding: 24px; }
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-context-banner { padding: 24px; }
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* The outer workspace inherited a fixed grid track wider than its content box. */
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .dashboard-grid {
  grid-template-columns: minmax(0, 1fr); box-sizing: border-box;
}
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-grid .home-due-card { grid-column: auto; }
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .dashboard-main,
body:has(#view-home-dashboard:not(.hide)) #view-dashboard #dashboard-page-content {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
body:has(#view-home-dashboard:not(.hide)) #view-dashboard .dashboard-main {
  width: auto; min-width: 0; max-width: 100%; justify-self: stretch;
}

body:has(#view-home-dashboard:not(.hide)) #view-dashboard .dashboard-main, body:has(#view-home-dashboard:not(.hide)) #view-dashboard #dashboard-page-content { display: block; width: auto; min-width: 0; }

/* Leader scope picker inside the context banner. */
#view-dashboard .home-scope-control { display: block; width: 100%; max-width: 18rem; margin-top: 1rem; }
#view-dashboard .home-scope-control.hide, #view-dashboard .home-scope-status.hide { display: none; }
#view-dashboard .home-scope-control .home-period-select-wrap { position: relative; display: flex; align-items: center; }
#view-dashboard .home-scope-control select { width: 100%; min-height: 2.5rem; padding: 0 2.25rem 0 .875rem; border: 0; border-radius: 8px; background: #fff; color: #1c252e; font: 600 .875rem/1.2 Inter, sans-serif; text-overflow: ellipsis; appearance: none; cursor: pointer; }
#view-dashboard .home-scope-control select:focus-visible { outline: 2px solid #5be49b; outline-offset: 2px; }
#view-dashboard .home-scope-control svg { position: absolute; right: .75rem; color: #637381; pointer-events: none; }
#view-dashboard .home-scope-status { margin: .5rem 0 0; color: #c4cdd5; font-size: .8125rem; }

/* List layer: every data list shares the neutral Minimal UI treatment of the home page. */
:root {
  --list-surface: #fff;
  --list-head: #f4f6f8;
  --list-ink: #1c252e;
  --list-muted: #637381;
  --list-line: rgba(145,158,171,.24);
  --list-hover: rgba(145,158,171,.08);
  --list-group: #f9fafb;
  --list-shadow: 0 0 2px rgba(145,158,171,.2), 0 12px 24px -4px rgba(145,158,171,.12);
  --list-primary: #1c252e;
  --list-on-primary: #fff;
  --list-accent-text: #285b87;

  --status-todo-soft: rgba(145,158,171,.16);
  --status-todo-ink: #454f5b;
  --status-todo-dot: #919eab;
  --status-progress-soft: rgba(0,184,217,.16);
  --status-progress-ink: #006c9c;
  --status-progress-dot: #00b8d9;
  --status-waiting-soft: rgba(255,171,0,.16);
  --status-waiting-ink: #7a4100;
  --status-waiting-dot: #ffab00;
  --status-returned-soft: rgba(255,86,48,.16);
  --status-returned-ink: #b71d18;
  --status-returned-dot: #ff5630;
  --status-done-soft: rgba(34,197,94,.16);
  --status-done-ink: #065e49;
  --status-done-dot: #22c55e;
}

#view-dashboard :is(.tasks-sidebar, .tasks-main-content, .reports-view, .kpi-review-forms-view) { --color-accent-gold-dim: var(--list-accent-text); }

/* Shell */
#view-dashboard #view-personal-tasks .tasks-main-content,
#view-dashboard #view-personal-tasks .tasks-sidebar {
  border: 1px solid transparent; border-radius: 16px; background: var(--list-surface); box-shadow: var(--list-shadow);
}
#view-dashboard #view-personal-tasks .tasks-main-content::before { display: none; }
#view-dashboard #view-personal-tasks .tasks-title { color: var(--list-ink); }

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item a { color: var(--list-muted); }
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:hover { background: var(--list-hover); }
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.active { background: var(--list-head) !important; box-shadow: none; }
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.active a { color: var(--list-ink) !important; font-weight: 600; }
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item .nav-count-badge { background: var(--status-todo-soft) !important; color: var(--status-todo-ink) !important; }
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.active .nav-count-badge { background: var(--list-primary) !important; color: var(--list-on-primary) !important; }

/* Toolbar: one primary action, everything else stays quiet. */
#view-dashboard #view-personal-tasks .tasks-toolbar :is(.tb-btn, button) { border-radius: 8px; }
#view-dashboard #view-personal-tasks .tasks-toolbar :is(.btn-search, .btn-import, .btn-export, .btn-category, .btn-evaluate) {
  border-color: var(--list-line); background: var(--list-surface); color: var(--list-ink);
}
#view-dashboard #view-personal-tasks .tasks-toolbar :is(.btn-search, .btn-import, .btn-export, .btn-category, .btn-evaluate):hover:not(:disabled) { background: var(--list-head); }
#view-dashboard #view-personal-tasks .tasks-toolbar :is(.tb-btn, button):disabled { color: var(--list-muted); opacity: .7; }
#view-dashboard #view-personal-tasks .tasks-toolbar .btn-add { border-color: var(--list-primary); background: var(--list-primary); color: var(--list-on-primary); }
#view-dashboard #view-personal-tasks .tasks-toolbar .btn-delete { border-color: transparent; background: var(--status-returned-soft); color: var(--status-returned-ink); }

/* Filters: underline tabs with soft count chips. */
#view-dashboard #view-personal-tasks .tasks-filter-tabs { gap: 1.5rem; padding: 0; border: 0; border-bottom: 1px solid var(--list-line); border-radius: 0; background: transparent; box-shadow: none; }
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab {
  gap: .4rem; min-height: 2.75rem; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; box-shadow: none; color: var(--list-muted); font-weight: 500;
}
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab:hover { color: var(--list-ink); }
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab:is(.active, [aria-pressed="true"]) { border-bottom-color: var(--list-ink); color: var(--list-ink); font-weight: 600; }

#view-dashboard #view-personal-tasks .filter-tab .count-badge { border-radius: 6px; background: var(--status-todo-soft); color: var(--status-todo-ink); }
#view-dashboard #view-personal-tasks .filter-tab[data-filter="dang_thuc_hien"] .count-badge { background: var(--status-progress-soft); color: var(--status-progress-ink); }
#view-dashboard #view-personal-tasks .filter-tab[data-filter="cho_danh_gia"] .count-badge { background: var(--status-waiting-soft); color: var(--status-waiting-ink); }
#view-dashboard #view-personal-tasks .filter-tab[data-filter="bi_tra_lai"] .count-badge { background: var(--status-returned-soft); color: var(--status-returned-ink); }
#view-dashboard #view-personal-tasks .filter-tab[data-filter="da_danh_gia"] .count-badge { background: var(--status-done-soft); color: var(--status-done-ink); }
#view-dashboard #view-personal-tasks .filter-tab:is(.active, [aria-pressed="true"]) .count-badge { background: var(--list-primary); color: var(--list-on-primary); }

#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab .status-dot.dot-blue { background: var(--status-todo-dot) !important; }
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab .status-dot.dot-purple { background: var(--status-progress-dot) !important; }
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab .status-dot.dot-orange { background: var(--status-waiting-dot) !important; }
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab .status-dot.dot-red { background: var(--status-returned-dot) !important; }
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab .status-dot.dot-green { background: var(--status-done-dot) !important; }

/* Tables */
#view-dashboard #view-personal-tasks .tasks-table-wrapper,
#view-dashboard :is(.reports-table-scroll, .monitoring-table-scroll, .kpi-review-forms-table-wrap, .kpi-table-wrap, .kpi-common-table-wrap) {
  border-color: var(--list-line); border-radius: 12px; background: var(--list-surface);
}
#view-dashboard #view-personal-tasks .tasks-table thead tr,
#view-dashboard .tasks-table thead tr { background: var(--list-head); box-shadow: none; }
#view-dashboard :is(.tasks-table, .reports-table, .monitoring-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table) thead th,
#view-dashboard .tasks-table th,
#view-dashboard .hm-sheet-table thead th {
  border-color: var(--list-line); background: var(--list-head); color: var(--list-muted);
  font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
#view-dashboard :is(.tasks-table, .reports-table, .monitoring-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table, .hm-sheet-table) tbody td {
  border-bottom: 1px dashed var(--list-line); color: var(--list-ink);
}
#view-dashboard :is(.tasks-table, .reports-table, .monitoring-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table, .hm-sheet-table) tbody tr:hover { background: transparent; transform: none; }
#view-dashboard #view-personal-tasks .tasks-table tbody tr:hover { background: transparent; }
#view-dashboard :is(.tasks-table, .reports-table, .monitoring-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table, .hm-sheet-table) tbody tr:hover td { background: var(--list-hover); }

#view-dashboard .tasks-table .task-group-row,
#view-dashboard .tasks-table .task-group-row:hover { background: var(--list-group); }
#view-dashboard .tasks-table .task-group-row td,
#view-dashboard .tasks-table .task-group-row:hover td { border-top: 1px solid var(--list-line); border-bottom: 1px solid var(--list-line); background: var(--list-group); }
#view-dashboard .task-group-toggle { color: var(--list-ink); }

#view-dashboard .badge-chua-thuc-hien { background: var(--status-todo-soft); color: var(--status-todo-ink); }
#view-dashboard .badge-dang-thuc-hien { background: var(--status-progress-soft); color: var(--status-progress-ink); }
#view-dashboard .badge-cho-danh-gia { background: var(--status-waiting-soft); color: var(--status-waiting-ink); }
#view-dashboard .badge-bi-tra-lai { background: var(--status-returned-soft); color: var(--status-returned-ink); }
#view-dashboard .badge-da-danh-gia { background: var(--status-done-soft); color: var(--status-done-ink); }
#view-dashboard .tasks-table .badge { margin-top: 0; padding: .25rem .5rem; border: 0; border-radius: 6px; font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* Appearance settings: <html> attributes are set by appearance.js. */
:root[data-font-size="sm"] { font-size: 87.5%; }
:root[data-font-size="lg"] { font-size: 112.5%; }

:root[data-density="compact"] #view-dashboard :is(.tasks-table, .reports-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table, .hm-sheet-table) tbody td { padding-block: .35rem; }

:root[data-accent="green"] { --accent-hue: 160; }
:root[data-accent="teal"] { --accent-hue: 205; }
:root[data-accent="purple"] { --accent-hue: 295; }
:root[data-accent="orange"] { --accent-hue: 55; }
:root[data-accent="red"] { --accent-hue: 25; }
:root[data-accent] {
  --color-accent-gold: oklch(46% 0.12 var(--accent-hue));
  --color-accent-gold-hover: oklch(54% 0.13 var(--accent-hue));
  --color-accent-gold-glow: oklch(46% 0.12 var(--accent-hue) / 0.16);
  --color-accent-700: oklch(46% 0.12 var(--accent-hue));
  --color-accent-100: oklch(95% 0.02 var(--accent-hue));
  --color-home-accent-soft: oklch(94% 0.03 var(--accent-hue));
  --color-brand-800: oklch(36% 0.1 var(--accent-hue));
  --color-brand-700: oklch(44% 0.11 var(--accent-hue));
  --list-accent-text: oklch(42% 0.11 var(--accent-hue));
}
:root[data-accent] #view-dashboard :is(.home-text-action, .home-year-card .home-text-action) { color: var(--list-accent-text); }
:root[data-accent] body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-month-card .home-progress-ring,
:root[data-accent] #view-dashboard .home-progress-ring { background: conic-gradient(var(--color-accent-gold) var(--ring-progress-angle), var(--color-home-accent-soft) 0); }

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper: #141a21;
  --color-paper-champagne: #141a21;
  --color-surface: #1c252e;
  --color-ink-dark: #f4f6f8;
  --color-ink-muted: #a6b1bc;
  --color-border: #333d48;
  --color-brand-800: #dfe3e8;
  --color-brand-700: #c4cdd5;
  --color-accent-gold: #8fb8dc;
  --color-accent-gold-hover: #b4d0e8;
  --color-accent-gold-glow: rgb(143 184 220 / 18%);
  --color-accent-700: #8fb8dc;
  --color-accent-100: #243546;
  --color-success: oklch(76% 0.14 150);
  --color-success-100: oklch(30% 0.05 150);
  --color-danger: oklch(72% 0.17 28);
  --color-danger-600: oklch(72% 0.17 28);
  --color-danger-100: oklch(30% 0.06 28);
  --color-home-wash: #212b36;
  --color-home-accent-soft: #243546;
  --color-home-success-soft: oklch(30% 0.05 150);
  --color-home-danger-soft: oklch(31% 0.06 28);
  --color-home-neutral-soft: #2a3540;
  --color-home-neutral: #a6b1bc;
  --color-search-wash: #243546;
  --color-search-selection: #243546;
  --color-search-error-wash: oklch(30% 0.06 28);
  --color-task-blue: #8fb8dc;
  --color-task-blue-dark: #2a3540;
  --color-task-blue-soft: #243546;
  --color-task-blue-wash: #212b36;
  --color-task-shell: #141a21;
  --color-task-panel: #1c252e;
  --color-task-rule: #333d48;
  --mobile-surface: #1c252e;
  --mobile-rule: #333d48;
  --shadow-soft: 0 8px 24px -10px rgb(0 0 0 / 45%);
  --shadow-lift: 0 16px 36px -12px rgb(0 0 0 / 55%);

  --list-surface: #1c252e;
  --list-head: #28323d;
  --list-ink: #f4f6f8;
  --list-muted: #a6b1bc;
  --list-line: rgba(145,158,171,.22);
  --list-hover: rgba(145,158,171,.1);
  --list-group: #212b36;
  --list-shadow: 0 0 2px rgba(0,0,0,.3), 0 12px 24px -4px rgba(0,0,0,.3);
  --list-primary: #f4f6f8;
  --list-on-primary: #1c252e;
  --list-accent-text: #a9cbe8;

  --status-todo-ink: #c4cdd5;
  --status-progress-ink: #61f3f3;
  --status-waiting-ink: #ffd666;
  --status-returned-ink: #ffac82;
  --status-done-ink: #77ed8b;
}
:root[data-theme="dark"][data-accent] {
  --color-accent-gold: oklch(76% 0.11 var(--accent-hue));
  --color-accent-gold-hover: oklch(84% 0.1 var(--accent-hue));
  --color-accent-700: oklch(76% 0.11 var(--accent-hue));
  --color-accent-100: oklch(30% 0.05 var(--accent-hue));
  --color-home-accent-soft: oklch(30% 0.05 var(--accent-hue));
  --list-accent-text: oklch(84% 0.09 var(--accent-hue));
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] #view-dashboard { background: var(--color-paper); color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard .app-header { background: var(--color-surface); border-bottom-color: var(--list-line); }
:root[data-theme="dark"] #view-dashboard :is(.header-logo-kicker, .header-logo-wordmark, .navbar-actions .user-name, .home-year-card .home-total-number strong, .home-month-copy strong, .home-metric-copy span) { color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard .header-notification-trigger :is(.bell, .bell path) { fill: var(--list-muted); }
:root[data-theme="dark"] #view-dashboard .mobile-nav-toggle span { background: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard :is(.home-dashboard-card, .home-management-card),
:root[data-theme="dark"] body:has(#view-home-dashboard:not(.hide)) #view-dashboard :is(.home-dashboard-card, .home-management-card) { border-color: var(--list-line); background: var(--color-surface); box-shadow: var(--list-shadow); }
:root[data-theme="dark"] body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-view { background: transparent; }
:root[data-theme="dark"] body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-year-card :is(.home-card-header h2, .home-total-number strong, .home-total-number span, .home-card-footer-stats, .home-card-footer-stats strong) { color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard .home-text-action,
:root[data-theme="dark"] body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-year-card .home-text-action { color: var(--list-accent-text); }
:root[data-theme="dark"] body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-year-card .home-card-index { color: var(--list-muted); }

body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-context-icon { background: rgba(255,255,255,.12) !important; color: #fff !important; }
#view-dashboard #view-personal-tasks .tasks-filter-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab { flex: 0 0 auto; white-space: nowrap; }

/* List pattern from the Minimal invoice list: table flush in its card, no zebra, roomy rows. */
#view-dashboard #view-personal-tasks .tasks-table-wrapper,
#view-dashboard :is(.reports-table-scroll, .monitoring-table-scroll, .kpi-review-forms-table-wrap, .kpi-table-wrap, .kpi-common-table-wrap) { border: 0; border-radius: 0; box-shadow: none; }
#view-dashboard :is(.tasks-table, .reports-table, .monitoring-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table) thead th { height: 3.5rem; border-bottom: 0; font-size: .875rem; vertical-align: middle; }
#view-dashboard :is(.tasks-table, .reports-table, .monitoring-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table) tbody td { padding-block: .875rem; font-size: .875rem; vertical-align: middle; transition: background-color .15s var(--mui-ease); }
#view-dashboard :is(.reports-table, .kpi-review-forms-table) tbody tr:nth-child(even) { background: transparent; }
#view-dashboard :is(.tasks-table, .reports-table, .kpi-review-forms-table) tbody tr:last-child td { border-bottom: 0; }
#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab:focus-visible { outline: 2px solid var(--list-ink); outline-offset: 2px; }

/* Dark mode: surfaces that style.css paints with literal light colours. */
:root[data-theme="dark"] #view-dashboard #view-personal-tasks .tasks-sidebar { background: var(--list-surface) !important; color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard #view-personal-tasks :is(.period-picker-card, .summary-block) { border-color: var(--list-line) !important; background: var(--list-group) !important; color: var(--list-ink) !important; }
:root[data-theme="dark"] #view-dashboard #view-personal-tasks .tasks-sidebar { border-color: var(--list-line) !important; }
:root[data-theme="dark"] #view-dashboard #view-personal-tasks .tasks-sidebar :is(.summary-header, .summary-row, .summary-row strong, .period-label, .nav-kicker) { color: var(--list-ink) !important; }
:root[data-theme="dark"] #view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:not(.active) :is(a, a *) { color: var(--list-muted) !important; opacity: 1; }
:root[data-theme="dark"] #view-dashboard #view-personal-tasks .tasks-sidebar-toggle { border-color: var(--list-line); background: var(--list-head); color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard .task-kpi-chip,
:root[data-theme="dark"] #view-dashboard .task-score-chip,
:root[data-theme="dark"] #view-dashboard .task-participation-pill { border-color: transparent; background: var(--status-done-soft); color: var(--status-done-ink); }
:root[data-theme="dark"] #view-dashboard .task-status-view-icon { border-color: var(--list-line); background: var(--list-head); color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard .task-group-toggle * { color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard .home-management-count { background: var(--list-head); color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard .navbar-menu .nav-workspace-trigger { background: var(--status-returned-soft); color: var(--status-returned-ink); }

:root[data-theme="dark"] #view-dashboard :is(.hm-cell-code, .hm-cell-badge) { background: var(--list-head); color: var(--list-ink); }
:root[data-theme="dark"] #view-dashboard :is(.hm-sheet-title, .hm-sheet-desc) { color: #f4f6f8; }

/* Accent text sitting on navy surfaces. */
#view-dashboard .hm-sheet-kicker { color: #c4cdd5; }
#view-dashboard #view-profile :is(.profile-pos, .profile-avatar-ph) { color: #dbe8f4; }
#view-dashboard #view-profile #btn-change-password { color: #f8fbff; }

/* The category sheet opens above the sticky header, not under it. */
body:has(#modal-category:not(.hide)) #view-dashboard .app-header { z-index: 1; }

/* Gear button and drawer */
.appearance-trigger {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--list-muted); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}
.appearance-trigger:hover { background: var(--list-hover); color: var(--list-ink); transform: rotate(30deg); }
.appearance-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: flex-end; background: rgba(28,37,46,.32); }
.appearance-drawer {
  display: flex; flex-direction: column; width: min(340px, 100vw); height: 100%; overflow-y: auto; color: var(--list-ink);
  background: var(--list-surface); box-shadow: -24px 0 40px -8px rgba(0,0,0,.2); animation: appearance-in var(--dur-normal) var(--ease-out) both;
}
@keyframes appearance-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.appearance-header { display: flex; align-items: center; gap: .25rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px dashed var(--list-line); }
.appearance-header h3 { margin: 0 auto 0 0; color: var(--list-ink); font: 700 1.125rem/1.3 Inter, sans-serif; letter-spacing: 0; }
.appearance-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--list-muted); cursor: pointer; }
.appearance-icon-button:hover { background: var(--list-hover); color: var(--list-ink); }
.appearance-body { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem; }
.appearance-group-label { display: block; margin-bottom: .6rem; color: var(--list-muted); font-size: .8125rem; font-weight: 600; }
.appearance-segments { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: .5rem; }
.appearance-option { min-height: 2.75rem; padding: .5rem; border: 1px solid var(--list-line); border-radius: 10px; background: transparent; color: var(--list-muted); font: 600 .875rem/1.2 Inter, sans-serif; cursor: pointer; }
.appearance-option:hover { background: var(--list-hover); }
.appearance-option[aria-pressed="true"] { border-color: var(--list-ink); color: var(--list-ink); }
.appearance-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.appearance-swatch { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 1px solid var(--list-line); border-radius: 10px; background: transparent; cursor: pointer; }
.appearance-swatch::before { content: ""; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--swatch); }
.appearance-swatch:hover { background: var(--list-hover); }
.appearance-swatch[aria-pressed="true"] { border-color: var(--list-ink); }
.appearance-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; border: 1px solid var(--list-line); border-radius: 10px; color: var(--list-ink); font-size: .875rem; font-weight: 600; cursor: pointer; }
.appearance-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--list-primary); cursor: pointer; }
:is(.appearance-trigger, .appearance-option, .appearance-swatch, .appearance-icon-button, .appearance-toggle input):focus-visible { outline: 2px solid var(--list-accent-text); outline-offset: 2px; }
#btn-appearance svg { animation: appearance-gear-spin 8s linear infinite; }
@keyframes appearance-gear-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .appearance-drawer, #btn-appearance svg { animation: none; } .appearance-trigger:hover { transform: none; } }

/* Component parity: sizes, type and hover states measured on the Minimal UI user list.
   The repeated id outranks the stacked legacy rules without adding more !important. */
:root {
  --font-display: 'Public Sans', 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Public Sans', 'Google Sans Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: var(--font-display);
  --font-sans: var(--font-body);
  --font-serif: var(--font-display);
  --mui-ease: cubic-bezier(.4, 0, .2, 1);
  --list-primary-hover: #454f5b;
  --list-outline: rgba(145,158,171,.32);
  --list-field: rgba(145,158,171,.2);
  --list-action-hover: rgba(145,158,171,.08);
  --list-icon-hover: rgba(99,115,129,.08);
  --list-shadow-z8: 0 8px 16px 0 rgba(145,158,171,.16);
  --list-shadow-dropdown: 0 0 2px 0 rgba(145,158,171,.24), -20px 20px 40px -4px rgba(145,158,171,.24);
  --list-popover: rgba(255,255,255,.9);
}
:root[data-theme="dark"] {
  --list-primary-hover: #c4cdd5;
  --list-icon-hover: rgba(145,158,171,.12);
  --list-shadow-dropdown: 0 0 2px 0 rgba(0,0,0,.3), -20px 20px 40px -4px rgba(0,0,0,.3);
  --list-popover: rgba(28,37,46,.9);
}

#view-dashboard, #view-dashboard :is(button, input, select, textarea, h1, h2, h3, h4, h5, h6, th, td) { font-family: var(--font-body); }

/* Navbar */
html #view-dashboard#view-dashboard .app-header {
  min-height: 72px; border: 0; background: color-mix(in srgb, var(--list-surface) 80%, transparent); backdrop-filter: blur(6px); box-shadow: none;
}
html #view-dashboard#view-dashboard .navbar-menu .nav-item {
  min-height: 36px; padding: 4px 8px; gap: 6px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--list-muted);
  font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; transform: none;
  transition: background-color .25s var(--mui-ease), color .25s var(--mui-ease);
}
html #view-dashboard#view-dashboard .navbar-menu .nav-item::after { display: none; }
html #view-dashboard#view-dashboard .navbar-menu .nav-item:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--list-action-hover); color: var(--list-ink); }
html #view-dashboard#view-dashboard .navbar-menu .nav-item.active { background: var(--list-action-hover); color: var(--list-ink); font-weight: 600; }

html #view-dashboard#view-dashboard :is(.appearance-trigger, .header-notification-trigger) {
  width: 36px; height: 36px; min-height: 36px; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--list-muted);
  transition: background-color .15s var(--mui-ease);
}
html #view-dashboard#view-dashboard :is(.appearance-trigger, .header-notification-trigger):hover { background: var(--list-icon-hover); color: var(--list-muted); transform: none; }
html #view-dashboard#view-dashboard .header-user-trigger { min-height: 40px; padding: 4px 8px 4px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--list-ink); box-shadow: none; transition: background-color .15s var(--mui-ease); }
html #view-dashboard#view-dashboard .header-user-trigger:hover { background: var(--list-action-hover); }
html #view-dashboard#view-dashboard .header-user-trigger .user-name { color: var(--list-ink); font-size: .875rem; font-weight: 600; }
html #view-dashboard#view-dashboard .header-user-trigger .dropdown-chevron { color: var(--list-muted); }

@media (min-width: 721px) {
  html #view-dashboard#view-dashboard .app-header { height: 72px; min-height: 72px; padding-block: 0; }
  html #view-dashboard#view-dashboard .app-header .header-shell { min-height: 72px; padding-block: 0; }
}
#view-dashboard #view-personal-tasks select.period-select { min-height: 40px !important; border-color: var(--list-muted) !important; border-radius: 8px !important; background-color: transparent !important; color: var(--list-ink) !important; font-size: .875rem !important; font-weight: 400 !important; }

/* Popovers */
html #view-dashboard#view-dashboard :is(.header-dropdown-menu, .nav-workspace-dropdown, .nav-report-dropdown) {
  padding: 4px; border: 0; border-radius: 10px; box-shadow: var(--list-shadow-dropdown);
}
/* Minimal UI paper: translucent blur with cyan and red corner glows, opening with a grow and fade. */
html #view-dashboard#view-dashboard :is(.header-dropdown-menu, .nav-workspace-dropdown, .nav-report-dropdown, .search-dropdown, .task-status-menu, .mui-popover) {
  background: radial-gradient(circle at 100% 0, rgba(0,184,217,.1), transparent 50%), radial-gradient(circle at 0 100%, rgba(255,86,48,.1), transparent 50%), var(--list-popover);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
html #view-dashboard#view-dashboard :is(.header-user-dropdown:is(:hover, :focus-within) .header-dropdown-menu, .mui-popover) { transform-origin: top; animation: mui-dropdown-in .25s cubic-bezier(.4,0,.2,1) backwards; }
@keyframes mui-dropdown-in { from { opacity: 0; transform: scale(.75, .5625); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html #view-dashboard#view-dashboard :is(.header-user-dropdown:is(:hover, :focus-within) .header-dropdown-menu, .mui-popover) { animation: none; } }
html #view-dashboard#view-dashboard :is(.dropdown-item, .nav-workspace-dropdown .nav-item, .nav-report-dropdown .nav-item) {
  min-height: 34px; padding: 6px 8px; border-radius: 6px; background: transparent; color: var(--list-ink); font-size: .8125rem; font-weight: 400; transform: none;
}
html #view-dashboard#view-dashboard :is(.dropdown-item, .nav-workspace-dropdown .nav-item, .nav-report-dropdown .nav-item):hover { background: var(--list-action-hover); color: var(--list-ink); }
html #view-dashboard#view-dashboard .dropdown-item.logout-item { color: var(--status-returned-ink); }
html #view-dashboard#view-dashboard .dropdown-item.logout-item:hover { background: var(--status-returned-soft); color: var(--status-returned-ink); }

/* Buttons: contained */
html #view-dashboard#view-dashboard :is(.btn-primary, .btn-primary-sm, .reports-filter-button, .search-action-button, .tasks-toolbar .btn-add) {
  min-height: 36px; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--list-primary); box-shadow: none; color: var(--list-on-primary);
  font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  transition: background-color .25s var(--mui-ease), box-shadow .25s var(--mui-ease);
}
html #view-dashboard#view-dashboard :is(.btn-primary, .btn-primary-sm, .reports-filter-button, .search-action-button, .tasks-toolbar .btn-add):hover:not(:disabled) {
  background: var(--list-primary-hover); box-shadow: var(--list-shadow-z8); color: var(--list-on-primary); transform: none;
}
html #view-dashboard#view-dashboard #view-profile #btn-change-password { color: var(--list-on-primary); }

/* Buttons: outlined */
html #view-dashboard#view-dashboard :is(.btn-outline, .btn-quiet-sm, .reports-export-button, .hm-sheet-btn-secondary, .search-reset-button, .search-close-button, .tasks-toolbar :is(.btn-search, .btn-import, .btn-export, .btn-category, .btn-evaluate), .home-detail-button) {
  min-height: 36px; padding: 6px 12px; border: 1px solid var(--list-outline); border-radius: 8px; background: transparent; box-shadow: none; color: var(--list-ink);
  font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  transition: background-color .25s var(--mui-ease), box-shadow .25s var(--mui-ease), border-color .25s var(--mui-ease);
}
html #view-dashboard#view-dashboard :is(.btn-outline, .btn-quiet-sm, .reports-export-button, .hm-sheet-btn-secondary, .search-reset-button, .search-close-button, .tasks-toolbar :is(.btn-search, .btn-import, .btn-export, .btn-category, .btn-evaluate), .home-detail-button):hover:not(:disabled) {
  border-color: currentColor; background: var(--list-action-hover); box-shadow: currentColor 0 0 0 .75px; transform: none;
}
html #view-dashboard#view-dashboard .home-detail-button { min-height: 30px; padding: 4px 8px; font-size: .8125rem; }
html #view-dashboard#view-dashboard .tasks-toolbar .btn-delete { min-height: 36px; padding: 6px 12px; border: 0; font-size: .875rem; font-weight: 700; transition: background-color .25s var(--mui-ease); }
html #view-dashboard#view-dashboard .tasks-toolbar .btn-delete:hover:not(:disabled) { background: rgba(255,86,48,.32); box-shadow: none; transform: none; }

/* Buttons: icon and text */
html #view-dashboard#view-dashboard :is(.modal-close, .hm-sheet-close, .search-modal-close, .tasks-sidebar-toggle, .kpi-review-page-prev, .kpi-review-page-next) { transition: background-color .15s var(--mui-ease); }
html #view-dashboard#view-dashboard :is(.modal-close, .search-modal-close, .kpi-review-page-prev, .kpi-review-page-next):hover:not(:disabled) { background: var(--list-icon-hover); transform: none; }
html #view-dashboard#view-dashboard .tasks-sidebar-toggle:hover { background: var(--list-head); }
html #view-dashboard#view-dashboard .hm-sheet-close:hover { transform: none; }
html #view-dashboard#view-dashboard :is(.home-text-action, .kpi-review-view-button, .task-report-count-button) { transform: none; }
html #view-dashboard#view-dashboard :is(.home-text-action, .kpi-review-view-button, .task-report-count-button):hover { text-decoration: underline; transform: none; }

/* Fields */
html #view-dashboard#view-dashboard :is(.period-select, .report-period-select, .report-department-select, .task-report-period-select, .task-report-department-select, .kpi-review-period-select, .kpi-review-department-select, .kpi-review-status-select) {
  min-height: 40px; border: 1px solid var(--list-field); border-radius: 8px; background-color: transparent; color: var(--list-ink); font-size: .875rem; font-weight: 400;
  transition: border-color .15s var(--mui-ease);
}
html #view-dashboard#view-dashboard :is(.period-select, .report-period-select, .report-department-select, .task-report-period-select, .task-report-department-select, .kpi-review-period-select, .kpi-review-department-select, .kpi-review-status-select):hover { border-color: var(--list-ink); }
html #view-dashboard#view-dashboard :is(.period-select, .report-period-select, .report-department-select, .task-report-period-select, .task-report-department-select, .kpi-review-period-select, .kpi-review-department-select, .kpi-review-status-select):focus { border-color: var(--list-ink); box-shadow: 0 0 0 1px var(--list-ink); outline: 0; }

/* Minimal UI controls never lift on hover. */
html #view-dashboard#view-dashboard button:not(:disabled, .tasks-sidebar-toggle):hover { transform: none; }
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:not(.active):hover { background: var(--list-action-hover) !important; }
#view-dashboard #view-personal-tasks select.period-select:hover { border-color: var(--list-ink) !important; }

/* Lists */
html #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item a { min-height: 36px; font-size: .875rem; font-weight: 500; }
html #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.active a { font-weight: 600; }
html #view-dashboard#view-dashboard #view-personal-tasks .tasks-filter-tabs { gap: 2.5rem; }
html #view-dashboard#view-dashboard #view-personal-tasks .tasks-filter-tabs .filter-tab { min-height: 48px; font-size: .875rem; }
html #view-dashboard#view-dashboard :is(.tasks-table, .reports-table, .monitoring-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table, .hm-sheet-table) thead th { font-size: .875rem; font-weight: 600; }
html #view-dashboard#view-dashboard :is(.tasks-table, .reports-table, .monitoring-table, .kpi-review-forms-table, .kpi-table, .kpi-common-table, .home-year-tasks-table, .hm-sheet-table) tbody td { font-size: .875rem; }
html #view-dashboard#view-dashboard :is(.tasks-table, .reports-table, .kpi-review-forms-table, .home-year-tasks-table) tbody tr { transition: none; }
html #view-dashboard#view-dashboard .synced-task-record:hover { transform: none; }

/* Remaining navy tints */
html #view-dashboard#view-dashboard .home-metric-row { border-color: var(--list-line); background: var(--list-group); }
html #view-dashboard#view-dashboard :is(.home-management-count, .kpi-review-status) { background: var(--status-todo-soft); color: var(--status-todo-ink); }
html #view-dashboard#view-dashboard :is(.task-report-organization-row, .task-report-organization-row td) { background: var(--list-group); }
html #view-dashboard#view-dashboard :is(.task-report-total-row, .task-report-total-row td) { background: var(--list-head); }
html #view-dashboard#view-dashboard .task-report-count-button { color: var(--list-accent-text); }
html #view-dashboard#view-dashboard #view-profile .profile-left { background: radial-gradient(ellipse at 80% 0%, #245e66 0, transparent 55%), linear-gradient(140deg, #192e3a, #10151b); }
html #view-dashboard#view-dashboard #view-profile :is(.avatar-container, .profile-avatar-ph) { background: rgba(255,255,255,.12); }
html #view-dashboard#view-dashboard #view-profile #btn-change-password { border: 0; background: var(--list-primary); box-shadow: none; }
html #view-dashboard#view-dashboard #view-profile #btn-change-password:hover { background: var(--list-primary-hover); box-shadow: var(--list-shadow-z8); }

/* Cards */
html #view-dashboard#view-dashboard :is(.workspace-card, .reports-view, .kpi-review-forms-view) {
  border: 0; border-radius: 16px; background: var(--list-surface); box-shadow: var(--list-shadow);
}

@media (max-width: 720px) {
  html #view-dashboard#view-dashboard .navbar-menu .nav-item { min-height: 44px; }
  html #view-dashboard#view-dashboard #view-personal-tasks .tasks-filter-tabs { gap: 1.5rem; }
  html #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item { width: 100%; }
  html #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item a { padding-right: 2.75rem; }
}

/* Desktop sidebar: the Danh mục menu stays open as a left rail from the 1024px breakpoint.
   Below it the existing header menu and the mobile drawer keep working unchanged. */
@media (min-width: 1024px) {
  :root { --sidebar-width: 280px; }

  html #view-dashboard#view-dashboard { padding-left: var(--sidebar-width); }
  html #view-dashboard#view-dashboard .app-header { animation: none; transform: none; backdrop-filter: none; background: var(--list-surface); padding-inline: 2.5rem; }
  body:has(.modal-overlay:not(.hide)) #view-dashboard .app-header { z-index: 1; }

  html #view-dashboard#view-dashboard .header-logo-lockup { position: fixed; top: 0; left: 0; z-index: 2; width: var(--sidebar-width); height: 72px; padding: 0 1.25rem; transform: none; }

  html #view-dashboard#view-dashboard .navbar-menu {
    position: fixed; inset: 0 auto 0 0; z-index: 1; display: block; width: var(--sidebar-width); margin: 0; padding: 80px 1rem 1.5rem; overflow-y: auto;
    border-right: 1px dashed var(--list-line); border-radius: 0; background: var(--list-surface);
  }
  html #view-dashboard#view-dashboard .nav-workspace-menu-wrap { position: static; display: block; width: 100%; }
  html #view-dashboard#view-dashboard #nav-workspace { display: none; }
  html #view-dashboard#view-dashboard #nav-workspace-dropdown {
    position: static; display: flex !important; flex-direction: column; gap: 4px; min-width: 0; width: 100%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html #view-dashboard#view-dashboard #nav-workspace-dropdown::before {
    content: "TỔNG QUAN"; padding: 16px 8px 8px 12px; color: var(--list-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  }

  html #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 4px 8px 4px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--list-muted);
    font-size: .875rem; font-weight: 500; text-align: left; text-decoration: none; transition: background-color .15s var(--mui-ease), color .15s var(--mui-ease);
  }
  html #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item.hide { display: none; }
  html #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item .nav-item-icon { flex: 0 0 auto; width: 22px; height: 22px; }
  html #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item .nav-label { flex: 1 1 auto; display: inline; }
  html #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item:hover { background: var(--list-action-hover); color: var(--list-muted); }
  html #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item.active { background: color-mix(in srgb, var(--color-accent-gold) 8%, transparent); color: var(--list-accent-text); font-weight: 600; }
  html #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item.active:hover { background: color-mix(in srgb, var(--color-accent-gold) 16%, transparent); color: var(--list-accent-text); }

  html #view-dashboard#view-dashboard .nav-report-menu-wrap { position: static; width: 100%; }
  html #view-dashboard#view-dashboard .nav-report-menu-wrap.hide { display: none; }
  html #view-dashboard#view-dashboard #nav-report-dropdown {
    position: static; min-width: 0; margin: 4px 0 0 23px; padding: 0 0 0 12px; border-left: 1px solid var(--list-line); border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html #view-dashboard#view-dashboard #nav-report-dropdown.hide { display: none; }
  html #view-dashboard#view-dashboard .nav-report-option {
    display: flex; align-items: center; width: 100%; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--list-muted); font-size: .8125rem; font-weight: 500; text-align: left; cursor: pointer;
    transition: background-color .15s var(--mui-ease);
  }
  html #view-dashboard#view-dashboard .nav-report-option:hover { background: var(--list-action-hover); color: var(--list-ink); }
  html #view-dashboard#view-dashboard .nav-report-option-icon { display: none; }

  /* Two rails share the width on the task page. */
  html #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar:not(.is-collapsed) { width: 220px; flex-basis: 220px; }
  html #view-dashboard#view-dashboard #view-personal-tasks .tasks-header { flex-wrap: wrap; gap: .75rem; }
  html #view-dashboard#view-dashboard #view-personal-tasks .tasks-title { white-space: nowrap; }
  html #view-dashboard#view-dashboard #view-personal-tasks .tasks-filter-tabs { flex-wrap: wrap; gap: 0 1.5rem; overflow: visible; }
}

/* Page content: one Minimal UI hierarchy for headings, labels, cards and modals. */
html body:has(#view-dashboard:not(.hide)),
html #view-dashboard#view-dashboard,
html #view-dashboard#view-dashboard :is(.dashboard-grid, .dashboard-main, #dashboard-page-content) { background: var(--color-surface); background-image: none; }
html #view-dashboard#view-dashboard::before, html #view-dashboard#view-dashboard::after,
html #view-dashboard#view-dashboard :is(.dashboard-grid, .dashboard-main, #dashboard-page-content, .workspace-card, .reports-view, .kpi-review-forms-view)::before,
html #view-dashboard#view-dashboard :is(.dashboard-grid, .dashboard-main, #dashboard-page-content, .workspace-card, .reports-view, .kpi-review-forms-view)::after { display: none; }

html #view-dashboard#view-dashboard :is(.tasks-title, .card-title, .reports-header h1, .reports-header h2, .home-dashboard-heading h1) { font-size: 1.5rem; font-weight: 700; line-height: 1.5; letter-spacing: 0; text-transform: none; }
html #view-dashboard#view-dashboard :is(.home-card-header h2, .info-section-title) { color: var(--list-ink); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
html #view-dashboard#view-dashboard :is(.home-card-index, .home-period-label, .card-kicker, .reports-kicker, .nav-kicker, .period-label, .summary-header, .profile-pos) { font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
html #view-dashboard#view-dashboard :is(.home-card-index, .card-kicker, .reports-kicker, .nav-kicker, .period-label, .summary-header) { color: var(--list-muted); }
html #view-dashboard#view-dashboard .home-dashboard-kicker { letter-spacing: 0; text-transform: none; }

html #view-dashboard#view-dashboard .home-status-row { border: 0; border-radius: 8px; }
html #view-dashboard#view-dashboard .home-status-row.is-success { background: var(--status-done-soft); }
html #view-dashboard#view-dashboard .home-status-row:not(.is-success) { background: var(--status-returned-soft); }
html #view-dashboard#view-dashboard .home-count-badge { border: 0; border-radius: 6px; background: var(--status-done-soft); color: var(--status-done-ink); }
html #view-dashboard#view-dashboard .home-meter { border: 0; border-radius: 50px; background: var(--status-todo-soft); }
html #view-dashboard#view-dashboard .home-metric-row { border: 0; border-radius: 12px; }

html #view-dashboard#view-dashboard #view-personal-tasks :is(.period-picker-card, .summary-block) { border: 0; border-radius: 12px; background: var(--list-head); box-shadow: none; }
html #view-dashboard#view-dashboard .info-section-title { border-bottom: 1px dashed var(--list-line); }
html #view-dashboard#view-dashboard .info-section { border: 0; border-radius: 16px; background: var(--list-surface); box-shadow: var(--list-shadow); }
html #view-dashboard#view-dashboard .info-cell { border: 0; border-radius: 8px; background: var(--list-head); box-shadow: none; transform: none; }
html #view-dashboard#view-dashboard .cell-label { color: var(--list-muted); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
html #view-dashboard#view-dashboard #view-profile .profile-left { border-radius: 16px; }

html #view-dashboard#view-dashboard :is(.task-report-organization-row, .task-report-organization-row td) { background: var(--list-group) !important; }
html #view-dashboard#view-dashboard :is(.task-report-total-row, .task-report-total-row td) { background: var(--list-head) !important; }

/* Modals */
html #view-dashboard#view-dashboard .modal-overlay { background-color: rgba(28,37,46,.48); backdrop-filter: none; }
html #view-dashboard#view-dashboard :is(.modal-card, .search-modal-card, .hm-sheet-modal, .home-year-tasks-modal, .notification-detail-modal) {
  border: 0; border-radius: 16px; background: var(--list-surface); box-shadow: 0 0 2px rgba(145,158,171,.2), -40px 40px 80px -8px rgba(145,158,171,.24);
}
html #view-dashboard#view-dashboard :is(.modal-header, .modal-footer, .search-modal-header) { border-color: var(--list-line); background: transparent; }
html #view-dashboard#view-dashboard :is(.modal-header-desc h3, .search-modal-header h3) { color: var(--list-ink); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
html #view-dashboard#view-dashboard .modal-section-title { border-color: var(--list-line); color: var(--list-muted); font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
html #view-dashboard#view-dashboard .hm-sheet-header { background: transparent; border-bottom: 1px dashed var(--list-line); }
html #view-dashboard#view-dashboard :is(.hm-sheet-title, .hm-sheet-desc, .hm-sheet-kicker, .hm-sheet-close) { color: var(--list-ink); }
html #view-dashboard#view-dashboard .hm-sheet-title { font-size: 1.5rem; font-weight: 700; }
html #view-dashboard#view-dashboard .hm-sheet-desc, html #view-dashboard#view-dashboard .hm-sheet-kicker { color: var(--list-muted); letter-spacing: 0; text-transform: none; }
html #view-dashboard#view-dashboard .hm-sheet-toolbar { background: transparent; border-color: var(--list-line); }
html #view-dashboard#view-dashboard .hm-row-category td { background: var(--list-group); }
html #view-dashboard#view-dashboard .hm-cell-badge { border-radius: 6px; background: var(--status-todo-soft); color: var(--status-todo-ink); font-weight: 700; }
html #view-dashboard#view-dashboard .hm-cell-code { border-radius: 6px; background: var(--status-todo-soft); }
html #view-dashboard#view-dashboard :is(.input-group input, .input-group select, .hm-input, .hm-sheet-search, .hm-sheet-select) { border-color: var(--list-field); border-radius: 8px; color: var(--list-ink); }
html #view-dashboard#view-dashboard :is(.input-group input, .input-group select, .hm-input, .hm-sheet-search, .hm-sheet-select):hover { border-color: var(--list-ink); }
html #view-dashboard#view-dashboard :is(.input-group input, .input-group select, .hm-input, .hm-sheet-search, .hm-sheet-select):focus { border-color: var(--list-ink); box-shadow: 0 0 0 1px var(--list-ink); }

/* Task page: the second rail becomes a horizontal strip, leaving one left column. */
@media (min-width: 1024px) {
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks { flex-direction: column; height: auto; gap: 1.5rem; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar {
    display: grid !important; grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: start; align-items: center; gap: .75rem 1.5rem; flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; position: static;
  }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar-top { display: contents; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar-toggle { display: none; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .period-picker-card { display: block !important; grid-column: 1; grid-row: 1; padding: 0; background: transparent !important; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .period-label { display: none; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar-bottom { display: flex !important; grid-column: 3; grid-row: 1; flex-direction: row !important; width: auto; margin: 0; gap: .75rem; min-height: 0; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .summary-block { display: block !important; min-width: 190px; padding: .5rem .85rem; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-section { display: block !important; grid-column: 1 / -1; grid-row: 2; border-bottom: 1px solid var(--list-line); }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-kicker { display: none; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-list { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: 100%; gap: 0 1.25rem !important; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-list-item { position: relative; display: flex !important; flex: 0 0 auto !important; align-items: center; gap: .4rem; width: auto !important; min-height: 48px; padding: 0; border-bottom: 2px solid transparent !important; border-radius: 0; background: transparent !important; box-shadow: none; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-list-item.hide { display: none !important; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-list-item.active { border-bottom-color: var(--list-ink) !important; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-list-item a { display: inline-flex !important; align-items: center; min-height: 0; padding: 0; background: transparent; white-space: nowrap; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-list-item:not(.active):hover a { color: var(--list-ink) !important; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .nav-list-item .nav-count-badge { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; display: inline-flex !important; border-radius: 6px; }
  html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard #view-personal-tasks .tasks-main-content { flex: 0 0 auto !important; width: 100%; height: auto !important; overflow: visible; }
}

/* Minimal UI features driven by minimal-ui.js */
html #view-dashboard#view-dashboard .app-header { animation: none; transform: none; }
#view-dashboard .header-dropdown-menu { display: none !important; }
#view-dashboard .header-user-trigger .user-name, #view-dashboard .header-user-trigger .dropdown-chevron { display: none; }
#view-dashboard .header-user-trigger .user-avatar { width: 40px; height: 40px; }
html #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item { color: var(--list-muted); }

.mui-search-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border: 0; border-radius: 12px; background: rgba(145,158,171,.08); color: var(--list-muted); cursor: pointer; transition: background-color .15s var(--mui-ease); }
.mui-search-pill:hover { background: rgba(145,158,171,.16); }
.mui-search-pill kbd { padding: 2px 6px; border-radius: 6px; background: var(--list-surface); box-shadow: var(--list-shadow); font: 700 .6875rem/1.4 var(--font-body); }
.mui-rail-toggle { display: none; }

.mui-layer { position: fixed; inset: 0; z-index: 2100; display: flex; justify-content: center; align-items: flex-start; background: rgba(28,37,46,.48); }
.mui-layer-clear { background: transparent; justify-content: flex-end; }
.mui-search-box { width: min(600px, calc(100vw - 32px)); margin-top: 12vh; overflow: hidden; border-radius: 16px; background: var(--list-surface); box-shadow: var(--list-shadow-dropdown); animation: mui-pop .2s var(--mui-ease) both; }
.mui-search-box input { width: 100%; height: 60px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--list-line); outline: 0; background: transparent; color: var(--list-ink); font: 500 1rem var(--font-body); }
.mui-search-list { max-height: 50vh; overflow: auto; padding: 8px; }
.mui-search-row { display: block; width: 100%; padding: 12px; border: 1px dashed transparent; border-radius: 8px; background: transparent; color: var(--list-ink); font: 600 .875rem var(--font-body); text-align: left; cursor: pointer; }
.mui-search-row:hover { border-color: var(--status-done-dot); background: var(--list-action-hover); }
.mui-empty { padding: 16px; color: var(--list-muted); font-size: .875rem; }

.mui-popover { position: absolute; right: 24px; display: flex; flex-direction: column; width: 328px; max-height: 480px; padding: 16px 4px 4px; border-radius: 10px; background: var(--list-surface); box-shadow: var(--list-shadow-dropdown); color: var(--list-ink); animation: mui-pop .2s var(--mui-ease) both; }
.mui-select-menu {
  position: fixed; display: flex; flex-direction: column; gap: 4px; max-width: calc(100vw - 16px); padding: 4px; overflow-y: auto; border-radius: 10px; box-shadow: var(--list-shadow-dropdown); color: var(--list-ink);
  background: radial-gradient(circle at 100% 0, rgba(0,184,217,.1), transparent 50%), radial-gradient(circle at 0 100%, rgba(255,86,48,.1), transparent 50%), var(--list-popover);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transform-origin: top; animation: mui-dropdown-in .25s cubic-bezier(.4,0,.2,1) backwards;
}
.mui-select-item { flex: 0 0 auto; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: 400 .875rem/1.5 inherit; text-align: left; cursor: pointer; }
.mui-select-item:hover { background: var(--list-action-hover); }
.mui-select-item:disabled { opacity: .48; cursor: default; }
.mui-select-item[aria-selected="true"] { background: rgba(145,158,171,.16); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mui-select-menu { animation: none; } }
.mui-popover strong { padding: 0 12px 8px; font-size: 1rem; }
.mui-contact-list { overflow: auto; }
.mui-contact { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 6px; font-size: .875rem; }
.mui-contact:hover { background: var(--list-action-hover); }
.mui-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--status-todo-soft); font-weight: 600; }

.mui-layer:has(.mui-account) { justify-content: flex-end; align-items: stretch; background: transparent; }
.mui-account { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(320px, 100vw); padding: 40px 16px 16px; background: var(--list-surface); box-shadow: -40px 40px 80px -8px rgba(145,158,171,.24); color: var(--list-ink); animation: mui-slide .25s var(--mui-ease) both; }
.mui-account-avatar { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 8px; border-radius: 50%; outline: 2px solid var(--status-done-dot); outline-offset: 4px; background: var(--status-todo-soft) center/cover; font-size: 1.75rem; font-weight: 600; }
.mui-account-link { width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--list-muted); font: 500 .875rem var(--font-body); text-align: left; cursor: pointer; }
.mui-account-link:first-of-type { margin-top: 16px; }
.mui-account-link:hover { background: var(--list-action-hover); color: var(--list-ink); }
.mui-account-logout { width: 100%; height: 48px; margin-top: auto; border: 0; border-radius: 8px; background: var(--status-returned-soft); color: var(--status-returned-ink); font: 700 .875rem var(--font-body); cursor: pointer; }
.mui-account-logout:hover { background: rgba(255,86,48,.32); }
@keyframes mui-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mui-slide { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }

html #view-dashboard#view-dashboard .header-notification-panel {
  position: fixed; inset: 0 0 0 auto; z-index: 2000; width: min(420px, 100vw); max-height: none; height: 100vh; border: 0; border-radius: 0; background: var(--list-surface); box-shadow: -40px 40px 80px -8px rgba(145,158,171,.24); color: var(--list-ink); animation: mui-slide .25s var(--mui-ease) both;
}

/* Header buttons sit at the top of the viewport, so their tooltips open downwards and stay hidden while the panel is open. */
html #view-dashboard#view-dashboard .app-header [data-tooltip]::before { top: calc(100% + .2rem); bottom: auto; border-top-color: transparent; border-bottom-color: var(--color-paper-obsidian); transform: translate(50%, -.5rem); }
html #view-dashboard#view-dashboard .app-header [data-tooltip]::after { top: calc(100% + .85rem); bottom: auto; transform: translate(50%, -.5rem); }
html #view-dashboard#view-dashboard .app-header [data-tooltip]:is(:hover, :focus-visible)::before,
html #view-dashboard#view-dashboard .app-header [data-tooltip]:is(:hover, :focus-visible)::after { transform: translate(50%, 0); }
html #view-dashboard#view-dashboard .app-header [data-tooltip][aria-expanded="true"]::before,
html #view-dashboard#view-dashboard .app-header [data-tooltip][aria-expanded="true"]::after { opacity: 0; }

#view-home-dashboard .home-year-card, #view-home-dashboard .home-month-card { display: none !important; }
html body:has(#view-home-dashboard:not(.hide)) #view-dashboard#view-dashboard .home-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
.mui-home { grid-column: 1 / -1; display: grid; gap: 24px; min-width: 0; }
.mui-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mui-stat { position: relative; display: grid; gap: 8px; padding: 24px; overflow: hidden; border: 0; border-radius: 16px; text-align: left; cursor: pointer; transition: box-shadow .25s var(--mui-ease); }
.mui-stat:hover { box-shadow: var(--list-shadow-z8); }
.mui-stat.is-green { background: linear-gradient(135deg, rgba(91,228,155,.2), rgba(0,167,111,.2)); color: #004b50; }
.mui-stat.is-blue { background: linear-gradient(135deg, rgba(104,205,249,.2), rgba(7,141,238,.2)); color: #003768; }
.mui-stat.is-yellow { background: linear-gradient(135deg, rgba(255,214,102,.2), rgba(255,171,0,.2)); color: #7a4100; }
.mui-stat.is-red { background: linear-gradient(135deg, rgba(255,172,130,.2), rgba(255,86,48,.2)); color: #7a0916; }
:root[data-theme="dark"] .mui-stat { color: var(--list-ink); }
.mui-stat-label { font-size: .875rem; font-weight: 600; }
.mui-stat-value { font-size: 2rem; font-weight: 700; line-height: 1.5; }
.mui-spark { position: absolute; right: 16px; bottom: 16px; }
.mui-draw { stroke-dasharray: 1; animation: mui-draw 1.2s var(--mui-ease) both; }
@keyframes mui-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.mui-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
.mui-panel { min-width: 0; padding: 24px; border-radius: 16px; background: var(--list-surface); box-shadow: var(--list-shadow); }
.mui-panel h2 { margin: 0; color: var(--list-ink); font-size: 1.125rem; font-weight: 600; }
.mui-panel p { margin: 4px 0 0; color: var(--list-muted); font-size: .875rem; }
.mui-donut-ring { position: relative; width: 220px; max-width: 100%; margin: 24px auto; }
.mui-seg { animation: mui-seg-sweep var(--seg-duration) linear var(--seg-delay) both; }
@keyframes mui-seg-sweep { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--seg-dash); } }
@keyframes mui-fade { from { opacity: 0; } to { opacity: 1; } }
.mui-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--list-muted); font-size: .875rem; pointer-events: none; }
.mui-donut-center strong { color: var(--list-ink); font-size: 1.5rem; }
.mui-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding-top: 16px; border-top: 1px dashed var(--list-line); color: var(--list-ink); font-size: .8125rem; }
.mui-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--dot); }
.mui-columns { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 320px; margin-top: 24px; }
.mui-col { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; color: var(--list-muted); font-size: .75rem; text-align: center; }
.mui-col:hover { background: var(--list-action-hover); border-radius: 8px; }
.mui-col-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; min-height: 0; border-bottom: 1px dashed var(--list-line); }
.mui-col-bars i { display: block; width: 28%; max-width: 14px; min-height: 2px; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: mui-grow .8s var(--mui-ease) both; }
@keyframes mui-grow { from { transform: scaleY(0); } to { transform: none; } }

@media (min-width: 1024px) {
  .mui-rail-toggle { position: fixed; top: 22px; left: calc(var(--sidebar-width) - 13px); z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--list-line); border-radius: 50%; background: var(--list-surface); color: var(--list-muted); cursor: pointer; transition: transform .2s var(--mui-ease); }
  .mui-rail-toggle:hover { background: var(--list-head); }
  :root[data-rail-mini] { --sidebar-width: 88px; }
  :root[data-rail-mini] .mui-rail-toggle { transform: rotate(180deg); }
  :root[data-rail-mini] #view-dashboard .header-logo-meta, :root[data-rail-mini] #view-dashboard .nav-report-chevron, :root[data-rail-mini] #view-dashboard #nav-report-dropdown { display: none !important; }
  :root[data-rail-mini] #view-dashboard#view-dashboard #nav-workspace-dropdown::before { content: ""; padding: 0; }
  html[data-rail-mini] #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 2px; font-size: .625rem; text-align: center; }
  html[data-rail-mini] #view-dashboard#view-dashboard #nav-workspace-dropdown .nav-item .nav-label { flex: 0 0 auto; }
  html[data-rail-mini] #view-dashboard#view-dashboard .navbar-menu { padding-inline: 4px; }
}
@media (max-width: 1100px) { .mui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mui-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .mui-search-pill kbd { display: none; } .mui-stats { gap: 12px; } .mui-stat { padding: 16px; } .mui-spark { display: none; } .mui-columns { height: 220px; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .mui-draw, .mui-seg, .mui-col-bars i, .mui-account, .mui-popover, .mui-search-box { animation: none; } }

/* Source parity with minimals.cc/dashboard: green primary, white stat widgets, sign-in form. */
:root:not([data-accent]) {
  --color-accent-gold: #00a76f;
  --color-accent-gold-hover: #007867;
  --color-accent-gold-glow: rgba(0,167,111,.16);
  --list-accent-text: #00a76f;
}
:root:not([data-theme="dark"]) { --color-ink-dark: #1c252e; --color-ink-muted: #637381; }

.mui-stat, .mui-stat:is(.is-green, .is-blue, .is-yellow, .is-red) { min-height: 124px; background: var(--list-surface); box-shadow: var(--list-shadow); color: var(--list-ink); }
.mui-stat.is-green .mui-spark { color: #00a76f; }
.mui-stat.is-blue .mui-spark { color: #00b8d9; }
.mui-stat.is-yellow .mui-spark { color: #ffab00; }
.mui-stat.is-red .mui-spark { color: #ff5630; }
.mui-stat-value { padding-right: 92px; }
.mui-spark { top: 50%; right: 24px; bottom: auto; transform: translateY(-50%); }
.mui-spark rect { transform-box: fill-box; transform-origin: bottom; animation: mui-grow .8s var(--mui-ease) both; }

html body:has(#view-login:not(.hide)) { background: #fff; background-image: none; }
html #view-login#view-login, html #view-login#view-login .hm-login-split, html #view-login#view-login .hm-login-form-panel { background: #f4f6f8; background-image: none; }
html #view-login#view-login::before, html #view-login#view-login::after, html #view-login#view-login .hm-login-split::before, html #view-login#view-login .hm-login-split::after { display: none; }
html #view-login#view-login .hm-form-wrapper { box-sizing: border-box; width: min(420px, 100%); padding: 40px 24px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 2px rgba(145,158,171,.2), 0 12px 24px -4px rgba(145,158,171,.12); }
html #view-login#view-login .hm-form-title { color: #1c252e; font-family: var(--font-body); }
html #view-login#view-login :is(.hm-form-title-kpi, .hm-form-title-main) { color: #1c252e; font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
html #view-login#view-login .hm-input { border: 1px solid rgba(145,158,171,.2); border-radius: 8px; background: transparent; color: #1c252e; font-family: var(--font-body); font-size: .9375rem; box-shadow: none; }
html #view-login#view-login .hm-input:hover { border-color: #1c252e; }
html #view-login#view-login .hm-input:focus { border-color: #1c252e; box-shadow: 0 0 0 1px #1c252e; outline: 0; }
html #view-login#view-login :is(.hm-input-bar, .hm-input-highlight) { display: none; }
html #view-login#view-login .hm-floating-label { color: #637381; font-family: var(--font-body); }
html #view-login#view-login .hm-btn-primary { min-height: 48px; border: 0; border-radius: 8px; background: #1c252e; box-shadow: none; color: #fff; font: 700 .9375rem var(--font-body); letter-spacing: 0; text-transform: none; transform: none; transition: background-color .25s var(--mui-ease), box-shadow .25s var(--mui-ease); }
html #view-login#view-login .hm-btn-primary:hover { background: #454f5b; box-shadow: 0 8px 16px 0 rgba(145,158,171,.16); }
html #view-login#view-login .hm-input { padding-left: 14px; }
html #view-login#view-login .hm-floating-label { left: 14px; }
html #view-login#view-login .hm-form-title-main { white-space: nowrap; }
/* The centred mobile logo needs this space; pages stay reachable from the menu. */
@media (max-width: 420px) { .mui-search-pill { display: none; } }

/* Home header: two plain, low cards. Title and period on the left, data scope on the right. */
html #view-dashboard#view-dashboard#view-dashboard :is(.home-dashboard-topline, .home-context-banner) {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; min-height: 0; padding: 16px 20px; border: 1px solid var(--list-line); border-radius: 16px; background: var(--list-surface); color: var(--list-ink);
}
html #view-dashboard#view-dashboard#view-dashboard .home-context-banner { flex-wrap: wrap; }
html #view-dashboard#view-dashboard#view-dashboard :is(.home-dashboard-kicker, .home-context-icon, .home-context-period, .home-period-label) { display: none; }
html #view-dashboard#view-dashboard#view-dashboard .home-dashboard-heading { min-width: 0; }
html #view-dashboard#view-dashboard#view-dashboard .home-dashboard-heading h1 { max-width: none; margin: 0; color: var(--list-ink); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
html #view-dashboard#view-dashboard#view-dashboard .home-dashboard-heading p { margin: 2px 0 0; color: var(--list-muted); font-size: .8125rem; line-height: 1.5; }
html #view-dashboard#view-dashboard#view-dashboard .home-context-copy { display: block; min-width: 0; color: var(--list-muted); font-size: .8125rem; line-height: 1.5; }
html #view-dashboard#view-dashboard#view-dashboard .home-context-copy > span:not(.home-context-icon) { display: block; }
html #view-dashboard#view-dashboard#view-dashboard .home-context-copy strong { display: block; color: var(--list-ink); font-size: 1rem; font-weight: 500; text-wrap: balance; }
html #view-dashboard#view-dashboard#view-dashboard :is(.home-period-control, .home-scope-control) { flex: 0 0 auto; width: 10.5rem; min-width: 0; max-width: 100%; margin: 0; }
html #view-dashboard#view-dashboard#view-dashboard .home-scope-control.hide { display: none; }
html #view-dashboard#view-dashboard#view-dashboard :is(.home-period-control, .home-scope-control) select { width: 100%; min-height: 36px; border: 1px solid var(--list-muted); background: transparent; color: var(--list-ink); font: 500 .8125rem/1.2 var(--font-body); }
html #view-dashboard#view-dashboard#view-dashboard .home-scope-status { flex: 1 0 100%; margin: 0; color: var(--list-muted); }
html #view-dashboard#view-dashboard#view-dashboard .home-scope-status.hide { display: none; }
@media (max-width: 600px) {
  html #view-dashboard#view-dashboard#view-dashboard :is(.home-dashboard-topline, .home-context-banner) { padding: 14px 16px; flex-wrap: wrap; }
  html #view-dashboard#view-dashboard#view-dashboard :is(.home-period-control, .home-scope-control) { flex: 1 1 100%; width: 100%; }
}

/* Personal tasks: one flat page. Period and KPI figures share a bar, tabs sit beneath, the list has no nested boxes. */
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks.personal-tasks-view { gap: 24px; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar {
  position: static; display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); grid-template-areas: "period summary" "nav nav"; align-items: center; gap: 12px 24px; height: auto; padding: 16px 20px 0; border: 1px solid var(--list-line); border-radius: 16px; background: var(--list-surface); box-shadow: none;
}
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar-top { display: contents; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .period-picker-card { grid-area: period; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .period-label,
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .nav-kicker { display: none; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-section { grid-area: nav; min-width: 0; margin: 0; padding: 0; border: 0; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .nav-list { display: flex; gap: 20px; margin: 0; padding: 0; overflow-x: auto; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item { flex: 0 0 auto; padding: 4px 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent !important; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.active { border-bottom-color: var(--list-ink); }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar-bottom { grid-area: summary; display: flex; justify-content: flex-end; gap: 32px; min-width: 0; margin: 0; padding: 0; border: 0; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .summary-block { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .summary-row { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; color: var(--list-muted); font-size: .8125rem; font-weight: 400; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-main-content { padding: 20px; border: 1px solid var(--list-line); border-radius: 16px; box-shadow: none; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-header { margin-bottom: 8px; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-table-wrapper { min-height: 0; height: auto; border: 0; border-radius: 0; box-shadow: none; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-table-wrapper:has(#tasks-empty-state:not(.hide)) { min-height: 220px; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks #tasks-empty-state:not(.hide) { min-height: 0; padding: 32px 16px; color: var(--list-muted); }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks #tasks-empty-state:not(.hide) p { font-size: .875rem; font-weight: 400; }
@media (max-width: 900px) {
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "period" "summary" "nav"; padding: 14px 16px 0; }
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar-bottom { justify-content: flex-start; flex-wrap: wrap; gap: 8px 24px; }
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-main-content { padding: 16px; }
}
/* Legacy rules for these boxes use !important. */
html body #view-dashboard #view-personal-tasks :is(.period-picker-card, .summary-block) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html body #view-dashboard #view-personal-tasks .summary-block { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
html body #view-dashboard #view-personal-tasks .period-picker-card { width: 100% !important; max-width: none !important; }
html body #view-dashboard #view-personal-tasks .nav-list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; }
html body #view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item { flex: 0 0 auto !important; width: auto !important; max-width: none !important; gap: 8px; }
html body #view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item { display: flex !important; align-items: center; }
html body #view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item a { width: auto !important; padding: 0 !important; white-space: nowrap; }
html body #view-dashboard #view-personal-tasks .tasks-sidebar .nav-count-badge { position: static !important; flex: 0 0 auto; transform: none !important; }
html body #view-dashboard #view-personal-tasks .nav-list { gap: 24px !important; }

/* Polish pass: dark parity, KPI hierarchy, focus, touch. */
:root[data-theme="dark"] body #view-dashboard #view-personal-tasks :is(.period-picker-card, .summary-block) { background: transparent !important; }
:root[data-theme="dark"] body #view-dashboard #view-personal-tasks .tasks-sidebar .summary-row { color: var(--list-muted) !important; }
:root[data-theme="dark"] body #view-dashboard #view-personal-tasks .tasks-sidebar .summary-row strong { color: var(--list-ink) !important; }
html body:has(#view-personal-tasks:not(.hide)) #view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .summary-block { display: flex !important; flex-wrap: wrap; min-width: 0; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .summary-header { display: block; flex: 0 0 100%; margin: 0; color: var(--list-muted) !important; font-size: .6875rem; font-weight: 600; line-height: 1.4; letter-spacing: .04em; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .summary-row { align-items: baseline; background: transparent !important; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .summary-row strong { color: var(--list-ink); font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .summary-row.highlight { margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--list-muted) !important; font-size: .8125rem !important; font-weight: 400 !important; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .summary-row.highlight strong { color: var(--list-ink) !important; font-weight: 600 !important; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-section { width: 100%; max-width: 100%; align-self: stretch; border-top: 1px solid var(--list-line); }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .nav-list { flex: 1 1 auto; min-width: 0; margin-inline: -4px; padding-inline: 4px !important; scrollbar-width: none; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .nav-list::-webkit-scrollbar { display: none; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:not(.active):hover { border-bottom-color: var(--list-line); }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:not(.active):hover a { color: var(--list-ink) !important; }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item a { transition: color .2s var(--mui-ease); }
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item a:focus-visible { outline: 2px solid var(--list-ink) !important; outline-offset: 2px; border-radius: 4px; }
html #view-dashboard#view-dashboard#view-dashboard :is(.home-period-control, .home-scope-control) select:focus-visible { outline: 2px solid var(--list-ink); outline-offset: 2px; border-color: var(--list-ink); box-shadow: none; }
html #view-dashboard#view-dashboard#view-dashboard :is(.home-period-control, .home-scope-control) svg { color: var(--list-muted); }
@media (max-width: 900px) {
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks.personal-tasks-view { gap: 16px; }
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .nav-list { margin-inline: -16px; padding-inline: 16px !important; scroll-padding-inline: 16px; }
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item a { min-height: 44px; }
}
@media (max-width: 600px) {
  html #view-dashboard#view-dashboard#view-dashboard :is(.home-period-control, .home-scope-control) select { min-height: 44px; font-size: 1rem; }
  #view-dashboard#view-dashboard #view-personal-tasks select.period-select { min-height: 44px !important; font-size: 1rem !important; }
}
html body #view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.hide { display: none !important; }

/* Task table: Minimal list rows. One soft pill per row, the rest is text. */
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks {
  & .tasks-table-wrapper { width: auto; margin-inline: -20px; }
  & .tasks-table thead th { height: 44px; border: 0; border-radius: 0; background: var(--list-head); color: var(--list-muted); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  & .tasks-table :is(thead th, tbody td):first-child { padding-left: 20px; }
  & .tasks-table :is(thead th, tbody td):last-child { padding-right: 20px; }
  & .tasks-table thead th { border-bottom: 1px solid var(--list-line); }
  & .tasks-table tbody td { border-bottom: 1px dashed var(--list-line); font-size: 14px; }

  /* Checkbox: the box is drawn in CSS, the SVG only supplies the tick. */
  & .tasks-table .checkbox { --checkbox-size: 18px; position: relative; display: inline-flex; vertical-align: middle; }
  & .tasks-table .checkbox::after { content: ""; position: absolute; inset: -13px; }
  & .tasks-table .checkbox .checkmark { box-sizing: border-box; border: 1.5px solid var(--list-muted); border-radius: 5px; background: transparent; color: var(--list-on-primary); opacity: 1; filter: none; transition: background-color .15s var(--mui-ease), border-color .15s var(--mui-ease); }
  & .tasks-table .checkbox .checkmark svg { width: 12px; height: 12px; flex: none; }
  & .tasks-table .checkbox .checkmark svg rect { display: none; }
  & .tasks-table .checkbox .checkmark svg polyline { stroke-width: 3.5; transform: translate(-2.5px, 3px); }
  & .tasks-table .checkbox:hover:not(:has(input:disabled)) .checkmark { border-color: var(--list-ink); outline: 0; filter: none; }
  & .tasks-table .checkbox input:checked ~ .checkmark { border-color: var(--list-primary); background: var(--list-primary); color: var(--list-on-primary); }
  & .tasks-table .checkbox input:focus-visible ~ .checkmark { border-radius: 5px; outline: 2px solid var(--list-ink); outline-offset: 2px; }
  & .tasks-table .checkbox input:disabled ~ .checkmark { opacity: .4; }
  /* The tick is white: unchecked it would still show on the head band. */
  & .tasks-table .checkbox input:not(:checked) ~ .checkmark svg { visibility: hidden; }
  /* Nothing selectable below: the head box fades with the rows. */
  & .tasks-table:not(:has(.task-checkbox:not(:disabled))) #check-all-tasks ~ .checkmark { opacity: .4; }

  /* Group row: on the page surface, so the head stays the only band. */
  & .tasks-table .task-group-row,
  & .tasks-table .task-group-row:hover,
  & .tasks-table .task-group-row td,
  & .tasks-table .task-group-row:hover td { border: 0; border-bottom: 1px dashed var(--list-line); background: transparent; }
  & .tasks-table tbody .task-group-row td:first-child { padding: 0; }
  & .task-group-toggle { min-height: 44px; gap: 8px; padding: 0 20px; color: var(--list-ink); font-size: 14px; font-weight: 600; }
  & .task-group-toggle:hover { background: var(--list-hover); }
  & .task-group-toggle:focus-visible { outline: 2px solid var(--list-ink); outline-offset: -2px; }
  & .task-group-chevron { color: var(--list-muted); }
  & .task-group-name { min-width: 0; color: var(--list-ink); }
  & :is(.task-group-point, .task-group-count) { color: var(--list-muted); font-size: 13px; font-weight: 400; }
  & .task-group-count { display: inline; flex: none; margin-left: auto; }

  /* Task row text. */
  & .tasks-table .task-group-member td:nth-child(2) { padding-left: 14px; font-weight: 400; }
  & .task-group-member td:nth-child(3) strong { display: block; margin-bottom: 4px; color: var(--list-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
  & .task-row-meta,
  & .task-row-chips,
  & .task-kpi-chip { display: inline; margin: 0; padding: 0; border-radius: 0; background: transparent; color: var(--list-muted); font-size: 13px; font-weight: 400; line-height: 1.5; white-space: normal; }
  & :is(.task-row-meta, .task-kpi-chip) > span { display: inline-block; margin-right: 12px; white-space: nowrap; }

  /* Assignee: name, then the share as a muted second line. */
  & .task-assignee-score { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  & .task-assignee-name { color: var(--list-ink); }
  & .task-participation-pill { padding: 0; border-radius: 4px; background: transparent; box-shadow: none; color: var(--list-muted); font-size: 13px; font-weight: 400; line-height: 1.4; font-variant-numeric: tabular-nums; }
  & .task-participation-pill:hover { background: transparent; box-shadow: none; color: var(--list-ink); }
  & .task-participation-pill:focus-visible { background: transparent; box-shadow: none; outline: 2px solid var(--list-ink); outline-offset: 2px; }

  /* Status: the pill, a quiet eye, the score as plain figures. */
  & .tasks-table .badge { font-size: 12px; }
  & .task-status-trigger { font-size: 13px; }
  & .task-score-chip { display: block; width: fit-content; margin-top: 4px; padding: 0; border-radius: 0; background: transparent; color: var(--list-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
  & .task-status-view-icon { position: relative; display: inline-flex; width: 28px; height: 28px; margin-left: 4px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--list-muted); vertical-align: middle; transition: background-color .15s var(--mui-ease), color .15s var(--mui-ease); }
  & .task-status-view-icon::after { content: ""; position: absolute; inset: -8px; }
  & .task-status-view-icon:hover { background: var(--list-hover); color: var(--list-ink); }
  & .task-status-view-icon:focus-visible { outline: 2px solid var(--list-ink); outline-offset: 1px; }

  /* The cell keeps its fallback dash in the markup; it just is not shown. */
  & .task-actions-cell:not(:has(.task-action-menu)) { font-size: 0; }

  /* Last column: row actions, flush right. */
  & .tasks-table thead th:last-child { width: 96px; text-align: right; }
  & .tasks-table .task-actions-cell { text-align: right; }
  & .task-action-menu-toggle { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--list-muted); }
  & .task-action-menu-toggle:hover,
  & .task-action-menu.is-open .task-action-menu-toggle { background: var(--list-hover); color: var(--list-ink); }
  & .task-action-menu-toggle:focus-visible { outline: 2px solid var(--list-ink); outline-offset: 1px; }

  /* The table ends at its last row, closed by a solid rule. */
  & .tasks-table-wrapper { flex: 0 0 auto; }
  & .tasks-table tbody tr:last-child td,
  & .tasks-table tbody tr.task-group-row:last-child td { border-bottom: 1px solid var(--list-line); }
}
/* app.js renders the eye inside the status cell; on the table layout it sits in the actions column. */
@media (min-width: 721px) {
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks {
    & .tasks-table .task-group-member { position: relative; }
    & .tasks-table .task-group-member .task-status-view-icon { position: absolute; top: 50%; right: 20px; margin: -14px 0 0; }
    & .tasks-table .task-group-member:has(.task-action-menu) .task-status-view-icon { right: 56px; }
  }
}
@media (max-width: 900px) {
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-table-wrapper { margin-inline: -16px; }
}
@media (max-width: 720px) {
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks {
    & .tasks-table tbody { gap: 0; }
    & .tasks-table tbody tr.task-group-row { margin: 0; border: 0; border-radius: 0; background: var(--list-head); }
    & .task-group-toggle { padding: 0 16px; }
    & .tasks-table tbody tr.task-group-member { padding: 14px 16px; border: 0; border-bottom: 1px dashed var(--list-line); border-radius: 0; background: transparent; }
    & .tasks-table tbody tr.task-group-member td:nth-child(n) { padding: 2px 0; border: 0; }
    & .tasks-table tbody tr.task-group-member td:nth-child(2) { color: var(--list-muted); font-size: 13px; }
  }
}

/* List switcher: plain type one step larger, so it reads a level above the underlined status tabs. */
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks .tasks-sidebar {
  & .nav-section { border-top: 0; }
  & #kpi-task-nav-list { display: flex; gap: 4px; max-width: 100%; margin-top: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; overflow-x: auto; scrollbar-width: none; }
  & .nav-indicator { display: none; }
  & .nav-list-item, & .nav-list-item.active { min-height: 40px; padding: 0 16px !important; border-width: 0 !important; border-radius: 8px; gap: 8px; background: transparent !important; box-shadow: none; transition: background-color .15s var(--mui-ease); }
  & .nav-list-item:not(.active):hover { background: var(--list-action-hover) !important; }
  & .nav-list-item.active { background: var(--list-primary) !important; }
  & .nav-list-item a { min-height: 40px; color: var(--list-ink) !important; font-size: 16px; font-weight: 500; }
  & .nav-list-item.active a { color: var(--list-on-primary) !important; font-weight: 600; }
  & .nav-list-item .nav-count-badge, & .nav-list-item.active .nav-count-badge { min-width: 0; height: auto; padding: 0; border-radius: 0; background: transparent !important; color: var(--list-muted) !important; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
  & .nav-list-item.active .nav-count-badge { color: var(--list-on-primary) !important; }
  & .nav-list-item .nav-count-badge.is-zero { display: none !important; }
}

/* dashboard-main is a stacking context at z-index 1, so modals can only clear the header when it drops below it. */
html body:has(.modal-overlay:not(.hide)) #view-dashboard#view-dashboard#view-dashboard .app-header { z-index: 0; }

/* Year tasks modal in dark mode: style.css hard-codes a navy title and bright table rules. */
html:root[data-theme="dark"] #view-dashboard#view-dashboard#view-dashboard {
  & .home-year-tasks-header h3, & #home-year-tasks-title-text { color: var(--list-ink); }
  & .home-year-tasks-table-wrap { border-color: var(--list-line); }
  & .home-year-tasks-close { color: var(--list-muted); }
  & .home-year-tasks-close:hover { color: var(--list-ink); }
  & .home-year-tasks-empty { color: var(--list-muted); }
}

/* Header avatar: the old rule assumed a dark header, so its white tint vanished on the light one. */
html #view-dashboard#view-dashboard#view-dashboard .header-user-trigger .user-avatar { border: 0; background: var(--list-primary); color: var(--list-on-primary); font-size: 14px; font-weight: 600; }

/* Personal tasks header: the KPI figures are the first thing read, tabs and period share the row beneath. */
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks {
  & .tasks-sidebar { grid-template-columns: minmax(0, 1fr) 10.5rem; grid-template-areas: "summary summary" "nav period"; gap: 16px 24px; padding: 20px; }
  & .tasks-sidebar-bottom { display: grid !important; width: 100%; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 0; align-items: end; justify-content: stretch; padding-bottom: 16px; border-bottom: 1px solid var(--list-line); }
  & .task-stat { display: grid; gap: 4px; min-width: 0; padding: 0 20px; border-left: 1px solid var(--list-line); }
  & .task-stat:first-child { padding-left: 0; border-left: 0; }
  & .task-stat span { color: var(--list-muted); font-size: 13px; font-weight: 400; }
  & .task-stat strong { color: var(--list-ink); font-size: 24px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  & .task-stat-lead strong { font-size: 32px; font-weight: 700; }
  & .tasks-sidebar #kpi-task-nav-list { margin-top: 0; }
}
@media (max-width: 720px) {
  html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks {
    & .tasks-sidebar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "period" "summary" "nav"; padding: 16px; }
    & .tasks-sidebar-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
    & .task-stat { padding: 0; border-left: 0; }
    & .task-stat-lead { grid-column: 1 / -1; }
  }
}

/* The shared [data-tooltip] rule sets position: relative, which pushed the combobox toggle out of its input. */
html #view-dashboard#view-dashboard#view-dashboard .task-combobox-control > .task-combobox-toggle { position: absolute; top: 3px; right: 3px; bottom: auto; left: auto; width: 32px; height: 32px; margin: 0; transform: none; }
html #view-dashboard#view-dashboard#view-dashboard .task-combobox-control > input { padding-right: 40px; }
html #view-dashboard#view-dashboard#view-dashboard .task-combobox-control > .task-combobox-toggle::before,
html #view-dashboard#view-dashboard#view-dashboard .task-combobox-control > .task-combobox-toggle::after { display: none; }

/* Task combobox list: same surface and rows as .mui-select-menu. */
html #view-dashboard#view-dashboard#view-dashboard .task-combobox-dropdown {
  gap: 4px; padding: 4px; border: 0; border-radius: 10px; box-shadow: var(--list-shadow-dropdown); color: var(--list-ink);
  background: radial-gradient(circle at 100% 0, rgba(0,184,217,.1), transparent 50%), radial-gradient(circle at 0 100%, rgba(255,86,48,.1), transparent 50%), var(--list-popover);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  & [role="option"] { height: auto; min-height: 36px; gap: 12px; padding: 6px 8px; border-radius: 6px; background: transparent; color: var(--list-ink); font-size: 14px; font-weight: 400; line-height: 1.5; }
  & [role="option"]:is(:hover, :focus-visible) { background: var(--list-action-hover); }
  & [role="option"]:focus-visible { outline: 2px solid var(--list-ink); outline-offset: -2px; }
  & [role="option"][aria-selected="true"] { background: rgba(145,158,171,.16); font-weight: 600; }
  & [role="option"] strong { flex: 0 0 auto; min-width: 5.5rem; color: var(--list-muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
  & [role="option"] span { min-width: 0; color: inherit; font-size: inherit; }
  & .task-combobox-empty { padding: 16px; color: var(--list-muted); font-size: 14px; }
}

/* Toast: a light card in the bottom right, clear of the figures; only the icon carries colour. */
html body #view-dashboard#view-dashboard#view-dashboard {
  & .notification-ambient-region { position: fixed; z-index: 2200; top: auto; right: 24px; bottom: 24px; left: auto; width: min(calc(100vw - 32px), 380px); transform: none; }
  & .notification-ambient-toast { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 12px 44px 12px 14px; border: 1px solid var(--list-line); border-radius: 10px; background: var(--list-surface); box-shadow: var(--list-shadow-dropdown); color: var(--list-ink); cursor: default; transform: translateY(8px); transition: opacity .2s var(--mui-ease), transform .2s var(--mui-ease); }
  & .notification-ambient-region.is-actionable .notification-ambient-toast { cursor: pointer; }
  & .notification-ambient-region.is-actionable .notification-ambient-toast:hover { background: var(--list-hover); }
  & .notification-ambient-region:not(.is-actionable) .notification-ambient-toast:hover { background: var(--list-surface); }
  & .notification-ambient-region.is-visible .notification-ambient-toast { transform: none; }
  & .notification-ambient-toast:hover, & .notification-ambient-toast:focus-visible { border-color: var(--list-line); }
  & .notification-ambient-toast:focus-visible { outline: 2px solid var(--list-ink); outline-offset: 2px; }
  & .notification-ambient-toast:active { transform: none; }
  & .notification-ambient-icon { width: 20px; height: 20px; border-radius: 0; background: transparent; color: var(--status-progress-ink); }
  & .notification-ambient-region[data-tone="success"] .notification-ambient-icon { color: var(--status-done-dot); }
  & .notification-ambient-region[data-tone="error"] .notification-ambient-icon { color: var(--status-returned-ink); }
  & .notification-ambient-icon svg { width: 20px; height: 20px; }
  & .notification-ambient-copy strong { color: var(--list-ink); font-size: 14px; font-weight: 500; line-height: 20px; white-space: normal; }
  & .notification-ambient-copy span { color: var(--list-muted); font-size: 13px; line-height: 18px; white-space: normal; }
  & .notification-ambient-copy span:empty { display: none; }
  & .notification-ambient-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--list-muted); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s var(--mui-ease), background-color .15s var(--mui-ease); }
  & .notification-ambient-region.is-visible .notification-ambient-close { opacity: 1; pointer-events: auto; }
  & .notification-ambient-close:hover { background: var(--list-action-hover); color: var(--list-ink); }
  & .notification-ambient-close:focus-visible { outline: 2px solid var(--list-ink); outline-offset: -2px; }
}
@media (max-width: 600px) {
  html body #view-dashboard#view-dashboard#view-dashboard .notification-ambient-region { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #view-dashboard#view-dashboard#view-dashboard .notification-ambient-toast { transform: none; transition: opacity .12s linear; }
}

/* Status picker: same tones as the status tabs and badges; style.css fell back to the brand red. */
html #view-dashboard#view-dashboard {
  & :is(.task-status-picker, .task-status-option).is-not-started { --task-status-tone: var(--status-todo-ink); --task-status-tint: var(--status-todo-soft); }
  & :is(.task-status-picker, .task-status-option).is-in-progress { --task-status-tone: var(--status-progress-ink); --task-status-tint: var(--status-progress-soft); }
  & :is(.task-status-picker, .task-status-option).is-awaiting-review { --task-status-tone: var(--status-waiting-ink); --task-status-tint: var(--status-waiting-soft); }
  & :is(.task-status-picker, .task-status-option).is-returned { --task-status-tone: var(--status-returned-ink); --task-status-tint: var(--status-returned-soft); }
  & :is(.task-status-picker, .task-status-option).is-reviewed { --task-status-tone: var(--status-done-ink); --task-status-tint: var(--status-done-soft); }
}

/* Task meta line: the deadline and points are what people scan for; the rest stays quiet. */
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks {
  & .task-row-meta > span:nth-child(2) { color: var(--list-ink); font-weight: 500; }
  & .task-kpi-chip > span:first-child { padding-left: 12px; border-left: 1px solid var(--list-line); }
  & .task-kpi-chip > span:last-child { color: var(--list-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
}

/* Task dates as soft tags, so they stand apart from the points beside them. */
html body #view-dashboard#view-dashboard#view-dashboard#view-dashboard#view-dashboard #view-personal-tasks {
  & .task-row-meta > span { margin-right: 6px; padding: 2px 8px; border-radius: 6px; background: var(--status-todo-soft); color: var(--status-todo-ink); font-weight: 500; }
  & .task-row-meta > span:nth-child(2) { margin-right: 12px; background: var(--status-waiting-soft); color: var(--status-waiting-ink); }
}

/* Task history: one timeline in plain language, no cards, table bands or badges. */
html body #view-dashboard#view-dashboard#view-dashboard #modal-task-history {
  & .task-history-body { padding: 16px 24px 8px; }
  & .task-history-list { display: block; padding: 0; }
  & .task-history-item { position: relative; padding: 0 0 16px 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  & .task-history-item::before { content: ""; position: absolute; top: 18px; bottom: -6px; left: 4px; width: 1px; background: var(--list-line); }
  & .task-history-item:last-child::before { display: none; }
  & .task-history-dot { position: absolute; top: 6px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--status-todo-dot); }
  & .task-history-dot:is(.is-create, .is-review, .is-duplicate) { background: var(--status-done-dot); }
  & .task-history-dot:is(.is-status, .is-edit, .is-child_create) { background: var(--status-progress-dot); }
  & .task-history-dot.is-self_evaluate { background: var(--status-waiting-dot); }
  & .task-history-dot.is-return { background: var(--status-returned-dot); }
  & .task-history-item-header { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 2px 12px; width: 100%; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--list-ink); text-align: left; cursor: pointer; }
  & .task-history-item-header:disabled { cursor: default; opacity: 1; }
  & .task-history-item-header:hover { background: transparent; }
  & .task-history-item-header:focus-visible { outline: 2px solid var(--list-ink); outline-offset: 2px; }
  & .task-history-item-header strong { grid-column: 1; color: var(--list-ink); font-size: 14px; font-weight: 500; line-height: 20px; white-space: normal; overflow: visible; }
  & .task-history-actor { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 12px; color: var(--list-muted); font-size: 13px; line-height: 18px; white-space: normal; }
  & .task-history-chevron { grid-column: 2; grid-row: 1; width: 16px; height: 20px; margin: 0; border: 0; background: transparent; color: var(--list-muted); }
  & .task-history-detail { margin-top: 8px; padding: 4px 12px; border-radius: 8px; background: var(--list-head); }
  & .task-history-detail-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 4px 0; border: 0; font-size: 13px; line-height: 20px; }
  & .task-history-detail-row span { color: var(--list-muted); }
  & .task-history-detail-row strong { color: var(--list-ink); font-weight: 500; overflow-wrap: anywhere; }
  & .task-history-empty { color: var(--list-muted); }
}

/* Login: the seal's red field carries the Dong Son drum face; the form sits alone on light paper. */
:root { --login-seal: #6f1d1b; --login-seal-gold: #d8b36a; --login-on-seal: #fff; --login-paper: var(--list-surface); }
:root[data-accent] { --login-seal: oklch(34% 0.09 var(--accent-hue)); }
html #view-login#view-login#view-login {
  & .hm-login-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; min-height: 100vh; min-height: 100dvh; }
  & .hm-login-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 48px; overflow: clip; background: var(--login-seal); color: var(--login-on-seal); }
  & .hm-login-side::after { content: ""; position: absolute; top: 50%; right: 0; width: min(86vh, 50vw); aspect-ratio: 1; background: var(--login-seal-gold); -webkit-mask: url("/assets/dong-son-drum-line.png?v=2") center / contain no-repeat; mask: url("/assets/dong-son-drum-line.png?v=2") center / contain no-repeat; transform: translate(50%, -50%); animation: login-drum-in .9s var(--mui-ease) both; }
  & .hm-login-side > * { position: relative; z-index: 1; }
  & .hm-login-side-logo { width: 72px; height: 72px; border-radius: 12px; }
  & .hm-login-side-org { margin: 0 0 12px; color: inherit; font-size: 16px; font-weight: 500; }
  & .hm-login-side-title { display: grid; margin: 0; color: inherit; font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 48px); font-weight: 700; line-height: 1.1; }
  & .hm-login-side-title span:first-child { font-size: 2em; line-height: 1; }
  & .hm-login-form-panel { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: 32px 24px; background: var(--login-paper); }
  & .hm-form-wrapper { position: relative; z-index: 1; flex: 0 1 380px; width: 100%; max-width: 380px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  & .hm-form-header { margin: 0 0 32px; text-align: left; }
  & .hm-login-brand { display: none; }
  & .hm-form-title { display: block; margin: 0; color: var(--list-ink); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-align: left; }
  & .hm-input-group { margin-bottom: 20px; }
  & .hm-input { min-height: 52px; background: var(--login-paper); }
  & .hm-input:focus { border-color: var(--login-seal); box-shadow: 0 0 0 1px var(--login-seal); }
  & .hm-username-wrapper { margin-bottom: 24px; overflow: visible; }
  & .hm-username-wrapper .hm-username-domain { position: absolute; top: calc(100% + 4px); right: auto; bottom: auto; left: 14px; transform: none; max-width: calc(100% - 14px); color: var(--list-muted); font-size: 13px; opacity: 1; pointer-events: none; }
  & .hm-username-wrapper .hm-input { padding-right: 14px; }
  & .hm-btn-primary { width: 100%; background: var(--login-seal); color: var(--login-on-seal); }
  & .hm-btn-primary:hover { background: var(--list-primary); box-shadow: none; }
  & .hm-btn-primary:focus-visible { outline: 2px solid var(--login-seal); outline-offset: 2px; }
}
@keyframes login-drum-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html #view-login#view-login#view-login .hm-login-side::after { animation: none; }
}
@media (max-width: 860px) {
  html #view-login#view-login#view-login {
    & .hm-login-split { grid-template-columns: minmax(0, 1fr); align-content: start; }
    & .hm-login-side { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 148px; padding: 20px 24px; }
    & .hm-login-side::after { top: 50%; right: 0; width: 200px; transform: translate(62%, -50%); }
    & .hm-login-side-logo { width: 48px; height: 48px; }
    & .hm-login-side-org { margin: 0 0 2px; font-size: 13px; }
    & .hm-login-side-title { font-size: 18px; }
    & .hm-login-side-title span:first-child { font-size: 1em; }
    & .hm-login-form-panel { align-items: flex-start; }
  }
}

html #view-login#view-login#view-login {
  & .hm-login-form-panel { position: relative; }
  & .hm-login-appearance { position: absolute; top: 20px; right: 20px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--list-muted); cursor: pointer; transition: background-color .15s var(--mui-ease), color .15s var(--mui-ease); }
  & .hm-login-appearance:hover { background: var(--list-action-hover); color: var(--list-ink); }
  & .hm-login-appearance:focus-visible { outline: 2px solid var(--login-seal); outline-offset: 2px; }
  & .hm-login-appearance svg { width: 22px; height: 22px; }
}
:root[data-theme="dark"] body:has(#view-login:not(.hide)) { background: var(--list-surface); }
:root[data-theme="dark"] #view-login#view-login#view-login .hm-btn-primary:hover { background: var(--list-action-hover); color: var(--list-ink); }
:root[data-theme="dark"] #view-login#view-login#view-login .hm-input { color: var(--list-ink); }

/* Custom accent: appearance.js sets --accent-custom from the colour picker. */
:root[data-accent="custom"] {
  --color-accent-gold: var(--accent-custom);
  --color-accent-gold-hover: color-mix(in oklab, var(--accent-custom) 85%, var(--login-on-seal-light));
  --color-accent-gold-glow: color-mix(in oklab, var(--accent-custom) 16%, transparent);
  --color-accent-700: var(--accent-custom);
  --color-accent-100: color-mix(in oklab, var(--accent-custom) 10%, var(--login-on-seal-light));
  --color-home-accent-soft: color-mix(in oklab, var(--accent-custom) 12%, var(--login-on-seal-light));
  --color-brand-800: color-mix(in oklab, var(--accent-custom) 75%, var(--list-primary));
  --color-brand-700: color-mix(in oklab, var(--accent-custom) 88%, var(--list-primary));
  --list-accent-text: color-mix(in oklab, var(--accent-custom) 75%, var(--list-primary));
  --login-seal: var(--accent-custom);
  --login-on-seal: var(--accent-custom-on);
}
:root { --login-on-seal-light: #fff; }
:root[data-theme="dark"][data-accent="custom"] {
  --color-accent-gold: color-mix(in oklab, var(--accent-custom) 70%, var(--login-on-seal-light));
  --color-accent-gold-hover: color-mix(in oklab, var(--accent-custom) 55%, var(--login-on-seal-light));
  --color-accent-700: color-mix(in oklab, var(--accent-custom) 70%, var(--login-on-seal-light));
  --color-accent-100: color-mix(in oklab, var(--accent-custom) 22%, var(--color-surface));
  --color-home-accent-soft: color-mix(in oklab, var(--accent-custom) 22%, var(--color-surface));
  --list-accent-text: color-mix(in oklab, var(--accent-custom) 70%, var(--login-on-seal-light));
}
.appearance-swatches { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.appearance-swatch-custom { position: relative; overflow: hidden; }
.appearance-swatch-custom::before { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.appearance-swatch-custom::after { content: ""; position: absolute; width: .625rem; height: .625rem; border: 2px solid var(--list-surface); border-radius: 50%; background: var(--accent-custom-swatch); pointer-events: none; }
.appearance-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.appearance-swatch-custom.is-selected { border-color: var(--list-ink); }
.appearance-swatch-custom:focus-within { outline: 2px solid var(--list-accent-text); outline-offset: 2px; }

/* Home chart tooltip: a titled card with a dot, label and value per row. */
.mui-chart-tip { position: fixed; z-index: 2100; min-width: 124px; overflow: hidden; border-radius: 12px; background: var(--list-surface); box-shadow: var(--list-shadow-dropdown); color: var(--list-ink); font-size: 13px; line-height: 20px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s var(--mui-ease); }
.mui-chart-tip.is-visible { opacity: 1; visibility: visible; }
.mui-chart-tip-head { padding: 4px 12px; background: var(--list-head); color: var(--list-muted); font-weight: 600; text-align: center; }
.mui-chart-tip-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 12px; }
.mui-chart-tip-row i { width: 8px; height: 8px; border-radius: 50%; }
.mui-chart-tip-row span { color: var(--list-muted); }
.mui-chart-tip-row strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.mui-spark rect { transition: opacity .12s var(--mui-ease); }
.mui-spark rect.is-dim { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .mui-chart-tip, .mui-spark rect { transition: none; } }

/* Header logo: the longer unit name was squeezing the seal; keep it square and let the name take the rest. */
html #view-dashboard#view-dashboard#view-dashboard {
  & .header-logo-seal { flex: 0 0 36px; width: 36px; height: 36px; }
  & .header-system-logo { width: 36px; height: 36px; min-width: 0; object-fit: contain; }
  & .header-logo-line { font-size: 11px; letter-spacing: 0; line-height: 14px; }
}

/* Return reason: one outlined field holding its label, so the requirement reads as part of the box. */
html #view-dashboard#view-dashboard#view-dashboard #task-review-note-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  border: 1px solid var(--list-outline);
  border-radius: 10px;
  background: var(--list-surface);
  overflow: hidden;
  transition: border-color .12s var(--mui-ease);

  &:hover { border-color: var(--list-muted); }
  &:focus-within { border-color: var(--status-returned-dot); box-shadow: inset 0 0 0 1px var(--status-returned-dot); }

  & > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 14px 0;
    color: var(--list-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-transform: none;
    letter-spacing: 0;
  }
  & .task-review-note-required {
    flex: none;
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--status-returned-soft);
    color: var(--status-returned-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
  }
  & textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    margin: 0;
    padding: 6px 14px 12px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--list-ink);
    font-size: 14px;
    line-height: 22px;
    resize: vertical;
  }
  & textarea::placeholder { color: var(--list-muted); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html #view-dashboard#view-dashboard#view-dashboard #task-review-note-group { transition: none; }
}

/* Unit name on two lines: 10.5px keeps the longer line inside the 280px lockup beside the seal. */
html #view-dashboard#view-dashboard#view-dashboard {
  & .header-logo-lockup { gap: 12px; }
  & .header-logo-line { font-size: 10.5px; line-height: 14px; }
}