@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap&subset=vietnamese');

/**
 * Dashboard design tokens
 * Single source of truth for UI colour, type, spacing, radius and elevation.
 * Legacy aliases (--blue, --line, etc.) are intentionally retained while
 * screens migrate so presentation can change without touching application logic.
 */
:root {
  /* Neutral */
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* Semantic colour scale */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-500: #2563eb;
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-600: #047857;
  --success-700: #065f46;
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-600: #b45309;
  --warning-700: #92400e;
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-600: #2563eb;
  --info-700: #1d4ed8;

  /* Semantic roles */
  --color-canvas: var(--neutral-100);
  --color-surface: #ffffff;
  --color-surface-subtle: var(--neutral-50);
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-disabled: var(--neutral-400);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-focus-ring: rgba(37, 99, 235, .36);

  /* Shared page-header identity, aligned with the KTXH tm-hero. */
  --hero-navy-900: #0c2e56;
  --hero-navy-800: #124a87;
  --hero-navy-600: #185fa5;
  --hero-navy-100: #dbeafb;
  --hero-orange-500: #f97316;
  --hero-orange-200: #fdba74;

  /* Typography: 16/24 base preserves readable information density. */
  --font-sans: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --font-size-caption: .75rem;
  --font-size-label: .8125rem;
  --font-size-body: .875rem;
  --font-size-h4: 1rem;
  --font-size-h3: 1.125rem;
  --font-size-h2: 1.25rem;
  --font-size-h1: 1.5rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 4 px spacing grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, .12);

  /* Compatibility aliases for the existing HTML screens. */
  --blue: var(--primary-600);
  --blue-dark: var(--primary-700);
  --blue-light: var(--primary-50);
  --bg: var(--color-canvas);
  --card: var(--color-surface);
  --line: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --font-main: var(--font-sans);
  --green: var(--success-600);
  --green-bg: var(--success-50);
  --red: var(--danger-600);
  --red-bg: var(--danger-50);
  --amber: var(--warning-600);
  --amber-bg: var(--warning-50);
  --purple: #6d28d9;
  --purple-bg: #f5f3ff;
  --radius: var(--radius-md);
}

/* Page-level hero bridge. Content and controls stay page-owned; this class
   only standardises typography, colour, background and responsive spacing. */
