/* ========================================================================== 
   HR Creative System v3
   A lively, high-contrast identity shared by every authenticated module.
   This layer intentionally contains presentation only; business logic stays
   in the existing module code.
   ========================================================================== */

:root {
  --ui-blue: #4f8cff;
  --ui-cyan: #22d3ee;
  --ui-teal: #18c6a3;
  --ui-green: #38d991;
  --ui-lime: #9be15d;
  --ui-amber: #ffb648;
  --ui-orange: #ff7a45;
  --ui-coral: #ff5f7a;
  --ui-pink: #f472b6;
  --ui-violet: #9b78ff;
  --ui-indigo: #6574ff;

  --bg-base: #07101f;
  --bg-surface: #0d1830;
  --bg-card: #13213d;
  --bg-elevated: #1a2b4b;
  --bg-soft: #101d35;
  --bg-hover: rgba(137, 164, 210, .1);
  --bg-active: rgba(101, 116, 255, .16);
  --text-primary: #f8fbff;
  --text-secondary: #d0d9e8;
  --text-muted: #8fa0bb;
  --border: #293b5d;
  --border-light: #3b5279;

  --success: #2dd49a;
  --success-subtle: rgba(45, 212, 154, .14);
  --warning: #ffb547;
  --warning-subtle: rgba(255, 181, 71, .15);
  --danger: #ff617b;
  --danger-subtle: rgba(255, 97, 123, .14);
  --info: #55a5ff;
  --info-subtle: rgba(85, 165, 255, .14);
  --purple: #aa8cff;
  --purple-subtle: rgba(170, 140, 255, .14);
  --cyan: #2ed9f3;
  --cyan-subtle: rgba(46, 217, 243, .13);
  --orange: #ff884d;
  --orange-subtle: rgba(255, 136, 77, .14);
  --pink: #f77ab9;
  --pink-subtle: rgba(247, 122, 185, .14);

  --surface-shadow: 0 12px 34px rgba(0, 7, 24, .22);
  --surface-shadow-lg: 0 24px 64px rgba(0, 6, 22, .34);
  --ui-inner-light: inset 0 1px rgba(255, 255, 255, .055);
  --ui-card-gradient: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 38%);
  --ui-module-accent: var(--ui-indigo);
  --ui-module-accent-2: var(--ui-cyan);
  --ui-module-soft: color-mix(in srgb, var(--ui-module-accent) 13%, transparent);
  --ui-radius-xs: 9px;
  --ui-radius-sm: 12px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 22px;
  --ui-radius-xl: 28px;
  --ui-ease: cubic-bezier(.2, .75, .25, 1);
}

