/* Hallmark · macrostructure: existing administration shell · tone: restrained · anchor hue: red */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 */
@import url("/static/tokens.css?v=20261006-quiet-2");

:root {
  --party-red: var(--color-accent);
  --party-dark: var(--color-accent-hover);
  --party-gold: var(--color-gold);
  --ink: var(--color-ink);
  --blue: var(--color-info);
  --line: var(--color-line);
  --bg: var(--color-background);
  --green: var(--color-success);
  --red: var(--color-accent);
  --orange: var(--color-warning);
  --muted: var(--color-muted);
}
html, body { overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); }
body > header {
  background-color: var(--color-paper);
  background-image: url("/static/images/song.png"), url("/static/images/banner.png");
  background-position: left top, right top;
  background-repeat: no-repeat;
  background-size: auto 100%, 100% 100%;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.brand { letter-spacing: .3px; }
.brand, .brand b { color: var(--color-accent-hover); text-shadow: none; }
.brand small, .brand small.org-header-name { color: var(--color-ink); }
.header-clock, .logout, .logout a, .account > div > b { color: var(--color-paper); }
.account { background: var(--color-accent-hover); padding: 6px 10px; border-radius: var(--radius-control); }
.account .icon-only, .account .ai-kpi-header-btn { background: var(--color-accent-hover); color: var(--color-paper); border-color: var(--color-paper); }
.account .icon-only:hover, .account .ai-kpi-header-btn:hover { background: var(--color-paper); color: var(--color-accent-hover); }
.logo { background: var(--color-accent); border: 1px solid var(--color-gold); color: var(--color-gold); box-shadow: none; border-radius: var(--radius-control); }
body > aside { background: var(--color-paper); border-color: var(--line); box-shadow: none; }
.aside-label { color: var(--muted); }
aside nav button { color: var(--ink); box-shadow: none; border-left: 4px solid transparent; }
aside nav button:hover { background: var(--color-subtle); color: var(--color-accent); box-shadow: none; }
aside nav button.active, aside nav button.active:hover { background: var(--color-accent); color: var(--color-paper); border-left-color: var(--color-accent); box-shadow: none; }
aside nav button.active:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.slogan { background: var(--color-paper); border-color: var(--line); box-shadow: none; }
.slogan h1, .slogan h1 span { color: var(--ink); }
.slogan i, .slogan em { color: var(--color-accent); }

/* White work surfaces, neutral separators and restrained headings. */
.panel, .toolbar, .card, .record, .admin-box, .integrity, .import-role, .zalo-box,
.task-filter-bar, .task-page-head, .proposal-page-head, .staff-kpi-hero,
.health-score, .business-roles, .admin-panel-intro, .integration-grid > div {
  background: var(--color-paper); border-color: var(--line); box-shadow: none; border-radius: var(--radius-panel);
}
.card.blue, .card.green, .card.yellow, .card.red, .card.violet,
.mine-metrics button, .leadership-radar div, .stat-strip .stat-link {
  background: var(--color-paper); color: var(--ink); border-color: var(--line); box-shadow: none;
}
.card label, .card small, .metric small { color: var(--muted); }
.task-review-summary-strip article { background: var(--color-paper); border-color: var(--line); box-shadow: none; }
.task-review-summary-strip small, .task-review-summary-strip span { color: var(--muted); }
.task-review-summary-strip b { color: var(--ink); }
.status.draft { background: var(--color-subtle); color: var(--muted); border-color: var(--line); }
.bar.status-draft i, .status-draft i { background: var(--muted); }
.dashboard-row-pager, .backup-console, .backup-hero, .backup-item { background: var(--color-subtle); border-color: var(--line); box-shadow: none; }
.role-choice-icon, .business-roles-head > span { background: var(--color-subtle); color: var(--muted); }
aside::-webkit-scrollbar-track { background: var(--color-subtle); }
aside::-webkit-scrollbar-thumb { background: var(--color-line); }
aside::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }
.panel h3, .help-head h2, .help-card h3, .admin-title h2,
.task-page-head h2, .proposal-heading h2 { color: var(--ink); font-style: normal; }
th, .summary h3, .table-title, .proposal-card-head {
  background: var(--color-subtle); color: var(--ink); border-color: var(--line);
}
td { border-color: var(--line); }
tbody tr:hover { background: var(--color-subtle); }
.modern-task-table th.sortable-th:hover { background: var(--color-info-soft); color: var(--ink); }
.tabs button, .admin-main-tabs, .admin-main-tabs button { background: var(--color-subtle); color: var(--ink); border-color: var(--line); box-shadow: none; backdrop-filter: none; }
.tabs button.active, .admin-tabs .active, .admin-main-tabs button.active,
.chip.active { background: var(--color-accent); color: var(--color-paper); box-shadow: none; }

