/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: design.md · designed-as-app
 * theme: Navy public-service console (white workspace · navy command surfaces · semantic states)
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · DESIGN_VARIANCE: 4 · MOTION_INTENSITY: 3 · VISUAL_DENSITY: 5
 */
@import url("/tokens.css?v=20260822_ui_repair_v2");

:root {
  --color-brand-900: var(--color-ink-dark);
  --color-brand-800: #173e66;
  --color-brand-700: #285b87;
  --color-brand-600: var(--color-ink-muted);
  --color-brand-100: var(--color-paper-champagne);
  --color-accent-gold: #174a78;
  --color-accent-gold-hover: #23679b;
  --color-accent-gold-dim: #9bb8d3;
  --color-accent-gold-glow: rgb(23 74 120 / 16%);
  --color-accent-700: #174a78;
  --color-accent-600: var(--color-accent-gold);
  --color-accent-100: #e9f1f8;

  --color-danger-600: oklch(58% 0.22 28);
  --color-danger-100: oklch(95% 0.03 28);

  --color-border: #d7e2ed;
  --color-border-dark: #0d2a4a;
  --color-border-focus: var(--color-accent-gold);
  --color-surface: oklch(100% 0 0);

  /* Notification banner — high-contrast surface against the light workspace */
  --color-notification-surface: var(--color-paper-obsidian);
  --color-notification-surface-hover: var(--color-brand-800);
  --color-notification-ink: var(--color-ink-light);
  --color-notification-muted: #dbe8f4;
  --color-notification-border: var(--color-accent-gold-dim);

  /* Layout tokens */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-brand-100);
  color: var(--color-brand-900);
  min-height: 100vh;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

.top-accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-700) 0%, var(--color-accent-600) 50%, #8fb2d1 100%);
  width: 100%;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Helpers */
.hide {
  display: none !important;
}

.text-muted {
  color: var(--color-brand-600);
}

/* Loader overlay */
.loader-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity var(--transition-normal);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-brand-900);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 1. LOGIN SCREEN — focused authentication surface */
#view-login {
  min-height: calc(100vh - 3px);
  display: flex;
  background-color: var(--color-paper-obsidian);
  color: var(--color-ink-dark);
  overflow-x: clip;
}

.hm-login-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-height: calc(100vh - 3px);
}

.kpi-common-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.kpi-common-submit-status {
  margin-right: auto;
  color: var(--color-ink-muted);
  font-size: .9rem;
}

.kpi-common-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.kpi-review-forms-view {
  min-width: 0;
  overflow: hidden;
}

.kpi-review-page {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.kpi-review-forms-header {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: .65rem;
  padding: 0 0 1.1rem;
  border-bottom: 0;
}

.kpi-review-forms-header h2 {
  margin: .25rem 0 0;
}

.kpi-review-forms-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .6rem;
  width: 100%;
}

.kpi-review-forms-filters select {
  min-width: 20rem;
  height: 3.25rem;
  padding: .65rem 2.4rem .65rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-paper);
  color: var(--color-ink-dark);
  font-size: 1rem;
}

.kpi-review-forms-filters button {
  width: 3.25rem;
  min-width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border-radius: .75rem;
  font-size: 1.55rem;
  line-height: 1;
}

.kpi-review-forms-table-wrap {
  overflow-x: auto;
}

.kpi-review-forms-table {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
  table-layout: fixed;
}

.kpi-review-forms-table th {
  padding: .82rem .55rem;
  background: var(--color-primary, #2e67c7);
  color: #fff;
  text-align: center;
  white-space: normal;
  font-size: .95rem;
  line-height: 1.25;
  border-right: 1px solid rgba(255,255,255,.45);
}

.kpi-review-forms-table th:nth-child(1) { width: 4.5%; }
.kpi-review-forms-table th:nth-child(2) { width: 13%; }
.kpi-review-forms-table th:nth-child(3) { width: 12%; }
.kpi-review-forms-table th:nth-child(4) { width: 10%; }
.kpi-review-forms-table th:nth-child(5) { width: 10%; }
.kpi-review-forms-table th:nth-child(6),
.kpi-review-forms-table th:nth-child(7) { width: 8%; }
.kpi-review-forms-table th:nth-child(8),
.kpi-review-forms-table th:nth-child(9),
.kpi-review-forms-table th:nth-child(10) { width: 8%; }
.kpi-review-forms-table th:nth-child(11) { width: 12%; }
.kpi-review-forms-table th:nth-child(12) { width: 7%; }

.kpi-review-forms-table .kpi-review-form-columns th {
  padding: .45rem .55rem;
  background: #fff;
  color: #a8a8a8;
  font-style: italic;
  font-weight: 500;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.kpi-review-forms-table td {
  height: 3.25rem;
  padding: .75rem .65rem;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  white-space: nowrap;
}

.kpi-review-forms-table td:nth-child(2),
.kpi-review-forms-table td:nth-child(3),
.kpi-review-forms-table td:nth-child(4) {
  text-align: left;
}

.kpi-review-status {
  display: inline-flex;
  align-items: center;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
}

.kpi-review-status.status-submitted { background: #fff1d8; color: #a85c00; }
.kpi-review-status.status-reviewed { background: #dcf7e7; color: #118447; }
.kpi-review-status.status-returned { background: #ffe1e1; color: #bd2525; }
.kpi-review-status.status-manager_forwarded { background: #fff0c2; color: #9a6500; }
.kpi-review-status.status-not_submitted { background: #edf0f4; color: #6b7280; }

.kpi-review-view-button {
  border: 0;
  background: transparent;
  color: var(--color-primary, #2e67c7);
  font-weight: 700;
  cursor: pointer;
}

.kpi-review-view-placeholder { color: var(--color-ink-muted); }

.kpi-review-empty {
  padding: 2rem !important;
  color: var(--color-ink-muted);
}

.kpi-review-empty.is-error { color: #b42318; }

.kpi-review-form-note {
  display: grid;
  gap: .35rem;
  width: fit-content;
  max-width: 25rem;
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: .7rem;
  background: rgba(255,255,255,.84);
  color: var(--color-ink-muted);
  font-size: .9rem;
}

.kpi-review-form-note span {
  display: block;
}

.kpi-review-pagination {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0 .25rem;
  color: var(--color-ink-muted);
  font-size: .95rem;
}

.kpi-review-pagination label { display: inline-flex; align-items: center; gap: .35rem; }
.kpi-review-pagination select { border: 0; background: transparent; color: var(--color-primary); font-weight: 700; }
.kpi-review-page-controls { display: inline-flex; align-items: center; gap: .7rem; margin-left: auto; }
.kpi-review-page-controls button,
.kpi-review-page-controls strong { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-primary); font-size: 1.1rem; }
.kpi-review-page-controls strong { background: var(--color-primary, #2e67c7); color: #fff; }
.kpi-review-page-controls button:disabled { opacity: .35; }

.kpi-review-form-modal {
  width: min(1100px, calc(100vw - 2rem));
  max-height: min(90vh, 900px);
}

.kpi-review-form-modal-body {
  overflow: auto;
  padding: 1rem 1.25rem;
}

.kpi-review-form-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.kpi-review-form-summary span {
  padding: .65rem .8rem;
  border-radius: .6rem;
  background: var(--color-surface, #f3f6fb);
}

.kpi-review-form-summary strong { margin-left: .35rem; color: #16834b; }

.kpi-review-form-modal [data-kpi-review-score] {
  width: 6.5rem;
  padding: .5rem;
  border: 1px solid var(--color-border);
  border-radius: .45rem;
  text-align: right;
}

.kpi-review-form-modal .kpi-review-score-cell {
  white-space: nowrap;
}

.kpi-review-form-modal .kpi-review-copy-score {
  margin-right: .35rem;
  border: 0;
  border-radius: .35rem;
  background: #eaf1ff;
  color: var(--color-primary, #2e67c7);
  cursor: pointer;
  font-weight: 800;
}

.kpi-review-form-modal .kpi-review-copy-all {
  display: inline-grid;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: .35rem;
  place-items: center;
  border: 0;
  border-radius: .35rem;
  background: rgba(255,255,255,.18);
  color: inherit;
  cursor: pointer;
  font-weight: 800;
}

.kpi-review-form-modal .kpi-review-return-note {
  margin-top: .75rem;
}

.kpi-review-form-modal .btn-danger {
  border: 1px solid #e07a7a;
  background: #fff1f1;
  color: #b42318;
}

.kpi-review-form-modal .kpi-review-return-note textarea {
  border-color: #e3a4a4;
}

.kpi-review-form-modal .kpi-review-self-score {
  display: inline-flex;
  min-width: 4rem;
  justify-content: center;
  padding: .35rem .55rem;
  border-radius: .45rem;
  background: #edf8f0;
  color: #16834b;
  font-weight: 700;
}

.kpi-review-form-modal th small {
  font-size: .68em;
  font-weight: 600;
  opacity: .85;
}

@media (max-width: 900px) {
  .kpi-review-forms-header { align-items: stretch; flex-direction: column; }
  .kpi-review-forms-filters { justify-content: stretch; }
  .kpi-review-forms-filters select, .kpi-review-forms-filters button { flex: 1 1 10rem; }
  .kpi-review-forms-filters button { flex: 0 0 3.25rem; }
  .kpi-review-pagination { flex-wrap: wrap; gap: .75rem 1.25rem; }
  .kpi-review-page-controls { margin-left: 0; }
  .kpi-common-actions { position: sticky; bottom: 0; background: var(--color-paper); }
}

/* Personal task sidebar toggle: the control sits on the sidebar edge, centered vertically. */
@media screen and (min-width: 1025px) {
  #view-personal-tasks {
    position: relative;
  }

  #view-personal-tasks .tasks-sidebar {
    position: relative;
    width: 270px;
    min-width: 270px;
    flex-shrink: 0;
    transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1),
                min-width 240ms cubic-bezier(0.16, 1, 0.3, 1),
                flex-basis 240ms cubic-bezier(0.16, 1, 0.3, 1),
                padding 240ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 200ms ease;
  }

  .tasks-sidebar-toggle {
    position: absolute;
    z-index: 30;
    top: 50%;
    right: -13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: #64748b;
    background: #ffffff;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 150ms ease,
                border-color 150ms ease,
                box-shadow 150ms ease,
                color 150ms ease;
  }

  .tasks-sidebar-toggle:hover {
    color: #0f172a;
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.12);
    transform: translateY(-50%);
  }

  .tasks-sidebar-toggle:active {
    background: #f1f5f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transform: translateY(-50%) scale(0.96);
  }

  .tasks-sidebar-toggle svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  #view-personal-tasks .tasks-sidebar.is-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    gap: 0 !important;
    border-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #view-personal-tasks .tasks-sidebar.is-collapsed .tasks-sidebar-top,
  #view-personal-tasks .tasks-sidebar.is-collapsed .tasks-sidebar-bottom {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease, visibility 140ms ease;
  }

  #view-personal-tasks .tasks-sidebar .tasks-sidebar-top,
  #view-personal-tasks .tasks-sidebar .tasks-sidebar-bottom {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 220ms ease;
  }
}

@media screen and (max-width: 1024px) {
  .tasks-sidebar-toggle {
    display: none;
  }

  #view-personal-tasks .tasks-sidebar.is-collapsed {
    width: 100%;
    padding: var(--space-3);
    gap: var(--space-3);
  }

  #view-personal-tasks .tasks-sidebar.is-collapsed .tasks-sidebar-top,
  #view-personal-tasks .tasks-sidebar.is-collapsed .tasks-sidebar-bottom {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }
}

/* Left Diptych: Luxury Editorial Brand Panel */
.hm-login-hero-panel {
  display: none;
  background-color: var(--color-paper-obsidian);
  color: var(--color-ink-light);
  padding: 4rem 4.5rem;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--color-border-dark);
}

.hm-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 15% 20%, oklch(30% 0.06 72 / 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, oklch(25% 0.05 45 / 0.15) 0%, transparent 50%),
    linear-gradient(to bottom, transparent, oklch(10% 0.02 50 / 0.8));
  pointer-events: none;
}

.hm-hero-content {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.hm-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  background-color: oklch(22% 0.03 50);
  border: 1px solid oklch(30% 0.04 72 / 0.4);
  margin-bottom: 2.5rem;
}

.hm-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent-gold);
  box-shadow: 0 0 8px var(--color-accent-gold);
}

.hm-badge-text {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-gold);
}

.hm-hero-title {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink-light);
  margin-bottom: 1.75rem;
}

.hm-hero-title em {
  font-style: normal;
  color: var(--color-accent-gold);
  font-weight: 400;
}

.hm-hero-statement {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: oklch(80% 0.01 75);
  margin-bottom: 3.5rem;
  font-weight: 300;
}

.hm-hero-footer {
  display: flex;
  gap: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border-dark);
}

.hm-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hm-stat-num {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-accent-gold);
  line-height: 1;
}

.hm-stat-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(65% 0.01 75);
}

/* Right Diptych: High-contrast Form Panel */
.hm-login-form-panel {
  background-color: var(--color-paper-champagne);
  padding: 4rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hm-form-wrapper {
  width: 100%;
  max-width: 420px;
}

.hm-form-header {
  margin-bottom: 2.5rem;
}

.hm-form-kicker {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-gold-dim);
  display: block;
  margin-bottom: 0.5rem;
}

.hm-form-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--color-ink-dark);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.hm-login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hm-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hm-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hm-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-dark);
  letter-spacing: 0.01em;
}

.hm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.hm-input {
  width: 100%;
  padding: 0.9rem 2.5rem 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background-color: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink-dark);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hm-input:hover {
  border-color: oklch(75% 0.05 72);
}

.hm-input:focus {
  outline: none;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3.5px var(--color-accent-gold-glow);
}

.hm-input::placeholder {
  color: oklch(75% 0.01 75);
}

.hm-input-icon {
  position: absolute;
  right: 1rem;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  pointer-events: none;
  opacity: 0.7;
}

.hm-btn-primary {
  margin-top: 0.75rem;
  width: 100%;
  padding: 1rem;
  background-color: var(--color-paper-obsidian);
  color: var(--color-ink-light);
  border: 1px solid oklch(35% 0.04 72);
  border-radius: var(--border-radius-md);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px oklch(0% 0 0 / 0.12);
  transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hm-btn-primary:hover {
  background-color: oklch(20% 0.03 50);
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px oklch(0% 0 0 / 0.18);
}

.hm-btn-primary:active {
  transform: translateY(0);
}

.hm-btn-primary:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

.hm-login-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hm-security-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.hm-security-note svg {
  color: var(--color-accent-gold-dim);
  flex-shrink: 0;
}

.hm-support-contact {
  font-size: 0.75rem;
  color: oklch(65% 0.01 75);
}

/* Responsive Split Studio Layout */
@media (max-width: 960px) {
  .hm-login-split {
    grid-template-columns: 1fr;
  }
  .hm-login-hero-panel {
    padding: 3rem 2rem;
    border-right: none;
    border-bottom: 1px solid var(--color-border-dark);
  }
  .hm-login-hero-panel .hm-hero-title {
    font-size: 2.6rem;
  }
  .hm-login-hero-panel .hm-hero-statement {
    margin-bottom: 2rem;
  }
  .hm-login-form-panel {
    padding: 3rem 1.5rem;
  }
}

/* 2. DASHBOARD / PROFILE SCREEN — Atelier Luxury Theme */
#view-dashboard {
  min-height: calc(100vh - 3px);
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper-champagne);
  color: var(--color-ink-dark);
}

.app-header {
  height: 76px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 3rem;
  z-index: 20;
}

.header-nav-cluster {
  display: flex;
  align-items: center;
  min-width: 0;
}

.header-brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.header-pre {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-gold-dim);
}

.header-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--color-ink-dark);
  letter-spacing: -0.01em;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-paper-obsidian);
  color: var(--color-accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-accent-gold);
  flex-shrink: 0;
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.08);
}

.header-user-dropdown {
  position: relative;
  margin-left: auto;
}

.header-user-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.header-user-trigger:hover {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

.user-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink-dark);
}

.dropdown-chevron {
  color: var(--color-ink-muted);
  transition: transform var(--transition-fast);
}

.header-user-trigger:hover .dropdown-chevron {
  transform: rotate(180deg);
}

.header-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: 0 16px 36px -12px oklch(0% 0 0 / 0.15), 0 2px 6px oklch(0% 0 0 / 0.04);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 50;
}

.header-user-dropdown:hover .header-dropdown-menu,
.header-user-dropdown:focus-within .header-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-ink-dark);
  text-align: left;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover {
  background-color: oklch(96% 0.01 75);
  color: var(--color-ink-dark);
}

.dropdown-item .dropdown-icon {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

.dropdown-item.logout-item {
  color: var(--color-danger-600);
}

.dropdown-item.logout-item:hover {
  background-color: var(--color-danger-100);
  color: var(--color-danger-600);
}

.dropdown-divider {
  border: none;
  height: 1px;
  background-color: var(--color-border);
  margin: 0.4rem 0;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
}

@media (max-width: 900px) {
  .app-header {
    padding: 0 1.5rem;
  }
  .header-pre {
    display: none;
  }
  .header-title {
    font-size: 1.15rem;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .navbar-menu {
    gap: 0.5rem;
    margin-left: 1rem;
  }
  .nav-item .nav-label {
    display: none;
  }
  .nav-item {
    padding: 0.45rem 0.65rem;
  }
  .user-name {
    display: none;
  }
}

.navbar-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-left: 2.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 999px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-item:hover {
  background-color: var(--color-surface);
  color: var(--color-ink-dark);
}

.nav-item.active {
  background-color: var(--color-paper-obsidian);
  color: var(--color-accent-gold);
  font-weight: 600;
}

.nav-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dashboard-main {
  padding: 3.5rem 4rem;
  overflow-y: auto;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .dashboard-main {
    padding: 2.5rem 2rem;
  }
}

.workspace-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 3.5rem 4rem;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 768px) {
  .workspace-card {
    padding: 2rem 1.5rem;
  }
}

.card-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2rem;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.header-left {
  max-width: 600px;
}

.card-kicker {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-gold-dim);
  display: block;
  margin-bottom: 0.6rem;
}

.card-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--color-ink-dark);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.card-subtitle {
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.btn-primary-sm {
  padding: 0.75rem 1.4rem;
  background-color: var(--color-paper-obsidian);
  color: var(--color-ink-light);
  border: 1px solid oklch(35% 0.04 72);
  border-radius: var(--border-radius-md);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 10px oklch(0% 0 0 / 0.1);
}

.btn-primary-sm:hover {
  background-color: oklch(20% 0.03 50);
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px oklch(0% 0 0 / 0.15);
}

.btn-primary-sm:active {
  transform: translateY(0);
}

/* Profile Details Grid */
.profile-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 4.5rem;
}

@media (max-width: 1024px) {
  .profile-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .profile-left {
    text-align: center;
    border-right: none !important;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 2.5rem;
  }
}

.profile-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid var(--color-border);
  padding-right: 3rem;
}

.avatar-container {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background-color: var(--color-paper-obsidian);
  border: 2px solid var(--color-accent-gold);
  box-shadow: 0 12px 28px oklch(0% 0 0 / 0.12);
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 4.2rem;
  font-weight: 400;
  color: var(--color-accent-gold);
  background-color: var(--color-paper-obsidian);
  letter-spacing: -0.02em;
}

.btn-change-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-dark);
  cursor: pointer;
  margin-bottom: 2rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.05);
}

.btn-change-avatar:hover {
  background-color: oklch(97% 0.01 75);
  border-color: var(--color-accent-gold-dim);
  color: var(--color-ink-dark);
  transform: translateY(-1px);
}

.btn-change-avatar:active {
  transform: translateY(0);
}

.btn-change-avatar.is-uploading svg {
  animation: avatar-spin 0.9s linear infinite;
}

@keyframes avatar-spin {
  to { transform: rotate(360deg); }
}

.profile-left h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-ink-dark);
  margin-bottom: 0.4rem;
  text-align: center;
}

.profile-pos {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-gold-dim);
  text-align: center;
  margin-bottom: 0.25rem;
}

.profile-dept {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  text-align: center;
}

/* Info Sections */
.profile-right {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-section-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-dark);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.info-section-title span {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-accent-gold);
  font-weight: 600;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem 3rem;
}

.info-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cell-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}

.cell-value {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink-dark);
  line-height: 1.4;
}

.badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--border-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.35rem;
}

.badge-error {
  background-color: var(--color-danger-100);
  color: var(--color-danger-600);
  border: 1px solid var(--color-danger-600);
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: oklch(24% 0.04 235 / 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}

.modal-card {
  background-color: var(--color-surface);
  border-radius: var(--border-radius-lg);
  width: 100%;
  max-width: 680px;
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 64px -16px oklch(0% 0 0 / 0.16), 0 4px 16px -4px oklch(0% 0 0 / 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background-color: var(--color-surface);
}

.modal-header-desc h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-brand-900);
}

.modal-header-desc p {
  font-size: 0.8rem;
  color: var(--color-brand-600);
  margin-top: 0.25rem;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 1.85rem;
  cursor: pointer;
  color: var(--color-brand-600);
  line-height: 1;
  transition: color var(--transition-fast);
}

.modal-close:hover {
  color: var(--color-brand-900);
}

.modal-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-height: 65vh;
  overflow-y: auto;
}

.modal-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modal-section-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-700);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.35rem;
}

.disabled-section {
  margin-top: 0.5rem;
}

.disabled-section .modal-section-title {
  color: var(--color-brand-700);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 576px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Readonly Input Styling for Security Visualization */
.readonly-group label {
  color: var(--color-brand-600);
}

.readonly-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.readonly-input-wrapper input {
  padding-right: 2.25rem !important;
  background-color: var(--color-brand-100) !important;
  border: 1px dashed var(--color-border) !important;
  color: var(--color-brand-600) !important;
  cursor: not-allowed;
  font-weight: 500;
}

.lock-icon {
  position: absolute;
  right: 0.85rem;
  font-size: 0.85rem;
  color: var(--color-brand-600);
  user-select: none;
}

.readonly-sub-notice {
  font-size: 0.75rem;
  color: var(--color-brand-600);
  line-height: 1.4;
  margin-top: 0.25rem;
  font-style: italic;
}

.modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.modal-footer .btn-primary {
  width: auto;
  min-width: 140px;
}

/* Spinner for button */
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid oklch(100% 0 0 / 0.4);
  border-top-color: var(--color-surface);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Modal Form Controls & Helpers — Atelier Luxury */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.input-group label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-dark);
}

.input-group input[type="text"],
.input-group input[type="url"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background-color: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-ink-dark);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-group input[type="text"]:focus,
.input-group input[type="url"]:focus {
  outline: none;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3.5px var(--color-accent-gold-glow);
}

.email-input-wrapper {
  display: flex;
  align-items: center;
}

.email-input-wrapper input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.email-domain {
  padding: 0.75rem 1rem;
  background-color: var(--color-paper-champagne);
  border: 1px solid var(--color-border);
  border-left: none;
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.input-hint {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  margin-top: 0.2rem;
}

.btn-outline {
  padding: 0.75rem 1.4rem;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink-dark);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn-outline:hover {
  background-color: oklch(96% 0.01 75);
  border-color: var(--color-ink-muted);
}

.btn-outline:active {
  transform: translateY(1px);
}

.btn-primary {
  padding: 0.75rem 1.4rem;
  background-color: var(--color-paper-obsidian);
  color: var(--color-ink-light);
  border: 1px solid oklch(35% 0.04 72);
  border-radius: var(--border-radius-md);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn-primary:hover {
  background-color: oklch(20% 0.03 50);
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}


/* ==========================================================================
   Hallmark KPI Dashboard Styles
   ========================================================================== */

.kpi-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.kpi-stat-card {
  background-color: var(--color-paper-champagne);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.kpi-stat-card:hover {
  border-color: var(--color-accent-gold);
  transform: translateY(-2px);
}

.kpi-stat-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.kpi-stat-value {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--color-ink-dark);
  line-height: 1.1;
}

.kpi-stat-unit {
  font-size: 1rem;
  color: var(--color-ink-muted);
  font-weight: 400;
}

.kpi-stat-desc {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.badge-desc-success {
  color: oklch(40% 0.15 140);
  font-weight: 500;
}

.text-gold {
  color: var(--color-accent-gold) !important;
}

.kpi-table-container {
  overflow-x: auto;
  margin-bottom: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background-color: var(--color-surface);
}

.kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.kpi-table th {
  background-color: var(--color-paper-champagne);
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-weight: 600;
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.kpi-table td {
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-dark);
  vertical-align: middle;
  line-height: 1.5;
}

.kpi-table tr:last-child td {
  border-bottom: none;
}

.kpi-table tr:hover td {
  background-color: oklch(99% 0.005 75);
}

.kpi-name {
  font-weight: 500;
  color: var(--color-ink-dark);
}

.kpi-result {
  color: var(--color-ink-muted);
  font-size: 0.9rem;
}

.kpi-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.badge-success {
  background-color: oklch(93% 0.04 140);
  color: oklch(35% 0.14 140);
  border: 1px solid oklch(85% 0.08 140);
}

.kpi-action-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .kpi-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .kpi-stat-value {
    font-size: 1.5rem;
  }
  
  .kpi-action-footer {
    flex-direction: column;
  }
}

/* Hallmark · component: navbar · genre: modern-minimal · theme: dark Atelier reference
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (46–50)
 */
.app-header {
  min-height: 104px;
  height: auto;
  background:
    radial-gradient(circle at 82% 0%, oklch(74% 0.035 72 / 0.34) 0 9rem, transparent 9.2rem),
    oklch(10% 0.035 32);
  border-bottom: 1px solid oklch(22% 0.035 32);
  padding: 0 4.75rem;
}

.header-shell {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

.header-nav-cluster,
.header-brand {
  display: none;
}

/* Redesigned Luxury Branding Lockup */
.system-logo { display: block; object-fit: cover; }
.login-system-logo { width: 4.5rem; height: 4.5rem; margin-bottom: 1.75rem; border: 2px solid var(--color-accent-gold); border-radius: 0.75rem; box-shadow: 0 0 22px var(--color-accent-gold-glow); }
.header-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--color-paper-champagne);
  transition: transform var(--transition-normal);
}

.header-logo-lockup:hover {
  transform: scale(1.01);
}

.header-logo-seal {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-accent-gold);
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 12px var(--color-accent-gold-glow);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
  background-color: oklch(14% 0.02 50 / 0.4);
}

.header-logo-seal::before {
  content: "";
  display: none;
  position: absolute;
  inset: 2px;
  border: 1px dashed oklch(76% 0.14 72 / 0.5);
  border-radius: 50%;
  pointer-events: none;
}

.header-logo-lockup:hover .header-logo-seal {
  border-color: var(--color-accent-gold-hover);
  box-shadow: 0 0 20px var(--color-accent-gold-glow), inset 0 0 8px var(--color-accent-gold-glow);
}

.seal-inner {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-gold);
  transform: translateY(0.5px);
}

.header-logo-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.header-logo-kicker {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  line-height: 1.2;
}

.header-logo-wordmark {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-paper-champagne);
  line-height: 1.2;
  transition: color var(--transition-fast);
}

.header-logo-lockup:hover .header-logo-wordmark {
  color: var(--color-accent-gold-hover);
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: 3rem;
}

.nav-item {
  position: relative;
  padding: 0.5rem 0;
  text-decoration: none;
  color: oklch(75% 0.01 75);
  font-family: var(--font-display);
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-accent-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-normal);
}

.nav-item:hover {
  color: var(--color-paper-champagne);
}

.nav-item.active {
  color: var(--color-accent-gold);
}

.header-system-logo { width: 100%; height: 100%; border-radius: inherit; }

@media (min-width: 721px) {
  #view-dashboard .navbar-menu #nav-profile-mobile {
    display: none;
  }
}

.nav-item:hover::after,
.nav-item.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-chevron {
  font-size: 0.9rem;
  line-height: 1;
  color: currentColor;
  transform: translateY(-1px);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.navbar-actions .header-user-dropdown {
  display: block;
  position: relative;
  margin-left: 0;
}

.navbar-actions .header-user-trigger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  border-color: transparent;
  background: transparent;
  color: oklch(96% 0.008 75);
}

.navbar-actions .header-user-trigger:hover,
.navbar-actions .header-user-dropdown:focus-within .header-user-trigger {
  background-color: oklch(100% 0 0 / 0.08);
  border-color: oklch(86% 0.012 75 / 0.35);
}

.navbar-actions .user-avatar {
  width: 30px;
  height: 30px;
  border-color: oklch(96% 0.008 75 / 0.78);
  background-color: oklch(100% 0 0 / 0.12);
  color: oklch(96% 0.008 75);
  box-shadow: none;
  font-size: 0.7rem;
}

.navbar-actions .user-name {
  max-width: 140px;
  overflow: hidden;
  color: oklch(96% 0.008 75);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-actions .dropdown-chevron {
  color: oklch(96% 0.008 75 / 0.65);
}

.navbar-actions .header-dropdown-menu {
  top: calc(100% + 10px);
}

.navbar-actions .header-user-trigger:focus-visible {
  outline: 2px solid oklch(86% 0.08 78);
  outline-offset: 4px;
}

.navbar-icon-button {
  width: 28px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: oklch(96% 0.008 75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.navbar-icon-button:hover {
  color: oklch(86% 0.08 78);
  transform: translateY(-1px);
}

.navbar-icon-button:active {
  transform: translateY(0);
}

.navbar-icon-button:focus-visible,
.nav-item:focus-visible,
.header-logo-lockup:focus-visible {
  outline: 2px solid oklch(86% 0.08 78);
  outline-offset: 4px;
}

.navbar-profile-icon .user-avatar {
  width: 22px;
  height: 22px;
  border: 1.6px solid currentColor;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  font-size: 0.56rem;
  line-height: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .app-header {
    padding: 0 1.5rem;
  }

  .header-logo-mark {
    width: 46px;
    height: 46px;
  }

  .header-logo-text {
    font-size: 1.25rem;
  }

  .navbar-menu {
    margin-left: 1.25rem;
    gap: 0.9rem;
  }

  .navbar-search {
    width: 190px;
  }
}

@media (max-width: 760px) {
  .app-header {
    min-height: 84px;
  }

  .header-shell {
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.7rem 0;
  }

  .navbar-menu {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .navbar-menu::-webkit-scrollbar {
    display: none;
  }

  .nav-item .nav-label {
    display: inline;
  }

  .navbar-search {
    display: none;
  }
}

/* Personal Tasks Dashboard Styles */
.personal-tasks-view {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100%;
}

.tasks-sidebar {
  width: 270px;
  min-width: 270px;
  flex-shrink: 0;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 1.25rem 1rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  justify-content: space-between !important;
  position: relative !important;
}

.tasks-sidebar .tasks-sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tasks-sidebar .period-picker-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  padding: 0.85rem !important;
  box-shadow: none !important;
}

.tasks-sidebar .period-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tasks-sidebar .nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tasks-sidebar .nav-section.collapsible {
  display: none !important;
}

.tasks-sidebar .nav-kicker {
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  color: #64748b !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0 0.4rem !important;
  margin-bottom: 0.2rem !important;
}

.tasks-sidebar ul,
.tasks-sidebar ul.nav-list,
.personal-tasks-view .nav-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.tasks-sidebar li,
.tasks-sidebar .nav-list-item,
.personal-tasks-view .nav-list-item {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  outline: none !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

.tasks-sidebar li::marker,
.tasks-sidebar .nav-list-item::marker,
.personal-tasks-view .nav-list-item::marker {
  display: none !important;
  content: "" !important;
}

.tasks-sidebar .nav-list-item a,
.personal-tasks-view .nav-list-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem 0.85rem !important;
  color: #334155 !important;
  font-size: 0.88rem !important;
  font-weight: 550 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 150ms ease, background-color 150ms ease !important;
}

.tasks-sidebar .nav-list-item:hover,
.personal-tasks-view .nav-list-item:hover {
  background: #f1f5f9 !important;
  border: none !important;
  box-shadow: none !important;
}

.tasks-sidebar .nav-list-item:hover a,
.personal-tasks-view .nav-list-item:hover a {
  color: #0f172a !important;
  text-decoration: none !important;
}

.tasks-sidebar .nav-list-item.active,
.personal-tasks-view .nav-list-item.active {
  border: none !important;
  background: #1e3a8a !important;
  box-shadow: 0 2px 6px -1px rgba(30, 58, 138, 0.25) !important;
}

.tasks-sidebar .nav-list-item.active a,
.personal-tasks-view .nav-list-item.active a {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.tasks-sidebar .nav-list-item .nav-indicator,
.personal-tasks-view .nav-list-item .nav-indicator {
  display: none !important;
}

.tasks-sidebar .nav-count-badge,
.personal-tasks-view .nav-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.35rem !important;
  height: 1.35rem !important;
  padding: 0 0.4rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
  border: none !important;
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

.tasks-sidebar .nav-list-item.active .nav-count-badge,
.personal-tasks-view .nav-list-item.active .nav-count-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

.tasks-sidebar .nav-list-item:focus,
.tasks-sidebar .nav-list-item:focus-within,
.tasks-sidebar .nav-list-item a:focus,
.personal-tasks-view .nav-list-item:focus,
.personal-tasks-view .nav-list-item:focus-within,
.personal-tasks-view .nav-list-item a:focus {
  outline: none !important;
  box-shadow: none !important;
}

.tasks-sidebar-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.tasks-sidebar .summary-block,
.summary-block {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  padding: 0.85rem 1rem !important;
  box-shadow: none !important;
}

.tasks-sidebar .summary-header,
.summary-header {
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  color: #64748b !important;
  margin-bottom: 0.4rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.tasks-sidebar .summary-row,
.summary-row {
  font-size: 0.85rem !important;
  color: #334155 !important;
  margin-bottom: 0.25rem !important;
  display: flex !important;
  justify-content: space-between !important;
}

.tasks-sidebar .summary-row strong,
.summary-row strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.tasks-sidebar .summary-row.highlight,
.summary-row.highlight {
  color: #1e3a8a !important;
  font-weight: 750 !important;
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 0.45rem !important;
  margin-top: 0.45rem !important;
}

.tasks-sidebar .summary-row.highlight strong,
.summary-row.highlight strong {
  color: #1e3a8a !important;
  font-weight: 800 !important;
}

.tasks-main-content {
  flex: 1;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.tasks-main-content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  opacity: 0.04;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="0.3"><circle cx="50" cy="50" r="48" /><circle cx="50" cy="50" r="42" stroke-dasharray="1,1" /><circle cx="50" cy="50" r="36" /><circle cx="50" cy="50" r="30" stroke-dasharray="2,1" /><circle cx="50" cy="50" r="24" /><circle cx="50" cy="50" r="16" /><path d="M50,38 L52,45 L59,42 L55,48 L62,50 L55,52 L59,58 L52,55 L50,62 L48,55 L41,58 L45,52 L38,50 L45,48 L41,42 L48,45 Z" fill="currentColor" opacity="0.3" /><path d="M50,18 Q46,16 42,18 Q45,20 50,18" /><path d="M78,40 Q80,36 78,32 Q76,35 78,40" /><path d="M50,82 Q54,84 58,82 Q55,80 50,82" /><path d="M22,60 Q20,64 22,68 Q24,65 22,60" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

.tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  position: relative;
}

.tasks-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-ink-dark);
}

.tasks-toolbar {
  display: flex;
  gap: 0.35rem;
}

.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.tb-btn .toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 1rem;
  line-height: 1;
}

.btn-search, .btn-add {
  background-color: #2563eb;
  color: white;
}

.btn-search:hover, .btn-add:hover {
  background-color: #1d4ed8;
}

.btn-import, .btn-export {
  background-color: #eff6ff;
  color: #2563eb;
}

.btn-import:hover, .btn-export:hover {
  background-color: #dbeafe;
}

.btn-evaluate {
  background-color: #f5f3ff;
  color: #7c3aed;
}

.btn-evaluate:hover {
  background-color: #ede9fe;
}

.btn-delete {
  background-color: #fef2f2;
  color: #dc2626;
}

.btn-delete:hover {
  background-color: #fee2e2;
}

.btn-category {
  background-color: #f3f4f6;
  color: #4b5563;
}

.btn-category:hover {
  background-color: #e5e7eb;
}

.tasks-filter-tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  z-index: 2;
  position: relative;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  cursor: pointer;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.filter-tab:hover {
  color: var(--color-ink-dark);
}

.filter-tab.active {
  color: #2563eb;
  font-weight: 600;
  border-bottom-color: #2563eb;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  background-color: #64748b;
  line-height: 1;
}

.filter-tab[data-filter="all"] .count-badge { background-color: #64748b; }
.filter-tab[data-filter="chua_thuc_hien"] .count-badge { background-color: #3b82f6; }
.filter-tab[data-filter="dang_thuc_hien"] .count-badge { background-color: #8b5cf6; }
.filter-tab[data-filter="cho_danh_gia"] .count-badge { background-color: #f59e0b; }
.filter-tab[data-filter="bi_tra_lai"] .count-badge { background-color: #ef4444; }
.filter-tab[data-filter="da_danh_gia"] .count-badge { background-color: #10b981; }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-blue { background-color: #3b82f6; }
.dot-purple { background-color: #8b5cf6; }
.dot-orange { background-color: #f59e0b; }
.dot-red { background-color: #ef4444; }
.dot-green { background-color: #10b981; }

.tasks-table-wrapper {
  flex: 1;
  overflow-y: auto;
  z-index: 2;
  position: relative;
}

.tasks-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.tasks-table thead tr {
  background-color: #2563eb;
  color: white;
}

.tasks-table th {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.tasks-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
  color: var(--color-ink-dark);
}

.tasks-table tbody tr:hover {
  background-color: rgba(243, 244, 246, 0.5);
}

.badge-chua-thuc-hien { background-color: #eff6ff; color: #1e40af; }
.badge-dang-thuc-hien { background-color: #f5f3ff; color: #5b21b6; }
.badge-cho-danh-gia { background-color: #fffbeb; color: #92400e; }
.badge-bi-tra-lai { background-color: #fef2f2; color: #991b1b; }
.badge-da-danh-gia { background-color: #ecfdf5; color: #065f46; }

.task-status-control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}

.task-status-edit-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
}

.task-status-edit-icon:hover {
  color: #1d4ed8;
}

.task-status-edit-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1024px) {
  .personal-tasks-view {
    flex-direction: column;
  }
  .tasks-sidebar {
    width: 100%;
  }
}


/* ========================================= */
/* CATEGORY MODAL STYLES (SPREADSHEET THEME) */
/* ========================================= */

.modal-card-xl {
  max-width: 1200px !important;
  width: 95vw !important;
}

.category-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.category-table thead th {
  background-color: #2563eb;
  color: white;
  padding: 0.75rem 1rem;
  font-weight: 600;
  border: 1px solid #1d4ed8;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

.category-table tbody td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  color: var(--color-ink-dark);
  vertical-align: top;
}

.category-table tbody tr:hover {
  background-color: rgba(243, 244, 246, 0.7);
}

.category-row-header {
  background-color: #e0e7ff;
}

.category-row-header td {
  font-weight: 700;
  color: #1e40af;
  border: 1px solid #c7d2fe;
}

.category-search-highlight {
  background-color: #fef08a;
  color: #854d0e;
  padding: 0 2px;
  border-radius: 2px;
}

/* Hallmark · component: modal · genre: luxury-editorial · theme: Atelier
 * states: default · hover · focus · active
 * contrast: pass
 */
/* ========================================= */
/* HALLMARK: ATELIER SHEET COMPONENT         */
/* ========================================= */

.hm-sheet-modal {
  background-color: var(--color-surface);
  border-radius: 12px;
  width: 96vw;
  max-width: 1440px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px oklch(0% 0 0 / 0.3), 0 0 0 1px var(--color-border-dark);
  animation: hm-sheet-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hm-sheet-in {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hm-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.5rem 3rem 1.5rem;
  background-color: var(--color-paper-obsidian);
  border-bottom: 1px solid var(--color-border-dark);
  color: var(--color-paper-champagne);
}

.hm-sheet-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hm-sheet-kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-gold);
}

.hm-sheet-title {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-paper-champagne);
  margin: 0;
}

.hm-sheet-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: oklch(75% 0.01 75);
  max-width: 600px;
}

.hm-sheet-close {
  background: transparent;
  border: none;
  color: oklch(60% 0.01 75);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.hm-sheet-close:hover {
  color: var(--color-paper-champagne);
  background-color: oklch(100% 0 0 / 0.05);
}

.hm-sheet-toolbar {
  padding: 1.25rem 3rem;
  background-color: var(--color-brand-100); /* champagne */
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 1.5rem;
  align-items: center;
  z-index: 10;
}

.hm-sheet-search-wrap {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.hm-sheet-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-ink-muted);
}

.hm-sheet-search {
  width: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink-dark);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  box-shadow: inset 0 1px 2px oklch(0% 0 0 / 0.02);
}

.hm-sheet-search:focus-visible {
  outline: none;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3px var(--color-accent-gold-glow);
}

.hm-sheet-search::placeholder {
  color: oklch(65% 0.01 75);
}

.hm-sheet-filter-wrap {
  position: relative;
  min-width: 280px;
}

.hm-sheet-select {
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem 2.5rem 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink-dark);
  width: 100%;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.hm-sheet-select:focus-visible {
  outline: none;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3px var(--color-accent-gold-glow);
}

.hm-sheet-select-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-ink-muted);
}

.hm-sheet-table-container {
  flex: 1;
  overflow: auto;
  background-color: var(--color-surface);
  /* Custom thin scrollbar for luxury feel */
  scrollbar-width: thin;
  scrollbar-color: oklch(75% 0.01 75) transparent;
}

.hm-sheet-table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.hm-sheet-table-container::-webkit-scrollbar-track {
  background: transparent;
}
.hm-sheet-table-container::-webkit-scrollbar-thumb {
  background-color: oklch(75% 0.01 75);
  border-radius: 4px;
}

.hm-sheet-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 1200px;
}

.hm-sheet-table th {
  position: sticky;
  top: 0;
  background-color: var(--color-surface);
  padding: 1rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-border);
  z-index: 10;
  box-shadow: 0 4px 12px -4px oklch(0% 0 0 / 0.02);
}

.hm-sheet-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-dark);
  vertical-align: top;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hm-sheet-table tr.hm-row-data:hover td {
  background-color: oklch(99% 0.005 75);
}

.hm-row-category {
  background-color: var(--color-brand-100);
}

.hm-row-category td {
  padding: 1.5rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}

.hm-cat-num {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-accent-gold);
  font-weight: 600;
  text-align: center;
}

.hm-cat-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-dark);
}

.hm-cell-code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-dark);
  background-color: oklch(97% 0.01 75);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
}

.hm-cell-badge {
  background-color: var(--color-paper-obsidian);
  color: var(--color-paper-champagne);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
}

.hm-cell-pts {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink-dark);
  text-align: right;
}

.hm-cell-factor {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-accent-700);
  text-align: right;
}

.hm-sheet-footer {
  padding: 1.25rem 3rem;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hm-sheet-stats {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.hm-sheet-btn-secondary {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.hm-sheet-btn-secondary:hover {
  border-color: var(--color-ink-dark);
  background-color: oklch(98% 0 0);
}
}

.hm-sheet-filter-wrap {
  position: relative;
  min-width: 280px;
}

.hm-sheet-select {
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem 2.5rem 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink-dark);
  width: 100%;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.hm-sheet-select:focus-visible {
  outline: none;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3px var(--color-accent-gold-glow);
}

.hm-sheet-select-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-ink-muted);
}

.hm-sheet-table-container {
  flex: 1;
  overflow: auto;
  background-color: var(--color-surface);
  /* Custom thin scrollbar for luxury feel */
  scrollbar-width: thin;
  scrollbar-color: oklch(75% 0.01 75) transparent;
}

.hm-sheet-table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.hm-sheet-table-container::-webkit-scrollbar-track {
  background: transparent;
}
.hm-sheet-table-container::-webkit-scrollbar-thumb {
  background-color: oklch(75% 0.01 75);
  border-radius: 4px;
}

.hm-sheet-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 1200px;
}

.hm-sheet-table th {
  position: sticky;
  top: 0;
  background-color: var(--color-surface);
  padding: 1rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-border);
  z-index: 10;
  box-shadow: 0 4px 12px -4px oklch(0% 0 0 / 0.02);
}

.hm-sheet-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-dark);
  vertical-align: top;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hm-sheet-table tr.hm-row-data:hover td {
  background-color: oklch(99% 0.005 75);
}

.hm-row-category {
  background-color: var(--color-brand-100);
}

.hm-row-category td {
  padding: 1.5rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}

.hm-cat-num {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-accent-gold);
  font-weight: 600;
  text-align: center;
}

.hm-cat-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-dark);
}

.hm-cell-code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-dark);
  background-color: oklch(97% 0.01 75);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
}

.hm-cell-badge {
  background-color: var(--color-paper-obsidian);
  color: var(--color-paper-champagne);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
}

.hm-cell-pts {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink-dark);
  text-align: right;
}

.hm-cell-factor {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-accent-700);
  text-align: right;
}

.hm-sheet-footer {
  padding: 1.25rem 3rem;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hm-sheet-stats {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.hm-sheet-btn-secondary {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.hm-sheet-btn-secondary:hover {
  border-color: var(--color-ink-dark);
  background-color: oklch(98% 0 0);
}

.hm-highlight {
  background-color: var(--color-accent-gold-glow);
  color: var(--color-accent-700);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}

/* Explicit column widths for perfect grid */
.col-stt { width: 5%; text-align: center; }
.col-code { width: 10%; }
.col-task { width: 22%; }
.col-sub { width: 22%; }
.col-output { width: 12%; }
.col-group { width: 8%; text-align: center; }
.col-pts { width: 6%; text-align: right; }
.col-factor { width: 7%; text-align: right; }
.col-note { width: 8%; }

/* Hallmark · system-wide motion pass · audience: internal KPI staff · use: complete KPI work with clear state feedback
 * tone: utilitarian-luxury · theme: Atelier · motion stance: motion-cut with CSS primitives
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */

html,
body {
  overflow-x: clip;
}

button,
a,
input,
select,
textarea,
.workspace-card,
.info-cell,
.kpi-stat-card,
.period-picker-card,
.tasks-sidebar,
.tasks-table tbody tr,
.empty-state,
.badge,
.count-badge,
.nav-list-item {
  transition-duration: var(--dur-normal);
  transition-timing-function: var(--ease-out);
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-list-item:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

button:not(:disabled):hover,
.btn-primary-sm:hover,
.btn-primary:hover,
.btn-outline:hover,
.tb-btn:hover,
.hm-sheet-btn-secondary:hover {
  transform: translateY(-1px);
}

button:not(:disabled):active,
.btn-primary-sm:active,
.btn-primary:active,
.btn-outline:active,
.tb-btn:active,
.hm-sheet-btn-secondary:active {
  transform: translateY(1px) scale(0.99);
  transition-duration: var(--dur-fast);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

/* Global smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Custom Smooth Scrollbar for Data Surfaces & Containers */
.tasks-table-wrapper,
.tasks-sidebar,
.kpi-review-forms-table-wrap,
.reports-table-shell,
.tasks-main-content {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.tasks-table-wrapper::-webkit-scrollbar,
.tasks-sidebar::-webkit-scrollbar,
.kpi-review-forms-table-wrap::-webkit-scrollbar,
.reports-table-shell::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.tasks-table-wrapper::-webkit-scrollbar-track,
.tasks-sidebar::-webkit-scrollbar-track,
.kpi-review-forms-table-wrap::-webkit-scrollbar-track,
.reports-table-shell::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.tasks-table-wrapper::-webkit-scrollbar-thumb,
.tasks-sidebar::-webkit-scrollbar-thumb,
.kpi-review-forms-table-wrap::-webkit-scrollbar-thumb,
.reports-table-shell::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-normal) var(--ease-out);
}

.tasks-table-wrapper::-webkit-scrollbar-thumb:hover,
.tasks-sidebar::-webkit-scrollbar-thumb:hover,
.kpi-review-forms-table-wrap::-webkit-scrollbar-thumb:hover,
.reports-table-shell::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Entry choreography: screen changes stay quiet and legible. */
.screen-view:not(.hide) {
  animation: hm-screen-in var(--dur-page) var(--ease-out) both;
}

.screen-view.hide {
  animation: none;
}

.app-header {
  animation: hm-header-in var(--dur-slow) var(--ease-out) both;
}

.workspace-card:not(.hide) {
  animation: hm-surface-in var(--dur-slow) var(--ease-out) both;
}

/* Personal Tasks Screen Entrance & Staggered Elements */
.personal-tasks-view:not(.hide) {
  animation: hm-surface-in var(--dur-page) var(--ease-smooth) both;
}

.personal-tasks-view:not(.hide) .tasks-sidebar,
.personal-tasks-view:not(.hide) .tasks-main-content {
  animation: hm-view-fade-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Login Diptych Split Entrance */
.hm-login-hero-panel {
  animation: hm-panel-left-in var(--dur-page) var(--ease-smooth) both;
  will-change: transform, opacity;
}

.hm-login-form-panel {
  animation: hm-panel-right-in var(--dur-page) 80ms var(--ease-smooth) both;
  will-change: transform, opacity;
}

.hm-hero-pattern {
  animation: hm-pattern-pulse 14s ease-in-out infinite;
  will-change: opacity, transform;
}

.hm-hero-content > *,
.hm-form-wrapper > * {
  animation: hm-rise-in var(--dur-slow) var(--ease-out) both;
}

.hm-hero-content > *:nth-child(1) { animation-delay: 20ms; }
.hm-hero-content > *:nth-child(2) { animation-delay: 60ms; }
.hm-hero-content > *:nth-child(3) { animation-delay: 110ms; }
.hm-hero-content > *:nth-child(4) { animation-delay: 160ms; }
.hm-hero-content > *:nth-child(5) { animation-delay: 210ms; }

.hm-form-wrapper > *:nth-child(1) { animation-delay: 60ms; }
.hm-form-wrapper > *:nth-child(2) { animation-delay: 110ms; }
.hm-form-wrapper > *:nth-child(3) { animation-delay: 170ms; }

/* Login button luxury interaction */
#btn-login-submit {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  will-change: transform, box-shadow;
}

#btn-login-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-gold);
}

#btn-login-submit:active {
  transform: translateY(0) scale(0.985);
}

/* Shared surface feedback. */
.workspace-card:hover,
.period-picker-card:hover,
.tasks-sidebar:hover {
  box-shadow: var(--shadow-hover);
}

.info-cell,
.kpi-stat-card,
.tasks-table tbody tr {
  will-change: transform;
}

.info-cell:hover,
.kpi-stat-card:hover {
  transform: translateY(-2px);
}

.info-cell:active,
.kpi-stat-card:active {
  transform: translateY(0);
}

.nav-item::after,
.filter-tab::after {
  transition: transform var(--dur-normal) var(--ease-out), opacity var(--dur-normal) var(--ease-out);
}

.header-user-trigger:hover .dropdown-chevron,
.header-user-dropdown:focus-within .dropdown-chevron {
  transform: rotate(180deg);
}

.header-dropdown-menu {
  transform-origin: top right;
}

.header-user-dropdown:hover .header-dropdown-menu,
.header-user-dropdown:focus-within .header-dropdown-menu {
  animation: hm-pop-in var(--dur-normal) var(--ease-out) both;
}

.dropdown-item:hover .dropdown-icon {
  transform: translateX(2px);
}

.dropdown-item .dropdown-icon {
  transition: transform var(--dur-normal) var(--ease-out);
}

/* All modal families share the same arrival/departure language. */
.modal-overlay:not(.hide) {
  animation: hm-overlay-in var(--dur-normal) var(--ease-out) both;
}

.modal-overlay:not(.hide) > .modal-card,
.modal-overlay:not(.hide) > .hm-sheet-modal {
  animation: hm-modal-in var(--dur-slow) var(--ease-out) both;
}

.modal-overlay.hide {
  animation: none;
}

.modal-close:hover,
.hm-sheet-close:hover {
  transform: rotate(3deg) scale(1.04);
}

.modal-close,
.hm-sheet-close {
  transition: transform var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}

.error-banner:not(.hide),
.success-banner:not(.hide) {
  animation: hm-status-in var(--dur-slow) var(--ease-out) both;
}

.error-banner,
.success-banner {
  will-change: transform, opacity;
}

.is-uploading,
[aria-busy="true"] {
  cursor: progress;
}

.is-uploading {
  opacity: 0.82;
}

.motion-item {
  opacity: 0;
  transform: translateY(var(--motion-distance-sm));
  animation: hm-row-in var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--motion-index, 0) * var(--motion-stagger));
}

.task-permission-hint {
  min-height: 1lh;
  color: var(--color-ink-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

#task-input-assigner[readonly] {
  background-color: var(--color-brand-100);
  color: var(--color-ink-muted);
  cursor: default;
}

.hm-sheet-table tbody .motion-item {
  animation-duration: var(--dur-normal);
}

/* Sticky Header on Table with Glass Blur */
.tasks-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px -1px oklch(14% 0.02 50 / 0.15);
}

/* Staggered Cascade for Table Rows */
.tasks-table tbody tr {
  animation: hm-row-in var(--dur-slow) var(--ease-out) both;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.tasks-table tbody tr:nth-child(1) { animation-delay: 20ms; }
.tasks-table tbody tr:nth-child(2) { animation-delay: 45ms; }
.tasks-table tbody tr:nth-child(3) { animation-delay: 70ms; }
.tasks-table tbody tr:nth-child(4) { animation-delay: 95ms; }
.tasks-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.tasks-table tbody tr:nth-child(6) { animation-delay: 145ms; }
.tasks-table tbody tr:nth-child(7) { animation-delay: 170ms; }
.tasks-table tbody tr:nth-child(8) { animation-delay: 195ms; }
.tasks-table tbody tr:nth-child(n+9) { animation-delay: 220ms; }

.tasks-table tbody tr:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px -4px oklch(14% 0.02 50 / 0.12);
}

.hm-sheet-table tbody tr:hover td {
  transition: background-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}

/* Keyframes Definitions */
@keyframes hm-screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hm-header-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hm-panel-in {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes hm-panel-left-in {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hm-panel-right-in {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hm-view-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hm-pattern-pulse {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50% { opacity: 0.94; transform: scale(1.025); }
}

@keyframes hm-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hm-surface-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hm-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hm-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hm-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hm-status-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hm-row-in {
  from { opacity: 0; transform: translateY(var(--motion-distance-sm)); }
  to { opacity: 1; transform: translateY(0); }
}

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

  .motion-item,
  .hm-hero-content > *,
  .hm-form-wrapper > *,
  .hm-hero-pattern,
  .hm-login-hero-panel,
  .hm-login-form-panel,
  .personal-tasks-view:not(.hide) .tasks-sidebar,
  .personal-tasks-view:not(.hide) .tasks-main-content,
  .tasks-table tbody tr {
    opacity: 1;
    transform: none !important;
    animation: none !important;
  }
}

/* Task workflow additions: kept scoped to the Công việc workspace. */
.task-row-meta { display: block; margin-top: 0.25rem; color: var(--color-ink-muted, #73787f); font-size: 0.75rem; font-weight: 500; }
.task-actions-cell { min-width: 5rem; text-align: center; }
.task-action-menu { position: relative; z-index: 20; display: inline-block; }
.task-action-menu-toggle { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0.55rem; background: transparent; color: var(--color-primary, #1f5eb5); cursor: pointer; font-size: 1.35rem; font-weight: 800; line-height: 1; letter-spacing: 0.12em; }
.task-action-menu-toggle:hover,
.task-action-menu.is-open .task-action-menu-toggle { background: var(--color-surface-soft, #f1f5ff); }
.task-action-menu-popover { position: absolute; z-index: 1000; top: calc(100% + 0.35rem); right: 0; display: none; min-width: 10rem; padding: 0.45rem; border: 1px solid var(--color-border, #dedbd4); border-radius: 0.7rem; background: #fff; box-shadow: 0 0.65rem 1.5rem rgba(24, 44, 76, 0.16); text-align: left; }
.task-action-menu.is-open .task-action-menu-popover { display: grid; gap: 0.15rem; }
#view-dashboard .tasks-table tbody tr:has(.task-action-menu.is-open) { position: relative; z-index: 100; }
#view-dashboard .tasks-table tbody tr:has(.task-action-menu.is-open) td { position: relative; z-index: 101; overflow: visible; }
#view-dashboard .tasks-table .task-group-row { position: relative; z-index: 1; }
.task-action-link { border: 0; padding: 0; margin: 0 0.45rem 0.25rem 0; background: transparent; color: var(--color-accent-gold, #a67c35); cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 700; }
.task-action-menu-popover .task-action-link { width: 100%; margin: 0; padding: 0.5rem 0.65rem; border-radius: 0.45rem; text-align: left; white-space: nowrap; }
.task-action-menu-popover .task-action-link:hover { background: var(--color-surface-soft, #f6f8ff); text-decoration: none; }
.task-action-link:hover { text-decoration: underline; }
.task-history-modal { width: min(42rem, calc(100vw - 2rem)); }
.task-history-body { padding: 0 1.25rem 1.25rem; }
.task-history-list { display: grid; gap: 0.55rem; max-height: min(32rem, 62vh); overflow-y: auto; }
.task-history-item { border: 1px solid var(--color-border, #dedbd4); border-radius: 0.65rem; background: #fff; overflow: hidden; }
.task-history-item-header { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.65rem; padding: 0.7rem 0.8rem; border: 0; background: transparent; color: var(--color-ink-dark, #25282d); cursor: pointer; text-align: left; }
.task-history-item-header:hover { background: var(--color-surface-soft, #f6f8ff); }
.task-history-item-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; font-weight: 650; }
.task-history-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.55rem; border-radius: 999px; background: #e9f1ff; color: #2c65bc; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.task-history-badge::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; }
.task-history-badge.is-create { background: #e7f7ef; color: #28956b; }
.task-history-badge.is-review, .task-history-badge.is-status { background: #e8f1ff; color: #2867bd; }
.task-history-badge.is-self_evaluate { background: #edf0ff; color: #7555c7; }
.task-history-badge.is-return { background: #fff0e4; color: #d37d24; }
.task-history-actor { color: var(--color-ink-muted, #73787f); font-size: 0.72rem; white-space: nowrap; }
.task-history-chevron { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex-shrink: 0; color: #7b8492; transform: rotate(0deg); transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.task-history-item.is-expanded .task-history-chevron { transform: rotate(180deg); }
.task-history-detail { padding: 0 0.8rem 0.8rem; }
.task-history-detail-table { border-top: 1px solid var(--color-border, #dedbd4); }
.task-history-detail-head, .task-history-detail-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr); gap: 1rem; padding: 0.48rem 0; border-bottom: 1px solid #eef0f3; font-size: 0.78rem; }
.task-history-detail-head { background: #3972c7; color: #fff; margin: 0 -0.8rem; padding: 0.5rem 0.8rem; border-bottom: 0; font-weight: 700; }
.task-history-detail-row span { color: #314f83; }
.task-history-detail-row strong { color: #16a26e; font-weight: 650; }
.task-history-empty, .task-history-loading, .task-history-empty-detail { padding: 1.5rem; color: var(--color-ink-muted, #73787f); text-align: center; }
.task-history-empty.is-error { color: #b74b45; }
@media (max-width: 720px) {
  .task-history-item-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .task-history-actor { grid-column: 2 / -1; }
  .task-history-detail-head, .task-history-detail-row { grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr); }
}
.task-check-row { display: flex; align-items: center; gap: 0.55rem; margin: 0.75rem 0; color: var(--color-ink-dark, #25282d); font-size: 0.88rem; }
.task-check-row input { accent-color: var(--color-accent-gold, #a67c35); }
.task-import-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.task-import-summary { margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--color-border, #dedbd4); background: var(--color-surface-soft, #faf9f6); font-size: 0.9rem; }
.task-import-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-border, #dedbd4); font-size: 0.82rem; }
.task-import-row.is-error { color: var(--color-danger-600, #a03a36); }
.task-import-row small { color: var(--color-ink-muted, #73787f); }
.review-due-date { margin: 1.8rem 0 0; }

.task-status-view-icon {
  display: inline-flex;
  width: 1.65rem;
  height: 1.65rem;
  margin-left: 0.35rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #edf3ff;
  color: #426bd1;
  cursor: pointer;
  vertical-align: middle;
}
.task-status-view-icon:hover { background: #dce8ff; color: #2456c5; }
.task-status-view-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.task-review-modal { width: min(100%, 62.5rem); }
.task-review-self-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; padding: 0.6rem; border: 1px dashed #b7c8ee; border-radius: 0.6rem; background: #f7f9ff; }
.task-review-self-score-grid > div { display: flex; min-height: 3.25rem; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.55rem; border: 1px solid #e2e7f1; border-radius: 0.45rem; background: #fff; }
.task-review-self-score-grid span { color: #8b93a0; font-size: 0.7rem; }
.task-review-self-score-grid strong { color: #168044; font-size: 1rem; font-variant-numeric: tabular-nums; }
.task-review-evidence-file { display: flex; min-height: 2.4rem; align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; border: 1px solid #e1e4e9; border-radius: 0.6rem; color: #65748a; font-size: 0.76rem; }
.task-review-evidence-file a { color: #3265c8; font-weight: 700; text-decoration: none; }
.task-review-evidence-file a:hover { text-decoration: underline; }
.task-review-limits, .task-review-limit-meta { display: block; margin: 0.1rem 0 0; color: #7b8492; font-size: 0.7rem; font-weight: 650; }
.task-review-limits { padding: 0.55rem 0.75rem; border-radius: 0.55rem; background: #fff8e8; color: #a56b19; }
.task-review-body .task-evidence-note-group textarea { min-height: 9rem; background: #f8f9fb; color: #44505f; }
.task-review-body .task-evaluation-total { margin-top: 0.1rem; }
.task-review-return { border-color: #f0b9a8; background: #fff2ed; color: #d55d38; }
.task-review-return:hover { background: #ffe5dc; }
@media (max-width: 800px) {
  .task-review-self-score-grid { grid-template-columns: 1fr; }
}

/* Mobile containment for the Công việc toolbar/table. */
#view-dashboard,
#view-dashboard .dashboard-grid,
#view-dashboard .dashboard-main,
#view-personal-tasks,
#default-tasks-workspace {
  min-width: 0;
}

/* Keep the account menu above the task workspace when it crosses the header edge. */
#view-dashboard .app-header {
  position: relative;
  z-index: 100;
}

#view-dashboard .dashboard-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

#view-dashboard .header-dropdown-menu {
  z-index: 1000;
}

@media (max-width: 760px) {
  #view-dashboard .dashboard-main { width: 100%; min-height: 0; padding: 1rem; }
  #view-personal-tasks { flex-direction: column; width: 100%; gap: 1rem; }
  #view-personal-tasks .tasks-sidebar,
  #view-personal-tasks .tasks-main-content { width: 100%; min-width: 0; }
  #view-personal-tasks .tasks-sidebar { padding: 1rem; }
  #view-personal-tasks .tasks-main-content { padding: 1rem; overflow: hidden; }
  #view-personal-tasks .tasks-header { align-items: stretch; flex-direction: column; gap: 0.75rem; }
  #view-personal-tasks .tasks-toolbar { width: 100%; flex-wrap: wrap; gap: 0.5rem; }
  #view-personal-tasks .tasks-toolbar .tb-btn { flex: 1 1 8rem; justify-content: center; min-width: 0; }
  #view-personal-tasks .tasks-filter-tabs { gap: 0.85rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
  #view-personal-tasks .filter-tab { flex: 0 0 auto; white-space: nowrap; }
  #view-personal-tasks .tasks-table-wrapper { max-width: 100%; overflow-x: auto; }
  #view-personal-tasks .tasks-table { min-width: 720px; }
  .header-dropdown-menu { max-width: calc(100vw - 1rem); }
}

@media (min-width: 761px) {
  #view-personal-tasks { flex: 1 1 auto; min-height: 0; }
  #view-personal-tasks .tasks-sidebar,
  #view-personal-tasks .tasks-main-content { min-height: 0; }
  #view-personal-tasks .tasks-main-content { flex: 1 1 auto; }
}

@media (max-width: 768px) {
  .hm-hero-content > *,
  .hm-form-wrapper > * {
    animation-delay: 0ms;
  }

  .tasks-table tbody tr:hover,
  .info-cell:hover,
  .kpi-stat-card:hover,
  .nav-list-item:hover {
    transform: none;
  }
}

/* Hallmark · task search modal — reference-led composition, Atelier tokens */
.search-modal-card {
  width: min(100%, 37rem);
  max-height: none;
  overflow: visible;
  padding: var(--space-search-modal-x);
  background: var(--color-paper-champagne);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-search-modal);
  color: var(--color-ink-dark);
}

.search-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.search-modal-header h3 {
  margin: 0;
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.search-modal-close,
.search-close-button,
.search-action-button,
.search-reset-button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.search-modal-close {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  margin: -0.35rem -0.35rem 0 0;
  place-items: center;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-accent-gold-dim);
  font-size: 1.65rem;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.search-modal-close:hover {
  background: var(--color-search-wash);
  color: var(--color-ink-dark);
  transform: rotate(4deg);
}

.search-modal-close:active,
.search-action-button:active,
.search-reset-button:active,
.search-close-button:active {
  transform: translateY(1px);
}

.search-modal-body {
  display: grid;
  gap: var(--space-3);
}

.search-field {
  position: relative;
  display: flex;
  min-height: var(--size-search-field);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-search-field);
  background: var(--color-surface);
  box-shadow: var(--shadow-search-field);
  color: var(--color-ink-dark);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.search-field:hover {
  border-color: var(--color-accent-gold-dim);
  transform: translateY(-1px);
}

.search-field:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus), var(--shadow-search-field);
}

.search-field:has(input:disabled),
.search-field:has(select:disabled) {
  cursor: not-allowed;
  opacity: 0.58;
}

.search-field input,
.search-field select {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink-dark);
  font: 500 var(--text-base)/1.2 var(--font-body);
}

.search-field input {
  padding: 0 var(--space-3);
}

.search-field input::placeholder {
  color: var(--color-ink-muted);
  opacity: 0.88;
}

.search-field input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

.search-field-select {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-content: center;
  padding: 0 var(--space-3);
}

.search-field-select select {
  grid-column: 1;
  grid-row: 2;
  height: auto;
  padding: 0;
  appearance: none;
  cursor: pointer;
}

.search-field-select > svg,
.search-range-field > svg {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-ink-muted);
  pointer-events: none;
}

.search-field-select > svg {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.search-field-label,
.search-range-placeholder {
  color: var(--color-ink-muted);
  font: 600 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.01em;
}

.search-range-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  padding: 0 var(--space-3);
}

.search-range-placeholder {
  grid-column: 1;
  grid-row: 1;
}

.search-range-inputs {
  display: flex;
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  gap: var(--space-2);
}

.search-range-inputs input {
  width: 7.5rem;
  height: 1.25rem;
  padding: 0;
  color: var(--color-ink-dark);
  font-size: var(--text-sm);
}

.search-range-inputs input.is-empty {
  color: transparent;
}

.search-range-inputs input:focus {
  color: var(--color-ink-dark);
}

.search-range-inputs input[type="date"]::-webkit-calendar-picker-indicator {
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.search-range-inputs > span {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.search-range-field > svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.search-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.search-action-button,
.search-reset-button {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.search-action-button svg,
.search-reset-button svg {
  width: 1rem;
  height: 1rem;
}

.search-action-button {
  background: var(--color-search-action);
  color: var(--color-search-action-ink);
  box-shadow: 0 8px 18px -10px var(--color-accent-gold-dim);
}

.search-action-button:hover {
  background: var(--color-search-action-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.search-reset-button {
  background: var(--color-search-wash);
  color: var(--color-accent-gold-dim);
}

.search-reset-button:hover {
  background: var(--color-accent-gold-glow);
  color: var(--color-ink-dark);
}

.search-close-button {
  padding: var(--space-2) 0;
  background: transparent;
  color: var(--color-accent-gold-dim);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: color var(--dur-fast) var(--ease-out);
}

.search-close-button:hover {
  color: var(--color-ink-dark);
}

.search-modal-close:focus-visible,
.search-action-button:focus-visible,
.search-reset-button:focus-visible,
.search-close-button:focus-visible,
.search-field input:focus-visible,
.search-field select:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

.search-action-button:disabled,
.search-reset-button:disabled,
.search-close-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.search-modal-card [data-state="loading"] {
  cursor: progress;
  opacity: 0.7;
}

.search-modal-card [data-state="error"] {
  border-color: var(--color-danger);
}

.search-modal-card [data-state="success"] {
  border-color: var(--color-success);
}

.modal-overlay:not(.hide) > .search-modal-card {
  animation: hm-modal-in var(--dur-slow) var(--ease-out) both;
}

@media (max-width: 520px) {
  .search-modal-card {
    padding: var(--space-search-modal-compact);
  }

  .search-modal-header h3 {
    font-size: var(--text-xl);
  }

  .search-range-inputs input {
    width: 6.5rem;
  }

  .search-modal-footer {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* Hallmark · task-search interaction layer: tactile comboboxes + date-range controls */
.search-combobox {
  display: block;
  min-height: var(--size-search-field);
  padding: 0;
}

.search-combobox.is-open {
  z-index: 20;
}

.search-combobox-trigger {
  display: grid;
  width: 100%;
  min-height: var(--size-search-field);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-ink-dark);
  text-align: left;
  cursor: pointer;
}

.search-combobox-trigger .search-field-label {
  grid-column: 1;
  grid-row: 1;
}

.search-combobox-value {
  display: block;
  overflow: hidden;
  grid-column: 1;
  grid-row: 2;
  color: var(--color-ink-dark);
  font: 600 var(--text-base)/1.15 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-combobox-trigger > svg {
  width: 1.2rem;
  height: 1.2rem;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--color-ink-muted);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.search-combobox.is-open .search-combobox-trigger > svg {
  color: var(--color-accent-gold-dim);
  transform: rotate(180deg);
}

.search-dropdown {
  position: absolute;
  z-index: 21;
  top: calc(100% + var(--space-2));
  right: -1px;
  left: -1px;
  visibility: hidden;
  overflow: hidden;
  max-height: min(24rem, 48vh);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper-champagne);
  box-shadow: var(--shadow-search-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.99);
  transform-origin: top center;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}

.search-combobox.is-open .search-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.search-dropdown-options {
  overflow-y: auto;
  max-height: min(19rem, 38vh);
  overscroll-behavior: contain;
  scrollbar-color: var(--color-accent-gold) transparent;
  scrollbar-width: thin;
}

.search-dropdown [role="option"] {
  display: flex;
  width: 100%;
  min-height: 2.25rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-dark);
  font: 500 var(--text-sm)/1.25 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.search-dropdown [role="option"]:hover,
.search-dropdown [role="option"]:focus-visible {
  background: var(--color-search-selection);
  color: var(--color-ink-dark);
}

.search-dropdown [role="option"]:active {
  transform: translateX(2px);
}

.search-dropdown [role="option"][aria-selected="true"] {
  background: var(--color-search-selection);
  color: var(--color-accent-gold-dim);
  font-weight: 700;
}

.search-dropdown [role="option"] strong {
  flex: 0 0 5.6rem;
  color: var(--color-accent-gold-dim);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.search-dropdown [role="option"] span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-dropdown-group-label {
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--color-ink-muted);
  font: 700 var(--text-xs)/1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.search-dropdown-group {
  display: grid;
  gap: 2px;
}

.search-dropdown-search {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.search-dropdown-search svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--color-ink-muted);
}

.search-dropdown-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink-dark);
  font: 500 var(--text-sm)/1.2 var(--font-body);
}

.search-dropdown-empty {
  padding: var(--space-4) var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.is-filtered-out {
  display: none !important;
}

.search-range-field {
  min-height: var(--size-search-range-field);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  padding: var(--space-2) var(--space-3);
}

.search-range-content {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: baseline;
  gap: var(--space-2);
}

.search-range-helper {
  color: var(--color-ink-muted);
  font: 500 var(--text-xs)/1 var(--font-body);
  opacity: 0.76;
}

.search-range-inputs {
  width: calc(100% - var(--space-3));
  grid-column: 1;
  grid-row: 2;
  gap: var(--space-2);
}

.search-date-segment {
  display: grid;
  min-width: 0;
  flex: 1 1 0;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.search-date-segment:hover,
.search-date-segment:focus-within {
  border-color: var(--color-accent-gold-dim);
  background: var(--color-search-selection);
}

.search-date-segment > span {
  color: var(--color-ink-muted);
  font: 600 var(--text-xs)/1 var(--font-body);
}

.search-date-segment input {
  width: 100%;
  height: 1.15rem;
  padding: 0;
  color: var(--color-ink-dark);
  font-size: var(--text-sm);
}

.search-date-segment input.is-empty {
  color: transparent;
}

.search-date-segment input:focus {
  color: var(--color-ink-dark);
}

.search-date-segment input[type="date"]::-webkit-calendar-picker-indicator {
  width: auto;
  opacity: 0;
  cursor: pointer;
}

.search-range-divider {
  align-self: end;
  padding-bottom: var(--space-2);
  color: var(--color-accent-gold-dim) !important;
  font-weight: 700 !important;
}

.search-range-field > svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.search-range-error {
  position: absolute;
  bottom: -1.05rem;
  left: var(--space-3);
  color: var(--color-danger);
  font: 600 var(--text-xs)/1 var(--font-body);
}

.search-range-field.has-error {
  margin-bottom: 1.05rem;
  border-color: var(--color-danger);
  background: var(--color-search-error-wash);
}

.search-range-field.has-error:focus-within {
  box-shadow: 0 0 0 3px var(--color-danger-100);
}

.search-combobox-trigger:focus-visible,
.search-dropdown-search input:focus-visible,
.search-date-segment input:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .search-dropdown [role="option"] strong {
    flex-basis: 5rem;
  }

  .search-range-content {
    display: block;
  }

  .search-range-helper {
    display: block;
    margin-top: 2px;
  }

  .search-range-field {
    min-height: var(--size-search-range-field);
  }
}

/* Hallmark · task-search calendar — direct range selection without native-picker chrome */
.search-date-segment {
  position: relative;
}

.search-date-display {
  width: 100%;
  height: 1.15rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-ink-dark);
  font: 600 var(--text-sm)/1 var(--font-body);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.search-date-display.is-empty {
  color: var(--color-ink-muted);
  font-weight: 500;
}

.search-date-display:hover {
  color: var(--color-accent-gold-dim);
}

.search-native-date {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.search-calendar-trigger {
  position: relative;
  z-index: 2;
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  grid-column: 2;
  grid-row: 1 / span 2;
  place-items: center;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.search-calendar-trigger:hover {
  background: var(--color-search-selection);
  color: var(--color-accent-gold-dim);
}

.search-calendar-trigger:active {
  transform: translateY(1px);
}

.search-calendar-trigger:focus-visible,
.search-date-display:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.search-calendar-trigger svg {
  width: 1.2rem;
  height: 1.2rem;
}

.search-calendar-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(17.5rem, calc(100vw - 3rem));
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper-champagne);
  box-shadow: var(--shadow-search-dropdown);
  color: var(--color-ink-dark);
  animation: hm-pop-in var(--dur-fast) var(--ease-out) both;
}

.search-range-field.is-calendar-open {
  z-index: 40;
}

.search-range-field.is-calendar-open:hover {
  transform: none;
}

.search-calendar-header {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  margin-bottom: var(--space-2);
  text-align: center;
}

.search-calendar-header strong {
  font: 750 var(--text-base)/1.1 var(--font-display);
  text-transform: capitalize;
}

.search-calendar-nav {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  font: 500 1.5rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.search-calendar-nav:hover {
  background: var(--color-search-selection);
  color: var(--color-ink-dark);
}

.search-calendar-weekdays,
.search-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.search-calendar-weekdays {
  margin-bottom: var(--space-1);
  color: var(--color-ink-muted);
  font: 700 var(--text-xs)/1.4 var(--font-body);
  text-align: center;
}

.search-calendar-day,
.search-calendar-blank {
  min-width: 0;
  height: 1.875rem;
}

.search-calendar-day {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-dark);
  font: 600 var(--text-sm)/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.search-calendar-day:hover {
  border-color: var(--color-accent-gold-dim);
  background: var(--color-search-selection);
}

.search-calendar-day:active {
  transform: scale(0.96);
}

.search-calendar-day:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

.search-calendar-day.is-today {
  border-color: var(--color-accent-gold-dim);
  color: var(--color-accent-gold-dim);
}

.search-calendar-day.is-in-range {
  border-radius: 0;
  background: var(--color-search-selection);
  color: var(--color-ink-dark);
}

.search-calendar-day.is-range-start,
.search-calendar-day.is-range-end {
  border-color: var(--color-search-action);
  background: var(--color-search-action);
  color: var(--color-search-action-ink);
  font-weight: 800;
}

.search-calendar-day.is-range-start {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.search-calendar-day.is-range-end {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.search-calendar-day.is-range-start.is-range-end {
  border-radius: var(--radius-sm);
}

.search-calendar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.search-calendar-footer span {
  min-width: 0;
  overflow: hidden;
  color: var(--color-ink-muted);
  font: 600 var(--text-xs)/1.2 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-calendar-footer button {
  flex: 0 0 auto;
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  color: var(--color-accent-gold-dim);
  font: 700 var(--text-xs)/1.2 var(--font-body);
  cursor: pointer;
}

.search-calendar-footer button:hover {
  color: var(--color-ink-dark);
}

.search-calendar-popover[hidden] {
  display: none;
}

@media (max-width: 520px) {
  .search-calendar-popover {
    right: auto;
    left: 0;
    width: min(17.5rem, calc(100vw - 3.5rem));
  }
}

/* Hallmark · page: home dashboard · genre: luxury-editorial · theme: Atelier
 * scope: dashboard surface · audience: cán bộ sử dụng KPI · use: đọc nhanh và đi tới công việc
 * macrostructure: bento control room · pre-emit critique: P5 H5 E5 S5 R4 V4
 */
html,
body {
  overflow-x: clip;
}

.nav-item-icon {
  flex: 0 0 auto;
  display: block;
}

.home-dashboard-view {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(1.4rem, 3vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 8%, var(--color-home-accent-soft) 0 10rem, transparent 10.2rem),
    linear-gradient(135deg, var(--color-surface) 0%, var(--color-home-wash) 100%);
  box-shadow: var(--shadow-soft);
}

.home-dashboard-view::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(38rem, 65vw);
  aspect-ratio: 1;
  right: -14rem;
  bottom: -19rem;
  border: 1px solid var(--color-home-accent-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem var(--color-surface), 0 0 0 2.1rem var(--color-home-accent-soft), 0 0 0 5rem var(--color-surface), 0 0 0 5.1rem var(--color-home-accent-soft);
  opacity: 0.72;
  pointer-events: none;
}

.home-dashboard-topline,
.home-context-banner,
.home-card-header,
.home-month-summary,
.home-metric-copy,
.home-card-footer-stats,
.home-due-item,
.home-legend {
  display: flex;
  align-items: center;
}

.home-dashboard-topline {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  padding-bottom: 1.4rem;
}

.home-dashboard-heading {
  min-width: 0;
}

.home-dashboard-kicker,
.home-card-index,
.home-period-label {
  display: block;
  color: var(--color-accent-gold-dim);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-dashboard-heading h1 {
  margin-top: 0.55rem;
  color: var(--color-ink-dark);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.home-dashboard-heading p {
  max-width: 42rem;
  margin-top: 0.8rem;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
}

.home-period-control {
  flex: 0 0 auto;
  display: grid;
  gap: 0.45rem;
  min-width: 10.8rem;
}

.home-period-select-wrap {
  position: relative;
  display: block;
}

.home-period-select-wrap select {
  width: 100%;
  appearance: none;
  padding: 0.7rem 2rem 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: 600 var(--text-sm)/1.2 var(--font-display);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.home-period-select-wrap svg {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  color: var(--color-ink-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.home-period-select-wrap select:hover {
  border-color: var(--color-accent-gold);
  background: var(--color-home-accent-soft);
}

.home-period-select-wrap select:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.home-context-banner {
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4rem;
  margin-bottom: 1.1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-home-accent-soft);
  border-radius: var(--radius-md);
  background: var(--color-home-accent-soft);
  color: var(--color-ink-muted);
}

.home-context-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
  font-size: var(--text-sm);
}

.home-context-copy strong {
  color: var(--color-accent-gold-dim);
}

.home-context-icon {
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-paper-obsidian);
  color: var(--color-accent-gold);
}

.home-context-period {
  flex: 0 0 auto;
  color: var(--color-ink-dark);
  font: 700 var(--text-sm)/1.2 var(--font-display);
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-dashboard-card,
.home-management-card {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-home-card);
}

.home-dashboard-card {
  min-height: 19rem;
  padding: 1.25rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.home-dashboard-card:hover,
.home-management-card:hover {
  border-color: var(--color-home-accent-soft);
  box-shadow: var(--shadow-home-card-hover);
  transform: translateY(-3px);
}

.home-card-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.home-card-header > div {
  min-width: 0;
}

.home-card-index {
  margin-bottom: 0.55rem;
  color: var(--color-ink-muted);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

.home-card-header h2 {
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.home-text-action,
.home-detail-button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--color-accent-gold-dim);
  font: 700 var(--text-xs)/1.2 var(--font-display);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.home-text-action:hover,
.home-detail-button:hover {
  color: var(--color-ink-dark);
  transform: translateX(2px);
}

.home-text-action:focus-visible,
.home-detail-button:focus-visible,
.home-due-item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

.home-total-number {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 1.5rem 0 1.1rem;
}

.home-total-number strong {
  color: var(--color-danger);
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.home-total-number span,
.home-month-copy span,
.home-month-copy p,
.home-card-footer-stats,
.home-empty-state,
.home-due-item time {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.home-status-list {
  display: grid;
  gap: 0.55rem;
}

.home-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.home-status-row.is-success { background: var(--color-home-success-soft); }
.home-status-row.is-pending { background: var(--color-home-danger-soft); }

.home-status-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--color-ink-dark);
  font-size: var(--text-sm);
  font-weight: 650;
}

.home-status-label i,
.home-legend-item i {
  flex: 0 0 auto;
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-home-neutral);
}

.home-status-row.is-success .home-status-label i,
.home-legend-item.is-success { background: var(--color-success); }
.home-status-row.is-pending .home-status-label i,
.home-legend-item.is-danger { background: var(--color-danger); }
.home-legend-item.is-accent { background: var(--color-accent-gold); }
.home-legend-item.is-neutral { background: var(--color-home-neutral); }

.home-status-row > strong {
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.home-detail-button {
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink-dark);
  font-weight: 600;
}

.home-card-footer-stats {
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}

.home-card-footer-stats strong {
  color: var(--color-ink-dark);
}

.home-month-card {
  background: linear-gradient(145deg, var(--color-surface) 0%, var(--color-home-wash) 100%);
}

.home-month-summary {
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: 13rem;
}

.home-progress-ring {
  display: grid;
  flex: 0 0 auto;
  width: 9rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent-gold) var(--home-progress), var(--color-home-neutral-soft) 0);
  transform: rotate(-10deg);
}

.home-progress-ring-inner {
  display: grid;
  width: calc(100% - 1.25rem);
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  text-align: center;
  transform: rotate(10deg);
}

.home-progress-ring-inner strong {
  color: var(--color-accent-gold-dim);
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
}

.home-progress-ring-inner span {
  margin-top: 0.3rem;
  color: var(--color-ink-muted);
  font-size: 0.7rem;
}

.home-month-copy {
  min-width: 0;
}

.home-month-copy strong {
  color: var(--color-ink-dark);
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}

.home-month-copy p {
  max-width: 10rem;
  margin-top: 0.7rem;
  line-height: 1.45;
}

.home-count-badge {
  display: inline-grid;
  min-width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-home-success-soft);
  color: var(--color-success);
  font-size: 0.72rem;
  vertical-align: 0.08em;
}

.home-count-badge.is-active {
  background: var(--color-home-danger-soft);
  color: var(--color-danger);
}

.home-due-list {
  display: grid;
  align-content: center;
  min-height: 13.4rem;
  gap: 0.45rem;
}

.home-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.home-empty-dot {
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--color-accent-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--color-home-accent-soft);
}

.home-due-item {
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-home-wash);
  color: var(--color-accent-gold-dim);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.home-due-item:hover {
  border-color: var(--color-accent-gold);
  background: var(--color-home-accent-soft);
  transform: translateX(2px);
}

.home-due-item-copy {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.home-due-item-copy strong {
  overflow: hidden;
  color: var(--color-ink-dark);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-due-item.is-overdue .home-due-item-copy time { color: var(--color-danger); }

.home-management-card {
  margin-top: 1rem;
  padding: 1.25rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.home-management-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.home-management-count {
  flex: 0 0 auto;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-home-neutral-soft);
  color: var(--color-ink-muted);
  font: 600 var(--text-xs)/1.2 var(--font-display);
}

.home-metric-list {
  display: grid;
}

.home-metric-row {
  display: grid;
  gap: 0.55rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.home-metric-row:last-child { border-bottom: 0; padding-bottom: 0.2rem; }

.home-metric-copy {
  justify-content: space-between;
  gap: 1rem;
}

.home-metric-copy strong {
  color: var(--color-ink-dark);
  font-size: var(--text-sm);
}

.home-metric-copy span {
  color: var(--color-accent-gold-dim);
  font: 700 var(--text-sm)/1.2 var(--font-display);
}

.home-meter {
  overflow: hidden;
  height: 0.48rem;
  border-radius: var(--radius-pill);
  background: var(--color-home-neutral-soft);
}

.home-meter span {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent-gold-dim), var(--color-accent-gold));
  transform: scaleX(var(--meter-progress, 0));
  transform-origin: left center;
  transition: transform var(--dur-page) var(--ease-out);
  will-change: transform;
}

.home-meter span::after {
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 35%;
  content: "";
  background: linear-gradient(90deg, transparent, var(--color-accent-gold-hover), transparent);
  opacity: 0;
  transform: translateX(-150%);
}

.home-meter.is-animating span::after {
  opacity: 0.72;
  animation: home-meter-regen var(--dur-slow) var(--ease-out) both;
}

@keyframes home-meter-regen {
  from { transform: translateX(-150%); }
  to { transform: translateX(420%); }
}

.home-legend {
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.home-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.home-legend-item strong { color: var(--color-ink-dark); }

@media (max-width: 1100px) {
  .home-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-due-card { grid-column: 1 / -1; min-height: auto; }
  .home-due-list { min-height: 8rem; }
}

@media (max-width: 760px) {
  .dashboard-main { padding: 1.25rem; }
  .home-dashboard-view { padding: 1rem; border-radius: var(--radius-md); }
  .home-dashboard-topline { align-items: stretch; flex-direction: column; gap: 1rem; }
  .home-period-control { width: 100%; }
  .home-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .home-due-card { grid-column: auto; }
}

@media (max-width: 480px) {
  .home-context-banner { align-items: flex-start; flex-direction: column; }
  .home-card-header { gap: 0.6rem; }
  .home-card-header h2 { font-size: 0.98rem; }
  .home-text-action { max-width: 5.2rem; text-align: right; }
  .home-month-summary { align-items: flex-start; justify-content: flex-start; }
  .home-progress-ring { width: 7.2rem; }
  .home-month-copy strong { font-size: 1.8rem; }
  .home-status-row { grid-template-columns: minmax(0, 1fr) auto; }
  .home-status-row .home-detail-button { grid-column: 1 / -1; justify-self: start; }
  .home-management-header { align-items: flex-start; flex-direction: column; }
  .home-metric-copy { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-dashboard-card,
  .home-management-card,
  .home-due-item,
  .home-meter span { transition: none; }

  .home-meter.is-animating span::after {
    animation: none;
    opacity: 0;
  }
}

/* Hallmark · macrostructure: Index-First · tone: utilitarian-luxury · theme: Atelier
 * nav: preserved N1b · footer: preserved Ft5 · scope: synced-work workspace
 * enrichment: none · pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.synced-tasks-workspace {
  flex: 1;
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background:
    linear-gradient(135deg, var(--color-surface) 0%, var(--color-sync-wash) 100%);
  box-shadow: var(--shadow-sync-surface);
  overflow: clip;
}

.synced-workspace-topline,
.synced-list-header,
.synced-list-toolbar,
.synced-task-record,
.synced-task-main,
.synced-task-state {
  display: flex;
  align-items: center;
}

.synced-workspace-topline {
  align-items: stretch;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.6rem;
}

.synced-workspace-heading {
  min-width: 0;
  max-width: 42rem;
}

.synced-eyebrow,
.synced-section-label,
.synced-stat-label {
  display: block;
  color: var(--color-accent-gold-dim);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.synced-workspace-heading h2 {
  margin-top: 0.55rem;
  color: var(--color-ink-dark);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.synced-workspace-heading p {
  max-width: 38rem;
  margin-top: 0.85rem;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
}

.synced-source-card {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.7rem;
  min-width: min(18rem, 100%);
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-sync-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.synced-source-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-sync-signal-soft);
  color: var(--color-sync-signal);
}

.synced-source-copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.synced-source-copy > span,
.synced-source-copy small {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.synced-source-copy strong {
  color: var(--color-ink-dark);
  font: 700 var(--text-sm)/1.2 var(--font-display);
  overflow-wrap: anywhere;
}

.synced-source-copy b {
  color: var(--color-ink-dark);
  font-weight: 700;
}

.synced-source-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-sync-reviewed-soft);
  color: var(--color-success);
  font: 700 var(--text-xs)/1.2 var(--font-display);
  white-space: nowrap;
}

.synced-source-status i,
.synced-status i {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.synced-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-sync-line);
  border-bottom: 1px solid var(--color-sync-line);
}

.synced-stat-card {
  display: grid;
  min-width: 0;
  min-height: 8rem;
  align-content: space-between;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--color-sync-line);
  background: transparent;
}

.synced-stat-card.is-lead {
  border-left-color: var(--color-sync-signal);
  background: var(--color-sync-signal-soft);
}

.synced-stat-label {
  color: var(--color-ink-muted);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

.synced-stat-card strong {
  color: var(--color-ink-dark);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.synced-stat-card small {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.synced-list-surface {
  margin-top: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.synced-list-header {
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
}

.synced-list-header > div {
  min-width: 0;
}

.synced-section-label {
  margin-bottom: 0.45rem;
  color: var(--color-ink-muted);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

.synced-list-header h3 {
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.synced-list-count {
  flex: 0 0 auto;
  color: var(--color-ink-muted);
  font: 700 var(--text-xs)/1.2 var(--font-display);
  white-space: nowrap;
}

.synced-list-toolbar {
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.2rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-sync-wash);
}

.synced-list-toolbar p {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.synced-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.synced-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-muted);
  font: 650 var(--text-xs)/1.2 var(--font-display);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.synced-filter b {
  display: inline-grid;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.25rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-home-neutral-soft);
  color: var(--color-ink-dark);
  font-size: 0.68rem;
}

.synced-filter:hover,
.synced-filter.is-active {
  border-color: var(--color-sync-line);
  background: var(--color-surface);
  color: var(--color-ink-dark);
}

.synced-filter.is-active {
  box-shadow: var(--shadow-soft);
}

.synced-filter:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

.synced-filter:active { transform: translateY(1px); }

.synced-task-list {
  display: grid;
}

.synced-task-record {
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.synced-task-record:last-child { border-bottom: 0; }

.synced-task-record:hover {
  background: var(--color-sync-wash);
  transform: translateX(2px);
}

.synced-task-main {
  min-width: 0;
  align-items: flex-start;
  gap: 0.85rem;
}

.synced-record-number {
  flex: 0 0 auto;
  padding-top: 0.1rem;
  color: var(--color-sync-signal);
  font: 700 var(--text-xs)/1.2 var(--font-display);
  letter-spacing: 0.08em;
}

.synced-task-copy {
  min-width: 0;
}

.synced-task-copy h4 {
  color: var(--color-ink-dark);
  font: 700 var(--text-sm)/1.4 var(--font-display);
  overflow-wrap: anywhere;
}

.synced-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: 0.35rem;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.synced-task-meta span + span::before {
  content: "·";
  margin-right: 0.9rem;
  color: var(--color-sync-line);
}

.synced-task-state {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.synced-status,
.synced-kpi-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-pill);
  font: 700 var(--text-xs)/1.2 var(--font-display);
  white-space: nowrap;
}

.synced-status.is-reviewed {
  background: var(--color-sync-reviewed-soft);
  color: var(--color-success);
}

.synced-status.is-review {
  background: var(--color-sync-review-soft);
  color: var(--color-accent-gold-dim);
}

.synced-kpi-state {
  background: var(--color-home-neutral-soft);
  color: var(--color-ink-muted);
  font-weight: 600;
}

.synced-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.synced-empty-mark {
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid var(--color-sync-line);
  border-radius: 50%;
  color: var(--color-sync-signal);
  font: 700 1.3rem/1 var(--font-display);
}

.synced-empty-state strong {
  color: var(--color-ink-dark);
  font: 700 var(--text-base)/1.3 var(--font-display);
}

.synced-empty-state p {
  max-width: 28rem;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

@media (max-width: 1100px) {
  .synced-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .synced-source-card { min-width: 0; }
}

@media (max-width: 760px) {
  .synced-tasks-workspace { padding: 1rem; border-radius: var(--radius-md); }
  .synced-workspace-topline { align-items: stretch; flex-direction: column; }
  .synced-source-card { width: 100%; }
  .synced-list-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .synced-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .synced-stat-card { min-height: 6.5rem; }
.synced-list-toolbar p {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.synced-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.synced-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-muted);
  font: 650 var(--text-xs)/1.2 var(--font-display);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.synced-filter b {
  display: inline-grid;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.25rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-home-neutral-soft);
  color: var(--color-ink-dark);
  font-size: 0.68rem;
}

.synced-filter:hover,
.synced-filter.is-active {
  border-color: var(--color-sync-line);
  background: var(--color-surface);
  color: var(--color-ink-dark);
}

.synced-filter.is-active {
  box-shadow: var(--shadow-soft);
}

.synced-filter:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

.synced-filter:active { transform: translateY(1px); }

.synced-task-list {
  display: grid;
}

.synced-task-record {
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.synced-task-record:last-child { border-bottom: 0; }

.synced-task-record:hover {
  background: var(--color-sync-wash);
  transform: translateX(2px);
}

.synced-task-main {
  min-width: 0;
  align-items: flex-start;
  gap: 0.85rem;
}

.synced-record-number {
  flex: 0 0 auto;
  padding-top: 0.1rem;
  color: var(--color-sync-signal);
  font: 700 var(--text-xs)/1.2 var(--font-display);
  letter-spacing: 0.08em;
}

.synced-task-copy {
  min-width: 0;
}

.synced-task-copy h4 {
  color: var(--color-ink-dark);
  font: 700 var(--text-sm)/1.4 var(--font-display);
  overflow-wrap: anywhere;
}

.synced-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: 0.35rem;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.synced-task-meta span + span::before {
  content: "·";
  margin-right: 0.9rem;
  color: var(--color-sync-line);
}

.synced-task-state {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.synced-status,
.synced-kpi-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-pill);
  font: 700 var(--text-xs)/1.2 var(--font-display);
  white-space: nowrap;
}

.synced-status.is-reviewed {
  background: var(--color-sync-reviewed-soft);
  color: var(--color-success);
}

.synced-status.is-review {
  background: var(--color-sync-review-soft);
  color: var(--color-accent-gold-dim);
}

.synced-kpi-state {
  background: var(--color-home-neutral-soft);
  color: var(--color-ink-muted);
  font-weight: 600;
}

.synced-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.synced-empty-mark {
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid var(--color-sync-line);
  border-radius: 50%;
  color: var(--color-sync-signal);
  font: 700 1.3rem/1 var(--font-display);
}

.synced-empty-state strong {
  color: var(--color-ink-dark);
  font: 700 var(--text-base)/1.3 var(--font-display);
}

.synced-empty-state p {
  max-width: 28rem;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

@media (max-width: 1100px) {
  .synced-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .synced-source-card { min-width: 0; }
}

@media (max-width: 760px) {
  .synced-tasks-workspace { padding: 1rem; border-radius: var(--radius-md); }
  .synced-workspace-topline { align-items: stretch; flex-direction: column; }
  .synced-source-card { width: 100%; }
  .synced-list-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .synced-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .synced-stat-card { min-height: 6.5rem; }
  .synced-list-header { align-items: flex-start; flex-direction: column; }
  .synced-task-record { align-items: flex-start; flex-direction: column; }
  .synced-task-state { justify-content: flex-start; padding-left: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .synced-task-record,
  .synced-filter { transition: none; }
}

}

/* Hallmark · component: add-task modal · genre: modern-minimal · theme: Atelier
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass · reference: compact task-entry sheet
 */
.task-create-modal {
  width: min(100%, 50rem);
  max-height: calc(100vh - var(--space-4));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.task-create-modal .modal-header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 0;
}

.task-create-modal .modal-header-desc h3 {
  font-size: var(--text-2xl);
  letter-spacing: -0.025em;
}

.task-create-modal .modal-header-desc p {
  display: none;
}

.task-create-modal .modal-close {
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
}

.task-create-modal .modal-body {
  padding: 0 var(--space-6) var(--space-5);
  max-height: min(66vh, 38rem);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.task-create-modal .modal-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.task-create-modal .modal-section > .form-row {
  display: contents;
}

.task-create-modal .modal-section > .input-group,
.task-create-modal .modal-section > .task-check-row,
.task-create-modal .modal-section > .task-permission-hint,
.task-create-modal .task-definition-row .input-group,
.task-create-modal .task-people-row .input-group,
.task-create-modal .task-participation-row .input-group,
.task-create-modal .task-delivery-row .input-group,
.task-create-modal .task-conversion-row .input-group {
  min-width: 0;
}

.task-create-modal .task-definition-row .input-group:first-child {
  grid-column: 1 / -1;
  order: 2;
}

.task-create-modal .modal-section > .input-group {
  grid-column: 1 / -1;
  order: 3;
}

.task-create-modal .task-definition-row .input-group:last-child {
  display: none;
}

.task-create-modal .task-people-row .input-group {
  order: 4;
}

.task-create-modal .task-participation-row .input-group:first-child,
.task-create-modal .task-delivery-row .input-group:last-child {
  order: 6;
}

.task-create-modal .task-participation-row .input-group:last-child,
.task-create-modal .task-delivery-row .input-group:first-child {
  order: 1;
}

.task-create-modal .task-conversion-row .input-group {
  order: 7;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-home-neutral-soft);
}

.task-create-modal .task-conversion-row .input-group label {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-ink-dark);
}

.task-create-modal .task-conversion-row input {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent-gold-dim);
  font-size: var(--text-xl);
  font-weight: 800;
  text-align: right;
}

.task-create-modal .task-check-row:has(#task-input-cooperate) {
  grid-column: 1 / -1;
  order: 5;
}

.task-create-modal .task-check-row:has(#task-input-calculated) {
  grid-column: 1 / -1;
  order: 8;
  padding-top: var(--space-2);
}

.task-create-modal .task-permission-hint {
  grid-column: 1 / -1;
  order: 9;
}

.task-create-modal .input-group label {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.task-create-modal .input-group > input:not([type="checkbox"]),
.task-create-modal .input-group > select,
.task-create-modal .input-group > textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: var(--text-base)/1.35 var(--font-body);
}

.task-create-modal .input-group > input:not([type="checkbox"]),
.task-create-modal .input-group > select {
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
}

.task-create-modal .input-group > textarea {
  min-height: 6.5rem;
  padding: var(--space-4);
  resize: vertical;
}

.task-create-modal .input-group > input:not([type="checkbox"]):focus,
.task-create-modal .input-group > select:focus,
.task-create-modal .input-group > textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.task-create-modal .modal-footer {
  justify-content: center;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 0;
}

.task-create-modal .modal-footer .btn-outline,
.task-create-modal .modal-footer .btn-primary {
  min-width: 7rem;
  border-radius: var(--radius-pill);
}

.task-create-modal .modal-footer .btn-primary {
  min-width: 8rem;
}

@media (max-width: 640px) {
  .task-create-modal .modal-header,
  .task-create-modal .modal-body,
  .task-create-modal .modal-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .task-create-modal .modal-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-create-modal .task-definition-row .input-group:first-child,
  .task-create-modal .task-check-row:has(#task-input-cooperate),
  .task-create-modal .task-check-row:has(#task-input-calculated),
  .task-create-modal .task-permission-hint {
    grid-column: 1;
  }

  .task-create-modal .task-conversion-row .input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Exact task-entry rhythm from the supplied reference. */
.task-create-modal .modal-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.task-create-modal .modal-section > .form-row {
  display: contents;
}

.task-create-modal .task-date-row .input-group {
  order: 1;
}

.task-create-modal .task-definition-field {
  grid-column: 1 / -1;
  order: 2;
}

.task-create-modal .task-definition-field {
  position: relative;
}

.task-combobox {
  position: relative;
}

.task-combobox-control {
  position: relative;
}

.task-combobox-control > input {
  padding-right: 3rem !important;
}

.task-combobox-toggle {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.task-combobox-toggle:hover,
.task-combobox-toggle:focus-visible {
  background: var(--color-search-selection);
  color: var(--color-accent-gold-dim);
  outline: none;
}

.task-combobox-toggle svg {
  transition: transform var(--dur-fast) var(--ease-out);
}

.task-combobox.is-open .task-combobox-toggle svg {
  transform: rotate(180deg);
}

.task-combobox-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--space-2));
  right: 0;
  left: 0;
  visibility: hidden;
  overflow-y: auto;
  max-height: min(20rem, 42vh);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper-champagne);
  box-shadow: var(--shadow-search-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}

.task-combobox.is-open .task-combobox-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.task-combobox-dropdown [role="option"] {
  display: flex;
  width: 100%;
  min-height: 2.5rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-dark);
  font: 500 var(--text-sm)/1.25 var(--font-body);
  text-align: left;
  cursor: pointer;
}

.task-combobox-dropdown [role="option"]:hover,
.task-combobox-dropdown [role="option"]:focus-visible {
  background: var(--color-search-selection);
  outline: none;
}

.task-combobox-dropdown [role="option"] strong {
  flex: 0 0 5.5rem;
  color: var(--color-accent-gold-dim);
  font-size: var(--text-xs);
}

.task-combobox-dropdown [role="option"] span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-combobox-empty {
  padding: var(--space-4) var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.task-create-modal .task-content-field {
  position: relative;
  grid-column: 1 / -1;
  order: 3;
}

.task-create-modal .task-measure-row .input-group {
  order: 4;
}

.task-create-modal .task-conversion-row .input-group {
  order: 5;
}

.task-create-modal.is-assignment-mode .task-advanced-fields,
.task-create-modal .task-advanced-fields {
  display: none;
}

.task-create-modal.is-assignment-mode {
  width: min(100%, 72rem);
}

.task-create-modal.is-assignment-mode .task-advanced-fields {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 6;
  flex-direction: column;
  align-self: stretch;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-task-blue-wash);
}

.task-create-modal.is-assignment-mode .task-advanced-fields::before {
  content: "THÔNG TIN NGƯỜI THỰC HIỆN";
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-task-blue);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.task-create-modal.is-assignment-mode .task-people-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.task-create-modal.is-assignment-mode .task-people-row .input-group:first-child,
.task-create-modal.is-assignment-mode #task-input-status,
.task-create-modal.is-assignment-mode .task-check-row:has(#task-input-calculated),
.task-create-modal.is-assignment-mode .task-permission-hint {
  display: none;
}

.task-create-modal.is-assignment-mode .task-check-row:has(#task-input-cooperate) {
  display: flex;
  grid-column: auto;
  order: initial;
  margin: 0;
  padding: 0;
}

.task-create-modal {
  width: min(100%, 72rem);
}

.task-create-modal.is-assignment-mode {
  width: min(calc(100vw - 4rem), 116rem);
  max-width: none;
}

.task-create-modal .modal-body {
  padding: 0 var(--space-6) var(--space-5);
  max-height: min(68vh, 35rem);
}

.task-assignment-layout {
  display: grid;
  grid-template-columns: minmax(22rem, 0.84fr) minmax(30rem, 1.16fr);
  gap: var(--space-4);
}

.task-assignment-panel {
  overflow: hidden;
  border: 1px solid #dbe4ff;
  border-radius: var(--radius-md);
  background: #f8faff;
}

.task-assignment-panel-heading {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  border-bottom: 1px solid #dbe4ff;
  background: #edf2ff;
  color: var(--color-task-blue);
  font-size: 0.72rem;
  font-weight: 800;
}

.task-assignment-panel-body {
  padding: var(--space-4);
}

.task-assignment-info-panel .task-assignment-panel-body {
  display: grid;
  gap: var(--space-3);
}

.task-assignment-info-panel .task-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.task-assignment-info-panel .input-group {
  min-width: 0;
}

.task-assignment-info-panel .input-group label,
.task-assignment-participant-row .input-group label {
  display: block;
  margin: 0 0 0.28rem;
  color: var(--color-ink-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.task-assignment-info-panel input,
.task-assignment-info-panel textarea,
.task-assignment-info-panel select,
.task-assignment-participant-row input,
.task-assignment-participant-row select {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: inherit;
}

.task-assignment-info-panel input,
.task-assignment-info-panel select,
.task-assignment-participant-row input,
.task-assignment-participant-row select {
  padding: 0.55rem 0.7rem;
}

.task-assignment-info-panel textarea {
  min-height: 5.6rem;
  padding: 0.7rem;
  resize: vertical;
}

.task-definition-with-factor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  gap: var(--space-3);
  align-items: end;
}

.task-assignment-factor {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  min-height: 2.45rem;
  padding-bottom: 0.18rem;
}

.task-assignment-factor span {
  color: var(--color-ink-muted);
  font-size: 0.75rem;
}

.task-assignment-factor input {
  width: 3.5rem;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-task-green-ink);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: right;
}

.task-assignment-quantity .number-stepper,
.task-assignment-percent-field .number-stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.8rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.task-assignment-quantity .number-stepper input,
.task-assignment-percent-field .number-stepper input {
  border: 0;
  border-radius: 0;
}

.task-assignment-quantity .number-stepper-actions,
.task-assignment-percent-field .number-stepper-actions {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--color-border);
}

.task-assignment-quantity .number-stepper-actions button,
.task-assignment-percent-field .number-stepper-actions button {
  padding: 0;
  border: 0;
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: 700 1rem/1 sans-serif;
  cursor: pointer;
}

.task-assignment-quantity .number-stepper-actions button + button,
.task-assignment-percent-field .number-stepper-actions button + button {
  border-top: 1px solid var(--color-border);
}

.task-content-field {
  position: relative;
}

.task-content-field .task-character-count {
  position: absolute;
  right: 0.65rem;
  bottom: 0.45rem;
  color: var(--color-ink-muted);
  font-size: 0.72rem;
}

.task-assignment-people-heading {
  justify-content: space-between;
  gap: var(--space-3);
}

.task-assignment-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.78rem;
  font-weight: 600;
}

.task-assignment-panel-actions .task-check-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-task-blue);
  white-space: nowrap;
}

.task-assignment-panel-actions input {
  margin: 0;
}

#btn-add-task-participant {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-task-blue);
  font: inherit;
  cursor: pointer;
}

.task-assignment-participants {
  display: grid;
  gap: var(--space-3);
}

.task-assignment-participant-row {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) 8.5rem 5.6rem 1.8rem;
  align-items: end;
  gap: var(--space-3);
}

.task-assignment-owner-row {
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-sm);
  background: #fff8e7;
}

.task-assignment-owner-name {
  display: flex;
  min-height: 2.45rem;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-ink-dark);
  font-size: 0.78rem;
  font-weight: 600;
}

.task-assignment-owner-avatar {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  background: #fff0c7;
  color: var(--color-accent-gold-dim);
  font-size: 0.68rem;
  font-weight: 800;
}

.task-assignment-converted {
  display: grid;
  align-content: end;
  min-height: 2.45rem;
  padding-bottom: 0.23rem;
}

.task-assignment-converted span {
  color: var(--color-ink-muted);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.task-assignment-converted strong {
  color: var(--color-task-green-ink);
  font-size: 1rem;
  text-align: center;
}

.task-assignment-remove {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 2.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-task-blue);
  cursor: pointer;
}

.task-assignment-remove svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-create-modal .task-advanced-fields {
  display: none;
}

.task-create-modal.is-assignment-mode .task-advanced-fields {
  display: none;
}

.task-create-modal.is-assignment-mode .modal-footer {
  padding-top: var(--space-5);
}

.task-create-modal.is-assignment-mode #btn-cancel-task {
  border: 0;
  background: #edf2ff;
  color: var(--color-task-blue);
}

@media (max-width: 900px) {
  .task-create-modal.is-assignment-mode {
    width: min(calc(100vw - 2rem), 52rem);
    max-width: none;
  }

  .task-assignment-layout {
    grid-template-columns: 1fr;
  }
}

/* Hallmark · component: task-status-list · genre: editorial operations · theme: Atelier
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass — status colour is paired with a tinted surface and a text label
 */
.task-status-picker {
  --task-status-tone: var(--color-ink-muted);
  --task-status-tint: var(--color-paper);
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 10.25rem;
  max-width: 100%;
}

.task-status-picker.is-not-started,
.task-status-picker.is-returned {
  --task-status-tone: var(--color-danger);
  --task-status-tint: var(--color-danger-100);
}

.task-status-picker.is-in-progress,
.task-status-picker.is-awaiting-review {
  --task-status-tone: var(--color-accent-700);
  --task-status-tint: var(--color-accent-100);
}

.task-status-picker.is-reviewed {
  --task-status-tone: var(--color-success);
  --task-status-tint: var(--color-success-100);
}

.task-status-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in oklab, var(--task-status-tone) 42%, var(--color-border));
  border-radius: var(--radius-pill);
  outline: 2px solid transparent;
  outline-offset: 2px;
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .task-status-trigger:hover {
    background: var(--task-status-tint);
  }
}

.task-status-trigger:focus-visible,
.task-status-option:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.task-status-trigger:active {
  transform: translateY(1px);
}

.task-status-marker,
.task-status-option-marker {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--task-status-tone);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--task-status-tone) 14%, transparent);
}

.task-status-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-status-chevron {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 1.5px solid var(--color-ink-muted);
  border-bottom: 1.5px solid var(--color-ink-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.task-status-picker.is-open .task-status-chevron {
  transform: translateY(2px) rotate(225deg);
}

.task-status-menu {
  position: absolute;
  z-index: 200;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  gap: 0.2rem;
  width: max-content;
  min-width: 100%;
  max-width: min(16rem, calc(100vw - 2rem));
  padding: 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.35rem);
  transform-origin: top right;
  transition: transform var(--dur-normal) var(--ease-out), opacity var(--dur-normal) var(--ease-out);
}

.task-status-picker.is-flipped .task-status-menu {
  top: auto;
  bottom: calc(100% + 0.45rem);
  transform: translateY(0.35rem);
  transform-origin: bottom right;
}

.task-status-picker.is-open {
  z-index: 220;
}

.task-status-picker.is-open .task-status-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.task-status-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--color-ink-dark);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.task-status-option.is-not-started,
.task-status-option.is-returned {
  --task-status-tone: var(--color-danger);
  --task-status-tint: var(--color-danger-100);
}

.task-status-option.is-in-progress,
.task-status-option.is-awaiting-review {
  --task-status-tone: var(--color-accent-700);
  --task-status-tint: var(--color-accent-100);
}

.task-status-option.is-reviewed {
  --task-status-tone: var(--color-success);
  --task-status-tint: var(--color-success-100);
}

@media (hover: hover) {
  .task-status-option:hover {
    background: var(--task-status-tint);
    color: var(--task-status-tone);
  }
}

.task-status-option.is-selected {
  background: var(--task-status-tint);
  color: var(--task-status-tone);
  font-weight: 750;
}

.task-status-option-check {
  margin-left: auto;
  color: var(--task-status-tone);
  font-size: 1rem;
  line-height: 1;
}

.task-status-trigger[disabled],
.task-status-option[disabled],
.task-status-picker[aria-disabled="true"] .task-status-trigger {
  opacity: 0.55;
  cursor: not-allowed;
}

.task-status-picker[data-state="loading"] .task-status-trigger {
  cursor: wait;
}

.task-status-picker[data-state="loading"] .task-status-trigger::after {
  width: 0.8rem;
  height: 0.8rem;
  margin-left: auto;
  border: 2px solid color-mix(in oklab, var(--task-status-tone) 24%, transparent);
  border-top-color: var(--task-status-tone);
  border-radius: 50%;
  content: "";
  animation: task-status-spin 0.9s linear infinite;
}

.task-status-picker[data-state="loading"] .task-status-chevron {
  display: none;
}

.task-status-picker[aria-invalid="true"] .task-status-trigger {
  border-color: var(--color-danger);
  background: var(--color-danger-100);
}

.task-status-picker[data-state="success"] .task-status-trigger {
  border-color: var(--color-success);
  background: var(--color-success-100);
}

@keyframes task-status-spin {
  to { transform: rotate(360deg); }
}

#view-dashboard .tasks-table tbody tr:has(.task-status-picker.is-open) {
  position: relative;
  z-index: 120;
}

#view-dashboard .tasks-table tbody tr:has(.task-status-picker.is-open) td {
  position: relative;
  z-index: 121;
  overflow: visible;
}

@media (max-width: 640px) {
  .task-status-picker {
    min-width: 9.25rem;
  }

  .task-status-menu {
    right: auto;
    left: 0;
    transform-origin: top left;
  }

  .task-status-picker.is-flipped .task-status-menu {
    transform-origin: bottom left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-status-trigger,
  .task-status-chevron,
  .task-status-menu {
    transition-duration: 0.01ms;
  }

  .task-status-picker[data-state="loading"] .task-status-trigger::after {
    animation-duration: 0.01ms;
  }
}

@media (max-width: 620px) {
  .task-create-modal.is-assignment-mode {
    width: calc(100vw - 1rem);
  }

  .task-create-modal .modal-body {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .task-definition-with-factor,
  .task-assignment-info-panel .task-date-row,
  .task-assignment-participant-row {
    grid-template-columns: 1fr;
  }

  .task-assignment-converted,
  .task-assignment-remove {
    min-height: auto;
  }
}

.task-create-modal .task-character-count {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.task-create-modal .number-stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.task-create-modal .number-stepper input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-ink-dark);
  font: var(--text-base)/1.35 var(--font-body);
}

.task-create-modal .number-stepper:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.task-create-modal .number-stepper-actions {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--color-border);
}

.task-create-modal .number-stepper-actions button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-task-blue-dark);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}

.task-create-modal .number-stepper-actions button + button {
  border-top: 1px solid var(--color-border);
}

.task-create-modal .number-stepper-actions button:hover {
  background: var(--color-task-blue-soft);
}

.task-create-modal .task-conversion-row .input-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 3.5rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-task-blue-wash);
}

.task-create-modal .task-conversion-row .input-group label {
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-ink-dark);
}

.task-create-modal .task-conversion-row .input-group > input {
  width: 6.5rem;
  min-width: 6.5rem;
  box-sizing: border-box;
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-task-green-ink);
  font-size: var(--text-xl);
  font-weight: 800;
  text-align: right;
}

.task-child-modal {
  width: min(calc(100vw - 4rem), 116rem);
  max-width: none;
  max-height: calc(100vh - var(--space-4));
}

.task-child-modal .modal-body {
  max-height: min(76vh, 48rem);
  overflow-y: auto;
}

.task-child-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(28rem, 1.15fr);
  gap: var(--space-4);
}

.task-child-panel {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-task-blue-wash);
}

.task-child-panel h4,
.task-child-panel-title {
  margin: 0;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-task-blue-dark);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.task-child-parent-panel > h4,
.task-child-panel-title {
  background: var(--color-task-blue-soft);
}

.task-child-parent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4);
}

.task-child-parent-grid span,
.task-child-parent-details dt,
.task-child-points span,
.task-child-converted span {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.task-child-parent-grid strong,
.task-child-parent-details dd {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--color-ink-dark);
  font-size: var(--text-sm);
  font-weight: 600;
}

.task-child-parent-details {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
}

.task-child-parent-details dd {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.task-child-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px dashed var(--color-border);
}

.task-child-points strong,
.task-child-converted strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-task-green-ink);
  font-size: var(--text-lg);
  font-weight: 800;
}

.task-child-entry-panel {
  padding-bottom: var(--space-4);
}

.task-child-entry-panel > .input-group,
.task-child-date-row,
.task-child-participant-heading,
.task-child-participants,
.task-child-entry-panel > .task-permission-hint {
  margin-right: var(--space-4);
  margin-left: var(--space-4);
}

.task-child-entry-panel > .input-group {
  position: relative;
  margin-top: var(--space-4);
}

.task-child-entry-panel textarea {
  width: 100%;
  min-height: 6.5rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: var(--text-base)/1.35 var(--font-body);
  resize: vertical;
}

.task-child-character-count {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.task-child-date-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.task-child-date-row input,
.task-child-participant-row select,
.task-child-percent-control input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: var(--text-sm)/1.2 var(--font-body);
}

.task-child-participant-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.task-child-participant-heading h4 {
  padding: 0;
  border: 0;
  background: transparent;
}

.task-child-add {
  border: 0;
  background: transparent;
  color: var(--color-task-blue-dark);
  font-weight: 700;
  cursor: pointer;
}

.task-child-participants {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.task-child-participant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem 5rem 2rem;
  gap: var(--space-3);
  align-items: end;
}

.task-child-participant-row .input-group label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.task-child-percent-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.task-child-percent-control input {
  min-width: 0;
  border: 0;
  border-radius: 0;
}

.task-child-percent-actions {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--color-border);
}

.task-child-percent-actions button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-task-blue-dark);
  cursor: pointer;
}

.task-child-percent-actions button + button {
  border-top: 1px solid var(--color-border);
}

.task-child-converted strong {
  font-size: var(--text-base);
}

.task-child-remove {
  width: 2rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--color-task-blue-dark);
  cursor: pointer;
}

.task-child-entry-panel > .task-permission-hint.is-error {
  color: var(--color-danger-600);
}

@media (max-width: 900px) {
  .task-child-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .task-child-parent-grid,
  .task-child-points,
  .task-child-date-row {
    grid-template-columns: 1fr;
  }

  .task-child-participant-row {
    grid-template-columns: minmax(0, 1fr) 6.5rem 4.5rem 2rem;
    gap: var(--space-2);
  }
}

.task-create-modal .modal-footer .btn-outline {
  background: var(--color-task-blue-soft);
  border-color: transparent;
  color: var(--color-task-blue);
}

.task-create-modal .modal-footer .btn-primary {
  background: var(--color-task-blue);
  border-color: var(--color-task-blue);
  color: var(--color-ink-light);
}

@media (max-width: 640px) {
  .task-create-modal .modal-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-create-modal .task-date-row .input-group,
  .task-create-modal .task-definition-field,
  .task-create-modal .task-content-field {
    grid-column: 1;
  }

  .task-create-modal .task-conversion-row .input-group {
    display: grid;
  }

  .task-create-modal .task-conversion-row .input-group label {
    white-space: normal;
  }
}

.personal-tasks-view .summary-row.highlight {
  color: var(--color-accent-gold-dim);
}

.synced-tasks-workspace {
  background:
    radial-gradient(circle at 100% 0%, var(--color-home-accent-soft) 0 11rem, transparent 11.2rem),
    linear-gradient(135deg, var(--color-surface) 0%, var(--color-home-wash) 100%);
}

.synced-stat-card.is-lead {
  border-left-color: var(--color-accent-gold);
  background: var(--color-home-accent-soft);
}

.synced-source-icon {
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold-dim);
}

.synced-source-status {
  background: var(--color-home-success-soft);
}

.synced-record-number {
  color: var(--color-accent-gold-dim);
}

.synced-status.is-review {
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold-dim);
}

/* Hallmark · typography redesign · reference DNA: sans display, bold roman headings, compact tracking
 * system: Inter display + Inter body · Cormorant compatibility role now resolves to the sans display token
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-style: normal;
}

/* Hallmark · redesign: viewport-fit dashboard · Stat-Led compact control room
 * system: Atelier · audience: cán bộ quản lý công việc · use: đọc toàn cảnh trong một khung nhìn
 * responsive: desktop canvas-fit, mobile preserves readable stacking
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */
@media (min-width: 901px) {
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard {
    height: calc(100vh - 3px);
    min-height: 0;
    overflow: clip;
  }

  body:has(#view-home-dashboard:not(.hide)) {
    overflow-y: hidden;
  }

  body:has(#view-home-dashboard:not(.hide)) .app-header {
    min-height: 76px;
    padding-inline: clamp(1.25rem, 3vw, 3rem);
  }

  body:has(#view-home-dashboard:not(.hide)) .header-logo-lockup {
    gap: 0.9rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .header-logo-seal {
    width: 3.25rem;
    height: 3.25rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .header-logo-kicker {
    min-height: 3.25rem;
    font-size: clamp(0.7rem, 0.84vw, 0.84rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.1;
  }

  body:has(#view-home-dashboard:not(.hide)) .header-logo-wordmark {
    font-size: 1.1rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .navbar-menu {
    gap: 1.2rem;
    margin-left: 1.75rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .navbar-actions .header-user-trigger {
    min-height: 36px;
  }

  body:has(#view-home-dashboard:not(.hide)) .dashboard-main {
    min-height: 0;
    overflow: visible;
    padding: clamp(0.65rem, 1.25vh, 1rem) clamp(1rem, 2.5vw, 2.5rem);
  }

  body:has(#view-home-dashboard:not(.hide)) .dashboard-grid {
    min-height: 0;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-view {
    padding: clamp(0.65rem, 1vw, 0.9rem);
    padding-bottom: 0.35rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-topline {
    gap: 1.25rem;
    padding-bottom: 0.55rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-heading h1 {
    margin-top: 0.3rem;
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-heading p {
    display: none;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-context-banner {
    min-height: 2.3rem;
    margin-bottom: 0.45rem;
    padding: 0.35rem 0.6rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-context-icon {
    width: 1.55rem;
    height: 1.55rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-card {
    min-height: 0;
    padding: 0.6rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-card-index {
    margin-bottom: 0.35rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-card-header h2 {
    font-size: 0.94rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-total-number {
    margin: 0.62rem 0 0.5rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-total-number strong {
    font-size: clamp(2.25rem, 4vw, 3.2rem);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-status-list {
    gap: 0.35rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-status-row {
    min-height: 2rem;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-status-label,
  body:has(#view-home-dashboard:not(.hide)) .home-total-number span,
  body:has(#view-home-dashboard:not(.hide)) .home-card-footer-stats {
    font-size: var(--text-xs);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-status-row > strong {
    font-size: 1rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-detail-button {
    padding: 0.18rem 0.35rem;
    font-size: 0.68rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-card-footer-stats {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-month-summary {
    justify-content: flex-start;
    gap: 0.8rem;
    min-height: 6.2rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-progress-ring {
    width: clamp(5.6rem, 7.5vw, 6.5rem);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-month-copy strong {
    font-size: 1.55rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-month-copy p {
    margin-top: 0.45rem;
    font-size: var(--text-xs);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-due-list {
    min-height: 6.2rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-empty-state {
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: var(--text-xs);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-management-card {
    margin-top: 0.45rem;
    padding: 0.55rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-management-header {
    padding-bottom: 0.45rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-row {
    gap: 0.25rem;
    padding: 0.35rem 0;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-copy strong,
  body:has(#view-home-dashboard:not(.hide)) .home-metric-copy span {
    font-size: var(--text-xs);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-meter {
    height: 0.36rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-legend {
    gap: 0.45rem 0.8rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-legend-item {
    font-size: 0.68rem;
  }
}

/* Hallmark · component: circular-progress-indicator · genre: modern-minimal · theme: Atelier
 * states: default · loading · success · reduced-motion
 * motion: one-shot arc draw · synced counter · duration 2s · contrast: pass (46–50)
 */
.home-progress-ring {
  position: relative;
  isolation: isolate;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.home-progress-ring::before,
.home-progress-ring::after {
  display: none;
}

.home-progress-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: center;
  pointer-events: none;
}

.home-progress-ring-track,
.home-progress-ring-progress {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.home-progress-ring-track {
  stroke: var(--color-home-neutral-soft);
  stroke-width: 8;
}

.home-progress-ring-progress {
  stroke: var(--color-accent-gold);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-progress, 0) 100;
  stroke-dashoffset: 0;
  transition: stroke-dasharray var(--dur-page) var(--ease-out);
}

.home-progress-ring-inner {
  position: relative;
  z-index: 2;
  width: calc(100% - 1.25rem);
  height: calc(100% - 1.25rem);
  place-content: center;
  background: var(--color-surface);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-progress-ring-progress {
    transition: none;
  }
}

/* Hallmark · genre: modern-minimal · macrostructure: Workbench
 * theme: Atelier · nav: N5 workspace rail · footer: none (internal application)
 * audience: cán bộ và quản lý KPI · use: đọc nhanh, định vị và xử lý công việc
 * enrichment: none · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
@media (min-width: 901px) {
  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-view {
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 0;
    padding: 0;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
    background: var(--color-paper-champagne);
    box-shadow: var(--shadow-soft);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-view::before {
    right: -17rem;
    bottom: -23rem;
    opacity: 0.45;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-topline {
    align-items: center;
    padding: 1.05rem 1.25rem 0.8rem;
    border-bottom: 1px solid var(--color-border);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-heading h1 {
    margin-top: 0.25rem;
    color: var(--color-ink-dark);
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    letter-spacing: -0.045em;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-heading p {
    display: block;
    max-width: 35rem;
    margin-top: 0.35rem;
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-period-control {
    min-width: 9.5rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-period-label {
    color: var(--color-ink-muted);
    font-size: 0.62rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-period-select-wrap select {
    padding: 0.55rem 1.8rem 0.55rem 0.7rem;
    border-color: var(--color-border-dark);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-context-banner {
    min-height: 2.55rem;
    margin: 0.75rem 1rem 0.65rem;
    padding: 0.42rem 0.65rem;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    background: var(--color-paper-obsidian);
    color: var(--color-ink-light);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-context-copy {
    font-size: var(--text-xs);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-context-copy strong,
  body:has(#view-home-dashboard:not(.hide)) .home-context-period {
    color: var(--color-accent-gold);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-context-icon {
    width: 1.7rem;
    height: 1.7rem;
    background: var(--color-accent-gold-dim);
    color: var(--color-accent-gold);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.65rem;
    margin-inline: 1rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-card {
    min-height: 0;
    padding: 0.85rem;
    border-radius: var(--radius-md);
    box-shadow: none;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    border-color: var(--color-border-dark);
    background: var(--color-paper-obsidian);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-card-index,
  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-card-header h2,
  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-total-number span,
  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-card-footer-stats {
    color: var(--color-ink-light);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-card-index {
    color: var(--color-accent-gold-hover);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-text-action {
    color: var(--color-accent-gold);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-text-action:hover,
  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-detail-button:hover {
    color: var(--color-paper-champagne);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-total-number {
    margin: 0.8rem 0 0.65rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-total-number strong {
    color: var(--color-accent-gold);
    font-size: clamp(2.6rem, 4vw, 3.7rem);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-card-footer-stats {
    color: var(--color-ink-light);
    border-top-color: var(--color-border-dark);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card .home-card-footer-stats strong {
    color: var(--color-accent-gold);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-month-card {
    background: var(--color-home-wash);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-month-summary {
    justify-content: flex-start;
    min-height: 8.8rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-progress-ring {
    width: clamp(6.4rem, 8vw, 7.3rem);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-month-copy strong {
    color: var(--color-ink-dark);
    font-size: 1.75rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-due-card {
    border-color: var(--color-accent-gold-glow);
    background: var(--color-surface);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-due-card .home-card-index {
    color: var(--color-accent-gold-dim);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-due-list {
    min-height: 8.8rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-management-card {
    margin: 0.65rem 1rem 0.9rem;
    padding: 0.85rem;
    border-color: var(--color-border-dark);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: none;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-management-header {
    align-items: center;
    padding-bottom: 0.55rem;
    border-bottom-color: var(--color-border-dark);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-management-header .home-card-index {
    color: var(--color-accent-gold-dim);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-row,
  body:has(#view-home-dashboard:not(.hide)) .home-metric-row:last-child {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-home-wash);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-copy {
    align-items: flex-start;
    gap: 0.45rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-copy strong {
    min-height: 2.1em;
    color: var(--color-ink-dark);
    font-size: var(--text-xs);
    line-height: 1.25;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-copy span {
    color: var(--color-accent-gold-dim);
    font-size: var(--text-sm);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-meter {
    height: 0.4rem;
    margin-top: 0.15rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-legend {
    gap: 0.35rem 0.7rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-legend-item {
    font-size: 0.66rem;
  }
}

@media (max-width: 900px) {
  body:has(#view-home-dashboard:not(.hide)) #view-dashboard {
    height: auto;
    min-height: calc(100svh - 3px);
    overflow: visible;
  }

  body:has(#view-home-dashboard:not(.hide)) {
    overflow-y: auto;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-view {
    padding: 0.85rem;
    border-radius: var(--radius-md);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-topline {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-heading h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-heading p {
    max-width: 34rem;
    margin-top: 0.5rem;
    font-size: var(--text-sm);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-period-control {
    width: 100%;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-context-banner {
    align-items: flex-start;
    flex-direction: column;
    margin: 0.75rem 0 0.85rem;
    background: var(--color-paper-obsidian);
    color: var(--color-ink-light);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-inline: 0;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-dashboard-card,
  body:has(#view-home-dashboard:not(.hide)) .home-management-card {
    padding: 1rem;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-year-card {
    min-height: 0;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-management-card {
    margin: 0.75rem 0 0;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-row,
  body:has(#view-home-dashboard:not(.hide)) .home-metric-row:last-child {
    padding: 0.85rem 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
  }

  body:has(#view-home-dashboard:not(.hide)) .home-metric-row:last-child {
    border-bottom: 0;
    padding-bottom: 0.2rem;
  }
}

/* Hallmark · system background · reference DNA: Đông Sơn bronze drum
 * motif: concentric rings · central star · radial symmetry · restrained ink wash
 * treatment: CSS-native watermark, no source image/checkerboard shipped
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */
#view-dashboard {
  position: relative;
  isolation: isolate;
  background: var(--color-drum-surface);
}

#view-dashboard::before,
#view-dashboard::after {
  position: fixed;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(72vw, 62rem);
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#view-dashboard::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      var(--color-drum-ink-strong) 0 1.1%,
      transparent 1.2% 8.5%,
      var(--color-drum-ink) 8.6% 8.9%,
      transparent 9% 19.5%,
      var(--color-drum-ink) 19.6% 19.9%,
      transparent 20% 29.5%,
      var(--color-drum-ink) 29.6% 29.9%,
      transparent 30% 40.5%,
      var(--color-drum-ink) 40.6% 40.9%,
      transparent 41% 48.5%,
      var(--color-drum-ink-strong) 48.6% 49.1%,
      transparent 49.2% 50%);
  opacity: var(--opacity-drum-watermark);
}

#view-dashboard::after {
  width: min(15vw, 9rem);
  background: var(--color-drum-bronze);
  clip-path: polygon(
    50% 0%, 58% 34%, 85% 15%, 66% 42%, 100% 50%,
    66% 58%, 85% 85%, 58% 66%, 50% 100%, 42% 66%,
    15% 85%, 34% 58%, 0% 50%, 34% 42%, 15% 15%, 42% 34%
  );
  opacity: calc(var(--opacity-drum-watermark) * 0.9);
}

#view-dashboard > * {
  position: relative;
  z-index: 1;
}

#view-dashboard .home-dashboard-view,
#view-dashboard .workspace-card,
#view-dashboard .synced-tasks-workspace {
  background-color: var(--color-drum-surface);
  background-image:
    radial-gradient(circle at 86% 88%,
      transparent 0 12%,
      var(--color-drum-ink-strong) 12.1% 12.4%,
      transparent 12.5% 25%,
      var(--color-drum-ink) 25.1% 25.4%,
      transparent 25.5% 38%,
      var(--color-drum-ink) 38.1% 38.4%,
      transparent 38.5% 49.5%,
      var(--color-drum-ink) 49.6% 49.9%,
      transparent 50%),
    linear-gradient(135deg, transparent 0%, var(--color-drum-surface) 72%);
  background-repeat: no-repeat;
  background-size: min(42rem, 72vw) min(42rem, 72vw), 100% 100%;
}

#view-dashboard .home-dashboard-view::before {
  display: none;
}

@media (max-width: 900px) {
  #view-dashboard::before {
    width: 118vw;
    opacity: calc(var(--opacity-drum-watermark) * 0.7);
  }

  #view-dashboard::after {
    width: 20vw;
    opacity: calc(var(--opacity-drum-watermark) * 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-dashboard::before,
  #view-dashboard::after {
    transform: translate(-50%, -50%);
  }
}

body:has(#view-home-dashboard:not(.hide)) #view-dashboard .home-dashboard-view {
  background-image:
    radial-gradient(circle at 86% 88%,
      transparent 0 12%,
      var(--color-drum-ink-strong) 12.1% 12.4%,
      transparent 12.5% 25%,
      var(--color-drum-ink) 25.1% 25.4%,
      transparent 25.5% 38%,
      var(--color-drum-ink) 38.1% 38.4%,
      transparent 38.5% 49.5%,
      var(--color-drum-ink) 49.6% 49.9%,
      transparent 50%),
    linear-gradient(135deg, transparent 0%, var(--color-drum-surface) 72%);
  background-repeat: no-repeat;
  background-size: min(42rem, 72vw) min(42rem, 72vw), 100% 100%;
}

/* Hallmark · system background · supplied Đông Sơn artwork
 * reference: large cropped watermark, right/bottom anchored, low-contrast paper wash
 * asset: frontend/public/assets/dong-son-bronze-drum.png (1200×1200, grayscale + alpha)
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */
#view-dashboard::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background-image: url("/assets/dong-son-bronze-drum.png");
  background-position: right -5rem bottom -8rem;
  background-repeat: no-repeat;
  background-size: min(76vw, 68rem) auto;
  filter: sepia(0.18) saturate(0.5) contrast(0.82);
  opacity: var(--opacity-drum-asset);
  transform: none;
}

#view-dashboard::after {
  display: none;
}

#view-dashboard .home-dashboard-view,
#view-dashboard .workspace-card,
#view-dashboard .synced-tasks-workspace {
  background-image: linear-gradient(135deg, transparent 0%, var(--color-drum-surface) 72%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@media (max-width: 900px) {
  #view-dashboard::before {
    background-position: right -14rem bottom -10rem;
    background-size: 38rem auto;
    opacity: calc(var(--opacity-drum-asset) * 0.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-dashboard::before {
    transform: none;
  }
}

/* Final viewport-fit override: keep dashboard content wide on desktop. */
@media (min-width: 901px) {
  #view-dashboard .dashboard-main {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto;
    margin-left: 0;
    margin-right: 0;
    padding: clamp(0.75rem, 1vw, 1.25rem) clamp(1rem, 1.15vw, 1.5rem);
    min-height: 0;
    overflow: auto;
  }

  #view-dashboard {
    width: 100% !important;
    max-width: none !important;
    height: calc(100svh - 3px);
    min-height: 0;
  }

  #view-dashboard .dashboard-grid,
  #view-personal-tasks,
  #view-personal-tasks .tasks-main-content {
    min-height: 0;
  }

  #view-personal-tasks {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch;
  }

  #view-personal-tasks .tasks-main-content,
  #view-personal-tasks #synced-tasks-workspace {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  #view-home-dashboard,
  #default-tasks-workspace,
  #synced-tasks-workspace {
    width: 100% !important;
    max-width: none !important;
  }

  #view-personal-tasks .tasks-main-content {
    flex: 1 1 auto;
  }
}

/* Hallmark · mobile header navigation · modern-minimal Atelier
 * Direction: centered mark, thumb-first menu disclosure, account avatar at the edge.
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.mobile-nav-toggle {
  display: none;
}

@media screen and (max-width: 720px) {
  :root {
    --mobile-nav-offset: 0px;
    --mobile-content-bottom: calc(var(--space-6) + var(--mobile-safe-bottom));
  }

  html,
  body {
    overflow-x: clip;
  }

  #view-dashboard .app-header {
    position: sticky;
    top: 0;
    z-index: 140;
    min-height: var(--mobile-header-height);
    height: auto;
    padding: 0;
    overflow: visible;
    border-bottom: 1px solid var(--color-border-dark);
    background: var(--color-paper-obsidian);
  }

  #view-dashboard .header-shell {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    min-height: var(--mobile-header-height);
    gap: var(--space-2);
    padding: 0 var(--mobile-gutter);
  }

  #view-dashboard .mobile-nav-toggle {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    color: var(--color-ink-muted);
    width: 2.5rem;
    height: 2.5rem;
    place-content: center;
    gap: 0.28rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
  }

  #view-dashboard .mobile-nav-toggle span {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
    transition: transform var(--dur-normal) var(--ease-out), opacity var(--dur-normal) var(--ease-out);
  }

  #view-dashboard .mobile-nav-toggle:hover,
  #view-dashboard .mobile-nav-toggle:focus-visible {
    color: var(--color-accent-gold);
    background: var(--color-brand-800);
  }

  #view-dashboard .mobile-nav-toggle:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
  }

  #view-dashboard .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(0.4rem) rotate(45deg);
  }

  #view-dashboard .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  #view-dashboard .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-0.4rem) rotate(-45deg);
  }

  #view-dashboard .header-logo-lockup {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    min-width: 0;
    max-width: 100%;
    gap: var(--space-2);
  }

  #view-dashboard .header-logo-seal {
    width: 2.35rem;
    height: 2.35rem;
  }

  #view-dashboard .header-logo-kicker {
    display: none;
  }

  #view-dashboard .header-logo-meta {
    min-width: 0;
  }

  #view-dashboard .header-logo-wordmark {
    max-width: 10.5rem;
    overflow: hidden;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-dashboard .navbar-actions {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }

  #view-dashboard .header-organization-switch,
  #view-dashboard .header-notifications {
    display: none;
  }

  #view-dashboard .navbar-actions .header-user-dropdown {
    display: block;
    margin: 0;
  }

  #view-dashboard .navbar-actions .header-user-trigger {
    width: 2.5rem;
    min-height: 2.5rem;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-md);
  }

  #view-dashboard .navbar-actions .user-avatar {
    width: 2.25rem;
    height: 2.25rem;
  }

  #view-dashboard .navbar-actions .user-name,
  #view-dashboard .navbar-actions .dropdown-chevron,
  #view-dashboard .header-dropdown-menu {
    display: none !important;
  }

  /* The old fixed bottom bar becomes a compact disclosure panel under the header. */
  #view-dashboard .navbar-menu {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 130;
    display: flex;
    width: auto;
    height: auto;
    max-height: calc(100dvh - var(--mobile-header-height));
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-2) var(--mobile-gutter) var(--space-3);
    overflow-x: clip;
    overflow-y: auto;
    border-top: 1px solid var(--color-border);
    background: var(--color-paper-obsidian);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    visibility: hidden;
    transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out), visibility 0s linear var(--dur-normal);
  }

  #view-dashboard .navbar-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  #view-dashboard .navbar-menu .nav-item,
  #view-dashboard .navbar-menu .nav-profile-mobile,
  #view-dashboard .navbar-menu .nav-notification-mobile {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-ink-light);
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
  }

  #view-dashboard .navbar-menu .nav-item::after {
    display: none;
  }

  #view-dashboard .navbar-menu .nav-item:hover,
  #view-dashboard .navbar-menu .nav-item:focus-visible,
  #view-dashboard .navbar-menu .nav-item.active {
    color: var(--color-accent-gold);
    background: var(--color-brand-800);
  }

  #view-dashboard .navbar-menu .nav-item:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
  }

  #view-dashboard .navbar-menu .nav-item-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
  }

  #view-dashboard .navbar-menu .nav-label {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-dashboard .navbar-menu #nav-profile-mobile {
    display: none !important;
  }

  #view-dashboard .navbar-menu .nav-report-menu-wrap {
    display: block;
    width: 100%;
  }

  #view-dashboard .navbar-menu .nav-report-trigger {
    display: flex;
    width: 100%;
  }

  #view-dashboard .navbar-menu .nav-report-dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    margin: calc(var(--space-1) * -1) 0 var(--space-1);
    border-color: var(--color-border-dark);
    background: var(--color-brand-800);
    box-shadow: none;
  }

  #view-dashboard .navbar-menu .nav-report-option {
    white-space: nowrap;
  }

  #view-dashboard .dashboard-main {
    padding-bottom: var(--mobile-content-bottom) !important;
  }

  #view-dashboard > .mobile-notification-overlay:not(.hide) {
    inset: var(--mobile-header-height) 0 0 !important;
  }

  #view-dashboard .task-action-menu-popover {
    bottom: calc(var(--mobile-safe-bottom) + var(--space-2));
  }

  #modal-kpi-review-form {
    inset: var(--mobile-header-height) 0 0 !important;
  }
}

.monitoring-header-actions {
  display: grid;
  justify-items: end;
  gap: 0.7rem;
  flex: 0 0 auto;
}

.monitoring-source-link {
  color: var(--color-ink-muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}

.monitoring-source-link:hover,
.monitoring-source-link:focus-visible {
  color: var(--color-accent-gold-dim);
  text-decoration: underline;
}

.monitoring-toolbar,
.monitoring-panel-heading,
.monitoring-sync-status {
  display: flex;
  align-items: center;
}

.monitoring-toolbar {
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

.monitoring-tabs {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
}

.monitoring-tab {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-ink-muted);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.monitoring-tab:hover,
.monitoring-tab:focus-visible {
  color: var(--color-ink-dark);
  border-color: var(--color-accent-gold-glow);
}

.monitoring-tab.is-active {
  color: var(--color-ink-dark);
  border-color: var(--color-accent-gold-glow);
  background: var(--color-home-accent-soft);
}

.monitoring-tab-icon {
  color: var(--color-accent-gold-dim);
  font-size: 1rem;
  line-height: 1;
}

.monitoring-sync-status {
  align-items: flex-end;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--color-ink-muted);
  font-size: 0.73rem;
  text-align: right;
}

.monitoring-sync-status span:first-child {
  color: var(--color-ink-dark);
  font-weight: 700;
}

.monitoring-error {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  border-radius: var(--radius-md);
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger-100) 78%, var(--color-surface));
  font-size: 0.82rem;
  font-weight: 700;
}

.monitoring-panel {
  margin-top: 1.25rem;
}

.monitoring-panel-heading {
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.monitoring-panel-kicker {
  display: block;
  color: var(--color-accent-gold-dim);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.monitoring-panel-heading h2 {
  margin-top: 0.35rem;
  color: var(--color-ink-dark);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.monitoring-panel-heading p {
  margin-top: 0.35rem;
  color: var(--color-ink-muted);
  font-size: 0.82rem;
}

.monitoring-select-field {
  display: grid;
  min-width: min(19rem, 100%);
  gap: 0.35rem;
  color: var(--color-ink-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monitoring-select-field select {
  min-height: 2.65rem;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink-dark);
  background-color: var(--color-surface);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.monitoring-table-shell {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-home-card);
}

.monitoring-table-scroll {
  overflow-x: auto;
}

.monitoring-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  color: var(--color-ink-dark);
  font-size: 0.78rem;
}

.monitoring-table th,
.monitoring-table td {
  padding: 0.75rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  white-space: nowrap;
}

.monitoring-table th:first-child,
.monitoring-table th:nth-child(2),
.monitoring-table td:first-child,
.monitoring-table td:nth-child(2) {
  text-align: left;
}

.monitoring-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--color-ink-muted);
  background: var(--color-paper-champagne);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.monitoring-table th small {
  display: inline-block;
  margin-top: 0.15rem;
  color: var(--color-ink-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.monitoring-table tbody tr:hover {
  background: var(--color-home-neutral-soft);
}

.monitoring-table tbody tr:last-child td {
  border-bottom: 0;
}

.monitoring-date-cell {
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.monitoring-station-cell {
  min-width: 12rem;
  color: var(--color-ink-dark);
  font-weight: 700;
}

.monitoring-empty-state {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.monitoring-current-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

/* 3-Column KCN Monitoring Grid for Leadership */
.monitoring-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.monitoring-park-column {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}

.monitoring-park-column:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.monitoring-park-col-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

.monitoring-park-col-header.is-col-warning {
  border-bottom-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.park-col-title-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.park-col-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.park-col-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-ink-dark);
  line-height: 1.3;
}

.park-col-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--color-ink-muted);
}

.monitoring-park-col-header.is-col-warning .park-col-status {
  color: var(--color-danger);
}

.monitoring-park-col-header.is-col-ok .park-col-status {
  color: var(--color-success);
}

.dot-warning {
  background: var(--color-danger) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-danger) 20%, transparent) !important;
}

.dot-ok {
  background: var(--color-success) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-success) 20%, transparent) !important;
}

.park-col-time {
  font-size: 0.6875rem;
  color: var(--color-ink-muted);
}

.monitoring-park-metrics-list {
  display: grid;
  gap: 0.75rem;
}

.monitoring-metric-val-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.monitoring-metric-val-row strong {
  margin-top: 0 !important;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important;
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.monitoring-metric-val-row small {
  margin-top: 0 !important;
  color: var(--color-ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .monitoring-3col-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .monitoring-3col-grid {
    grid-template-columns: 1fr;
  }
}

.monitoring-metric-card {
  position: relative;
  min-height: 9.6rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-home-card);
}

.monitoring-metric-card::after {
  position: absolute;
  right: -1.5rem;
  bottom: -2rem;
  width: 6rem;
  height: 6rem;
  border: 1px solid var(--color-home-accent-soft);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.monitoring-metric-card.is-warning {
  border-color: color-mix(in srgb, var(--color-danger) 42%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger-100) 45%, var(--color-surface));
}

.monitoring-metric-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--color-ink-muted);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monitoring-metric-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-accent-gold);
  box-shadow: 0 0 0 0.25rem var(--color-home-accent-soft);
}

.monitoring-metric-card.is-warning .monitoring-metric-dot {
  background: var(--color-danger);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-danger) 16%, transparent);
}

.monitoring-metric-card strong {
  display: block;
  margin-top: 1.5rem;
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.monitoring-metric-card small {
  display: block;
  margin-top: 0.45rem;
  color: var(--color-ink-muted);
  font-size: 0.72rem;
}

.monitoring-metric-card em {
  display: inline-block;
  margin-top: 0.55rem;
  color: var(--color-danger);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 900px) {
  .monitoring-current-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .monitoring-header-actions,
  .monitoring-toolbar,
  .monitoring-panel-heading {
    align-items: stretch;
    justify-items: stretch;
    flex-direction: column;
  }

  .monitoring-header-actions {
    width: 100%;
  }

  .monitoring-source-link {
    text-align: left;
  }

  .monitoring-toolbar {
    gap: 0.8rem;
  }

  .monitoring-tabs {
    display: flex;
    width: 100%;
    border-radius: var(--radius-md);
  }

  .monitoring-tab {
    flex: 1 1 50%;
    justify-content: center;
    border-radius: calc(var(--radius-md) - 0.2rem);
  }

  .monitoring-sync-status {
    align-items: flex-start;
    text-align: left;
  }

  .monitoring-select-field {
    min-width: 0;
  }

  .monitoring-current-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.monitoring-view {
  min-height: min(680px, calc(100vh - 8rem));
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 8%, var(--color-home-accent-soft) 0 12rem, transparent 12.2rem),
    linear-gradient(145deg, var(--color-surface) 0%, var(--color-home-wash) 100%);
  box-shadow: var(--shadow-soft);
}

.monitoring-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.monitoring-kicker {
  display: block;
  color: var(--color-accent-gold-dim);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
}

.monitoring-header h1 {
  margin-top: 0.55rem;
  color: var(--color-ink-dark);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.monitoring-header p {
  max-width: 38rem;
  margin-top: 0.75rem;
  color: var(--color-ink-muted);
}

.monitoring-access-badge {
  flex: 0 0 auto;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-accent-gold-glow);
  border-radius: 999px;
  color: var(--color-accent-gold-dim);
  background: var(--color-home-accent-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monitoring-empty-state {
  display: grid;
  justify-items: center;
  max-width: 34rem;
  margin: clamp(4rem, 13vh, 8rem) auto 0;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--color-accent-gold-glow);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 76%, transparent);
  text-align: center;
}

.monitoring-empty-icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: 50%;
  color: var(--color-accent-gold-dim);
  background: var(--color-home-accent-soft);
}

.monitoring-empty-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.monitoring-empty-state h2 {
  margin-top: 1.1rem;
  color: var(--color-ink-dark);
  font-family: var(--font-serif);
  font-size: 1.6rem;
}

.monitoring-empty-state p {
  margin-top: 0.55rem;
  color: var(--color-ink-muted);
}

@media (max-width: 720px) {
  .monitoring-view {
    min-height: calc(100dvh - var(--mobile-header-height) - 2rem);
    padding: 1rem;
    border-radius: var(--radius-md);
  }

  .monitoring-header {
    flex-direction: column;
    gap: 1rem;
  }

  .monitoring-access-badge {
    font-size: 0.65rem;
  }

  .monitoring-empty-state {
    margin-top: 3rem;
  }
}

/* Button polish: calm the task workspace without changing its behavior. */
.btn-primary,
.btn-outline,
.btn-danger,
.btn-primary-sm,
.btn-secondary-sm,
.btn-quiet-sm {
  min-height: 2.75rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  line-height: 1.15;
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn-primary,
.btn-outline,
.btn-danger,
.btn-primary-sm,
.btn-secondary-sm,
.btn-quiet-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-danger {
  padding: 0.75rem 1.4rem;
  border: 1px solid color-mix(in oklab, var(--color-danger) 35%, var(--color-border));
  color: var(--color-danger-600);
  background: var(--color-danger-100);
  cursor: pointer;
}

.btn-danger:hover {
  border-color: var(--color-danger-600);
  background: color-mix(in oklab, var(--color-danger-100) 82%, var(--color-danger) 18%);
}

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-danger:focus-visible,
.btn-primary-sm:focus-visible,
.btn-secondary-sm:focus-visible,
.btn-quiet-sm:focus-visible,
.tb-btn:focus-visible,
.filter-tab:focus-visible,
.nav-list-item:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

.personal-tasks-view .tasks-toolbar {
  gap: 0.5rem;
}

.personal-tasks-view .tasks-toolbar .tb-btn {
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.personal-tasks-view .tasks-toolbar .btn-search,
.personal-tasks-view .tasks-toolbar .btn-import,
.personal-tasks-view .tasks-toolbar .btn-export,
.personal-tasks-view .tasks-toolbar .btn-category {
  color: var(--color-ink-dark);
  background: var(--color-surface);
}

.personal-tasks-view .tasks-toolbar .btn-add {
  border-color: var(--color-accent-gold);
  color: var(--color-ink-light);
  background: var(--color-accent-gold);
  box-shadow: 0 6px 16px -10px var(--color-accent-gold-dim);
}

.personal-tasks-view .tasks-toolbar .btn-evaluate {
  border-color: var(--color-accent-gold-glow);
  color: var(--color-accent-gold-dim);
  background: var(--color-accent-100);
}

.personal-tasks-view .tasks-toolbar .btn-delete {
  border-color: color-mix(in oklab, var(--color-danger) 28%, var(--color-border));
  color: var(--color-danger-600);
  background: var(--color-danger-100);
}

.personal-tasks-view .tasks-toolbar .tb-btn:hover {
  border-color: var(--color-accent-gold-dim);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.personal-tasks-view .tasks-toolbar .btn-add:hover {
  border-color: var(--color-accent-gold-hover);
  color: var(--color-ink-light);
  background: var(--color-accent-gold-hover);
}

.personal-tasks-view .tasks-toolbar .btn-delete:hover {
  border-color: var(--color-danger-600);
  background: color-mix(in oklab, var(--color-danger-100) 82%, var(--color-danger) 18%);
}

.personal-tasks-view .tasks-toolbar .tb-btn:active {
  box-shadow: none;
  transform: translateY(1px) scale(0.99);
}

.personal-tasks-view .tasks-filter-tabs {
  gap: 0.5rem;
  border-bottom: 0;
  padding-bottom: 0;
}

.personal-tasks-view .filter-tab {
  min-height: 2.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.personal-tasks-view .filter-tab:hover {
  border-color: var(--color-accent-gold-dim);
  color: var(--color-ink-dark);
  background: var(--color-home-neutral-soft);
  transform: translateY(-1px);
}

.personal-tasks-view .filter-tab.active {
  border-color: var(--color-paper-obsidian);
  color: var(--color-accent-gold);
  background: var(--color-paper-obsidian);
  box-shadow: 0 7px 18px -13px var(--color-paper-obsidian);
}

.personal-tasks-view .filter-tab .count-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
  background: var(--color-home-neutral-soft);
  font-size: 0.68rem;
}

.personal-tasks-view .filter-tab.active .count-badge {
  border-color: transparent;
}

.task-create-modal .modal-footer .btn-outline,
.task-create-modal .modal-footer .btn-primary,
.task-evaluation-footer .btn-outline,
.task-evaluation-footer .btn-primary {
  min-height: 3rem;
  border-radius: var(--radius-pill);
  font-weight: 750;
  box-shadow: 0 7px 18px -14px var(--color-paper-obsidian);
}

#btn-add-task-participant,
.task-child-add {
  min-height: 2.25rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-task-blue);
  border-radius: var(--radius-md);
  color: var(--color-task-blue-dark);
  background: var(--color-task-blue-soft);
  font-weight: 700;
}

.task-action-menu-toggle {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-muted);
}

.task-action-menu-toggle:hover,
.task-action-menu.is-open .task-action-menu-toggle {
  border-color: var(--color-accent-gold-dim);
  color: var(--color-ink-dark);
  background: var(--color-home-neutral-soft);
}

.task-action-menu-popover .task-action-link {
  min-height: 2.35rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink-dark);
  text-decoration: none;
}

.task-action-menu-popover .task-action-link:hover,
.task-action-menu-popover .task-action-link:focus-visible {
  color: var(--color-accent-gold-dim);
  background: var(--color-home-neutral-soft);
  text-decoration: none;
}

.reports-filter-button,
.reports-export-button {
  min-height: 2.75rem;
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.reports-filter-button:hover,
.reports-export-button:hover {
  border-color: var(--color-accent-gold-dim);
  filter: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

/* Header navigation: a compact segmented rail instead of loose text links. */
@media screen and (min-width: 721px) {
  #view-dashboard .navbar-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: clamp(1rem, 2.5vw, 2.5rem);
    padding: 0.25rem;
    border: 1px solid oklch(100% 0 0 / 0.12);
    border-radius: var(--radius-pill);
    background: oklch(100% 0 0 / 0.045);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06);
  }

  #view-dashboard .navbar-menu .nav-item,
  #view-dashboard .navbar-menu .nav-report-trigger {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: oklch(82% 0.015 72);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
    transition: color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

  #view-dashboard .navbar-menu .nav-item::after {
    display: none;
  }

  #view-dashboard .navbar-menu .nav-item:hover,
  #view-dashboard .navbar-menu .nav-item:focus-visible {
    color: var(--color-paper-champagne);
    background: oklch(100% 0 0 / 0.08);
    transform: translateY(-1px);
  }

  #view-dashboard .navbar-menu .nav-item.active,
  #view-dashboard .navbar-menu .nav-report-trigger[aria-expanded="true"] {
    border-color: var(--color-accent-gold);
    color: var(--color-ink-light);
    background: var(--color-accent-gold);
    box-shadow: 0 0.35rem 1rem -0.7rem var(--color-accent-gold);
  }

  #view-dashboard .navbar-menu .nav-item.active:hover,
  #view-dashboard .navbar-menu .nav-report-trigger[aria-expanded="true"]:hover {
    color: var(--color-ink-light);
    background: var(--color-accent-gold-hover);
  }

  #view-dashboard .navbar-menu .nav-item-icon {
    width: 1rem;
    height: 1rem;
    opacity: 0.78;
  }

  #view-dashboard .navbar-menu .nav-item.active .nav-item-icon,
  #view-dashboard .navbar-menu .nav-report-trigger[aria-expanded="true"] .nav-item-icon {
    opacity: 1;
  }

  #view-dashboard .navbar-menu .nav-report-menu-wrap {
    position: relative;
  }

  #view-dashboard .navbar-menu .nav-report-dropdown {
    top: calc(100% + 0.55rem);
    border-color: oklch(100% 0 0 / 0.14);
    border-radius: var(--radius-md);
    background: oklch(22% 0.025 55 / 0.98);
    box-shadow: 0 1rem 2.5rem oklch(10% 0.02 40 / 0.25);
  }
}

@media screen and (max-width: 720px) {
  .personal-tasks-view .nav-count-badge {
    right: 0.55rem;
  }

  .personal-tasks-view .tasks-toolbar .tb-btn {
    min-height: 2.65rem;
  }

  .personal-tasks-view .filter-tab {
    min-height: 2.4rem;
    padding-inline: 0.75rem;
  }

  .task-create-modal .modal-footer .btn-outline,
  .task-create-modal .modal-footer .btn-primary,
  .task-evaluation-footer .btn-outline,
  .task-evaluation-footer .btn-primary {
    min-height: 2.9rem;
  }
}

/* Keep the add-task sheet bounded so its form body owns the mobile scroll. */
@media screen and (max-width: 720px) {
  #modal-add-task > .task-create-modal {
    height: calc(100dvh - 0.25rem);
    min-height: 0;
  }

  #modal-add-task > .task-create-modal > #add-task-form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
  }

  #modal-add-task #add-task-form > .modal-body {
    min-height: 0;
    max-height: none !important;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #modal-add-task #add-task-form > .modal-footer {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-dashboard .mobile-nav-toggle span,
  #view-dashboard .navbar-menu {
    transition: none;
  }
}


@media (max-width: 900px) {
  #view-dashboard {
    width: 100%;
    height: auto;
    min-height: calc(100svh - 3px);
    overflow: visible;
  }

  #view-dashboard .dashboard-main {
    width: 100%;
    min-height: 0;
    overflow: visible;
  }
}

/* Keep the top navigation identical across Trang chủ and Công việc. */
@media (min-width: 901px) {
  #view-dashboard .app-header {
    height: 76px;
    min-height: 76px;
    padding-inline: clamp(1rem, 3vw, 3rem);
  }

  /* Same navbar geometry as the Trang chủ reference state. */
  #view-dashboard .header-logo-lockup { gap: 0.7rem; }
  #view-dashboard .header-logo-seal { width: 36px; height: 36px; }
  #view-dashboard .header-logo-wordmark { font-size: 1.1rem; }
  #view-dashboard .navbar-menu { gap: 1.2rem; margin-left: 1.75rem; }
  #view-dashboard .navbar-actions .header-user-trigger { min-height: 36px; }
}

@media (max-width: 900px) {
  #view-dashboard .app-header {
    height: auto;
    min-height: 84px;
  }
}

/* Navbar notifications */
.header-notifications {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-notification-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: oklch(96% 0.008 75);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.header-notification-trigger:hover,
.header-notification-trigger[aria-expanded="true"] {
  background: oklch(100% 0 0 / 0.1);
  border-color: oklch(86% 0.012 75 / 0.35);
}

.header-notification-trigger svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-notification-badge {
  position: absolute;
  top: -2px;
  right: -1px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--color-paper-obsidian, #081a35);
  border-radius: 999px;
  background: #f15b3a;
  color: white;
  font: 700 0.62rem/14px var(--font-body);
  text-align: center;
}

.header-notification-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  width: min(420px, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--color-border-dark, #d9d2c8);
  border-radius: 18px;
  background: var(--color-surface, #fff);
  color: var(--color-ink-dark, #162238);
  box-shadow: 0 24px 56px oklch(18% 0.02 50 / 0.22);
}

.header-notification-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border, #e5e8ed);
}

.header-notification-heading strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.header-notification-read-all {
  min-height: 2.25rem;
  padding-inline: 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent-700, #8c6219);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
}

.header-notification-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.65rem 1rem 0.55rem;
  border-bottom: 1px solid var(--color-border, #e5e8ed);
}

.header-notification-tab {
  min-height: 2.25rem;
  padding-inline: 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted, #667085);
  background: transparent;
  cursor: pointer;
  font: 700 0.78rem/1 var(--font-body);
}

.header-notification-tab.is-active {
  color: var(--color-accent-700, #8c6219);
  background: var(--color-accent-100, #f8efd9);
}

.header-notification-list {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 0.45rem 0.55rem;
}

.header-notification-item {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 14px;
  color: inherit;
  text-align: left;
}

.header-notification-item:hover,
.header-notification-item.is-unread {
  background: var(--color-accent-100, #f8efd9);
}

.header-notification-open {
  display: grid;
  grid-template-columns: 8px 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
  padding: 0.75rem 2.6rem 0.75rem 0.7rem;
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.header-notification-open:focus-visible,
.header-notification-quick-delete:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.header-notification-open:active {
  transform: translateY(1px);
}

.header-notification-dot {
  width: 7px;
  height: 7px;
  justify-self: center;
  border-radius: 50%;
  background: transparent;
}

.header-notification-item.is-unread .header-notification-dot {
  background: #f15b3a;
}

.header-notification-avatar {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-accent-gold);
  border-radius: 50%;
  color: var(--color-accent-700);
  background-color: var(--color-accent-100);
  background-position: center;
  background-size: cover;
  font-size: 0.7rem;
  font-weight: 750;
}

.header-notification-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding-right: 0.25rem;
}

.header-notification-copy strong,
.header-notification-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-notification-copy strong {
  font-size: 0.78rem;
}

.header-notification-copy span {
  color: var(--color-ink-muted, #667085);
  font-size: 0.74rem;
}

.header-notification-copy time {
  color: var(--color-ink-muted, #8a93a1);
  font-size: 0.66rem;
}

.header-notification-heading-actions,
.mobile-notification-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header-notification-clear-all,
.mobile-notification-clear-all {
  min-height: 2.25rem;
  padding-inline: 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-danger);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.header-notification-clear-all:hover,
.mobile-notification-clear-all:hover {
  background: var(--color-danger-100);
}

.header-notification-quick-delete {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--color-ink-muted, #8a93a1);
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.header-notification-item:hover .header-notification-quick-delete,
.header-notification-quick-delete:focus-visible {
  opacity: 1;
}

.header-notification-quick-delete:hover {
  color: var(--color-danger);
  background: var(--color-danger-100);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.notification-detail-action-danger {
  border: 1px solid var(--color-danger);
  background: transparent;
  color: var(--color-danger);
}

.notification-detail-action-danger:hover {
  background: var(--color-danger-100);
}

.header-notification-section + .header-notification-section {
  margin-top: 0.35rem;
}

.header-notification-section-title {
  margin: 0;
  padding: 0.65rem 0.7rem 0.3rem;
  color: var(--color-ink-muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.header-notification-read-all:hover {
  background: var(--color-accent-100);
}

.header-notification-empty {
  margin: 0;
  padding: 1.5rem 1rem;
  color: var(--color-ink-muted, #667085);
  font-size: 0.78rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .header-notification-open,
  .header-notification-more,
  .header-notification-menu-item {
    transition: none;
  }
}

@media (max-width: 700px) {
  .header-notification-panel {
    position: fixed;
    top: 70px;
    right: 1rem;
  }
}

/* KPI Dashboard v2 — one shared workspace language across overview, tasks and KPI */
.header-organization-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 0.65rem;
  color: oklch(78% 0.02 72);
  font: 700 0.62rem/1 var(--font-display);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.header-organization-switch select {
  max-width: 220px;
  min-height: 34px;
  padding: 0.45rem 1.8rem 0.45rem 0.65rem;
  border: 1px solid oklch(76% 0.14 72 / 0.35);
  border-radius: var(--radius-pill);
  outline: 0;
  background: oklch(100% 0 0 / 0.08);
  color: var(--color-ink-light);
  font: 600 0.73rem/1.2 var(--font-body);
}

.header-organization-switch option { color: var(--color-ink-dark); background: var(--color-surface); }

#view-dashboard .app-header {
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.05), 0 12px 24px -20px oklch(0% 0 0 / 0.7);
}

#view-dashboard .navbar-menu {
  gap: 0.25rem;
  margin-left: clamp(1rem, 2.5vw, 2.5rem);
}

#view-dashboard .nav-item {
  min-height: 42px;
  padding-inline: 0.9rem;
  border: 1px solid transparent;
  color: oklch(86% 0.015 72);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
}

#view-dashboard .nav-item:hover {
  color: var(--color-accent-gold-hover);
  background: oklch(100% 0 0 / 0.06);
}

#view-dashboard .nav-item.active {
  color: var(--color-accent-gold);
  background: oklch(100% 0 0 / 0.08);
  border-color: oklch(76% 0.14 72 / 0.45);
  box-shadow: inset 0 -2px 0 var(--color-accent-gold);
}

#view-dashboard .nav-item-icon { opacity: 0.8; }

#view-dashboard .workspace-card,
#view-dashboard .tasks-main-content,
#view-dashboard .tasks-sidebar {
  border-color: oklch(84% 0.02 75);
  box-shadow: 0 18px 44px -34px oklch(14% 0.02 50 / 0.55);
}

#view-dashboard .tasks-sidebar {
  background: var(--color-surface, #ffffff);
}

#view-dashboard .tasks-main-content {
  background: var(--color-surface, #ffffff);
}

#view-dashboard .tasks-title,
#view-dashboard .kpi-view-heading .card-title {
  letter-spacing: -0.035em;
}

#view-dashboard .tasks-table thead tr {
  background: var(--color-task-blue-dark);
  box-shadow: inset 0 -1px 0 oklch(100% 0 0 / 0.2);
}

#view-dashboard .tasks-table th {
  text-transform: uppercase;
  letter-spacing: 0.055em;
  font-size: 0.68rem;
}

#view-dashboard .tasks-table tbody tr:hover td { background: var(--color-task-blue-wash); }

/* Task groups: the category is the visual anchor for the list. */
#view-dashboard .tasks-table .task-group-row,
#view-dashboard .tasks-table .task-group-row:hover {
  background: #edf3fa;
  transform: none;
}

#view-dashboard .tasks-table .task-group-row td {
  padding: 0;
  border-top: 1px solid #cad7e7;
  border-bottom: 1px solid #cad7e7;
  background: #edf3fa;
}

#view-dashboard .task-group-toggle {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  border: 0;
  background: transparent;
  color: #1456a8;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

#view-dashboard .task-group-toggle:hover {
  background: rgba(37, 99, 235, 0.08);
}

#view-dashboard .task-group-toggle,
#view-dashboard .task-group-toggle:hover,
#view-dashboard .task-group-toggle:active {
  transform: none;
  transition: none;
}

#view-dashboard .task-group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #1456a8;
  transform: rotate(0deg);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

#view-dashboard .task-group-row.is-collapsed .task-group-chevron {
  transform: rotate(-90deg);
}

#view-dashboard .task-group-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-dashboard .task-group-point {
  color: #17613b;
  white-space: nowrap;
}

#view-dashboard .task-group-count {
  margin-left: auto;
  color: #65748a;
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}

#view-dashboard .tasks-table .task-group-member td {
  vertical-align: middle;
}

#view-dashboard .tasks-table .task-group-member td:nth-child(2) {
  padding-left: 1.25rem;
}

#view-dashboard .task-row-chips {
  margin-top: 0.38rem;
}

#view-dashboard .task-kpi-chip,
#view-dashboard .task-score-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0.3rem;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  background: #e4f4e9;
  color: #168044;
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

#view-dashboard .task-score-chip {
  display: block;
  margin-top: 0.35rem;
  background: #edf3ff;
  color: #2563c7;
}

#view-dashboard .task-assignee-cell {
  min-width: 10.5rem;
}

#view-dashboard .task-assignee-score {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
  max-width: 100%;
}

#view-dashboard .tasks-table tbody tr:has(.task-assignee-score:hover),
#view-dashboard .tasks-table tbody tr:has(.task-participation-pill:focus-visible) {
  position: relative;
  z-index: 90;
}

#view-dashboard .tasks-table tbody tr:has(.task-assignee-score:hover) td,
#view-dashboard .tasks-table tbody tr:has(.task-participation-pill:focus-visible) td {
  position: relative;
  z-index: 91;
  overflow: visible;
}

#view-dashboard .task-assignee-name {
  color: var(--color-ink-dark);
  white-space: nowrap;
}

#view-dashboard .task-participation-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.52rem;
  border-radius: 999px;
  background: #e2f4e8;
  color: #0c9a4d;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
  outline: none;
}

#view-dashboard .task-participation-pill:hover,
#view-dashboard .task-participation-pill:focus-visible {
  background: #ccebd8;
  box-shadow: 0 0 0 3px rgba(22, 128, 68, 0.14);
}

#view-dashboard .task-score-tooltip {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 0.55rem);
  left: 1.25rem;
  display: grid;
  gap: 0.22rem;
  min-width: 11rem;
  padding: 0.66rem 0.78rem;
  border-radius: 0.75rem;
  background: #526fd5;
  color: #fff;
  box-shadow: 0 0.6rem 1.35rem rgba(39, 62, 132, 0.24);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.25rem);
  transition: opacity 140ms ease, transform 140ms ease;
}

#view-dashboard .task-score-tooltip::before {
  content: "";
  position: absolute;
  top: -0.34rem;
  left: 1.35rem;
  width: 0.68rem;
  height: 0.68rem;
  background: #526fd5;
  transform: rotate(45deg);
}

#view-dashboard .task-assignee-score:hover .task-score-tooltip,
#view-dashboard .task-participation-pill:focus-visible + .task-score-tooltip {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  #view-dashboard .task-group-count { display: none; }
  #view-dashboard .task-group-toggle { padding-inline: 0.6rem; }
}

.btn-secondary-sm,
.btn-quiet-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: 600 0.78rem/1 var(--font-display);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-secondary-sm:hover,
.btn-quiet-sm:hover { border-color: var(--color-accent-gold); color: var(--color-ink-dark); background: var(--color-accent-100); }
.btn-secondary-sm:active,
.btn-quiet-sm:active { transform: translateY(1px); }

.btn-primary-sm:disabled,
.btn-secondary-sm:disabled,
.btn-quiet-sm:disabled,
.kpi-save-result:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* KPI personal workspace */
.kpi-dashboard-view {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: clamp(1.25rem, 2vw, 2rem);
}

/* The criteria form belongs to the task workspace and uses the same scroll surface. */
body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-main-content > #view-kpi-dashboard:not(.hide) {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  overflow: auto;
}

@media (max-width: 900px) {
  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-main-content > #view-kpi-dashboard:not(.hide) {
    width: 100%;
    overflow: auto;
  }
}

/* The assessment view is a sibling of the task workspace so hiding the task
 * list cannot hide the assessment page with it. */
@media screen and (min-width: 901px) {
  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks > #view-kpi-dashboard:not(.hide) {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    height: 100%;
    overflow: auto;
  }
}

@media screen and (max-width: 900px) {
  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks > #view-kpi-dashboard:not(.hide) {
    width: 100%;
    min-width: 0;
    overflow: auto;
  }
}

.kpi-view-header,
.kpi-status-strip,
.kpi-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kpi-view-heading { min-width: 0; }
.kpi-view-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.kpi-view-heading .card-subtitle { max-width: 620px; margin-top: 0.45rem; }

.kpi-page-tabs {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.65rem;
}
.kpi-page-tab {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.62rem 1.25rem;
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font: 600 0.86rem/1 var(--font-display);
  cursor: pointer;
}
.kpi-page-tab:hover { border-color: var(--color-task-blue); color: var(--color-task-blue); }
.kpi-page-tab.is-active { border-color: var(--color-task-blue); background: var(--color-task-blue); color: #fff; }
.kpi-assessment-window-notice {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: clamp(2rem, 8vw, 5rem) 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: color-mix(in srgb, var(--color-home-wash) 78%, var(--color-surface));
  color: var(--color-ink-muted);
  font: 650 clamp(1rem, 1.8vw, 1.2rem)/1.6 var(--font-display);
  text-align: center;
}
.kpi-document-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-surface);
}
.kpi-document-card h3 { margin: 0.25rem 0 0.2rem; color: var(--color-ink-dark); }
.kpi-document-card p { margin: 0; color: var(--color-ink-muted); }
.kpi-document-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 700px) {
  .kpi-document-card { align-items: stretch; flex-direction: column; }
  .kpi-document-actions > button { width: 100%; }
}
.kpi-common-panel {
  display: grid;
  gap: 0.9rem;
}
.kpi-common-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0.15rem;
}
.kpi-common-toolbar > div { display: grid; gap: 0.25rem; }
.kpi-common-toolbar strong { color: var(--color-ink-dark); }
.kpi-common-total { color: var(--color-task-blue-dark) !important; }
.kpi-common-toolbar > .kpi-common-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-width: 0;
}
.kpi-common-toolbar-actions .btn-primary { flex: 0 0 auto; }
.kpi-common-table-wrap { overflow: auto; border: 1px solid var(--color-border); background: var(--color-surface); }
.kpi-common-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.kpi-common-table th { padding: 0.85rem 1rem; background: var(--color-task-blue); color: #fff; text-align: left; font-size: 0.78rem; }
.kpi-common-table th:first-child,
.kpi-common-table td:first-child { width: 6rem; text-align: center; }
.kpi-common-table th:nth-child(3),
.kpi-common-table th:nth-child(4),
.kpi-common-table td:nth-child(3),
.kpi-common-table td:nth-child(4) { width: 10rem; text-align: center; }
.kpi-common-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-ink-dark); vertical-align: middle; }
.kpi-common-table tr:last-child td { border-bottom: 0; }
.kpi-common-table tr.kpi-common-group td { background: color-mix(in srgb, var(--color-task-blue) 8%, var(--color-surface)); font-weight: 700; }
.kpi-common-table tr.kpi-common-total-row td { background: color-mix(in srgb, var(--color-task-blue) 12%, var(--color-surface)); border-top: 2px solid var(--color-task-blue); color: var(--color-task-blue-dark); }
.kpi-common-table td.is-child { padding-left: 2.2rem; }
.kpi-common-score-cell { padding: 0.35rem 0.75rem !important; background: var(--color-surface); }
.kpi-common-score-cell input { width: 100%; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0.5rem; background: #fff; color: var(--color-ink-dark); text-align: center; font: 600 0.88rem/1 var(--font-body); }
.kpi-common-score-cell input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.kpi-common-score-cell input[type="number"]::-webkit-inner-spin-button,
.kpi-common-score-cell input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.kpi-common-score-cell input:focus { outline: none; border-color: var(--color-task-blue); background: var(--color-surface); box-shadow: var(--shadow-focus); }
.kpi-common-score-cell input.is-max,
.kpi-common-score-cell input.is-max:focus { border-color: var(--color-success); background: var(--color-success-100); color: var(--color-success); }
.kpi-common-score-cell input.is-under,
.kpi-common-score-cell input.is-under:focus { border-color: var(--color-danger); background: var(--color-danger-100); color: var(--color-danger); }
.kpi-common-score-cell input:disabled { opacity: 0.7; cursor: not-allowed; }
.kpi-common-hint { margin: 0; color: var(--color-ink-muted); font-size: 0.78rem; }
.kpi-common-empty { padding: 3rem 1rem !important; text-align: center; color: var(--color-ink-muted) !important; }

.kpi-status-strip {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: linear-gradient(90deg, var(--color-home-wash), var(--color-surface));
}

.kpi-status-label,
.kpi-status-time { color: var(--color-ink-muted); font-size: 0.8rem; }
.kpi-status-label { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.kpi-status-value { margin-right: auto; font: 700 0.85rem/1 var(--font-display); }
.kpi-status-value.text-success { color: var(--color-success) !important; }
.kpi-status-value.text-gold { color: var(--color-accent-700) !important; }

.kpi-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.kpi-dashboard-view .kpi-stat-card {
  min-height: 132px;
  padding: 1.1rem;
  border-radius: var(--border-radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.kpi-dashboard-view .kpi-stat-card-status { background: var(--color-paper-obsidian); border-color: var(--color-paper-obsidian); }
.kpi-dashboard-view .kpi-stat-card-status .kpi-stat-label,
.kpi-dashboard-view .kpi-stat-card-status .kpi-stat-desc { color: oklch(76% 0.02 72); }
.kpi-dashboard-view .kpi-stat-card-status .kpi-stat-value { color: var(--color-accent-gold); }
.kpi-dashboard-view .kpi-stat-value { font-size: 1.55rem; }

.kpi-table-surface {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.kpi-table-heading { padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.kpi-table-heading h3 { margin-top: 0.25rem; font-size: 1.05rem; letter-spacing: -0.02em; }
.kpi-table-hint { color: var(--color-ink-muted); font-size: 0.78rem; }
.kpi-table-wrap { overflow: auto; max-height: min(58vh, 620px); }
.kpi-table { min-width: 900px; }
.kpi-table th { position: sticky; top: 0; z-index: 2; background: var(--color-task-blue-dark); color: #fff; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.055em; }
.kpi-table td { vertical-align: top; }
.kpi-result-editor { display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: 0.45rem; align-items: start; }
.kpi-result-editor textarea { min-height: 52px; width: 100%; resize: vertical; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0.55rem 0.65rem; color: var(--color-ink-dark); background: var(--color-home-wash); font: 0.82rem/1.4 var(--font-body); }
.kpi-result-editor textarea:focus { outline: none; border-color: var(--color-accent-gold); box-shadow: var(--shadow-focus); }
.kpi-save-result { align-self: start; border: 0; border-radius: var(--radius-pill); padding: 0.45rem 0.65rem; background: var(--color-paper-obsidian); color: var(--color-ink-light); font: 700 0.72rem/1 var(--font-display); cursor: pointer; }
.kpi-save-result:hover { background: var(--color-accent-gold); color: var(--color-ink-light); }
.kpi-review-score { display: block; margin-top: 0.35rem; color: var(--color-task-blue-dark); font-size: 0.72rem; }
.kpi-declare-modal { width: min(620px, calc(100vw - 2rem)); }

.kpi-final-card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.kpi-final-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.15rem 1.25rem;
}
.kpi-final-fields label {
  display: grid;
  gap: 0.45rem;
  color: var(--color-ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.kpi-final-fields textarea {
  min-height: 96px;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem;
  color: var(--color-ink-dark);
  background: var(--color-home-wash);
  font: 0.86rem/1.45 var(--font-body);
}
.kpi-final-fields textarea:focus { outline: none; border-color: var(--color-accent-gold); box-shadow: var(--shadow-focus); }
.kpi-final-fields textarea:disabled { opacity: 0.7; cursor: not-allowed; }
.kpi-final-card > .kpi-status-strip { margin: 0 1.25rem 1.15rem; }
.kpi-review-queue-card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.kpi-review-queue-wrap { overflow: auto; max-height: 360px; }
.kpi-review-queue-table { min-width: 680px; }
.kpi-review-empty { padding: 1.4rem; text-align: center; color: var(--color-ink-muted); }
.kpi-review-modal { width: min(920px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
.kpi-final-submit-modal { width: min(620px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
.kpi-final-submit-body { display: grid; gap: 1rem; padding: 0 1.25rem 1rem; }
.kpi-final-submit-body label { display: grid; gap: 0.45rem; color: var(--color-ink); font-weight: 700; }
.kpi-final-submit-body textarea { width: 100%; min-height: 7rem; resize: vertical; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0.75rem; font: inherit; color: inherit; background: var(--color-surface); }
.kpi-final-submit-body textarea:focus { outline: none; border-color: var(--color-accent-gold); box-shadow: var(--shadow-focus); }
.kpi-review-modal-body { display: grid; gap: 0.9rem; padding: 0 1.25rem 1rem; }
.kpi-review-modal-body .kpi-table-wrap { max-height: 48vh; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); }
.kpi-review-score-input { width: 100px; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0.45rem; background: var(--color-home-wash); color: var(--color-ink-dark); }
.kpi-review-note-label { display: grid; gap: 0.4rem; color: var(--color-ink-muted); font-size: 0.78rem; font-weight: 700; }
.kpi-review-note-label textarea { width: 100%; resize: vertical; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0.65rem; background: var(--color-home-wash); color: var(--color-ink-dark); font: 0.84rem/1.4 var(--font-body); }
.kpi-final-review-fields { display: grid; gap: .75rem; }
.kpi-final-review-fields textarea[readonly] { background: var(--color-home-wash); opacity: .9; }
.kpi-final-status { display: block; margin-top: .2rem; font-size: .68rem; font-weight: 700; color: var(--color-ink-muted); }
.kpi-final-status-final_reviewed { color: #15803d; }
.kpi-final-status-final_returned { color: #b91c1c; }
.kpi-final-status-final_submitted { color: #b45309; }

/* Hallmark · genre: modern-minimal · macrostructure: Long Document · design-system: design.md · designed-as-app */
.kpi-month-panel { min-width: 0; }
.kpi-month-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr);
  gap: 1rem;
  align-items: start;
}
.kpi-document-column { display: grid; gap: .75rem; min-width: 0; }
.kpi-document-toolbar,
.kpi-month-card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-surface);
}
.kpi-document-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
}
.kpi-document-toolbar > div:first-child { display: grid; gap: .2rem; min-width: 0; }
.kpi-document-toolbar strong { color: var(--color-ink-dark); font-size: .82rem; }
.kpi-document-actions,
.kpi-month-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.kpi-document-actions button,
.kpi-month-actions button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.kpi-document-actions svg,
.kpi-month-actions svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi-document-viewport {
  min-width: 0;
  max-height: min(76vh, 900px);
  overflow: auto;
  padding: clamp(.65rem, 2vw, 1.25rem);
  border: 1px solid #26313d;
  border-radius: var(--border-radius-md);
  background: #222a33;
  overscroll-behavior: contain;
}
.kpi-document-paper {
  width: min(100%, 860px);
  min-width: 680px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.8rem);
  color: #111827;
  background: #fffefb;
  box-shadow: 0 16px 36px rgba(8, 13, 20, .24);
  font-family: "Times New Roman", Times, "Nimbus Roman No9 L", serif !important;
  font-size: .93rem;
  line-height: 1.25;
}
.kpi-document-paper * {
  font-family: "Times New Roman", Times, "Nimbus Roman No9 L", serif !important;
}
.kpi-document-masthead { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.25rem; text-align: center; }
.kpi-document-masthead > div { display: grid; align-content: start; gap: .12rem; }
.kpi-document-masthead strong,
.kpi-document-masthead .kpi-doc-issuing-org { font-size: .92rem; font-weight: 700; }
.kpi-document-masthead .kpi-doc-parent-org { font-size: .92rem; font-weight: 400; margin-top: 0; }
.kpi-document-masthead span.kpi-doc-divider,
.kpi-document-masthead > div > span:last-child { margin-top: .2rem; font-size: .82rem; font-weight: 400; }
.kpi-document-title-block { margin: 2rem 0 1.45rem; text-align: center; }
.kpi-document-title-block h2 { margin: 0; font-size: 1.16rem; letter-spacing: .01em; }
.kpi-document-title-block p { margin: .25rem 0 0; font-size: .94rem; font-style: italic; }
.kpi-document-person { margin: 0 auto 1.45rem; max-width: 92%; }
.kpi-document-person p { margin: .18rem 0; }
.kpi-document-section { margin-top: 1.25rem; }
.kpi-document-section h3 { margin: 0 0 .45rem; font-size: .97rem; }
.kpi-document-table-wrap { overflow-x: auto; }
.kpi-document-table { width: 100%; min-width: 620px; border-collapse: collapse; table-layout: fixed; }
.kpi-document-table th,
.kpi-document-table td { border: 1px solid #1f2933; padding: .45rem .5rem; vertical-align: top; }
.kpi-document-table th { text-align: center; font-weight: 700; }
.kpi-document-table th:first-child,
.kpi-document-table td:first-child { width: 3.5rem; text-align: center; }
.kpi-document-table th:nth-child(3),
.kpi-document-table td:nth-child(3) { width: 7.25rem; text-align: center; }
.kpi-document-table th:nth-child(4),
.kpi-document-table td:nth-child(4) { width: 8.8rem; text-align: center; }
.kpi-document-table tr.is-group td { background: #f3f5f6; font-weight: 700; }
.kpi-document-table td.is-child { padding-left: 1.25rem; }
.kpi-document-empty { padding: 1.25rem !important; text-align: center; color: #6b7280; }
.kpi-document-task-table th:nth-child(2) { width: 32%; }
.kpi-document-task-table th:nth-child(3) { width: 28%; }
.kpi-document-task-table th:nth-child(4) { width: 26%; }
.kpi-document-summary dl { display: grid; gap: .35rem; margin: 0; }
.kpi-document-summary dl > div { display: grid; grid-template-columns: 13rem 1fr; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid #d7dce0; }
.kpi-document-summary dt { font-weight: 700; }
.kpi-document-summary dd { margin: 0; white-space: pre-wrap; }
.kpi-document-signature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #d7dce0; text-align: center; }
.kpi-document-signature-cell { min-width: 0; }
.kpi-document-signature-date { margin: 0 0 .45rem; font-style: italic; }
.kpi-document-signature-title { margin: 0; font-weight: 700; }
.kpi-document-signature-note { margin: .3rem 0 0; font-style: italic; }
.kpi-document-signature-space { min-height: 5rem; }
.kpi-document-signature-name { display: block; min-height: 1.25rem; }
.kpi-month-rail { position: sticky; top: 1rem; display: grid; gap: .75rem; min-width: 0; }
.kpi-month-card { padding: 1rem; }
.kpi-month-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.kpi-month-card-heading h3 { margin: .2rem 0 0; color: var(--color-ink-dark); font-size: 1rem; }
.kpi-month-status-badge { flex: 0 0 auto; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: .35rem .6rem; color: var(--color-ink-muted); font-size: .7rem; font-weight: 800; }
.kpi-month-status-badge.is-submitted { border-color: color-mix(in srgb, var(--color-accent-gold) 55%, var(--color-border)); color: var(--color-accent-700); background: var(--color-accent-100); }
.kpi-month-status-badge.is-approved { border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); color: var(--color-success); background: var(--color-success-100); }
.kpi-month-status-badge.is-returned { border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); color: var(--color-danger); background: var(--color-danger-100); }
.kpi-month-meta { display: grid; gap: .65rem; margin: 0; }
.kpi-month-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--color-border); padding-bottom: .55rem; }
.kpi-month-meta dt { color: var(--color-ink-muted); font-size: .74rem; }
.kpi-month-meta dd { margin: 0; color: var(--color-ink-dark); font-size: .82rem; font-weight: 750; text-align: right; }
.kpi-month-self-card { display: grid; gap: .8rem; }
.kpi-month-self-card .kpi-month-card-heading { margin-bottom: 0; }
.kpi-month-field { display: grid; gap: .38rem; color: var(--color-ink-dark); font-size: .78rem; font-weight: 750; }
.kpi-month-field textarea { width: 100%; min-height: 7rem; resize: vertical; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: .75rem; color: var(--color-ink-dark); background: var(--color-home-wash); font: .84rem/1.45 var(--font-body); }
.kpi-month-field textarea:focus { outline: none; border-color: var(--color-accent-gold); box-shadow: var(--shadow-focus); }
.kpi-month-field textarea:disabled { cursor: not-allowed; opacity: .62; }
.kpi-month-field small { color: var(--color-ink-muted); font-size: .68rem; font-weight: 500; text-align: right; }
.kpi-save-state { min-height: 1rem; color: var(--color-success); font-size: .68rem; font-weight: 750; }
.kpi-final-status { margin: 0; color: var(--color-ink-muted); font-size: .75rem; line-height: 1.45; }
.kpi-month-auto-note { margin: 0; color: var(--color-ink-muted); font-size: .7rem; line-height: 1.4; }
.kpi-month-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-month-actions button { width: 100%; min-height: 2.35rem; }
.kpi-month-actions button:last-child { grid-column: span 2; }
.kpi-month-actions button:focus-visible,
.kpi-document-actions button:focus-visible,
.kpi-month-field textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-task-blue) 45%, transparent); outline-offset: 2px; }

@media (max-width: 1080px) {
  .kpi-month-layout { grid-template-columns: minmax(0, 1fr); }
  .kpi-month-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 700px) {
  .kpi-document-toolbar { align-items: stretch; flex-direction: column; }
  .kpi-document-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-document-actions button { width: 100%; }
  .kpi-document-viewport { margin-inline: -.15rem; }
  .kpi-document-paper { min-width: 640px; padding: 1.15rem; font-size: .84rem; }
  .kpi-document-title-block { margin: 1.35rem 0 1rem; }
  .kpi-document-masthead strong { font-size: .75rem; }
  .kpi-document-summary dl > div { grid-template-columns: 10rem 1fr; }
  .kpi-month-rail { grid-template-columns: 1fr; }
  .kpi-month-actions { grid-template-columns: 1fr; }
  .kpi-month-actions button:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kpi-document-actions button,
  .kpi-month-actions button,
  .kpi-month-field textarea { transition: none; }
}
@media print {
  .kpi-dashboard-view > :not(.kpi-month-panel),
  .kpi-document-toolbar,
  .kpi-month-rail { display: none !important; }
  .kpi-month-panel, .kpi-month-layout, .kpi-document-column, .kpi-document-viewport { display: block !important; max-height: none; padding: 0; border: 0; background: #fff; }
  .kpi-document-paper { width: 100%; min-width: 0; box-shadow: none; }
}

@media (max-width: 1080px) {
  .kpi-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-status-time { display: none; }
}

@media (max-width: 700px) {
  #view-dashboard,
  #view-dashboard .dashboard-main,
  #view-dashboard .dashboard-grid,
  #view-dashboard .kpi-dashboard-view { min-width: 0; max-width: 100%; }
  #view-dashboard .app-header { min-height: 74px; padding: 0 0.75rem; }
  #view-dashboard .header-shell { flex-wrap: wrap; gap: 0.35rem 0.65rem; }
  #view-dashboard .header-logo-lockup { min-width: 0; }
  #view-dashboard .header-logo-meta { min-width: 0; }
  #view-dashboard .header-logo-wordmark { font-size: 0.98rem; }
  .header-organization-switch { order: 2; margin-left: auto; margin-right: 0; }
  .header-organization-switch > span { display: none; }
  .header-organization-switch select { max-width: 145px; font-size: 0.66rem; }
  #view-dashboard .navbar-menu { order: 3; width: 100%; margin-left: 0; overflow-x: auto; justify-content: flex-start; }
  #view-dashboard .nav-item { flex: 0 0 auto; min-height: 34px; padding: 0.45rem 0.7rem; font-size: 0.62rem; }
  #view-dashboard .nav-item .nav-label { display: inline; }
  .kpi-dashboard-view { padding: 1rem; }
  .kpi-page-tabs { overflow-x: auto; }
  .kpi-page-tab { flex: 0 0 auto; }
  .kpi-view-header, .kpi-status-strip, .kpi-table-heading { align-items: stretch; flex-direction: column; }
  .kpi-view-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-view-actions > button { flex: 1; }
  .kpi-view-actions > * { width: 100%; min-width: 0; }
  .kpi-status-value { margin-right: 0; }
  .kpi-stat-grid { grid-template-columns: 1fr; }
  .kpi-final-fields { grid-template-columns: 1fr; padding: 1rem; }
  .kpi-final-card > .kpi-status-strip { margin: 0 1rem 1rem; }
  .kpi-review-modal-body { padding: 0 1rem 1rem; }
  .kpi-status-strip .btn-primary-sm, .kpi-status-strip .btn-quiet-sm { width: 100%; }
  .kpi-table-hint { display: none; }
  .kpi-common-toolbar { align-items: flex-start; flex-direction: column; }
  .kpi-common-toolbar > .kpi-common-toolbar-actions { width: 100%; justify-content: space-between; }
}

/* Task self-evaluation sheet */
.task-evaluation-modal {
  width: min(100%, 62.5rem);
  max-width: 62.5rem;
  max-height: calc(100vh - 2rem);
  border-radius: 1rem;
}

.task-evaluation-header {
  padding: 1.35rem 1.6rem 0.75rem;
  border-bottom: 0;
}

.task-evaluation-header .modal-header-desc h3 {
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

.task-evaluation-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100vh - 9.5rem);
  padding: 0 1.6rem 1rem;
  overflow-y: auto;
}

.task-evaluation-summary {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1.2fr 1.15fr;
  gap: 0.65rem 1.25rem;
  padding: 0.8rem 0.75rem;
  border: 1px solid #e1e4e9;
  border-radius: 0.45rem;
  background: #f7f8fa;
  color: #263142;
  font-size: 0.78rem;
}

.task-evaluation-summary > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.task-evaluation-summary > div:nth-child(2) {
  grid-column: 2 / -1;
}

.task-evaluation-summary > div:nth-child(4) {
  grid-column: 3;
}

.task-evaluation-summary > div:nth-child(5) {
  grid-column: 1;
}

.task-evaluation-summary span {
  flex: 0 0 auto;
  color: #8a919d;
}

.task-evaluation-summary strong {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.task-evaluation-summary-points {
  color: #2f8241 !important;
  font-size: 0.95rem;
  font-weight: 800 !important;
}

.task-evaluation-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.task-evaluation-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.75rem;
}

.task-evaluation-section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.2rem 0.55rem;
  border-bottom: 1px solid #e4e7eb;
  color: #3e609f;
  font-size: 0.76rem;
  font-weight: 800;
}

.task-evaluation-section-title svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.task-evaluation-reviewer-group {
  margin-bottom: 0.1rem;
}

.task-evaluation-reviewer-group label,
.task-evaluation-date-group label,
.task-evaluation-score-row > label {
  color: #8b93a0;
  font-size: 0.75rem;
  font-weight: 500;
}

.task-evaluation-select,
.task-evaluation-date-group input {
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #e1e4e9;
  border-radius: 0.65rem;
  background: #fff;
  color: #344054;
  font: 0.78rem/1.2 var(--font-body);
  box-shadow: 0 2px 3px rgb(25 35 51 / 0.07);
}

.task-evaluation-select:focus,
.task-evaluation-date-group input:focus,
.task-evidence-note-group textarea:focus {
  outline: none;
  border-color: #6c8fe4;
  box-shadow: 0 0 0 3px rgb(93 126 218 / 0.14);
}

.task-evaluation-score-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  background: #fff;
}

.task-evaluation-card-title {
  width: max-content;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.task-score-quantity .task-evaluation-card-title { color: #ef8b16; }
.task-score-quality .task-evaluation-card-title { color: #a442c3; }
.task-score-progress .task-evaluation-card-title { color: #009ebd; }

.task-evaluation-card-icon {
  display: inline-block;
  width: 1rem;
  margin-right: 0.2rem;
  font-weight: 900;
  text-align: center;
}

.task-evaluation-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(6.5rem, 1.15fr);
  gap: 0.55rem;
  align-items: center;
}

.task-evaluation-score-row > label,
.task-evaluation-score-label {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  padding: 0.45rem 0.65rem;
  border-radius: 0.6rem;
  background: #fff;
  box-shadow: 0 2px 3px rgb(25 35 51 / 0.07);
}

.task-evaluation-score-label {
  justify-content: space-between;
  background: #e8f7f1;
  color: #7d8c88;
  font-size: 0.72rem;
}

.task-evaluation-score-label strong {
  color: #263142;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.task-evaluation-date-group {
  grid-column: 1 / -1;
  margin-top: 0.05rem;
}

.task-evidence-panel {
  min-height: 100%;
}

.task-evidence-note-group {
  flex: 1;
}

.task-evidence-note-group textarea {
  width: 100%;
  min-height: 12rem;
  resize: vertical;
  padding: 0.8rem;
  border: 1px solid #e1e4e9;
  border-radius: 0.7rem;
  background: #fff;
  color: #344054;
  font: 0.78rem/1.45 var(--font-body);
  box-shadow: 0 2px 3px rgb(25 35 51 / 0.07);
}

.task-evidence-dropzone {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px dashed #7290e6;
  border-radius: 0.65rem;
  color: #5474d3;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.task-evidence-dropzone:hover,
.task-evidence-dropzone.is-dragging {
  border-color: #3c62ce;
  background: #f2f5ff;
}

.task-evidence-dropzone em {
  color: #6f7784;
  font-style: normal;
}

.task-evidence-dropzone-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.task-evidence-file-name,
.task-evidence-help {
  margin: -0.25rem 0 0;
  color: #8b93a0;
  font-size: 0.68rem;
}

.task-evidence-file-name:empty {
  display: none;
}

.task-evaluation-total {
  display: flex;
  min-height: 4.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  background: #f0f1f2;
}

.task-evaluation-total > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.task-evaluation-total > div strong {
  color: #626a72;
  font-size: 0.75rem;
}

.task-evaluation-total > div span {
  color: #9ba1a7;
  font-size: 0.68rem;
  font-style: italic;
}

.task-evaluation-total > strong {
  color: #2f8241;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.task-evaluation-footer {
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1.6rem 1.25rem;
  border-top: 0;
}

.task-evaluation-footer button {
  min-height: 2.25rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.74rem;
}

.task-evaluation-save:disabled {
  border-color: #e7ebf5;
  background: #f0f3fb;
  color: #b7c0d9;
  cursor: not-allowed;
}

@media (max-width: 800px) {
  .task-evaluation-modal { max-height: calc(100vh - 1rem); }
  .task-evaluation-body { max-height: calc(100vh - 8rem); padding-inline: 1rem; }
  .task-evaluation-header { padding-inline: 1rem; }
  .task-evaluation-columns { grid-template-columns: 1fr; }
  .task-evaluation-summary { grid-template-columns: 1fr 1fr; }
  .task-evaluation-summary > div:nth-child(2) { grid-column: 1 / -1; }
  .task-evaluation-summary > div:nth-child(4),
  .task-evaluation-summary > div:nth-child(5) { grid-column: auto; }
  .task-evaluation-footer { flex-wrap: wrap; padding-inline: 1rem; }
}

@media (max-width: 520px) {
  .task-evaluation-score-row { grid-template-columns: 1fr 1fr; }
  .task-evaluation-score-label { grid-column: 1 / -1; }
  .task-evaluation-total { align-items: flex-start; }
  .task-evaluation-total > strong { margin-top: 0.25rem; }
}

/* Keep the creation modal wide in both "Việc tôi tạo" and "Việc đã giao". */
.modal-card.task-create-modal {
  width: min(calc(100vw - 2rem), 116rem) !important;
  max-width: none !important;
}

.modal-card.task-create-modal .task-advanced-fields {
  display: none !important;
}

@media (max-width: 620px) {
  .modal-card.task-create-modal {
    width: calc(100vw - 1rem) !important;
  }
}

/* "Việc tôi tạo" keeps the compact one-column creation form. */
.modal-card.task-create-modal:not(.is-assignment-mode) {
  width: min(calc(100vw - 2rem), 42rem) !important;
  max-width: 42rem !important;
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-info-panel,
.task-create-modal:not(.is-assignment-mode) .task-assignment-people-panel {
  display: contents;
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-panel-heading {
  display: none;
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-panel-body {
  display: contents;
}

.task-create-modal:not(.is-assignment-mode) .task-definition-with-factor {
  display: contents;
}

.task-create-modal:not(.is-assignment-mode) .task-date-row {
  grid-column: 1 / -1;
  grid-row: 1;
}

.task-create-modal:not(.is-assignment-mode) .task-definition-field {
  grid-column: 1 / -1;
  grid-row: 2;
}

.task-create-modal:not(.is-assignment-mode) .task-content-field {
  grid-column: 1 / -1;
  grid-row: 3;
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-factor {
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.8rem;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  background: #f0f1f3;
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-quantity {
  grid-column: 2;
  grid-row: 4;
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-participants,
.task-create-modal:not(.is-assignment-mode) .task-assignment-participant-row {
  display: contents;
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-participant-row > .input-group:first-child,
.task-create-modal:not(.is-assignment-mode) .task-assignment-converted,
.task-create-modal:not(.is-assignment-mode) .task-assignment-remove {
  display: none;
}

.task-create-modal:not(.is-assignment-mode) .task-assignment-percent-field {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
}

.task-create-modal:not(.is-assignment-mode) .task-self-converted-summary {
  grid-column: 1 / -1;
  grid-row: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  background: #f0f1f3;
  color: var(--color-ink-dark);
  font-size: 0.74rem;
  font-weight: 600;
}

.task-create-modal:not(.is-assignment-mode) .task-self-converted-summary strong {
  color: var(--color-task-green-ink);
  font-size: 1.1rem;
  font-weight: 800;
}

.task-create-modal:not(.is-assignment-mode) .modal-body {
  max-height: none;
}

.task-create-modal:not(.is-assignment-mode) .modal-header-desc p {
  display: none;
}

.task-child-assignee-summary,
.task-child-status-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

#view-dashboard .task-child-assignee-summary .task-assignee-score {
  display: inline-flex;
  gap: 0.42rem;
}

.task-child-status-list .badge {
  white-space: nowrap;
}

@media (max-width: 620px) {
  .modal-card.task-create-modal:not(.is-assignment-mode) {
    width: calc(100vw - 1rem) !important;
    max-width: none !important;
  }

  .task-create-modal:not(.is-assignment-mode) .task-assignment-layout {
    grid-template-columns: 1fr;
  }

  .task-create-modal:not(.is-assignment-mode) .task-assignment-quantity,
  .task-create-modal:not(.is-assignment-mode) .task-assignment-percent-field {
    grid-column: 1;
  }

  /* Stack the shared participation and quantity controls instead of overlapping row 4. */
  .task-create-modal:not(.is-assignment-mode) .task-assignment-quantity {
    grid-row: 5;
  }

  .task-create-modal:not(.is-assignment-mode) .task-assignment-factor {
    grid-row: 6;
  }

  .task-create-modal:not(.is-assignment-mode) .task-self-converted-summary {
    grid-row: 7;
  }
}

/* Profile redesign: quiet editorial layout with a clear identity rail. */
#view-profile.workspace-card {
  padding: clamp(1.15rem, 2.8vw, 2.75rem);
  border-radius: 28px;
  background: linear-gradient(145deg, #fffdf9 0%, #f8f3eb 100%);
  border-color: rgba(145, 117, 65, 0.2);
  box-shadow: 0 20px 55px rgba(63, 45, 22, 0.08);
}

#view-profile .card-header {
  align-items: center;
  margin-bottom: 1.7rem;
  padding-bottom: 1.5rem;
  border-bottom-color: rgba(145, 117, 65, 0.18);
}

#view-profile .card-title {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

#view-profile .card-subtitle {
  max-width: 54ch;
  margin-top: 0.65rem;
}

#view-profile #btn-change-password {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
  border-radius: 12px;
}

#view-profile #btn-change-password span:last-child {
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

#view-profile #btn-change-password:hover span:last-child {
  transform: translate(2px, -2px);
}

#view-profile .profile-layout {
  grid-template-columns: minmax(235px, 0.32fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

#view-profile .profile-left {
  align-items: flex-start;
  min-height: 100%;
  padding: 1.5rem;
  border: 0;
  border-radius: 22px;
  background: var(--color-paper-obsidian);
  box-shadow: 0 16px 30px rgba(27, 22, 15, 0.16);
}

#view-profile .avatar-container {
  width: 132px;
  height: 132px;
  margin: 0 0 1.15rem;
  border: 1px solid var(--color-accent-gold);
  border-radius: 28px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.2);
}

#view-profile .profile-avatar-ph {
  font-size: 3.25rem;
  background: linear-gradient(145deg, #25354a, #111b29);
}

#view-profile .btn-change-avatar {
  align-self: flex-start;
  margin-bottom: 1.65rem;
  padding: 0.55rem 0.85rem;
  color: #f8e6b5;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(248, 230, 181, 0.32);
  border-radius: 10px;
  box-shadow: none;
}

#view-profile .btn-change-avatar:hover {
  color: #fff8e7;
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--color-accent-gold);
}

#view-profile .profile-left h3 {
  width: 100%;
  margin-bottom: 0.5rem;
  color: #fffaf0;
  font-size: 1.55rem;
  line-height: 1.15;
  text-align: left;
  text-wrap: balance;
}

#view-profile .profile-pos,
#view-profile .profile-dept {
  width: 100%;
  text-align: left;
}

#view-profile .profile-pos {
  color: #e8c873;
  font-size: 0.72rem;
}

#view-profile .profile-dept {
  color: rgba(255, 250, 240, 0.65);
  line-height: 1.45;
}

#view-profile .profile-identity-details {
  display: grid;
  width: 100%;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#view-profile .profile-identity-details div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
}

#view-profile .profile-identity-details span {
  color: rgba(255, 250, 240, 0.56);
  font-size: 0.72rem;
}

#view-profile .profile-identity-details strong {
  color: #fffaf0;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
}

#view-profile .profile-identity-details div:first-child strong {
  color: #bde6b0;
}

#view-profile .profile-right {
  gap: 1rem;
}

#view-profile .info-section {
  gap: 1.05rem;
  padding: 1.25rem;
  border: 1px solid rgba(145, 117, 65, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(63, 45, 22, 0.035);
}

#view-profile .info-section-title {
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

#view-profile .info-section-title span {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 9px;
  background: #f3e8d2;
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: #8f6c2d;
}

#view-profile .info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

#view-profile .info-cell {
  min-height: 70px;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(145, 117, 65, 0.11);
  border-radius: 12px;
  background: #fcfaf6;
}

#view-profile .cell-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

#view-profile .cell-value {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  #view-profile .profile-left {
    align-items: center;
    min-height: auto;
  }

  #view-profile .profile-left h3,
  #view-profile .profile-pos,
  #view-profile .profile-dept {
    text-align: center;
  }

  #view-profile .btn-change-avatar {
    align-self: center;
  }

  #view-profile .profile-identity-details {
    max-width: 360px;
  }
}

@media (max-width: 620px) {
  #view-profile.workspace-card {
    padding: 1rem;
    border-radius: 18px;
  }

  #view-profile .card-header {
    align-items: flex-start;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
  }

  #view-profile .card-header .btn-primary-sm {
    width: 100%;
    justify-content: center;
  }

  #view-profile .profile-layout,
  #view-profile .info-grid {
    grid-template-columns: 1fr;
  }

  #view-profile .info-section {
    padding: 1rem;
  }
}

/* Work status scale: negative -> in progress -> positive. */
.status-dot.dot-blue,
.status-dot.dot-red {
  background-color: var(--color-danger) !important;
}

.status-dot.dot-purple,
.status-dot.dot-orange {
  background-color: var(--color-accent-gold) !important;
}

.status-dot.dot-green {
  background-color: var(--color-success) !important;
}

.home-legend-item i.is-danger {
  background: var(--color-danger);
}

.home-legend-item i.is-accent {
  background: var(--color-accent-gold);
}

.home-legend-item i.is-success {
  background: var(--color-success);
}

.home-legend-item i.is-neutral {
  background: var(--color-home-neutral);
}

.home-legend-item.is-danger {
  color: var(--color-danger);
  background: transparent;
}

.home-legend-item.is-accent {
  color: var(--color-accent-gold-dim);
  background: transparent;
}

.home-legend-item.is-success {
  color: var(--color-success);
  background: transparent;
}

.home-legend-item.is-neutral {
  color: var(--color-home-neutral);
  background: transparent;
}

.home-legend-item.is-danger strong,
.home-legend-item.is-accent strong,
.home-legend-item.is-success strong,
.home-legend-item.is-neutral strong {
  color: inherit;
}

.home-meter.is-negative span {
  --meter-color: var(--color-danger);
  background: var(--meter-color);
}

.home-meter.is-warning span {
  --meter-color: var(--color-accent-gold);
  background: var(--meter-color);
}

.home-meter.is-positive span {
  --meter-color: var(--color-success);
  background: var(--meter-color);
}

.home-meter.is-segmented span {
  background: var(--meter-gradient);
  transform: scaleX(1);
}

.home-meter span::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
}

/* Management analysis card: compact rows with a clear reading order. */
.home-management-card {
  padding: 1rem 1.25rem 1.15rem;
  border-color: #e4e9f0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(32, 52, 79, 0.04);
}

.home-management-card:hover {
  transform: none;
  border-color: #d8e1ec;
  box-shadow: 0 12px 28px rgba(32, 52, 79, 0.07);
}

.home-management-header {
  align-items: center;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e4e9f0;
}

.home-management-header .home-card-index {
  display: none;
}

.home-management-header h2 {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.home-management-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.home-management-count {
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: #e8eef7;
  color: #174a8b;
  font-weight: 700;
}

.home-management-actions .home-text-action {
  color: #416bd6;
  font-size: 0.82rem;
}

.home-management-actions .home-text-action span {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 1.2rem;
  line-height: 0;
  vertical-align: -0.08em;
}

.home-management-card .home-metric-row {
  gap: 0.65rem;
  padding: 1.05rem 0;
  border-bottom-color: #edf0f4;
}

.home-management-card .home-metric-copy > span {
  display: none;
}

.home-management-card .home-metric-copy strong {
  font-size: 0.96rem;
  letter-spacing: -0.01em;
}

.home-management-card .home-meter {
  height: 0.6rem;
  background: #eef2f7;
}

.home-management-card .home-legend {
  gap: 0.7rem 1.15rem;
}

.home-management-card .home-legend-item {
  font-size: 0.83rem;
  color: #233b5c;
}

.home-management-card .home-legend-item em {
  color: #98a7bb;
  font-style: normal;
}

.home-management-card .home-legend-item.is-danger {
  color: #b8222b;
}

.home-management-card .home-legend-item.is-accent {
  color: #a26b00;
}

.home-management-card .home-legend-item.is-success {
  color: #1f9d68;
}

/* Hallmark · component: leaderboard-card · restrained ranking surface for KPI results. */
.home-leaderboard-card {
  margin-top: 1rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border-color: #e8dfc4;
  background: #fffdf8;
}

.home-leaderboard-header {
  align-items: center;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #ece7dc;
}

.home-leaderboard-header .home-card-index {
  color: #92711e;
}

.home-leaderboard-header h2 {
  font-size: 1.1rem;
}

.home-leaderboard-scope {
  max-width: 45%;
  color: var(--color-ink-muted);
  font-size: 0.78rem;
  font-style: italic;
  text-align: right;
}

.home-leaderboard-list {
  display: grid;
  gap: 0.7rem;
  padding-top: 0.85rem;
}

.home-leaderboard-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e7ebf0;
  border-radius: 0.8rem;
  background: #fff;
}

.home-leaderboard-row:first-child {
  border-color: #f1c94a;
  background: #fffbea;
}

.home-rank-medal {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 50%;
  background: #aeb8c4;
  color: #fff;
  box-shadow: 0 3px 8px rgb(40 54 69 / 12%);
}

.home-rank-medal svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

.home-rank-medal.is-rank-1 { background: #edbc16; }
.home-rank-medal.is-rank-3 { background: #bf8540; }

.home-leaderboard-person {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.home-leaderboard-person strong {
  overflow: hidden;
  color: var(--color-ink-dark);
  font-size: 0.96rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-leaderboard-person em {
  overflow: hidden;
  color: var(--color-ink-muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-leaderboard-rating {
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  background: #e9f7f0;
  color: #168753;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.home-leaderboard-score {
  min-width: 4.8rem;
  color: #15904f;
  font-family: var(--font-display);
  font-size: 1rem;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .home-management-header {
    align-items: flex-start;
  }

  .home-management-actions {
    justify-content: flex-start;
  }

  .home-leaderboard-card {
    margin-top: var(--space-3);
    padding: var(--space-4);
  }

  .home-leaderboard-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .home-leaderboard-scope {
    max-width: 100%;
    text-align: left;
  }

  .home-leaderboard-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.65rem;
  }

  .home-leaderboard-rating {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .home-leaderboard-score {
    grid-column: 3;
    grid-row: 1;
  }
}

.modal-overlay:not(.hide) > .home-year-tasks-modal {
  animation: hm-modal-in var(--dur-slow) var(--ease-out) both;
}

.home-year-tasks-modal {
  width: min(100%, 62rem);
  max-height: min(90vh, 52rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e7ef;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 2rem 4rem rgba(20, 36, 62, 0.2);
}

.home-year-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem 1rem;
}

.home-year-tasks-header h3 {
  color: #102b55;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: -0.035em;
}

.home-year-tasks-header h3 b {
  display: inline-grid;
  min-width: 2.1rem;
  height: 2.1rem;
  margin-left: 0.35rem;
  padding: 0 0.55rem;
  place-items: center;
  border-radius: 999px;
  background: #526ed4;
  color: #fff;
  font-size: 0.86rem;
  vertical-align: 0.18em;
}

.home-year-tasks-close {
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #526ed4;
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
}

.home-year-tasks-close:hover {
  background: #eef2ff;
}

.home-year-tasks-table-wrap {
  min-height: 16rem;
  max-height: 32rem;
  margin: 0 2rem;
  overflow: auto;
  border-top: 1px solid #e7ebf2;
  border-bottom: 1px solid #e7ebf2;
}

.home-year-tasks-table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  color: #19345d;
  font-size: 0.88rem;
}

.home-year-tasks-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.85rem 0.75rem;
  background: #3975ce;
  color: #fff;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.home-year-tasks-table th:first-child,
.home-year-tasks-table td:first-child {
  width: 3.5rem;
  text-align: center;
}

.home-year-tasks-table td {
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid #edf0f4;
  vertical-align: middle;
}

.home-year-tasks-table tbody tr:hover {
  background: #f8faff;
}

.home-year-task-title {
  min-width: 14rem;
  font-weight: 600;
}

.home-year-task-status,
.home-year-task-condition {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.home-year-task-status.is-success {
  border-color: #9ce6c8;
  background: #edfff7;
  color: #15945f;
}

.home-year-task-status.is-progress {
  border-color: #f0cb72;
  background: #fff8e5;
  color: #a26b00;
}

.home-year-task-status.is-pending {
  border-color: #f1a1a1;
  background: #fff0f0;
  color: #c42a32;
}

.home-year-task-status.is-neutral,
.home-year-task-condition.is-neutral {
  border-color: #dce3ee;
  background: #f4f6fa;
  color: #6f7f95;
}

.home-year-task-condition.is-due {
  border-color: #ffc98e;
  background: #fff8ee;
  color: #e67a14;
}

.home-year-task-condition.is-overdue {
  border-color: #f1a1a1;
  background: #fff0f0;
  color: #c42a32;
}

.home-year-tasks-empty {
  height: 14rem;
  color: #7889a0;
  text-align: center !important;
}

.home-year-tasks-footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  color: #7b8ba2;
  font-size: 0.82rem;
}

.home-year-tasks-footer label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.home-year-tasks-footer select {
  border: 0;
  background: transparent;
  color: #4264c5;
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 700;
}

.home-year-tasks-pagination {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.home-year-tasks-pagination button {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4264c5;
  cursor: pointer;
  font: 600 0.8rem/1 var(--font-display);
}

.home-year-tasks-pagination button:hover:not(:disabled),
.home-year-tasks-pagination button.is-active {
  background: #526ed4;
  color: #fff;
}

.home-year-tasks-pagination button:disabled {
  color: #b4bfd0;
  cursor: not-allowed;
}

.home-year-tasks-pagination span {
  color: #8a9ab1;
}

.home-year-tasks-actions {
  display: flex;
  justify-content: center;
  padding: 0 2rem 1.5rem;
}

@media (max-width: 700px) {
  .home-year-tasks-header,
  .home-year-tasks-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .home-year-tasks-table-wrap {
    margin-right: 1rem;
    margin-left: 1rem;
  }

  .home-year-tasks-footer {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }

  .home-year-tasks-pagination {
    width: 100%;
    margin-left: 0;
  }

  .home-year-tasks-actions {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

/* Profile edit modal — compact identity-first layout */
.profile-edit-modal {
  width: min(100%, 960px);
  max-width: 960px;
  border: 1px solid rgba(145, 117, 65, 0.2);
  border-radius: 24px;
  background: #fbfaf7;
  box-shadow: 0 28px 70px rgba(35, 28, 18, 0.2);
}

.profile-edit-header {
  position: relative;
  padding: 1.65rem 1.9rem 1.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, #fffdf9 0%, #f4eddf 100%);
  border-bottom-color: rgba(145, 117, 65, 0.16);
}

.profile-edit-header::after {
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 13rem;
  height: 13rem;
  border: 1px solid rgba(145, 117, 65, 0.15);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 1.4rem rgba(145, 117, 65, 0.05), 0 0 0 2.8rem rgba(145, 117, 65, 0.035);
  pointer-events: none;
}

.profile-edit-header .modal-header-desc {
  position: relative;
  z-index: 1;
  padding-left: 0.9rem;
  border-left: 3px solid var(--color-accent-gold);
}

.profile-edit-kicker {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-accent-gold-dim);
  font: 700 0.66rem/1 var(--font-display);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.profile-edit-modal .modal-header-desc h3 {
  color: var(--color-ink-dark);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.035em;
}

.profile-edit-modal .modal-header-desc p {
  max-width: 48ch;
  margin-top: 0.45rem;
  color: var(--color-ink-muted);
  line-height: 1.5;
}

.profile-edit-modal .modal-close {
  position: relative;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(145, 117, 65, 0.2);
  border-radius: 10px;
  color: var(--color-ink-muted);
  font-size: 1.35rem;
  line-height: 1;
}

.profile-edit-modal .modal-close:hover {
  color: var(--color-ink-dark);
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--color-accent-gold-dim);
}

.profile-edit-modal .error-banner {
  margin: 1rem 1.6rem 0;
}

.profile-edit-body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  align-items: start;
  gap: 1rem;
  max-height: 68vh;
  padding: 1.35rem 1.6rem 1.5rem;
  background: #fbfaf7;
}

.profile-edit-section {
  min-width: 0;
  gap: 1.1rem;
  padding: 1.15rem;
  border: 1px solid rgba(145, 117, 65, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
}

.profile-edit-section .modal-section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0 0 0.75rem;
  border-bottom-color: rgba(145, 117, 65, 0.16);
  color: var(--color-ink-dark);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.profile-edit-section .modal-section-title::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 8px;
  background: #f3e8ce;
  color: var(--color-accent-gold-dim);
  content: "✦";
  font-size: 0.78rem;
}

.profile-edit-locked .modal-section-title::before {
  background: #edf0f2;
  color: #66717d;
  content: "⌁";
}

.profile-edit-modal .form-row {
  gap: 0.8rem;
}

.profile-edit-modal .input-group {
  gap: 0.4rem;
}

.profile-edit-modal .input-group label {
  color: #6b6f75;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.profile-edit-modal .input-group input {
  min-height: 43px;
  border-color: #e1d9ca;
  border-radius: 10px;
  background: #fffefa;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.profile-edit-modal .input-group input:focus {
  border-color: var(--color-accent-gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(183, 139, 63, 0.13);
}

.profile-edit-modal .input-hint,
.profile-edit-modal .readonly-sub-notice {
  color: #8a867e;
  font-size: 0.68rem;
  line-height: 1.5;
}

.profile-edit-locked {
  background: #f1f3f4;
  border-color: #dde2e4;
}

.profile-edit-locked .readonly-input-wrapper input {
  color: #737b84;
  background: #e9edef;
  border-color: #dbe0e2;
}

.profile-edit-locked .readonly-value {
  min-height: 43px;
  padding: 0.72rem 2.25rem 0.72rem 1rem;
  border: 1px dashed #dbe0e2;
  border-radius: 10px;
  background: #e9edef;
  color: #737b84;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-edit-locked .readonly-sub-notice {
  margin: 0;
  padding-top: 0.25rem;
}

.profile-edit-footer {
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.6rem 1.35rem;
  background: #f4efe6;
  border-top-color: rgba(145, 117, 65, 0.16);
}

.profile-edit-footer .btn-outline,
.profile-edit-footer .btn-primary {
  min-width: 112px;
  min-height: 40px;
  border-radius: 10px;
}

@media (max-width: 720px) {
  .profile-edit-body {
    grid-template-columns: 1fr;
    max-height: 70vh;
  }

  .profile-edit-header,
  .profile-edit-body,
  .profile-edit-footer {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .profile-edit-modal .error-banner {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}

/* Page containers: the split views occupy the complete workspace. */
#view-dashboard .dashboard-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#dashboard-page-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

#dashboard-page-content > .home-dashboard-view:not(.hide),
#dashboard-page-content > #view-profile:not(.hide),
#dashboard-page-content > #view-personal-tasks:not(.hide),
#view-dashboard > .dashboard-body > .dashboard-grid .dashboard-main > #view-kpi-dashboard:not(.hide) {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

#dashboard-page-content > #view-personal-tasks:not(.hide) {
  min-height: 0;
  height: 100%;
}

@property --ring-progress-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Hallmark · component: current-period-progress · genre: modern-minimal · theme: Atelier
 * scope: home dashboard card · preserves card geometry
 * states: default · loading · success · reduced-motion
 * motion: one-shot arc draw · synchronized count-up · duration 2s
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */
body:has(#view-home-dashboard:not(.hide)) .home-month-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-month-summary {
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-4), 2.5vw, var(--space-5));
  min-height: 0;
  padding: var(--space-5) var(--space-2) var(--space-2);
  text-align: center;
}

body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-progress-ring {
  width: clamp(9.75rem, 12vw, 11rem);
  background: conic-gradient(
    from 0deg,
    var(--color-home-progress-start) 0deg,
    var(--color-home-progress-end) var(--ring-progress-angle),
    var(--color-home-progress-track) var(--ring-progress-angle) 1turn
  );
  filter: drop-shadow(0 0.45rem 0.8rem var(--color-home-progress-glow));
  transition: --ring-progress-angle var(--dur-ring) var(--ease-out);
}

body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-progress-ring-inner {
  width: calc(100% - 2.25rem);
  height: calc(100% - 2.25rem);
}

body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-month-copy {
  display: grid;
  justify-items: center;
  max-width: 12rem;
  text-align: center;
}

body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-month-copy p {
  max-width: 12rem;
}

@media (max-width: 900px) {
  body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-month-summary {
    flex-direction: column;
    gap: var(--space-3);
    padding-block: var(--space-5) var(--space-2);
  }

  body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-progress-ring {
    width: clamp(10rem, 46vw, 11rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#view-home-dashboard:not(.hide)) .home-month-card .home-progress-ring {
    transition: none;
  }

}

@media (max-width: 900px) {
  #view-dashboard .dashboard-main {
    min-height: calc(100svh - 76px);
  }

  #dashboard-page-content > #view-personal-tasks:not(.hide) {
    height: auto;
  }
}

/* Hallmark · mobile app shell · macrostructure: Workbench / bottom navigation
 * Scope: small screens only · desktop geometry intentionally preserved
 * Motion: tactile press feedback · reduced-motion safe
 */
@media screen and (max-width: 720px) {
  :root {
    /* Keep the final content and bottom bar above mobile browser controls. */
    --mobile-nav-offset: max(var(--mobile-safe-bottom), 0.75rem);
    --mobile-content-bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-offset) + var(--space-4));
  }

  html {
    min-width: 320px;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    padding-bottom: var(--mobile-safe-bottom);
    background: var(--color-paper);
  }

  .top-accent-bar {
    position: fixed;
    top: 0;
    z-index: 200;
    height: 2px;
  }

  /* Compact app chrome. The desktop header remains untouched above 720px. */
  #view-dashboard .app-header {
    position: static;
    z-index: 110;
    min-height: 0;
    height: 0;
    padding: 0;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    animation: none;
    transform: none;
  }

  #view-dashboard .header-shell {
    display: block;
    height: 0;
  }

  #view-dashboard .header-logo-lockup,
  #view-dashboard .navbar-actions {
    display: none;
  }

  #view-dashboard .header-logo-lockup {
    min-width: 0;
    gap: var(--space-2);
  }

  #view-dashboard .header-logo-seal {
    width: 2.25rem;
    height: 2.25rem;
  }

  #view-dashboard .header-logo-meta {
    min-width: 0;
  }

  #view-dashboard .header-logo-kicker {
    display: none;
  }

  #view-dashboard .header-logo-wordmark {
    overflow: hidden;
    max-width: 8.25rem;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-dashboard .navbar-actions {
    gap: var(--space-1);
  }

  #view-dashboard .navbar-actions .header-user-trigger {
    min-height: 2.5rem;
    padding: 0;
  }

  #view-dashboard .navbar-actions .user-name,
  #view-dashboard .navbar-actions .dropdown-chevron {
    display: none;
  }

  #view-dashboard .navbar-actions .user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.7rem;
  }

  #view-dashboard .header-notification-trigger {
    width: 2.5rem;
    height: 2.5rem;
  }

  #view-dashboard .header-notification-panel {
    top: calc(var(--mobile-header-height) + var(--space-2));
    right: var(--mobile-gutter);
    width: min(22rem, calc(100vw - (var(--mobile-gutter) * 2)));
  }

  /* The primary navigation becomes a thumb-friendly app tab bar. */
  #view-dashboard .navbar-menu {
    position: fixed;
    right: 0;
    bottom: var(--mobile-nav-offset);
    left: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    height: var(--mobile-nav-height);
    margin: 0;
    padding: var(--space-2);
    gap: var(--space-1);
    overflow: visible;
    border-top: 1px solid var(--mobile-rule);
    background: oklch(99% 0.006 75 / 0.96);
    box-shadow: 0 -12px 32px oklch(14% 0.02 50 / 0.12);
    backdrop-filter: blur(18px);
  }

  #view-dashboard .navbar-menu .nav-item,
  #view-dashboard .navbar-menu .nav-profile-mobile {
    display: flex;
    min-width: 0;
    min-height: 3.4rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.18rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-ink-muted);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
  }

  #view-dashboard .navbar-menu .nav-item::after {
    display: none;
  }

  #view-dashboard .navbar-menu .nav-item:hover {
    color: var(--color-ink-dark);
    background: var(--color-home-neutral-soft);
  }

  #view-dashboard .navbar-menu .nav-item.active,
  #view-dashboard .navbar-menu #nav-profile-mobile.active,
  body:has(#view-profile:not(.hide)) #view-dashboard .navbar-menu #nav-profile-mobile {
    color: var(--color-accent-gold-dim);
    background: var(--color-home-accent-soft);
  }

  #view-dashboard .navbar-menu .nav-item-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  #view-dashboard .navbar-menu #nav-profile-mobile {
    display: flex;
  }

  #view-dashboard .dashboard-main {
    width: 100%;
    min-height: 0;
    padding: var(--space-3) var(--mobile-gutter) var(--mobile-content-bottom);
    overflow-y: visible;
  }

  #dashboard-page-content {
    min-height: 0;
  }

  /* Dashboard: one clear reading column, with touch-sized controls. */
  .home-dashboard-view {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-home-card);
  }

  .home-dashboard-topline {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
  }

  .home-dashboard-heading h1 {
    max-width: 14rem;
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.08;
    text-wrap: balance;
  }

  .home-dashboard-heading p {
    max-width: 30rem;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
  }

  .home-period-control {
    width: 100%;
  }

  .home-period-select-wrap,
  .home-period-select-wrap select {
    width: 100%;
  }

  .home-context-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .home-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  .home-dashboard-card,
  .home-management-card {
    min-width: 0;
    border-radius: var(--radius-md);
  }

  .home-card-header {
    align-items: flex-start;
    gap: var(--space-2);
  }

  .home-card-header h2 {
    font-size: 1rem;
    line-height: 1.25;
    text-wrap: balance;
  }

  .home-text-action {
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: var(--space-2) 0;
    font-size: 0.78rem;
  }

  .home-month-card .home-month-summary {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: var(--space-4);
    min-height: 11rem;
    padding: var(--space-4) 0 var(--space-2);
    text-align: left;
  }

  .home-month-card .home-progress-ring {
    width: clamp(8.5rem, 42vw, 10rem);
  }

  .home-month-card .home-month-copy {
    justify-items: start;
    max-width: 8rem;
    text-align: left;
  }

  .home-month-card .home-month-copy p {
    max-width: 8rem;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
  }

  .home-management-card {
    margin-top: var(--space-3);
    padding: var(--space-4);
  }

  .home-management-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .home-management-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .home-metric-row {
    padding: var(--space-3) 0;
  }

  .home-metric-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .home-legend {
    gap: var(--space-2) var(--space-3);
  }

  .home-legend-item {
    font-size: 0.72rem;
  }

  /* Work area: period + tabs read like a compact app control deck. */
  .personal-tasks-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .tasks-sidebar {
    width: 100%;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
  }

  .tasks-sidebar-top {
    gap: var(--space-3);
  }

  .period-picker-card {
    padding-bottom: var(--space-3);
  }

  .period-select {
    min-height: 2.75rem;
  }

  .nav-section .nav-kicker {
    display: none;
  }

  .nav-list {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: row;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: 0.15rem;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .nav-list::-webkit-scrollbar {
    display: none;
  }

  .nav-list-item {
    flex: 0 0 auto;
    width: max-content;
    border: 1px solid var(--mobile-rule);
    border-radius: var(--radius-pill);
    background: var(--mobile-surface);
  }

  .nav-list-item a {
    padding: 0.58rem 0.78rem;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .nav-list-item.active {
    border-color: var(--color-paper-obsidian);
    background: var(--color-paper-obsidian);
  }

  .nav-list-item.active a {
    color: var(--color-accent-gold);
  }

  .nav-count-badge {
    top: 0;
    right: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.6rem;
  }

  .tasks-sidebar-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .summary-block {
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }

  .summary-row {
    display: block;
    font-size: 0.72rem;
    line-height: 1.55;
  }

  .summary-row span {
    white-space: nowrap;
  }

  .summary-row.highlight {
    font-size: 0.8rem;
  }

  .tasks-main-content {
    width: 100%;
    min-height: 0;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    overflow-x: clip;
    overflow-y: visible;
  }

  .tasks-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .tasks-title {
    font-size: 1.18rem;
    line-height: 1.2;
  }

  .tasks-toolbar {
    width: 100%;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
  }

  .tasks-toolbar::-webkit-scrollbar {
    display: none;
  }

  .tasks-toolbar .tb-btn {
    flex: 0 0 auto;
    min-height: 2.65rem;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }

  .tasks-filter-tabs {
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }

  .tasks-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .filter-tab {
    flex: 0 0 auto;
    min-height: 2.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Turn each data row into a readable task card instead of shrinking a desktop table. */
  .tasks-table-wrapper {
    max-width: none;
    overflow: visible;
  }

  .tasks-table,
  .tasks-table tbody {
    display: grid;
    width: 100%;
    min-width: 0;
  }

  #view-personal-tasks .tasks-table {
    min-width: 0;
  }

  .tasks-table tbody {
    gap: var(--space-2);
  }

  .tasks-table thead {
    display: none;
  }

  .tasks-table tbody tr.task-group-row {
    display: block;
    margin-top: var(--space-2);
    border: 1px solid var(--mobile-rule);
    border-radius: var(--radius-md);
    background: var(--color-task-blue-soft);
  }

  .tasks-table tbody tr.task-group-row td {
    display: block;
    padding: 0;
    border: 0;
  }

  .tasks-table tbody tr.task-group-member {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 0 var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--mobile-rule);
    border-radius: var(--radius-md);
    background: var(--mobile-surface);
  }

  .tasks-table tbody tr.task-group-member td {
    min-width: 0;
    padding: 0.1rem 0;
    border: 0;
    font-size: 0.78rem;
  }

  .tasks-table tbody tr.task-group-member td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 3;
    padding-top: 0.18rem;
  }

  .tasks-table tbody tr.task-group-member td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-ink-muted);
    font-size: 0.72rem;
  }

  .tasks-table tbody tr.task-group-member td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    padding: var(--space-1) 0;
  }

  .tasks-table tbody tr.task-group-member td:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
    padding-top: var(--space-1);
  }

  .tasks-table tbody tr.task-group-member td:nth-child(5) {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-width: 7rem;
    padding-left: var(--space-1);
    text-align: right;
  }

  .tasks-table tbody tr.task-group-member td:nth-child(6) {
    grid-column: 3;
    grid-row: 3;
    padding-top: var(--space-1);
    text-align: right;
  }

  .task-group-toggle {
    width: 100%;
    min-height: 3rem;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1);
    font-size: 0.76rem;
    text-align: left;
  }

  .task-group-name {
    white-space: normal;
  }

  .task-group-count {
    margin-left: auto;
    font-size: 0.68rem;
  }

  .task-assignee-cell {
    overflow-wrap: anywhere;
  }

  .task-assignee-list,
  .task-child-status-list {
    justify-content: flex-start;
  }

  .task-row-chips {
    flex-wrap: wrap;
  }

  .task-status-control {
    justify-content: flex-end;
  }

  .task-action-menu-popover {
    position: fixed;
    right: var(--mobile-gutter);
    bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + var(--space-2));
    top: auto;
    min-width: min(13rem, calc(100vw - (var(--mobile-gutter) * 2)));
  }

  /* Profile becomes a scrollable identity sheet. */
  #view-profile.workspace-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  #view-profile .card-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
  }

  #view-profile .card-header .btn-primary-sm {
    width: 100%;
    justify-content: center;
  }

  #view-profile .profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  #view-profile .profile-left {
    position: static;
    width: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  #view-profile .profile-left h3 {
    overflow-wrap: anywhere;
    font-size: 1.25rem;
  }

  #view-profile .profile-right {
    width: 100%;
    gap: var(--space-3);
  }

  #view-profile .info-section {
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }

  #view-profile .info-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  #view-profile .info-cell {
    min-height: 3.4rem;
    padding: var(--space-3);
  }

  /* All action dialogs become bottom sheets with a stable scroll region. */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
    z-index: 150;
  }

  .modal-overlay > .modal-card,
  .modal-overlay > .search-modal-card,
  .modal-overlay > .home-year-tasks-modal,
  .modal-overlay > .hm-sheet-modal {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 0.25rem);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .modal-header,
  .task-create-modal .modal-header {
    padding: var(--space-4);
  }

  .modal-header-desc h3,
  .task-create-modal .modal-header-desc h3 {
    max-width: 15rem;
    font-size: 1.2rem;
    line-height: 1.18;
  }

  .modal-body,
  .task-create-modal .modal-body,
  .task-evaluation-body,
  .task-history-body {
    max-height: calc(100dvh - 10rem);
    padding: var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal-footer,
  .task-create-modal .modal-footer,
  .task-evaluation-footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--mobile-safe-bottom));
    background: oklch(99% 0.006 75 / 0.96);
    backdrop-filter: blur(12px);
  }

  .modal-footer button,
  .task-evaluation-footer button {
    width: 100%;
    min-height: 2.9rem;
    margin: 0;
  }

  .task-create-modal .modal-section,
  .task-assignment-layout,
  .task-evaluation-columns,
  .task-child-layout,
  .profile-edit-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-create-modal .modal-section > .input-group,
  .task-create-modal .task-definition-row .input-group:first-child,
  .task-create-modal .task-check-row:has(#task-input-cooperate),
  .task-create-modal .task-check-row:has(#task-input-calculated),
  .task-create-modal .task-permission-hint {
    grid-column: 1;
  }

  .task-assignment-people-panel,
  .task-assignment-info-panel {
    min-width: 0;
  }

  .task-assignment-participant-row,
  .task-child-participant-row {
    grid-template-columns: minmax(0, 1fr) 6.25rem 4.5rem 2rem;
  }

  .task-evaluation-columns {
    gap: var(--space-3);
  }

  .task-review-self-score-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .search-modal-body,
  .home-year-tasks-table-wrap {
    max-height: calc(100dvh - 12rem);
    overflow: auto;
  }

  .home-year-tasks-table {
    min-width: 42rem;
  }
}

@media screen and (max-width: 420px) {
  #view-dashboard .header-logo-wordmark {
    max-width: 6rem;
  }

  .home-month-card .home-month-summary {
    gap: var(--space-3);
  }

  .home-month-card .home-progress-ring {
    width: 7.75rem;
  }

  .home-month-card .home-month-copy strong {
    font-size: 1.8rem;
  }

  .tasks-sidebar-bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  .tasks-table tbody tr.task-group-member {
    grid-template-columns: 1.1rem minmax(0, 1fr);
  }

  .tasks-table tbody tr.task-group-member td:nth-child(5),
  .tasks-table tbody tr.task-group-member td:nth-child(6) {
    grid-column: 2;
    grid-row: auto;
    min-width: 0;
    padding-left: 0;
    text-align: left;
  }

  .task-status-control {
    justify-content: flex-start;
  }

  .task-assignment-participant-row,
  .task-child-participant-row {
    grid-template-columns: minmax(0, 1fr) 5.75rem 4rem 2rem;
    gap: var(--space-1);
  }

  .modal-footer,
  .task-create-modal .modal-footer,
  .task-evaluation-footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-dashboard .navbar-menu .nav-item,
  .tasks-table tbody tr.task-group-member,
  .modal-overlay > .modal-card {
    transition-duration: 0.01ms;
  }
}

/* Mobile profile drawer: edge-swipe entry, wide account sheet. */
.mobile-profile-drawer,
.mobile-profile-scrim {
  display: none;
}

@media screen and (max-width: 720px) {
  body.mobile-profile-drawer-open {
    overflow: hidden;
  }

  .mobile-profile-scrim {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: block;
    background: oklch(5% 0.02 32 / 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .mobile-profile-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-profile-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 131;
    display: flex;
    width: min(88vw, 32rem);
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) 0 1rem;
    border-right: 1px solid oklch(100% 0 0 / 0.14);
    background: var(--color-paper-obsidian);
    box-shadow: 1.25rem 0 3rem oklch(0% 0 0 / 0.42);
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.22, 0.8, 0.24, 1);
    will-change: transform;
  }

  /* The dashboard watermark layer positions direct children relatively. Keep overlays viewport-fixed. */
  #view-dashboard > .mobile-profile-scrim {
    position: fixed;
    inset: 0;
    z-index: 130;
  }

  #view-dashboard > .mobile-profile-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 131;
  }

  .mobile-profile-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .mobile-profile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.25rem;
    padding: 0.9rem 1.5rem;
  }

  .mobile-profile-drawer-kicker {
    color: var(--color-accent-gold);
    font: 700 0.66rem/1.2 var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .mobile-profile-drawer-close {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid oklch(100% 0 0 / 0.18);
    border-radius: 50%;
    color: var(--color-ink-light);
    background: transparent;
    cursor: pointer;
  }

  .mobile-profile-drawer-close:hover,
  .mobile-profile-drawer-close:focus-visible {
    color: var(--color-ink-light);
    background: oklch(100% 0 0 / 0.08);
    outline: none;
  }

  .mobile-profile-drawer-close svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .mobile-profile-drawer-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2.2rem 1.5rem 2rem;
    border-bottom: 1px solid oklch(100% 0 0 / 0.16);
  }

  .mobile-profile-drawer-avatar {
    display: grid;
    width: 4.75rem;
    height: 4.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 2px solid var(--color-accent-gold);
    border-radius: 50%;
    color: var(--color-paper-obsidian);
    background-color: var(--color-accent-gold-hover);
    background-position: center;
    background-size: cover;
    font: 750 1.1rem/1 var(--font-display);
  }

  .mobile-profile-drawer-identity {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
  }

  .mobile-profile-drawer-identity strong {
    overflow-wrap: anywhere;
    color: var(--color-ink-light);
    font: 700 1.08rem/1.25 var(--font-display);
  }

  .mobile-profile-drawer-identity span {
    color: oklch(80% 0.01 75);
    font-size: 0.82rem;
  }

  .mobile-profile-drawer-actions {
    display: grid;
    gap: 0.35rem;
    padding: 1.8rem 1.5rem 0;
  }

  .mobile-profile-drawer-item {
    display: flex;
    min-height: 3.75rem;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--color-ink-light);
    background: transparent;
    font: 650 1rem/1.2 var(--font-body);
    text-align: left;
    cursor: pointer;
  }

  .mobile-profile-drawer-item:hover,
  .mobile-profile-drawer-item:focus-visible {
    border-color: transparent;
    background: oklch(100% 0 0 / 0.07);
    outline: none;
  }

  .mobile-profile-drawer-item.is-danger {
    color: #f0aaa0;
  }

  .mobile-profile-drawer-item svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-profile-drawer-hint {
    margin: auto 1.5rem 0;
    color: oklch(72% 0.01 75);
    font-size: 0.78rem;
    line-height: 1.45;
  }

  #view-dashboard .navbar-menu #nav-profile-mobile[aria-expanded="true"] {
    color: var(--color-accent-gold-dim);
    background: var(--color-home-accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-profile-drawer,
  .mobile-profile-scrim {
    transition-duration: 0.01ms;
  }
}

/* Password change modal replaces profile editing. */
.password-change-body {
  grid-template-columns: minmax(0, 1fr);
}

.password-change-body .profile-edit-section {
  max-width: 42rem;
}

.password-change-body .input-group + .input-group {
  margin-top: 1rem;
}

@media screen and (max-width: 720px) {
  /* Lift the workspace stacking context above the fixed mobile navigation while a modal is open. */
  #view-dashboard:has(.modal-overlay:not(.hide)) .dashboard-grid {
    position: relative;
    z-index: 200;
  }

  .password-change-body {
    max-height: none;
  }

  .password-change-body .profile-edit-section {
    padding: 1rem;
  }

  #modal-edit-profile > .profile-edit-modal {
    max-height: calc(100dvh - 0.25rem);
    min-height: 0;
  }

  #modal-edit-profile > .profile-edit-modal > form {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }

  #modal-edit-profile .password-change-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  #modal-edit-profile .profile-edit-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
  }
}

/* Login identity field: keep the service domain visible while accepting only the local name. */
.hm-username-wrapper {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hm-username-wrapper:focus-within {
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3.5px var(--color-accent-gold-glow);
}

.hm-username-wrapper .hm-username-input {
  flex: 1 1 auto;
  min-width: 4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-right: 0.35rem;
  box-shadow: none;
}

.hm-username-wrapper .hm-username-input:hover,
.hm-username-wrapper .hm-username-input:focus {
  border: 0;
  box-shadow: none;
}

.hm-username-domain {
  flex: 0 0 auto;
  color: var(--color-ink-muted);
  font-size: 0.76rem;
  white-space: nowrap;
  user-select: none;
}

/* The mobile login is intentionally app-like; desktop keeps the split studio layout. */
@media screen and (max-width: 720px) {
  #view-login {
    min-height: 100dvh;
    background:
      radial-gradient(circle at 10% 0%, rgba(225, 183, 92, 0.16), transparent 38%),
      var(--color-paper-champagne);
  }

  .hm-login-split {
    display: block;
    min-height: 100dvh;
  }

  .hm-login-hero-panel {
    display: none;
  }

  .hm-login-form-panel {
    min-height: 100dvh;
    padding: max(1.25rem, env(safe-area-inset-top)) 1rem calc(1.25rem + env(safe-area-inset-bottom));
    justify-content: center;
    background: transparent;
  }

  .hm-form-wrapper {
    width: min(100%, 27rem);
    max-width: none;
    padding: 1.4rem;
    border: 1px solid rgba(128, 95, 44, 0.16);
    border-radius: 1.35rem;
    background: rgba(255, 252, 246, 0.94);
    box-shadow: 0 1.5rem 3rem rgba(37, 28, 17, 0.12);
  }

  .hm-form-header {
    margin-bottom: 1.75rem;
  }

  .hm-form-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  .hm-form-title {
    font-size: clamp(2rem, 9vw, 2.45rem);
    line-height: 1.08;
  }

  .hm-login-form {
    gap: 1.15rem;
  }

  .hm-label {
    font-size: 0.78rem;
  }

  .hm-input,
  .hm-username-wrapper {
    min-height: 3.25rem;
  }

  .hm-input {
    font-size: 1rem;
  }

  .hm-username-domain {
    font-size: 0.68rem;
  }

  .hm-btn-primary {
    min-height: 3.35rem;
    margin-top: 0.35rem;
    border-radius: 0.85rem;
  }

  .hm-login-footer {
    margin-top: 2rem;
    padding-top: 1.15rem;
  }

  .hm-security-note,
  .hm-support-contact {
    font-size: 0.7rem;
    line-height: 1.45;
  }
}

@media screen and (max-width: 380px) {
  .hm-login-form-panel {
    padding-inline: 0.7rem;
  }

  .hm-form-wrapper {
    padding: 1.1rem;
  }

  .hm-username-domain {
    font-size: 0.62rem;
  }
}

/* Login redesign · Atelier split-auth: calm public-sector trust surface. */
#view-login {
  min-height: calc(100dvh - 3px);
  align-items: stretch;
  background: var(--color-paper-champagne);
}

.hm-login-split {
  min-height: calc(100dvh - 3px);
  width: 100%;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-paper-champagne);
  box-shadow: none;
}

.hm-login-hero-panel {
  display: flex;
  min-width: 0;
  padding: clamp(2.5rem, 6vw, 5.5rem);
  background-color: var(--color-paper-obsidian);
  border-right: 1px solid var(--color-border-dark);
}

.hm-hero-pattern {
  opacity: 0.78;
  background-image:
    radial-gradient(circle at 10% 12%, oklch(76% 0.14 72 / 0.16), transparent 34%),
    radial-gradient(circle at 90% 86%, oklch(28% 0.03 50 / 0.75), transparent 42%),
    linear-gradient(to bottom, transparent 0%, oklch(14% 0.02 50 / 0.7) 100%);
}

.hm-hero-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  max-width: 33rem;
}

.login-system-logo {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-accent-gold);
  border-radius: 0.85rem;
  box-shadow: 0 0 0 5px var(--color-accent-gold-glow), 0 1rem 2.5rem oklch(0% 0 0 / 0.2);
}

.hm-hero-badge {
  align-self: flex-start;
  margin-bottom: 2rem;
  border-radius: 0.55rem;
  background-color: oklch(22% 0.03 50 / 0.7);
  border-color: oklch(76% 0.14 72 / 0.32);
}

.hm-hero-title,
.hm-form-title,
.hm-stat-num {
  font-family: var(--font-display);
}

.hm-hero-title {
  max-width: 9ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2.7rem, 5vw, 4.5rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.hm-hero-title em {
  font-weight: 650;
}

.hm-hero-statement {
  max-width: 33rem;
  margin-bottom: 3rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: oklch(84% 0.018 75);
}

.hm-hero-footer {
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top-color: oklch(78% 0.02 72 / 0.18);
}

.hm-stat-num {
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}

.hm-stat-label {
  color: oklch(76% 0.02 75);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.hm-login-form-panel {
  min-width: 0;
  width: 100%;
  align-items: stretch;
  padding: clamp(2rem, 7vw, 6rem) clamp(1.5rem, 8vw, 7.5rem);
  background-color: var(--color-paper-champagne);
}

.hm-form-wrapper {
  max-width: 30rem;
  margin: auto;
}

.hm-form-header {
  margin-bottom: 2rem;
}

.hm-form-kicker {
  color: var(--color-accent-gold-dim);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.hm-form-title {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.hm-login-form {
  gap: 1.15rem;
}

.hm-input-group {
  gap: 0.45rem;
}

.hm-label {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.hm-input,
.hm-username-wrapper {
  min-height: 3.25rem;
  border-radius: 0.7rem;
}

.hm-input {
  padding: 0.85rem 1rem;
  background-color: var(--color-surface);
  box-shadow: 0 0.25rem 1rem oklch(14% 0.02 50 / 0.04);
}

.hm-input:focus,
.hm-username-wrapper:focus-within {
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3px var(--color-accent-gold-glow);
}

.hm-username-domain {
  padding-right: 0.95rem;
  color: var(--color-ink-muted);
  font-size: 0.72rem;
}

.hm-btn-primary {
  min-height: 3.35rem;
  margin-top: 0.45rem;
  border-radius: 0.7rem;
  background-color: var(--color-paper-obsidian);
  border-color: var(--color-border-dark);
  box-shadow: 0 0.75rem 1.5rem oklch(14% 0.02 50 / 0.12);
}

.hm-btn-primary:hover {
  background-color: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
  color: var(--color-ink-dark);
  box-shadow: 0 0.9rem 1.8rem var(--color-accent-gold-glow);
}

.hm-btn-primary:disabled {
  opacity: 0.62;
  cursor: wait;
  transform: none;
}

.hm-login-footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top-color: var(--color-border);
}

.hm-security-note {
  align-items: flex-start;
  color: var(--color-ink-muted);
  line-height: 1.45;
}

.hm-security-note svg {
  margin-top: 0.1rem;
  color: var(--color-accent-gold-dim);
}

.hm-support-contact {
  margin: 0;
  color: var(--color-ink-muted);
}

.error-banner {
  margin-bottom: 0.15rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid oklch(58% 0.22 28 / 0.3);
  border-radius: 0.7rem;
  background: oklch(95% 0.03 28);
  color: oklch(38% 0.12 28);
  font-size: 0.8rem;
  line-height: 1.45;
}

@media screen and (max-width: 960px) {
  .hm-login-split {
    display: block;
    min-height: calc(100dvh - 3px);
  }

  .hm-login-hero-panel {
    display: none;
  }

  .hm-login-form-panel {
    min-height: calc(100dvh - 3px);
    justify-content: center;
    padding: max(1.25rem, env(safe-area-inset-top)) 1rem calc(1.25rem + env(safe-area-inset-bottom));
  }

  .hm-form-wrapper {
    width: min(100%, 30rem);
    margin: 0 auto;
    padding: clamp(1.25rem, 5vw, 2rem);
    border: 1px solid oklch(35% 0.04 72 / 0.16);
    border-radius: 1rem;
    background: oklch(100% 0 0 / 0.56);
    box-shadow: 0 1.5rem 3rem oklch(14% 0.02 50 / 0.1);
  }
}

@media screen and (max-width: 380px) {
  .hm-login-form-panel {
    padding-inline: 0.7rem;
  }

  .hm-form-wrapper {
    padding: 1rem;
  }

  .hm-form-title {
    font-size: 2rem;
  }

  .hm-username-domain {
    padding-right: 0.7rem;
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-login-hero-panel,
  .hm-login-form-panel,
  .hm-hero-content > *,
  .hm-form-wrapper > * {
    animation: none;
  }

  .hm-btn-primary:hover {
    transform: none;
  }
}

/* Leadership reports */
.nav-report-menu-wrap {
  position: relative;
}

.nav-report-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  cursor: pointer;
}

.nav-report-chevron {
  transition: transform 160ms ease;
}

.nav-report-trigger[aria-expanded="true"] .nav-report-chevron {
  transform: rotate(180deg);
}

.nav-report-dropdown {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 0;
  z-index: 180;
  display: grid;
  min-width: 16rem;
  gap: 0.25rem;
  padding: 0.45rem;
  border: 1px solid oklch(100% 0 0 / 0.14);
  border-radius: 0.8rem;
  background: oklch(22% 0.025 55 / 0.98);
  box-shadow: 0 1rem 2.5rem oklch(10% 0.02 40 / 0.25);
}

.nav-report-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 0.55rem;
  color: oklch(96% 0.008 75);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}

.nav-report-option:hover:not(:disabled),
.nav-report-option:focus-visible:not(:disabled) {
  color: var(--color-accent-gold);
  background: oklch(100% 0 0 / 0.08);
  outline: none;
}

.nav-report-option.is-disabled,
.nav-report-option:disabled {
  color: oklch(75% 0.01 75 / 0.55);
  cursor: not-allowed;
}

.nav-report-option small {
  margin-left: auto;
  color: oklch(75% 0.01 75 / 0.7);
  font-size: 0.66rem;
}

.nav-report-option-icon {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 0.35rem;
  font-size: 0.82rem;
}

.reports-view {
  width: 100%;
  min-height: 100%;
  padding: clamp(1rem, 2.2vw, 2rem);
  border: 1px solid var(--color-line, #ded8cd);
  border-radius: 1rem;
  background: var(--color-paper, #fffdf8);
  color: var(--color-ink-dark, #231a14);
}

.reports-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-line, #ded8cd);
}

.reports-kicker {
  color: var(--color-accent-gold-dim, #8a5a1c);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.reports-heading h1 {
  margin: 0.3rem 0 0;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  letter-spacing: -0.035em;
}

.reports-heading p {
  margin: 0.5rem 0 0;
  color: var(--color-ink-muted, #756c65);
  font-size: 0.88rem;
}

.reports-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

.reports-filter {
  display: grid;
  gap: 0.3rem;
  min-width: 10.5rem;
  color: var(--color-ink-muted, #756c65);
  font-size: 0.7rem;
  font-weight: 650;
}

.reports-filter-department {
  min-width: 13rem;
}

.reports-filter select {
  min-height: 2.5rem;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  border: 1px solid var(--color-line, #ded8cd);
  border-radius: 0.65rem;
  color: var(--color-ink-dark, #231a14);
  background: var(--color-paper, #fffdf8);
  font: inherit;
  font-size: 0.78rem;
}

.reports-filter-button,
.reports-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.reports-filter-button {
  color: #fff;
  background: #2563eb;
}

.reports-export-button {
  color: #1d4ed8;
  background: #eaf0ff;
}

.reports-filter-button:hover,
.reports-export-button:hover {
  filter: brightness(0.97);
}

.reports-status-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  color: var(--color-ink-muted, #756c65);
  font-size: 0.78rem;
}

.reports-error {
  color: #b42318;
  font-weight: 650;
}

.reports-table-shell {
  overflow: hidden;
  border: 1px solid var(--color-line, #ded8cd);
  border-radius: 0.75rem;
  background: #fff;
}

.reports-table-scroll {
  overflow-x: auto;
}

.reports-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.reports-table th,
.reports-table td {
  padding: 0.7rem 0.65rem;
  border: 1px solid #d9dee8;
  vertical-align: middle;
}

.reports-table th {
  color: #fff;
  background: #2865c3;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

.reports-table thead tr:nth-child(2) th {
  background: #3474cf;
  font-size: 0.72rem;
}

.reports-table tbody tr:nth-child(even) {
  background: #fbfcfe;
}

.reports-table tbody tr:hover {
  background: #f3f7ff;
}

.report-cell-center,
.report-number {
  text-align: center;
  white-space: nowrap;
}

.report-person-cell strong,
.report-total {
  color: #172554;
  font-weight: 750;
}

.report-assessment-cell {
  white-space: nowrap;
}

.report-status-badge,
.report-quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 1.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
  white-space: nowrap;
}

.report-status-badge.is-approved,
.report-quality-badge {
  color: #168247;
  background: #dff5e8;
}

.report-status-badge.is-submitted {
  color: #a16207;
  background: #fff3cd;
}

.report-status-muted {
  color: var(--color-ink-muted, #756c65);
}

.report-eye-button {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.25rem;
  padding: 0.2rem;
  place-items: center;
  border: 0;
  color: #4169d8;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.report-eye-button:hover,
.report-eye-button:focus-visible {
  color: #1d4ed8;
  outline: 2px solid #bfdbfe;
  outline-offset: 1px;
  border-radius: 0.35rem;
}

.report-eye-button svg,
.report-quality-badge svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-quality-badge svg {
  fill: currentColor;
  stroke-width: 1.2;
}

.reports-empty-state {
  padding: 2rem 1rem;
  color: var(--color-ink-muted, #756c65);
  text-align: center;
}

.reports-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 0.75rem;
  color: var(--color-ink-muted, #756c65);
  font-size: 0.72rem;
  font-style: italic;
}

.task-reports-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.45rem;
}

.task-report-title {
  margin: 0.2rem 0 0.8rem;
  color: #10295b;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.task-report-table {
  min-width: 980px;
}

.task-report-table tbody td {
  height: 2.45rem;
}

.task-report-organization-row {
  background: #eef4fb !important;
  font-weight: 750;
}

.task-report-organization-row:hover,
.task-report-total-row:hover {
  background: #e6f0fb !important;
}

.task-report-organization-name {
  color: #173e82;
  text-align: left;
}

.task-report-group-toggle {
  display: inline-block;
  margin-right: 0.45rem;
  color: #697b94;
  font-size: 1rem;
}

.task-report-department-row td:nth-child(2) {
  padding-left: 1.6rem;
  text-align: left;
}

.task-report-department-name {
  color: #253a5c;
}

.task-report-total-row {
  background: #dceaf7 !important;
  color: #173e82;
  font-weight: 800;
}

.task-report-count-button,
.task-report-count {
  display: inline-block;
  min-width: 1.2rem;
  padding: 0;
  border: 0;
  color: #4169d8;
  background: transparent;
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16rem;
}

.task-report-count-button {
  cursor: pointer;
}

.task-report-count-button:hover,
.task-report-count-button:focus-visible {
  color: #1745b4;
  outline: 2px solid #bfdbfe;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.task-report-count.is-zero {
  color: #8a97aa;
  text-decoration: none;
}

.task-report-details-modal {
  width: min(1800px, calc(100vw - 2rem));
  max-width: none;
}

.task-report-details-summary {
  margin: 0 0 0.8rem;
  color: var(--color-ink-muted, #756c65);
  font-size: 0.8rem;
}

.task-report-details-scroll {
  max-height: min(68vh, 46rem);
  overflow: auto;
  border: 1px solid var(--color-line, #ded8cd);
  border-radius: 0.65rem;
}

.task-report-details-table {
  min-width: 1800px;
  font-size: 0.72rem;
}

.task-report-details-table th,
.task-report-details-table td {
  white-space: nowrap;
}

.task-report-details-table td:nth-child(4) {
  min-width: 15rem;
  max-width: 24rem;
  white-space: normal;
}

.task-report-deadline {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  color: #a16207;
  background: #fff3cd;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.task-report-deadline.is-on-time {
  color: #168247;
  background: #dff5e8;
}

.task-report-deadline.is-overdue {
  color: #b42318;
  background: #fde7e7;
}

.task-report-details-description {
  color: var(--color-ink-muted, #756c65);
  font-size: 0.7rem;
}

.task-report-status {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  color: #52657f;
  background: #eef2f7;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.task-report-status.status-da_danh_gia {
  color: #168247;
  background: #dff5e8;
}

.task-report-status.status-cho_danh_gia {
  color: #a16207;
  background: #fff3cd;
}

@media (max-width: 900px) {
  .reports-header {
    align-items: stretch;
    flex-direction: column;
  }

  .reports-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .nav-report-menu-wrap {
    display: none !important;
  }

  .reports-view {
    padding: 0.9rem;
    border-radius: 0.8rem;
  }

  .reports-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .reports-filter,
  .reports-filter-department,
  .reports-filter-button,
  .reports-export-button {
    min-width: 0;
    width: 100%;
  }

  .reports-filter-department {
    grid-column: 1 / -1;
  }

  .reports-status-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-reports-toolbar {
    justify-content: stretch;
  }

  .task-report-title {
    font-size: 1rem;
    text-align: left;
  }

  .task-report-details-modal {
    width: calc(100vw - 1rem);
    max-width: none;
  }
}

/* Keep the task workspace inside the viewport and isolate scrolling to task rows. */
@media screen and (min-width: 901px) {
  body:has(#view-personal-tasks:not(.hide)) #view-dashboard .dashboard-main {
    display: flex;
    min-height: 0;
    overflow: hidden;
  }

  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    align-items: stretch;
  }

  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-sidebar,
  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-main-content {
    min-height: 0;
    height: 100%;
  }

  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-sidebar {
    flex: 0 0 280px;
    overflow: visible;
  }

  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-sidebar-bottom {
    flex: 0 0 auto;
    min-height: max-content;
  }

  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-main-content {
    flex: 1 1 auto;
    overflow: hidden;
  }

  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-table-wrapper {
    min-height: 0;
    overflow: auto;
  }
}

@media screen and (max-width: 900px) {
  /* Summary cards must remain part of the sidebar flow instead of escaping its card. */
  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-sidebar {
    height: auto;
    min-height: max-content;
    overflow: visible;
  }

  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-sidebar-bottom {
    flex: 0 0 auto;
    min-height: max-content;
  }

  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .summary-block {
    min-width: 0;
  }
}

@media screen and (min-width: 901px) {
  /* The flex basis must shrink together with the collapsed sidebar width. */
  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks .tasks-sidebar.is-collapsed {
    flex-basis: 1px;
    min-width: 1px;
    width: 1px;
  }
}

/* Hallmark · component: notification-banner · genre: modern-minimal · theme: Atelier
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (46–50)
 */
.notification-ambient-region {
  position: absolute;
  z-index: 120;
  top: 0.75rem;
  left: 50%;
  width: min(100% - 2rem, 34rem);
  pointer-events: none;
  transform: translateX(-50%);
}

.notification-ambient-toast {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem 0.7rem 0.7rem;
  border: 1px solid var(--color-notification-border);
  border-radius: 1rem;
  color: var(--color-notification-ink);
  background: var(--color-notification-surface);
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.75rem) scale(0.98);
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

.notification-ambient-region.is-visible .notification-ambient-toast {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.notification-ambient-toast:hover,
.notification-ambient-toast:focus-visible {
  border-color: var(--color-accent-gold);
  background: var(--color-notification-surface-hover);
}

.notification-ambient-toast:focus-visible {
  outline: 3px solid var(--color-accent-gold-glow);
  outline-offset: 2px;
}

.notification-ambient-toast:active {
  transform: translateY(1px) scale(0.99);
}

.notification-ambient-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 0.75rem;
  color: var(--color-accent-gold);
  background: var(--color-accent-gold-glow);
}

.notification-ambient-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.notification-ambient-copy {
  display: grid;
  min-width: 0;
  gap: 0.05rem;
  text-align: left;
}

.notification-ambient-copy strong,
.notification-ambient-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-ambient-copy strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.notification-ambient-copy span {
  color: var(--color-notification-muted);
  font-size: 0.74rem;
}

.notification-ambient-arrow {
  color: var(--color-notification-muted);
  font-size: 1.45rem;
  line-height: 1;
}

@media screen and (max-width: 600px) {
  .notification-ambient-region {
    top: 0.5rem;
    width: min(100% - 1rem, 34rem);
  }

  .notification-ambient-toast {
    border-radius: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notification-ambient-toast {
    transition: opacity 120ms linear;
    transform: none;
  }

  .notification-ambient-region.is-visible .notification-ambient-toast {
    transform: none;
  }
}

/* Hallmark · component: notification-detail-modal · genre: modern-minimal · theme: Atelier
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (46–50)
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.notification-detail-overlay {
  z-index: 210;
}

.modal-overlay:not(.hide) > .notification-detail-modal {
  animation: notification-detail-enter 250ms var(--ease-out) both;
}

.notification-detail-modal {
  --color-notification-surface: var(--color-surface);
  --color-notification-surface-hover: var(--color-accent-100);
  --color-notification-ink: var(--color-ink-dark);
  --color-notification-muted: var(--color-ink-muted);
  --color-notification-border: var(--color-border);
  --color-accent-gold: var(--color-accent-700);
  --color-accent-gold-hover: var(--color-accent-600);
  --color-accent-gold-glow: var(--color-accent-100);
  width: min(100%, 38rem);
  overflow: hidden;
  border: 1px solid var(--color-notification-border);
  border-radius: var(--radius-lg);
  color: var(--color-notification-ink);
  background: var(--color-notification-surface);
  box-shadow: var(--shadow-lift);
}

.notification-detail-header,
.notification-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.notification-detail-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-notification-border);
}

.notification-detail-heading {
  min-width: 0;
}

.notification-detail-kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-accent-gold);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notification-detail-heading h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-notification-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
}

.notification-detail-close,
.notification-detail-action {
  min-height: 2.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.notification-detail-close {
  display: grid;
  flex: 0 0 auto;
  width: 2.75rem;
  place-items: center;
  border-color: var(--color-notification-border);
  border-radius: var(--radius-pill);
  color: var(--color-notification-muted);
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
}

.notification-detail-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.notification-detail-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.notification-detail-avatar {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-accent-gold);
  border-radius: 50%;
  color: var(--color-accent-700);
  background-color: var(--color-accent-100);
  background-position: center;
  background-size: cover;
  font-size: var(--text-xs);
  font-weight: 700;
}

.notification-detail-meta-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.notification-detail-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.notification-detail-type {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-accent-gold);
  background: var(--color-accent-gold-glow);
  font-size: var(--text-xs);
  font-weight: 700;
}

.notification-detail-meta time {
  color: var(--color-notification-muted);
  font-size: var(--text-xs);
}

.notification-detail-source {
  overflow: hidden;
  color: var(--color-notification-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-detail-message {
  overflow-wrap: anywhere;
  color: var(--color-notification-ink);
  font-size: var(--text-md);
  line-height: 1.65;
}

.notification-detail-error {
  color: var(--color-danger-600, var(--color-danger));
  font-size: var(--text-sm);
}

.notification-detail-footer {
  justify-content: flex-end;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-notification-border);
}

.notification-detail-action {
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
}

.notification-detail-action-primary {
  color: var(--color-ink-light);
  background: var(--color-accent-gold);
}

.notification-detail-action-secondary {
  border-color: var(--color-notification-border);
  color: var(--color-notification-ink);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .notification-detail-close:hover,
  .notification-detail-action-secondary:hover {
    border-color: var(--color-accent-gold);
    color: var(--color-notification-ink);
    background: var(--color-notification-surface-hover);
  }

  .notification-detail-action-primary:hover {
    color: var(--color-ink-light);
    background: var(--color-accent-gold-hover);
  }
}

.notification-detail-close.is-hover,
.notification-detail-action-secondary.is-hover {
  border-color: var(--color-accent-gold);
  color: var(--color-notification-ink);
  background: var(--color-notification-surface-hover);
}

.notification-detail-action-primary.is-hover {
  color: var(--color-ink-light);
  background: var(--color-accent-gold-hover);
}

.notification-detail-close:focus-visible,
.notification-detail-close.is-focus,
.notification-detail-action:focus-visible,
.notification-detail-action.is-focus {
  outline: 3px solid var(--color-notification-ink);
  outline-offset: 3px;
}

.notification-detail-close:active,
.notification-detail-close.is-active,
.notification-detail-action:active,
.notification-detail-action.is-active {
  transform: translateY(1px) scale(0.98);
}

.notification-detail-close:disabled,
.notification-detail-action:disabled,
.notification-detail-action[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.notification-detail-action[data-state="loading"] {
  cursor: progress;
  color: var(--color-notification-ink);
  background: var(--color-notification-surface-hover);
}

.notification-detail-action[data-state="loading"]::before {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: var(--space-2);
  border: 2px solid var(--color-notification-muted);
  border-top-color: var(--color-accent-gold);
  border-radius: var(--radius-pill);
  content: "";
  vertical-align: -0.12em;
  animation: notification-detail-spin 700ms linear infinite;
}

.notification-detail-action[data-state="error"] {
  border-color: var(--color-danger);
  color: var(--color-danger-100);
  background: var(--color-danger);
}

.notification-detail-action[data-state="success"] {
  color: var(--color-ink-dark);
  background: var(--color-success);
}

@keyframes notification-detail-enter {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes notification-detail-spin {
  to { transform: rotate(1turn); }
}

@media (max-width: 46rem) {
  .notification-detail-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .notification-detail-modal {
    width: 100%;
    max-height: calc(100dvh - var(--space-2));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .notification-detail-header,
  .notification-detail-body,
  .notification-detail-footer {
    padding-inline: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay:not(.hide) > .notification-detail-modal {
    animation: notification-detail-fade 120ms var(--ease-out) both;
  }

  .notification-detail-close,
  .notification-detail-action {
    transition: none;
  }

  .notification-detail-action[data-state="loading"]::before {
    animation: none;
  }
}

@keyframes notification-detail-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hallmark · component: task-status-mobile-layout · genre: editorial operations · theme: Atelier
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass — inherited status tokens retain labelled, tinted states
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */
/* The task list is already card-based on mobile. Override the older desktop-table
 * rule so it cannot reintroduce nested horizontal and vertical scrollbars. */
@media screen and (max-width: 56.25rem) {
  #view-personal-tasks .tasks-table-wrapper {
    max-width: none;
    overflow: visible;
  }

  #view-personal-tasks .tasks-table {
    min-width: 0;
  }

  #view-personal-tasks .tasks-table tbody tr.task-group-row,
  #view-personal-tasks .tasks-table tbody tr.task-group-member {
    width: 100%;
    min-width: 0;
  }
}

/* At the point where the status picker would squeeze the task copy, stack it below. */
@media screen and (max-width: 36rem) {
  html,
  body {
    min-width: 0;
  }

  #view-personal-tasks .tasks-table tbody tr.task-group-member {
    grid-template-columns: 1.25rem minmax(0, 1fr);
  }

  #view-personal-tasks .tasks-table tbody tr.task-group-member td:nth-child(5),
  #view-personal-tasks .tasks-table tbody tr.task-group-member td:nth-child(6) {
    grid-column: 2;
    grid-row: auto;
    min-width: 0;
    padding-left: 0;
    text-align: left;
  }

  #view-personal-tasks .task-status-control {
    justify-content: flex-start;
  }

  #view-personal-tasks .task-status-picker {
    min-width: min(100%, 9.25rem);
  }

  #view-personal-tasks .task-status-menu {
    right: auto;
    left: 0;
    max-width: calc(100dvw - (var(--mobile-gutter) * 2));
  }
}

/* Forced state hooks keep the standalone component preview representative. */
.task-status-trigger.is-hover {
  background: var(--task-status-tint);
}

.task-status-trigger.is-focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.task-status-trigger.is-active {
  transform: translateY(1px);
}

/* Hallmark · component: mobile-notification-menu · genre: modern-minimal · theme: Atelier
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass — notification sheet uses the locked Atelier ink/paper pair
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */
.nav-notification-mobile,
.mobile-notification-overlay {
  display: none;
}

.mobile-notification-badge {
  position: absolute;
  top: 0.22rem;
  right: 0.85rem;
  min-width: 1.05rem;
  min-height: 1.05rem;
  padding-inline: 0.22rem;
  border: 2px solid var(--mobile-surface);
  border-radius: var(--radius-pill);
  color: var(--color-ink-light);
  background: var(--color-danger);
  font-size: 0.58rem;
  font-weight: 750;
  line-height: 0.78rem;
  text-align: center;
}

.nav-notification-mobile:focus-visible,
.nav-notification-mobile.is-focus,
.mobile-notification-close:focus-visible,
.mobile-notification-close.is-focus,
.mobile-notification-read-all:focus-visible,
.mobile-notification-read-all.is-focus,
.header-notification-item:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.nav-notification-mobile:active,
.nav-notification-mobile.is-active,
.mobile-notification-close:active,
.mobile-notification-close.is-active,
.mobile-notification-read-all:active,
.mobile-notification-read-all.is-active,
.header-notification-item:active {
  transform: translateY(1px);
}

.nav-notification-mobile:disabled,
.nav-notification-mobile[aria-disabled="true"],
.mobile-notification-close:disabled,
.mobile-notification-read-all:disabled,
.header-notification-item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.nav-notification-mobile[data-state="loading"] {
  cursor: progress;
}

.nav-notification-mobile[data-state="loading"] .nav-item-icon {
  animation: mobile-notification-spin 700ms linear infinite;
}

.nav-notification-mobile[data-state="error"] {
  color: var(--color-danger);
  background: var(--color-danger-100);
}

.nav-notification-mobile[data-state="success"] {
  color: var(--color-success);
  background: var(--color-success-100);
}

.mobile-notification-modal {
  display: flex;
  width: min(100%, 34rem);
  max-height: min(78dvh, 42rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-notification-border);
  border-radius: var(--radius-lg);
  color: var(--color-ink-dark);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
}

.mobile-notification-overlay:not(.hide) {
  animation: mobile-notification-fade var(--dur-fast) var(--ease-out) both;
}

.mobile-notification-overlay:not(.hide) .mobile-notification-modal {
  animation: mobile-notification-enter var(--dur-normal) var(--ease-out) both;
}

.mobile-notification-heading,
.mobile-notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mobile-notification-heading {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mobile-notification-kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-accent-gold-dim);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-notification-heading h2 {
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
}

.mobile-notification-close {
  display: grid;
  flex: 0 0 auto;
  width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  background: var(--color-paper);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out);
}

.mobile-notification-toolbar {
  padding: var(--space-3) var(--space-4) var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.mobile-notification-read-all {
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-accent-gold-dim);
  background: transparent;
  cursor: pointer;
  font: 700 var(--text-xs)/1.2 var(--font-body);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out);
}

.mobile-notification-list {
  max-height: min(28rem, 58dvh);
  padding: 0 var(--space-2) var(--space-2);
}

.mobile-notification-list .header-notification-item {
  min-height: 4rem;
}

.mobile-notification-close.is-hover,
.mobile-notification-read-all.is-hover {
  color: var(--color-ink-dark);
  background: var(--color-home-neutral-soft);
}

.mobile-notification-close:disabled,
.mobile-notification-read-all:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (hover: hover) and (pointer: fine) {
  .nav-notification-mobile:hover,
  .nav-notification-mobile[aria-expanded="true"] {
    color: var(--color-ink-dark);
    background: var(--color-home-neutral-soft);
  }

  .mobile-notification-close:hover,
  .mobile-notification-read-all:hover {
    color: var(--color-ink-dark);
    background: var(--color-home-neutral-soft);
  }
}

@media screen and (max-width: 720px) {
  #view-dashboard .navbar-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #view-dashboard .nav-notification-mobile {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 3.4rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.18rem;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-ink-muted);
    font-size: 0.68rem;
    font-weight: 650;
    text-align: center;
    white-space: nowrap;
  }

  #view-dashboard .nav-notification-mobile .nav-item-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  #view-dashboard .nav-profile-avatar {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-ink-dark);
    background-color: var(--color-home-neutral-soft);
    background-position: center;
    background-size: cover;
    font-size: 0.56rem;
    font-weight: 750;
    line-height: 1;
  }

  #view-dashboard .navbar-menu #nav-personal-tasks .nav-label {
    font-size: 0;
  }

  #view-dashboard .navbar-menu #nav-personal-tasks .nav-label::after {
    content: "Công việc";
    font-size: 0.68rem;
  }

  #view-dashboard > .mobile-notification-overlay:not(.hide) {
    position: fixed;
    inset: 0 0 calc(var(--mobile-nav-height) + var(--mobile-nav-offset)) 0;
    z-index: 110;
    display: grid;
    place-items: stretch;
    padding: 0;
    background: var(--mobile-surface);
  }

  .mobile-notification-modal {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-notification-heading {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }

  .mobile-notification-list {
    min-height: 0;
    max-height: none;
    flex: 1;
    overflow-y: auto;
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
}

@keyframes mobile-notification-enter {
  from { opacity: 0; transform: translateY(var(--motion-distance-md)) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mobile-notification-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mobile-notification-spin {
  to { transform: rotate(1turn); }
}

@media screen and (min-width: 721px) {
  .nav-notification-mobile,
  .mobile-notification-overlay {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-notification-overlay:not(.hide),
  .mobile-notification-overlay:not(.hide) .mobile-notification-modal {
    animation: none;
  }

  .nav-notification-mobile[data-state="loading"] .nav-item-icon {
    animation: none;
  }

  .mobile-notification-close,
  .mobile-notification-read-all {
    transition: none;
  }
}

/* Standalone Chấm phiếu KPI page: never inherit the task workspace shell. */
body:has(#view-kpi-review-forms:not(.hide)) #view-personal-tasks,
body:has(#view-kpi-review-forms:not(.hide)) #view-kpi-dashboard {
  display: none !important;
}

body:has(#view-kpi-review-forms:not(.hide)) #view-dashboard .dashboard-main {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 1rem 1.5rem 1.5rem;
  overflow: auto;
}

body:has(#view-kpi-review-forms:not(.hide)) #dashboard-page-content {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

body:has(#view-kpi-review-forms:not(.hide)) #dashboard-page-content > #view-kpi-review-forms:not(.hide) {
  display: block !important;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  animation: none;
}

body:has(#view-kpi-review-forms:not(.hide)) .kpi-review-forms-header {
  padding-top: 0;
}

@media (max-width: 900px) {
  body:has(#view-kpi-review-forms:not(.hide)) #view-dashboard .dashboard-main {
    padding: 1rem;
  }
}
/* Full-page review sheet: the KPI form needs room for the complete criteria table. */
#modal-kpi-review-form {
  /* Keep the review sheet below the desktop application header. */
  inset: 104px 0 0;
  z-index: 99;
  padding: .75rem;
  align-items: stretch;
  justify-content: stretch;
}

#modal-kpi-review-form > .kpi-review-form-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 1rem;
}

#modal-kpi-review-form .kpi-review-form-modal-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* Hallmark · dashboard analysis pair: process metrics beside the leaderboard. */
.home-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(22rem, 1fr);
  align-items: stretch;
  gap: 1rem;
  margin-top: 1rem;
}

.home-analysis-grid > .home-management-card {
  min-width: 0;
  margin-top: 0;
}

.home-process-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.home-process-card .home-metric-list {
  display: grid;
  grid-template-rows: repeat(3, auto);
  flex: 1 1 auto;
}

.home-process-card .home-metric-row {
  display: grid;
  grid-template-rows: auto auto auto;
  min-width: 0;
}

.home-process-card .home-metric-copy,
.home-process-card .home-meter,
.home-process-card .home-legend {
  width: 100%;
  min-width: 0;
}

.home-process-card .home-metric-copy {
  justify-content: space-between;
}

.home-process-card .home-legend {
  align-items: center;
  flex-wrap: wrap;
}

/* The legacy desktop dashboard rule sets three metric columns; keep this card stacked. */
body:has(#view-home-dashboard:not(.hide)) .home-process-card .home-metric-list {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
}

body:has(#view-home-dashboard:not(.hide)) .home-process-card .home-metric-row {
  grid-column: 1;
}

.home-analysis-grid .home-leaderboard-card {
  align-self: stretch;
}

@media (max-width: 980px) {
  .home-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 720px) {
  .home-analysis-grid {
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
}

@media screen and (max-width: 720px) {
  #modal-kpi-review-form {
    /* The mobile navbar is fixed at the bottom; reserve its full height. */
    inset: 0 0 calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)) 0;
    z-index: 115;
    padding: 0;
  }

  #modal-kpi-review-form > .kpi-review-form-modal {
    border-radius: 1rem 1rem 0 0;
  }
}

/* Dashboard scope switcher: a compact pill with a restrained sliding state. */
.home-scope-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.home-scope-segmented {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(5.2rem, 1fr));
  min-height: 2.2rem;
  padding: 0.2rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 76%, var(--color-home-accent-soft));
  isolation: isolate;
}

.home-scope-indicator {
  position: absolute;
  z-index: 0;
  inset: 0.2rem auto 0.2rem 0.2rem;
  width: calc(50% - 0.2rem);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 0.15rem 0.45rem rgb(22 35 54 / 12%);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.home-scope-segmented[data-active-scope="personal"] .home-scope-indicator {
  transform: translateX(100%);
}

.home-scope-segment {
  position: relative;
  z-index: 1;
  min-height: 1.8rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink-muted);
  font: 700 0.78rem/1 var(--font-display);
  cursor: pointer;
  transition: color 160ms ease;
}

.home-scope-segment.is-active {
  color: var(--color-ink-dark);
}

.home-scope-segment:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.home-scope-department-wrap {
  display: inline-flex;
  min-width: 10rem;
}

.home-scope-department-wrap select {
  width: 100%;
  min-height: 2.2rem;
  padding: 0 2rem 0 0.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink-dark);
  font: 600 0.78rem/1.1 var(--font-display);
  cursor: pointer;
}

.home-scope-department-wrap select:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.home-scope-department-wrap select:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

@media screen and (max-width: 720px) {
  .home-scope-controls {
    width: 100%;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .home-scope-segmented,
  .home-scope-department-wrap {
    flex: 1 1 100%;
  }

  .home-scope-segment {
    padding-inline: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-scope-indicator,
  .home-scope-segment {
    transition: none;
  }
}

/* Dashboard pages grow with their content instead of clipping the lower cards. */
@media (min-width: 901px) {
  body:has(#view-home-dashboard:not(.hide)) {
    overflow-y: auto;
  }

  body:has(#view-home-dashboard:not(.hide)) #view-dashboard {
    height: auto;
    min-height: calc(100svh - 3px);
    overflow: visible;
  }

  body:has(#view-home-dashboard:not(.hide)) #view-dashboard .dashboard-main,
  body:has(#view-home-dashboard:not(.hide)) #dashboard-page-content {
    min-height: 0;
    overflow: visible;
  }
}

/* The assessment card fills the same viewport column as its sidebar. */
@media (min-width: 901px) {
  body:has(#view-personal-tasks:not(.hide)) #view-personal-tasks > #view-kpi-dashboard:not(.hide) {
    align-self: stretch;
    height: auto;
    min-height: calc(100dvh - 2rem);
  }
}

/* Final mobile cascade: the app shell is a top header, never a bottom tab bar. */
@media screen and (max-width: 720px) {
  :root {
    --mobile-nav-height: 0rem;
    --mobile-nav-offset: 0px;
    --mobile-content-bottom: calc(var(--space-6) + var(--mobile-safe-bottom));
  }

  html,
  body {
    overflow-x: clip;
  }

  #view-dashboard .app-header {
    position: sticky;
    top: 0;
    z-index: 140;
    min-height: var(--mobile-header-height);
    height: auto;
    padding: 0;
    overflow: visible;
    border-bottom-color: var(--color-border);
    background: var(--color-paper-champagne);
    box-shadow: none;
  }

  #view-dashboard .header-shell {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    height: auto;
    min-height: var(--mobile-header-height);
    padding: 0 var(--mobile-gutter);
  }

  #view-dashboard .mobile-nav-toggle {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    color: var(--color-ink-muted);
    width: 2.5rem;
    height: 2.5rem;
    place-content: center;
    gap: 0.28rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
  }

  #view-dashboard .mobile-nav-toggle:hover,
  #view-dashboard .mobile-nav-toggle:focus-visible {
    color: var(--color-ink-dark);
    background: var(--color-home-neutral-soft);
  }

  #view-dashboard .header-logo-lockup {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    min-width: 0;
    max-width: 100%;
    gap: 0;
    color: var(--color-ink-dark);
  }

  #view-dashboard .header-logo-meta {
    display: none;
  }

  #view-dashboard .header-logo-seal {
    width: 2.75rem;
    height: 2.75rem;
    border-color: var(--color-accent-gold);
    background: var(--color-ink-muted);
    box-shadow: none;
  }

  #view-dashboard .header-logo-seal::before {
    border-color: var(--color-accent-gold);
  }

  #view-dashboard .navbar-actions {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }

  #view-dashboard .header-organization-switch,
  #view-dashboard .header-notifications {
    display: none;
  }

  #view-dashboard .navbar-actions .header-user-trigger {
    width: 2.5rem;
    min-height: 2.5rem;
    justify-content: center;
    padding: 0;
    color: var(--color-ink-dark);
  }

  #view-dashboard .navbar-actions .header-user-trigger:hover,
  #view-dashboard .navbar-actions .header-user-dropdown:focus-within .header-user-trigger {
    border-color: var(--color-border);
    background: var(--color-home-neutral-soft);
  }

  #view-dashboard .navbar-actions .user-name,
  #view-dashboard .navbar-actions .dropdown-chevron,
  #view-dashboard .header-dropdown-menu {
    display: none !important;
  }

  #view-dashboard .navbar-actions .user-avatar {
    border-color: var(--color-border);
    background-color: transparent;
    color: var(--color-ink-muted);
    box-shadow: none;
  }

  #view-dashboard .navbar-menu {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 130;
    display: flex;
    width: auto;
    height: auto;
    max-height: calc(100dvh - var(--mobile-header-height));
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-2) var(--mobile-gutter) var(--space-3);
    overflow-x: clip;
    overflow-y: auto;
    border-top: 1px solid var(--color-border-dark);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-paper-champagne);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    visibility: hidden;
    transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out), visibility 0s linear var(--dur-normal);
  }

  #view-dashboard .navbar-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  #view-dashboard .navbar-menu .nav-item,
  #view-dashboard .navbar-menu .nav-notification-mobile {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-ink-dark);
    font-size: 0.84rem;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
  }

  #view-dashboard .navbar-menu .nav-item::after {
    display: none;
  }

  #view-dashboard .navbar-menu .nav-item:hover,
  #view-dashboard .navbar-menu .nav-item:focus-visible,
  #view-dashboard .navbar-menu .nav-item.active {
    color: var(--color-accent-gold-dim);
    background: var(--color-home-neutral-soft);
  }

  #view-dashboard .navbar-menu .nav-item:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
  }

  #view-dashboard .navbar-menu .nav-item-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
  }

  #view-dashboard .navbar-menu .nav-label {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-dashboard .navbar-menu #nav-profile-mobile {
    display: none !important;
  }

  #view-dashboard .navbar-menu .nav-report-menu-wrap {
    display: block;
    width: 100%;
  }

  #view-dashboard .navbar-menu .nav-report-trigger {
    display: flex;
    width: 100%;
  }

  #view-dashboard .navbar-menu .nav-report-dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    margin: calc(var(--space-1) * -1) 0 var(--space-1);
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: none;
  }

  #view-dashboard .dashboard-main {
    padding-bottom: var(--mobile-content-bottom) !important;
  }

  #view-dashboard > .mobile-notification-overlay:not(.hide) {
    inset: var(--mobile-header-height) 0 0 !important;
  }

  #view-dashboard .task-action-menu-popover {
    bottom: calc(var(--mobile-safe-bottom) + var(--space-2));
  }

  #modal-kpi-review-form {
    inset: var(--mobile-header-height) 0 0 !important;
  }
}

/* Keep report controls aligned after their feature-specific rules. */
.reports-filter-button,
.reports-export-button {
  min-height: 2.75rem;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.reports-filter-button:hover,
.reports-export-button:hover {
  border-color: var(--color-accent-gold-dim);
  filter: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

/* Keep the same navigation language when the mobile menu is disclosed. */
@media screen and (max-width: 720px) {
  #view-dashboard .navbar-menu {
    padding: var(--space-2);
    border-top: 1px solid var(--mobile-rule);
    border-bottom: 1px solid var(--mobile-rule);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-paper-champagne);
    box-shadow: var(--shadow-lift);
  }

  #view-dashboard .navbar-menu .nav-item,
  #view-dashboard .navbar-menu .nav-notification-mobile,
  #view-dashboard .navbar-menu .nav-profile-mobile {
    min-height: 3rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: 700;
  }

  #view-dashboard .navbar-menu .nav-item:hover,
  #view-dashboard .navbar-menu .nav-item:focus-visible,
  #view-dashboard .navbar-menu .nav-item.active,
  #view-dashboard .navbar-menu .nav-profile-mobile.active,
  #view-dashboard .navbar-menu .nav-report-trigger[aria-expanded="true"] {
    border-color: var(--color-accent-gold-glow);
    color: var(--color-accent-gold-dim);
    background: var(--color-home-accent-soft);
    transform: none;
  }

  #view-dashboard .navbar-menu .nav-item-icon {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* Keep the primary links compact without hiding their existing routes. */
.nav-workspace-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.nav-workspace-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  cursor: pointer;
}

.nav-workspace-chevron {
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav-workspace-trigger[aria-expanded="true"] .nav-workspace-chevron {
  transform: rotate(180deg);
}

.nav-workspace-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 190;
  display: grid;
  min-width: 17rem;
  gap: 0.15rem;
  padding: 0.45rem;
  border: 1px solid oklch(100% 0 0 / 0.14);
  border-radius: var(--radius-md);
  background: oklch(20% 0.025 55 / 0.98);
  box-shadow: 0 1rem 2.5rem oklch(10% 0.02 40 / 0.25);
}

#view-dashboard .navbar-menu .nav-workspace-dropdown > .nav-item,
#view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-trigger {
  display: flex;
  width: 100%;
  min-height: 2.55rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  color: oklch(92% 0.01 75);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  transform: none;
}

#view-dashboard .navbar-menu .nav-workspace-dropdown > .nav-item::after,
#view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-trigger::after {
  display: none;
}

#view-dashboard .navbar-menu .nav-workspace-dropdown > .nav-item:hover,
#view-dashboard .navbar-menu .nav-workspace-dropdown > .nav-item:focus-visible,
#view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-trigger:hover,
#view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-trigger:focus-visible {
  color: var(--color-accent-gold);
  background: oklch(100% 0 0 / 0.08);
  outline: none;
}

#view-dashboard .navbar-menu .nav-workspace-dropdown > .nav-item.active,
#view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-trigger[aria-expanded="true"] {
  border-color: oklch(76% 0.14 72 / 0.45);
  color: var(--color-accent-gold);
  background: oklch(76% 0.14 72 / 0.12);
  box-shadow: none;
}

#view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-menu-wrap {
  position: relative;
  width: 100%;
}

#view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-chevron {
  margin-left: auto;
}

#view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-dropdown {
  top: calc(100% + 0.35rem);
  left: 0;
}

@media screen and (min-width: 721px) {
  #view-dashboard .navbar-menu .nav-workspace-trigger {
    min-width: 8.3rem;
    justify-content: center;
  }

  #view-dashboard .navbar-menu .nav-workspace-trigger.active,
  #view-dashboard .navbar-menu .nav-workspace-trigger[aria-expanded="true"] {
    border-color: var(--color-accent-gold);
    color: var(--color-ink-light);
    background: var(--color-accent-gold);
    box-shadow: 0 0.35rem 1rem -0.7rem var(--color-accent-gold);
  }

  #view-dashboard .navbar-menu .nav-workspace-trigger.active:hover,
  #view-dashboard .navbar-menu .nav-workspace-trigger[aria-expanded="true"]:hover {
    color: var(--color-ink-light);
    background: var(--color-accent-gold-hover);
  }
}

@media screen and (max-width: 720px) {
  #view-dashboard .navbar-menu .nav-workspace-menu-wrap {
    display: block;
    width: 100%;
  }

  #view-dashboard .navbar-menu .nav-workspace-trigger {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }

  #view-dashboard .navbar-menu .nav-workspace-trigger .nav-workspace-chevron {
    margin-left: auto;
  }

  #view-dashboard .navbar-menu .nav-workspace-dropdown {
    position: static;
    min-width: 0;
    margin: 0 0 var(--space-1);
    padding: var(--space-1);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: none;
  }

  #view-dashboard .navbar-menu .nav-workspace-dropdown > .nav-item,
  #view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-trigger {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink-dark);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  #view-dashboard .navbar-menu .nav-workspace-dropdown > .nav-item.active,
  #view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-trigger[aria-expanded="true"] {
    border-color: var(--color-accent-gold-glow);
    color: var(--color-accent-gold-dim);
    background: var(--color-home-accent-soft);
  }

  #view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-menu-wrap:not(.hide) {
    display: block !important;
  }

  #view-dashboard .navbar-menu .nav-workspace-dropdown .nav-report-dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    margin: calc(var(--space-1) * -1) 0 var(--space-1);
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: none;
  }
}

/* Monitoring thresholds stay visible beside the live data, without implying a permit value. */
.monitoring-thresholds {
  margin-top: 1rem;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-home-accent-soft));
}

.monitoring-threshold-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.monitoring-threshold-heading h2 {
  margin-top: 0.35rem;
  color: var(--color-ink-dark);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.monitoring-threshold-source {
  flex: 0 0 auto;
  color: var(--color-accent-gold-dim);
  font-size: 0.72rem;
  font-weight: 750;
  text-decoration: none;
}

.monitoring-threshold-source:hover,
.monitoring-threshold-source:focus-visible {
  color: var(--color-ink-dark);
  text-decoration: underline;
}

.monitoring-progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 0.7rem;
  color: var(--color-ink-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.monitoring-progress-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.monitoring-progress-legend i {
  width: 0.65rem;
  height: 0.35rem;
  border-radius: var(--radius-pill);
}

.monitoring-progress-legend i.is-safe {
  background: var(--color-success);
}

.monitoring-progress-legend i.is-watch {
  background: #9aa0a6;
}

.monitoring-progress-legend i.is-danger {
  background: var(--color-danger);
}

.monitoring-threshold-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.monitoring-threshold-card {
  min-width: 0;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 0.55rem);
  background: var(--color-paper-champagne);
}

.monitoring-threshold-card > span,
.monitoring-threshold-card > small {
  display: block;
  color: var(--color-ink-muted);
  font-size: 0.68rem;
}

.monitoring-threshold-card > span {
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-threshold-card > strong {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-ink-dark);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

.monitoring-threshold-card > small {
  margin-top: 0.25rem;
  font-size: 0.62rem;
}

.monitoring-threshold-card.is-unconfigured {
  background: color-mix(in srgb, var(--color-paper-champagne) 70%, var(--color-home-neutral-soft));
}

.monitoring-threshold-card.is-unconfigured > strong {
  color: var(--color-ink-muted);
  font-size: 0.82rem;
}

.monitoring-threshold-note {
  margin-top: 0.75rem;
  color: var(--color-ink-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.monitoring-metric-threshold {
  margin-top: 0.4rem;
  color: var(--color-ink-muted);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.monitoring-progress {
  margin-top: 1rem;
}

.monitoring-progress-track {
  position: relative;
  display: block;
  height: 0.48rem;
  overflow: visible;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-success) 0 50%, #9aa0a6 50% 71.5%, var(--color-danger) 71.5% 100%);
}

.monitoring-progress-track.is-range {
  background: linear-gradient(to right, var(--color-danger) 0 14.3%, #9aa0a6 14.3% 28.6%, var(--color-success) 28.6% 71.4%, #9aa0a6 71.4% 85.7%, var(--color-danger) 85.7% 100%);
}

.monitoring-progress-marker {
  position: absolute;
  top: 50%;
  left: var(--monitoring-progress-marker);
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--color-ink-dark);
  border-radius: 50%;
  background: var(--color-paper-champagne);
  box-shadow: 0 0 0 2px var(--color-paper-champagne);
  transform: translate(-50%, -50%);
}

.monitoring-metric-card.is-ok .monitoring-metric-dot {
  background: var(--color-success);
  box-shadow: 0 0 0 0.25rem var(--color-success-100);
}

.monitoring-metric-card.is-ok em {
  color: var(--color-success);
}

.monitoring-value-cell.is-warning {
  color: var(--color-danger-600);
  background: color-mix(in srgb, var(--color-danger-100) 55%, transparent);
  font-weight: 800;
}

@media (max-width: 900px) {
  .monitoring-threshold-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .monitoring-threshold-heading {
    flex-direction: column;
    gap: 0.45rem;
  }

  .monitoring-threshold-source {
    align-self: flex-start;
  }

  .monitoring-threshold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-thresholds {
    padding: 0.9rem;
  }
}

/* Hallmark · Workbench page pass · Atelier system · app surfaces only
 * Design Read: trust-first operational workspace with a calm paper canvas,
 * obsidian command chrome, cobalt data surfaces and bronze action states.
 * No new route, data, handler or icon dependency is introduced here.
 */
#view-dashboard {
  min-width: 0;
  color: var(--color-ink-dark);
  background: var(--color-paper-champagne);
}

#view-dashboard .dashboard-main,
#view-dashboard .dashboard-grid,
#view-dashboard .screen-view {
  min-width: 0;
}

#view-dashboard .home-dashboard-view,
#view-dashboard .reports-view,
#view-dashboard .monitoring-view,
#view-dashboard #view-profile.workspace-card,
#view-dashboard .kpi-review-forms-view {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-paper-champagne);
  box-shadow: var(--shadow-soft);
}

#view-dashboard .home-dashboard-view {
  background: color-mix(in srgb, var(--color-paper-champagne) 94%, var(--color-accent-gold) 6%);
}

#view-dashboard .home-dashboard-view::before {
  border-color: var(--color-accent-gold-glow);
  box-shadow: 0 0 0 2rem var(--color-paper-champagne), 0 0 0 2.1rem var(--color-accent-gold-glow), 0 0 0 5rem var(--color-paper-champagne), 0 0 0 5.1rem var(--color-accent-gold-glow);
}

#view-dashboard :is(.home-dashboard-card, .home-management-card, .reports-table-shell, .monitoring-panel, .monitoring-thresholds, .info-section, .kpi-review-form-note) {
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

#view-dashboard :is(.home-dashboard-card, .home-management-card, .monitoring-panel, .monitoring-threshold-card, .info-section, .kpi-review-form-note) {
  transition: transform var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}

#view-dashboard :is(.home-dashboard-card, .home-management-card, .monitoring-panel, .monitoring-threshold-card, .info-section, .kpi-review-form-note):hover {
  border-color: var(--color-accent-gold-glow);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

#view-dashboard :is(.home-dashboard-heading h1, .reports-heading h1, .monitoring-header h1, .card-title, .tasks-title, .task-report-title, .monitoring-panel-heading h2, .monitoring-threshold-heading h2) {
  color: var(--color-ink-dark);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.035em;
}

#view-dashboard :is(.home-dashboard-heading p, .reports-heading p, .monitoring-header p, .monitoring-panel-heading p, .monitoring-threshold-note, .reports-footnote) {
  color: var(--color-ink-muted);
}

#view-dashboard :is(button, a, select, input, textarea):focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

#view-dashboard :is(button, select, input, textarea):disabled,
#view-dashboard [aria-disabled="true"] {
  opacity: 0.52;
  cursor: not-allowed;
}

#view-dashboard :is(button, a, .home-due-item, .monitoring-threshold-card, .monitoring-tab, .nav-list-item) {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}

#view-dashboard :is(button, .home-due-item, .monitoring-threshold-card, .monitoring-tab, .nav-list-item):active {
  transform: translateY(1px);
}

#view-dashboard :is([aria-busy="true"], .is-loading, [data-state="loading"]) {
  cursor: progress;
  opacity: 0.72;
}

#view-dashboard :is(.reports-error, .monitoring-error, .kpi-review-empty.is-error, .error-banner)[role="alert"],
#view-dashboard :is(.reports-error, .monitoring-error, .kpi-review-empty.is-error, .error-banner):not(.hide) {
  border: 1px solid var(--color-danger-100);
  border-radius: var(--radius-sm);
  background: var(--color-danger-100);
  color: var(--color-danger-600);
}

#view-dashboard :is(.reports-empty-state, .monitoring-empty-state, .kpi-review-empty, .empty-state) {
  color: var(--color-ink-muted);
}

/* Home: one workbench surface, three priority lanes. */
#view-dashboard .home-dashboard-topline {
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--color-border);
}

#view-dashboard .home-dashboard-kicker,
#view-dashboard .home-card-index,
#view-dashboard .home-period-label,
#view-dashboard .reports-kicker,
#view-dashboard .monitoring-kicker,
#view-dashboard .monitoring-panel-kicker,
#view-dashboard .card-kicker {
  color: var(--color-accent-gold-dim);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#view-dashboard .home-card-index {
  color: var(--color-ink-muted);
}

#view-dashboard .home-context-banner {
  border-color: var(--color-accent-gold-glow);
  background: color-mix(in srgb, var(--color-paper-obsidian) 94%, var(--color-accent-gold) 6%);
  color: var(--color-ink-light);
}

#view-dashboard .home-context-copy strong,
#view-dashboard .home-context-period {
  color: var(--color-accent-gold-hover);
}

#view-dashboard .home-context-icon {
  border: 1px solid var(--color-accent-gold-glow);
  background: var(--color-paper-obsidian);
  color: var(--color-accent-gold);
}

#view-dashboard .home-period-select-wrap select,
#view-dashboard .period-select,
#view-dashboard :is(.reports-filter select, .monitoring-select-field select, .kpi-review-forms-filters select) {
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-dark);
}

#view-dashboard :is(.home-period-select-wrap select, .period-select, .reports-filter select, .monitoring-select-field select, .kpi-review-forms-filters select):hover {
  border-color: var(--color-accent-gold);
  background: var(--color-home-wash);
}

#view-dashboard .home-dashboard-card:hover,
#view-dashboard .home-management-card:hover {
  border-color: var(--color-accent-gold-glow);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

#view-dashboard .home-year-card .home-total-number strong,
#view-dashboard .home-month-copy strong,
#view-dashboard .home-metric-copy span {
  color: var(--color-accent-gold-dim);
}

#view-dashboard .home-month-card {
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-accent-gold) 12%);
}

#view-dashboard .home-progress-ring {
  background: conic-gradient(var(--color-accent-gold) var(--home-progress), var(--color-home-neutral-soft) 0);
}

#view-dashboard .home-meter span {
  background: var(--meter-gradient, var(--meter-color, var(--color-accent-gold)));
}

#view-dashboard .home-meter.is-segmented span {
  background: var(--meter-gradient) !important;
}

#view-dashboard .home-meter.is-negative span {
  background: var(--color-danger) !important;
}

#view-dashboard .home-meter.is-warning span {
  background: var(--color-accent-gold) !important;
}

#view-dashboard .home-meter.is-positive span {
  background: var(--color-success) !important;
}

/* Tasks: obsidian context rail + paper table, with cobalt reserved for data. */
#view-dashboard #view-personal-tasks {
  min-width: 0;
  gap: 1rem;
}

#view-dashboard #view-personal-tasks .tasks-sidebar {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
}

#view-dashboard #view-personal-tasks .tasks-sidebar ul,
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#view-dashboard #view-personal-tasks .tasks-sidebar li,
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item {
  list-style: none !important;
  list-style-type: none !important;
  border: none !important;
  background: transparent;
  box-shadow: none !important;
  outline: none !important;
}

#view-dashboard #view-personal-tasks .tasks-sidebar li::marker,
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item::marker {
  display: none !important;
  content: "" !important;
}

#view-dashboard #view-personal-tasks .tasks-sidebar :is(.nav-kicker, .summary-header) {
  color: #64748b;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#view-dashboard #view-personal-tasks .tasks-sidebar :is(.nav-list-item a, .summary-row, .period-label) {
  color: #334155;
  text-decoration: none !important;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .period-picker-card,
#view-dashboard #view-personal-tasks .tasks-sidebar .summary-block {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: none;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .period-picker-card:hover,
#view-dashboard #view-personal-tasks .tasks-sidebar .summary-block:hover {
  box-shadow: none;
  border-color: #cbd5e1;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item {
  position: relative;
  border-radius: 8px;
  border: none !important;
  background: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:hover {
  background: #f1f5f9;
  border: none !important;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:hover a {
  color: #0f172a;
  text-decoration: none !important;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.active {
  border: none !important;
  background: #1e3a8a !important;
  box-shadow: 0 2px 6px -1px rgba(30, 58, 138, 0.25);
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.active a {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none !important;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-indicator {
  display: none;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  transition: background-color 150ms ease, color 150ms ease;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item.active .nav-count-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:focus,
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item:focus-within,
#view-dashboard #view-personal-tasks .tasks-sidebar .nav-list-item a:focus {
  outline: none !important;
  box-shadow: none !important;
}

#view-dashboard #view-personal-tasks .tasks-main-content {
  min-width: 0;
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-accent-gold) 6%);
  box-shadow: var(--shadow-task-shell);
}

#view-dashboard #view-personal-tasks .tasks-title {
  color: var(--color-ink-dark);
}

#view-dashboard #view-personal-tasks .tasks-toolbar :is(.tb-btn, button) {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

#view-dashboard #view-personal-tasks .tasks-toolbar .btn-search {
  border-color: var(--color-paper-obsidian);
  background: var(--color-paper-obsidian);
  color: var(--color-ink-light);
}

#view-dashboard #view-personal-tasks .tasks-toolbar .btn-add {
  border-color: var(--color-accent-gold);
  background: var(--color-accent-gold);
  color: var(--color-ink-light);
}

#view-dashboard #view-personal-tasks .tasks-toolbar :is(.btn-import, .btn-export, .btn-category) {
  background: var(--color-surface);
  color: var(--color-ink-dark);
}

#view-dashboard #view-personal-tasks .tasks-toolbar .btn-evaluate {
  border-color: var(--color-accent-gold-glow);
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold-dim);
}

#view-dashboard #view-personal-tasks .tasks-toolbar .btn-delete {
  border-color: var(--color-danger-100);
  background: var(--color-danger-100);
  color: var(--color-danger-600);
}

#view-dashboard #view-personal-tasks .filter-tab.active {
  border-bottom-color: var(--color-accent-gold);
  color: var(--color-accent-gold-dim);
}

#view-dashboard #view-personal-tasks .filter-tab .count-badge {
  background: var(--color-home-neutral-soft);
  color: var(--color-ink-muted);
}

#view-dashboard #view-personal-tasks .filter-tab[data-filter="dang_thuc_hien"] .count-badge,
#view-dashboard #view-personal-tasks .filter-tab[data-filter="cho_danh_gia"] .count-badge {
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold-dim);
}

#view-dashboard #view-personal-tasks .filter-tab[data-filter="da_danh_gia"] .count-badge {
  background: var(--color-home-success-soft);
  color: var(--color-success);
}

#view-dashboard #view-personal-tasks .tasks-table-wrapper {
  min-width: 0;
  border-radius: var(--radius-sm);
}

#view-dashboard #view-personal-tasks .tasks-table thead tr {
  background: var(--color-task-blue-dark);
}

#view-dashboard #view-personal-tasks .tasks-table tbody tr:hover {
  background: var(--color-task-blue-wash);
}

/* Reports and KPI review: keep data tables dense, but give the shell a clear reading edge. */
#view-dashboard :is(.reports-view, .kpi-review-forms-view) {
  padding: clamp(1rem, 2.2vw, 2rem);
}

#view-dashboard .reports-header {
  border-bottom-color: var(--color-border);
}

#view-dashboard :is(.reports-filter-button, #btn-load-kpi-review-forms) {
  border-color: var(--color-paper-obsidian);
  border-radius: var(--radius-sm);
  background: var(--color-paper-obsidian);
  color: var(--color-ink-light);
}

#view-dashboard .reports-export-button {
  border-color: var(--color-accent-gold-glow);
  border-radius: var(--radius-sm);
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold-dim);
}

#view-dashboard :is(.reports-filter-button, .reports-export-button, #btn-load-kpi-review-forms):hover {
  filter: none;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

#view-dashboard .reports-table-shell,
#view-dashboard .kpi-review-forms-table-wrap {
  overflow: hidden;
  border-radius: var(--radius-md);
}

#view-dashboard :is(.reports-table, .kpi-review-forms-table) th {
  border-color: var(--color-task-blue-dark);
  background: var(--color-task-blue-dark);
  color: var(--color-ink-light);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

#view-dashboard :is(.reports-table, .kpi-review-forms-table) td {
  border-color: var(--color-border);
  color: var(--color-ink-dark);
}

#view-dashboard :is(.reports-table tbody tr:nth-child(even), .kpi-review-forms-table tbody tr:nth-child(even)) {
  background: var(--color-home-wash);
}

#view-dashboard :is(.reports-table tbody tr:hover, .kpi-review-forms-table tbody tr:hover) {
  background: var(--color-task-blue-wash);
}

#view-dashboard .task-report-title {
  color: var(--color-ink-dark);
  text-align: left;
  text-transform: none;
}

#view-dashboard :is(.report-person-cell strong, .report-total, .task-report-organization-name, .task-report-total-row) {
  color: var(--color-ink-dark);
}

#view-dashboard .kpi-review-forms-view {
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
}

#view-dashboard .kpi-review-forms-filters select {
  min-width: min(20rem, 100%);
  height: 2.8rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

#view-dashboard .kpi-review-status.status-submitted,
#view-dashboard .kpi-review-status.status-manager_forwarded {
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold-dim);
}

#view-dashboard .kpi-review-status.status-reviewed {
  background: var(--color-home-success-soft);
  color: var(--color-success);
}

#view-dashboard .kpi-review-status.status-returned {
  background: var(--color-danger-100);
  color: var(--color-danger-600);
}

#view-dashboard .kpi-review-status.status-not_submitted {
  background: var(--color-home-neutral-soft);
  color: var(--color-ink-muted);
}

#view-dashboard .kpi-review-view-button,
#view-dashboard .kpi-review-page-controls button {
  color: var(--color-accent-gold-dim);
}

#view-dashboard .kpi-review-page-controls strong {
  background: var(--color-paper-obsidian);
  color: var(--color-accent-gold);
}

/* Monitoring: live signal hierarchy without a neon control-room treatment. */
#view-dashboard .monitoring-header,
#view-dashboard .monitoring-panel-heading,
#view-dashboard .monitoring-threshold-heading {
  border-color: var(--color-border);
}

#view-dashboard .monitoring-header h1 {
  font-size: clamp(1.75rem, 3vw, 2.65rem);
}

#view-dashboard .monitoring-access-badge {
  border-color: var(--color-accent-gold-glow);
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold-dim);
}

#view-dashboard :is(.monitoring-source-link, .monitoring-threshold-source) {
  color: var(--color-accent-gold-dim);
}

#view-dashboard .monitoring-tab.is-active {
  border-color: var(--color-accent-gold);
  background: var(--color-paper-obsidian);
  color: var(--color-accent-gold);
}

#view-dashboard .monitoring-panel {
  border-radius: var(--radius-md);
}

#view-dashboard .monitoring-table-shell {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

#view-dashboard .monitoring-table th {
  background: var(--color-task-blue-dark);
  color: var(--color-ink-light);
}

#view-dashboard .monitoring-table td {
  border-color: var(--color-border);
}

#view-dashboard .monitoring-table tbody tr:hover {
  background: var(--color-task-blue-wash);
}

#view-dashboard .monitoring-progress-track {
  background: linear-gradient(to right, var(--color-success) 0 50%, var(--color-home-neutral) 50% 71.5%, var(--color-danger) 71.5% 100%);
}

#view-dashboard .monitoring-progress-track.is-range {
  background: linear-gradient(to right, var(--color-danger) 0 14.3%, var(--color-home-neutral) 14.3% 28.6%, var(--color-success) 28.6% 71.4%, var(--color-home-neutral) 71.4% 85.7%, var(--color-danger) 85.7% 100%);
}

/* Profile: identity rail remains dark; detail surface stays quiet and readable. */
#view-dashboard #view-profile.workspace-card {
  background: var(--color-paper-champagne);
  box-shadow: var(--shadow-soft);
}

#view-dashboard #view-profile .profile-left {
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  background: var(--color-paper-obsidian);
  box-shadow: var(--shadow-task-shell);
}

#view-dashboard #view-profile .profile-avatar-ph {
  border-color: var(--color-accent-gold);
  background: var(--color-brand-800);
  color: var(--color-accent-gold-hover);
}

#view-dashboard #view-profile .profile-pos {
  color: var(--color-accent-gold-hover);
}

#view-dashboard #view-profile .info-section,
#view-dashboard #view-profile .info-cell {
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

#view-dashboard #view-profile .info-section-title span {
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold-dim);
}

#view-dashboard #view-profile #btn-change-password {
  border-color: var(--color-paper-obsidian);
  border-radius: var(--radius-sm);
  background: var(--color-paper-obsidian);
  color: var(--color-accent-gold);
}

/* Responsive floor: 320 / 375 / 414 / 768 / desktop, with table scrolling contained. */
@media (max-width: 760px) {
  #view-dashboard .dashboard-main {
    padding: 0.85rem;
  }

  #view-dashboard :is(.reports-header, .monitoring-header, .monitoring-panel-heading) {
    align-items: stretch;
    flex-direction: column;
  }

  #view-dashboard :is(.reports-controls, .monitoring-header-actions) {
    width: 100%;
    justify-content: stretch;
  }

  #view-dashboard .reports-controls > * {
    min-width: 0;
    flex: 1 1 10rem;
  }

  #view-dashboard .monitoring-current-grid,
  #view-dashboard .monitoring-threshold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-dashboard .kpi-review-forms-filters {
    align-items: stretch;
  }

  #view-dashboard .kpi-review-forms-filters select {
    flex: 1 1 12rem;
  }

  #view-dashboard #view-profile .card-header {
    gap: 0.85rem;
  }
}

@media (max-width: 420px) {
  #view-dashboard .dashboard-main {
    padding: 0.65rem;
  }

  #view-dashboard :is(.home-dashboard-view, .reports-view, .monitoring-view, #view-profile.workspace-card, .kpi-review-forms-view) {
    padding: 0.8rem;
    border-radius: var(--radius-md);
  }

  #view-dashboard .home-dashboard-card,
  #view-dashboard .home-management-card,
  #view-dashboard .monitoring-panel,
  #view-dashboard .monitoring-thresholds {
    padding: 0.9rem;
  }

  #view-dashboard .home-dashboard-heading h1,
  #view-dashboard .reports-heading h1,
  #view-dashboard .monitoring-header h1,
  #view-dashboard .card-title {
    font-size: 1.55rem;
  }

  #view-dashboard .home-context-banner,
  #view-dashboard .home-context-copy,
  #view-dashboard .monitoring-header-actions,
  #view-dashboard .reports-status-row {
    align-items: flex-start;
    flex-direction: column;
  }

  #view-dashboard :is(.reports-controls, .tasks-toolbar, .kpi-review-forms-filters) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-dashboard #view-personal-tasks .tasks-toolbar .tb-btn,
  #view-dashboard .reports-controls > *,
  #view-dashboard .kpi-review-forms-filters > * {
    width: 100%;
    min-width: 0;
  }

  #view-dashboard #view-personal-tasks .tasks-main-content {
    padding: 0.8rem;
  }

  #view-dashboard #view-personal-tasks .tasks-filter-tabs {
    gap: 0.7rem;
  }

  #view-dashboard :is(.monitoring-current-grid, .monitoring-threshold-grid, #view-profile .info-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-dashboard #view-profile .profile-left {
    padding: 1rem;
  }

  #view-dashboard .kpi-review-pagination {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
  }

  #view-dashboard .kpi-review-page-controls {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-dashboard :is(.home-dashboard-card, .home-management-card, .monitoring-panel, .monitoring-threshold-card, .info-section, .kpi-review-form-note, button, a, .home-due-item, .monitoring-tab, .nav-list-item) {
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* Login fields · adapted from the supplied Uiverse floating-label pattern.
 * Scope: the two authentication fields only. Tokens and transform-only motion
 * keep the interaction aligned with the Atelier login surface.
 */
#view-login .hm-floating-field {
  position: relative;
  display: block;
  min-height: 3.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#view-login .hm-floating-field .hm-input {
  width: 100%;
  min-height: 3.55rem;
  padding: 1.15rem 0.2rem 0.55rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-ink-dark);
}

#view-login .hm-password-wrapper .hm-input {
  padding-right: 2.75rem;
}

#view-login .hm-password-toggle {
  position: absolute;
  right: 0.1rem;
  bottom: 0.45rem;
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  padding: 0.35rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

#view-login .hm-password-toggle:hover {
  background: var(--color-home-accent-soft);
  color: var(--color-accent-gold);
}

#view-login .hm-password-toggle:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

#view-login .hm-password-icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#view-login .hm-password-icon-hide,
#view-login .hm-password-toggle[aria-pressed="false"] .hm-password-icon-hide {
  display: none;
}

#view-login .hm-password-toggle[aria-pressed="true"] .hm-password-icon-show {
  display: none;
}

#view-login .hm-password-toggle[aria-pressed="true"] .hm-password-icon-hide {
  display: block;
}

#view-login .hm-floating-field .hm-input:hover {
  border-color: var(--color-ink-muted);
  background: transparent;
}

#view-login .hm-floating-field .hm-input:focus {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

#view-login .hm-floating-field:focus-within {
  border-color: transparent;
  box-shadow: none;
}

#view-login .hm-floating-field .hm-input::placeholder {
  color: transparent;
}

#view-login .hm-floating-label {
  position: absolute;
  top: 1.05rem;
  left: 0.2rem;
  z-index: 1;
  margin: 0;
  pointer-events: none;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  font-weight: 500;
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

#view-login .hm-floating-field .hm-input:focus ~ .hm-floating-label,
#view-login .hm-floating-field .hm-input:not(:placeholder-shown) ~ .hm-floating-label {
  color: var(--color-accent-gold-dim);
  transform: translateY(-1.05rem) scale(0.78);
}

#view-login .hm-input-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 2px;
  pointer-events: none;
}

#view-login .hm-input-bar::before,
#view-login .hm-input-bar::after {
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 2px;
  content: "";
  background: var(--color-accent-gold);
  transform: scaleX(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

#view-login .hm-input-bar::before {
  left: 0;
  transform-origin: right center;
}

#view-login .hm-input-bar::after {
  right: 0;
  transform-origin: left center;
}

#view-login .hm-floating-field .hm-input:focus ~ .hm-input-bar::before,
#view-login .hm-floating-field .hm-input:focus ~ .hm-input-bar::after {
  transform: scaleX(1);
}

#view-login .hm-input-highlight {
  position: absolute;
  top: 25%;
  left: 0;
  width: 6rem;
  height: 60%;
  pointer-events: none;
  opacity: 0;
  background: var(--color-accent-gold-glow);
}

#view-login .hm-floating-field .hm-input:focus ~ .hm-input-highlight {
  animation: hm-input-highlighter var(--dur-slow) var(--ease-out) both;
}

@keyframes hm-input-highlighter {
  from { opacity: 0.5; transform: translateX(0); }
  to { opacity: 0; transform: translateX(4rem); }
}

#view-login .hm-username-wrapper .hm-username-domain {
  position: absolute;
  top: 1.35rem;
  right: 0.2rem;
  z-index: 2;
  padding-right: 0;
  pointer-events: none;
}

#view-login .hm-username-wrapper .hm-input {
  padding-right: 12.5rem;
}

#view-login .hm-floating-field:focus-within .hm-username-domain {
  color: var(--color-accent-gold-dim);
}

@media (max-width: 520px) {
  #view-login .hm-username-wrapper .hm-input {
    padding-right: 10.5rem;
  }

  #view-login .hm-username-wrapper .hm-username-domain {
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-login .hm-floating-label,
  #view-login .hm-input-bar::before,
  #view-login .hm-input-bar::after {
    transition-duration: 0.01ms;
  }

  #view-login .hm-input-highlight {
    animation: none;
  }
}

/* Contrast fix · mobile task rail uses light chips inside the obsidian shell. */
#view-dashboard #view-personal-tasks .tasks-sidebar .summary-row {
  color: var(--color-ink-dark);
}

#view-dashboard #view-personal-tasks .tasks-sidebar .summary-row.highlight {
  color: var(--color-accent-gold-dim);
}

/* Shared tooltip · Uiverse-inspired floating message with keyboard parity. */
#view-dashboard [data-tooltip],
#view-login [data-tooltip] {
  position: relative;
}

#view-dashboard [data-tooltip]::before,
#view-dashboard [data-tooltip]::after,
#view-login [data-tooltip]::before,
#view-login [data-tooltip]::after {
  position: absolute;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

#view-dashboard [data-tooltip]::before,
#view-login [data-tooltip]::before {
  right: 50%;
  bottom: calc(100% + 0.2rem);
  width: 0;
  height: 0;
  content: "";
  border: 0.35rem solid transparent;
  border-top-color: var(--color-paper-obsidian);
  transform: translate(50%, 0.5rem);
}

#view-dashboard [data-tooltip]::after,
#view-login [data-tooltip]::after {
  right: 50%;
  bottom: calc(100% + 0.75rem);
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  background: var(--color-paper-obsidian);
  box-shadow: var(--shadow-lift);
  color: var(--color-ink-light);
  content: attr(data-tooltip);
  font: 600 var(--text-xs)/1.45 var(--font-body);
  white-space: normal;
  transform: translate(50%, 0.5rem);
}

#view-dashboard [data-tooltip]:hover::before,
#view-dashboard [data-tooltip]:hover::after,
#view-dashboard [data-tooltip]:focus-visible::before,
#view-dashboard [data-tooltip]:focus-visible::after,
#view-dashboard [data-tooltip][aria-expanded="true"]::before,
#view-dashboard [data-tooltip][aria-expanded="true"]::after,
#view-login [data-tooltip]:hover::before,
#view-login [data-tooltip]:hover::after,
#view-login [data-tooltip]:focus-visible::before,
#view-login [data-tooltip]:focus-visible::after,
#view-login [data-tooltip][aria-expanded="true"]::before,
#view-login [data-tooltip][aria-expanded="true"]::after {
  opacity: 1;
  transform: translate(50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  #view-dashboard [data-tooltip]::before,
  #view-dashboard [data-tooltip]::after,
  #view-login [data-tooltip]::before,
  #view-login [data-tooltip]::after {
    transition-duration: 0.01ms;
  }
}

/* Worklist checkbox · Uiverse SVG draw-on treatment, scoped to the task table. */
#view-personal-tasks .tasks-table .checkbox {
  --checkbox-color: var(--color-paper-obsidian, #101215);
  --checkbox-size: 1.5rem;
  position: relative;
  display: inline-flex;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  align-items: center;
  justify-content: center;
  color: var(--checkbox-color);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}

#view-personal-tasks .tasks-table .checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  opacity: 0;
}

#view-personal-tasks .tasks-table .checkbox .checkmark {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 150ms var(--ease-out), filter 150ms var(--ease-out), outline-color 150ms var(--ease-out);
}

#view-personal-tasks .tasks-table .checkbox:hover .checkmark,
#view-personal-tasks .tasks-table .checkbox input:checked ~ .checkmark {
  opacity: 1;
}

#view-personal-tasks .tasks-table .checkbox input:checked ~ .checkmark {
  color: var(--color-success, #16a26e);
}

#view-personal-tasks .tasks-table .checkbox:hover:not(:has(input:disabled)) .checkmark {
  outline: 1px solid oklch(18% 0.02 50 / 0.45);
  outline-offset: 3px;
  filter: drop-shadow(0 0 0.28rem oklch(18% 0.02 50 / 0.24));
}

#view-personal-tasks .tasks-table .checkbox .checkmark svg {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  overflow: visible;
}

#view-personal-tasks .tasks-table .checkbox .checkmark svg rect {
  stroke-dasharray: 88 0;
  stroke-dashoffset: 73;
  transition: stroke-dasharray 100ms var(--ease-out);
}

#view-personal-tasks .tasks-table .checkbox input:checked ~ .checkmark svg rect {
  stroke-dasharray: 80 18;
}

#view-personal-tasks .tasks-table .checkbox .checkmark svg polyline {
  stroke-dasharray: 0 30;
  stroke-dashoffset: 1;
  transition: stroke-dasharray 150ms var(--ease-out);
}

#view-personal-tasks .tasks-table .checkbox input:checked ~ .checkmark svg polyline {
  stroke-dasharray: 30 30;
}

#view-personal-tasks .tasks-table .checkbox input:focus-visible ~ .checkmark {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 4px;
  border-radius: 0.45rem;
  opacity: 1;
}

#view-personal-tasks .tasks-table .checkbox:has(input:disabled) {
  cursor: not-allowed;
}

#view-personal-tasks .tasks-table .checkbox input:disabled ~ .checkmark {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  #view-personal-tasks .tasks-table .checkbox .checkmark,
  #view-personal-tasks .tasks-table .checkbox .checkmark svg rect,
  #view-personal-tasks .tasks-table .checkbox .checkmark svg polyline {
    transition: none;
  }
}