[data-theme="light"] {
  --bg-base: #edf3fb;
  --bg-surface: #f8fbff;
  --bg-card: #ffffff;
  --bg-elevated: #eef4fb;
  --bg-soft: #f5f8fd;
  --bg-hover: rgba(51, 77, 120, .065);
  --bg-active: rgba(101, 116, 255, .1);
  --text-primary: #14213a;
  --text-secondary: #465876;
  --text-muted: #71829d;
  --border: #d8e3f0;
  --border-light: #c3d2e4;
  --surface-shadow: 0 12px 34px rgba(32, 58, 94, .09);
  --surface-shadow-lg: 0 24px 64px rgba(32, 58, 94, .15);
  --ui-inner-light: inset 0 1px rgba(255, 255, 255, .9);
  --ui-card-gradient: linear-gradient(145deg, color-mix(in srgb, var(--ui-module-accent) 4%, #fff), #fff 42%);
}

/* Module palettes */
body[data-ui-module="dashboard"] { --ui-module-accent: #7c6cff; --ui-module-accent-2: #22d3ee; }
body[data-ui-module="employees"] { --ui-module-accent: #4f8cff; --ui-module-accent-2: #2ed9f3; }
body[data-ui-module="branches"] { --ui-module-accent: #14b8c4; --ui-module-accent-2: #38d991; }
body[data-ui-module="attendance"],
body[data-ui-module="attendance_exemptions"],
body[data-ui-module="shifts"] { --ui-module-accent: #ff8a45; --ui-module-accent-2: #ffc247; }
body[data-ui-module="payroll"],
body[data-ui-module="adjustments"] { --ui-module-accent: #23c88d; --ui-module-accent-2: #22d3ee; }
body[data-ui-module="violations"] { --ui-module-accent: #ff5f7a; --ui-module-accent-2: #ff9a45; }
body[data-ui-module="kpi"],
body[data-ui-module="evaluations"] { --ui-module-accent: #9b78ff; --ui-module-accent-2: #f472b6; }
body[data-ui-module="reports"],
body[data-ui-module="import_export"] { --ui-module-accent: #6574ff; --ui-module-accent-2: #2ed9f3; }
body[data-ui-module="documents"],
body[data-ui-module="contracts"],
body[data-ui-module="licenses"],
body[data-ui-module="rent_contracts"] { --ui-module-accent: #a574ff; --ui-module-accent-2: #ffb648; }
body[data-ui-module="assets"],
body[data-ui-module="custodies"] { --ui-module-accent: #20c7a3; --ui-module-accent-2: #9be15d; }
body[data-ui-module="clients"] { --ui-module-accent: #4f8cff; --ui-module-accent-2: #f472b6; }
body[data-ui-module="notifications"] { --ui-module-accent: #f064b3; --ui-module-accent-2: #9b78ff; }
body[data-ui-module="orgchart"] { --ui-module-accent: #4f8cff; --ui-module-accent-2: #9b78ff; }
body[data-ui-module="settings"] { --ui-module-accent: #7185a6; --ui-module-accent-2: #9b78ff; }
body[data-ui-module="profile"],
body[data-ui-module="portal"] { --ui-module-accent: #2acca0; --ui-module-accent-2: #4f8cff; }
body[data-ui-module="login"] { --ui-module-accent: #7c6cff; --ui-module-accent-2: #22d3ee; }
body[data-ui-module="portal-login"] { --ui-module-accent: #20c997; --ui-module-accent-2: #4f8cff; }

/* Foundation */
body[data-ui-generation="3"] {
  min-width: 0;
  overflow-x: hidden;
  background-color: var(--bg-base);
  background-image:
    radial-gradient(circle at 94% 3%, color-mix(in srgb, var(--ui-module-accent) 17%, transparent), transparent 28rem),
    radial-gradient(circle at 9% 92%, color-mix(in srgb, var(--ui-module-accent-2) 10%, transparent), transparent 30rem),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-base) 97%, var(--ui-module-accent) 3%), var(--bg-base));
  background-attachment: fixed;
  color: var(--text-primary);
}

body[data-ui-generation="3"]::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 32%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 32%, transparent) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 70%);
}

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

body[data-ui-generation="3"] img { image-rendering: auto; }
body[data-ui-generation="3"] a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }

body[data-ui-generation="3"] ::-webkit-scrollbar { width: 9px; height: 9px; }
body[data-ui-generation="3"] ::-webkit-scrollbar-track { background: color-mix(in srgb, var(--bg-base) 82%, transparent); }
body[data-ui-generation="3"] ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background: linear-gradient(var(--ui-module-accent), var(--ui-module-accent-2)) padding-box;
}

/* Sidebar */
body[data-ui-generation="3"] .sidebar {
  isolation: isolate;
  border-inline-end: 1px solid color-mix(in srgb, var(--border) 85%, var(--ui-module-accent) 15%);
  background:
    radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--ui-module-accent) 21%, transparent), transparent 15rem),
    linear-gradient(180deg, #0b1630 0%, color-mix(in srgb, var(--bg-surface) 92%, #050b18) 100%);
  box-shadow: 18px 0 48px rgba(0, 6, 22, .2);
}
[dir="rtl"] body[data-ui-generation="3"] .sidebar { box-shadow: -18px 0 48px rgba(0, 6, 22, .2); }
[data-theme="light"] body[data-ui-generation="3"] .sidebar,
body[data-theme="light"][data-ui-generation="3"] .sidebar {
  background:
    radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--ui-module-accent) 12%, transparent), transparent 15rem),
    linear-gradient(180deg, #f8fbff, #edf4fc);
}

body[data-ui-generation="3"] .sidebar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 46%, rgba(255, 255, 255, .022) 46% 47%, transparent 47% 100%);
}

body[data-ui-generation="3"] .sidebar-logo {
  position: relative;
  min-height: 78px;
  padding: 13px 14px;
  margin: 10px 10px 4px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 22%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-module-accent) 13%, transparent), color-mix(in srgb, var(--ui-module-accent-2) 5%, transparent)),
    color-mix(in srgb, var(--bg-card) 78%, transparent);
  box-shadow: var(--ui-inner-light), 0 14px 30px rgba(0, 7, 24, .14);
  overflow: hidden;
}

body[data-ui-generation="3"] .sidebar-logo::after {
  content: "";
  position: absolute;
  inset-inline-end: -23px;
  bottom: -34px;
  width: 86px;
  height: 86px;
  border: 16px solid color-mix(in srgb, var(--ui-module-accent-2) 12%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

body[data-ui-generation="3"] .sidebar-logo-icon,
body[data-ui-generation="3"] .sidebar-logo img {
  width: 43px !important;
  height: 43px !important;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px !important;
  background: linear-gradient(145deg, var(--ui-module-accent), var(--ui-module-accent-2));
  box-shadow: 0 9px 24px color-mix(in srgb, var(--ui-module-accent) 34%, transparent);
}

body[data-ui-generation="3"] .sidebar-logo-name { font-size: 14px; font-weight: 800; }
body[data-ui-generation="3"] .sidebar-logo-sub {
  width: fit-content;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ui-module-accent) 15%, transparent);
  color: color-mix(in srgb, var(--ui-module-accent) 66%, var(--text-primary));
  font-size: 9px;
  font-weight: 800;
}

body[data-ui-generation="3"] .sidebar-nav { padding: 12px 8px 18px; }
body[data-ui-generation="3"] .sidebar-nav::-webkit-scrollbar { width: 4px; }
body[data-ui-generation="3"] .nav-section {
  padding: 13px 13px 7px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

body[data-ui-generation="3"] .nav-group { margin: 5px 0; }
body[data-ui-generation="3"] .nav-group-toggle {
  min-height: 45px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: .035em;
  text-transform: none;
}

body[data-ui-generation="3"] .nav-group-toggle:hover {
  border-color: rgba(var(--grp-rgb), .2);
  background: linear-gradient(90deg, rgba(var(--grp-rgb), .1), transparent);
  color: var(--text-primary);
  transform: translateX(2px);
}
[dir="rtl"] body[data-ui-generation="3"] .nav-group-toggle:hover { transform: translateX(-2px); }

body[data-ui-generation="3"] .nav-group-colored.open > .nav-group-toggle {
  border-color: rgba(var(--grp-rgb), .18);
  background: linear-gradient(90deg, rgba(var(--grp-rgb), .12), rgba(var(--grp-rgb), .025));
  color: var(--text-primary);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

body[data-ui-generation="3"] .nav-group-colored .nav-group-icon {
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid rgba(var(--grp-rgb), .23);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(var(--grp-rgb), .22), rgba(var(--grp-rgb), .07));
  color: var(--grp-hex);
  box-shadow: 0 7px 16px rgba(var(--grp-rgb), .11);
}
body[data-ui-generation="3"] .nav-group-icon svg { width: 17px; height: 17px; stroke-width: 2.1; }

body[data-ui-generation="3"] .nav-group-arrow {
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: rgba(var(--grp-rgb), .07);
  justify-content: center;
}

body[data-ui-generation="3"] .nav-group-items {
  margin: 5px 17px 9px 0;
  padding: 3px 11px 3px 0;
  border-inline-start: 1px dashed rgba(var(--grp-rgb), .33);
}
[dir="ltr"] body[data-ui-generation="3"] .nav-group-items {
  margin: 5px 0 9px 17px;
  padding: 3px 0 3px 11px;
}

body[data-ui-generation="3"] .nav-group-items .nav-item {
  min-height: 38px;
  margin: 2px 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--text-muted);
  font-size: 12px;
}
body[data-ui-generation="3"] .nav-group-colored .nav-item:hover {
  border-color: rgba(var(--grp-rgb), .14);
  background: rgba(var(--grp-rgb), .075);
  color: var(--text-primary);
}
body[data-ui-generation="3"] .nav-group-colored .nav-item.active {
  border-color: rgba(var(--grp-rgb), .24);
  background: linear-gradient(90deg, rgba(var(--grp-rgb), .19), rgba(var(--grp-rgb), .05));
  color: color-mix(in srgb, var(--grp-hex) 72%, #fff) !important;
  box-shadow: 0 7px 18px rgba(var(--grp-rgb), .08);
}
body[data-ui-generation="3"] .nav-group-colored .nav-item.active::before {
  inset-inline-start: -13px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  box-shadow: 0 0 12px rgba(var(--grp-rgb), .7);
}

body[data-ui-generation="3"] .sidebar-footer {
  margin: 8px 10px 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 90%, var(--ui-module-accent) 10%));
  box-shadow: var(--ui-inner-light);
}
body[data-ui-generation="3"] .user-avatar {
  width: 39px;
  height: 39px;
  border: 2px solid color-mix(in srgb, var(--ui-module-accent-2) 52%, transparent);
  background: linear-gradient(145deg, var(--ui-module-accent), var(--ui-module-accent-2));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-module-accent) 28%, transparent);
}