/* Override the older important gradient on primary task actions. */
button.primary, a.primary, .task-head-actions .primary, .task-head-actions .taonhiemvu,
.task-v2-actions .primary { background: var(--color-accent) !important; color: var(--color-paper) !important; border-color: var(--color-accent) !important; box-shadow: none; }
button.primary:hover, a.primary:hover, .task-head-actions .taonhiemvu:hover { background: var(--color-accent-hover) !important; color: var(--color-paper) !important; }
.success { background: var(--color-success); color: var(--color-paper); }
.purple { background: var(--color-info); color: var(--color-paper); }
button.success:hover, button.purple:hover { color: var(--color-paper); }
.task-v2-actions button:not(.primary), .task-v2-actions a:not(.primary),
.task-action-group > summary { background: var(--color-paper); border-color: var(--line); color: var(--ink); }
.task-action-group[open] > summary { background: var(--color-accent-soft); color: var(--color-accent); }
.task-filter-bar button, .btn-primary { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
.task-filter-bar button:hover, .btn-primary:hover { background: var(--color-accent-hover); color: var(--color-paper); }
.health-check-list button, .health-detail-actions button {
  background: var(--color-accent-soft); color: var(--color-accent-hover);
  border-color: var(--line); font-weight: 600;
}
.health-check-list button:hover, .health-detail-actions button:hover,
.health-check-list button:focus-visible, .health-detail-actions button:focus-visible {
  background: var(--color-paper); color: var(--color-accent-hover); border-color: var(--color-accent);
}
.health-check-actions button:first-child { background: var(--color-paper); color: var(--color-accent-hover); }
.health-check-actions button:first-child:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.task-action-menu { background: var(--color-paper); border-color: var(--line); box-shadow: 0 4px 16px var(--color-shadow); }
.task-column-menu label:hover { background: var(--color-subtle); }
.task-action-group > summary span, .task-pill, .task-person { background: var(--color-info-soft); color: var(--color-info); }
.info-note, .permission-note, .person-role-summary, .forward-summary,
.form-section-title, .task-upload, .task-repeat, .mini div, .chart-legend div {
  background: var(--color-subtle); color: var(--muted); border-color: var(--line);
}
.warn-note, .file-count { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--line); }
.status.done { background: var(--color-success-soft); color: var(--color-success); }
.status.late, .danger-zone, .urgent li { background: var(--color-accent-soft); color: var(--color-accent); }
.status.doing { background: var(--color-info-soft); color: var(--color-info); }
.status.new { background: var(--color-warning-soft); color: var(--color-warning); }

/* Preserve data segments: conic gradients are charts, not decoration. */
.progress, .unit-bars .stack { background: var(--color-info-soft); }
.bar i, .progress span, .activity-chart article i, .staff-kpi-bars i,
.staff-kpi-approval-grid i { background: var(--color-info); }
.staff-kpi-trend i { background: var(--color-info); }
.status-donut { background: conic-gradient(var(--green) 0 var(--done),var(--blue) var(--done) var(--doing),var(--orange) var(--doing) var(--new),var(--red) var(--new) 100%); }
.unit-bars .stack i { background: var(--green); }
.unit-bars .stack em { background: var(--blue); }
.unit-bars .stack strong { background: var(--red); }
.staff-kpi-donut { background: conic-gradient(var(--green) 0 var(--score),var(--line) var(--score) 100%); }

.modal { background: var(--color-overlay); backdrop-filter: none; }
.modal form, .ai-report-modal, .document-viewer-modal { background: var(--color-paper); border-color: var(--line); box-shadow: 0 8px 32px var(--color-shadow); }
.ai-report-modal pre, .ai-actions { background: var(--color-subtle); border-color: var(--line); }
input, select, textarea { accent-color: var(--color-accent); }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-info); outline-offset: 2px; }
button:disabled { cursor: not-allowed; }
.task-column-nav { background: var(--color-paper); border-color: var(--line); box-shadow: 0 2px 8px var(--color-shadow); backdrop-filter: none; border-radius: var(--radius-panel); }
.task-column-nav button { background: var(--color-paper); color: var(--muted); border-color: var(--line); box-shadow: none; }
.task-column-nav button:hover:not(:disabled) { background: var(--color-subtle); transform: none; }
.sidebar-toggle { background: var(--color-paper); color: var(--color-accent); border-color: var(--line); }
.sidebar-collapsed aside nav button::after { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); box-shadow: none; }
#loginScreen { background: url('/static/images/bg_portal.jpg') no-repeat center center fixed }
.login-card { background: var(--color-paper); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: 0 8px 32px var(--color-shadow); }
.login-card p, .login-card small { color: var(--muted); }
.login-card h1 { color: var(--color-accent); letter-spacing: .5px; }
.google-login { box-shadow: none; }

/* No decorative entrance, pulse or lift; retain transforms used by controls. */
*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
.admin-main-panel, .panel, .card, .slogan, .role-choice, aside nav button { animation: none !important; }
.role-choice:hover { transform: none; box-shadow: none; }
.role-choice:has(input:checked) { background: var(--color-accent-soft); box-shadow: none; }
@media (max-width: 767px) {
  body:not(.sidebar-collapsed) aside { box-shadow: 4px 0 12px var(--color-shadow); }
}