/*
 * Binh Thuan Hospital UI foundation
 * Loaded after layout and page styles so existing markup and business selectors
 * remain intact while shared tokens and component states stay consistent.
 */
:root {
  color-scheme: light;

  --brand-50: #f2fbff;
  --brand-100: #eaf8fe;
  --brand-150: #dbf1fb;
  --brand-200: #c3eafb;
  --brand-300: #82d5f5;
  --brand-400: #35bdeb;
  --brand-500: #00adef;
  --brand-600: #0098d4;
  --brand-700: #0085ba;
  --brand-800: #006d9c;
  --brand-900: #075779;
  --brand-primary: var(--brand-500);
  --brand-primary-hover: var(--brand-600);
  --brand-primary-active: var(--brand-700);
  --brand-deep: var(--brand-800);
  --brand-deeper: var(--brand-900);
  --brand-soft: var(--brand-100);
  --brand-pale: var(--brand-150);

  --surface-primary: #ffffff;
  --surface-secondary: #f7fbfd;
  --surface-tertiary: #eff7fa;
  --surface-inset: #f2f7f9;
  --surface-disabled: #edf3f5;
  --page-background: #f4f8fa;

  --text-primary: #163a4a;
  --text-secondary: #536f7c;
  --text-muted: #5d7581;
  --text-disabled: #586f7a;
  --text-on-dark: #ffffff;

  --border-default: #d8e9f1;
  --border-strong: #bdd9e5;
  --border-emphasis: #8ec9df;

  --success: #18794e;
  --success-deep: #11643f;
  --success-soft: #e9f7f0;
  --warning: #9a5a00;
  --warning-deep: #774400;
  --warning-soft: #fff5d9;
  --danger: #c62828;
  --danger-deep: #a51f24;
  --danger-soft: #fff0f1;
  --info: var(--brand-800);
  --info-soft: var(--brand-100);
  --neutral: #5d7480;
  --neutral-soft: #eef3f5;

  --focus-color: rgba(0, 152, 212, .28);
  --focus-ring: 0 0 0 3px var(--focus-color);
  --shadow-xs: 0 1px 2px rgba(22, 58, 74, .04);
  --shadow-sm: 0 4px 14px rgba(22, 58, 74, .06);
  --shadow-md: 0 12px 30px rgba(22, 58, 74, .09);
  --shadow-lg: 0 22px 48px rgba(22, 58, 74, .12);

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --font-family-sans: "Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  --font-size-caption: .75rem;
  --font-size-helper: .8125rem;
  --font-size-body: .9375rem;
  --font-size-card-title: 1rem;
  --font-size-section-title: 1.25rem;
  --font-size-page-title: clamp(1.45rem, 2vw, 1.9rem);
  --line-height-compact: 1.3;
  --line-height-body: 1.55;

  --motion-fast: 140ms;
  --motion-normal: 190ms;

  --bs-primary: #006d9c;
  --bs-primary-rgb: 0, 109, 156;
  --bs-link-color: #006d9c;
  --bs-link-hover-color: #075779;
  --bs-body-color: #163a4a;
  --bs-body-bg: #f4f8fa;
  --bs-border-color: #d8e9f1;

  /* Stable aliases used by the legacy layouts. */
  --primary: var(--brand-800);
  --primary-dark: var(--brand-900);
  --primary-soft: var(--brand-100);
  --bg: var(--page-background);
  --surface: var(--surface-primary);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-default);
  --accent: var(--brand-500);
  --shadow: var(--shadow-md);
  --radius: var(--radius-lg);
}

html {
  background: var(--page-background);
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  color: var(--text-primary);
  background-color: var(--page-background);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-family-sans);
}

::selection {
  color: var(--text-primary);
  background: var(--brand-200);
}

a {
  color: var(--brand-800);
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}

a:hover { color: var(--brand-900); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
}

.text-primary { color: var(--brand-800); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.bg-primary { background-color: var(--brand-800); }
.border-primary { border-color: var(--brand-700); }

/* Forms */
.form-label,
label:not(.btn):not(.form-check-label) {
  color: var(--text-primary);
}

.form-label {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-helper);
  font-weight: bold;
}