/* Top bar */
body[data-ui-generation="3"] .topbar {
  min-height: 72px;
  height: 72px;
  padding-inline: clamp(14px, 2.1vw, 30px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, var(--ui-module-accent) 18%);
  background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
  box-shadow: 0 9px 30px rgba(0, 7, 24, .11);
  backdrop-filter: blur(22px) saturate(150%);
}

body[data-ui-generation="3"] .topbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ui-module-accent), var(--ui-module-accent-2), transparent);
  opacity: .6;
}

body[data-ui-generation="3"] .topbar-toggle,
body[data-ui-generation="3"] .topbar-btn,
body[data-ui-generation="3"] .lang-toggle {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, var(--bg-elevated), color-mix(in srgb, var(--bg-elevated) 90%, var(--ui-module-accent) 10%));
  color: var(--text-secondary);
  box-shadow: var(--ui-inner-light);
}
body[data-ui-generation="3"] .topbar-toggle { width: 42px; height: 42px; border-radius: 13px; }
body[data-ui-generation="3"] .topbar-btn { width: 40px; height: 40px; border-radius: 12px; }
body[data-ui-generation="3"] .topbar-toggle:hover,
body[data-ui-generation="3"] .topbar-btn:hover,
body[data-ui-generation="3"] .lang-toggle:hover {
  border-color: color-mix(in srgb, var(--ui-module-accent) 48%, var(--border));
  background: var(--ui-module-soft);
  color: color-mix(in srgb, var(--ui-module-accent) 66%, var(--text-primary));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-module-accent) 12%, transparent);
  transform: translateY(-1px);
}

body[data-ui-generation="3"] .topbar-search { max-width: 560px; }
body[data-ui-generation="3"] .topbar-search input {
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(110deg, var(--ui-module-accent), var(--ui-module-accent-2)) border-box;
  box-shadow: var(--ui-inner-light);
}
body[data-ui-generation="3"] .topbar-search input:focus {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(110deg, var(--ui-module-accent), var(--ui-module-accent-2)) border-box;
  box-shadow: 0 0 0 4px var(--ui-module-soft), 0 12px 28px color-mix(in srgb, var(--ui-module-accent) 12%, transparent);
}
body[data-ui-generation="3"] .topbar-search .search-icon { color: var(--ui-module-accent); }
body[data-ui-generation="3"] .notif-badge {
  top: -3px;
  inset-inline-end: -3px;
  width: 19px;
  height: 19px;
  border: 2px solid var(--bg-surface);
  background: linear-gradient(145deg, var(--danger), var(--ui-orange));
  box-shadow: 0 4px 12px rgba(255, 97, 123, .4);
}

/* Page canvas and headers */
body[data-ui-generation="3"] .page-content {
  width: min(100%, 1760px);
  padding: clamp(20px, 2.4vw, 38px);
}

body[data-ui-generation="3"] .page-content > .page-header {
  position: relative;
  isolation: isolate;
  align-items: center !important;
  min-height: 118px;
  margin-bottom: 26px !important;
  padding: 23px 25px !important;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 24%, var(--border));
  border-radius: var(--ui-radius-lg);
  background:
    radial-gradient(circle at 93% 15%, color-mix(in srgb, var(--ui-module-accent) 18%, transparent), transparent 13rem),
    radial-gradient(circle at 7% 90%, color-mix(in srgb, var(--ui-module-accent-2) 10%, transparent), transparent 12rem),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 92%, var(--ui-module-accent) 8%), var(--bg-card));
  box-shadow: var(--surface-shadow), var(--ui-inner-light);
  overflow: hidden;
}

body[data-ui-generation="3"] .page-content > .page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -38px;
  top: -68px;
  width: 190px;
  height: 190px;
  border: 28px solid color-mix(in srgb, var(--ui-module-accent) 9%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--ui-module-accent-2) 3%, transparent);
}

body[data-ui-generation="3"] .page-content > .page-header::after {
  content: "";
  position: absolute;
  inset-inline-start: 25px;
  bottom: 0;
  width: min(190px, 30%);
  height: 4px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(90deg, var(--ui-module-accent), var(--ui-module-accent-2));
  box-shadow: 0 -3px 16px color-mix(in srgb, var(--ui-module-accent) 35%, transparent);
}

body[data-ui-generation="3"] .page-title,
body[data-ui-generation="3"] .page-header h1,
body[data-ui-generation="3"] .page-header h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(22px, 2.15vw, 31px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.025em;
}

body[data-ui-generation="3"] .page-title:not(:has(.ui-title-icon, svg))::before,
body[data-ui-generation="3"] .page-header h1:not(:has(.ui-title-icon, svg))::before,
body[data-ui-generation="3"] .page-header h2:not(:has(.ui-title-icon, svg))::before {
  content: "✦";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 42%, transparent);
  border-radius: 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ui-module-accent) 28%, transparent), color-mix(in srgb, var(--ui-module-accent-2) 12%, transparent));
  color: color-mix(in srgb, var(--ui-module-accent) 74%, #fff);
  font-size: 20px;
  box-shadow: 0 9px 24px color-mix(in srgb, var(--ui-module-accent) 18%, transparent), var(--ui-inner-light);
}

