/**
 * HR Material UI v4
 * Solid, accessible surfaces for both themes. This file deliberately loads
 * after the legacy visual layers so existing modules keep their layout while
 * the product shares one clean visual language.
 */

:root,
html[data-theme="light"],
body[data-ui-generation="4"][data-theme="light"] {
  color-scheme: light;
  --bg-base: #f4f7fb;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f7f9fc;
  --bg-soft: #eef3f9;
  --bg-hover: #edf2f8;
  --bg-active: #e6ebff;
  --text-primary: #172033;
  --text-secondary: #4d5d75;
  --text-muted: #738198;
  --border: #dce3ed;
  --border-light: #cbd5e2;
  --success: #078760;
  --success-subtle: #e6f6f0;
  --warning: #b96708;
  --warning-subtle: #fff4dd;
  --danger: #d43752;
  --danger-subtle: #ffedf0;
  --info: #1769d2;
  --info-subtle: #eaf3ff;
  --purple: #7148d7;
  --purple-subtle: #f0ebff;
  --cyan: #087f8c;
  --cyan-subtle: #e5f7f8;
  --orange: #c85312;
  --orange-subtle: #fff0e6;
  --pink: #bd3678;
  --pink-subtle: #fdebf4;
  --md-surface-1: #ffffff;
  --md-surface-2: #f7f9fc;
  --md-surface-3: #eef3f9;
  --md-on-surface: #172033;
  --md-on-muted: #5f6f87;
  --md-outline: #d8e0eb;
  --md-shadow-1: 0 1px 2px rgba(25, 39, 65, .08), 0 3px 10px rgba(25, 39, 65, .05);
  --md-shadow-2: 0 2px 5px rgba(25, 39, 65, .08), 0 10px 25px rgba(25, 39, 65, .07);
  --md-shadow-3: 0 8px 22px rgba(25, 39, 65, .10), 0 24px 55px rgba(25, 39, 65, .09);
  --surface-shadow: var(--md-shadow-1);
  --surface-shadow-lg: var(--md-shadow-3);
  --ui-inner-light: none;
  --ui-card-gradient: none;
}

html[data-theme="dark"],
body[data-ui-generation="4"][data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0e1420;
  --bg-surface: #151d2b;
  --bg-card: #192333;
  --bg-elevated: #202c3e;
  --bg-soft: #182231;
  --bg-hover: #253247;
  --bg-active: #293555;
  --text-primary: #f5f7fb;
  --text-secondary: #c4cedd;
  --text-muted: #91a0b5;
  --border: #303e52;
  --border-light: #43536a;
  --success: #39c895;
  --success-subtle: #173d34;
  --warning: #f3b64f;
  --warning-subtle: #42341d;
  --danger: #ff6b81;
  --danger-subtle: #462431;
  --info: #6eaeff;
  --info-subtle: #1e3552;
  --purple: #b297ff;
  --purple-subtle: #322b50;
  --cyan: #52d5df;
  --cyan-subtle: #193c42;
  --orange: #ff9a58;
  --orange-subtle: #472f20;
  --pink: #f58bbc;
  --pink-subtle: #46283a;
  --md-surface-1: #192333;
  --md-surface-2: #202c3e;
  --md-surface-3: #273448;
  --md-on-surface: #f5f7fb;
  --md-on-muted: #a8b5c7;
  --md-outline: #34445a;
  --md-shadow-1: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .18);
  --md-shadow-2: 0 3px 8px rgba(0, 0, 0, .28), 0 14px 30px rgba(0, 0, 0, .18);
  --md-shadow-3: 0 10px 28px rgba(0, 0, 0, .35), 0 28px 65px rgba(0, 0, 0, .22);
  --surface-shadow: var(--md-shadow-1);
  --surface-shadow-lg: var(--md-shadow-3);
  --ui-inner-light: none;
  --ui-card-gradient: none;
}