.form-control,
.form-select,
.input-group-text {
  min-height: 42px;
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  font-size: .9rem;
  line-height: 1.4;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.form-control,
.form-select { padding: .55rem .75rem; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--border-emphasis); }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-700);
  box-shadow: var(--focus-ring);
}

.form-control::placeholder,
textarea::placeholder {
  color: #5d7581;
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  border-color: var(--border-default);
  color: var(--text-disabled);
  background: var(--surface-disabled);
  opacity: 1;
}

.form-control[readonly] {
  color: var(--text-secondary);
  background: var(--surface-secondary);
}

textarea.form-control { min-height: 92px; resize: vertical; }

.form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  border-color: var(--border-emphasis);
}

.form-check-input:checked {
  border-color: var(--brand-800);
  background-color: var(--brand-800);
}

.form-text,
.helper-text,
.text-help {
  color: var(--text-secondary);
  font-size: var(--font-size-helper);
  line-height: 1.45;
}

.is-invalid,
.was-validated :invalid { border-color: var(--danger); }
.invalid-feedback { color: var(--danger-deep); }

/* Select2 must behave like the native form controls, including in modals. */
.select2-container { max-width: 100%; min-width: 0; }

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  min-height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--surface-primary);
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  min-height: 40px;
  padding: .55rem 2.25rem .55rem .75rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.select2-container .select2-selection--single .select2-selection__placeholder { color: #5d7581; }

.select2-container .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: .45rem;
  width: 1.75rem;
  height: 40px;
}

.select2-container .select2-selection--multiple { padding: .22rem .35rem; }
.select2-container .select2-selection--multiple .select2-selection__choice {
  margin: .15rem;
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-xs);
  color: var(--brand-900);
  background: var(--brand-100);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--brand-700);
  box-shadow: var(--focus-ring);
}

.select2-dropdown {
  z-index: 1080;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  border-color: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  box-shadow: var(--shadow-lg);
}

.select2-search--dropdown { padding: var(--space-2); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--brand-700);
  outline: 0;
  box-shadow: var(--focus-ring);
}

.select2-results__options { scrollbar-color: var(--border-emphasis) transparent; }
.select2-container--default .select2-results__option {
  min-height: 40px;
  padding: .6rem .75rem;
  color: var(--text-primary);
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: var(--brand-900);
  background: var(--brand-100);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  color: var(--brand-900);
  background: var(--brand-150);
  font-weight: bold;
}

/* Buttons */
.btn {
  min-height: 40px;
  padding: .5rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: bold;
  line-height: 1.35;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:disabled,
.btn.disabled { cursor: not-allowed; opacity: .62; }

.btn-primary {
  border-color: var(--brand-800);
  color: #ffffff;
  background: var(--brand-800);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  border-color: var(--brand-900);
  color: #ffffff;
  background: var(--brand-900);
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  border-color: #064a68;
  color: #ffffff;
  background: #064a68;
}

.btn-secondary {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-secondary);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--border-emphasis);
  color: var(--brand-900);
  background: var(--brand-100);
}

.btn-outline-primary {
  border-color: var(--brand-700);
  color: var(--brand-900);
  background: var(--surface-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  border-color: var(--brand-800);
  color: #ffffff;
  background: var(--brand-800);
}

.btn-light,
.btn-outline-secondary {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-primary);
}
.btn-light:hover,
.btn-outline-secondary:hover {
  border-color: var(--border-emphasis);
  color: var(--brand-900);
  background: var(--brand-100);
}