body[data-ui-generation="3"] .ui-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 38%, transparent);
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ui-module-accent) 26%, transparent), color-mix(in srgb, var(--ui-module-accent-2) 12%, transparent));
  box-shadow: 0 9px 24px color-mix(in srgb, var(--ui-module-accent) 16%, transparent), var(--ui-inner-light);
  font-size: 21px;
  line-height: 1;
}

body[data-ui-generation="3"] .page-subtitle,
body[data-ui-generation="3"] .page-header p {
  max-width: 900px;
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}
body[data-ui-generation="3"] .page-actions { position: relative; z-index: 2; gap: 9px; }

/* Breadcrumbs */
body[data-ui-generation="3"] .breadcrumb,
body[data-ui-generation="3"] [class*="breadcrumb"] {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 16%, var(--border));
  border-radius: 99px;
  background: color-mix(in srgb, var(--ui-module-accent) 7%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}

/* Cards and repeated surfaces */
body[data-ui-generation="3"] .card,
body[data-ui-generation="3"] .section-card,
body[data-ui-generation="3"] .profile-card,
body[data-ui-generation="3"] .filter-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-card-gradient), var(--bg-card);
  box-shadow: var(--surface-shadow), var(--ui-inner-light);
}

body[data-ui-generation="3"] .card:not(:focus-within):hover,
body[data-ui-generation="3"] .section-card:not(:focus-within):hover,
body[data-ui-generation="3"] .profile-card:not(:focus-within):hover {
  border-color: color-mix(in srgb, var(--ui-module-accent) 28%, var(--border));
  box-shadow: var(--surface-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--ui-module-accent) 8%, transparent);
  transform: translateY(-2px);
}

body[data-ui-generation="3"] .card-header {
  position: relative;
  min-height: 64px;
  padding: 15px 19px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
  background: linear-gradient(110deg, color-mix(in srgb, var(--ui-module-accent) 9%, transparent), transparent 48%);
}

body[data-ui-generation="3"] .card-header::after {
  content: "";
  position: absolute;
  inset-inline-start: 19px;
  bottom: -1px;
  width: 46px;
  height: 2px;
  background: linear-gradient(90deg, var(--ui-module-accent), var(--ui-module-accent-2));
}

body[data-ui-generation="3"] .card-title,
body[data-ui-generation="3"] .section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
}
body[data-ui-generation="3"] .card-title::before {
  width: 5px;
  height: 20px;
  border-radius: 9px;
  background: linear-gradient(var(--ui-module-accent), var(--ui-module-accent-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ui-module-accent) 38%, transparent);
}
body[data-ui-generation="3"] .card-title:has(.ui-title-icon)::before { display: none; }
body[data-ui-generation="3"] .card-title .ui-title-icon,
body[data-ui-generation="3"] .section-title .ui-title-icon,
body[data-ui-generation="3"] .modal-title .ui-title-icon {
  width: 31px;
  height: 31px;
  flex-basis: 31px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow: var(--ui-inner-light);
}
body[data-ui-generation="3"] .card-body { padding: 20px; }
body[data-ui-generation="3"] .card-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 88%, var(--ui-module-accent) 3%);
}

/* Rhythmic card accents */
body[data-ui-generation="3"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid) > :nth-child(6n + 1) { --ui-item-accent: var(--ui-blue); }
body[data-ui-generation="3"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid) > :nth-child(6n + 2) { --ui-item-accent: var(--ui-green); }
body[data-ui-generation="3"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid) > :nth-child(6n + 3) { --ui-item-accent: var(--ui-violet); }
body[data-ui-generation="3"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid) > :nth-child(6n + 4) { --ui-item-accent: var(--ui-amber); }
body[data-ui-generation="3"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid) > :nth-child(6n + 5) { --ui-item-accent: var(--ui-cyan); }
body[data-ui-generation="3"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid) > :nth-child(6n + 6) { --ui-item-accent: var(--ui-pink); }

body[data-ui-generation="3"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid) > :is(.card, [class*="stat-card"], .kpi-card) {
  border-top: 3px solid var(--ui-item-accent, var(--ui-module-accent));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ui-item-accent, var(--ui-module-accent)) 10%, transparent), transparent 8rem),
    var(--ui-card-gradient), var(--bg-card);
}

body[data-ui-generation="3"] :is([class*="stat-icon"], [class*="card-icon"], .kpi-icon) {
  border: 1px solid color-mix(in srgb, var(--ui-item-accent, var(--ui-module-accent)) 25%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ui-item-accent, var(--ui-module-accent)) 23%, transparent), color-mix(in srgb, var(--ui-item-accent, var(--ui-module-accent-2)) 8%, transparent));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--ui-item-accent, var(--ui-module-accent)) 12%, transparent), var(--ui-inner-light);
}

/* Buttons and action icons */
body[data-ui-generation="3"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 16px;
  border-width: 1px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: var(--ui-inner-light);
  transition: transform .2s var(--ui-ease), box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
body[data-ui-generation="3"] .btn:hover {
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-2px);
}
body[data-ui-generation="3"] .btn:active { transform: translateY(0) scale(.975); }
body[data-ui-generation="3"] .btn-primary {
  border-color: color-mix(in srgb, var(--primary) 72%, #fff 12%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #7187ff), var(--primary-hover));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 27%, transparent), var(--ui-inner-light);
}
body[data-ui-generation="3"] .btn-secondary {
  border-color: color-mix(in srgb, var(--secondary) 72%, #fff 12%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 82%, var(--ui-cyan)), var(--secondary));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--secondary) 23%, transparent), var(--ui-inner-light);
}
body[data-ui-generation="3"] .btn-success {
  border-color: color-mix(in srgb, var(--success) 72%, #fff 10%);
  background: linear-gradient(135deg, var(--success), #16ad7d);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--success) 24%, transparent), var(--ui-inner-light);
}
body[data-ui-generation="3"] .btn-danger {
  border-color: color-mix(in srgb, var(--danger) 74%, #fff 10%);
  background: linear-gradient(135deg, var(--danger), #df3f63);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--danger) 24%, transparent), var(--ui-inner-light);
}
body[data-ui-generation="3"] .btn-warning {
  border-color: color-mix(in srgb, var(--warning) 78%, #fff 8%);
  background: linear-gradient(135deg, #ffc04f, #ed942a);
  color: #211506;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--warning) 23%, transparent), var(--ui-inner-light);
}
body[data-ui-generation="3"] .btn-info {
  border-color: color-mix(in srgb, var(--info) 72%, #fff 10%);
  background: linear-gradient(135deg, var(--info), #367ee8);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--info) 23%, transparent), var(--ui-inner-light);
}
body[data-ui-generation="3"] :is(.btn-outline, .btn-ghost) {
  border-color: var(--border);
  background: linear-gradient(145deg, var(--bg-elevated), color-mix(in srgb, var(--bg-elevated) 91%, var(--ui-module-accent) 9%));
  color: var(--text-secondary);
  box-shadow: var(--ui-inner-light);
}
body[data-ui-generation="3"] :is(.btn-outline, .btn-ghost):hover {
  border-color: color-mix(in srgb, var(--ui-module-accent) 44%, var(--border));
  color: color-mix(in srgb, var(--ui-module-accent) 64%, var(--text-primary));
  box-shadow: 0 8px 20px var(--ui-module-soft), var(--ui-inner-light);
}
body[data-ui-generation="3"] .btn-sm { min-height: 35px; padding: 7px 11px; border-radius: 10px; }
body[data-ui-generation="3"] .btn-lg { min-height: 50px; padding: 12px 22px; border-radius: 14px; }
body[data-ui-generation="3"] :is(.btn-icon, .ui-icon-only) { width: 42px; min-width: 42px; padding: 0; }
body[data-ui-generation="3"] .btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
body[data-ui-generation="3"] .ui-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-block: -3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .13);
  font-size: 13px;
  line-height: 1;
}

/* Forms and filters */
body[data-ui-generation="3"] .form-label,
body[data-ui-generation="3"] label.form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}
body[data-ui-generation="3"] .form-label::before,
body[data-ui-generation="3"] label.form-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-module-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ui-module-accent) 60%, transparent);
}

body[data-ui-generation="3"] :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--bg-elevated), color-mix(in srgb, var(--bg-elevated) 96%, var(--ui-module-accent) 4%));
  color: var(--text-primary);
  box-shadow: var(--ui-inner-light);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}
body[data-ui-generation="3"] :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select) { min-height: 44px; }
body[data-ui-generation="3"] :is(.form-control, .form-select, input, select, textarea):hover { border-color: var(--border-light); }
body[data-ui-generation="3"] :is(.form-control, .form-select, input, select, textarea):focus {
  border-color: var(--ui-module-accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 4px var(--ui-module-soft), 0 9px 22px color-mix(in srgb, var(--ui-module-accent) 9%, transparent);
  outline: none;
}
body[data-ui-generation="3"] :is(.form-control, input, textarea)::placeholder { color: var(--text-muted); opacity: .78; }
body[data-ui-generation="3"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ui-module-accent); }
body[data-ui-generation="3"] input[type="file"] {
  padding: 9px;
  border: 1px dashed color-mix(in srgb, var(--ui-module-accent) 36%, var(--border));
  border-radius: 12px;
  background: var(--ui-module-soft);
}

body[data-ui-generation="3"] :is(.filter-bar, [class*="-filter-bar"], .filter-panel) {
  position: relative;
  gap: 12px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 17%, var(--border));
  border-radius: var(--ui-radius-md);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--ui-module-accent) 7%, transparent), transparent 42%),
    var(--bg-card);
  box-shadow: var(--surface-shadow), var(--ui-inner-light);
}

body[data-ui-generation="3"] .ts-control,
body[data-ui-generation="3"] .select2-container--default .select2-selection--single,
body[data-ui-generation="3"] .select2-container--default .select2-selection--multiple,
body[data-ui-generation="3"] .ss-display {
  min-height: 44px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-elevated) !important;
  box-shadow: var(--ui-inner-light) !important;
}
body[data-ui-generation="3"] .ts-wrapper.focus .ts-control,
body[data-ui-generation="3"] .select2-container--focus .select2-selection {
  border-color: var(--ui-module-accent) !important;
  box-shadow: 0 0 0 4px var(--ui-module-soft) !important;
}
body[data-ui-generation="3"] :is(.ts-dropdown, .select2-dropdown, .ss-dropdown) {
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 22%, var(--border)) !important;
  border-radius: 14px !important;
  background: var(--bg-card) !important;
  box-shadow: var(--surface-shadow-lg) !important;
}
body[data-ui-generation="3"] :is(.ts-dropdown .option.active, .select2-results__option--highlighted, .ss-option:hover) {
  border-radius: 9px;
  background: var(--ui-module-soft) !important;
  color: var(--text-primary) !important;
}

/* Tables */
body[data-ui-generation="3"] :is(.table-wrapper, .table-responsive) {
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-md);
  background: var(--bg-card);
  box-shadow: var(--surface-shadow), var(--ui-inner-light);
}
body[data-ui-generation="3"] :is(.table, table.table) {
  border-spacing: 0;
  background: transparent;
}
body[data-ui-generation="3"] :is(.table, table.table) thead th {
  padding: 14px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-module-accent) 25%, var(--border));
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--ui-module-accent) 11%, transparent), transparent),
    var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}
body[data-ui-generation="3"] :is(.table, table.table) tbody td {
  padding: 14px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  color: var(--text-secondary);
  transition: background-color .16s ease, color .16s ease;
}
body[data-ui-generation="3"] :is(.table, table.table) tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bg-elevated) 24%, transparent);
}
body[data-ui-generation="3"] :is(.table, table.table) tbody tr:hover td {
  background: color-mix(in srgb, var(--ui-module-accent) 8%, var(--bg-card));
  color: var(--text-primary);
}
body[data-ui-generation="3"] :is(.table, table.table) tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 var(--ui-module-accent);
}
[dir="rtl"] body[data-ui-generation="3"] :is(.table, table.table) tbody tr:hover td:first-child {
  box-shadow: inset -3px 0 var(--ui-module-accent);
}
body[data-ui-generation="3"] .ui-dense-table { font-size: 12px; }
body[data-ui-generation="3"] .ui-dense-table :is(th, td) { padding-inline: 12px !important; }
body[data-ui-generation="3"] .table .actions-cell { gap: 6px; }