/* Keep module personality through one controlled accent, not tinted glass. */
body[data-ui-module="dashboard"] { --ui-module-accent: #6257d9; --ui-module-accent-2: #1686c8; }
body[data-ui-module="employees"] { --ui-module-accent: #2563c7; --ui-module-accent-2: #0c91a3; }
body[data-ui-module="branches"] { --ui-module-accent: #087f8c; --ui-module-accent-2: #078760; }
body[data-ui-module="attendance"],
body[data-ui-module="attendance_exemptions"],
body[data-ui-module="shifts"] { --ui-module-accent: #c45b13; --ui-module-accent-2: #b98205; }
body[data-ui-module="payroll"],
body[data-ui-module="adjustments"] { --ui-module-accent: #078760; --ui-module-accent-2: #087f8c; }
body[data-ui-module="violations"] { --ui-module-accent: #d43752; --ui-module-accent-2: #c45b13; }
body[data-ui-module="kpi"],
body[data-ui-module="evaluations"] { --ui-module-accent: #7148d7; --ui-module-accent-2: #bd3678; }
body[data-ui-module="reports"],
body[data-ui-module="import_export"] { --ui-module-accent: #405bd8; --ui-module-accent-2: #087f8c; }
body[data-ui-module="documents"],
body[data-ui-module="signing"],
body[data-ui-module="contracts"],
body[data-ui-module="licenses"],
body[data-ui-module="rent_contracts"] { --ui-module-accent: #7148d7; --ui-module-accent-2: #b96708; }

body[data-ui-generation="4"] {
  min-width: 0;
  overflow-x: hidden;
  background: var(--bg-base) !important;
  background-image: none !important;
  color: var(--text-primary);
}

body[data-ui-generation="4"]::before,
body[data-ui-generation="4"]::after { display: none !important; }

body[data-ui-generation="4"] *,
body[data-ui-generation="4"] *::before,
body[data-ui-generation="4"] *::after { box-sizing: border-box; }

body[data-ui-generation="4"] :is(.sidebar, .topbar, .sidebar-logo, .sidebar-footer, .page-header,
  .card, .section-card, .profile-card, .glass-pane, .prem-stat, .prem-filter,
  .table-wrapper, .table-responsive, .filter-bar, .filter-panel, [class*="-filter-panel"],
  .dropdown-menu, .toast, .modal, .p-card, .portal-tabs-nav) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Shell */
body[data-ui-generation="4"] .sidebar {
  background: var(--bg-surface) !important;
  background-image: none !important;
  border-inline-end: 1px solid var(--border) !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .sidebar::before,
body[data-ui-generation="4"] .sidebar::after { display: none !important; }

body[data-ui-generation="4"] .sidebar-logo {
  min-height: 70px;
  margin: 8px 10px 5px;
  padding: 11px 12px;
  border: 0 !important;
  border-radius: 14px;
  background: var(--bg-elevated) !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .sidebar-logo::after { display: none !important; }
body[data-ui-generation="4"] .sidebar-logo-icon,
body[data-ui-generation="4"] .sidebar-logo img {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--ui-module-accent) !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .sidebar-logo-sub {
  background: transparent !important;
  color: var(--text-muted) !important;
  padding: 0 !important;
}

body[data-ui-generation="4"] .nav-group-toggle,
body[data-ui-generation="4"] .nav-item {
  border-radius: 10px !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .nav-group-toggle:hover,
body[data-ui-generation="4"] .nav-group-colored.open > .nav-group-toggle,
body[data-ui-generation="4"] .nav-group-colored .nav-item:hover {
  border-color: transparent !important;
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  transform: none !important;
}

body[data-ui-generation="4"] .nav-group-colored .nav-group-icon {
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(var(--grp-rgb), .13) !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .nav-group-colored .nav-item.active {
  border-color: transparent !important;
  background: rgba(var(--grp-rgb), .14) !important;
  color: var(--grp-hex) !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .nav-group-colored .nav-item.active::before {
  width: 3px;
  background: var(--grp-hex);
  box-shadow: none;
}

body[data-ui-generation="4"] .sidebar-footer {
  margin: 7px 10px 10px;
  padding: 9px;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  background: var(--bg-card) !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .user-avatar {
  border: 0;
  background: var(--ui-module-accent) !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .topbar {
  height: 68px;
  min-height: 68px;
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(20, 32, 51, .03) !important;
}
body[data-ui-generation="4"] .topbar::after { display: none !important; }

body[data-ui-generation="4"] :is(.topbar-toggle, .topbar-btn, .lang-toggle) {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"] :is(.topbar-toggle, .topbar-btn, .lang-toggle):hover {
  border-color: color-mix(in srgb, var(--ui-module-accent) 45%, var(--border)) !important;
  background: var(--bg-hover) !important;
  color: var(--ui-module-accent) !important;
  transform: none !important;
}

body[data-ui-generation="4"] .topbar-search input {
  height: 42px;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-elevated) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"] .topbar-search input:focus {
  border-color: var(--ui-module-accent) !important;
  background: var(--bg-card) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-module-accent) 15%, transparent) !important;
}

/* Page canvas and headings */
body[data-ui-generation="4"] .page-content {
  width: min(100%, 1720px);
  padding: clamp(18px, 2.2vw, 32px);
}

body[data-ui-generation="4"] .page-content > .page-header {
  position: relative;
  min-height: 98px;
  margin-bottom: 22px !important;
  padding: 20px 22px !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: var(--bg-card) !important;
  box-shadow: var(--md-shadow-1) !important;
  overflow: hidden;
}
body[data-ui-generation="4"] .page-content > .page-header::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ui-module-accent) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"] .page-content > .page-header::after { display: none !important; }

body[data-ui-generation="4"] :is(.page-title, .page-header h1, .page-header h2) {
  color: var(--text-primary);
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
}

body[data-ui-generation="4"] .page-title:not(:has(.ui-title-icon, svg))::before,
body[data-ui-generation="4"] .page-header h1:not(:has(.ui-title-icon, svg))::before,
body[data-ui-generation="4"] .page-header h2:not(:has(.ui-title-icon, svg))::before,
body[data-ui-generation="4"] .ui-title-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0 !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--ui-module-accent) 13%, var(--bg-card)) !important;
  color: var(--ui-module-accent) !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] :is(.page-subtitle, .page-header p) { color: var(--text-secondary); }

/* Material surfaces */
body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .glass-pane, .prem-stat,
 .prem-filter, .filter-bar, .filter-panel, [class*="-filter-panel"], .table-wrapper, .table-responsive) {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: var(--bg-card) !important;
  background-image: none !important;
  box-shadow: var(--md-shadow-1) !important;
}

body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .prem-stat):hover {
  box-shadow: var(--md-shadow-2) !important;
}

body[data-ui-generation="4"] :is(.card-header, .glass-pane-header) {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
}
body[data-ui-generation="4"] .card-header::after { display: none !important; }
body[data-ui-generation="4"] :is(.card-footer, .modal-footer) {
  border-top: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
}

body[data-ui-generation="4"] .prem-stat {
  position: relative;
  min-height: 104px;
  overflow: hidden;
}
body[data-ui-generation="4"] .prem-stat::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: var(--ui-module-accent);
}
body[data-ui-generation="4"] .prem-stat-icon {
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Controls */
body[data-ui-generation="4"] :where(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]), select, textarea, .ts-control) {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"] :where(.form-control, .form-select, input, select, textarea, .ts-control):focus,
body[data-ui-generation="4"] .ts-wrapper.focus .ts-control {
  border-color: var(--ui-module-accent) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-module-accent) 15%, transparent) !important;
}
body[data-ui-generation="4"] ::placeholder { color: var(--text-muted); opacity: .9; }

body[data-ui-generation="4"] .btn {
  min-height: 40px;
  border-radius: 10px !important;
  font-weight: 750;
  box-shadow: none !important;
  transform: none !important;
}
body[data-ui-generation="4"] .btn-primary {
  border-color: var(--ui-module-accent) !important;
  background: var(--ui-module-accent) !important;
  color: #fff !important;
}
body[data-ui-generation="4"] .btn-primary:hover { filter: brightness(.93); }
body[data-ui-generation="4"] :is(.btn-outline, .btn-ghost) {
  border-color: var(--border) !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}
body[data-ui-generation="4"] :is(.btn-outline, .btn-ghost):hover {
  border-color: color-mix(in srgb, var(--ui-module-accent) 45%, var(--border)) !important;
  background: var(--bg-hover) !important;
  color: var(--ui-module-accent) !important;
}
body[data-ui-generation="4"] .btn-danger { background: var(--danger) !important; color: #fff !important; }
body[data-ui-generation="4"] .btn-success { background: var(--success) !important; color: #fff !important; }

body[data-ui-generation="4"] :is(.badge, [class*="status-badge"], [class*="-badge"]) {
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Data */
body[data-ui-generation="4"] :is(.table-wrapper, .table-responsive) { overflow-x: auto; }
body[data-ui-generation="4"] table { color: var(--text-primary); }
body[data-ui-generation="4"] :is(.table, table.table) thead th {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
}
body[data-ui-generation="4"] :is(.table, table.table) tbody td {
  border-bottom-color: var(--border) !important;
  background: var(--bg-card);
}
body[data-ui-generation="4"] :is(.table, table.table) tbody tr:hover td { background: var(--bg-hover) !important; }

body[data-ui-generation="4"] .progress {
  border: 0 !important;
  background: var(--bg-soft) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"] .progress-bar { background: var(--ui-module-accent) !important; box-shadow: none !important; }

body[data-ui-generation="4"] :is(.tab-btn, .page-link) {
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"] :is(.tab-btn.active, .page-link.active) {
  border-color: var(--ui-module-accent) !important;
  background: var(--ui-module-accent) !important;
  color: #fff !important;
}

/* Overlays */
body[data-ui-generation="4"] :is(.dropdown-menu, .toast, .ts-dropdown) {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-card) !important;
  box-shadow: var(--md-shadow-2) !important;
}

/* Date picker ships with a dark-only vendor theme; normalize it here. */
body[data-ui-generation="4"] .flatpickr-calendar {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--md-shadow-2) !important;
}
body[data-ui-generation="4"] :is(.flatpickr-months, .flatpickr-weekdays, span.flatpickr-weekday) {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  fill: var(--text-secondary) !important;
}
body[data-ui-generation="4"] :is(.flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-day) {
  color: var(--text-primary) !important;
}
body[data-ui-generation="4"] .flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
body[data-ui-generation="4"] .flatpickr-current-month .flatpickr-monthDropdown-months {
  width: auto !important;
  flex: 0 1 auto !important;
}
body[data-ui-generation="4"] .flatpickr-current-month .numInputWrapper {
  display: inline-block !important;
  width: 7ch !important;
  min-width: 68px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body[data-ui-generation="4"] .flatpickr-current-month input.cur-year {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body[data-ui-generation="4"] .flatpickr-day:hover { border-color: var(--border) !important; background: var(--bg-hover) !important; }
body[data-ui-generation="4"] .flatpickr-day.selected {
  border-color: var(--ui-module-accent) !important;
  background: var(--ui-module-accent) !important;
  color: #fff !important;
}
body[data-ui-generation="4"] .flatpickr-day.flatpickr-disabled,
body[data-ui-generation="4"] .flatpickr-day.prevMonthDay,
body[data-ui-generation="4"] .flatpickr-day.nextMonthDay { color: var(--text-muted) !important; opacity: .65; }
body[data-ui-generation="4"] :is(.modal-overlay, [id$="Modal"][style*="position:fixed"], [id$="Modal"][style*="position: fixed"]) {
  background: rgba(8, 14, 24, .62) !important;
  backdrop-filter: none !important;
}
body[data-ui-generation="4"] :is(.modal, .modal-overlay > div, [id$="Modal"] > div) {
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: var(--bg-card) !important;
  box-shadow: var(--md-shadow-3) !important;
}
body[data-ui-generation="4"] :is(.modal, .modal-overlay > div, [id$="Modal"] > div)::before { display: none !important; }
body[data-ui-generation="4"] :is(.modal-header, .modal-footer) { background: var(--bg-elevated) !important; }

body[data-ui-generation="4"] :is(.empty-state, .table-empty, .kpi-empty) {
  border: 1px dashed var(--border-light) !important;
  border-radius: 14px !important;
  background: var(--bg-elevated) !important;
  background-image: none !important;
}

/* Dashboard: reduce decorative noise and preserve useful hierarchy. */
body[data-ui-generation="4"][data-ui-module="dashboard"] :is(.welcome-banner, .db-hero, .glass-pane, .kpi-card, .notes-section, .notes-header) {
  background: var(--bg-card) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow: var(--md-shadow-1) !important;
  backdrop-filter: none !important;
}
body[data-ui-generation="4"][data-ui-module="dashboard"] :is(.welcome-banner, .db-hero, .notes-section) {
  border-radius: 16px !important;
}
body[data-ui-generation="4"][data-ui-module="dashboard"] .db-hero-glow { display: none !important; }
body[data-ui-generation="4"][data-ui-module="dashboard"] .hero-username {
  background: none !important;
  -webkit-text-fill-color: var(--ui-module-accent) !important;
  color: var(--ui-module-accent) !important;
}
body[data-ui-generation="4"][data-ui-module="dashboard"] .db-hero-avatar {
  background: var(--ui-module-accent) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"][data-ui-module="dashboard"] .kpi-card::after {
  inset: auto 0 0 !important;
  height: 4px;
  background: var(--kpi-c) !important;
  opacity: 1 !important;
}
body[data-ui-generation="4"][data-ui-module="dashboard"] .kpi-icon { box-shadow: none !important; }
body[data-ui-generation="4"][data-ui-module="dashboard"] .kpi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--md-shadow-2) !important;
}
body[data-ui-generation="4"][data-ui-module="dashboard"] .snote-btn { backdrop-filter: none !important; }

/* Letters: authoring canvas stays white; surrounding controls use the theme. */
body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .gen-grid {
  grid-template-columns: minmax(0, 720px) minmax(300px, 1fr) !important;
  gap: 22px !important;
}
body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] :is(.wysiwyg-wrap, .tpl-card, .upload-zone) {
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--md-shadow-1) !important;
}
body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .wysiwyg-toolbar {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
}
body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .wysiwyg-toolbar button {
  border: 1px solid transparent !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .wysiwyg-toolbar button:hover {
  border-color: var(--border) !important;
  background: var(--bg-hover) !important;
  color: var(--ui-module-accent) !important;
}
body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] :is(.wysiwyg-editor, .a4-preview, .mini-a4, #designCanvas) {
  background-color: #fff !important;
  color: #111827 !important;
}

/* Signing list and asset management */
body[data-ui-generation="4"][data-ui-module="signing"] .prem-stats { gap: 14px; }
body[data-ui-generation="4"][data-ui-module="signing"] .prem-filter form { align-items: end; }
body[data-ui-generation="4"][data-ui-module="signing"] .file-drop-area {
  border-color: var(--border-light) !important;
  background: var(--bg-elevated) !important;
}

/* Signing workspace is an application canvas with a solid tool shell. */
body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] {
  overflow: hidden;
  background: var(--bg-base) !important;
}
body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] :is(.work-header, .assets-panel, .pro-toolbar, .text-float-toolbar, #aiSmartPanel) {
  background: var(--bg-surface) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .work-body { background: #cfd6e0 !important; }
html[data-theme="dark"] body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .work-body { background: #0c111b !important; }
body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] :is(.draggable-asset, .add-tool-box, .ai-data-card, .draw-activate-btn) {
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .pdf-page-container {
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 18px 45px rgba(0, 0, 0, .18) !important;
}

/* Login and employee portal: colorful focal panel, solid form surface. */
body[data-ui-generation="4"][data-ui-module="login"] .login-wrapper,
body[data-ui-generation="4"][data-ui-module="portal-login"] .login-page { background: var(--bg-base) !important; }
body[data-ui-generation="4"][data-ui-module="login"] .login-form-side,
body[data-ui-generation="4"][data-ui-module="login"] .login-card,
body[data-ui-generation="4"][data-ui-module="portal-login"] .login-card {
  background: var(--bg-card) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow: var(--md-shadow-2) !important;
  backdrop-filter: none !important;
}
body[data-ui-generation="4"][data-ui-module="portal"] .p-card {
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  background-image: none !important;
  box-shadow: var(--md-shadow-1) !important;
}
body[data-ui-generation="4"][data-ui-module="portal"] .p-card::before { display: none !important; }

/* Responsive layout */
@media (max-width: 1100px) {
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .gen-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  body[data-ui-generation="4"] .sidebar {
    width: min(88vw, 310px) !important;
    max-width: 310px !important;
    background: var(--bg-surface) !important;
    box-shadow: var(--md-shadow-3) !important;
  }
  body[data-ui-generation="4"] .sidebar.mobile-open { box-shadow: 0 0 0 100vmax rgba(8, 14, 24, .58), var(--md-shadow-3) !important; }
  body[data-ui-generation="4"] .topbar { height: 62px; min-height: 62px; padding-inline: 10px; }
  body[data-ui-generation="4"] .mobile-topbar-title { max-width: 30vw; color: var(--text-primary); }
  body[data-ui-generation="4"] .page-content { width: 100%; padding: 12px 10px max(68px, env(safe-area-inset-bottom)); }
  body[data-ui-generation="4"] .breadcrumb { margin-bottom: 10px; overflow-x: auto; white-space: nowrap; }
  body[data-ui-generation="4"] .page-content > .page-header {
    min-height: 0;
    padding: 15px !important;
    border-radius: 13px !important;
    align-items: stretch !important;
  }
  body[data-ui-generation="4"] :is(.page-title, .page-header h1, .page-header h2) { font-size: 19px; }
  body[data-ui-generation="4"] .page-actions,
  body[data-ui-generation="4"] .page-header > div:last-child:not(:first-child) {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
  }
  body[data-ui-generation="4"] .page-actions .btn,
  body[data-ui-generation="4"] .page-header > div:last-child:not(:first-child) .btn { width: 100%; min-width: 0; }
  body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .glass-pane, .prem-stat,
    .prem-filter, .filter-bar, .filter-panel, [class*="-filter-panel"], .table-wrapper, .table-responsive) {
    border-radius: 12px !important;
  }
  body[data-ui-generation="4"] :is(.card-body, .glass-pane-body) { padding: 14px !important; }
  body[data-ui-generation="4"] :is(.form-row.cols-2, .form-row.cols-3, .form-grid, .settings-grid) {
    grid-template-columns: 1fr !important;
  }
  body[data-ui-generation="4"] .btn { min-height: 43px; }
  body[data-ui-generation="4"] :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 46px; }
  body[data-ui-generation="4"] :is(.modal-overlay, [id$="Modal"]) { align-items: flex-end !important; }
  body[data-ui-generation="4"] :is(.modal, .modal-overlay > div, [id$="Modal"] > div) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, 860px) !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  /* Dashboard cards become compact and readable, never squeezed columns. */
  body[data-ui-generation="4"][data-ui-module="dashboard"] :is(.kpi-grid, .dash-grid, .quick-grid, .notes-grid) {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .db-charts-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .db-grid,
  body[data-ui-generation="4"][data-ui-module="dashboard"] .db-kpis,
  body[data-ui-generation="4"][data-ui-module="dashboard"] .db-main { gap: 11px !important; }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .db-hero { padding: 18px !important; margin-bottom: 15px !important; }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-section { padding: 14px !important; }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-header { padding: 13px !important; }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-search { width: 100% !important; }

  /* Letters: all fixed design widths live inside horizontal work areas. */
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .gen-grid { gap: 14px !important; }
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .wysiwyg-wrap {
    height: auto !important;
    min-height: 460px !important;
    max-height: none !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .wysiwyg-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .wysiwyg-toolbar > * { flex: 0 0 auto; }
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] .wysiwyg-editor {
    min-height: 380px;
    padding: 24px 20px !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] :is(#designCanvas, .a4-preview, .mini-a4) {
    transform-origin: top center;
  }
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] :is(.card, .tab-content):has(#designCanvas) {
    overflow-x: auto !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] [style*="grid-template-columns:1fr 280px"],
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] [style*="grid-template-columns:1fr 320px"],
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  body[data-ui-generation="4"][data-ui-module="employees"][data-ui-page="letters"] [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Signing list turns each row into a labelled card. */
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] .prem-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] .prem-filter form {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] .prem-filter .fg { max-width: none !important; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] .table-wrapper { overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] table,
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] tbody { display: block; width: 100%; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] thead { display: none; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: var(--md-shadow-1);
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] td {
    display: block;
    min-width: 0;
    padding: 11px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] td:first-child,
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] td:last-child { grid-column: 1 / -1; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] td:last-child { border-bottom: 0 !important; }

  /* Signing workspace: tools scroll horizontally, document stays usable. */
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] { overflow: auto !important; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] :is(.app-wrapper, .main-content) {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .work-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px;
    padding: 10px !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .pro-toolbar {
    width: 100%;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 6px !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .pro-toolbar > * { flex: 0 0 auto; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .work-body { display: block !important; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .assets-panel {
    width: 100% !important;
    border-inline-end: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .assets-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] .pdf-viewer-wrap {
    display: block !important;
    width: 100%;
    min-height: 60vh;
    padding: 10px !important;
    overflow-x: auto !important;
  }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="sign"] #aiSmartPanel {
    width: min(92vw, 360px) !important;
  }
}

@media (max-width: 480px) {
  body[data-ui-generation="4"] .page-actions,
  body[data-ui-generation="4"] .page-header > div:last-child:not(:first-child) { grid-template-columns: 1fr; }
  body[data-ui-generation="4"] .topbar-actions { gap: 3px; }
  body[data-ui-generation="4"] .mobile-topbar-title { display: none; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] tr { grid-template-columns: 1fr; }
  body[data-ui-generation="4"][data-ui-module="signing"][data-ui-page="index"] td { grid-column: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-generation="4"] *,
  body[data-ui-generation="4"] *::before,
  body[data-ui-generation="4"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body[data-ui-generation="4"] { background: #fff !important; }
  body[data-ui-generation="4"] :is(.page-header, .card, .table-wrapper, .table-responsive) {
    border-color: #d6dce5 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* ========================================================================== */
/* Material Expressive layer                                                  */
/* Rich colour and elevation without translucent/glass surfaces.              */
/* ========================================================================== */
@media screen {
  body[data-ui-generation="4"] {
    --ui-card-accent: var(--ui-module-accent);
    --ui-accent-soft: color-mix(in srgb, var(--ui-module-accent) 13%, var(--bg-card));
    --ui-accent-soft-2: color-mix(in srgb, var(--ui-module-accent-2) 10%, var(--bg-card));
    --ui-accent-border: color-mix(in srgb, var(--ui-module-accent) 35%, var(--border));
    background:
      radial-gradient(circle at 8% 7%, color-mix(in srgb, var(--ui-module-accent) 11%, transparent) 0, transparent 26%),
      radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--ui-module-accent) 7%, transparent) 0, transparent 28%),
      var(--bg-base) !important;
    background-attachment: fixed !important;
  }

  html[data-theme="dark"] body[data-ui-generation="4"] {
    --md-shadow-1: 0 2px 3px rgba(0, 0, 0, .24), 0 8px 22px rgba(0, 0, 0, .16);
    --md-shadow-2: 0 5px 12px rgba(0, 0, 0, .28), 0 18px 38px rgba(0, 0, 0, .2);
    --md-shadow-3: 0 12px 30px rgba(0, 0, 0, .36), 0 32px 70px rgba(0, 0, 0, .24);
  }

  /* Product shell: solid layers with coloured identity rails. */
  body[data-ui-generation="4"] .sidebar {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--ui-module-accent) 8%, var(--bg-surface)), var(--bg-surface) 28%) !important;
    border-inline-end-color: color-mix(in srgb, var(--ui-module-accent) 20%, var(--border)) !important;
    box-shadow: 0 0 34px rgba(18, 31, 52, .09) !important;
  }

  body[data-ui-generation="4"] .sidebar::before {
    content: "";
    display: block !important;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--ui-module-accent);
    pointer-events: none;
  }

  body[data-ui-generation="4"] .sidebar-logo {
    border: 1px solid var(--ui-accent-border) !important;
    background: linear-gradient(135deg, var(--ui-accent-soft), var(--bg-elevated)) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-module-accent) 10%, transparent) !important;
  }

  body[data-ui-generation="4"] .sidebar-logo-icon,
  body[data-ui-generation="4"] .sidebar-logo img,
  body[data-ui-generation="4"] .user-avatar {
    background: var(--ui-module-accent) !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--ui-module-accent) 28%, transparent) !important;
  }

  body[data-ui-generation="4"] .nav-group-toggle {
    border: 1px solid transparent !important;
  }

  body[data-ui-generation="4"] .nav-group-toggle:hover,
  body[data-ui-generation="4"] .nav-group-colored.open > .nav-group-toggle {
    border-color: rgba(var(--grp-rgb), .22) !important;
    background: linear-gradient(90deg, rgba(var(--grp-rgb), .13), rgba(var(--grp-rgb), .04)) !important;
  }

  body[data-ui-generation="4"] .nav-group-colored .nav-group-icon {
    background: rgba(var(--grp-rgb), .17) !important;
    color: var(--grp-hex) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--grp-rgb), .16) !important;
  }

  body[data-ui-generation="4"] .nav-group-colored .nav-item.active {
    background: linear-gradient(90deg, rgba(var(--grp-rgb), .2), rgba(var(--grp-rgb), .07)) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--grp-rgb), .17) !important;
  }

  body[data-ui-generation="4"] .topbar {
    background: linear-gradient(90deg, var(--bg-surface), var(--ui-accent-soft)) !important;
    border-bottom-color: var(--ui-accent-border) !important;
    box-shadow: 0 5px 18px rgba(18, 31, 52, .08) !important;
  }

  body[data-ui-generation="4"] .topbar::after {
    content: "";
    display: block !important;
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 3px;
    background: var(--ui-module-accent);
    opacity: .9;
    pointer-events: none;
  }

  body[data-ui-generation="4"] :is(.topbar-toggle, .topbar-btn, .lang-toggle) {
    border-color: var(--ui-accent-border) !important;
    background: var(--ui-accent-soft) !important;
    color: var(--ui-module-accent) !important;
    box-shadow: 0 3px 9px color-mix(in srgb, var(--ui-module-accent) 10%, transparent) !important;
  }

  body[data-ui-generation="4"] :is(.topbar-toggle, .topbar-btn, .lang-toggle):hover {
    background: var(--ui-module-accent) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--ui-module-accent) 27%, transparent) !important;
  }

  body[data-ui-generation="4"] .topbar-search input {
    border-color: var(--ui-accent-border) !important;
    background: var(--bg-card) !important;
    box-shadow: 0 3px 10px rgba(18, 31, 52, .06) !important;
  }

  /* Page identity: every module receives its own expressive banner. */
  body[data-ui-generation="4"] .page-content > .page-header {
    border-color: var(--ui-accent-border) !important;
    background:
      linear-gradient(120deg, var(--ui-accent-soft), var(--bg-card) 70%) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-module-accent) 13%, rgba(20, 31, 52, .08)) !important;
  }

  body[data-ui-generation="4"] .page-content > .page-header::before {
    width: 7px !important;
    background: var(--ui-module-accent) !important;
  }

  body[data-ui-generation="4"] .page-content > .page-header::after {
    content: none !important;
    display: none !important;
  }

  body[data-ui-generation="4"] .page-content > .page-header > * {
    position: relative;
    z-index: 1;
  }

  body[data-ui-generation="4"] .page-title:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="4"] .page-header h1:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="4"] .page-header h2:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="4"] .ui-title-icon {
    background: var(--ui-module-accent) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--ui-module-accent) 28%, transparent) !important;
  }

  /* Elevated Material surfaces with rhythm across dense screens. */
  body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .glass-pane, .prem-stat,
    .prem-filter, .filter-bar, .filter-panel, [class*="-filter-panel"], .table-wrapper, .table-responsive) {
    border-color: color-mix(in srgb, var(--ui-card-accent) 18%, var(--border)) !important;
    background-color: var(--bg-card) !important;
    background-image: linear-gradient(145deg, color-mix(in srgb, var(--ui-card-accent) 5%, transparent), transparent 42%) !important;
    box-shadow: var(--md-shadow-1) !important;
  }

  body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .glass-pane, .prem-stat):hover {
    border-color: color-mix(in srgb, var(--ui-card-accent) 36%, var(--border)) !important;
    transform: translateY(-2px);
    box-shadow: var(--md-shadow-2) !important;
  }

  body[data-ui-generation="4"] :is(.card-header, .glass-pane-header) {
    border-bottom-color: color-mix(in srgb, var(--ui-card-accent) 20%, var(--border)) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ui-card-accent) 12%, var(--bg-elevated)), var(--bg-elevated)) !important;
  }

  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats) > :nth-child(6n + 1) { --ui-card-accent: #4f67e8; }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats) > :nth-child(6n + 2) { --ui-card-accent: #0aa17d; }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats) > :nth-child(6n + 3) { --ui-card-accent: #e48916; }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats) > :nth-child(6n + 4) { --ui-card-accent: #d84b6b; }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats) > :nth-child(6n + 5) { --ui-card-accent: #8a5be0; }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats) > :nth-child(6n) { --ui-card-accent: #0795ad; }

  body[data-ui-generation="4"] :is(.stats-grid, .prem-stats) > * {
    border-block-start: 4px solid var(--ui-card-accent) !important;
  }

  body[data-ui-generation="4"] .prem-stat::after {
    height: 0;
  }

  /* Controls feel tactile while remaining crisp and accessible. */
  body[data-ui-generation="4"] .btn {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  }

  body[data-ui-generation="4"] .btn-primary {
    border-color: var(--ui-module-accent) !important;
    background: var(--ui-module-accent) !important;
    box-shadow: 0 6px 15px color-mix(in srgb, var(--ui-module-accent) 27%, transparent) !important;
  }

  body[data-ui-generation="4"] .btn-primary:hover {
    filter: saturate(1.08) brightness(1.04);
    transform: translateY(-2px) !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--ui-module-accent) 34%, transparent) !important;
  }

  body[data-ui-generation="4"] .btn-success {
    background: linear-gradient(135deg, #078760, #0ba585) !important;
    box-shadow: 0 6px 15px rgba(7, 135, 96, .22) !important;
  }

  body[data-ui-generation="4"] .btn-danger {
    background: linear-gradient(135deg, #d43752, #ec5f66) !important;
    box-shadow: 0 6px 15px rgba(212, 55, 82, .22) !important;
  }

  body[data-ui-generation="4"] :is(.table, table.table) thead th {
    background: linear-gradient(180deg, var(--ui-accent-soft), var(--bg-elevated)) !important;
    color: var(--text-primary) !important;
  }

  body[data-ui-generation="4"] :is(.table, table.table) tbody tr:hover td {
    background: color-mix(in srgb, var(--ui-module-accent) 7%, var(--bg-card)) !important;
  }

  /* Dashboard: strong focal areas and coloured analytical cards. */
  body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header {
    border: 0 !important;
    background: linear-gradient(118deg, #365dcc, #3479d8) !important;
    box-shadow: 0 14px 34px rgba(67, 78, 203, .28) !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header::before {
    background: #ffb526 !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header :is(.page-title, h1, h2) {
    color: #fff !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header :is(.page-subtitle, p) {
    color: #e9edff !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header .page-actions {
    border-color: #cdd7ff !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(29, 36, 110, .22) !important;
  }

  html[data-theme="dark"] body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header .page-actions {
    border-color: #3f4d78 !important;
    background: #18233a !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-section {
    border-color: color-mix(in srgb, var(--ui-module-accent) 28%, var(--border)) !important;
    background-color: var(--bg-elevated) !important;
    background-image:
      radial-gradient(color-mix(in srgb, var(--ui-module-accent) 19%, var(--border)) 1.4px, transparent 1.4px),
      linear-gradient(145deg, var(--ui-accent-soft), var(--bg-elevated) 34%) !important;
    background-size: 30px 30px, auto !important;
    box-shadow: var(--md-shadow-2) !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-header {
    border: 0 !important;
    background: linear-gradient(110deg, #5546cf, #7658d5) !important;
    box-shadow: 0 11px 26px rgba(89, 67, 196, .25) !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-header .notes-title {
    color: #fff !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-header .notes-count-badge {
    background: #ffb020 !important;
    color: #2d1d00 !important;
    box-shadow: 0 5px 13px rgba(41, 23, 0, .2) !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-header :is(.notes-search, select) {
    border-color: #cfd7ff !important;
    background: #fff !important;
    color: #172033 !important;
    box-shadow: 0 4px 12px rgba(27, 26, 91, .16) !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .kpi-card {
    border-color: color-mix(in srgb, var(--kpi-c) 34%, var(--border)) !important;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--kpi-c) 13%, var(--bg-card)), var(--bg-card) 58%) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--kpi-c) 12%, transparent) !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .kpi-card::after {
    inset: 0 auto 0 0 !important;
    width: 5px !important;
    height: auto !important;
    background: var(--kpi-c) !important;
  }

  [dir="rtl"] body[data-ui-generation="4"][data-ui-module="dashboard"] .kpi-card::after {
    inset: 0 0 0 auto !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .kpi-icon {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--kpi-c) 24%, transparent) !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .add-note-card {
    border-color: color-mix(in srgb, var(--ui-module-accent) 45%, var(--border)) !important;
    background: linear-gradient(145deg, var(--ui-accent-soft), var(--bg-card)) !important;
    color: var(--ui-module-accent) !important;
    opacity: 1;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .add-note-icon {
    background: var(--ui-module-accent) !important;
    color: #fff !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--ui-module-accent) 30%, transparent) !important;
  }
}

@media screen and (max-width: 768px) {
  body[data-ui-generation="4"] {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--ui-module-accent) 8%, var(--bg-base)), var(--bg-base) 220px) !important;
  }

  body[data-ui-generation="4"] .page-content > .page-header::after {
    content: none !important;
    display: none !important;
  }

  body[data-ui-generation="4"] .topbar {
    background: var(--bg-surface) !important;
  }

  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-header {
    background: linear-gradient(145deg, #5546cf, #7658d5) !important;
  }
}

/* ========================================================================== */
/* Select controls — one shell, one border, and dropdowns above page content. */
/* ========================================================================== */
body[data-ui-generation="4"] .ts-wrapper.form-select,
body[data-ui-generation="4"] .ts-wrapper.form-control {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  appearance: none !important;
}

body[data-ui-generation="4"] .ts-wrapper.form-select:hover,
body[data-ui-generation="4"] .ts-wrapper.form-control:hover,
body[data-ui-generation="4"] .ts-wrapper.form-select:focus,
body[data-ui-generation="4"] .ts-wrapper.form-control:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] .ts-control {
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 40px 9px 13px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 2px 7px rgba(18, 31, 52, .05) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

[dir="rtl"] body[data-ui-generation="4"] .ts-control {
  padding: 9px 13px 9px 40px !important;
}

body[data-ui-generation="4"] .ts-wrapper.focus .ts-control,
body[data-ui-generation="4"] .ts-wrapper.dropdown-active .ts-control {
  border-color: var(--ui-module-accent) !important;
  background: var(--bg-card) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-module-accent) 14%, transparent),
              0 5px 13px rgba(18, 31, 52, .08) !important;
}

/* The Tom Select search input lives inside .ts-control; it is not a second field. */
body[data-ui-generation="4"] .ts-control > input,
body[data-ui-generation="4"] .ts-control > input:focus,
body[data-ui-generation="4"] .ts-control > input:hover {
  width: auto !important;
  min-width: 4rem !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
}

body[data-ui-generation="4"] .ts-wrapper.single .ts-control::after {
  inset-inline-end: 14px !important;
  margin-top: -2px !important;
  border-width: 5px 4px 0 !important;
  border-color: var(--text-muted) transparent transparent !important;
}

body[data-ui-generation="4"] .ts-wrapper.single.dropdown-active .ts-control::after {
  margin-top: -3px !important;
  border-width: 0 4px 5px !important;
  border-color: transparent transparent var(--ui-module-accent) !important;
}

body[data-ui-generation="4"] .ts-dropdown {
  z-index: 2147483000 !important;
  margin-top: 6px !important;
  border: 1px solid var(--ui-accent-border) !important;
  border-radius: 13px !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--md-shadow-3) !important;
  overflow: hidden !important;
  isolation: isolate;
}