.btn-success { border-color: var(--success-deep); color: #fff; background: var(--success-deep); }
.btn-success:hover { border-color: #0c5434; color: #fff; background: #0c5434; }
.btn-warning { border-color: #f0bc58; color: #533100; background: #f5c86d; }
.btn-warning:hover { border-color: #dda633; color: #402500; background: #eab54e; }
.btn-danger { border-color: var(--danger-deep); color: #fff; background: var(--danger-deep); }
.btn-danger:hover { border-color: #8d181d; color: #fff; background: #8d181d; }

.btn-sm { min-height: 34px; padding: .38rem .65rem; font-size: .8125rem; }
.btn-lg { min-height: 46px; padding: .65rem 1rem; font-size: .9375rem; }

/* Cards, panels and overlays */
.card,
.panel {
  border-color: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
  box-shadow: var(--shadow-xs);
}

.card-header,
.card-footer {
  border-color: var(--border-default);
  background: var(--surface-secondary);
}

.card-title,
.panel-title { color: var(--text-primary); font-weight: bold; }

.modal-content {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  background: var(--surface-primary);
  box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
  border-color: var(--border-default);
  background: var(--surface-secondary);
}

.modal-title { color: var(--text-primary); font-weight: bold; }
.modal-body { min-width: 0; overflow-x: hidden; }
.modal-dialog-scrollable .modal-body { overscroll-behavior: contain; }

.dropdown-menu {
  max-width: calc(100vw - 24px);
  padding: var(--space-2);
  border-color: var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--surface-primary);
  box-shadow: var(--shadow-md);
}

.dropdown-item {
  min-height: 40px;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.dropdown-item:hover,
.dropdown-item:focus { color: var(--brand-900); background: var(--brand-100); }
.dropdown-item.active,
.dropdown-item:active { color: #ffffff; background: var(--brand-800); }

.toast {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--surface-primary);
  box-shadow: var(--shadow-md);
}

/* Tables */
.table-responsive {
  max-width: 100%;
  border-color: var(--border-default);
  scrollbar-color: var(--border-emphasis) var(--surface-secondary);
}

.table {
  --bs-table-color: var(--text-primary);
  --bs-table-bg: var(--surface-primary);
  --bs-table-border-color: var(--border-default);
  --bs-table-striped-bg: #f9fcfd;
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--brand-50);
  --bs-table-hover-color: var(--text-primary);
  margin-bottom: 0;
  color: var(--text-primary);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

.table > :not(caption) > * > * {
  padding: .62rem .7rem;
  border-color: var(--border-default);
  vertical-align: middle;
}

.table thead th {
  color: #244c5d;
  background: var(--surface-tertiary);
  font-size: .8125rem;
  font-weight: bold;
  line-height: 1.35;
  letter-spacing: .01em;
}

.table tbody th { color: var(--text-primary); font-weight: bold; }
.table caption { color: var(--text-secondary); }

/* Semantic feedback */
.alert {
  border-width: 1px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.alert-info { border-color: var(--brand-200); color: #164d67; background: var(--info-soft); }
.alert-success { border-color: #b9dfca; color: var(--success-deep); background: var(--success-soft); }
.alert-warning { border-color: #efd798; color: var(--warning-deep); background: var(--warning-soft); }
.alert-danger { border-color: #efb8bb; color: var(--danger-deep); background: var(--danger-soft); }

.badge {
  padding: .38em .62em;
  border-radius: 999px;
  font-weight: bold;
  letter-spacing: .01em;
}
.badge.bg-primary,
.text-bg-primary { color: #fff; background-color: var(--brand-800); }
.badge.bg-success,
.text-bg-success { color: #fff; background-color: var(--success-deep); }
.badge.bg-warning,
.text-bg-warning { color: #533100; background-color: #f5c86d; }
.badge.bg-danger,
.text-bg-danger { color: #fff; background-color: var(--danger-deep); }
.badge.bg-info,
.text-bg-info { color: #164d67; background-color: var(--brand-150); }

.nav-tabs { border-color: var(--border-default); }
.nav-tabs .nav-link { color: var(--text-secondary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs .nav-link:hover { border-color: var(--brand-150); color: var(--brand-900); background: var(--brand-50); }
.nav-tabs .nav-link.active { border-color: var(--border-default) var(--border-default) var(--surface-primary); color: var(--brand-900); background: var(--surface-primary); font-weight: bold; }

.pagination .page-link { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-color: var(--border-default); color: var(--brand-900); }
.pagination .page-link:hover { border-color: var(--brand-200); background: var(--brand-100); }
.pagination .page-item.active .page-link { border-color: var(--brand-800); color: #fff; background: var(--brand-800); }

.spinner-border.text-primary { color: var(--brand-800); }

/* Page-family token bridges. These intentionally do not alter information architecture. */
.work-body {
  --work-ink: var(--text-primary);
  --work-muted: var(--text-secondary);
  --work-line: var(--border-default);
  --work-primary: var(--brand-800);
  --work-primary-dark: var(--brand-900);
  --whr-bg: var(--page-background);
  --whr-surface: var(--surface-primary);
  --whr-surface-2: var(--surface-secondary);
  --whr-text: var(--text-primary);
  --whr-muted: var(--text-secondary);
  --whr-line: var(--border-default);
  --whr-primary: var(--brand-800);
  --whr-cyan: var(--brand-600);
  --whr-teal: var(--brand-700);
  --whr-green: var(--success);
  --whr-amber: var(--warning);
  --whr-red: var(--danger);
  --whr-shadow: var(--shadow-sm);
  color: var(--text-primary);
  background: var(--page-background);
}

.admin-body {
  --admin-primary: var(--brand-800);
  --admin-primary-hover: var(--brand-900);
  --admin-primary-soft: var(--brand-100);
  --admin-teal: var(--brand-700);
  --admin-teal-soft: var(--brand-100);
  --admin-bg: var(--page-background);
  --admin-surface: var(--surface-primary);
  --admin-surface-muted: var(--surface-secondary);
  --admin-text: var(--text-primary);
  --admin-muted: var(--text-secondary);
  --admin-line: var(--border-default);
  --admin-line-strong: var(--border-strong);
  --admin-success: var(--success);
  --admin-success-soft: var(--success-soft);
  --admin-warning: var(--warning);
  --admin-warning-soft: var(--warning-soft);
  --admin-danger: var(--danger);
  --admin-danger-soft: var(--danger-soft);
  --admin-info: var(--brand-800);
  --admin-info-soft: var(--brand-100);
  --admin-radius-xs: var(--radius-xs);
  --admin-radius-sm: var(--radius-sm);
  --admin-radius: var(--radius-lg);
  --admin-radius-lg: var(--radius-xl);
  --admin-shadow-sm: var(--shadow-xs);
  --admin-shadow: var(--shadow-md);
  color: var(--text-primary);
  background: var(--page-background);
}

.ttv-page {
  --ttv-blue: var(--brand-800);
  --ttv-blue-dark: var(--brand-900);
  --ttv-blue-soft: var(--brand-100);
  --ttv-line: var(--border-strong);
  --ttv-text: var(--text-primary);
  --ttv-muted: var(--text-secondary);
}

.kham-thu-7-page {
  --thu7-primary: var(--brand-800);
  --thu7-primary-strong: var(--brand-900);
  --thu7-primary-soft: var(--brand-100);
  --thu7-accent: var(--brand-500);
  --thu7-accent-soft: rgba(0, 173, 239, .12);
  --thu7-teal: var(--brand-700);
  --thu7-teal-soft: var(--brand-100);
  --thu7-text: var(--text-primary);
  --thu7-muted: var(--text-secondary);
  --thu7-border: var(--border-default);
  --thu7-surface: var(--surface-primary);
  --thu7-bg: var(--page-background);
}

.dwf-page {
  --dwf-primary: var(--brand-800);
  --dwf-primary-dark: var(--brand-900);
  --dwf-blue: var(--brand-700);
  --dwf-soft: var(--brand-100);
  --dwf-ink: var(--text-primary);
  --dwf-muted: var(--text-secondary);
  --dwf-line: var(--border-default);
  --dwf-surface: var(--surface-primary);
  --dwf-bg: var(--page-background);
}

.whs-page {
  --whs-blue: var(--brand-800);
  --whs-blue-dark: var(--brand-900);
  --whs-blue-soft: var(--brand-100);
  --whs-teal: var(--brand-700);
  --whs-teal-soft: var(--brand-100);
  --whs-text: var(--text-primary);
  --whs-muted: var(--text-secondary);
  --whs-line: var(--border-default);
  --whs-surface: var(--surface-primary);
  --whs-soft: var(--surface-secondary);
}

.kham-chu-nhat-page {
  --accent: var(--brand-800);
  --accent-dark: var(--brand-900);
  --accent-soft: var(--brand-100);
}

.weekend-settings-page {
  --weekend-primary: var(--brand-800);
  --weekend-primary-dark: var(--brand-900);
  --weekend-primary-soft: var(--brand-100);
  --weekend-teal: var(--brand-700);
  --weekend-teal-soft: var(--brand-100);
  --weekend-line: var(--border-default);
  --weekend-muted: var(--text-secondary);
}

/* Layout-level polish: same information architecture, stronger hierarchy. */
.work-header,
.admin-header {
  border-color: var(--border-default);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 3px 14px rgba(22, 58, 74, .055);
}

.work-title span,
.work-navigation-label,
.admin-breadcrumb { color: var(--text-secondary); }

.work-user-trigger.btn,
.admin-user-button,
.admin-quick-link {
  border-color: var(--border-default);
  color: var(--text-primary);
  background: var(--surface-secondary);
}

.work-user-trigger.btn:hover,
.work-user-trigger.btn[aria-expanded="true"],
.admin-user-button:hover,
.admin-user-button[aria-expanded="true"],
.admin-quick-link:hover {
  border-color: var(--border-emphasis);
  color: var(--brand-900);
  background: var(--brand-100);
  box-shadow: var(--focus-ring);
}

.admin-header-title h1 { color: var(--text-primary); font-weight: bold; }
.admin-content { max-width: 1920px; }
.admin-footer { border-color: var(--border-default); color: var(--text-secondary); background: rgba(255, 255, 255, .72); }

.admin-sidebar :where(a, button, input):focus-visible {
  outline-color: #82d5f5;
  outline-offset: 2px;
}

.admin-page-intro,
.whs-hero,
.weekend-settings-hero {
  border-radius: var(--radius-lg);
}

.admin-panel,
.admin-card,
.permission-account-summary,
.permission-daily-scope-card,
.permission-policy-card {
  border-color: var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

/* Daily hospital dashboard: retain its wide operational layout and improve reading rhythm. */
.whr-daily-page .whr-toolbar,
.whr-daily-page .whr-tabs,
.whr-daily-page .whr-date-policy,
.whr-daily-page .whr-dashboard-nav,
.whr-daily-page .whr-card,
.whr-daily-page .whr-kpi {
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.whr-daily-page .whr-toolbar,
.whr-daily-page .whr-tabs,
.whr-daily-page .whr-date-policy { border-radius: var(--radius-md); }

.whr-daily-page .whr-tab.is-active,
.whr-daily-page .whr-dashboard-link.is-active {
  color: var(--brand-900);
  background: var(--brand-100);
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.whr-daily-page .whr-data-table thead th {
  border-color: var(--border-default);
  color: #244c5d;
  background: var(--surface-tertiary);
}

.whr-daily-page .whr-data-table tbody tr:hover > * { background-color: var(--brand-50); }
.whr-daily-page .whr-warning-list { border-color: #efd798; color: var(--warning-deep); background: var(--warning-soft); }

/* Workforce report is intentionally dense, but no operational label should disappear. */
.dwf-page { color: var(--text-primary); }
.dwf-toolbar,
.dwf-board,
.dwf-entry-panel,
.dwf-summary-card {
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.dwf-kicker,
.dwf-eyebrow,
.dwf-date-control > span,
.dwf-entry-picker > span,
.dwf-entry-selected > div > span,
.dwf-summary-card > span,
.dwf-source-note,
.dwf-editor__header p,
.dwf-save-meta { font-size: .75rem; }

.dwf-entry-picker small,
.dwf-entry-selected small,
.dwf-entry-open small,
.dwf-entry-hint,
.dwf-editor-totals span,
.dwf-editor-totals small,
.dwf-editor-guide > div span,
.dwf-employee-search-help,
.dwf-quick-entry > div span,
.dwf-person-editor label > span,
.dwf-employee-option small { font-size: .7rem; }

.dwf-table { color: var(--text-primary); font-size: .75rem; }
.dwf-table tbody .dwf-col-unit small,
.dwf-number-cell small,
.dwf-person-cell small { font-size: .7rem; }
.dwf-full-staff-tag,
.dwf-full-staff-tag.is-compact,
.dwf-late-tag,
.dwf-late-tag.is-compact,
.dwf-row-status { font-size: .7rem; }
.dwf-edit-button { min-height: 34px; font-size: .75rem; }

.dwf-editor__header,
.dwf-editor__footer { border-color: var(--border-default); background: var(--surface-secondary); }
.dwf-editor .modal-body { background: var(--surface-secondary); }
.dwf-category,
.dwf-person-editor,
.dwf-editor-totals > div { border-color: var(--border-default); background: var(--surface-primary); }

/* Scheduling and weekend workspaces keep their spreadsheet-like structure. */
.ttv-page .ttv-panel,
.ttv-page .ttv-toolbar-card,
.ttv-page .ttv-editor-card,
.ttv-page .ttv-sheet-card,
.kham-thu-7-page .panel,
.kham-thu-7-page .workspace-shell {
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.ttv-page .duty-table :is(th, td),
.ttv-page .sheet-form-table :is(th, td) { border-color: var(--border-default); }
.ttv-page .duty-table thead th,
.ttv-page .sheet-form-table thead th { color: var(--text-primary); background: var(--brand-150); }

.kham-thu-7-page .hero { box-shadow: 0 12px 28px rgba(7, 87, 121, .14); }
.kham-thu-7-page .panel,
.kham-thu-7-page .workspace-shell,
.kham-thu-7-page .form-section,
.kham-thu-7-page .metric { border-radius: var(--radius-md); }

/* Permission UI: increase scanability without changing its grouping or save model. */
.permission-count-badge,
.permission-user-note,
.permission-account-identity em,
.permission-save-state,
.permission-role-link,
.permission-section-heading small,
.permission-scope-heading small { color: var(--text-secondary); }

.permission-user-item-head > strong,
.permission-account-identity strong,
.permission-section-heading strong,
.permission-scope-heading strong { color: var(--text-primary); }

.permission-user-item:hover,
.permission-user-item.active,
.permission-daily-scope-card:hover { border-color: var(--border-emphasis); background: var(--brand-50); }

.permission-tab.active,
.permission-role-link.active { color: var(--brand-900); background: var(--brand-100); }

.permission-page :where(.admin-icon-btn, .permission-action-toggle) { min-width: 40px; min-height: 40px; }

/* Bare/account pages use the same clinical-neutral surface. */
.bare-body { color: var(--text-primary); background: linear-gradient(135deg, var(--page-background), var(--brand-50)); }
.account-card { border-color: var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

@media (max-width: 767.98px) {
  html { scroll-padding-top: 74px; }
  body { font-size: .9rem; }

  .btn { min-height: 42px; }
  .form-control,
  .form-select,
  .select2-container .select2-selection--single,
  .select2-container .select2-selection--multiple { min-height: 44px; }

  .select2-container .select2-selection--single .select2-selection__rendered {
    min-height: 42px;
    padding-top: .62rem;
  }

  .modal-dialog { margin: .65rem; }
  .modal-content { max-height: calc(100dvh - 1.3rem); }
  .modal-header,
  .modal-footer { padding: .85rem 1rem; }
  .modal-body { padding: 1rem; }

  .table > :not(caption) > * > * { padding: .58rem .62rem; }
}

@media (max-width: 389.98px) {
  .modal-dialog { margin: .4rem; }
  .modal-content { max-height: calc(100dvh - .8rem); border-radius: var(--radius-md); }
  .dropdown-menu,
  .select2-dropdown { max-width: calc(100vw - 16px); }
}

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