/* Status, tabs, alerts and progress */
body[data-ui-generation="3"] :is(.badge, [class*="status-badge"]) {
  min-height: 25px;
  padding: 5px 10px;
  border-width: 1px;
  border-style: solid;
  border-radius: 99px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055);
  font-size: 10px;
  font-weight: 800;
}
body[data-ui-generation="3"] .badge-success { border-color: color-mix(in srgb, var(--success) 38%, transparent); background: var(--success-subtle); color: var(--success); }
body[data-ui-generation="3"] .badge-warning { border-color: color-mix(in srgb, var(--warning) 38%, transparent); background: var(--warning-subtle); color: var(--warning); }
body[data-ui-generation="3"] .badge-danger { border-color: color-mix(in srgb, var(--danger) 38%, transparent); background: var(--danger-subtle); color: var(--danger); }
body[data-ui-generation="3"] .badge-info { border-color: color-mix(in srgb, var(--info) 38%, transparent); background: var(--info-subtle); color: var(--info); }
body[data-ui-generation="3"] .badge-primary { border-color: color-mix(in srgb, var(--primary) 38%, transparent); background: var(--primary-subtle); color: color-mix(in srgb, var(--primary) 65%, #fff); }

body[data-ui-generation="3"] .alert {
  position: relative;
  min-height: 50px;
  padding: 13px 16px;
  border-width: 1px 1px 1px 4px;
  border-radius: 13px;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, .035), transparent 40%);
  box-shadow: var(--ui-inner-light);
}
[dir="rtl"] body[data-ui-generation="3"] .alert { border-width: 1px 4px 1px 1px; }
body[data-ui-generation="3"] .alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
}

body[data-ui-generation="3"] .tabs {
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--ui-inner-light);
}
body[data-ui-generation="3"] .tab-btn {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-muted);
  font-weight: 700;
}
body[data-ui-generation="3"] .tab-btn:hover {
  border-color: var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
body[data-ui-generation="3"] .tab-btn.active {
  border-color: color-mix(in srgb, var(--ui-module-accent) 32%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-module-accent) 21%, transparent), color-mix(in srgb, var(--ui-module-accent-2) 8%, transparent));
  color: color-mix(in srgb, var(--ui-module-accent) 62%, var(--text-primary));
  box-shadow: 0 7px 18px var(--ui-module-soft);
}

body[data-ui-generation="3"] :is(.progress, .progress-bar, .kpi-progress) { border-radius: 99px; }
body[data-ui-generation="3"] .progress {
  height: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .16);
}
body[data-ui-generation="3"] .progress-bar {
  background: linear-gradient(90deg, var(--ui-module-accent), var(--ui-module-accent-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ui-module-accent) 38%, transparent);
}

body[data-ui-generation="3"] .pagination { gap: 6px; }
body[data-ui-generation="3"] .page-link {
  min-width: 38px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-secondary);
  box-shadow: var(--ui-inner-light);
}
body[data-ui-generation="3"] .page-link:hover {
  border-color: var(--ui-module-accent);
  background: var(--ui-module-soft);
  color: var(--text-primary);
}
body[data-ui-generation="3"] .page-link.active {
  border-color: var(--ui-module-accent);
  background: linear-gradient(145deg, var(--ui-module-accent), var(--ui-module-accent-2));
  color: #fff;
  box-shadow: 0 8px 20px var(--ui-module-soft);
}

/* Floating layers */
body[data-ui-generation="3"] :is(.dropdown-menu, .toast) {
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 18%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
  box-shadow: var(--surface-shadow-lg), var(--ui-inner-light);
  backdrop-filter: blur(18px) saturate(145%);
}
body[data-ui-generation="3"] .dropdown-item {
  margin: 2px 5px;
  border-radius: 9px;
}
body[data-ui-generation="3"] .dropdown-item:hover {
  background: var(--ui-module-soft);
  color: var(--text-primary);
}

body[data-ui-generation="3"] :is(.modal-overlay, [id$="Modal"][style*="position:fixed"], [id$="Modal"][style*="position: fixed"]) {
  background: rgba(1, 7, 18, .74) !important;
  backdrop-filter: blur(12px) saturate(120%);
}
body[data-ui-generation="3"] :is(.modal, .modal-overlay > div, [id$="Modal"] > div) {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 23%, var(--border)) !important;
  border-radius: 20px;
  background: var(--bg-card) !important;
  box-shadow: var(--surface-shadow-lg), var(--ui-inner-light);
}
body[data-ui-generation="3"] :is(.modal, .modal-overlay > div, [id$="Modal"] > div)::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  inset-inline: 24px;
  height: 3px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, var(--ui-module-accent), var(--ui-module-accent-2));
}
body[data-ui-generation="3"] :is(.modal-header, .modal-footer) {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-soft) 92%, var(--ui-module-accent) 4%);
}

body[data-ui-generation="3"] :is(.empty-state, .table-empty, .kpi-empty) {
  padding: 34px 22px;
  border: 1px dashed color-mix(in srgb, var(--ui-module-accent) 34%, var(--border));
  border-radius: var(--ui-radius-md);
  background:
    radial-gradient(circle at 50% 0, var(--ui-module-soft), transparent 12rem),
    var(--bg-soft);
}

/* Login and portal surfaces inherit the same expressive language. */
body[data-ui-module="login"] { background: var(--bg-base) !important; }
body[data-ui-module="login"] .login-wrapper {
  background:
    radial-gradient(circle at 80% 0, color-mix(in srgb, var(--ui-module-accent) 16%, transparent), transparent 27rem),
    var(--bg-base);
}
body[data-ui-module="login"] .login-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, .18), transparent 12rem),
    linear-gradient(135deg, color-mix(in srgb, var(--ui-module-accent) 90%, #2938a9), #5a44bd 50%, #087eac) !important;
  overflow: hidden;
}
body[data-ui-module="login"] .login-hero::before {
  z-index: -2;
  background:
    linear-gradient(rgba(4, 10, 30, .45), rgba(4, 10, 30, .62)),
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px) !important;
  background-size: auto, 48px 48px, 48px 48px !important;
}
body[data-ui-module="login"] .login-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: -110px;
  bottom: -160px;
  width: 430px;
  height: 430px;
  border: 65px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, .025);
}
body[data-ui-module="login"] .hero-content { max-width: 560px; }
body[data-ui-module="login"] .login-logo-wrap {
  width: 108px;
  height: 108px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 31px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .07));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(14px);
}
body[data-ui-module="login"] .login-sys-name { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.035em; }
body[data-ui-module="login"] .login-sys-desc { max-width: 520px; margin-inline: auto; color: rgba(255, 255, 255, .82); }
body[data-ui-module="login"] .login-form-side {
  width: min(520px, 46vw);
  border-inline-start: 1px solid color-mix(in srgb, var(--ui-module-accent) 18%, var(--border));
  background:
    radial-gradient(circle at 100% 0, var(--ui-module-soft), transparent 18rem),
    var(--bg-surface);
  box-shadow: -20px 0 60px rgba(0, 7, 25, .22);
}
[dir="ltr"] body[data-ui-module="login"] .login-form-side { box-shadow: 20px 0 60px rgba(0, 7, 25, .22); }
body[data-ui-module="login"] .login-card {
  max-width: 420px;
  padding: 42px 38px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 20%, var(--border));
  border-radius: 26px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ui-module-accent) 7%, transparent), transparent 40%),
    var(--bg-card);
  box-shadow: var(--surface-shadow-lg), var(--ui-inner-light);
}
body[data-ui-module="login"] .admin-badge {
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 30%, transparent);
  border-radius: 99px;
  background: var(--ui-module-soft);
  color: color-mix(in srgb, var(--ui-module-accent) 68%, var(--text-primary));
}
body[data-ui-module="login"] .welcome-text { color: var(--text-primary); font-size: 27px; }
body[data-ui-module="login"] .welcome-sub { color: var(--text-muted); }
body[data-ui-module="login"] .form-input {
  height: 55px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--ui-inner-light);
}
body[data-ui-module="login"] .form-input:focus {
  border-color: var(--ui-module-accent);
  box-shadow: 0 0 0 4px var(--ui-module-soft), 0 12px 24px color-mix(in srgb, var(--ui-module-accent) 10%, transparent);
}
body[data-ui-module="login"] .login-btn {
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 72%, #fff 12%);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--ui-module-accent), color-mix(in srgb, var(--ui-module-accent) 58%, var(--ui-module-accent-2)));
  box-shadow: 0 13px 28px color-mix(in srgb, var(--ui-module-accent) 30%, transparent), var(--ui-inner-light);
}
body[data-ui-module="login"] .lang-btn {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(7, 16, 31, .58);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
}

body[data-ui-module="portal-login"] .login-page {
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--ui-module-accent) 21%, transparent), transparent 20rem),
    radial-gradient(circle at 88% 90%, color-mix(in srgb, var(--ui-module-accent-2) 15%, transparent), transparent 23rem),
    var(--bg-base);
}
body[data-ui-module="portal-login"] .login-bg-grid {
  opacity: .38;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ui-module-accent) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ui-module-accent) 13%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
body[data-ui-module="portal-login"] .login-card {
  position: relative;
  width: min(92vw, 450px);
  padding: 35px;
  border: 1px solid color-mix(in srgb, var(--ui-module-accent) 26%, var(--border));
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, var(--ui-module-soft), transparent 13rem),
    color-mix(in srgb, var(--bg-card) 94%, transparent);
  box-shadow: var(--surface-shadow-lg), var(--ui-inner-light);
  backdrop-filter: blur(22px) saturate(145%);
}
body[data-ui-module="portal-login"] .login-card::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 36px;
  height: 4px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(90deg, var(--ui-module-accent), var(--ui-module-accent-2));
}
body[data-ui-module="portal-login"] .login-logo-icon {
  border-radius: 18px;
  background: linear-gradient(145deg, var(--ui-module-accent), var(--ui-module-accent-2));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ui-module-accent) 30%, transparent);
}
body[data-ui-module="portal-login"] .login-title { font-size: 25px; font-weight: 800; }
body[data-ui-module="portal-login"] .login-form .form-control { min-height: 50px; }

body[data-ui-generation="3"] .portal-container .p-card {
  border-color: color-mix(in srgb, var(--ui-module-accent) 22%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, var(--ui-module-soft), transparent 11rem),
    var(--bg-card);
  box-shadow: var(--surface-shadow), var(--ui-inner-light);
}
body[data-ui-generation="3"] .portal-container .p-card::before {
  background: linear-gradient(90deg, var(--ui-module-accent), var(--ui-module-accent-2), var(--ui-pink));
}

/* Specialized modules keep their authored layouts but inherit the richer shell. */
body[data-ui-module="violations"] :is(.vio-hero, .vio-filter-panel, .vio-stat-card, .vio-record),
body[data-ui-module="payroll"] :is(.pay-hero, .pay-filter-panel, .pay-stat-card, .pay-run-card) {
  box-shadow: var(--surface-shadow), var(--ui-inner-light);
}
body[data-ui-module="violations"] .page-content,
body[data-ui-module="payroll"] .page-content { max-width: 1760px; }

/* Directional and density refinements */
[dir="rtl"] body[data-ui-generation="3"] :is(input, select, textarea, button) { font-family: var(--font-ar); }
[dir="ltr"] body[data-ui-generation="3"] :is(input, select, textarea, button) { font-family: var(--font-sans); }
body[data-ui-generation="3"] .text-muted { color: var(--text-muted) !important; }
body[data-ui-generation="3"] .text-secondary { color: var(--text-secondary) !important; }

/* Entrance is subtle and disabled for reduced-motion users. */
body[data-ui-generation="3"].ui-v3-ready .page-content > * {
  animation: uiV3Enter .38s var(--ui-ease) both;
}
body[data-ui-generation="3"].ui-v3-ready .page-content > *:nth-child(2) { animation-delay: .035s; }
body[data-ui-generation="3"].ui-v3-ready .page-content > *:nth-child(3) { animation-delay: .07s; }
@keyframes uiV3Enter {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tablet */
@media (max-width: 1180px) {
  body[data-ui-generation="3"] .page-content { padding: 24px; }
  body[data-ui-generation="3"] .page-content > .page-header { min-height: 108px; padding: 20px !important; }
  body[data-ui-generation="3"] .page-actions { width: auto; }
}

@media (max-width: 900px) {
  body[data-ui-generation="3"] .page-content { padding: 20px; }
  body[data-ui-generation="3"] .page-content > .page-header { align-items: stretch !important; }
  body[data-ui-generation="3"] .page-actions { width: 100%; }
  body[data-ui-generation="3"] :is(.filter-bar, [class*="-filter-bar"], .filter-panel) > * { min-width: min(210px, 100%); }
}

/* Mobile */
@media (max-width: 768px) {
  body[data-ui-generation="3"] {
    background-image:
      radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ui-module-accent) 14%, transparent), transparent 18rem),
      linear-gradient(var(--bg-base), var(--bg-base));
    background-attachment: scroll;
  }
  body[data-ui-generation="3"]::after { display: none; }

  body[data-ui-generation="3"] .sidebar {
    width: min(88vw, 316px) !important;
    max-width: 316px;
    background:
      radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--ui-module-accent) 21%, transparent), transparent 15rem),
      linear-gradient(180deg, #0b1630 0%, color-mix(in srgb, var(--bg-surface) 92%, #050b18) 100%) !important;
  }
  body[data-ui-generation="3"] .sidebar.mobile-open {
    box-shadow: 0 0 0 100vmax rgba(1, 6, 17, .66), var(--surface-shadow-lg) !important;
  }
  body[data-ui-generation="3"] .sidebar-logo { min-height: 72px; margin: 8px; }
  body[data-ui-generation="3"] .sidebar-nav { padding-inline: 8px; }
  body[data-ui-generation="3"] .nav-group-toggle { min-height: 48px; padding: 7px 9px !important; }
  body[data-ui-generation="3"] .nav-group-items .nav-item { min-height: 43px; font-size: 13px !important; }

  body[data-ui-generation="3"] .topbar {
    min-height: 64px;
    height: 64px;
    padding: max(8px, env(safe-area-inset-top)) 11px 8px;
  }
  body[data-ui-generation="3"] .topbar-toggle { width: 42px !important; height: 42px !important; }
  body[data-ui-generation="3"] .topbar-btn { width: 38px; height: 38px; }
  body[data-ui-generation="3"] .mobile-topbar-title {
    max-width: 31vw;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
  }

  body[data-ui-generation="3"] .page-content {
    width: 100%;
    padding: 14px 11px max(72px, env(safe-area-inset-bottom));
  }
  body[data-ui-generation="3"] .page-content > .page-header {
    min-height: 0;
    margin-bottom: 16px !important;
    padding: 17px 15px !important;
    border-radius: 17px;
  }
  body[data-ui-generation="3"] .page-content > .page-header::before {
    inset-inline-end: -60px;
    top: -90px;
    opacity: .65;
  }
  body[data-ui-generation="3"] .page-content > .page-header::after { inset-inline-start: 15px; width: 96px; }
  body[data-ui-generation="3"] .page-title,
  body[data-ui-generation="3"] .page-header h1,
  body[data-ui-generation="3"] .page-header h2 {
    gap: 9px;
    font-size: 20px;
  }
  body[data-ui-generation="3"] .page-title:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="3"] .page-header h1:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="3"] .page-header h2:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="3"] .ui-title-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
    font-size: 18px;
  }
  body[data-ui-generation="3"] .page-subtitle,
  body[data-ui-generation="3"] .page-header p { margin-top: 5px; font-size: 11px; }
  body[data-ui-generation="3"] .page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  body[data-ui-generation="3"] .page-actions .btn { width: 100%; min-height: 44px; padding-inline: 9px; }

  body[data-ui-generation="3"] :is(.card, .section-card, .profile-card, .filter-panel) { border-radius: 14px; }
  body[data-ui-generation="3"] .card-header { min-height: 57px; padding: 13px 14px; border-radius: 14px 14px 0 0; }
  body[data-ui-generation="3"] .card-header::after { inset-inline-start: 14px; }
  body[data-ui-generation="3"] .card-body { padding: 14px; }
  body[data-ui-generation="3"] .card-footer { padding: 12px 14px; }

  body[data-ui-generation="3"] :is(.filter-bar, [class*="-filter-bar"], .filter-panel) {
    padding: 13px !important;
    border-radius: 14px;
  }
  body[data-ui-generation="3"] :is(.filter-bar, [class*="-filter-bar"], .filter-panel) > * { min-width: 0; }

  body[data-ui-generation="3"] .btn { min-height: 43px; border-radius: 11px; }
  body[data-ui-generation="3"] .btn-sm { min-height: 37px; }
  body[data-ui-generation="3"] :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 46px; }

  body[data-ui-generation="3"] :is(.table-wrapper, .table-responsive) { border-radius: 13px; }
  body[data-ui-generation="3"] :is(.table, table.table) thead th,
  body[data-ui-generation="3"] :is(.table, table.table) tbody td { padding: 12px 13px; }

  body[data-ui-generation="3"] :is(.modal, .modal-overlay > div, [id$="Modal"] > div) { border-radius: 20px 20px 0 0 !important; }

  body[data-ui-module="login"] { overflow: auto; }
  body[data-ui-module="login"] .login-wrapper { min-height: 100dvh; }
  body[data-ui-module="login"] .login-hero { min-height: 100dvh; padding: 28px 18px 300px; }
  body[data-ui-module="login"] .login-hero::after { width: 280px; height: 280px; bottom: -130px; }
  body[data-ui-module="login"] .login-form-side {
    width: 100%;
    bottom: max(18px, env(safe-area-inset-bottom));
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-ui-module="login"] .login-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 27px 22px 20px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
  }
  body[data-ui-module="login"] .login-logo-wrap { width: 70px; height: 70px; border-radius: 20px; }
  body[data-ui-module="login"] .login-sys-name { font-size: 23px; }
  body[data-ui-module="login"] .login-sys-desc { font-size: 12px; }
  body[data-ui-module="login"] .welcome-text { font-size: 20px; }
  body[data-ui-module="portal-login"] .login-card { width: calc(100vw - 24px); padding: 27px 20px; border-radius: 22px; }
}

@media (max-width: 520px) {
  body[data-ui-generation="3"] .page-actions { grid-template-columns: 1fr; }
  body[data-ui-generation="3"] .page-title,
  body[data-ui-generation="3"] .page-header h1,
  body[data-ui-generation="3"] .page-header h2 { font-size: 18px; }
  body[data-ui-generation="3"] .topbar-actions { gap: 3px; }
  body[data-ui-generation="3"] .lang-toggle { padding-inline: 8px; }
}

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

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