body[data-ui-generation="4"] .ts-dropdown-content {
  max-height: min(320px, 48vh) !important;
  padding: 6px !important;
  overflow-y: auto !important;
}

body[data-ui-generation="4"] .ts-dropdown .option,
body[data-ui-generation="4"] .ts-dropdown .create {
  min-height: 38px;
  margin: 1px 0 !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--text-secondary) !important;
  line-height: 1.45 !important;
}

body[data-ui-generation="4"] .ts-dropdown :is(.option.active, .option.selected, .create.active) {
  background: var(--ui-accent-soft) !important;
  color: var(--ui-module-accent) !important;
}

/* Native selects that are intentionally left simple. */
body[data-ui-generation="4"] select:not(.tomselected):not(.select2-hidden-accessible) {
  width: 100%;
  min-height: 44px;
  padding-inline: 13px 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  background-color: var(--bg-card) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23738198' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 16px !important;
  box-shadow: 0 2px 7px rgba(18, 31, 52, .05) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

[dir="rtl"] body[data-ui-generation="4"] select:not(.tomselected):not(.select2-hidden-accessible) {
  background-position: left 13px center !important;
}

/* Select2 gets the same single-shell treatment. */
body[data-ui-generation="4"] .select2-container {
  width: 100% !important;
  max-width: 100%;
}

body[data-ui-generation="4"] .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
  min-height: 44px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 2px 7px rgba(18, 31, 52, .05) !important;
}

body[data-ui-generation="4"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-inline: 13px 38px !important;
  color: var(--text-primary) !important;
  line-height: 42px !important;
}

body[data-ui-generation="4"] .select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 34px !important;
  height: 42px !important;
  inset-inline-end: 3px !important;
}

body[data-ui-generation="4"] .select2-container :is(.select2-search__field, .select2-search__field:focus) {
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-ui-generation="4"] :is(.select2-container--open, .select2-dropdown) {
  z-index: 2147483000 !important;
}

/* Fallback for a locally initialized dropdown that still lives inside a card. */
body[data-ui-generation="4"] :is(.page-content, .card, .section-card, .profile-card, .glass-pane,
  .prem-filter, .filter-bar, .filter-panel, [class*="-filter-panel"], .form-group,
  .tf-wizard-card, .tf-wizard-body, .tf-flow, .tf-flow-box, .emp-selector-wrap):has(.ts-wrapper.dropdown-active),
body[data-ui-generation="4"] :is(.page-content, .card, .section-card, .profile-card, .glass-pane,
  .prem-filter, .filter-bar, .filter-panel, [class*="-filter-panel"], .form-group):has(.ss-wrapper.ss-active) {
  position: relative !important;
  z-index: 100000 !important;
  overflow: visible !important;
}

@media (max-width: 768px) {
  body[data-ui-generation="4"] .ts-control,
  body[data-ui-generation="4"] select:not(.tomselected):not(.select2-hidden-accessible),
  body[data-ui-generation="4"] .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    min-height: 46px !important;
  }

  body[data-ui-generation="4"] .ts-dropdown {
    max-width: calc(100vw - 20px) !important;
  }
}