.ui-page-hero {
  background:
    radial-gradient(circle at 8% -20%, rgba(24, 95, 165, .72) 0, transparent 42%),
    radial-gradient(circle at 96% 120%, rgba(249, 115, 22, .30) 0, transparent 38%),
    var(--hero-navy-900) !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  color: #fff !important;
  isolation: isolate;
  margin-bottom: var(--space-6) !important;
  overflow: hidden;
  padding: var(--space-6) var(--space-8) var(--space-8) !important;
  position: relative;
}
.ui-page-hero::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  content: "";
  height: 1px;
  inset: auto 8% 13px;
  position: absolute;
}
.ui-page-hero::after {
  background: var(--hero-orange-500);
  border-radius: 999px;
  bottom: 11px;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 80px;
}
.ui-page-hero > * { position: relative; z-index: 1; }
.ui-page-hero h1 {
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  line-height: 1.2 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}
.ui-page-hero h1 .ui-hero-accent,
.ui-page-hero h1.ui-hero-accent,
.ui-auth-hero .title .ui-hero-accent { color: var(--hero-orange-500) !important; }
.ui-page-hero .subtitle,
.ui-page-hero .hint,
.ui-page-hero .hero-meta,
.ui-page-hero > p,
.ui-page-hero h1 + p { color: var(--hero-navy-100) !important; font-weight: 600; }
.ui-page-hero .eyebrow { color: var(--hero-orange-200) !important; font-weight: 700; letter-spacing: .14em; }
.ui-page-hero label { color: var(--hero-navy-100) !important; }
.page-header.ui-page-hero > div:first-child > div:first-child p { color: var(--hero-orange-200) !important; letter-spacing: .08em; }
.page-header.ui-page-hero > div:first-child > div:nth-child(2) p { color: #fff !important; }
.page-header.ui-page-hero hr { border-top-color: rgba(255,255,255,.7) !important; }
.ui-page-hero .avatar { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22); color: #fff !important; }
.ui-page-hero:not(.page-header) h1::before {
  color: var(--hero-orange-200);
  content: "UBND PHƯỜNG XUÂN HÒA";
  display: block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  margin-bottom: var(--space-2);
  text-shadow: none;
}
.ui-page-hero--has-kicker h1::before { display: none !important; }

/* Authentication screens have a compact header inside the focused form card. */
.ui-auth-hero {
  background:
    radial-gradient(circle at 92% 120%, rgba(249,115,22,.34), transparent 46%),
    var(--hero-navy-900);
  color: #fff;
  border-radius: 16px 16px 0 0;
  margin: -36px -32px var(--space-6);
  overflow: hidden;
  padding: var(--space-6) var(--space-8) var(--space-5);
  position: relative;
}
.ui-auth-hero::after { background: var(--hero-orange-500); border-radius: 999px; bottom: 0; content: ""; height: 4px; left: var(--space-8); position: absolute; width: 64px; }
.ui-auth-hero .title { color: #fff !important; font-family: var(--font-sans) !important; font-weight: 800 !important; }
.ui-auth-hero .subtitle { color: var(--hero-navy-100) !important; margin-bottom: 0 !important; }
.ui-auth-brand { color: var(--hero-navy-900) !important; }

/* Base components shared by all product screens. */
.ui-button,
.btn {
  --button-bg: var(--primary-600);
  --button-fg: #fff;
  --button-border: var(--primary-600);
  align-items: center;
  appearance: none;
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: var(--radius-sm);
  color: var(--button-fg);
  cursor: pointer;
  display: inline-flex;
  font: var(--font-weight-semibold) var(--font-size-label)/1 var(--font-sans);
  gap: var(--space-2);
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ui-button:hover:not(:disabled):not([aria-disabled="true"]),
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  --button-bg: var(--primary-700);
  --button-border: var(--primary-700);
}

.ui-button:active:not(:disabled):not([aria-disabled="true"]),
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.ui-button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.ui-button:disabled,
.ui-button[aria-disabled="true"],
.btn:disabled,
.btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; }

.ui-button--secondary, .btn-secondary { --button-bg: var(--neutral-700); --button-border: var(--neutral-700); }
.ui-button--secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) { --button-bg: var(--neutral-800); --button-border: var(--neutral-800); }
.ui-button--outline, .btn-ghost, .btn-o { --button-bg: var(--color-surface); --button-fg: var(--primary-700); --button-border: var(--primary-600); }
.ui-button--outline:hover:not(:disabled), .btn-ghost:hover:not(:disabled), .btn-o:hover:not(:disabled) { --button-bg: var(--primary-50); --button-fg: var(--primary-700); --button-border: var(--primary-700); }
.ui-button--ghost { --button-bg: transparent; --button-fg: var(--primary-700); --button-border: transparent; }
.ui-button--ghost:hover:not(:disabled) { --button-bg: var(--primary-50); --button-border: transparent; }
.ui-button--danger, .btn-danger, .btn-r, .m-danger, .modal-danger { --button-bg: var(--danger-600); --button-fg: #fff; --button-border: var(--danger-600); }
.ui-button--danger:hover:not(:disabled), .btn-danger:hover:not(:disabled), .btn-r:hover:not(:disabled), .m-danger:hover:not(:disabled), .modal-danger:hover:not(:disabled) { --button-bg: var(--danger-700); --button-border: var(--danger-700); }
.ui-button--success, .btn-success, .btn-green, .btn-ok, .btn-g { --button-bg: var(--success-600); --button-fg: #fff; --button-border: var(--success-600); }
.ui-button--success:hover:not(:disabled), .btn-success:hover:not(:disabled), .btn-green:hover:not(:disabled), .btn-ok:hover:not(:disabled), .btn-g:hover:not(:disabled) { --button-bg: var(--success-700); --button-border: var(--success-700); }
.btn-warning { --button-bg: var(--warning-600); --button-fg: #fff; --button-border: var(--warning-600); }
.btn-warning:hover:not(:disabled) { --button-bg: var(--warning-700); --button-border: var(--warning-700); }
.btn-info { --button-bg: var(--info-600); --button-fg: #fff; --button-border: var(--info-600); }
.btn-info:hover:not(:disabled) { --button-bg: var(--info-700); --button-border: var(--info-700); }
.btn-default { --button-bg: var(--color-surface); --button-fg: var(--neutral-700); --button-border: var(--neutral-300); }
.btn-default:hover:not(:disabled) { --button-bg: var(--neutral-100); --button-border: var(--neutral-400); }
.btn-blue, .btn-b, .modal-ok { --button-bg: var(--primary-600); --button-fg: #fff; --button-border: var(--primary-600); }
.m-cancel, .modal-cancel { --button-bg: var(--color-surface); --button-fg: var(--neutral-700); --button-border: var(--neutral-300); }
.ui-button--sm, .btn-sm, .btn-mini { min-height: 28px; padding-inline: var(--space-2); font-size: var(--font-size-caption); }
.btn-xs { min-height: 24px; padding-inline: var(--space-2); font-size: .6875rem; }
.btn-md { min-height: 36px; padding-inline: var(--space-3); font-size: var(--font-size-label); }
.ui-button--lg { min-height: 44px; padding-inline: var(--space-4); font-size: var(--font-size-body); }
.ui-button--icon { aspect-ratio: 1; padding: 0; width: 36px; }
.ui-button--disabled-link { background: transparent; border-color: transparent; color: var(--color-text-disabled); min-height: auto; padding: 0; }
.ui-button.is-loading, .ui-button[aria-busy="true"] { cursor: progress; pointer-events: none; }
.ui-button.is-loading::after, .ui-button[aria-busy="true"]::after { animation: ui-spin .65s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; height: 12px; width: 12px; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-input,
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

/* Shared chart card rhythm for ECharts/SVG surfaces. */
.chart-box, .dir-chart-box, .tm-chart, .chart-host { isolation: isolate; }
.chart-box > .chart-host, .dir-chart-box > .chart-host, .tm-chart > .chart-host { height: 100%; width: 100%; }
canvas:focus-visible, .chart-host:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* Accessible text alternative for charts and icon-only controls. */
.chart-sr-only,
.ui-sr-only {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

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

@media (max-width: 640px) {
  .ui-page-hero { padding: var(--space-5) var(--space-4) var(--space-8) !important; }
  .ui-page-hero h1 { font-size: 1.25rem !important; }
  .page-header.ui-page-hero > div:first-child { gap: var(--space-3) !important; }
  .page-header.ui-page-hero > div:first-child p { font-size: .6875rem !important; }
  .ui-auth-hero { margin-inline: -32px; padding-inline: var(--space-6); }
}

@media print {
  .ui-page-hero, .ui-auth-hero { background: #fff !important; box-shadow: none !important; color: var(--color-text) !important; }
  .ui-page-hero h1, .ui-auth-hero .title { color: var(--color-text) !important; text-shadow: none; }
  .ui-page-hero::before, .ui-page-hero::after, .ui-auth-hero::after { display: none; }
}

/* Legacy class bridge. Higher specificity makes the standard win over the
   screen-local CSS that existed before tokens were introduced. */
:root .btn,
:root .btn-primary,
:root .btn-blue,
:root .btn-b,
:root .btn-success,
:root .btn-green,
:root .btn-ok,
:root .btn-g,
:root .btn-danger,
:root .btn-r,
:root .m-danger,
:root .modal-danger,
:root .btn-warning,
:root .btn-info,
:root .btn-default,
:root .btn-ghost,
:root .btn-o,
:root .m-cancel,
:root .modal-cancel,
:root .modal-ok {
  align-items: center !important;
  cursor: pointer;
  display: inline-flex !important;
  font: var(--font-weight-semibold) var(--font-size-label)/1 var(--font-sans) !important;
  gap: var(--space-2) !important;
  justify-content: center;
  min-height: 36px !important;
  padding: 0 var(--space-3) !important;
  background: var(--button-bg) !important;
  border: 1px solid var(--button-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none;
  color: var(--button-fg) !important;
}

:root .btn-xs { min-height: 24px !important; padding-inline: var(--space-2) !important; font-size: .6875rem !important; }
:root .btn-sm { min-height: 28px !important; padding-inline: var(--space-2) !important; font-size: var(--font-size-caption) !important; }
:root .btn-md { min-height: 36px !important; padding-inline: var(--space-3) !important; font-size: var(--font-size-label) !important; }

/* Page-local legacy variables cannot fork the shared scale. */
:root {
  --blue: var(--primary-600) !important;
  --blue-dark: var(--primary-700) !important;
  --blue-light: var(--primary-50) !important;
  --bg: var(--color-canvas) !important;
  --card: var(--color-surface) !important;
  --line: var(--color-border) !important;
  --text: var(--color-text) !important;
  --muted: var(--color-text-muted) !important;
  --green: var(--success-600) !important;
  --green-bg: var(--success-50) !important;
  --red: var(--danger-600) !important;
  --red-bg: var(--danger-50) !important;
  --amber: var(--warning-600) !important;
  --amber-bg: var(--warning-50) !important;
  --radius: var(--radius-md) !important;
  --radius-sm: 6px !important;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06) !important;
  --shadow-md: 0 8px 20px rgba(15, 23, 42, .12) !important;
}

:root .act-btn,
:root .btn-upload,
:root .btn-complete,
:root .btn-log,
:root .btn-delete-file,
:root .btn-mini,
:root .history-rollback-btn {
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--primary-700);
  display: inline-flex;
  font: var(--font-weight-semibold) var(--font-size-caption)/1 var(--font-sans);
  gap: var(--space-1);
  justify-content: center;
  min-height: 28px;
  padding: 0 var(--space-2);
}
:root .act-btn:focus-visible,
:root .btn-upload:focus-visible,
:root .btn-complete:focus-visible,
:root .btn-log:focus-visible,
:root .btn-delete-file:focus-visible,
:root .btn-mini:focus-visible,
:root .history-rollback-btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }