:root {
  color-scheme: light;
  --font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --surface-soft: #F8FAFC;
  --surface-hover: #F0F5F2;
  --sidebar: #243247;
  --sidebar-hover: #30435A;
  --sidebar-active: #18794E;
  --primary: #18794E;
  --primary-hover: #12613E;
  --primary-strong: #12613E;
  --primary-soft: #EAF4EE;
  --text: #253244;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --muted: var(--text-secondary);
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --success: #257355;
  --success-bg: #e7f4ed;
  --warning: #94600c;
  --warning-bg: #fff3da;
  --danger: #a43e3a;
  --danger-bg: #fceceb;
  --info: #28688f;
  --info-bg: #e8f3f9;
  --shadow-sm: 0 1px 3px rgba(36,50,71,.06), 0 5px 16px rgba(36,50,71,.05);
  --shadow-md: 0 18px 46px rgba(36,50,71, .16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --sidebar-width: 260px;
  --sidebar-compact: 76px;
  --control-height: 40px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, summary, select { cursor: pointer; }
a { color: var(--primary); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid rgba(36,50,71, .24);
  outline-offset: 2px;
}
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-grid; place-items: center; line-height: 0; }
.ui-icon svg, .icon-button svg, .sidebar-collapse svg, .global-search svg, .notification-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); transition: grid-template-columns .2s ease; }
body.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-compact) minmax(0, 1fr); }
.sidebar { height: 100vh; position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; background: var(--sidebar); color: #FFFFFF; overflow: hidden; box-shadow: 6px 0 24px rgba(36,50,71,.08); }
.sidebar-header { min-height: 146px; position: relative; display: flex; align-items: stretch; justify-content: center; padding: 10px 9px 11px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #FFFFFF; text-align: center; text-decoration: none; }
.brand-mark { width: 82px; height: 82px; flex: 0 0 auto; display: grid; place-items: center; background: transparent; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.brand-copy { min-width: 0; width: 100%; padding-inline: 2px; }
.brand-copy strong, .brand-copy small { display: block; overflow-wrap: anywhere; }
.brand-copy strong { color: #fff; font-size: 12.25px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; overflow-wrap: normal; }
.brand-copy small { margin-top: 4px; color: #FFFFFF; font-size: 10.25px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; }
.sidebar-collapse { width: 28px; height: 28px; position: absolute; z-index: 2; top: 7px; right: 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; display: grid; place-items: center; background: rgba(36,50,71,.82); color: #FFFFFF; }
.sidebar-collapse svg { width: 16px; height: 16px; }
.sidebar-collapse:hover { background: var(--sidebar-hover); color: white; }
body.sidebar-collapsed .sidebar-collapse { transform: rotate(180deg); }
body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .sidebar-footer-copy, body.sidebar-collapsed .sidebar-build-info, body.sidebar-collapsed nav button b { display: none; }
body.sidebar-collapsed .sidebar-header { min-height: 82px; padding: 13px 16px; }
body.sidebar-collapsed .brand { width: 44px; }
body.sidebar-collapsed .brand-mark { width: 44px; height: 44px; overflow: hidden; }
body.sidebar-collapsed .brand-mark img { object-fit: contain; object-position: center; }
body.sidebar-collapsed .sidebar-collapse { left: 59px; right: auto; top: 53px; background: var(--sidebar); }
body.sidebar-collapsed nav button { grid-template-columns: 1fr; justify-items: center; padding-inline: 8px; }
body.sidebar-collapsed .sidebar-footer { justify-content: center; }

nav { flex: 1; overflow-y: auto; padding: 15px var(--space-2) var(--space-3); scrollbar-width: thin; }
.nav-group-label { display: block; padding: 11px 10px 5px; color: #FFFFFF; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
nav button { width: 100%; min-height: 46px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 10px; padding: 9px 11px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; background: transparent; color: #FFFFFF; text-align: left; font-weight: 560; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
nav button:hover { border-color: rgba(255,255,255,.08); background: var(--sidebar-hover); color: #fff; transform: translateX(2px); }
nav button.active { border-color: rgba(36,50,71,.22); background: var(--sidebar-active); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 #18794E; }
.nav-glyph { width: 24px; height: 24px; display: grid; place-items: center; }
.nav-glyph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
nav button[data-page="dashboard"] { min-height: 50px; grid-template-columns: 28px minmax(0,1fr); gap: 10px; padding: 11px 12px; cursor: pointer; }
nav button[data-page="dashboard"] .nav-glyph { width: 26px; height: 26px; color: #FFFFFF; transition: color .18s ease, transform .18s ease; }
nav button[data-page="dashboard"] .nav-glyph svg { width: 22px; height: 22px; stroke-width: 1.75; }
nav button[data-page="dashboard"] .nav-label { font-size: 14px; line-height: 1.25; transition: color .18s ease, font-weight .18s ease; }
nav button[data-page="dashboard"]:hover { border-color: rgba(36,50,71,.28); background: color-mix(in srgb,var(--sidebar-hover) 82%,#475569); }
nav button[data-page="dashboard"]:hover .nav-glyph { color: #FFFFFF; transform: scale(1.04); }
nav button[data-page="dashboard"].active { border-color: rgba(36,50,71,.36); background: var(--sidebar-active); color: #fff; font-weight: 650; box-shadow: inset 3px 0 0 #18794E, 0 4px 12px rgba(36,50,71,.12); }
nav button[data-page="dashboard"].active .nav-glyph { color: #FFFFFF; }
nav button b { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: #b45049; color: #fff; font-size: 10px; }
.sidebar-footer { margin: 0 var(--space-3) var(--space-3); padding: 0 7px 2px; display: grid; gap: 8px; border: 0; }
.sidebar-connection { min-width:0; display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:9px 10px; background:rgba(255,255,255,.025); }
.connection-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #63b78f; box-shadow: 0 0 0 3px rgba(99,183,143,.13); }
.sidebar-footer strong, .sidebar-footer small { display: block; white-space: nowrap; }
.sidebar-footer strong { color: #FFFFFF; font-size: 11px; }
.sidebar-footer small { color: #FFFFFF; font-size: 10px; margin-top: 2px; }
.sidebar-build-info { padding:1px 4px 0; text-align:center; }
.sidebar-build-info strong { color:#9fd4b8; font-size:9px; font-weight:650; letter-spacing:.025em; }
.sidebar-build-info small { margin-top:3px; color:#aab7c7; font-size:8.5px; font-weight:500; letter-spacing:.035em; }
body.sidebar-collapsed .sidebar-footer { padding-inline:4px; }
body.sidebar-collapsed .sidebar-connection { justify-content:center; padding:9px; }

.main-shell { min-width: 0; overflow-x: clip; }
.topbar { min-height: 88px; position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: 14px clamp(18px,2vw,32px); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(36,50,71,.02); }
.title-area { min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.title-area h1 { margin: 2px 0 0; font-size: clamp(23px, 2vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.title-area > div > p:last-child { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.breadcrumb { margin: 0; display: flex; gap: 6px; color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
.breadcrumb span:last-child { color: var(--primary); }
.mobile-menu { display: none !important; }
.top-actions { display: flex; align-items: center; gap: var(--space-2); }
.global-search { height: var(--control-height); width: min(270px, 23vw); position: relative; display: flex; align-items: center; }
.global-search > span[aria-hidden] { width: 17px; height: 17px; position: absolute; left: 12px; color: var(--text-tertiary); }
.global-search input { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 56px 0 36px; background: var(--surface-soft); color: var(--text); }
.global-search input:focus { background: var(--surface); border-color: #64748B; }
.global-search kbd { position: absolute; right: 8px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 5px; background: white; color: var(--text-tertiary); font: 10px var(--font); }
.icon-button { width: var(--control-height); height: var(--control-height); border: 1px solid var(--border); border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface); color: var(--text-secondary); transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.icon-button:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--primary); }
.icon-button svg { width: 19px; height: 19px; }
.notification-button { position: relative; }
.notification-button > span { width: 19px; height: 19px; color: var(--primary); }
.notification-button b { min-width: 18px; height: 18px; padding: 0 4px; position: absolute; right: -5px; top: -6px; border: 2px solid white; border-radius: 999px; display: grid; place-items: center; background: var(--danger); color: white; font-size: 9px; }
.profile-menu { position: relative; }
.profile-menu summary { min-width: 172px; height: 44px; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; background: var(--surface); }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu summary:hover { background: var(--surface-hover); }
.profile-chevron { width: 15px; height: 15px; display: grid; place-items: center; color: var(--text-tertiary); transition: transform .18s ease; }
.profile-chevron svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-menu[open] .profile-chevron { transform: rotate(180deg); }
.user-avatar { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 750; }
.user-copy strong, .user-copy small { display: block; }
.user-copy strong { font-size: 12px; }
.user-copy small { color: var(--text-secondary); font-size: 10px; }
.profile-popover { width: 240px; position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-md); }
.profile-popover > div { padding: 3px 3px 11px; border-bottom: 1px solid var(--border); }
.profile-popover strong, .profile-popover small { display: block; }
.profile-popover small { margin-top: 2px; color: var(--text-secondary); font-size: 11px; }
.profile-popover label { margin: 11px 0; display: grid; gap: 5px; color: var(--text-secondary); font-size: 11px; }
.profile-popover select { height: 36px; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; color: var(--text); background: white; }
.profile-popover button { width: 100%; border: 0; border-radius: 7px; padding: 8px; background: var(--surface-soft); color: var(--text); text-align: left; }
.profile-popover .role-picker { display: grid; gap: 6px; padding: 12px 0; }
.role-picker > span { color: var(--text-secondary); font-size: 11px; }
.profile-popover .role-picker button { min-height: 38px; border: 1px solid var(--border); cursor: pointer; }
.profile-popover .role-picker button[aria-pressed="true"] { background: #e7f3ee; border-color: #257858; color: #19583f; font-weight: 700; }
.profile-popover .role-picker button[aria-pressed="true"]::after { content: ' ✓'; float: right; }

.content { width: 100%; min-width: 0; max-width: 1680px; margin: 0 auto; padding: clamp(18px,2vw,32px); }
.page-toolbar { min-height: 40px; margin-bottom: var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.page-toolbar p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.module-action-toolbar { justify-content: flex-end; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.module-tabs { margin-bottom: var(--space-4); padding: 4px; display: inline-flex; flex-wrap: wrap; gap: 3px; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb, #64748B 7%, #FFFFFF); }
.module-tabs button { min-height: 44px; border: 1px solid transparent; border-radius: 8px; padding: 9px 14px; display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.module-tabs button:hover { color: var(--primary-strong); background: rgba(255,255,255,.68); }
.module-tabs button.active { border-color: var(--primary); background: var(--primary); color: #FFFFFF; box-shadow: 0 2px 8px rgba(36,50,71,.08); }
.module-tabs button b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 10px; }
.module-tabs button .ui-icon { width: 17px; height: 17px; color: currentColor; }
.training-development-tabs { width: min(100%,680px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.training-development-tabs button { min-height: 50px; justify-content: center; padding-inline: 18px; font-size: 13px; }
.training-development-tabs button .ui-icon { width: 19px; height: 19px; }
.training-module-header { min-height: 68px; }
.monitoring-module-header { min-height: 58px; margin: 0 0 var(--space-4); padding: 0 2px var(--space-4); border-bottom: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.monitoring-module-header h2 { margin: 2px 0 0; color: var(--text); font-size: 20px; line-height: 1.25; font-weight: 720; letter-spacing: -.015em; }
.monitoring-module-header p { max-width: 720px; margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.monitoring-module-eyebrow { color: var(--primary); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.hr-monitoring-tabs { width: 100%; margin-bottom: var(--space-5); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-3); }
.hr-monitoring-tabs button {
  --tab-accent: var(--primary);
  --tab-soft: var(--primary-soft);
  --tab-border: color-mix(in srgb, #64748B 22%, #FFFFFF);
  position: relative; isolation: isolate; min-width: 0; min-height: 92px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 14px;
  background: var(--surface); color: var(--text-secondary); box-shadow: var(--shadow-sm);
  text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.hr-monitoring-tabs button[data-monitoring-kind="absences"] { --tab-accent: #475569; --tab-soft: color-mix(in srgb, #64748B 6%, #FFFFFF); --tab-border: color-mix(in srgb, #64748B 26%, #FFFFFF); }
.hr-monitoring-tabs button[data-monitoring-kind="ecc-sick"] { --tab-accent: #28765f; --tab-soft: color-mix(in srgb, #64748B 7%, #FFFFFF); --tab-border: #abd2c3; }
.hr-monitoring-tabs button[data-monitoring-kind="violations"] { --tab-accent: #9b6416; --tab-soft: #fff4e2; --tab-border: #e2c58d; }
.hr-monitoring-tabs button[data-monitoring-kind="qualifications"] { --tab-accent: #64748B; --tab-soft: color-mix(in srgb, #64748B 5%, #FFFFFF); --tab-border: color-mix(in srgb, #64748B 20%, #FFFFFF); }
.hr-monitoring-tabs button::before { content: ''; position: absolute; inset: auto 12px 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .18s ease; }
.hr-monitoring-tabs button:hover { border-color: var(--tab-border); color: var(--text); background: color-mix(in srgb,var(--tab-soft) 34%,white); box-shadow: 0 8px 20px rgba(36,50,71,.08); transform: translateY(-1px); }
.hr-monitoring-tabs button:focus-visible { outline: 3px solid color-mix(in srgb,var(--tab-accent) 26%,transparent); outline-offset: 2px; }
.hr-monitoring-tabs button.active { border-color: var(--tab-border); color: var(--tab-accent); background: color-mix(in srgb,var(--tab-soft) 58%,white); box-shadow: 0 9px 24px rgba(36,50,71,.1); }
.hr-monitoring-tabs button.active::before { background: var(--tab-accent); }
.hr-monitoring-tab-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--tab-soft); color: color-mix(in srgb,var(--tab-accent) 78%,var(--text-secondary)); transition: background .18s ease, color .18s ease, transform .18s ease; }
.hr-monitoring-tabs button:hover .hr-monitoring-tab-icon,
.hr-monitoring-tabs button.active .hr-monitoring-tab-icon { background: var(--tab-soft); color: var(--tab-accent); }
.hr-monitoring-tabs button.active .hr-monitoring-tab-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--tab-accent) 16%,transparent); transform: scale(1.03); }
.hr-monitoring-tab-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hr-monitoring-tab-copy { min-width: 0; display: grid; gap: 4px; }
.hr-monitoring-tab-copy strong { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.25; white-space: normal; }
.hr-monitoring-tab-copy small { overflow: hidden; color: var(--text-tertiary); font-size: 12px; font-weight: 560; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.hr-monitoring-tabs button.active .hr-monitoring-tab-copy strong { color: var(--tab-accent); }
.hr-monitoring-tabs button.active .hr-monitoring-tab-copy small { color: color-mix(in srgb,var(--tab-accent) 72%,var(--text-secondary)); }
.hr-monitoring-tab-count { min-width: 38px; display: grid; justify-items: center; gap: 3px; }
.hr-monitoring-tab-count b { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, #64748B 6%, #FFFFFF); color: var(--text-secondary); font-size: 12px; font-weight: 750; }
.hr-monitoring-tab-count small { color: var(--text-tertiary); font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hr-monitoring-tabs button.active .hr-monitoring-tab-count b { background: var(--tab-accent); color: white; box-shadow: 0 3px 8px color-mix(in srgb,var(--tab-accent) 24%,transparent); }
.hr-monitoring-tabs button.active .hr-monitoring-tab-count small { color: var(--tab-accent); }
.monitoring-rules { margin: 0 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.monitoring-rules summary { min-height: 46px; padding: 9px 12px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; color: var(--text-secondary); cursor: pointer; list-style: none; transition: background .18s ease, color .18s ease; }
.monitoring-rules summary::-webkit-details-marker { display: none; }
.monitoring-rules summary:hover { background: var(--surface-hover); color: var(--primary); }
.monitoring-rules summary:focus-visible { outline: 3px solid rgba(36,50,71,.22); outline-offset: 2px; border-radius: var(--radius-md); }
.monitoring-rules summary > span { min-width: 0; display: grid; gap: 1px; }
.monitoring-rules summary strong { color: var(--text); font-size: 12px; font-weight: 700; }
.monitoring-rules summary small { color: var(--text-tertiary); font-size: 10px; }
.monitoring-rules summary > b { font-size: 15px; transition: transform .18s ease; }
.monitoring-rules[open] summary > b { transform: rotate(180deg); }
.monitoring-rules-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.monitoring-rules-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.monitoring-rules-body { border-top: 1px solid var(--border); padding: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-3); background: var(--surface-soft); }
.monitoring-rules-body > div { min-width: 0; display: grid; align-content: start; gap: 4px; }
.monitoring-rules-body strong { color: var(--text); font-size: 11px; }
.monitoring-rules-body span { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.module-content { min-width: 0; }
.task-workspace-head { margin-bottom: var(--space-4); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-3); }
.task-workspace-head > div { display: grid; gap: 5px; }
.task-workspace-head > div > span { color: var(--text-tertiary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.task-workspace-head .module-tabs { margin-bottom: 0; }
.task-category { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.task-category.sick { background: #e4f2f7; color: #25627b; }
.task-category.leave { background: #e8f3e9; color: #397044; }
.task-category.violations { background: #fff0df; color: #92591d; }
.task-category.appraisals { background: #eee9f8; color: #65518e; }
.task-category.relieving { background: #e8eefb; color: #405f99; }
.alert-item > .task-category { align-self: start; }
.button { min-height: 40px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px; line-height: 1.2; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { background: var(--primary); color: white; box-shadow: 0 4px 10px rgba(36,50,71,.16); }
.button.primary:hover { background: var(--primary-hover); box-shadow: 0 6px 14px rgba(36,50,71,.22); }
.button.secondary { border-color: var(--border-strong); background: white; color: var(--text); }
.button.secondary:hover { border-color: #64748B; background: var(--surface-hover); color: var(--primary-strong); }
.button.ghost { background: transparent; color: var(--primary); }
.button.ghost:hover { background: var(--primary-soft); }
.button.danger { border-color: #efc5c2; background: var(--danger-bg); color: var(--danger); }
.button.danger:hover { border-color: #dfa19e; background: #f9dedc; }
.button.small { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.button.small .ui-icon { width: 16px; height: 16px; }
.button-plus-sign { min-width: 18px; display: inline-grid; place-items: center; font-size: 21px; font-weight: 700; line-height: 1; }
.recruitment-section-head .button .button-plus-sign { color: currentColor; font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; }
.button:disabled { opacity: .48; cursor: not-allowed; }
.button .spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
.summary-card { width: 100%; height: 100%; min-height: 136px; position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; color: var(--text); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
button.summary-card { width: 100%; }
.summary-card:hover { border-color: color-mix(in srgb, #64748B 29%, #FFFFFF); background: #FFFFFF; box-shadow: 0 10px 24px rgba(36,50,71,.09); transform: translateY(-2px); }
.summary-top { display: flex; justify-content: space-between; align-items: start; gap: var(--space-2); }
.summary-label { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.summary-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.summary-icon .ui-icon { width: 19px; height: 19px; }
.summary-card strong { display: block; font-size: 27px; line-height: 1; letter-spacing: -.03em; }
.summary-card small { margin-top: 6px; display: block; color: var(--text-tertiary); font-size: 11px; }
.summary-card.warning .summary-icon { background: var(--warning-bg); color: var(--warning); }
.summary-card.danger .summary-icon { background: var(--danger-bg); color: var(--danger); }
.summary-card.unavailable strong { color: var(--text-tertiary); }

.operations-strip { margin-bottom: var(--space-5); display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.operation-item { padding: 13px var(--space-4); border: 0; border-right: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--surface); color: var(--text); font: inherit; text-align: left; }
.operation-item:is(button) { cursor: pointer; }
.operation-item:is(button):hover { background: var(--surface-hover); }
.operation-item.attention { background: #FFFFFF; }
.operation-item.attention strong { color: var(--warning); }
.operation-item:last-child { border-right: 0; }
.operation-item span { color: var(--text-secondary); font-size: 12px; }
.operation-item strong { font-size: 18px; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .85fr); gap: var(--space-4); }
.dashboard-stack { display: grid; gap: var(--space-4); align-content: start; }
.dashboard-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 1fr; gap: var(--space-4); }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel + .panel { margin-top: var(--space-4); }
.dashboard-stack .panel + .panel, .dashboard-two .panel + .panel { margin-top: 0; }
.panel-header { min-height: 58px; padding: 13px var(--space-4); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.panel-header h2 { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 680; }
.panel-header p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; }
.panel-header > span, .record-count { color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.panel-body { padding: var(--space-4); }
.compact-list { list-style: none; padding: 0; margin: 0; }
.compact-list li { min-height: 62px; padding: 11px var(--space-4); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.compact-list li:last-child { border-bottom: 0; }
.list-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.compact-list strong, .compact-list small { display: block; }
.compact-list strong { font-size: 12px; }
.compact-list small { margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
.quick-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); padding: var(--space-3); }
.quick-action { min-height: 68px; border: 1px solid var(--border); border-radius: 10px; padding: 11px; display: flex; align-items: center; gap: 10px; background: white; color: var(--text); text-align: left; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.quick-action:hover { background: #FFFFFF; border-color: color-mix(in srgb, #64748B 29%, #FFFFFF); box-shadow: 0 7px 16px rgba(36,50,71,.07); transform: translateY(-1px); }
.quick-action span:first-child { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.quick-action span:first-child .ui-icon { width: 17px; height: 17px; }
.quick-action strong { display: block; font-size: 11px; }
.quick-action small { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 9px; }
.bar-list { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(90px,1fr) 2fr 28px; align-items: center; gap: 10px; font-size: 11px; }
.bar-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row progress { width: 100%; height: 7px; border: 0; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, #64748B 6%, #FFFFFF); accent-color: var(--primary); }
.bar-row progress::-webkit-progress-bar { background: color-mix(in srgb, #64748B 6%, #FFFFFF); border-radius: 99px; }
.bar-row progress::-webkit-progress-value { background: var(--primary); border-radius: 99px; }
.bar-row progress::-moz-progress-bar { background: var(--primary); border-radius: 99px; }
.bar-row strong { text-align: right; }

/* Enterprise dashboard analytics */
.dashboard-control-bar { min-height: 90px; margin-bottom: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: grid; grid-template-columns: minmax(220px,1fr) auto auto; align-items: center; gap: var(--space-4); background: var(--surface); box-shadow: var(--shadow-sm); }
.dashboard-control-heading { min-width: 220px; display: grid; gap: 2px; }
.dashboard-control-heading strong { font-size: 22px; line-height: 1.2; font-weight: 760; letter-spacing: -.02em; }
.dashboard-control-heading small { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.dashboard-control-date { min-height: 54px; border-left: 1px solid var(--border); padding-left: var(--space-4); display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; align-content: center; column-gap: 9px; }
.dashboard-control-date > span { width: 30px; height: 30px; grid-row: 1 / 3; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.dashboard-control-date .ui-icon { width: 16px; height: 16px; }
.dashboard-control-date small { color: var(--text-tertiary); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-control-date strong { font-size: 11px; white-space: nowrap; }
.dashboard-eyebrow { color: var(--primary); font-size: 9px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-filters { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: var(--space-2); }
.dashboard-filters label { min-width: 148px; display: grid; gap: 4px; color: var(--text-secondary); font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.dashboard-filters select { height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 30px 0 10px; background: white; color: var(--text); font-size: 12px; font-weight: 560; text-transform: none; }
.dashboard-control-actions { display: flex; gap: var(--space-2); }
.dashboard-control-actions .button { min-height: 40px; white-space: nowrap; }
.dashboard-kpi-grid { margin-bottom: var(--space-4); display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--space-3); }
.dashboard-kpi { min-width: 0; min-height: 116px; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; background: var(--surface); color: var(--text); text-align: left; box-shadow: var(--shadow-sm); transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.dashboard-kpi::before { content: ''; width: 42px; height: 3px; position: absolute; top: 0; left: 14px; border-radius: 0 0 999px 999px; background: var(--primary); opacity: .8; }
.dashboard-kpi:hover { border-color: color-mix(in srgb, #64748B 29%, #FFFFFF); background: #FFFFFF; box-shadow: 0 10px 24px rgba(36,50,71,.09); transform: translateY(-2px); }
.dashboard-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.dashboard-kpi-head i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-style: normal; }
.dashboard-kpi-head .ui-icon { width: 17px; height: 17px; }
.dashboard-kpi > strong { align-self: end; font-size: 29px; line-height: 1; letter-spacing: -.035em; }
.dashboard-kpi > small { color: var(--text-tertiary); font-size: 10px; }
.dashboard-kpi.success .dashboard-kpi-head i { background: var(--success-bg); color: var(--success); }
.dashboard-kpi.success::before { background: var(--success); }
.dashboard-kpi.warning { border-color: #ead7ad; }
.dashboard-kpi.warning .dashboard-kpi-head i { background: var(--warning-bg); color: var(--warning); }
.dashboard-kpi.warning::before { background: var(--warning); }
.dashboard-kpi.danger { border-color: #e9c1be; }
.dashboard-kpi.danger .dashboard-kpi-head i { background: var(--danger-bg); color: var(--danger); }
.dashboard-kpi.danger > strong { color: var(--danger); }
.dashboard-kpi.danger::before { background: var(--danger); }
.dashboard-kpi.neutral .dashboard-kpi-head i { background: color-mix(in srgb, #64748B 6%, #FFFFFF); color: #64748B; }
.dashboard-analytics-grid { margin-bottom: var(--space-4); display: grid; gap: var(--space-4); align-items: stretch; }
.dashboard-analytics-grid > .panel,.dashboard-analytics-grid > .dashboard-suspension-monitor,.dashboard-analytics-grid .dashboard-suspension-monitor > .panel { min-width: 0; height: 100%; margin: 0; }
.dashboard-analytics-grid.primary-row { grid-template-columns: minmax(0,1.65fr) minmax(310px,.75fr); }
.dashboard-analytics-grid.secondary-row { grid-template-columns: minmax(0,1.35fr) minmax(330px,.85fr); }
.dashboard-analytics-grid.equal-row,.dashboard-analytics-grid.attention-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-analytics-grid.single-row { grid-template-columns: minmax(0,1fr); }
.dashboard-analytics-grid.dashboard-hero-row { grid-template-columns: minmax(0,1.45fr) minmax(390px,1fr); }
.dashboard-analytics-grid.dashboard-insight-row { grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); }
.dashboard-analytics-grid.dashboard-trend-row { grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); }
.dashboard-analytics-grid.dashboard-training-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-chart-body { min-height: 270px; padding: 14px 16px 12px; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 8px; }
.headcount-chart { width: 100%; min-height: 215px; overflow: visible; }
.chart-grid-line { stroke: color-mix(in srgb, #64748B 10%, #FFFFFF); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-area { fill: rgba(36,50,71,.1); }
.chart-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-point circle { fill: white; stroke: var(--primary); stroke-width: 3; transition: r .18s ease,fill .18s ease; }
.chart-point:hover circle,.chart-point:focus circle { r: 6.5px; fill: var(--primary-soft); }
.chart-point text { fill: var(--text-tertiary); font-size: 10px; }
.violation-monthly-count-chart { --chart-min-width: 720px; --chart-text-size: 9px; }
.violation-monthly-count-chart .chart-line { stroke-width: 1.5; }
.violation-monthly-count-chart .chart-point circle { r: 3px; stroke-width: 1.5; }
.violation-monthly-count-chart .chart-point:hover circle,
.violation-monthly-count-chart .chart-point:focus circle { r: 4px; }
.violation-monthly-count-chart .hr-chart-axis { font-size: 8px; }
.violation-monthly-count-chart .violation-chart-value { fill: var(--primary); font-size: 7px; font-weight: 700; }
.violation-monthly-count-chart .chart-point.future .violation-chart-value { fill: var(--text-tertiary); }
.violation-monthly-count-chart .chart-legend,
.violation-monthly-count-chart .chart-legend strong,
.violation-monthly-count-chart .chart-legend small { font-size: 10px; line-height: 1.35; }
.violation-monthly-count-chart .chart-legend small { margin-left: auto; color: var(--text-tertiary); }
.chart-legend { min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend strong { margin-left: auto; color: var(--text); font-size: 11px; }
.legend-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.legend-swatch.primary { background: var(--primary); }
.legend-swatch.success { background: var(--success); }
.legend-swatch.danger { background: var(--danger); }
.donut-layout { min-height: 270px; padding: 22px 18px; display: grid; grid-template-columns: minmax(130px,.8fr) minmax(150px,1fr); align-items: center; gap: 20px; }
.donut-chart { width: min(168px,100%); aspect-ratio: 1; margin: auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--donut)); box-shadow: inset 0 0 0 1px rgba(36,50,71,.05); }
.donut-chart::before { content: ''; width: 61%; height: 61%; border-radius: 50%; grid-area: 1/1; background: white; box-shadow: 0 0 0 1px var(--border); }
.donut-chart > div { z-index: 1; grid-area: 1/1; text-align: center; }
.donut-chart strong,.donut-chart span { display: block; }
.donut-chart strong { font-size: 27px; line-height: 1; }
.donut-chart span { margin-top: 4px; color: var(--text-tertiary); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.donut-legend { display: grid; gap: 5px; }
.donut-legend button { min-height: 34px; border: 0; border-radius: 8px; padding: 6px 7px; display: grid; grid-template-columns: 9px minmax(0,1fr) auto auto; align-items: center; gap: 7px; background: transparent; color: var(--text); text-align: left; }
.donut-legend button:hover { background: var(--surface-hover); }
.donut-legend i { width: 9px; height: 9px; border-radius: 3px; }
.donut-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.donut-legend strong { font-size: 11px; }
.donut-legend small { color: var(--text-tertiary); font-size: 9px; }
.department-chart { display: grid; gap: 11px; }
.department-chart button { min-height: 31px; border: 0; border-radius: 7px; padding: 4px 6px; display: grid; grid-template-columns: minmax(105px,1fr) minmax(120px,2.1fr) 32px; align-items: center; gap: 10px; background: transparent; color: var(--text); text-align: left; }
.department-chart button:hover { background: var(--surface-hover); }
.department-chart button > span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.department-chart button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.department-chart button small { color: var(--text-tertiary); font-size: 9px; }
.department-chart button > i { height: 9px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, #64748B 6%, #FFFFFF); }
.department-chart button > i > b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#64748B,#64748B); }
.department-chart button em { color: var(--text-secondary); font-size: 11px; font-style: normal; font-weight: 750; text-align: right; }
.action-status-chart { min-height: 250px; display: grid; align-content: center; gap: 24px; }
.action-status-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-secondary); font-size: 10px; }
.action-status-summary > span strong { margin-right: 3px; color: var(--danger); font-size: 16px; }
.action-status-summary > button { min-height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: white; color: var(--text-secondary); font-size: 10px; cursor: pointer; }
.action-status-summary > button:hover,.action-status-summary > button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.action-status-track { height: 26px; overflow: hidden; border-radius: 999px; display: flex; background: color-mix(in srgb, #64748B 6%, #FFFFFF); box-shadow: inset 0 0 0 1px rgba(36,50,71,.05); }
.action-status-track button { min-width: 8px; height: 100%; border: 0; transition: filter .18s ease; }
.action-status-track button:hover { filter: brightness(.9); }
.action-status-track .completed,.action-status-legend i.completed { background: var(--success); }
.action-status-track .pending,.action-status-legend i.pending { background: #8a9aa6; }
.action-status-track .soon,.action-status-legend i.soon { background: #d3972e; }
.action-status-track .overdue,.action-status-legend i.overdue { background: var(--danger); }
.action-status-track .today,.action-status-legend i.today { background: #e37a25; }
.action-status-track .upcoming,.action-status-legend i.upcoming { background: #6f8798; }
.action-status-track button.active { box-shadow: inset 0 0 0 3px rgba(255,255,255,.72); }
.action-status-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.action-status-legend button { min-height: 44px; border: 1px solid var(--border); border-radius: 9px; padding: 8px; display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 8px; background: white; color: var(--text); text-align: left; }
.action-status-legend button:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.action-status-legend button.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(36,50,71,.07); }
.action-status-legend i { width: 9px; height: 9px; border-radius: 3px; }
.action-status-legend span { font-size: 10px; }
.action-status-legend strong { font-size: 14px; }
.movement-chart { min-height: 215px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(28px,1fr); align-items: end; gap: 8px; border-bottom: 1px solid var(--border); }
.movement-column { height: 100%; display: grid; grid-template-rows: 1fr 24px; align-items: end; gap: 6px; }
.movement-bars { height: 100%; display: flex; align-items: end; justify-content: center; gap: 3px; }
.movement-bars span { width: min(16px,42%); min-height: 4px; border-radius: 4px 4px 1px 1px; transition: filter .18s ease; }
.movement-bars span:hover { filter: brightness(.88); }
.movement-bars .hire { background: var(--success); }
.movement-bars .separation { background: var(--danger); }
.movement-column small { color: var(--text-tertiary); font-size: 9px; text-align: center; }
.appraisal-monitor { min-height: 250px; display: grid; grid-template-columns: minmax(140px,.7fr) minmax(170px,1fr); align-items: center; gap: 22px; }
.appraisal-progress { --value: 0%; width: min(160px,100%); aspect-ratio: 1; margin: auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--success) var(--value),color-mix(in srgb, #64748B 8%, #FFFFFF) 0); }
.appraisal-progress::before { content: ''; width: 65%; height: 65%; grid-area: 1/1; border-radius: 50%; background: white; }
.appraisal-progress strong,.appraisal-progress small { z-index: 1; grid-area: 1/1; }
.appraisal-progress strong { align-self: center; margin-top: -12px; font-size: 24px; }
.appraisal-progress small { align-self: center; margin-top: 24px; color: var(--text-tertiary); font-size: 9px; text-transform: uppercase; }
.appraisal-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.appraisal-metrics button { min-height: 62px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; display: flex; flex-direction: column; justify-content: space-between; background: white; color: var(--text); text-align: left; }
.appraisal-metrics button:hover { background: var(--surface-hover); }
.appraisal-metrics span { color: var(--text-secondary); font-size: 9px; }
.appraisal-metrics strong { font-size: 18px; }
.appraisal-metrics button.overdue { border-color: #e9c1be; background: #fff9f8; }
.appraisal-metrics button.soon { border-color: #ead7ad; background: #fffcf5; }
.dashboard-module-section { margin: var(--space-5) 0; }
.dashboard-section-heading { margin-bottom: var(--space-3); display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.dashboard-section-heading h2 { margin: 2px 0 0; font-size: 18px; }
.dashboard-section-heading p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; }
.dashboard-module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-3); }
.dashboard-module-card { --module-color: var(--primary); --module-soft: var(--primary-soft); min-width: 0; min-height: 116px; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 10px 12px; background: white; color: var(--text); text-align: left; box-shadow: var(--shadow-sm); transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.dashboard-module-card:hover { border-color: color-mix(in srgb,var(--module-color) 35%,var(--border)); box-shadow: 0 9px 22px rgba(36,50,71,.08); transform: translateY(-2px); }
.dashboard-module-card.medical { --module-color:#28765f; --module-soft:color-mix(in srgb, #64748B 7%, #FFFFFF); }
.dashboard-module-card.violation { --module-color:#9b6416; --module-soft:#fff4e2; }
.dashboard-module-card.qualification { --module-color:#64748B; --module-soft:color-mix(in srgb, #64748B 5%, #FFFFFF); }
.dashboard-module-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--module-soft); color: var(--module-color); }
.dashboard-module-icon .ui-icon { width: 22px; height: 22px; }
.dashboard-module-copy { min-width: 0; }
.dashboard-module-copy strong,.dashboard-module-copy small { display: block; }
.dashboard-module-copy strong { color: var(--module-color); font-size: 13px; }
.dashboard-module-copy small { margin-top: 3px; overflow: hidden; color: var(--text-tertiary); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-module-metrics { grid-column: 1/-1; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 6px; }
.dashboard-module-metrics b { font-size: 22px; line-height: 1; }
.dashboard-module-metrics > small { color: var(--text-tertiary); font-size: 9px; text-transform: uppercase; }
.dashboard-module-metrics em { justify-self: end; color: var(--success); font-size: 9px; font-style: normal; font-weight: 700; }
.dashboard-module-metrics em:not(:only-child) { color: var(--warning); }
.dashboard-module-urgency { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.dashboard-module-urgency > span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.dashboard-module-urgency b { font-size: 13px; font-variant-numeric: tabular-nums; }
.dashboard-module-urgency .is-due { color: var(--warning); }
.dashboard-module-urgency .is-overdue { color: var(--danger); }
.attention-list { display: grid; }
.attention-list > button { min-height: 65px; border: 0; border-bottom: 1px solid var(--border); padding: 10px 14px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; background: white; color: var(--text); text-align: left; }
.attention-list > button:last-child { border-bottom: 0; }
.attention-list > button:hover { background: var(--surface-hover); }
.attention-indicator { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--warning-bg); color: var(--warning); }
.attention-indicator.overdue { background: var(--danger-bg); color: var(--danger); }
.attention-indicator.today { background: #fff1e8; color: #bd5c13; }
.attention-indicator.upcoming { background: #edf2f5; color: #5d7485; }
.attention-indicator .ui-icon { width: 17px; height: 17px; }
.attention-list > button > span:nth-child(2) { min-width: 0; }
.attention-list strong,.attention-list small { display: block; }
.attention-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.attention-list small { margin-top: 3px; color: var(--text-tertiary); font-size: 9px; }
.attention-list > button > span:last-child { display: grid; justify-items: end; }
.dashboard-action-list-footer { border-top: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-soft); }
.dashboard-action-list-footer span { color: var(--text-secondary); font-size: 10px; }
.dashboard-attention-shell { display: grid; }
.dashboard-attention-summary { border-bottom: 1px solid var(--border); padding: 12px 14px; background: #FFFFFF; }
.dashboard-attention-summary .action-status-chart { min-height: 0; align-content: stretch; gap: 10px; }
.dashboard-attention-summary .action-status-track { height: 12px; }
.dashboard-attention-summary .action-status-legend { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.dashboard-attention-summary .action-status-legend button { min-height: 38px; padding: 6px; grid-template-columns: 7px minmax(0,1fr) auto; gap: 5px; }
.dashboard-attention-summary .action-status-legend i { width: 7px; height: 7px; }
.dashboard-attention-summary .action-status-legend span { font-size: 8px; }
.dashboard-attention-summary .action-status-legend strong { font-size: 12px; }
.dashboard-attention-shell .attention-list > button { min-height: 61px; }
.dashboard-detail-monitor { margin: var(--space-4) 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.dashboard-detail-monitor > summary { min-height: 66px; padding: 12px 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #FFFFFF; color: var(--text); cursor: pointer; }
.dashboard-detail-monitor > summary::-webkit-details-marker { display: none; }
.dashboard-detail-monitor > summary:hover { background: var(--surface-hover); }
.dashboard-detail-monitor > summary > span:first-child { min-width: 0; display: flex; align-items: center; gap: 11px; }
.dashboard-detail-monitor > summary > span:first-child > b { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.dashboard-detail-monitor > summary > span:first-child > b .ui-icon { width: 18px; height: 18px; }
.dashboard-detail-monitor > summary strong,.dashboard-detail-monitor > summary small { display: block; }
.dashboard-detail-monitor > summary strong { font-size: 13px; }
.dashboard-detail-monitor > summary small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.dashboard-detail-monitor > summary > span:last-child { display: flex; align-items: center; gap: 6px; color: var(--primary); font-size: 10px; font-weight: 700; white-space: nowrap; }
.dashboard-detail-monitor > summary > span:last-child .ui-icon { width: 15px; height: 15px; transition: transform .18s ease; }
.dashboard-detail-monitor[open] > summary > span:last-child .ui-icon { transform: rotate(180deg); }
.dashboard-detail-monitor-body { border-top: 1px solid var(--border); padding: var(--space-4); display: grid; gap: var(--space-4); background: var(--surface-soft); }
.dashboard-detail-monitor-body .panel { margin: 0; }
.mini-trend { min-height: 220px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(25px,1fr); align-items: end; gap: 8px; border-bottom: 1px solid var(--border); }
.mini-trend > span { height: 100%; display: grid; grid-template-rows: 1fr 24px; align-items: end; gap: 5px; }
.mini-trend i { width: min(28px,70%); min-height: 4px; margin: auto; border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg,#bc7b32,#8f581c); }
.mini-trend small { color: var(--text-tertiary); font-size: 9px; text-align: center; }
.dashboard-activity { list-style: none; margin: 0; padding: 4px 16px 8px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; }
.dashboard-activity li { min-height: 64px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.dashboard-activity li:nth-last-child(-n+2) { border-bottom: 0; }
.dashboard-activity li > span { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.dashboard-activity li > span .ui-icon { width: 16px; height: 16px; }
.dashboard-activity li > div { min-width: 0; }
.dashboard-activity strong,.dashboard-activity small { display: block; }
.dashboard-activity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.dashboard-activity small { margin-top: 3px; overflow: hidden; color: var(--text-tertiary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity time { color: var(--text-secondary); font-size: 9px; white-space: nowrap; }

.table-toolbar { min-height: 64px; padding: 11px var(--space-4); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); background: #FFFFFF; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.table-filters { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.table-toolbar-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.table-toolbar input, .table-toolbar select { height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; background: white; color: var(--text); font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.table-toolbar input:focus, .table-toolbar select:focus { border-color: #64748B; box-shadow: 0 0 0 3px rgba(36,50,71,.1); outline: 0; }
.table-toolbar input { width: min(260px, 30vw); }
.table-search-control { min-width: 0; position: relative; display: inline-flex; align-items: center; }
.table-search-control > .ui-icon { width: 16px; height: 16px; position: absolute; left: 11px; z-index: 1; color: var(--text-tertiary); pointer-events: none; }
.table-search-control input { padding-left: 35px; }
.table-primary-action { min-height: 38px; white-space: nowrap; }
.table-row-action { min-width: 94px; white-space: nowrap; }
.table-row-action .ui-icon { color: var(--primary); }
.table-inline-actions { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.table-clear-filters { min-height: 38px; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.relieving-overview { margin-bottom: var(--space-4); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-3); }
.relieving-overview > div, .relieving-overview > button { min-height: 78px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; display: flex; flex-direction: column; justify-content: space-between; background: white; box-shadow: var(--shadow-sm); color: var(--text); text-align: left; }
.relieving-overview > button { cursor: pointer; }
.relieving-overview > button:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.relieving-overview span { color: var(--text-secondary); font-size: 11px; font-weight: 620; }
.relieving-overview strong { color: var(--text); font-size: 24px; line-height: 1; }
.relieving-overview small { margin-top: 5px; color: var(--text-tertiary); font-size: 9px; }
.relieving-overview .needs-attention { border-color: #e5b8b2; background: #fff8f7; }
.relieving-overview .needs-attention strong { color: var(--danger); }
.qualification-summary { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: 12px; }
.qualification-summary strong { color: var(--text); }
.qualification-summary .attention-text { color: var(--danger); }
.qualification-tabs { width: 100%; margin-bottom: var(--space-4); padding: 4px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb, #64748B 7%, #FFFFFF); scrollbar-width: thin; }
.qualification-tabs.ecc-sick-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
.qualification-tabs button { position: relative; min-width: 0; min-height: 44px; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 8px; background: transparent; color: var(--text-secondary); text-align: left; font-size: 13px; font-weight: 600; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.qualification-tabs button:hover { color: var(--text); background: rgba(255,255,255,.58); }
.qualification-tabs button.active { border-color: color-mix(in srgb, #64748B 15%, #FFFFFF); background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(36,50,71,.08); }
.qualification-tabs button.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -4px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.qualification-tab-icon { width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center; color: var(--text-tertiary); }
.qualification-tabs button.active .qualification-tab-icon { background: var(--primary-soft); color: var(--primary); }
.qualification-tab-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qualification-tabs button b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.72); color: var(--text-secondary); font-size: 9px; }
.qualification-tabs button.active b { background: var(--primary-soft); color: var(--primary); }
.qualification-workflow-tabs { min-height: 68px; margin-bottom: var(--space-5); padding: 5px; gap: 6px; border-color: color-mix(in srgb, #64748B 17%, #FFFFFF); border-radius: 14px; background: color-mix(in srgb, #64748B 7%, #FFFFFF); box-shadow: inset 0 1px 2px rgba(36,50,71,.04); }
.qualification-workflow-tabs button { min-height: 58px; grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; border-radius: 10px; padding: 10px 13px; color: #475569; font-size: 13px; font-weight: 600; letter-spacing: -.005em; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.qualification-workflow-tabs button:hover { border-color: color-mix(in srgb, #64748B 19%, #FFFFFF); background: rgba(255,255,255,.76); color: var(--primary-strong); transform: translateY(-1px); }
.qualification-workflow-tabs button.active { border-color: color-mix(in srgb, #64748B 26%, #FFFFFF); background: var(--surface); color: var(--primary); box-shadow: 0 4px 13px rgba(36,50,71,.1); }
.qualification-workflow-tabs button.active::after { left: 12px; right: 12px; bottom: -5px; height: 3px; background: var(--primary); }
.qualification-workflow-tabs .qualification-tab-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.48); color: #64748B; transition: background .18s ease, color .18s ease, transform .18s ease; }
.qualification-workflow-tabs button:hover .qualification-tab-icon { background: var(--surface); color: var(--primary); }
.qualification-workflow-tabs button.active .qualification-tab-icon { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(36,50,71,.08); transform: scale(1.03); }
.qualification-workflow-tabs .qualification-tab-icon svg { width: 21px; height: 21px; stroke-width: 1.75; }
.qualification-workflow-tabs button b { min-width: 27px; height: 27px; padding: 0 8px; border: 1px solid color-mix(in srgb, #64748B 15%, #FFFFFF); background: rgba(255,255,255,.78); color: #64748B; font-size: 10px; font-weight: 760; }
.qualification-workflow-tabs button.active b { border-color: var(--primary); background: var(--primary); color: white; box-shadow: 0 3px 8px rgba(36,50,71,.2); }
.qualification-urgency { margin-bottom: var(--space-3); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-2); }
.qualification-urgency button { width: 100%; height: 100%; min-height: 58px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; background: white; color: var(--text); box-shadow: var(--shadow-sm); cursor: pointer; }
.qualification-urgency button:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.qualification-urgency button.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(36,50,71,.08); }
.qualification-urgency button.overdue { border-left: 4px solid var(--danger); }
.qualification-urgency button.due-today { border-left: 4px solid #d97706; }
.qualification-urgency button.due-soon { border-left: 4px solid var(--warning); }
.qualification-urgency button.on-track { border-left: 4px solid var(--success); }
.violation-urgency { grid-template-columns: repeat(4,minmax(0,1fr)); }
.violation-urgency button { transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.violation-urgency button.pending-service { border-left: 4px solid var(--warning); }
.violation-urgency button.schedule-required { border-left: 4px solid #6b7280; }
.violation-urgency button.active-suspension { border-left: 4px solid var(--primary); }
.violation-urgency button.resume-tomorrow { border-left: 4px solid #d97706; }
.violation-urgency button.ready-to-close { border-left: 4px solid var(--success); }
.qualification-urgency span { color: var(--text-secondary); font-size: 11px; font-weight: 680; }
.qualification-urgency strong { color: var(--text); font-size: 21px; }
.dashboard-suspension-monitor { margin-bottom: var(--space-4); }
.suspension-urgency { grid-template-columns: repeat(6,minmax(0,1fr)); margin-bottom: 0; }
.suspension-urgency button.no-schedule { border-left: 4px solid #6b7280; }
.suspension-urgency button.upcoming { border-left: 4px solid #6b8eae; }
.suspension-urgency button.started { border-left: 4px solid var(--success); }
.dashboard-qualification-monitor { margin-bottom: var(--space-4); }
.dashboard-qualification-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-3); }
.qualification-dashboard-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.qualification-dashboard-header { width: 100%; min-height: 62px; border: 0; border-bottom: 1px solid var(--border); padding: 10px 11px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; background: var(--surface-soft); color: var(--text); text-align: left; cursor: pointer; }
.qualification-dashboard-header:hover { background: var(--surface-hover); }
.qualification-dashboard-header > span:nth-child(2) { min-width: 0; }
.qualification-dashboard-header strong,.qualification-dashboard-header small { display: block; }
.qualification-dashboard-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.qualification-dashboard-header small { margin-top: 3px; color: var(--text-secondary); font-size: 9px; }
.qualification-attention-count,.qualification-on-track { border-radius: 999px; padding: 4px 7px; font-size: 8px; white-space: nowrap; }
.qualification-attention-count { background: #fff0ee; color: var(--danger); }
.qualification-on-track { background: #edf7f1; color: var(--success); }
.qualification-dashboard-phase { width: 100%; min-height: 65px; border: 0; border-bottom: 1px solid var(--border); padding: 9px 11px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 9px; background: white; color: var(--text); text-align: left; cursor: pointer; }
.qualification-dashboard-phase:last-child { border-bottom: 0; }
.qualification-dashboard-phase:hover { background: #FFFFFF; }
.qualification-dashboard-phase.has-alerts { background: #fffcf7; }
.qualification-phase-name { min-width: 43px; }
.qualification-phase-name strong,.qualification-phase-name small { display: block; }
.qualification-phase-name strong { font-size: 11px; }
.qualification-phase-name small { margin-top: 3px; color: var(--text-secondary); font-size: 8px; white-space: nowrap; }
.qualification-phase-metrics { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
.qualification-phase-metrics > span { min-width: 0; border-radius: 5px; padding: 5px 3px; display: grid; justify-items: center; gap: 1px; background: var(--surface-soft); color: var(--text-tertiary); font-size: 7px; font-weight: 650; white-space: nowrap; }
.qualification-phase-metrics b { color: inherit; font-size: 11px; }
.qualification-phase-metrics .overdue.has-items { background: #fff0ee; color: var(--danger); }
.qualification-phase-metrics .due-today.has-items { background: #fff4df; color: #b45309; }
.qualification-phase-metrics .due-soon.has-items { background: #fff9df; color: #8a6500; }
.leave-urgency { grid-template-columns: repeat(4,minmax(0,1fr)); }
.leave-urgency button.upcoming { border-left: 4px solid #6b8eae; }
.leave-urgency button.on-leave { border-left: 4px solid var(--primary); }
.leave-urgency button.resume-tomorrow { border-left: 4px solid #d97706; }
.leave-urgency button.completed { border-left: 4px solid var(--success); }
.leave-urgency button.late-filing { border-left: 4px solid #b45309; }
.filing-preview { min-height: 55px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 12px; display: flex; align-items: center; gap: 10px; background: var(--surface-soft); }
.qualification-history { margin-top: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.qualification-history > summary { min-height: 66px; padding: 13px var(--space-4); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--surface-soft); }
.qualification-history > summary::-webkit-details-marker { display: none; }
.qualification-history > summary:hover { background: var(--surface-hover); }
.qualification-history > summary span:first-child { display: flex; flex-direction: column; gap: 3px; }
.qualification-history > summary strong { color: var(--text); font-size: 14px; }
.qualification-history > summary small { color: var(--text-secondary); font-size: 10px; }
.qualification-history-count { display: flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.qualification-history-count b { color: var(--primary); font-size: 16px; transition: transform .18s ease; }
.qualification-history[open] .qualification-history-count b { transform: rotate(180deg); }
.qualification-history-body { border-top: 1px solid var(--border); }
.qualification-history-body > .panel { border: 0; border-radius: 0; box-shadow: none; }
.sss-case-timeline > summary { cursor: pointer; color: var(--primary); font-weight: 700; white-space: nowrap; }
.sss-case-timeline > summary span { margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.sss-timeline-order { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.sss-case-timeline ol { list-style: none; margin: 12px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--border); min-width: 245px; }
.sss-case-timeline li { display: grid; grid-template-columns: 92px minmax(120px,1fr); gap: 10px; padding: 0 0 12px 12px; position: relative; }
.sss-case-timeline li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); position: absolute; left: -5px; top: 7px; }
.sss-case-timeline li:last-child { padding-bottom: 0; }
.sss-case-timeline time { color: var(--muted); font-size: 12px; padding-top: 3px; white-space: nowrap; }
.sss-case-timeline li small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }
.table-primary, .table-secondary, .next-action { display: block; }
.table-primary, .next-action { font-size: 13px; }
.table-secondary { margin-top: 4px; color: var(--text-secondary); font-size: 12px; font-weight: 400; }
.filing-status-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.incident-badge { display: inline-flex; align-items: center; min-height: 22px; border: 1px solid #e8b9a8; border-radius: 999px; padding: 3px 8px; background: #FFFFFF; color: #a34525; font-size: 10px; font-weight: 750; white-space: nowrap; }
.late-days { margin-top: 5px; display: block; color: var(--danger); font-size: 10px; font-weight: 700; }
.decision-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.decision-options.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.decision-options.five { grid-template-columns: repeat(5,minmax(0,1fr)); }
.decision-option { min-height: 48px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; gap: 9px; background: var(--surface-soft); color: var(--text); cursor: pointer; }
.decision-option:has(input:checked) { border-color: #64748B; background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, #64748B 22%, #FFFFFF); }
.field .decision-option input[type="radio"] { appearance: none; flex: 0 0 17px; width: 17px; min-height: 17px; height: 17px; margin: 0; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0; background: white; }
.field .decision-option input[type="radio"]:checked { border-color: var(--primary); background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8 3 3 6-6'/%3E%3C/svg%3E") center/13px no-repeat; }
.field .decision-option input[type="radio"]:focus-visible { outline: 2px solid #64748B; outline-offset: 2px; }
.decision-option span { font-size: 11px; font-weight: 700; }
table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 780px; }
thead { position: sticky; top: 0; z-index: 1; }
th { height: 44px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #FFFFFF; color: var(--text-secondary); font-size: 10px; font-weight: 750; letter-spacing: .055em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { min-height: 54px; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, #64748B 8%, #FFFFFF); color: #253244; font-size: 13px; vertical-align: middle; }
tbody tr { transition: background .15s ease, box-shadow .15s ease; }
tbody tr:hover { background: #FFFFFF; box-shadow: inset 3px 0 0 rgba(36,50,71,.2); }
tbody tr:last-child td { border-bottom: 0; }
td small { color: var(--text-secondary); }
.person { display: flex; align-items: center; gap: 9px; }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 750; font-size: 11px; }
.person strong, .person small { display: block; }
.person strong { font-size: 12px; font-weight: 650; }
.person small { margin-top: 2px; color: var(--text-secondary); font-size: 10px; }
.status-badge { min-height: 24px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.success { border-color: #cbe5d7; background: var(--success-bg); color: var(--success); }
.status-badge.warning { border-color: #f0ddb3; background: var(--warning-bg); color: var(--warning); }
.status-badge.danger { border-color: #efcbc8; background: var(--danger-bg); color: var(--danger); }
.status-badge.info { border-color: #c8dfec; background: var(--info-bg); color: var(--info); }
.status-badge.neutral { border-color: #dce3e7; background: #edf1f3; color: #5f6d77; }
.attempt-badge { display: inline-flex; width: max-content; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.attempt-badge.neutral { background: #edf1f3; color: #5f6d77; }
.attempt-badge.warning { background: var(--warning-bg); color: var(--warning); }
.attempt-badge.critical { background: var(--danger-bg); color: var(--danger); }
.critical-text { color: var(--danger) !important; font-weight: 750; }
.training-result { display: block; margin: 6px 0 4px; font-size: 12px; }
.inline-training-result { display: grid; grid-template-columns: minmax(92px,1fr) auto; gap: 6px; margin: 6px 0; }
.inline-training-result input { min-width: 0; width: 100%; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font: inherit; color: var(--text); background: #fff; }
.inline-training-result input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent); border-color: var(--primary); }
.table-action-stack { display: grid; gap: 6px; min-width: 118px; }
.training-participant-table td:nth-child(2), .training-participant-table td:nth-child(3) { min-width: 145px; }
.training-schedule-line { display: block; color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.35; }
.training-schedule-line + .training-schedule-line { margin-top: 4px; }
.training-progress-stack { display: grid; gap: 4px; }
.training-progress-stack span { color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.35; }
.monthly-training-active-table td,
.training-records-table td { font-size: 13px; font-weight: 400; line-height: 1.45; }
.monthly-training-active-table .table-primary,
.monthly-training-active-table .training-schedule-line,
.monthly-training-active-table .training-progress-stack span,
.training-records-table .table-primary,
.training-records-table td > strong { color: var(--text); font-size: 13px; font-weight: 650; }
.monthly-training-active-table .table-secondary,
.training-records-table .table-secondary { margin-top: 4px; color: var(--text-secondary); font-size: 12px; font-weight: 400; line-height: 1.35; }
.detail-table-search { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.detail-table-search label { flex: 1; max-width: 520px; }
.detail-table-search input { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; font: inherit; color: var(--text); background: #fff; }
.detail-table-search input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent); border-color: var(--primary); }
.detail-table-search small { color: var(--text-secondary); white-space: nowrap; }
.training-detail-toolbar { display: grid; grid-template-columns: minmax(280px,1fr) auto; align-items: end; gap: 14px; margin-bottom: 12px; }
.training-detail-toolbar .detail-table-search { margin-bottom: 0; }
.training-passing-controls { display: flex; align-items: end; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.training-passing-controls > span { align-self: center; color: var(--text-secondary); font-size: 10px; font-weight: 750; line-height: 1.25; text-transform: uppercase; }
.training-passing-controls label { display: grid; gap: 3px; color: var(--text-secondary); font-size: 10px; font-weight: 650; }
.training-passing-controls input { width: 82px; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; color: var(--text); background: #fff; font: inherit; font-size: 12px; }
.training-passing-controls input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent); border-color: var(--primary); }
.training-passing-controls input:disabled { color: var(--text-secondary); background: color-mix(in srgb, #64748B 6%, #FFFFFF); }
.training-session-tabs { margin: 18px 0 14px; padding: 5px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, #64748B 7%, #FFFFFF); }
.training-session-tabs button { min-height: 56px; position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 9px; padding: 8px 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; background: transparent; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.training-session-tabs button::after { content: ''; height: 3px; position: absolute; right: 10px; bottom: 0; left: 10px; border-radius: 3px 3px 0 0; background: transparent; }
.training-session-tabs button:hover { border-color: color-mix(in srgb, #64748B 15%, #FFFFFF); color: var(--primary-strong); background: rgba(255,255,255,.72); transform: translateY(-1px); }
.training-session-tabs button:focus-visible { outline: 3px solid rgba(36,50,71,.22); outline-offset: 2px; }
.training-session-tabs button.active { border-color: color-mix(in srgb, #64748B 21%, #FFFFFF); background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.training-session-tabs button.active::after { background: var(--primary); }
.training-session-tab-label { min-width: 0; display: flex; align-items: center; gap: 10px; }
.training-session-tab-label .ui-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; padding: 7px; background: rgba(255,255,255,.78); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border); }
.training-session-tabs button.active .training-session-tab-label .ui-icon { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, #64748B 17%, #FFFFFF); }
.training-session-tab-label strong { overflow: hidden; color: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.training-session-header { margin-bottom: 12px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(135deg,#FFFFFF,color-mix(in srgb, #64748B 6%, #FFFFFF)); }
.training-session-header h4 { margin: 3px 0 0; color: var(--text); font-size: 15px; }
.training-session-header p { margin: 4px 0 0; color: var(--text-secondary); font-size: 11px; }
.training-detail-hero .profile-actions { align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.training-session-overview { margin-bottom: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.training-session-overview .training-session-header { margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 16px; }
.training-session-metrics { padding: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.training-session-metrics > div { min-width: 0; min-height: 68px; padding: 11px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.training-session-metrics > div > span { color: var(--text-secondary); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.training-session-metrics > div > strong { color: var(--text); font-size: 15px; line-height: 1.3; }
.training-session-audit { border-top: 1px solid var(--border); padding: 10px 14px; display: grid; grid-template-columns: minmax(220px,1.5fr) repeat(2,minmax(150px,1fr)); gap: 12px; background: #FFFFFF; }
.training-session-audit span { min-width: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.training-session-audit b { margin-bottom: 2px; display: block; color: var(--text); font-size: 10px; font-weight: 720; }
.training-session-facts,.training-source-summary { margin-bottom: 12px; display: grid; gap: 8px; }
.training-session-facts { grid-template-columns: repeat(5,minmax(0,1fr)); }
.training-record-facts { grid-template-columns: repeat(6,minmax(0,1fr)); }
.training-source-summary { grid-template-columns: repeat(5,minmax(0,1fr)); }
.training-session-facts > div,.training-source-summary > div { min-height: 68px; padding: 11px 12px; display: flex; flex-direction: column; justify-content: center; gap: 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.training-source-summary > div { background: var(--surface-soft); }
.training-session-facts span:first-child,.training-source-summary span:first-child { color: var(--text-secondary); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.training-session-facts strong,.training-source-summary strong { color: var(--text); font-size: 14px; }
.schedule-source { display: inline-flex; max-width: 180px; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 700; line-height: 1.3; }
.schedule-source.original { background: #edf2f4; color: var(--text-secondary); }
.schedule-source.previous { background: #fff3d8; color: #8a5a00; }
.training-routing { display: inline-flex; max-width: 220px; border-radius: 8px; padding: 5px 8px; font-size: 10px; font-weight: 700; line-height: 1.35; }
.training-routing.waiting { background: #edf2f4; color: var(--text-secondary); }
.training-routing.completed { background: var(--success-bg); color: var(--success); }
.training-routing.pending { background: var(--warning-bg); color: var(--warning); }
.training-routing.transferred { background: var(--primary-soft); color: var(--primary); }
.training-score-result { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.training-participant-table.session-focused td:nth-child(2) { min-width: 165px; }
.training-participant-table.session-focused td:nth-child(3) { min-width: 190px; }
.violation-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; margin-top: 6px; }
.violation-meta small { color: var(--text-secondary); font-size: 10px; font-weight: 500; }
.violation-number-badge { display: inline-flex; align-items: center; min-height: 22px; border: 1px solid transparent; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 750; line-height: 1; white-space: nowrap; }
.violation-number-badge.first { border-color: #c9dde5; background: #edf6f8; color: #356f80; }
.violation-number-badge.repeat { border-color: #ead39a; background: #fff7df; color: #8a6412; }
.violation-number-badge.frequent { border-color: #efbbb8; background: #fff0ef; color: #b13f38; }
.violation-number-badge.history { border-color: #ccd5db; background: transparent; color: #65737d; }
.table-footer { min-height: 52px; padding: 9px var(--space-3); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); color: var(--text-secondary); font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination button { min-width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: white; color: var(--text); transition: background .18s ease, border-color .18s ease, color .18s ease; }
.pagination button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--primary-soft); color: var(--primary); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.action-menu { position: relative; }
.action-menu summary { width: 34px; height: 34px; list-style: none; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; background: white; color: var(--text-secondary); }
.action-menu summary .ui-icon { width: 18px; height: 18px; }
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu summary:hover, .action-menu[open] summary { border-color: var(--border-strong); background: var(--surface-hover); color: var(--primary); }
.action-menu-labeled summary { width: auto; min-height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; font-weight: 650; white-space: nowrap; }
.action-popover { min-width: 176px; position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: white; box-shadow: var(--shadow-md); }
.action-popover button, .action-popover a { width: 100%; min-height: 36px; border: 0; border-radius: 7px; padding: 8px 10px; display: flex; align-items: center; background: transparent; color: var(--text); text-decoration: none; text-align: left; font-size: 13px; font-weight: 600; }
.action-popover button:hover, .action-popover a:hover { background: var(--surface-hover); }
.action-popover button.danger { color: var(--danger); }
.action-popover button.danger:hover { background: var(--danger-bg); }
.action-popover button:disabled { color: var(--text-tertiary); cursor: not-allowed; }

.empty-state { min-height: 190px; padding: var(--space-6); display: grid; place-items: center; text-align: center; }
.empty-state.compact { min-height: 128px; padding: var(--space-5); }
.empty-state-icon { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 750; }
.empty-state h3 { margin: 0; font-size: 14px; }
.empty-state p { max-width: 430px; margin: 6px auto 0; color: var(--text-secondary); font-size: 12px; }
.empty-state .button { margin-top: 13px; }
.notice { padding: 12px 14px; border: 1px solid #cddfea; border-radius: var(--radius-sm); display: flex; align-items: start; gap: 10px; background: #f1f7fb; color: #345972; font-size: 12px; }
.notice strong, .notice span { display: block; }
.notice span { margin-top: 2px; color: #607d90; }
.violation-workflow-notice { margin: 0 0 var(--space-4); align-items: center; }
.violation-workflow-notice > span { width: 34px; height: 34px; flex: 0 0 34px; margin: 0; border-radius: 9px; display: grid; place-items: center; background: var(--success-bg); color: var(--success); }
.violation-workflow-notice > span .ui-icon { width: 18px; height: 18px; }
.violation-workflow-notice.warning { border-color: #ead7ad; background: #fff9ed; color: #7b5b20; }
.violation-workflow-notice.warning > span { background: var(--warning-bg); color: var(--warning); }
.violation-workflow-notice.warning div > span { color: #826b3d; }
.alert-list { display: grid; }
.alert-item { padding: 13px var(--space-4); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.alert-item.categorized-alert { grid-template-columns: minmax(76px,auto) minmax(0,1fr) auto; }
.alert-item:last-child { border-bottom: 0; }
.alert-item h3 { margin: 0; font-size: 12px; }
.alert-item p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; }
.alert-item time { display: block; margin-top: 4px; color: var(--warning); font-size: 10px; }
.report-grid, .settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
.report-card, .settings-card { height: 100%; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-sm); }
.report-card h2, .settings-card h2 { margin: 0; font-size: 16px; }
.report-card p, .settings-card p { margin: 7px 0 15px; color: var(--text-secondary); font-size: 12px; }
.report-section-heading { margin: var(--space-5) 0 var(--space-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.report-section-heading h2 { margin: 0; font-size: 18px; }
.report-section-heading p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.report-section-heading > span { color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.hr-performance-dashboard { margin-bottom: var(--space-6); }
.hr-performance-controls { margin-bottom: var(--space-3); }
.hr-performance-controls .dashboard-filters { width: min(100%,620px); max-width: 620px; display: grid; grid-template-columns: repeat(2,minmax(150px,1fr)); }
.hr-performance-controls .dashboard-filters label { min-width: 156px; }
.hr-performance-controls .dashboard-filters input { height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 10px; background: white; color: var(--text); font: inherit; font-size: 12px; font-weight: 560; text-transform: none; }
.hr-performance-period { min-height: 58px; margin-bottom: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; display: flex; align-items: center; gap: 28px; background: var(--surface-subtle,#FFFFFF); }
.hr-performance-period > div { display: grid; gap: 2px; }
.hr-performance-period > div:first-child { min-width: 250px; }
.hr-performance-period span { color: var(--text-secondary); font-size: 10px; }
.hr-performance-period strong { font-size: 12px; }
.hr-performance-period .button { margin-left: auto; }
.dashboard-kpi-grid.hr-performance-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
.hr-performance-kpi { min-height: 122px; }
.hr-performance-kpi:focus-visible { outline: 3px solid color-mix(in srgb,var(--primary) 25%,transparent); outline-offset: 2px; }
.hr-management-summary { margin-bottom: var(--space-4); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-3); }
.hr-management-summary article { min-width: 0; min-height: 102px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px; display: grid; align-content: start; gap: 7px; background: white; box-shadow: var(--shadow-sm); }
.hr-management-summary span { color: var(--text-secondary); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.hr-management-summary strong { font-size: 12px; line-height: 1.4; }
.hr-management-summary small { color: var(--text-tertiary); font-size: 9px; line-height: 1.35; }
.hr-performance-analysis > .panel { overflow: hidden; }
.hr-performance-trend { min-height: 270px; padding: 14px 16px 10px; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 8px; }
.hr-performance-trend svg { width: 100%; min-height: 215px; overflow: visible; }
.hr-chart-axis { fill: var(--text-tertiary); font-size: 9px; }
.hr-trend-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hr-trend-line.qualification { stroke: var(--primary); }
.hr-trend-line.violation { stroke: var(--warning); }
.hr-trend-point circle { stroke-width: 3; fill: white; }
.hr-trend-point circle.qualification { stroke: var(--primary); }
.hr-trend-point circle.violation { stroke: var(--warning); }
.hr-trend-point text { fill: var(--text-tertiary); font-size: 10px; }
.legend-swatch.warning { background: var(--warning); }
.hr-formula-list { padding: 14px 16px 16px; display: grid; gap: 9px; }
.hr-formula-list p { margin: 0; border-bottom: 1px solid var(--border); padding-bottom: 9px; display: grid; gap: 3px; }
.hr-formula-list p:last-child { border-bottom: 0; padding-bottom: 0; }
.hr-formula-list strong { font-size: 11px; }
.hr-formula-list span { color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.hr-performance-table { margin-bottom: var(--space-4); }
.hr-performance-table table { min-width: 920px; }
.hr-performance-table td { vertical-align: top; }
.hr-performance-controls { grid-template-columns: minmax(230px,.7fr) minmax(560px,1.3fr); }
.hr-performance-controls .dashboard-filters { width: 100%; max-width: none; grid-template-columns: repeat(4,minmax(130px,1fr)); }
.hr-performance-period { flex-wrap: wrap; }
.hr-performance-period > div:first-child { min-width: 0; }
.hr-report-tabs { margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: repeat(5,minmax(150px,1fr)); overflow-x: auto; scrollbar-width: thin; }
.hr-report-tabs button { position: relative; min-height: 50px; border: 0; padding: 11px 16px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .18s ease,background .18s ease; }
.hr-report-tabs button::after { content: ''; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .18s ease; }
.hr-report-tabs button:hover { background: var(--primary-soft); color: var(--primary); }
.hr-report-tabs button.active { color: var(--primary); font-weight: 600; }
.hr-report-tabs button.active::after { background: var(--primary); }
.hr-report-tabs button:focus-visible { z-index: 1; outline: 3px solid color-mix(in srgb,var(--primary) 24%,transparent); outline-offset: -3px; }
.hr-report-tab-content { min-width: 0; }
.dashboard-kpi-grid.hr-overview-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dashboard-kpi-grid.hr-six-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dashboard-kpi-grid.hr-five-kpis { grid-template-columns: repeat(5,minmax(0,1fr)); }
.dashboard-kpi-grid.hr-four-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
.hr-department-bars { padding: 10px 16px 16px; display: grid; gap: 10px; }
.hr-department-bars button { border: 0; padding: 5px 0; display: grid; grid-template-columns: minmax(150px,1fr) minmax(180px,2fr) 48px; align-items: center; gap: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.hr-department-bars button > span { min-width: 0; display: grid; gap: 2px; }
.hr-department-bars strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hr-department-bars small { color: var(--text-tertiary); font-size: 9px; }
.hr-department-bars i { height: 9px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, #64748B 8%, #FFFFFF); }
.hr-department-bars i b { height: 100%; border-radius: inherit; display: block; background: var(--primary); transition: width .18s ease; }
.hr-department-bars em { color: var(--primary); font-size: 11px; font-style: normal; font-weight: 760; text-align: right; }
.hr-department-bars button:hover strong,.hr-department-bars button:focus-visible strong { color: var(--primary); }
.hr-aging-bars { min-height: 245px; padding: 24px 18px 16px; display: grid; grid-template-columns: repeat(6,minmax(64px,1fr)); align-items: end; gap: 12px; }
.hr-aging-bars > div { height: 200px; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 8px; text-align: center; }
.hr-aging-bars span { display: grid; gap: 2px; }
.hr-aging-bars strong { font-size: 18px; }
.hr-aging-bars small { color: var(--text-secondary); font-size: 9px; }
.hr-aging-bars i { border-radius: 8px 8px 3px 3px; display: flex; align-items: flex-end; overflow: hidden; background: color-mix(in srgb, #64748B 6%, #FFFFFF); }
.hr-aging-bars i b { width: 100%; min-height: 2px; border-radius: 7px 7px 0 0; background: var(--warning); }
.hr-aging-bars .critical i b { background: var(--danger); }
.hr-report-attention-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: white; box-shadow: var(--shadow-sm); }
.hr-report-attention-list article { min-height: 68px; border-bottom: 1px solid var(--border); padding: 10px 14px; display: grid; grid-template-columns: 34px minmax(190px,1fr) minmax(145px,auto) auto; align-items: center; gap: 12px; }
.hr-report-attention-list article:last-child { border-bottom: 0; }
.hr-report-attention-list article > div,.hr-report-attention-list article > span:nth-last-child(2) { display: grid; gap: 3px; }
.hr-report-attention-list article > span:nth-last-child(2) { justify-items: end; }
.hr-report-attention-list small { color: var(--text-secondary); font-size: 10px; line-height: 1.4; }
.hr-report-attention-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); }
.hr-report-attention-icon.warning { color: var(--warning); background: var(--warning-bg); }
.hr-report-attention-icon.critical { color: var(--danger); background: var(--danger-bg); }
.hr-report-management-summary { margin: var(--space-4) 0; border: 1px solid color-mix(in srgb, #64748B 17%, #FFFFFF); border-radius: var(--radius-lg); padding: 16px 18px; display: grid; gap: 10px; background: #FFFFFF; }
.hr-report-management-summary > div { display: flex; align-items: flex-start; gap: 12px; }
.hr-report-management-summary > div > span { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); }
.hr-report-management-summary strong { font-size: 13px; }
.hr-report-management-summary p { margin: 5px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.hr-report-management-summary > small { color: var(--text-tertiary); font-size: 9px; }
.hr-report-definitions,.hr-report-details,.reports-operational-tools { margin-top: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: white; }
.hr-report-definitions > summary,.hr-report-details > summary,.reports-operational-tools > summary { min-height: 56px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); cursor: pointer; list-style: none; }
.hr-report-definitions > summary::-webkit-details-marker,.hr-report-details > summary::-webkit-details-marker,.reports-operational-tools > summary::-webkit-details-marker { display: none; }
.hr-report-definitions > summary > span,.reports-operational-tools > summary > span { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 720; }
.hr-report-details > summary > span,.reports-operational-tools > summary > span > span { display: grid; gap: 2px; }
.hr-report-details > summary small,.reports-operational-tools > summary small { color: var(--text-secondary); font-size: 10px; font-weight: 450; }
.hr-report-definitions[open] > summary,.hr-report-details[open] > summary,.reports-operational-tools[open] > summary { border-bottom: 1px solid var(--border); background: #FFFFFF; }
.hr-report-definitions > summary > .ui-icon:last-child,.hr-report-details > summary > .ui-icon:last-child,.reports-operational-tools > summary > .ui-icon:last-child { transition: transform .18s ease; }
.hr-report-definitions[open] > summary > .ui-icon:last-child,.hr-report-details[open] > summary > .ui-icon:last-child,.reports-operational-tools[open] > summary > .ui-icon:last-child { transform: rotate(180deg); }
.hr-report-details > div { padding: 14px; }
.hr-report-details .hr-performance-table { margin: 0; }
.hr-sort-header { width: 100%; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 7px; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.hr-sort-header .ui-icon { width: 13px; height: 13px; flex: 0 0 auto; opacity: .35; transition: transform .18s ease,opacity .18s ease; }
.hr-sort-header.active { color: var(--primary); }
.hr-sort-header.active .ui-icon { opacity: 1; }
.hr-sort-header.active.descending .ui-icon { transform: rotate(180deg); }
.hr-department-scorecard table { min-width: 1250px; }
.reports-operational-tools { margin-top: var(--space-6); }
.reports-operational-tools-body { padding: 0 16px 16px; }
.table-link { border: 0; padding: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 720; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; }
.table-link:hover,.table-link:focus-visible { text-decoration-color: currentColor; }
.hr-detail-heading { margin: 18px 0 10px; font-size: 14px; }
.hr-data-issue { display: inline-block; max-width: 210px; color: var(--danger); font-size: 10px; font-weight: 680; line-height: 1.35; }
.permissions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.permission-card { height: 100%; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: white; }
.permission-card strong, .permission-card span { display: block; }
.permission-card strong { font-size: 12px; }
.permission-card span { margin-top: 5px; color: var(--text-secondary); font-size: 10px; }

/* Administration deletion history */
.deletion-history-table { min-width: 820px; table-layout: fixed; }
.deletion-history-table th,
.deletion-history-table td { padding: 10px 11px; }
.deletion-history-table th { height: 42px; font-size: 10px; letter-spacing: .045em; }
.deletion-history-table td { vertical-align: top; font-size: 12px; line-height: 1.42; }
.deletion-history-table th:nth-child(1) { width: 23%; }
.deletion-history-table th:nth-child(2) { width: 14%; }
.deletion-history-table th:nth-child(3) { width: 11%; }
.deletion-history-table th:nth-child(4) { width: 21%; }
.deletion-history-table th:nth-child(5) { width: 14%; }
.deletion-history-table th:nth-child(6) { width: 9%; }
.deletion-history-table th:nth-child(7) { width: 58px; }
.deletion-history-table th:nth-child(6),
.deletion-history-table th:nth-child(7) { line-height: 1.2; text-align: center; white-space: normal; }
.deletion-history-table td strong,
.deletion-history-table td small { display: block; overflow-wrap: anywhere; }
.deletion-history-table td > strong { color: var(--text); font-size: 12px; font-weight: 680; }
.deletion-history-table td > small { margin-top: 4px; color: var(--text-secondary); font-size: 10.5px; }
.deletion-record-cell strong { line-height: 1.38; }
.deletion-module-cell { display: table-cell; }
.deletion-module-cell > strong { margin-bottom: 7px; }
.deletion-module-cell .status-badge { max-width: 100%; white-space: normal; }
.deletion-reason-cell > strong { font-weight: 610 !important; }
.deletion-reason-cell > small { padding-top: 6px; border-top: 1px solid color-mix(in srgb, #64748B 10%, #FFFFFF); }
.deletion-reason-cell > small span { margin-bottom: 2px; color: var(--text-tertiary); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.deletion-reason-cell > small b { display: block; color: var(--text-secondary); font-size: 10.5px; font-weight: 500; overflow-wrap: anywhere; }
.deletion-date-cell { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.deletion-date-cell > strong { white-space: nowrap; }
.deletion-date-cell > small { margin-top: 2px !important; }
.deletion-linked-cell { text-align: center; }
.deletion-linked-cell > strong { color: var(--primary) !important; font-size: 15px !important; font-variant-numeric: tabular-nums; }
.deletion-linked-cell > small { margin-top: 2px !important; font-size: 9.5px !important; line-height: 1.25; }
.deletion-none { color: var(--text-tertiary); font-size: 11px; }
.deletion-action-cell { text-align: right; }
.deletion-action-cell .action-menu { display: inline-block; text-align: left; }
.deletion-action-cell .action-menu summary { margin: 0 auto; }
.deletion-action-cell .action-popover { width: 190px; min-width: 190px; }
.deletion-action-cell .action-popover button { gap: 8px; white-space: normal; line-height: 1.3; }
.deletion-action-cell .action-popover .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; }

.deletion-snapshot-view { display: grid; gap: 16px; }
.deletion-snapshot-summary { display: grid; grid-template-columns:minmax(240px,1.7fr) repeat(3,minmax(140px,1fr)); gap: 10px; }
.deletion-snapshot-summary > div,
.deletion-snapshot-context > div { min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface-soft); }
.deletion-snapshot-summary span:not(.status-badge),
.deletion-snapshot-context span { display: block; margin-bottom: 5px; color: var(--text-tertiary); font-size: 9.5px; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.deletion-snapshot-summary strong,
.deletion-snapshot-summary small,
.deletion-snapshot-context strong { display: block; overflow-wrap: anywhere; }
.deletion-snapshot-summary strong,
.deletion-snapshot-context strong { color: var(--text); font-size: 12px; line-height: 1.45; }
.deletion-snapshot-summary small { margin-top: 4px; color: var(--text-secondary); font-size: 10.5px; }
.deletion-snapshot-record { border-left: 3px solid var(--primary) !important; background: color-mix(in srgb, var(--primary) 4%, #FFFFFF) !important; }
.deletion-snapshot-context { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.deletion-snapshot-context > div { background: #FFFFFF; }
.deletion-snapshot-fields { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #FFFFFF; }
.deletion-snapshot-fields > header { min-height: 62px; padding: 12px 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-soft); }
.deletion-snapshot-fields > header span,
.deletion-snapshot-fields > header h3 { display: block; }
.deletion-snapshot-fields > header span { color: var(--primary); font-size: 9px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.deletion-snapshot-fields > header h3 { margin: 3px 0 0; font-size: 15px; }
.deletion-snapshot-fields > header small { color: var(--text-secondary); font-size: 10.5px; white-space: nowrap; }
.deletion-snapshot-fields dl { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.deletion-snapshot-fields dl > div { min-width: 0; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.deletion-snapshot-fields dl > div:nth-child(odd) { border-right: 1px solid var(--border); }
.deletion-snapshot-fields dt { margin: 0 0 5px; color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.deletion-snapshot-fields dd { margin: 0; color: var(--text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.deletion-snapshot-fields dd span { display: block; }
.deletion-snapshot-fields pre { max-height: 240px; margin: 0; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; background: #F8FAFC; color: #334155; font: 10.5px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:900px) {
  .deletion-snapshot-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .deletion-snapshot-record { grid-column: 1/-1; }
  .deletion-snapshot-context { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
  .deletion-snapshot-summary,.deletion-snapshot-fields dl { grid-template-columns: 1fr; }
  .deletion-snapshot-fields dl > div:nth-child(odd) { border-right: 0; }
}

.modal { width: min(820px, calc(100% - 28px)); max-height: 92vh; border: 0; border-radius: var(--radius-lg); padding: 0; color: var(--text); box-shadow: var(--shadow-md); }
.modal.employee-flow { width: min(1000px, calc(100% - 28px)); }
.profile-modal { width: min(1240px, calc(100% - 28px)); }
.profile-modal.report-builder-modal { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
.profile-modal.report-builder-modal .dialog-shell { min-height: 100%; }
.profile-modal.report-builder-modal .dialog-shell > header { display: none; }
.profile-modal.report-builder-modal .dialog-body { height: 100dvh; max-height: none; padding: 0 24px 28px; }
.modal::backdrop, .confirm-modal::backdrop { background: rgba(36,50,71, .56); backdrop-filter: blur(2px); }
.dialog-shell { margin: 0; background: white; }
.dialog-shell > header { min-height: 76px; padding: 17px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.dialog-shell h2 { margin: 0; font-size: 19px; }
.dialog-shell header p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.dialog-body { max-height: 67vh; overflow-y: auto; padding: 20px; }
.dialog-shell > footer { min-height: 66px; padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.form-feedback { margin: 0 auto 0 0; color: var(--danger); font-size: 11px; }
.employee-form-layout { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 22px; align-items: start; }
.employee-form-panels { min-width: 0; padding: 2px; }
.employee-form-panels > [data-form-panel] { border: 1px solid color-mix(in srgb, #64748B 10%, #FFFFFF); border-radius: 14px; padding: 16px; background: #fff; box-shadow: 0 8px 24px rgba(36,50,71,.06); }
.employee-form-panels > [data-form-panel][hidden] { display: none !important; }
.form-tabs { min-width: 0; display: grid; gap: 6px; padding-right: 18px; border-right: 1px solid var(--border); }
.form-tabs button { width: 100%; min-height: 54px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 12px; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 11px; background: transparent; color: var(--text-secondary); text-align: left; font-size: 13px; font-weight: 600; line-height: 1.35; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.form-tabs button b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #64748B 8%, #FFFFFF); color: var(--text-secondary); font-size: 11px; }
.form-tabs button span { overflow-wrap: anywhere; }
.form-tabs button:hover { background: #FFFFFF; color: var(--primary-strong); }
.form-tabs button.active { border-color: color-mix(in srgb, #64748B 20%, #FFFFFF); background: var(--primary-soft); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.form-tabs button.active b { background: var(--primary); color: white; }
.employee-step-select { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px; }
.form-grid > .full { grid-column: 1/-1; }
.employee-panel-heading { min-height: 68px; margin-bottom: 2px; padding: 13px 15px; border: 1px solid color-mix(in srgb, #64748B 13%, #FFFFFF); border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg,#FFFFFF,color-mix(in srgb, #64748B 5%, #FFFFFF)); box-shadow: inset 3px 0 0 #64748B; }
.employee-panel-heading strong,.employee-panel-heading small { display: block; }
.employee-panel-heading strong { color: var(--text); font-size: 15px; }
.employee-panel-heading small { margin-top: 4px; color: var(--text-secondary); font-size: 11px; font-weight: 450; line-height: 1.45; }
.employee-panel-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); }
.employee-panel-icon .ui-icon { width: 19px; height: 19px; }
.employee-panel-icon.sensitive { color: #6b4f13; background: #fff7df; }
.employee-entry-panel .employee-panel-heading { margin-bottom: 0; }
.employee-entry-panel .education-toolbar { margin: 0; border: 1px solid color-mix(in srgb, #64748B 9%, #FFFFFF); border-radius: var(--radius-sm); padding: 11px 12px; background: #FFFFFF; }
.employment-date-guidance { min-height: 66px; border: 1px dashed color-mix(in srgb, #64748B 23%, #FFFFFF); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 12px; background: #FFFFFF; }
.employment-date-guidance[hidden] { display: none !important; }
.employment-date-guidance strong,.employment-date-guidance small { display: block; }
.employment-date-guidance strong { color: var(--primary-strong); font-size: 12px; }
.employment-date-guidance small { margin-top: 4px; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.government-privacy-note { border-color: #ead9aa; background: #fffbef; }
.government-privacy-note > span:first-child { color: #7b5b13; background: #f8e9b9; }
.government-profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 16px; }
.government-profile-grid > div { min-width: 0; border: 1px solid color-mix(in srgb, #64748B 10%, #FFFFFF); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-soft); }
.government-profile-grid span,.government-profile-grid strong { display: block; overflow-wrap: anywhere; }
.government-profile-grid span { margin-bottom: 5px; color: var(--text-secondary); font-size: 10px; font-weight: 650; }
.government-profile-grid strong { font-size: 12px; letter-spacing: .02em; }
.form-subgrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-subgrid > .full { grid-column: 1/-1; }
.form-section-title { grid-column: 1/-1; margin-top: 4px; padding-bottom: 7px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; }
.education-toolbar { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.education-toolbar strong, .education-toolbar span { display: block; }
.education-toolbar strong { font-size: 12px; }
.education-toolbar span { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.education-entry-list { display: grid; gap: 12px; }
.education-entry { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--surface-soft); }
.education-entry[data-new-entry="true"] { border-color: color-mix(in srgb, #64748B 30%, #FFFFFF); background: #FFFFFF; box-shadow: inset 3px 0 0 var(--primary); }
.education-entry[data-new-entry="true"] .education-entry-number { color: var(--primary-strong); }
.education-entry[data-new-entry="true"] + .education-entry:not([data-new-entry]) { margin-top: 8px; }
.education-entry > header { margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.education-entry > header span, .education-entry > header strong { display: block; }
.education-entry-number { color: var(--primary); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.education-entry > header strong { margin-top: 3px; font-size: 12px; }
.education-entry-grid { gap: 11px 14px; }
.field { min-width: 0; display: grid; gap: 6px; color: #475569; font-size: 11px; font-weight: 620; }
.form-grid > .field:not(.full):not(.check-field) > span:first-child { min-height: 30px; display: flex; align-items: flex-end; }
.field.full { grid-column: 1/-1; }
.field > span.required { color: var(--danger); }
.field input, .field select, .field textarea { width: 100%; min-height: var(--control-height); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 11px; background: white; color: var(--text); font-weight: 400; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #64748B; box-shadow: 0 0 0 3px rgba(36,50,71,.1); outline: 0; }
.date-entry-control { position: relative; display: block; width: 100%; }
.date-entry-control .date-mask-input { padding-right: 74px; font-variant-numeric: tabular-nums; }
.date-entry-control .date-mask-input.date-invalid { border-color: #c87770; }
.date-entry-control .date-picker-button, .date-entry-control .date-clear-button { position: absolute; z-index: 2; top: 50%; width: 32px; height: 32px; border: 0; border-radius: 6px; display: inline-grid; place-items: center; transform: translateY(-50%); background: transparent; color: #253244; cursor: pointer; }
.date-entry-control .date-picker-button { right: 5px; }
.date-entry-control .date-clear-button { right: 37px; color: var(--text-tertiary); }
.date-entry-control .date-picker-button:hover:not(:disabled), .date-entry-control .date-clear-button:hover:not(:disabled) { background: color-mix(in srgb, #64748B 6%, #FFFFFF); color: var(--primary); }
.date-entry-control .date-picker-button:focus-visible, .date-entry-control .date-clear-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.date-entry-control .date-picker-button:disabled, .date-entry-control .date-clear-button:disabled { color: var(--text-tertiary); cursor: default; opacity: .6; }
.date-entry-control .date-picker-button .ui-icon { width: 16px; height: 16px; }
.date-entry-control .date-clear-button .ui-icon { width: 14px; height: 14px; }
.date-entry-control .date-iso-source { position: absolute !important; inset: auto auto 0 0; width: 1px !important; min-height: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.confirm-date .date-entry-control { width: 100%; }
.field textarea { min-height: 80px; resize: vertical; }
.field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown) { border-color: #c87770; }
.field-helper { color: var(--text-tertiary); font-size: 10px; font-weight: 400; }
.field-error { color: var(--danger); font-size: 10px; font-weight: 650; line-height: 1.35; }
.field [aria-invalid="true"] { border-color: #c3544d; box-shadow: 0 0 0 3px rgba(195,84,77,.1); }
.employee-picker { position: relative; }
.employee-picker > input[type="search"] { padding-left: 36px; background: white 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='%23748692' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 11px center; }
.employee-picker-results { position: absolute; z-index: 40; top: 67px; left: 0; right: 0; max-height: 280px; overflow-y: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 5px; background: white; box-shadow: var(--shadow-md); }
.employee-picker-result { width: 100%; min-height: 54px; border: 0; border-radius: var(--radius-sm); padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; color: var(--text); text-align: left; }
.employee-picker-result:hover, .employee-picker-result:focus { outline: 0; background: color-mix(in srgb, #64748B 6%, #FFFFFF); }
.employee-picker-result span, .employee-picker-result strong, .employee-picker-result small { display: block; }
.employee-picker-result strong { font-size: 12px; }
.employee-picker-result small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; font-weight: 400; }
.picker-result-meta { flex: 0 0 auto; text-align: right; }
.picker-result-meta em { display: inline-block; border-radius: 999px; padding: 2px 6px; background: color-mix(in srgb, #64748B 8%, #FFFFFF); color: #475569; font-size: 9px; font-style: normal; font-weight: 700; }
.employee-picker-empty { padding: 18px 12px; color: var(--text-secondary); text-align: center; font-size: 11px; }
.employee-picker-selection { border: 1px solid color-mix(in srgb, #64748B 17%, #FFFFFF); border-radius: var(--radius-sm); padding: 9px 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 12px; background: #FFFFFF; }
.employee-picker-selection strong { grid-row: 1 / 3; align-self: center; color: var(--text); font-size: 12px; }
.employee-picker-selection span { color: var(--text-secondary); text-align: right; font-size: 10px; font-weight: 400; }
.orientation-participant-picker { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; background: var(--surface-soft); }
.orientation-participant-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.orientation-participant-tools input { min-width: 0; flex: 1; padding-left: 36px; background: white 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='%23748692' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 11px center; }
.orientation-participant-tools strong { flex: 0 0 auto; color: var(--primary); font-size: 10px; }
.orientation-participant-list { max-height: 270px; overflow-y: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 2px; }
.orientation-participant-option { min-width: 0; min-height: 54px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; align-items: center; gap: 9px; background: white; cursor: pointer; }
.orientation-participant-option:hover { border-color: var(--border-strong); background: #FFFFFF; }
.orientation-participant-option:has(input:checked) { border-color: #64748B; background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, #64748B 19%, #FFFFFF); }
.field .orientation-participant-option input { width: 17px; min-height: 17px; height: 17px; flex: 0 0 17px; margin: 0; padding: 0; }
.orientation-participant-option span { min-width: 0; }
.orientation-participant-option strong,.orientation-participant-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orientation-participant-option strong { color: var(--text); font-size: 11px; }
.orientation-participant-option small { margin-top: 3px; color: var(--text-secondary); font-size: 9px; font-weight: 400; }
.picker-toggle { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 10px; font-weight: 500; }
.picker-toggle input { width: 15px; min-height: 15px; }
.check-field { min-height: 40px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.check-field input { width: 16px; min-height: 16px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.checkbox-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.checkbox-grid.checkbox-grid-single { grid-template-columns: 1fr; }
.checkbox-grid .check-field { min-height: 50px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-soft); }
.checkbox-grid .check-field input { flex: 0 0 16px; margin: 0; }
.leave-form-grid > .field:not(.full):not(.check-field) { height: 100%; grid-template-rows: 30px minmax(var(--control-height),auto); align-content: start; }
.leave-edit-workflow { grid-column: 1 / -1; min-height: 78px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid color-mix(in srgb, #64748B 12%, #FFFFFF); border-radius: var(--radius-md); background: linear-gradient(135deg,#FFFFFF,color-mix(in srgb, #64748B 6%, #FFFFFF)); }
.leave-edit-workflow > div:first-child { min-width: 0; display: grid; justify-items: start; gap: 4px; }
.leave-edit-workflow span { color: var(--text-secondary); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.leave-edit-workflow strong { font-size: 12px; }
.leave-edit-workflow small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 9px; }
.profile-hero { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 13px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.profile-hero .avatar { width: 52px; height: 52px; font-size: 14px; }
.profile-photo { overflow: hidden; padding: 0; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero h3 { margin: 0; font-size: 17px; }
.profile-hero p { margin: 4px 0 0; color: var(--text-secondary); font-size: 11px; }
.profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.qualification-detail-actions .button { min-height: 34px; padding: 7px 12px; border-radius: 7px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .01em; }
.qualification-detail-actions .button.primary { border-color: var(--primary); background: var(--primary); color: white; box-shadow: 0 4px 10px rgba(36,50,71,.14); }
.qualification-detail-actions .button.primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
.qualification-detail-actions .button.secondary { border-color: var(--border-strong); background: white; color: var(--text); box-shadow: none; }
.qualification-detail-actions .button.secondary:hover { border-color: #64748B; background: var(--surface-hover); color: var(--primary-strong); }
.qualification-detail-actions .button.ghost { border-color: transparent; background: transparent; color: var(--primary); }
.qualification-detail-actions .button.ghost:hover { border-color: transparent; background: var(--primary-soft); }
.record-detail-actions { max-width: min(100%,720px); align-items: center; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.record-detail-actions .button { min-height: 36px; }
.record-detail-actions .button.primary { margin-left: 2px; }
.relieving-detail-hero { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.relieving-detail-hero h3 { margin: 3px 0 0; font-size: 20px; }
.relieving-detail-hero p { margin: 5px 0 0; color: var(--text-secondary); font-size: 11px; }
.detail-eyebrow { color: var(--primary); font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.relieving-detail-summary { margin: var(--space-4) 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-3); }
.relieving-detail-summary > div { height: 100%; min-height: 82px; border: 1px solid color-mix(in srgb, #64748B 11%, #FFFFFF); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; background: var(--surface-soft); }
.relieving-detail-summary span:not(.status-badge), .relieving-detail-summary small { color: var(--text-secondary); font-size: 10px; }
.relieving-detail-summary strong { font-size: 12px; }
.orientation-detail-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.profile-grid.detail-grid { margin: 0; padding: var(--space-4); }
.detail-grid .detail-wide { grid-column: 1/-1; }
.detail-table { min-width: 720px; }
.qualification-evaluation-history { padding: 14px 16px 16px; display: grid; gap: 12px; background: #FFFFFF; }
.qualification-evaluation-card { overflow: hidden; border: 1px solid color-mix(in srgb, #64748B 11%, #FFFFFF); border-radius: var(--radius-md); background: white; box-shadow: 0 2px 8px rgba(36,50,71,.04); }
.qualification-evaluation-card.extension { border-color: color-mix(in srgb, #64748B 17%, #FFFFFF); }
.qualification-evaluation-card > header { min-height: 64px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid color-mix(in srgb, #64748B 9%, #FFFFFF); background: #FFFFFF; }
.qualification-evaluation-card.extension > header { background: #FFFFFF; }
.qualification-evaluation-card > header > div { min-width: 0; display: grid; gap: 3px; }
.qualification-evaluation-card > header strong { color: var(--text); font-size: 14px; line-height: 1.35; }
.qualification-cycle-label { color: var(--primary); font-size: 11px; font-weight: 780; letter-spacing: .035em; text-transform: uppercase; }
.qualification-evaluation-facts { margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px 18px; }
.qualification-evaluation-facts > div { min-width: 0; }
.qualification-evaluation-facts dt { color: var(--text-secondary); font-size: 10.5px; font-weight: 720; line-height: 1.35; }
.qualification-evaluation-facts dd { margin: 4px 0 0; color: var(--text); font-size: 13px; font-weight: 680; line-height: 1.45; overflow-wrap: anywhere; }
.qualification-evaluation-facts small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.qualification-extension-summary { margin: 0 14px 14px; padding: 11px 12px; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, #64748B 17%, #FFFFFF); border-radius: var(--radius-sm); background: #FFFFFF; }
.qualification-extension-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, #64748B 10%, #FFFFFF); color: var(--primary-dark); }
.qualification-extension-icon .ui-icon { width: 16px; height: 16px; }
.qualification-extension-summary > div { min-width: 0; display: grid; gap: 2px; }
.qualification-extension-summary span { color: var(--primary-dark); font-size: 10.5px; font-weight: 780; letter-spacing: .03em; text-transform: uppercase; }
.qualification-extension-summary strong { color: var(--text); font-size: 13px; line-height: 1.4; }
.qualification-extension-summary small { color: var(--text-secondary); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.coverage-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.medical-extension-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border: 1px solid #c7d9f8; border-radius: 999px; color: #1e4f94; background: #edf4ff; font-size: 10px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.medical-days-total { display: block; color: var(--text); font-size: 15px; }
.medical-extension-context { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border: 1px solid #d7e5f8; border-radius: var(--radius-md); background: #f5f9ff; }
.medical-extension-context > span { color: var(--text-secondary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.medical-extension-context strong { color: var(--text); font-size: 14px; }
.medical-extension-context small { color: var(--text-secondary); font-weight: 500; }
.medical-case-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.medical-case-summary .medical-extension-badge { margin-top: 2px; }
.medical-extension-timeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 16px; list-style: none; }
.medical-extension-timeline::before { content: ''; position: absolute; top: 32px; bottom: 32px; left: 33px; width: 2px; background: #d7e5f8; }
.medical-extension-timeline > li { position: relative; z-index: 1; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; align-items: start; }
.extension-marker { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #2f6dbe; box-shadow: 0 0 0 1px #bcd0ed; font-size: 11px; font-weight: 800; }
.medical-extension-timeline .original .extension-marker { color: #31556d; background: #e6eef3; box-shadow: 0 0 0 1px #c8d6de; }
.medical-extension-timeline article { min-width: 0; padding: 13px 14px; border: 1px solid #dfe8ed; border-radius: var(--radius-md); background: #fff; }
.medical-extension-timeline article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.medical-extension-timeline article > header > div { display: flex; flex-direction: column; gap: 4px; }
.medical-extension-timeline article > header span { color: var(--text-secondary); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.medical-extension-timeline article > header strong { color: var(--text); font-size: 13px; }
.medical-extension-timeline dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 14px; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid #edf1f3; }
.medical-extension-timeline dl > div { min-width: 0; }
.medical-extension-timeline dt { margin-bottom: 3px; color: var(--text-secondary); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.medical-extension-timeline dd { margin: 0; color: var(--text); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.qualification-flow { padding: 18px; display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 0; overflow-x: auto; }
.qualification-flow-node { min-width: 145px; position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: 22px auto; justify-items: center; gap: 7px; align-items: start; padding: 0 12px; text-align: center; }
.qualification-flow-node::after { content: ''; position: absolute; top: 9px; left: 50%; right: -50%; height: 2px; background: color-mix(in srgb, #64748B 14%, #FFFFFF); }
.qualification-flow-node:last-child::after { display: none; }
.qualification-flow-marker { width: 20px; height: 20px; position: relative; z-index: 1; display: grid; place-items: center; border: 4px solid white; border-radius: 50%; background: color-mix(in srgb, #64748B 21%, #FFFFFF); box-shadow: 0 0 0 1px color-mix(in srgb, #64748B 21%, #FFFFFF); }
.qualification-flow-node.completed .qualification-flow-marker { background: var(--success); box-shadow: 0 0 0 1px var(--success); }
.qualification-flow-node.completed::after { background: var(--success); }
.qualification-flow-node.current .qualification-flow-marker { background: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb,var(--primary) 25%,white); }
.qualification-flow-node.failed .qualification-flow-marker { background: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.qualification-flow-node > div { min-width: 0; position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; }
.qualification-flow-node strong,.qualification-flow-node small { display: block; overflow-wrap: anywhere; }
.qualification-flow-node strong { color: var(--text); font-size: 11px; line-height: 1.35; }
.qualification-flow-node small { min-height: 14px; color: var(--text-secondary); font-size: 9px; }
.qualification-milestone-table td:nth-child(3),.qualification-milestone-table td:nth-child(4) { white-space: nowrap; }
.qualification-milestone-table td > strong,.qualification-milestone-table td > small { display: block; }
.qualification-milestone-table td > small { margin-top: 3px; color: var(--text-secondary); font-size: 12px; }
.qualification-badge-stack { display: flex; flex-wrap: wrap; gap: 5px; }
.qualification-timeline { margin: 0; padding: 18px 20px; list-style: none; }
.qualification-timeline li { display: grid; grid-template-columns: 112px 22px minmax(0,1fr); gap: 10px; position: relative; padding: 0 0 19px; }
.qualification-timeline li:last-child { padding-bottom: 0; }
.qualification-timeline li::after { content: ''; position: absolute; top: 12px; bottom: -1px; left: 123px; width: 2px; background: color-mix(in srgb, #64748B 13%, #FFFFFF); }
.qualification-timeline li:last-child::after { display: none; }
.qualification-timeline-date { padding-top: 1px; text-align: right; }
.qualification-timeline-date strong,.qualification-timeline-date small { display: block; }
.qualification-timeline-date strong { font-size: 10px; }
.qualification-timeline-date small { margin-top: 3px; color: var(--text-secondary); font-size: 8px; font-weight: 700; }
.qualification-timeline-marker { width: 12px; height: 12px; position: relative; z-index: 1; margin: 3px auto 0; border: 3px solid white; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.qualification-timeline-content { min-width: 0; padding: 0 0 1px; }
.qualification-timeline-content > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.qualification-timeline-content strong { font-size: 11px; }
.qualification-timeline-content p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.profile-grid { margin: var(--space-4) 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); }
.profile-grid div { height: 100%; min-width: 0; padding: 11px; border: 1px solid color-mix(in srgb, #64748B 9%, #FFFFFF); border-radius: var(--radius-sm); background: var(--surface-soft); }
.profile-grid span, .profile-grid strong { display: block; overflow-wrap: anywhere; }
.profile-grid span { margin-bottom: 4px; color: var(--text-secondary); font-size: 10px; }
.profile-grid strong { font-size: 11px; }
.profile-record-section { padding: var(--space-4); }
.profile-record-section + .profile-record-section { border-top: 1px solid var(--border); }
.profile-record-heading { margin-bottom: var(--space-3); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.profile-record-heading strong,.profile-record-heading small { display: block; }
.profile-record-heading strong { font-size: 12px; }
.profile-record-heading small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.profile-record-heading > span { padding: 4px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--text-secondary); font-size: 9px; font-weight: 700; white-space: nowrap; }
.movement-change-list { margin-top: 5px; display: grid; gap: 3px; color: var(--text-secondary); font-size: 10px; }
.movement-change-list span { display: block; }
.profile-history-details { margin-top: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.profile-history-details summary { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--primary-dark); font-size: 10px; font-weight: 750; cursor: pointer; list-style: none; }
.profile-history-details summary::-webkit-details-marker { display: none; }
.profile-history-details summary::after { content: '+'; margin-left: auto; font-size: 15px; font-weight: 500; }
.profile-history-details[open] summary { border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.profile-history-details[open] summary::after { content: '−'; }
.profile-history-details summary span { color: var(--text-secondary); font-size: 9px; font-weight: 650; }
.employment-history-table { min-width: 980px; }
.employment-history-table th:first-child,.employment-history-table td:first-child { width: 118px; white-space: nowrap; }
.employment-history-table th:nth-child(2) { width: 190px; }
.employment-history-table th:nth-child(4) { width: 190px; }
.employment-history-table th:last-child { width: 145px; }
.history-action-title { display: block; margin-top: 7px; font-size: 10px; line-height: 1.35; }
.history-origin { width: fit-content; margin-top: 7px; padding: 3px 7px; display: inline-flex; border: 1px solid #bdd9cf; border-radius: 999px; background: #edf8f3; color: #17664f; font-size: 8px; font-weight: 750; letter-spacing: .02em; }
.history-origin.manual { border-color: #c5d3e9; background: #eef4fc; color: #315c92; }
.history-origin.legacy { border-color: #d8dce0; background: #f3f5f6; color: #5c6971; }
.employment-change-comparison { display: grid; gap: 7px; }
.employment-change-comparison > div { display: grid; grid-template-columns: minmax(100px,.8fr) minmax(105px,1fr) 18px minmax(105px,1fr); align-items: center; gap: 6px; }
.employment-change-comparison strong { color: var(--text-secondary); font-size: 9px; }
.employment-change-comparison span { min-width: 0; overflow-wrap: anywhere; font-size: 10px; }
.history-before { color: #64748B; text-decoration-color: color-mix(in srgb, #64748B 32%, #FFFFFF); }
.history-arrow { color: var(--primary); font-weight: 800; text-align: center; }
.history-after { color: var(--text); font-weight: 700; }
.history-remarks { display: block; margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--border); color: var(--text-secondary); font-size: 9px; line-height: 1.4; }
.employment-history-shell { background: var(--surface-soft); }
.history-view-toolbar { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.history-view-toolbar strong,.history-view-toolbar small { display: block; }
.history-view-toolbar strong { color: var(--text); font-size: 14px; font-weight: 700; }
.history-view-toolbar small { margin-top: 3px; color: var(--text-secondary); font-size: 12px; }
.history-view-switch { padding: 3px; display: inline-grid; grid-template-columns: repeat(2,minmax(76px,1fr)); gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.history-view-switch button { min-height: 36px; border: 0; border-radius: calc(var(--radius-sm) - 2px); padding: 7px 12px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .16s ease,color .16s ease,box-shadow .16s ease; }
.history-view-switch button:hover { color: var(--primary-dark); background: white; }
.history-view-switch button:focus-visible { outline: 3px solid rgba(36,50,71,.2); outline-offset: 1px; }
.history-view-switch button.active { background: white; color: var(--primary-dark); box-shadow: 0 1px 4px rgba(36,50,71,.12); }
.employment-history-timeline { padding: 20px 18px 22px; }
.employment-history-event { position: relative; display: grid; grid-template-columns: 118px 42px minmax(0,1fr); gap: 12px; padding-bottom: 18px; }
.employment-history-event:last-child { padding-bottom: 0; }
.employment-history-event::after { content: ''; position: absolute; top: 38px; bottom: 0; left: 138px; width: 2px; background: color-mix(in srgb, #64748B 14%, #FFFFFF); }
.employment-history-event:last-child::after { display: none; }
.employment-history-event > time { padding-top: 10px; color: #475569; font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; }
.employment-history-marker { width: 38px; height: 38px; position: relative; z-index: 1; display: grid; place-items: center; border: 1px solid color-mix(in srgb, #64748B 28%, #FFFFFF); border-radius: 50%; background: color-mix(in srgb, #64748B 5%, #FFFFFF); color: var(--primary-dark); box-shadow: 0 0 0 4px var(--surface-soft); }
.employment-history-marker .ui-icon { width: 19px; height: 19px; }
.employment-history-card { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 2px 8px rgba(36,50,71,.05); }
.employment-history-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.employment-history-card h4 { margin: 3px 0 0; color: var(--text); font-size: 16px; line-height: 1.3; }
.employment-history-card header p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.history-kicker { color: var(--primary); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.employment-history-changes { margin-top: 14px; padding: 2px 0; border: 0; background: transparent; }
.employment-history-changes .employment-change-comparison { gap: 10px; }
.employment-history-changes .employment-change-comparison > div { grid-template-columns: minmax(120px,.65fr) minmax(130px,1fr) 22px minmax(130px,1fr); gap: 10px; padding: 5px 0; }
.employment-history-changes .employment-change-comparison > div + div { border-top: 1px solid color-mix(in srgb, #64748B 6%, #FFFFFF); }
.employment-history-changes .employment-change-comparison strong { font-size: 12px; }
.employment-history-changes .employment-change-comparison span { font-size: 13px; line-height: 1.4; }
.employment-history-changes .movement-change-list { margin: 0; font-size: 13px; line-height: 1.45; }
.employee-201-file .structured-detail-list { display: grid; gap: 7px; }
.employee-201-file .structured-detail-item { min-width: 0; padding: 8px 10px; display: grid; grid-template-columns: minmax(118px,.48fr) minmax(0,1fr); align-items: baseline; gap: 12px; border: 1px solid color-mix(in srgb, #64748B 11%, #FFFFFF); border-radius: 7px; background: white; }
.employee-201-file .structured-detail-item b { color: #475569; font-size: 11.5px; font-weight: 760; line-height: 1.35; letter-spacing: .01em; }
.employee-201-file .structured-detail-item > span { min-width: 0; display: block; color: #253244; font-size: 13px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.employee-201-file .structured-detail-sentence { padding: 8px 10px; display: block; border-left: 3px solid color-mix(in srgb, #64748B 21%, #FFFFFF); border-radius: 0 6px 6px 0; background: white; color: #475569; font-size: 13px; font-weight: 560; line-height: 1.5; overflow-wrap: anywhere; }
.employment-history-remarks { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid color-mix(in srgb, #64748B 24%, #FFFFFF); background: #FFFFFF; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.employment-history-remarks strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 12px; }
.employment-history-meta { margin: 14px 0 0; padding-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; border-top: 1px solid var(--border); }
.employment-history-meta div { min-width: 0; }
.employment-history-meta dt { color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.employment-history-meta dd { margin: 3px 0 0; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.employment-history-table-panel { background: var(--surface); }
.employee-activity-timeline { padding: 18px; display: grid; gap: 12px; background: var(--surface-soft); }
.employee-activity-event { position: relative; padding: 14px 16px; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.employee-activity-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in srgb, #64748B 6%, #FFFFFF); color: var(--primary-dark); }
.employee-activity-icon .ui-icon { width: 19px; height: 19px; }
.employee-activity-event time { color: var(--primary-dark); font-size: 12px; font-weight: 700; }
.employee-activity-event h4 { margin: 4px 0 0; color: var(--text); font-size: 15px; line-height: 1.35; }
.employee-activity-event p { margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.employee-activity-event footer { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-secondary); font-size: 11px; }
.employee-activity-event footer span { position: relative; }
.employee-activity-event footer span + span::before { content: '•'; position: absolute; left: -9px; color: #64748B; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid color-mix(in srgb, #64748B 12%, #FFFFFF); }
.timeline li { position: relative; padding: 0 0 16px 15px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -20px; top: 3px; width: 9px; height: 9px; border: 3px solid white; border-radius: 50%; background: var(--primary); }
.timeline strong, .timeline span { display: block; }
.timeline strong { font-size: 11px; }
.timeline span { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.upload-zone { margin-top: var(--space-4); border: 1px dashed #64748B; border-radius: var(--radius-md); padding: var(--space-4); background: #FFFFFF; }
.upload-zone.dragging { border-color: var(--primary); background: var(--primary-soft); }
.upload-zone-main { display: grid; grid-template-columns: 1fr 190px auto; gap: var(--space-3); align-items: end; }
.drop-target { min-height: 74px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); display: grid; place-items: center; padding: 10px; background: white; color: var(--text-secondary); text-align: center; font-size: 11px; }
.drop-target strong { display: block; color: var(--text); }
.drop-target input { max-width: 100%; margin-top: 6px; }
.upload-progress { width: 100%; height: 5px; margin-top: 12px; border: 0; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, #64748B 9%, #FFFFFF); accent-color: var(--primary); }
.upload-progress::-webkit-progress-bar { background: color-mix(in srgb, #64748B 9%, #FFFFFF); border-radius: 99px; }
.upload-progress::-webkit-progress-value { background: var(--primary); border-radius: 99px; }
.upload-progress::-moz-progress-bar { background: var(--primary); border-radius: 99px; }
.upload-file-note { margin-top: 8px; color: var(--text-secondary); font-size: 10px; }
.report-builder-toolbar { position: sticky; top: 0; z-index: 3; margin: 0 -24px var(--space-4); padding: 10px max(24px,calc((100vw - 1440px) / 2)); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.97); box-shadow: 0 3px 10px rgba(36,50,71,.07); backdrop-filter: blur(8px); }
.report-builder-navigation { min-width: 0; display: flex; align-items: center; gap: 10px; }
.report-builder-navigation > .button { flex: 0 0 auto; }
.report-builder-title { min-width: 0; }
.report-builder-title strong,.report-builder-title small { display: block; }
.report-builder-title strong { font-size: 16px; line-height: 1.25; }
.report-builder-title small { margin-top: 3px; overflow: hidden; color: var(--text-secondary); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.report-builder-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.report-total-count { margin-right: 3px; color: var(--text-secondary); font-size: 10px; font-weight: 700; white-space: nowrap; }
.report-builder-layout { width: min(1480px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(350px,400px) minmax(680px,1fr); gap: var(--space-4); align-items: start; }
.report-options-panel { display: grid; gap: var(--space-3); }
.report-presets { padding: 12px; display: grid; gap: 9px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.report-presets > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.report-presets strong { font-size: 12px; }
.report-presets small { color: var(--primary); font-size: 10px; font-weight: 750; }
.report-presets p { margin: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.report-preset-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.report-preset-button { min-height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 8px; background: white; color: var(--text-secondary); font: inherit; font-size: 10.5px; font-weight: 720; line-height: 1.25; cursor: pointer; }
.report-preset-button:hover { border-color: var(--primary); color: var(--primary); }
.report-preset-button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.report-photo-control { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.report-photo-thumb { width: 66px; height: 76px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: white; color: var(--text-secondary); font-size: 9px; font-weight: 750; letter-spacing: .1em; }
.report-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.report-photo-control .check-field { min-height: auto; font-size: 10px; }
.report-photo-upload { position: relative; margin-top: 8px; display: inline-flex; cursor: pointer; }
.report-photo-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.report-signatory-fields { padding: 10px; display: grid; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #FFFFFF; }
.report-signatory-fields > strong { color: var(--text); font-size: 12px; }
.report-signatory-fields label { display: grid; gap: 4px; color: var(--text-secondary); font-size: 10px; font-weight: 650; }
.report-signatory-fields input { width: 100%; min-height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 9px; background: white; color: var(--text); font: inherit; font-size: 11px; }
.report-signatory-person { padding-top: 8px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; border-top: 1px solid var(--border); }
.report-signatory-person b { color: var(--text); font-size: 10.5px; }
.report-signatory-person b { grid-column: 1 / -1; }
.report-option-group { border: 1px solid var(--border); border-radius: var(--radius-md); background: white; overflow: hidden; }
.report-option-group > header { min-height: 48px; padding: 11px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.report-option-group.collapsed > header { border-bottom: 0; }
.report-group-collapse { min-width: 0; padding: 0; display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.report-group-collapse strong { overflow: hidden; font-size: 12.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.report-collapse-icon { color: var(--text-secondary); font-size: 12px; transition: transform .16s ease; }
.report-option-group.collapsed .report-collapse-icon { transform: rotate(-90deg); }
.report-group-tools { display: flex; align-items: center; gap: 7px; }
.report-selection-count { border-radius: 999px; padding: 3px 7px; background: color-mix(in srgb, #64748B 8%, #FFFFFF); color: var(--primary); font-size: 9px; font-weight: 750; white-space: nowrap; }
.report-option-group > header label { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 10px; font-weight: 650; white-space: nowrap; }
.report-option-group input[type="checkbox"] { width: 15px; min-height: 15px; }
.report-record-option { min-height: 54px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 9px; border-bottom: 1px solid color-mix(in srgb, #64748B 6%, #FFFFFF); cursor: pointer; }
.report-record-option:last-child { border-bottom: 0; }
.report-record-option:has(input:checked) { background: color-mix(in srgb, #64748B 5%, #FFFFFF); }
.report-record-option span,.report-record-option strong,.report-record-option small { min-width: 0; display: block; }
.report-record-option strong { font-size: 11.5px; line-height: 1.35; }
.report-record-option small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.report-option-subgroup + .report-option-subgroup { border-top: 1px solid var(--border); }
.report-option-subgroup > header { min-height: 42px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: color-mix(in srgb, var(--primary) 3%, #FFFFFF); }
.report-option-subgroup > header > strong { font-size: 11.5px; line-height: 1.35; }
.report-option-subgroup > header > div,.report-option-subgroup > header label { display: flex; align-items: center; gap: 6px; }
.report-option-subgroup > header label { color: var(--text-secondary); font-size: 9.5px; font-weight: 650; white-space: nowrap; }
.report-option-hidden { display: none; }
.report-training-filters { padding: 9px; display: grid; grid-template-columns: 1fr 92px; gap: 6px; border-bottom: 1px solid color-mix(in srgb, #64748B 6%, #FFFFFF); }
.report-training-filters input,.report-training-filters select { width: 100%; min-height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; background: white; color: var(--text); font: inherit; font-size: 9px; }
.report-empty { margin: 0; padding: 14px 12px; color: var(--text-secondary); font-size: 10px; }
.report-preview-panel { position: sticky; top: 56px; min-width: 0; }
.report-preview-label { margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; color: var(--text-secondary); font-size: 10px; }
.report-preview-label span { color: var(--text); font-weight: 750; }
.audit-report-sheet { min-height: 900px; padding: 38px 42px; border: 1px solid color-mix(in srgb, #64748B 14%, #FFFFFF); border-radius: 4px; background: white; color: #253244; box-shadow: 0 8px 28px rgba(36,50,71,.08); font-size: 11.5px; }
.audit-report-header { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 5px; padding-bottom: 10px; border-bottom: 2px solid #475569; }
.audit-company-logo { width: min(190px,58%); height: 60px; object-fit: contain; }
.audit-company-copy { text-align: center; }
.audit-company-copy strong,.audit-company-copy small { display: block; }
.audit-company-copy strong { font-family: Georgia,'Times New Roman',serif; font-size: 15px; letter-spacing: .045em; }
.audit-company-copy small { margin-top: 3px; color: #475569; font-size: 10.5px; }
.audit-header-balance { display: none; }
.audit-report-title { margin: 16px 0 4px; color: #253244; font-family: Georgia,'Times New Roman',serif; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: .07em; text-align: center; }
.audit-employee-header { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 18px; padding: 18px 0 14px; }
.audit-employee-profile { min-width: 0; }
.audit-employee-name { min-width: 0; }
.audit-employee-name > span,.audit-employment-summary span { color: #475569; font-size: 10px; font-weight: 750; letter-spacing: .06em; }
.audit-employee-name h1,.audit-employee-name h2 { margin: 0 0 5px; font-family: Georgia,'Times New Roman',serif; font-size: 24px; font-weight: 600; line-height: 1.12; overflow-wrap: break-word; }
.audit-employee-name.name-medium h1,.audit-employee-name.name-medium h2 { font-size: 22px; }
.audit-employee-name.name-long h1,.audit-employee-name.name-long h2 { font-size: 19px; }
.audit-photo,.audit-photo-placeholder { width: 35mm; height: 45mm; flex: 0 0 auto; border: 1px solid color-mix(in srgb, #64748B 32%, #FFFFFF); border-radius: 4px; object-fit: cover; }
.audit-photo-placeholder { display: grid; place-items: center; background: #FFFFFF; color: #64748B; font-size: 8px; letter-spacing: .12em; }
.audit-employment-summary { width: 100%; display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1fr; gap: 1px; margin: 12px 0 0; border: 1px solid color-mix(in srgb, #64748B 14%, #FFFFFF); border-radius: 3px; overflow: hidden; background: color-mix(in srgb, #64748B 14%, #FFFFFF); }
.audit-employment-summary > div { min-height: 48px; padding: 8px 9px; display: flex; flex-direction: column; justify-content: center; background: #FFFFFF; text-align: left; }
.audit-employment-summary span,.audit-employment-summary strong { display: block; }
.audit-employment-summary strong { margin-top: 3px; font-size: 10.5px; }
.audit-employment-summary strong { overflow-wrap: anywhere; }
.audit-personal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border: 1px solid #CBD5E1; background: #CBD5E1; }
.audit-personal-grid > div { min-height: 44px; padding: 8px 9px; display: flex; flex-direction: column; justify-content: center; background: #FFFFFF; break-inside: avoid; page-break-inside: avoid; }
.audit-personal-grid span { color: #475569; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
.audit-personal-grid strong { margin-top: 3px; font-size: 10.5px; overflow-wrap: anywhere; }
.audit-personal-wide { grid-column: 1 / -1; }
.audit-confidential { margin: 14px 0 0; color: #475569; font-size: 8px; font-weight: 750; letter-spacing: .12em; text-align: center; break-before: avoid-page; page-break-before: avoid; }
.audit-section { margin-top: 14px; break-inside: auto; page-break-inside: auto; }
.audit-section h2 { margin: 0 0 7px; padding-bottom: 5px; border-bottom: 1px solid #A7C9B8; color: #125F3D; font-family: Georgia,'Times New Roman',serif; font-size: 15px; break-after: avoid-page; page-break-after: avoid; }
.audit-section table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.audit-section thead { position: static; display: table-header-group; break-after: avoid-page; page-break-after: avoid; }
.audit-section tbody { break-inside: auto; page-break-inside: auto; }
.audit-section tr { break-inside: avoid-page; page-break-inside: avoid; }
.audit-section:last-of-type tbody tr:nth-last-child(-n+2) { break-after: avoid-page; page-break-after: avoid; }
.audit-section th { height: 34px; padding: 7px 8px; border: 1px solid #125F3D; text-align: center; vertical-align: middle; background: #18794E; color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 10px; font-weight: 800; line-height: 1.25; text-transform: uppercase; letter-spacing: .035em; white-space: normal; }
.audit-section td { padding: 8px; border: 1px solid #CBD5E1; background: #FFFFFF; color: #253244; vertical-align: top; font-family: Arial,Helvetica,sans-serif; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.audit-section tbody tr:nth-child(even) > td { background: #F4F8F6; }
.audit-section td small { display: block; margin-top: 3px; color: #475569; font-size: 10px; }
.audit-school-address { display: block; margin-top: 3px; color: #475569 !important; font-size: 10px; line-height: 1.35; }
.audit-degree-major { display: block; margin-top: 2px; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.audit-degree-awards { margin-top: 6px !important; padding-top: 5px; border-top: 1px solid color-mix(in srgb, #64748B 14%, #FFFFFF); color: #475569 !important; font-size: 10px; }
.audit-work-table td:last-child,.audit-credential-table td:last-child,.audit-training-table td:last-child,.audit-employment-history-table td:first-child { white-space: nowrap; }
.audit-signoff-block { break-inside: avoid-page; page-break-inside: avoid; }
.audit-report-footer { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 52px; break-before: avoid-page; page-break-before: avoid; break-inside: avoid-page; page-break-inside: avoid; }
.audit-report-footer > div { min-width: 0; padding: 0 4px; text-align: center; }
.audit-report-footer span,.audit-report-footer strong,.audit-report-footer small { display: block; }
.audit-report-footer span,.audit-report-footer small { color: #475569; font-size: 10px; }
.audit-report-footer span { padding-left: 7px; text-align: left; }
.audit-report-footer strong { min-height: 21px; margin-top: 24px; border-bottom: 1px solid #64748B; font-size: 10.5px; }
.audit-report-footer i { display: none; }
.print-frame { position: fixed; width: 1px; height: 1px; right: 0; bottom: 0; border: 0; opacity: 0; pointer-events: none; }
.confirm-modal { width: min(420px, calc(100% - 28px)); border: 0; border-radius: var(--radius-lg); padding: 0; color: var(--text); box-shadow: var(--shadow-md); }
.confirm-shell { padding: var(--space-5); text-align: center; }
.confirm-icon { width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 10px; display: grid; place-items: center; background: var(--warning-bg); color: var(--warning); font-weight: 800; }
.confirm-shell h2 { margin: 0; font-size: 17px; }
.confirm-shell p { margin: 8px 0 18px; color: var(--text-secondary); font-size: 12px; }
.confirm-reason { display: grid; gap: 6px; margin: 0 0 18px; text-align: left; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.confirm-reason textarea,.confirm-reason input { width: 100%; min-height: 44px; font: inherit; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--surface); }
.confirm-reason textarea { min-height: 78px; resize: vertical; }
.confirm-date { margin: 0 0 18px; border: 1px solid color-mix(in srgb, #64748B 12%, #FFFFFF); border-radius: var(--radius-sm); padding: 11px 12px; display: grid; gap: 7px; background: #FFFFFF; color: #475569; text-align: left; font-size: 12px; font-weight: 730; }
.confirm-date input { width: 100%; min-height: 42px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; background: white; color: var(--text); font: inherit; }
.confirm-date small { color: var(--text-secondary); font-size: 11px; font-weight: 560; line-height: 1.45; }
.confirm-date output { width: fit-content; border-radius: 999px; padding: 4px 8px; background: color-mix(in srgb, #64748B 6%, #FFFFFF); color: var(--primary-dark); font-size: 11px; font-weight: 750; }
.confirm-shell > div { display: flex; justify-content: center; gap: 8px; }

#toast { min-width: 250px; max-width: 380px; position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 60; padding: 12px 14px; border-radius: var(--radius-sm); background: #253244; color: white; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; font-size: 12px; }
#toast.show { opacity: 1; transform: translateY(0); }
#toast.error { background: var(--danger); }
.loading-skeleton { display: grid; gap: var(--space-4); }
.skeleton-line, .skeleton-grid i, .skeleton-panel { border-radius: var(--radius-md); background: linear-gradient(90deg,color-mix(in srgb, #64748B 8%, #FFFFFF) 25%,color-mix(in srgb, #64748B 5%, #FFFFFF) 37%,color-mix(in srgb, #64748B 8%, #FFFFFF) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.skeleton-line { height: 36px; width: 280px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--space-3); }
.skeleton-grid i { height: 130px; }
.skeleton-panel { height: 360px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (min-width: 1500px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

@media (max-width: 1280px) {
  .summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .permissions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .skeleton-grid { grid-template-columns: repeat(3,1fr); }
  .suspension-urgency { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-qualification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1024px) {
  .app-shell, body.sidebar-collapsed .app-shell { grid-template-columns: 1fr; }
  .sidebar { width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-md); }
  body.mobile-menu-open .sidebar { transform: translateX(0); }
  .mobile-overlay { position: fixed; inset: 0; z-index: 15; background: rgba(36,50,71,.45); }
  .sidebar-collapse { display: none; }
  body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .sidebar-footer-copy, body.sidebar-collapsed .sidebar-build-info, body.sidebar-collapsed nav button b { display: initial; }
  body.sidebar-collapsed .sidebar-header { min-height: 146px; padding: 10px 9px 11px; }
  body.sidebar-collapsed .brand { width: 100%; }
  body.sidebar-collapsed .brand-mark { width: 82px; height: 82px; overflow: visible; }
  body.sidebar-collapsed .brand-mark img { object-fit: contain; }
  body.sidebar-collapsed nav button { grid-template-columns: 26px minmax(0,1fr) auto; justify-items: initial; padding-inline: 10px; }
  body.sidebar-collapsed .sidebar-footer { justify-content: flex-start; }
  .mobile-menu { display: grid !important; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-control-bar { grid-template-columns: 1fr; align-items: stretch; }
  .dashboard-control-date { border-top: 1px solid var(--border); border-left: 0; padding-top: 10px; padding-left: 0; }
  .dashboard-filters { width: 100%; justify-content: flex-start; }
  .dashboard-analytics-grid.primary-row,.dashboard-analytics-grid.secondary-row,.dashboard-analytics-grid.dashboard-hero-row,.dashboard-analytics-grid.dashboard-insight-row,.dashboard-analytics-grid.dashboard-trend-row { grid-template-columns: 1fr; }
  .operations-strip { grid-template-columns: repeat(2,1fr); }
  .operation-item { border-bottom: 1px solid var(--border); }
  .operation-item:nth-child(even) { border-right: 0; }
  .operation-item:last-child { border-bottom: 0; }
  .global-search { width: min(250px, 28vw); }
  .relieving-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qualification-urgency { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .suspension-urgency { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .orientation-participant-list { grid-template-columns: 1fr; }
  .orientation-detail-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .training-detail-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .training-passing-controls { justify-content: flex-start; }
  .training-session-facts,.training-source-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-builder-layout { grid-template-columns: 1fr; }
  .report-preview-panel { position: static; }
}
@media (max-width: 1180px) and (min-width: 821px) {
  .hr-monitoring-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .topbar { min-height: 76px; padding: 12px 14px; }
  .title-area h1 { font-size: 22px; }
  .title-area > div > p:last-child { display: none; }
  .breadcrumb { display: none; }
  .global-search { display: none; }
  .profile-menu summary { min-width: 44px; width: 44px; grid-template-columns: 1fr; padding: 5px; }
  .profile-menu summary > .user-copy, .profile-menu summary > span:last-child { display: none; }
  .profile-popover { right: 0; }
  .content { padding: var(--space-4); }
  .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-analytics-grid.equal-row,.dashboard-analytics-grid.attention-row { grid-template-columns: 1fr; }
  .dashboard-filters label { flex: 1 1 160px; }
  .dashboard-filters select { width: 100%; }
  .dashboard-control-actions { flex: 1 1 100%; justify-content: flex-end; }
  .donut-layout { grid-template-columns: minmax(120px,.7fr) minmax(150px,1fr); }
  .dashboard-activity { grid-template-columns: 1fr; }
  .dashboard-activity li:nth-last-child(2) { border-bottom: 1px solid var(--border); }
  .summary-card { min-height: 122px; }
  .dashboard-two, .report-grid, .settings-grid { grid-template-columns: 1fr; }
  .permissions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-toolbar { align-items: flex-start; flex-direction: column; }
  .page-toolbar > .button, .page-toolbar > .toolbar-actions { width: 100%; }
  .page-toolbar > .toolbar-actions .button { flex: 1; }
  .hr-monitoring-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); overflow: visible; }
  .hr-monitoring-tabs button { min-height: 94px; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; padding: 12px; }
  .hr-monitoring-tab-icon { width: 44px; height: 44px; }
  .hr-monitoring-tab-icon svg { width: 27px; height: 27px; }
  .hr-monitoring-tab-copy strong { white-space: normal; }
  .monitoring-rules-body { grid-template-columns: 1fr; }
  .qualification-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(165px,1fr); }
  .qualification-tabs { scrollbar-width: none; }
  .qualification-tabs::-webkit-scrollbar { display: none; }
  .table-toolbar { align-items: flex-start; flex-direction: column; }
  .table-filters { width: 100%; }
  .table-search-control { width: min(100%, 340px); }
  .table-search-control input { width: 100%; }
  .table-toolbar-end { width: 100%; justify-content: space-between; }
  .table-toolbar input { width: min(100%, 320px); }
  .form-grid { grid-template-columns: 1fr; }
  .government-profile-grid { grid-template-columns: 1fr; }
  .employee-form-layout { display: block; }
  .employee-form-layout .form-tabs { display: none; }
  .employee-step-select { margin-bottom: 16px; display: grid; gap: 6px; color: #475569; font-size: 12px; font-weight: 650; }
  .employee-step-select select { width: 100%; min-height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 10px; background: white; color: var(--text); font-size: 13px; }
  .form-section-title, .field.full { grid-column: auto; }
  .form-grid > .field:not(.full):not(.check-field) > span:first-child { min-height: auto; display: block; }
  .education-toolbar { align-items: stretch; flex-direction: column; }
  .education-toolbar .button { width: 100%; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .checkbox-grid.three { grid-template-columns: 1fr; }
  .decision-options { grid-template-columns: 1fr; }
  .decision-options.four { grid-template-columns: 1fr; }
  .decision-options.five { grid-template-columns: 1fr; }
  .form-subgrid { grid-template-columns: 1fr; }
  .form-subgrid > .full { grid-column: auto; }
  .leave-form-grid > .field:not(.full):not(.check-field) { height: auto; grid-template-rows: auto; }
  .profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employment-history-event { grid-template-columns: 96px 38px minmax(0,1fr); gap: 9px; }
  .employment-history-event::after { left: 114px; }
  .employment-history-marker { width: 34px; height: 34px; }
  .employment-history-changes .employment-change-comparison > div { grid-template-columns: minmax(105px,.7fr) minmax(0,1fr) 18px minmax(0,1fr); }
  .relieving-detail-summary { grid-template-columns: 1fr; }
  .medical-extension-timeline dl { grid-template-columns: 1fr; }
  .qualification-flow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px,1fr); }
  .qualification-timeline li { grid-template-columns: 86px 18px minmax(0,1fr); gap: 8px; }
  .qualification-timeline li::after { left: 95px; }
  .orientation-detail-summary { grid-template-columns: 1fr; }
  .training-passing-controls { align-items: stretch; flex-wrap: wrap; }
  .training-passing-controls > span { width: 100%; }
  .training-session-header { align-items: flex-start; flex-direction: column; }
  .training-session-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .training-session-audit { grid-template-columns: 1fr; }
  .training-session-facts,.training-source-summary { grid-template-columns: 1fr; }
  .relieving-detail-hero { align-items: flex-start; flex-direction: column; }
  .relieving-detail-hero .profile-actions { justify-content: flex-start; }
  .upload-zone-main { grid-template-columns: 1fr; }
  .report-builder-toolbar { align-items: stretch; flex-direction: column; }
  .report-builder-toolbar-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-builder-toolbar-actions .button { width: 100%; }
  .report-builder-toolbar-actions .button.primary,.report-total-count { grid-column: 1 / -1; }
  .report-total-count { margin: 0; text-align: center; }
  .report-signatory-person { grid-template-columns: 1fr; }
  .report-signatory-person b { grid-column: auto; }
  .report-preset-buttons { grid-template-columns: 1fr; }
  .report-preview-label { flex-direction: column; }
  .audit-report-sheet { min-width: 740px; }
  .report-preview-panel { overflow-x: auto; }
  .report-section-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-qualification-grid { grid-template-columns: 1fr; }
  .skeleton-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .content { padding: var(--space-3); }
  .topbar { padding-inline: var(--space-3); }
  .title-area { gap: var(--space-2); }
  .title-area h1 { font-size: 20px; }
  .summary-grid { grid-template-columns: 1fr; }
  .dashboard-control-bar { padding: 14px; }
  .dashboard-filters { display: grid; grid-template-columns: 1fr; }
  .dashboard-filters label,.dashboard-filters .button { width: 100%; }
  .dashboard-control-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .dashboard-module-grid { grid-template-columns: 1fr; }
  .dashboard-kpi { min-height: 112px; padding: 12px; }
  .dashboard-kpi::before { left: 12px; }
  .dashboard-kpi-head { align-items: flex-start; font-size: 9px; }
  .dashboard-kpi-head i { width: 29px; height: 29px; }
  .dashboard-kpi > strong { font-size: 26px; }
  .dashboard-kpi > small { font-size: 9px; line-height: 1.25; }
  .dashboard-chart-body { min-height: 250px; padding-inline: 10px; }
  .headcount-chart { min-height: 195px; }
  .donut-layout { grid-template-columns: 1fr; padding: 18px; }
  .donut-chart { width: 145px; }
  .department-chart button { grid-template-columns: minmax(90px,1fr) minmax(90px,1.4fr) 28px; gap: 7px; }
  .action-status-summary { align-items: stretch; flex-direction: column; }
  .action-status-summary > button { width: 100%; }
  .dashboard-attention-summary .action-status-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .appraisal-monitor { grid-template-columns: 1fr; }
  .appraisal-progress { width: 135px; }
  .movement-chart,.mini-trend { overflow-x: auto; grid-auto-columns: minmax(32px,1fr); }
  .attention-list > button { grid-template-columns: 32px minmax(0,1fr); }
  .attention-list > button > span:last-child { grid-column: 2; justify-items: start; }
  .dashboard-action-list-footer { align-items: stretch; flex-direction: column; }
  .dashboard-action-list-footer .button { width: 100%; }
  .dashboard-detail-monitor > summary { align-items: flex-start; }
  .dashboard-detail-monitor > summary > span:last-child { font-size: 0; }
  .dashboard-detail-monitor > summary > span:last-child .ui-icon { width: 18px; height: 18px; }
  .dashboard-detail-monitor-body { padding: var(--space-3); }
  .summary-card { min-height: 112px; }
  .page-toolbar .toolbar-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-toolbar .toolbar-actions .button:only-child { grid-column: 1/-1; }
  .button:not(.small), .icon-button { min-height: 44px; }
  .hr-monitoring-tabs button { min-height: 116px; grid-template-columns: 1fr; grid-template-rows: 42px auto auto; justify-items: center; gap: 6px; padding: 12px 8px 10px; text-align: center; }
  .hr-monitoring-tab-icon { width: 42px; height: 42px; }
  .hr-monitoring-tab-icon svg { width: 26px; height: 26px; }
  .hr-monitoring-tab-copy { gap: 2px; justify-items: center; }
  .hr-monitoring-tab-copy strong { font-size: 13px; }
  .hr-monitoring-tab-copy small { font-size: 12px; white-space: normal; }
  .hr-monitoring-tab-count { position: absolute; top: 8px; right: 8px; min-width: 0; }
  .hr-monitoring-tab-count b { min-width: 25px; height: 25px; padding: 0 6px; font-size: 10px; }
  .hr-monitoring-tab-count small { display: none; }
  .training-session-tabs button { min-height: 82px; grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 10px 8px; text-align: center; }
  .training-session-tab-label { justify-content: center; }
  .training-session-metrics { grid-template-columns: 1fr; }
  .qualification-tabs { grid-auto-columns: minmax(220px,82vw); }
  .table-toolbar { padding: 10px; }
  .table-filters { display: grid; grid-template-columns: 1fr; }
  .table-search-control, .table-toolbar input, .table-toolbar select, .table-clear-filters { width: 100%; max-width: none; }
  .table-toolbar-end { align-items: stretch; flex-wrap: wrap; }
  .table-toolbar-end .button { flex: 1; }
  .panel-header { min-height: 56px; align-items: flex-start; flex-wrap: wrap; }
  .operations-strip { grid-template-columns: 1fr; }
  .operation-item { border-right: 0; border-bottom: 1px solid var(--border); }
  .operation-item:nth-child(3) { border-bottom: 1px solid var(--border); }
  .operation-item:last-child { border-bottom: 0; }
  .quick-actions, .permissions { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .history-view-toolbar { align-items: stretch; flex-direction: column; }
  .history-view-switch { width: 100%; }
  .history-view-switch button { min-height: 44px; }
  .employment-history-timeline { padding: 14px 12px 16px; }
  .employment-history-event { grid-template-columns: 34px minmax(0,1fr); gap: 9px; padding-bottom: 14px; }
  .employment-history-event > time { grid-column: 2; grid-row: 1; padding: 0 0 2px; text-align: left; }
  .employment-history-marker { grid-column: 1; grid-row: 1 / span 2; width: 32px; height: 32px; }
  .employment-history-event::after { top: 34px; left: 15px; }
  .employment-history-card { grid-column: 2; grid-row: 2; padding: 13px; }
  .employment-history-card h4 { font-size: 15px; }
  .employment-history-changes .employment-change-comparison > div { grid-template-columns: 1fr 18px 1fr; gap: 7px; }
  .employment-history-changes .employment-change-comparison strong { grid-column: 1 / -1; }
  .employment-history-meta { grid-template-columns: 1fr; }
  .employee-activity-timeline { padding: 12px; }
  .employee-activity-event { padding: 12px; grid-template-columns: 32px minmax(0,1fr); gap: 9px; }
  .employee-activity-icon { width: 32px; height: 32px; }
  .employee-activity-event footer { display: grid; gap: 4px; }
  .employee-activity-event footer span + span::before { display: none; }
  .relieving-overview { grid-template-columns: 1fr; }
  .qualification-urgency { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .suspension-urgency { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-hero { grid-template-columns: 44px 1fr; }
  .profile-actions { grid-column: 1/-1; justify-content: stretch; }
  .profile-actions .button { flex: 1; }
  .profile-actions .action-menu-labeled { flex: 1; }
  .profile-actions .button.small,.profile-actions .action-menu-labeled summary { min-height: 44px; }
  .profile-actions .action-menu-labeled summary { width: 100%; justify-content: center; }
  .action-popover button,.action-popover a { min-height: 44px; }
  .table-footer { align-items: flex-start; flex-direction: column; }
  .dialog-shell > footer { flex-wrap: wrap; }
  .dialog-shell > footer .button { flex: 1; }
  .form-feedback { width: 100%; }
  .skeleton-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .dashboard-kpi-grid.hr-performance-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hr-management-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hr-management-summary article:last-child { grid-column: 1 / -1; }
  .hr-performance-controls { align-items: stretch; flex-direction: column; }
  .hr-performance-controls .dashboard-filters { max-width: none; justify-content: flex-start; }
  .hr-performance-controls { grid-template-columns: 1fr; }
  .hr-performance-controls .dashboard-filters { grid-template-columns: repeat(4,minmax(120px,1fr)); }
  .hr-report-attention-list article { grid-template-columns: 34px minmax(170px,1fr) minmax(135px,auto) auto; }
}
@media (max-width: 720px) {
  .hr-performance-period { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hr-performance-period > div:first-child { min-width: 0; }
  .hr-performance-period .button { width: 100%; margin: 3px 0 0; }
  .hr-performance-controls .dashboard-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hr-performance-controls .dashboard-filters label { min-width: 0; }
  .hr-performance-controls .dashboard-filters input,.hr-performance-controls .dashboard-filters select { width: 100%; }
  .hr-performance-analysis { grid-template-columns: 1fr !important; }
  .hr-report-tabs { display: flex; }
  .hr-report-tabs button { min-width: max-content; flex: 1 0 auto; }
  .hr-department-bars button { grid-template-columns: minmax(120px,1fr) minmax(120px,1.4fr) 42px; }
  .hr-aging-bars { min-width: 610px; }
  .dashboard-analytics-grid:has(.hr-aging-bars) { overflow-x: auto; }
  .hr-report-attention-list article { grid-template-columns: 32px minmax(0,1fr) auto; }
  .hr-report-attention-list article > span:nth-last-child(2) { grid-column: 2; justify-items: start; }
  .hr-report-attention-list article > .button { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 480px) {
  .dashboard-kpi-grid.hr-performance-kpis,.hr-management-summary { grid-template-columns: 1fr; }
  .hr-management-summary article:last-child { grid-column: auto; }
  .hr-performance-controls .dashboard-filters { grid-template-columns: 1fr; }
  .hr-performance-trend { padding-inline: 9px; overflow-x: auto; }
  .hr-performance-trend svg { min-width: 560px; }
  .hr-performance-period { padding: 12px; }
  .hr-performance-period > div { width: 100%; }
  .hr-report-tabs button { min-height: 48px; padding-inline: 14px; }
  .hr-department-bars button { grid-template-columns: minmax(105px,1fr) minmax(90px,1.2fr) 38px; gap: 8px; }
  .hr-report-attention-list article { padding: 12px; }
  .hr-report-management-summary { padding: 14px; }
  .reports-operational-tools-body { padding-inline: 10px; }
}

/* Employee 201 File — scoped enterprise typography and layout */
.profile-modal.employee-201-modal { width: min(1360px, calc(100% - 24px)); max-height: 94vh; }
.employee-201-modal .dialog-shell > header { min-height: 88px; padding: 20px 24px; align-items: center; background: #FFFFFF; }
.employee-201-modal .dialog-shell > header h2 { font-size: clamp(24px,2vw,28px); font-weight: 740; line-height: 1.2; letter-spacing: -.025em; }
.employee-201-modal .dialog-shell > header p { max-width: 980px; margin-top: 6px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.employee-201-modal .dialog-body { max-height: calc(94vh - 88px); padding: 24px; background: #FFFFFF; }
.employee-201-file { min-width: 0; display: grid; gap: 20px; color: var(--text); font-size: 14px; line-height: 1.5; }
.employee-201-file > .panel { margin: 0; overflow: hidden; border-color: color-mix(in srgb, #64748B 11%, #FFFFFF); box-shadow: 0 7px 24px rgba(36,50,71,.05); }

.employee-201-identity { min-width: 0; margin: 0; border: 1px solid color-mix(in srgb, #64748B 13%, #FFFFFF); border-radius: var(--radius-lg); padding: 20px; grid-template-columns: 72px minmax(260px,1fr) minmax(320px,auto); align-items: start; gap: 18px; background: white; box-shadow: 0 8px 26px rgba(36,50,71,.06); }
.employee-201-identity .avatar { width: 72px; height: 72px; margin-top: 4px; grid-row: 1 / 3; font-size: 19px; box-shadow: 0 0 0 4px color-mix(in srgb, #64748B 6%, #FFFFFF); }
.profile-identity-copy { min-width: 0; }
.profile-identity-id { width: fit-content; margin-bottom: 5px; display: inline-flex; align-items: baseline; gap: 6px; color: var(--primary-dark); }
.profile-identity-id small { color: #64748B; font-size: 10.5px; font-weight: 720; letter-spacing: .025em; }
.profile-identity-id strong { color: var(--primary-dark); font-size: 13.5px; font-weight: 760; }
.employee-201-identity h3 { margin: 0; font-size: clamp(18px,1.7vw,22px); font-weight: 720; line-height: 1.25; letter-spacing: -.015em; overflow-wrap: anywhere; }
.profile-identity-badges { min-width: 0; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.profile-identity-facts { width: 100%; margin-top: 2px; grid-column: 2 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4,minmax(120px,1fr)); gap: 7px; }
.profile-identity-facts > span { min-width: 0; padding: 8px 10px; display: grid; gap: 2px; border: 1px solid color-mix(in srgb, #64748B 10%, #FFFFFF); border-radius: 8px; background: #FFFFFF; }
.profile-identity-facts small { color: #64748B; font-size: 10.5px; font-weight: 690; line-height: 1.3; letter-spacing: .01em; }
.profile-identity-facts strong { color: #253244; font-size: 13.5px; font-weight: 690; line-height: 1.4; overflow-wrap: anywhere; }
.employee-201-file .profile-actions { grid-column: 3; grid-row: 1; align-self: center; align-content: center; gap: 8px; }
.employee-201-file .profile-actions .button.small,.employee-201-file .profile-actions .action-menu-labeled summary { min-height: 40px; padding: 8px 12px; font-size: 13px; line-height: 1.2; }
.employee-201-file .profile-actions .ui-icon { width: 17px; height: 17px; }

.employee-201-summary { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, #64748B 11%, #FFFFFF); border-radius: var(--radius-lg); background: white; box-shadow: 0 7px 24px rgba(36,50,71,.05); }
.employee-201-section-heading { min-height: 72px; padding: 15px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #FFFFFF; }
.employee-201-section-heading h2 { margin: 0; font-size: 18px; font-weight: 710; line-height: 1.3; letter-spacing: -.01em; }
.employee-201-section-heading p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.employee-201-file .profile-grid { margin: 0; padding: 18px; gap: 12px; }
.employee-201-file .profile-grid > div { min-height: 84px; padding: 14px 15px; border-color: color-mix(in srgb, #64748B 11%, #FFFFFF); display: flex; flex-direction: column; justify-content: center; background: #FFFFFF; }
.employee-201-file .profile-grid span:not(.status-badge) { margin-bottom: 6px; color: #566875; font-size: 13px; font-weight: 650; line-height: 1.35; }
.employee-201-file .profile-grid strong { font-size: 15px; font-weight: 620; line-height: 1.5; }

.employee-201-file .panel-header { min-height: 74px; padding: 15px 18px; gap: 16px; background: #FFFFFF; }
.employee-201-file .panel-header > div { min-width: 0; }
.employee-201-file .panel-header h2 { font-size: 18px; font-weight: 710; line-height: 1.3; letter-spacing: -.01em; }
.employee-201-file .panel-header p { margin-top: 4px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.employee-201-file .panel-header > span { flex: 0 0 auto; border: 1px solid color-mix(in srgb, #64748B 13%, #FFFFFF); border-radius: 999px; padding: 4px 9px; background: white; color: var(--text-secondary); font-size: 12px; font-weight: 680; white-space: nowrap; }
.profile-collapsible-panel > summary { list-style: none; cursor: pointer; user-select: none; border-bottom: 0; transition: background .16s ease; }
.profile-collapsible-panel > summary::-webkit-details-marker { display: none; }
.profile-collapsible-panel > summary:hover { background: color-mix(in srgb, var(--primary) 4%, #FFFFFF); }
.profile-collapsible-panel > summary:focus-visible { outline: 3px solid rgba(36,50,71,.16); outline-offset: -3px; }
.profile-collapsible-panel[open] > summary { border-bottom: 1px solid var(--border); }
.profile-collapsible-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; }
.profile-collapsible-meta > span:first-child:not(.profile-collapsible-chevron) { border: 1px solid color-mix(in srgb, #64748B 13%, #FFFFFF); border-radius: 999px; padding: 4px 9px; background: white; color: var(--text-secondary); font-size: 12px; font-weight: 680; white-space: nowrap; }
.profile-collapsible-chevron { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); }
.profile-collapsible-chevron .ui-icon { width: 17px; height: 17px; transition: transform .16s ease; }
.profile-collapsible-panel[open] .profile-collapsible-chevron .ui-icon { transform: rotate(180deg); }
.profile-collapsible-content { min-width: 0; overflow: hidden; }
.employee-201-file .table-wrap { scrollbar-gutter: stable; }
.employee-201-file table { min-width: 760px; }
.employee-201-file th { height: 46px; padding: 11px 14px; color: #475569; font-size: 13px; font-weight: 710; line-height: 1.35; letter-spacing: .005em; text-transform: none; white-space: normal; }
.employee-201-file td { padding: 13px 14px; font-size: 13px; line-height: 1.5; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.employee-201-file td strong { font-size: 13px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.employee-201-file td small,.employee-201-file .table-secondary { margin-top: 3px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.employee-201-file td a { font-weight: 650; text-underline-offset: 3px; }
.employee-201-file .status-badge { min-height: 26px; padding: 4px 9px; font-size: 11.5px; line-height: 1.2; }
.employee-201-file .profile-record-section { padding: 18px; }
.employee-201-file .profile-record-heading { margin-bottom: 12px; }
.employee-201-file .profile-record-heading strong { font-size: 16px; line-height: 1.35; }
.employee-201-file .profile-record-heading small { margin-top: 3px; font-size: 13px; line-height: 1.45; }
.employee-201-file .profile-record-heading > span { font-size: 11px; }
.employee-201-file .empty-state { padding: 30px 20px; }
.employee-201-file .empty-state h3 { font-size: 16px; }
.employee-201-file .empty-state p { max-width: 620px; font-size: 13px; line-height: 1.5; }

.employee-201-file .history-view-toolbar { padding: 14px 16px; }
.employee-201-file .history-view-toolbar strong { font-size: 15px; }
.employee-201-file .history-view-toolbar small { margin-top: 3px; font-size: 13px; }
.employee-201-file .history-view-switch button { min-height: 38px; font-size: 13px; }
.employee-201-file .employment-history-timeline { padding: 16px 18px 18px; background: white; }
.employment-history-year + .employment-history-year { margin-top: 18px; }
.employment-history-year > h3 { margin: 0 0 8px; color: #475569; font-size: 14px; font-weight: 760; letter-spacing: .02em; }
.employment-history-compact-list { overflow: hidden; border: 1px solid color-mix(in srgb, #64748B 11%, #FFFFFF); border-radius: var(--radius-md); background: white; }
.employment-history-compact-row + .employment-history-compact-row { border-top: 1px solid color-mix(in srgb, #64748B 8%, #FFFFFF); }
.employment-history-routine-row { min-height: 64px; padding: 10px 14px; display: grid; grid-template-columns: 160px 30px minmax(0,1fr); align-items: center; gap: 11px; background: #FFFFFF; }
.employment-history-routine-row > time { color: #64748B; font-size: 12px; font-weight: 640; line-height: 1.4; white-space: nowrap; }
.employment-history-routine-row > time small { display: block; margin-bottom: 2px; color: #64748B; font-size: 10px; font-weight: 720; letter-spacing: .02em; }
.employment-history-routine-row .employment-history-compact-marker { width: 28px; height: 28px; color: #64748B; background: color-mix(in srgb, #64748B 6%, #FFFFFF); }
.employment-history-routine-row .employment-history-compact-marker .ui-icon { width: 14px; height: 14px; }
.employment-history-routine-row .employment-history-compact-copy small { color: #64748B; font-size: 10.5px; font-weight: 700; }
.employment-history-routine-row .employment-history-compact-copy strong { font-size: 14px; font-weight: 650; }
.employment-history-routine-row .employment-history-compact-copy > span { font-size: 12.5px; }
.employment-history-compact-row > summary { min-height: 78px; padding: 12px 14px; display: grid; grid-template-columns: 108px 34px minmax(0,1fr) auto; align-items: center; gap: 12px; cursor: pointer; list-style: none; transition: background .16s ease; }
.employment-history-compact-row > summary::-webkit-details-marker { display: none; }
.employment-history-compact-row > summary:hover { background: #FFFFFF; }
.employment-history-compact-row > summary:focus-visible { outline: 3px solid rgba(36,50,71,.16); outline-offset: -3px; }
.employment-history-compact-row > summary time { color: #475569; font-size: 13px; font-weight: 720; white-space: nowrap; }
.employment-history-compact-marker { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--primary-dark); background: color-mix(in srgb, #64748B 5%, #FFFFFF); }
.employment-history-compact-marker .ui-icon { width: 16px; height: 16px; }
.employment-history-compact-copy { min-width: 0; display: grid; gap: 2px; }
.employment-history-compact-copy small { color: var(--primary); font-size: 11.5px; font-weight: 740; line-height: 1.35; letter-spacing: .01em; }
.employment-history-compact-copy strong { color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; overflow-wrap: anywhere; }
.employment-history-compact-copy > span { color: var(--text-secondary); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.history-expand-label,.activity-expand-control { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-size: 11px; font-weight: 700; white-space: nowrap; }
.history-expand-label .ui-icon,.activity-expand-control .ui-icon { width: 15px; height: 15px; transition: transform .16s ease; }
.employment-history-compact-row[open] .history-expand-label .ui-icon,.employee-activity-group[open] .activity-expand-control .ui-icon { transform: rotate(180deg); }
.employment-history-compact-details { padding: 2px 14px 16px 168px; background: #FFFFFF; }
.employment-history-key-dates { margin: 12px 0 2px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.employment-history-key-dates > span { min-width: 0; border: 1px solid color-mix(in srgb, #64748B 12%, #FFFFFF); border-radius: 8px; padding: 9px 11px; display: grid; gap: 3px; background: #fff; }
.employment-history-key-dates > span.effectivity-date { border-color: color-mix(in srgb, #64748B 22%, #FFFFFF); background: #FFFFFF; }
.employment-history-key-dates small { color: #64748B; font-size: 10.5px; font-weight: 720; line-height: 1.3; }
.employment-history-key-dates strong { color: #253244; font-size: 13.5px; font-weight: 750; line-height: 1.4; }
.employment-history-compact-details .employment-history-changes { margin-top: 0; }
.employee-201-file .employment-history-remarks { font-size: 13px; line-height: 1.5; }
.employee-201-file .employment-history-meta dt { color: #64748B; font-size: 11.5px; font-weight: 720; letter-spacing: .01em; }
.employee-201-file .employment-history-meta dd { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.history-load-row,.activity-load-row { min-height: 54px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-load-row > span { color: var(--text-secondary); font-size: 12px; }

.employee-record-shell { overflow: hidden; background: white; }
.employee-record-toolbar { padding: 15px 16px; border-bottom: 1px solid var(--border); display: grid; gap: 13px; background: #FFFFFF; }
.employee-record-toolbar > div:first-child { min-width: 0; display: grid; gap: 3px; }
.employee-record-toolbar strong { color: var(--text); font-size: 15px; font-weight: 730; line-height: 1.35; }
.employee-record-toolbar small { color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
.employee-record-toolbar > div.employee-record-filters { min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(max-content,1fr)); gap: 7px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: thin; }
.employee-record-filters button { min-height: 38px; border: 1px solid color-mix(in srgb, #64748B 13%, #FFFFFF); border-radius: 999px; padding: 7px 11px; display: inline-flex; align-items: center; gap: 7px; background: white; color: #475569; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.employee-record-filters button { width: 100%; min-width: 0; justify-content: center; white-space: nowrap; }
.employee-record-filters button:hover { border-color: color-mix(in srgb, #64748B 33%, #FFFFFF); color: var(--primary-dark); background: #FFFFFF; }
.employee-record-filters button:focus-visible { outline: 3px solid rgba(36,50,71,.18); outline-offset: 2px; }
.employee-record-filters button.active { border-color: var(--primary); color: white; background: var(--primary); box-shadow: 0 3px 9px rgba(36,50,71,.14); }
.employee-record-filters button span { min-width: 20px; min-height: 20px; border-radius: 999px; padding: 2px 6px; display: inline-grid; place-items: center; background: color-mix(in srgb, #64748B 6%, #FFFFFF); color: #475569; font-size: 10.5px; font-weight: 760; }
.employee-record-filters button.active span { background: rgba(255,255,255,.19); color: white; }
.employee-record-list { background: white; }
.employee-record-event + .employee-record-event { border-top: 1px solid color-mix(in srgb, #64748B 9%, #FFFFFF); }
.employee-record-event > summary { min-height: 84px; padding: 13px 16px; display: grid; grid-template-columns: 112px 36px minmax(0,1fr) auto auto; align-items: center; gap: 12px; list-style: none; cursor: pointer; transition: background .16s ease; }
.employee-record-event > summary::-webkit-details-marker { display: none; }
.employee-record-event > summary:hover { background: #FFFFFF; }
.employee-record-event > summary:focus-visible { outline: 3px solid rgba(36,50,71,.16); outline-offset: -3px; }
.employee-record-event > summary time { color: #475569; font-size: 12.5px; font-weight: 720; line-height: 1.4; white-space: nowrap; }
.employee-record-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, #64748B 13%, #FFFFFF); border-radius: 50%; color: #475569; background: color-mix(in srgb, #64748B 5%, #FFFFFF); }
.employee-record-icon .ui-icon { width: 17px; height: 17px; }
.employee-record-icon.category-leaves { color: #267251; background: color-mix(in srgb, #64748B 5%, #FFFFFF); }
.employee-record-icon.category-violations { color: #a24c2c; background: #FFFFFF; }
.employee-record-icon.category-qualifications { color: #756021; background: #fff9e7; }
.employee-record-icon.category-training { color: #64748B; background: #FFFFFF; }
.employee-record-icon.category-documents { color: #64748B; background: color-mix(in srgb, #64748B 5%, #FFFFFF); }
.employee-record-copy { min-width: 0; display: grid; gap: 2px; }
.employee-record-copy small { color: var(--primary); font-size: 10.5px; font-weight: 760; line-height: 1.3; letter-spacing: .025em; text-transform: uppercase; }
.employee-record-copy strong { color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.employee-record-copy > span { color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.employee-record-status { justify-self: end; }
.employee-record-event[open] .activity-expand-control .ui-icon { transform: rotate(180deg); }
.employee-record-details { padding: 2px 16px 16px 180px; background: #FFFFFF; }
.employee-record-details dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.employee-record-details dl > div { min-width: 0; border: 1px solid color-mix(in srgb, #64748B 11%, #FFFFFF); border-radius: 8px; padding: 9px 10px; display: grid; gap: 3px; background: white; }
.employee-record-details dt { color: #64748B; font-size: 10.5px; font-weight: 730; line-height: 1.3; }
.employee-record-details dd { margin: 0; color: #253244; font-size: 12.5px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.employee-record-details > p { margin: 10px 0 0; color: #64748B; font-size: 11px; line-height: 1.4; }
.employee-record-shell > .history-load-row { padding: 12px 16px 16px; border-top: 1px solid color-mix(in srgb, #64748B 6%, #FFFFFF); }

.employee-activity-shell { background: white; }
.employee-activity-log { margin-top: 0; }
.employee-activity-log > summary { min-height: 48px; font-size: 12px; }
.employee-activity-log[open] > summary { border-bottom-color: color-mix(in srgb, #64748B 12%, #FFFFFF); }
.employee-activity-toolbar { padding: 14px 16px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(260px,1fr) 180px 130px auto; align-items: center; gap: 10px; background: #FFFFFF; }
.employee-activity-search { min-width: 0; position: relative; }
.employee-activity-search .ui-icon { width: 17px; height: 17px; position: absolute; top: 50%; left: 11px; translate: 0 -50%; color: var(--text-secondary); pointer-events: none; }
.employee-activity-search input,.employee-activity-toolbar select { width: 100%; min-height: 42px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 11px; background: white; color: var(--text); font: inherit; font-size: 12.5px; }
.employee-activity-search input { padding-left: 36px; }
.employee-activity-search input:focus,.employee-activity-toolbar select:focus { border-color: #64748B; box-shadow: 0 0 0 3px rgba(36,50,71,.1); outline: 0; }
.employee-activity-result-count { color: var(--text-secondary); font-size: 12px; font-weight: 620; text-align: right; white-space: nowrap; }
.employee-activity-groups { background: white; }
.employee-activity-group + .employee-activity-group { border-top: 1px solid color-mix(in srgb, #64748B 8%, #FFFFFF); }
.employee-activity-group > summary { min-height: 80px; padding: 12px 16px; display: grid; grid-template-columns: 160px 112px minmax(0,1fr) 74px 58px; align-items: center; gap: 12px; cursor: pointer; list-style: none; transition: background .16s ease; }
.employee-activity-group > summary::-webkit-details-marker { display: none; }
.employee-activity-group > summary:hover { background: #FFFFFF; }
.employee-activity-group > summary:focus-visible { outline: 3px solid rgba(36,50,71,.16); outline-offset: -3px; }
.employee-activity-group > summary time { color: #475569; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.employee-activity-category { width: fit-content; border: 1px solid color-mix(in srgb, #64748B 15%, #FFFFFF); border-radius: 999px; padding: 4px 8px; color: #475569; background: color-mix(in srgb, #64748B 5%, #FFFFFF); font-size: 11px; font-weight: 730; line-height: 1.3; white-space: nowrap; }
.employee-activity-group-copy { min-width: 0; display: grid; gap: 3px; }
.employee-activity-group-copy strong { color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -.005em; overflow-wrap: anywhere; }
.employee-activity-group-copy small { display: -webkit-box; overflow: hidden; color: var(--text-secondary); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.employee-activity-update-count { color: var(--text-secondary); font-size: 11.5px; font-weight: 680; text-align: right; white-space: nowrap; }
.employee-activity-group-details { padding: 2px 16px 14px 300px; background: #FFFFFF; }
.employee-activity-update { padding: 12px 0; display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 14px; border-top: 1px solid color-mix(in srgb, #64748B 10%, #FFFFFF); }
.employee-activity-update:first-child { border-top: 0; }
.employee-activity-update > time { color: #64748B; font-size: 12px; font-weight: 690; line-height: 1.45; }
.employee-activity-update > div { min-width: 0; }
.employee-activity-update strong { color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.employee-activity-detail-body { margin-top: 8px; }
.employee-activity-detail-body .structured-detail-list { gap: 6px; }
.employee-activity-detail-body .structured-detail-item { grid-template-columns: minmax(132px,.42fr) minmax(0,1fr); background: #fff; }
.employee-activity-update footer { margin-top: 10px; padding-top: 9px; display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px dashed color-mix(in srgb, #64748B 13%, #FFFFFF); color: #64748B; font-size: 11.5px; line-height: 1.45; }
.employee-activity-update footer span { min-width: 0; display: inline-flex; align-items: baseline; gap: 5px; overflow-wrap: anywhere; }
.employee-activity-update footer b { color: #475569; font-size: 10.5px; font-weight: 750; }
.employee-activity-empty { margin: 16px; border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 24px; color: var(--text-secondary); text-align: center; font-size: 13px; }
.activity-load-row { padding: 12px 16px 16px; justify-content: center; border-top: 1px solid color-mix(in srgb, #64748B 6%, #FFFFFF); }
.employee-201-file .upload-zone { margin: 0; border-radius: var(--radius-lg); padding: 18px; background: white; }
.employee-201-file .drop-target strong { font-size: 14px; }
.employee-201-file .drop-target span,.employee-201-file .upload-file-note { font-size: 13px; line-height: 1.45; }

@media (max-width: 1024px) {
  .employee-201-modal .dialog-body { padding: 18px; }
  .employee-201-identity { grid-template-columns: 64px minmax(0,1fr); }
  .employee-201-identity .avatar { width: 64px; height: 64px; grid-row: 1; }
  .profile-identity-facts { grid-column: 1 / -1; grid-row: 2; }
  .employee-201-file .profile-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .employee-201-file .profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-activity-toolbar { grid-template-columns: minmax(240px,1fr) 170px 130px; }
  .employee-activity-result-count { grid-column: 1 / -1; text-align: left; }
  .employee-activity-group > summary { grid-template-columns: 138px 105px minmax(0,1fr) 70px 52px; gap: 9px; }
  .employee-activity-group-details { padding-left: 270px; }
}

@media (max-width: 820px) {
  .profile-modal.employee-201-modal { width: calc(100% - 8px); max-height: 98vh; border-radius: 12px; }
  .employee-201-modal .dialog-shell > header { min-height: 78px; padding: 16px; }
  .employee-201-modal .dialog-shell > header h2 { font-size: 22px; }
  .employee-201-modal .dialog-shell > header p { font-size: 12px; }
  .employee-201-modal .dialog-body { max-height: calc(98vh - 78px); padding: 12px; }
  .employee-201-file { gap: 14px; }
  .employee-201-identity { grid-template-columns: 56px minmax(0,1fr); gap: 13px; padding: 15px; }
  .employee-201-identity .avatar { width: 56px; height: 56px; font-size: 16px; }
  .employee-201-identity h3 { font-size: 19px; }
  .profile-identity-facts { margin-top: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-201-file .profile-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-201-file .profile-actions > * { min-width: 0; width: 100%; }
  .employee-201-file .profile-grid { grid-template-columns: 1fr; padding: 12px; }
  .employee-201-file .profile-grid > div { min-height: 72px; padding: 12px 13px; }
  .employee-201-section-heading,.employee-201-file .panel-header { min-height: 66px; padding: 13px 14px; align-items: flex-start; }
  .employee-201-section-heading h2,.employee-201-file .panel-header h2 { font-size: 17px; }
  .employee-201-file .panel-header p,.employee-201-section-heading p { font-size: 12.5px; }
  .profile-collapsible-summary { align-items: center; flex-wrap: nowrap; }
  .profile-collapsible-meta { gap: 7px; }
  .profile-collapsible-meta > span:first-child:not(.profile-collapsible-chevron) { font-size: 11px; }
  .employee-201-file .profile-record-section { padding: 13px; }
  .employee-201-file table { min-width: 680px; }
  .employee-201-file th { font-size: 12.5px; }
  .employee-201-file td { font-size: 13px; }
  .employee-201-file .upload-zone { padding: 13px; }
  .employment-history-compact-row > summary { grid-template-columns: 32px minmax(0,1fr) auto; gap: 9px; padding: 12px; }
  .employment-history-routine-row { grid-template-columns: 32px minmax(0,1fr); gap: 6px 9px; padding: 11px 12px; }
  .employment-history-routine-row > time { grid-column: 2; grid-row: 1; white-space: normal; }
  .employment-history-routine-row .employment-history-compact-marker { grid-column: 1; grid-row: 1 / span 2; }
  .employment-history-routine-row .employment-history-compact-copy { grid-column: 2; grid-row: 2; }
  .employment-history-compact-row > summary time { grid-column: 2; grid-row: 1; font-size: 12px; }
  .employment-history-compact-marker { grid-column: 1; grid-row: 1 / span 2; }
  .employment-history-compact-copy { grid-column: 2; grid-row: 2; }
  .history-expand-label { grid-column: 3; grid-row: 1 / span 2; }
  .employment-history-compact-details { padding: 0 12px 14px; }
  .history-load-row { align-items: stretch; flex-direction: column; }
  .history-load-row .button { width: 100%; }
  .employee-record-toolbar { padding: 13px 12px; }
  .employee-record-filters { overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .employee-record-filters button { min-height: 42px; }
  .employee-record-event > summary { grid-template-columns: 34px minmax(0,1fr) auto; gap: 7px 10px; padding: 12px 13px; }
  .employee-record-event > summary time { grid-column: 2; grid-row: 1; white-space: normal; }
  .employee-record-icon { grid-column: 1; grid-row: 1 / span 2; }
  .employee-record-copy { grid-column: 2; grid-row: 2; }
  .employee-record-status { grid-column: 3; grid-row: 1; }
  .employee-record-event .activity-expand-control { grid-column: 3; grid-row: 2; justify-self: end; }
  .employee-record-event .activity-expand-control b { display: none; }
  .employee-record-details { padding: 0 13px 13px; }
  .employee-record-details dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-activity-toolbar { grid-template-columns: 1fr 1fr; padding: 12px; }
  .employee-activity-search,.employee-activity-result-count { grid-column: 1 / -1; }
  .employee-activity-result-count { text-align: left; white-space: normal; }
  .employee-activity-group > summary { grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; padding: 12px 13px; }
  .employee-activity-group > summary time { grid-column: 1; grid-row: 1; }
  .employee-activity-category { grid-column: 2; grid-row: 1; }
  .employee-activity-group-copy { grid-column: 1 / -1; grid-row: 2; }
  .employee-activity-update-count { grid-column: 1; grid-row: 3; text-align: left; }
  .activity-expand-control { grid-column: 2; grid-row: 3; justify-self: end; }
  .employee-activity-group-details { padding: 0 13px 12px; }
  .employee-activity-update { grid-template-columns: 1fr; gap: 5px; padding: 11px 0; }
  .employee-201-file .structured-detail-item,.employee-activity-detail-body .structured-detail-item { grid-template-columns: minmax(105px,.38fr) minmax(0,1fr); gap: 9px; }
  .report-option-group > header,.report-option-subgroup > header { align-items: flex-start; flex-direction: column; }
  .report-group-tools,.report-option-subgroup > header > div { width: 100%; justify-content: space-between; }
}

@media (max-width: 520px) {
  .profile-identity-facts { grid-template-columns: 1fr; }
  .employee-record-details dl { grid-template-columns: 1fr; }
  .employee-record-status .status-badge { max-width: 105px; white-space: normal; text-align: center; }
}

@media (max-width: 480px) {
  .employee-201-modal .dialog-shell > header h2 { font-size: 20px; }
  .employee-201-identity { grid-template-columns: 48px minmax(0,1fr); }
  .employee-201-identity .avatar { width: 48px; height: 48px; font-size: 14px; }
  .employee-201-identity h3 { font-size: 18px; }
  .profile-identity-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-201-file .profile-actions { grid-template-columns: 1fr; }
  .employee-201-file .profile-grid span:not(.status-badge) { font-size: 12.5px; }
  .employee-201-file .profile-grid strong { font-size: 14px; }
  .employee-201-section-heading { align-items: flex-start; }
  .employee-201-section-heading > .status-badge { flex: 0 0 auto; }
  .employee-201-file .panel-header > span { font-size: 11px; }
  .history-expand-label b,.activity-expand-control b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .employee-activity-toolbar { grid-template-columns: 1fr; }
  .employee-activity-search,.employee-activity-result-count { grid-column: 1; }
  .employee-201-file .structured-detail-item,.employee-activity-detail-body .structured-detail-item { grid-template-columns: 1fr; gap: 3px; padding: 9px 10px; }
  .employee-activity-update footer { display: grid; gap: 6px; }
  .employment-history-key-dates { grid-template-columns: 1fr; }
}

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

/* Hiring & Recruitment */
.recruitment-module { display: grid; gap: 18px; }
.recruitment-overview { min-width: 0; max-width: 100%; overflow-x: hidden; }
.recruitment-overview > * { min-width: 0; max-width: 100%; }
.recruitment-tabs { margin-bottom: 0; }
.recruitment-section-head,.recruitment-report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(135deg,#fff 0%,var(--primary-soft) 155%); box-shadow: var(--shadow-sm); }
.recruitment-section-head > div,.recruitment-report-head > div { min-width: 0; }
.recruitment-section-head span,.recruitment-report-head > div > span { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recruitment-section-head h2,.recruitment-report-head h2 { margin: 4px 0; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.recruitment-section-head p,.recruitment-report-head p { margin: 0; color: var(--text-secondary); }
.recruitment-list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin: 22px 2px 10px; }
.recruitment-list-heading > div { min-width: 0; }
.recruitment-list-heading span { display: block; margin-bottom: 3px; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recruitment-list-heading h2 { margin: 0; color: var(--text); font-size: 18px; line-height: 1.3; }
.recruitment-list-heading > strong { color: var(--text-secondary); font-size: 12px; font-weight: 700; white-space: nowrap; }
.recruitment-approval-queue { margin-top: var(--space-4); border-color: #ead5a2; }
.recruitment-approval-queue .panel-header { background: #FFFFFF; }
.recruitment-approval-queue table { min-width: 980px; }
.recruitment-approval-waiting { display: inline-flex; align-items: center; min-height: 34px; color: var(--text-secondary); font-size: 12px; font-weight: 700; white-space: nowrap; }
.recruitment-report-head label { min-width: 210px; display: grid; gap: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.recruitment-report-head input { width: 100%; height: 42px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 11px; background: #fff; color: var(--text); }
.recruitment-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.recruitment-operational-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
.recruitment-metric-grid.compact { grid-template-columns: repeat(6,minmax(0,1fr)); }
.recruitment-workload-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
.recruitment-metric-card { min-width: 0; min-height: 112px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; align-items: flex-start; gap: 12px; background: var(--surface); color: var(--text); text-align: left; box-shadow: var(--shadow-sm); transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease; }
.recruitment-metric-card[data-recruitment-metric]:hover { border-color: color-mix(in srgb, #64748B 32%, #FFFFFF); background: #FFFFFF; box-shadow: 0 8px 22px rgba(36,50,71,.09); transform: translateY(-1px); }
.recruitment-metric-card.warning { border-left: 3px solid var(--warning); }
.recruitment-metric-card.danger { border-left: 3px solid var(--danger); }
.recruitment-metric-card > span:last-child { min-width: 0; display: grid; }
.recruitment-metric-card small { color: var(--text-secondary); font-size: 12px; font-style: normal; font-weight: 700; }
.recruitment-metric-card strong { margin: 2px 0; font-size: 26px; line-height: 1.15; }
.recruitment-metric-card em { overflow: hidden; color: var(--text-tertiary); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.recruitment-workload-metrics .recruitment-metric-card em { overflow: visible; line-height: 1.35; text-overflow: clip; white-space: normal; }
.recruitment-metric-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.recruitment-metric-icon .ui-icon { width: 18px; height: 18px; }
.recruitment-filter-bar { margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; display: grid; grid-template-columns: repeat(5,minmax(130px,1fr)) auto; align-items: end; gap: 10px; background: var(--surface); }
.recruitment-filter-bar label { min-width: 0; display: grid; gap: 5px; }
.recruitment-filter-bar label span { color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.recruitment-filter-bar select { width: 100%; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 32px 0 10px; background: #fff; color: var(--text); }
.recruitment-filter-bar input { width: 100%; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; background: #fff; color: var(--text); }
.recruitment-filter-bar.report-filters { grid-template-columns: repeat(6,minmax(120px,1fr)) auto; }
.table-primary-link { max-width: 210px; border: 0; padding: 0; display: grid; gap: 2px; background: none; color: var(--text); text-align: left; }
.table-primary-link strong { color: var(--primary); font-size: 13px; }
.table-primary-link span { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.table-primary-link:hover strong,.table-primary-link:hover span { text-decoration: underline; }
.recruitment-module table td > small { margin-top: 4px; display: block; color: var(--text-tertiary); }
.recruitment-module table td > small .status-badge { margin-top: 2px; }
.recruitment-mrf-table th:last-child,.recruitment-mrf-table td:last-child { position: sticky; right: 0; z-index: 1; min-width: 118px; background: #fff; box-shadow: -8px 0 12px -12px rgba(36,50,71,.35); }
.recruitment-mrf-table th:last-child { z-index: 2; background: #FFFFFF; }
.recruitment-mrf-table td:last-child .table-actions { flex-wrap: nowrap; white-space: nowrap; }
.recruitment-mrf-table tbody tr:hover td:last-child { background: #FFFFFF; }
.recruitment-monthly-table { min-width: 1180px; }
.recruitment-monthly-table th:nth-child(n+4):nth-child(-n+7),.recruitment-monthly-table td:nth-child(n+4):nth-child(-n+7) { text-align: center; }
.recruitment-monthly-table td:nth-child(n+4):nth-child(-n+7) strong { font-size: 16px; }
.recruitment-report-guide { margin: 0 0 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.recruitment-report-guide summary { min-height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--primary-strong); cursor: pointer; font-size: 13px; list-style: none; }
.recruitment-report-guide summary::-webkit-details-marker { display: none; }
.recruitment-report-guide summary > span { display: inline-flex; align-items: center; gap: 8px; }
.recruitment-report-guide summary > span .ui-icon { width: 17px; height: 17px; color: var(--primary); }
.recruitment-report-guide summary > .ui-icon { width: 16px; height: 16px; transition: transform .18s ease; }
.recruitment-report-guide[open] summary > .ui-icon { transform: rotate(180deg); }
.recruitment-report-guide-body { border-top: 1px solid var(--border); padding: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; background: #FFFFFF; }
.recruitment-report-guide-body > div { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 4px; background: #fff; }
.recruitment-report-guide-body strong { color: var(--text); font-size: 12px; }
.recruitment-report-guide-body span { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.recruitment-report-section-title { margin: 22px 2px 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.recruitment-report-section-title > div { min-width: 0; }
.recruitment-report-section-title span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recruitment-report-section-title h2 { margin: 3px 0 1px; font-size: 18px; line-height: 1.3; }
.recruitment-report-section-title p { margin: 0; color: var(--text-secondary); font-size: 12px; }
.recruitment-report-section-title > strong { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.recruitment-kpi-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.recruitment-kpi-pair article { border: 1px solid color-mix(in srgb, #64748B 22%, #FFFFFF); border-radius: var(--radius-lg); padding: 22px; background: linear-gradient(145deg,#fff,var(--primary-soft)); box-shadow: var(--shadow-sm); }
.recruitment-kpi-pair span { color: var(--text-secondary); font-weight: 700; }
.recruitment-kpi-pair strong { margin: 5px 0; display: block; color: var(--primary-strong); font-size: 34px; }
.recruitment-kpi-pair p { margin: 0; color: var(--text-secondary); }
.recruitment-target-kpis { margin: 14px 0; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.recruitment-target-kpis article { min-width: 0; padding: 18px; }
.recruitment-target-kpis strong { font-size: clamp(21px,2vw,28px); overflow-wrap: anywhere; }
.recruitment-candidate-kpis { overflow: hidden; }
.recruitment-candidate-kpi-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.recruitment-candidate-kpi-grid > div { min-height: 82px; border-right: 1px solid var(--border); padding: 15px; display: grid; align-content: center; gap: 3px; }
.recruitment-candidate-kpi-grid > div:last-child { border-right: 0; }
.recruitment-candidate-kpi-grid span { color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.recruitment-candidate-kpi-grid strong { font-size: 23px; }
.recruitment-response-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.recruitment-response-metrics > div { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; background: #fff; }
.recruitment-response-metrics span,.recruitment-response-metrics strong { display: block; }
.recruitment-response-metrics span { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.recruitment-response-metrics strong { margin-top: 4px; font-size: 22px; }
.recruitment-aging-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.recruitment-aging-grid button { min-height: 118px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 17px; display: grid; align-content: center; gap: 3px; background: #fff; color: var(--text); text-align: left; box-shadow: var(--shadow-sm); }
.recruitment-aging-grid button:hover,.recruitment-aging-grid button.active { border-color: var(--primary); background: var(--primary-soft); }
.recruitment-aging-grid button.danger { border-left: 3px solid var(--danger); }
.recruitment-aging-grid span { color: var(--text-secondary); font-weight: 700; }
.recruitment-aging-grid strong { font-size: 30px; }
.recruitment-aging-grid small { color: var(--text-tertiary); }
.active-filter-note { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; }
.recruitment-form-reference { border: 1px solid color-mix(in srgb, #64748B 21%, #FFFFFF); border-radius: var(--radius-md); padding: 14px 16px; display: grid; background: var(--primary-soft); }
.recruitment-form-reference span { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.recruitment-form-reference strong { margin-top: 2px; font-size: 18px; }
.recruitment-form-reference small { color: var(--text-secondary); }
.recruitment-target-choice { border: 1px solid color-mix(in srgb, #64748B 21%, #FFFFFF); border-radius: var(--radius-md); padding: 14px 16px; display: grid; gap: 7px; background: linear-gradient(90deg,var(--primary-soft),#fff); }
.recruitment-target-choice > span { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.recruitment-target-choice > div { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.recruitment-target-choice strong { font-size: 15px; }
.recruitment-target-choice small { color: var(--text-secondary); }
.recruitment-target-field { border: 1px solid color-mix(in srgb, #64748B 17%, #FFFFFF); border-left: 3px solid var(--primary); border-radius: var(--radius-md); padding: 14px 16px; background: linear-gradient(90deg,var(--primary-soft),#FFFFFF 36%); }
.reports-module-tabs { margin-bottom: 18px; }
.report-print-action { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.report-period-toolbar { border: 1px solid var(--border); border-radius: var(--radius-lg); }
.report-period-toolbar .module-tabs { flex: 0 0 auto; margin-bottom: 0; }
.report-period-actions { min-width: 0; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.report-period-actions label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.report-period-actions .button { min-height: 40px; }
.report-period-print .ui-icon { width: 16px; height: 16px; }
@media (max-width: 820px) {
  .report-period-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .report-period-toolbar .module-tabs { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-period-toolbar .module-tabs button { justify-content: center; padding-inline: 10px; }
  .report-period-actions { display: contents; }
  .report-period-print { grid-column: 2; grid-row: 1; }
  .report-period-actions label { min-width: 0; grid-column: 1; grid-row: 2; }
  .report-period-actions label select { min-width: 0; width: 100%; }
  .report-period-actions [data-annual-refresh] { grid-column: 2; grid-row: 2; }
  .hr-performance-trend { overflow-x: auto; }
  .hr-performance-trend svg { min-width: 720px; }
}
.generic-report-builder { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--bg); color: var(--text); }
.generic-report-builder[open] { display: flex; flex-direction: column; }
.generic-report-builder .report-builder-toolbar { position: static; margin: 0; padding: 12px 20px; flex-shrink: 0; }
.generic-print-options { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 13px; }
.generic-print-options label { display: flex; align-items: center; gap: 7px; }
.generic-print-options input[type=checkbox] { width: 16px; height: 16px; margin: 0; }
.generic-print-options [role=status] { color: var(--text-secondary); }
.masterlist-print-exclusions { flex: 1 1 100%; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.masterlist-print-exclusions > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; cursor: pointer; font-weight: 800; }
.masterlist-print-exclusions > summary b { color: var(--primary); font-size: 12px; }
.masterlist-print-exclusions > div { display: grid; gap: 9px; padding: 0 12px 12px; }
.generic-print-options .masterlist-print-exclusion-search { justify-content: flex-start; }
.masterlist-print-exclusion-search input { width: min(320px,100%); }
.masterlist-print-employee-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 6px; max-height: 150px; overflow: auto; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.generic-print-options .masterlist-print-employee-list label { align-items: flex-start; min-width: 0; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface); }
.masterlist-print-employee-list label > span { min-width: 0; }
.masterlist-print-employee-list strong,.masterlist-print-employee-list small { display: block; overflow-wrap: anywhere; }
.masterlist-print-employee-list small { margin-top: 2px; color: var(--text-secondary); }
.generic-report-builder iframe { flex: 1; min-height: 240px; width: 100%; border: 0; }
.employee-masterlist-report { display: grid; gap: 16px; }
.masterlist-heading { border: 1px solid color-mix(in srgb, #64748B 20%, #FFFFFF); border-radius: var(--radius-lg); padding: 20px 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; background: linear-gradient(135deg,#fff,var(--primary-soft)); }
.masterlist-heading h2 { margin: 3px 0 5px; font-size: clamp(22px,2.2vw,28px); }
.masterlist-heading p { max-width: 760px; margin: 0; color: var(--text-secondary); }
.masterlist-as-of { flex: 0 0 auto; color: var(--primary-strong); font-size: 12px; font-weight: 750; }
.masterlist-summary-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; }
.masterlist-summary-card { min-width: 0; min-height: 92px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; display: flex; align-items: center; gap: 11px; background: #fff; color: var(--text); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.masterlist-summary-card:hover { border-color: #64748B; background: #FFFFFF; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(36,50,71,.1); }
.masterlist-summary-card.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.masterlist-summary-card:focus-visible { outline: 3px solid color-mix(in srgb,var(--primary) 28%,transparent); outline-offset: 2px; }
.masterlist-summary-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.masterlist-summary-icon .ui-icon { width: 18px; height: 18px; }
.masterlist-summary-card > span:last-child { min-width: 0; display: grid; gap: 2px; }
.masterlist-summary-card small { overflow: hidden; color: var(--text-secondary); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.masterlist-summary-card strong { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.masterlist-name-link { border: 0; padding: 0; background: none; color: var(--primary); font: inherit; font-weight: 750; text-align: left; cursor: pointer; }
.masterlist-name-link:hover { text-decoration: underline; }
.employee-masterlist-table td { vertical-align: middle; }
.employee-masterlist-table td:nth-child(4) { text-align: center; font-variant-numeric: tabular-nums; }
.employee-masterlist-table .button { white-space: nowrap; }
.recruitment-monitoring-only { margin-top: 0; }
.recruitment-replacement-panel { border: 1px solid color-mix(in srgb, #64748B 17%, #FFFFFF); border-left: 3px solid var(--primary); border-radius: var(--radius-md); padding: 14px 16px; display: grid; gap: 12px; background: linear-gradient(90deg,var(--primary-soft),#FFFFFF 36%); }
.recruitment-replacement-panel label { margin: 0; }
.recruitment-replacement-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.recruitment-replacement-heading > div { display: grid; gap: 2px; }
.recruitment-replacement-heading small { color: var(--text-secondary); }
.recruitment-detail-hero { margin-bottom: 14px; border: 1px solid color-mix(in srgb, #64748B 22%, #FFFFFF); border-radius: var(--radius-lg); padding: 20px 22px; display: flex; justify-content: space-between; gap: 20px; background: linear-gradient(135deg,#fff,var(--primary-soft)); }
.recruitment-detail-hero > div:first-child > span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.recruitment-detail-hero h3 { margin: 4px 0; font-size: 24px; }
.recruitment-detail-hero p { margin: 0 0 9px; color: var(--text-secondary); }
.recruitment-header-actions { max-width: min(100%,680px); justify-content: flex-end; gap: 6px; padding: 5px; }
.recruitment-header-actions .button { min-height: 34px; flex: 0 1 auto; padding: 6px 9px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.recruitment-header-actions .ui-icon { width: 14px; height: 14px; }
.recruitment-detail-tabs { position: sticky; top: -1px; z-index: 2; width: 100%; margin-bottom: 14px; display: flex; flex-wrap: nowrap; background: color-mix(in srgb, #64748B 7%, #FFFFFF); }
.recruitment-detail-tabs button { flex: 1 1 0; justify-content: center; white-space: nowrap; }
.recruitment-detail-body { display: grid; gap: 14px; }
.recruitment-detail-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.recruitment-detail-summary > div { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; display: grid; background: #fff; }
.recruitment-detail-summary span { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.recruitment-detail-summary strong { font-size: 24px; }
.recruitment-overview-monitoring > .success { border-color: #b9dccd; background: #f3faf7; }
.recruitment-overview-monitoring > .success strong { color: var(--success-strong,#16734b); }
.recruitment-overview-monitoring > .warning { border-color: #ead5a2; background: #fffaf0; }
.recruitment-overview-monitoring > .warning strong { color: #8a6110; }
.recruitment-overview-monitoring > .danger { border-color: #efd0d0; background: #fff7f7; }
.recruitment-overview-monitoring > .danger strong { color: var(--danger-strong,#a83b3b); }
.recruitment-module table td > small.recruitment-funnel-line {
  margin-top: 5px;
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}
.recruitment-funnel-line span { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.recruitment-funnel-line b { color: var(--text); font-weight: 800; }
.recruitment-funnel-line .passed,.recruitment-funnel-line .passed b { color: var(--success-strong,#16734b); }
.recruitment-funnel-line .failed,.recruitment-funnel-line .failed b { color: var(--danger-strong,#a83b3b); }
.recruitment-mrf-table th,.recruitment-mrf-table td { padding-left: 8px; padding-right: 8px; }
.recruitment-mrf-table td { padding-top: 10px; padding-bottom: 10px; }
.recruitment-mrf-table th:first-child,.recruitment-mrf-table td:first-child { width: 225px; min-width: 225px; }
.recruitment-mrf-table th:nth-child(2),.recruitment-mrf-table td:nth-child(2) { width: 120px; min-width: 110px; }
.recruitment-mrf-table .recruitment-batch-count { color: var(--primary-strong); font-size: 17px; }
.recruitment-funnel-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.recruitment-funnel-grid > div { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 14px; display: grid; gap: 2px; background: #fff; }
.recruitment-funnel-grid > div.success { border-color: #b9dccd; background: #f3faf7; }
.recruitment-funnel-grid > div.danger { border-color: #efd0d0; background: #fff7f7; }
.recruitment-funnel-grid > div.warning { border-color: #ead8aa; background: #fffaf0; }
.recruitment-funnel-grid > div.rate { grid-column: span 2; border-color: color-mix(in srgb, #64748B 20%, #FFFFFF); background: var(--primary-soft); }
.recruitment-funnel-grid span { color: var(--text-secondary); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
.recruitment-funnel-grid strong { color: var(--text); font-size: 24px; line-height: 1.1; }
.recruitment-funnel-grid small { color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
.recruitment-overview-funnel { grid-template-columns: repeat(5,minmax(0,1fr)); }
.recruitment-detail-toolbar { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
.recruitment-detail-toolbar > div { display: flex; align-items: center; gap: 8px; }
.recruitment-detail-toolbar > div:first-child { display: grid; gap: 2px; }
.recruitment-detail-toolbar span { color: var(--text-secondary); font-size: 12px; }
.recruitment-record-toolbar > .recruitment-detail-filters { min-width: 0; display: flex; flex: 1 1 520px; align-items: center; flex-wrap: wrap; gap: 8px; }
.recruitment-detail-filters .table-search-control { min-width: min(300px,100%); flex: 1 1 260px; }
.recruitment-detail-filters select { min-height: 40px; min-width: 160px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 34px 8px 11px; background: #fff; color: var(--text); }
.recruitment-batch-detail-list { display: grid; gap: 10px; }
.recruitment-batch-details { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.recruitment-batch-details[open] { border-color: color-mix(in srgb, #64748B 22%, #FFFFFF); box-shadow: 0 6px 18px rgba(36,50,71,.07); }
.recruitment-batch-details > summary { min-height: 54px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; background: var(--surface); transition: background-color .18s ease,border-color .18s ease; }
.recruitment-batch-details > summary:hover { background: var(--primary-soft); }
.recruitment-batch-details > summary:focus-visible { outline: 3px solid color-mix(in srgb,var(--primary) 30%,transparent); outline-offset: -3px; }
.recruitment-batch-details > summary span:first-child { display: grid; gap: 2px; }
.recruitment-batch-details > summary small,.recruitment-batch-detail-head small { color: var(--text-secondary); font-size: 11px; }
.recruitment-batch-result-line { color: var(--text-secondary); font-size: 12px; font-weight: 700; text-align: right; }
.recruitment-batch-detail-body { border-top: 1px solid var(--border); }
.recruitment-batch-detail-head { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
.recruitment-batch-detail-head > div { display: grid; gap: 2px; }
.batch-result-toolbar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap; gap: 8px; background: #FFFFFF; }
.batch-result-toolbar label { min-width: 170px; display: grid; gap: 4px; }
.batch-result-toolbar label span { color: var(--text-secondary); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
.batch-result-toolbar input { min-height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; background: #fff; color: var(--text); font: inherit; }
.batch-complete-toolbar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: #FFFFFF; }
.batch-complete-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.batch-complete-toolbar small { color: var(--text-secondary); font-size: 11px; }
.recruitment-batch-details.completed > summary { background: #f7fbf9; }
.batch-saved-remarks { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.batch-result-table td { vertical-align: middle; }
.batch-result-controls { display: inline-grid; grid-template-columns: repeat(3,minmax(82px,1fr)); gap: 6px; }
.batch-result-controls label { position: relative; min-height: 34px; border: 1px solid var(--border); border-radius: 7px; display: grid; place-items: center; overflow: hidden; background: #fff; cursor: pointer; transition: border-color .18s ease,background-color .18s ease,color .18s ease; }
.batch-result-controls input { position: absolute; opacity: 0; pointer-events: none; }
.batch-result-controls span { padding: 7px 10px; color: var(--text-secondary); font-size: 11px; font-weight: 750; }
.batch-result-controls label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb,var(--primary) 28%,transparent); outline-offset: 1px; }
.batch-result-controls label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.batch-result-controls label.passed:has(input:checked) { border-color: #5b9b7b; background: #eef8f3; }
.batch-result-controls label.failed:has(input:checked) { border-color: #c67575; background: #fff3f3; }
.batch-result-controls label.passed:has(input:checked) span { color: #276846; }
.batch-result-controls label.failed:has(input:checked) span { color: #9a3434; }
.batch-result-locked { display: grid; gap: 3px; justify-items: start; }
.batch-result-locked small { color: var(--text-secondary); font-size: 10px; }
.batch-result-remarks { width: 100%; min-width: 150px; min-height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; background: #fff; color: var(--text); font: inherit; }
.recruitment-workflow-note { min-width: 210px; display: grid !important; gap: 2px !important; text-align: right; }
.recruitment-workflow-note strong { color: var(--text); font-size: 12px; }
.recruitment-workflow-note small { color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
.recruitment-progress-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.endorsement-progress-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
.recruitment-progress-strip > div { min-height: 82px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 14px; display: grid; align-content: center; gap: 4px; background: #fff; }
.recruitment-progress-strip span { color: var(--text-secondary); font-size: 11px; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.recruitment-progress-strip strong { font-size: 24px; line-height: 1.1; }
.recruitment-activity-totals { grid-template-columns: repeat(6,minmax(0,1fr)); }
.recruitment-batch-result-summary { display: flex; flex-wrap: wrap; gap: 8px; min-width: 210px; }
.recruitment-activity-batches table { min-width: 1040px; table-layout: auto; }
.recruitment-activity-batches th,.recruitment-activity-batches td { padding: 14px 18px; line-height: 1.45; vertical-align: middle; }
.recruitment-activity-batches th + th,.recruitment-activity-batches td + td { border-left: 1px solid color-mix(in srgb, #64748B 6%, #FFFFFF); }
.recruitment-activity-batches th:nth-child(1),.recruitment-activity-batches td:nth-child(1) { min-width: 155px; }
.recruitment-activity-batches th:nth-child(2),.recruitment-activity-batches td:nth-child(2) { min-width: 135px; white-space: nowrap; }
.recruitment-activity-batches th:nth-child(3),.recruitment-activity-batches td:nth-child(3) { width: 120px; text-align: center; }
.recruitment-activity-batches th:nth-child(4),.recruitment-activity-batches td:nth-child(4) { min-width: 235px; }
.recruitment-activity-batches th:nth-child(5),.recruitment-activity-batches td:nth-child(5) { min-width: 190px; }
.recruitment-activity-batches th:nth-child(6),.recruitment-activity-batches td:nth-child(6) { min-width: 165px; text-align: center; }
.recruitment-activity-batches td > strong,.recruitment-activity-batches td > small { display: block; }
.recruitment-activity-batches td > small { margin-top: 5px; line-height: 1.4; }
.recruitment-activity-batches tbody tr:hover td { background: #FFFFFF; }
.recruitment-legacy-note { min-width: 0; margin: 0; border-top: 1px solid var(--border); padding: 12px 14px; text-align: left; background: #FFFFFF; }
.recruitment-milestone-summary { max-width: 820px; }
.recruitment-timeline { margin: 0; padding: 4px 0; list-style: none; }
.recruitment-timeline li { display: grid; grid-template-columns: 110px 18px minmax(0,1fr); gap: 10px; min-height: 72px; }
.recruitment-timeline time { padding-top: 10px; color: var(--text-secondary); font-size: 12px; font-weight: 700; text-align: right; }
.recruitment-timeline li > span { position: relative; }
.recruitment-timeline li > span::before { content:""; width: 10px; height: 10px; position: absolute; top: 13px; left: 4px; z-index: 1; border: 2px solid var(--primary); border-radius: 50%; background: #fff; }
.recruitment-timeline li > span::after { content:""; width: 2px; position: absolute; top: 23px; bottom: -13px; left: 8px; background: var(--border); }
.recruitment-timeline li:last-child > span::after { display: none; }
.recruitment-timeline article { margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: #fff; }
.recruitment-timeline article strong { display: block; }
.recruitment-timeline article p { margin: 3px 0 0; color: var(--text-secondary); }

@media (max-width: 1180px) {
  .masterlist-summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .recruitment-metric-grid,.recruitment-metric-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .recruitment-filter-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .recruitment-filter-bar.report-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .recruitment-candidate-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .recruitment-funnel-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .recruitment-overview-funnel { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .recruitment-activity-totals { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .recruitment-candidate-kpi-grid > div:nth-child(3) { border-right: 0; }
}
@media (max-width: 760px) {
  .masterlist-heading { align-items: flex-start; flex-direction: column; }
  .masterlist-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recruitment-section-head,.recruitment-report-head,.recruitment-detail-hero,.recruitment-detail-toolbar { align-items: stretch; flex-direction: column; }
  .recruitment-section-head .button,.recruitment-report-head label { width: 100%; }
  .recruitment-metric-grid,.recruitment-metric-grid.compact,.recruitment-aging-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recruitment-filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recruitment-filter-bar.report-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recruitment-kpi-pair,.recruitment-response-metrics { grid-template-columns: 1fr; }
  .recruitment-detail-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recruitment-funnel-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recruitment-overview-funnel,.recruitment-progress-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recruitment-activity-totals { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recruitment-detail-toolbar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .recruitment-record-toolbar > .recruitment-detail-filters { display: flex; }
  .recruitment-batch-details > summary,.recruitment-batch-detail-head { align-items: stretch; flex-direction: column; }
  .recruitment-batch-result-line { text-align: left; }
  .batch-result-toolbar { align-items: stretch; flex-direction: column; }
  .batch-result-toolbar label,.batch-result-toolbar .button { width: 100%; }
  .batch-complete-toolbar,.batch-complete-toolbar > div { align-items: stretch; flex-direction: column; }
  .batch-complete-toolbar .button { width: 100%; }
  .recruitment-detail-tabs { overflow: hidden; }
  .recruitment-detail-tabs button { min-width: 0; min-height: 52px; padding: 7px 5px; justify-content: center; white-space: normal; text-align: center; font-size: 13px; line-height: 1.2; }
  .recruitment-detail-tabs button b { display: none; }
  .batch-result-controls { width: 100%; grid-template-columns: 1fr; }
  .recruitment-header-actions { width: 100%; justify-content: flex-start; }
  .recruitment-header-actions .button { min-height: 38px; flex: 0 1 auto; }
  .recruitment-workflow-note { min-width: 0; text-align: left; }
  .recruitment-report-guide-body { grid-template-columns: 1fr; }
  .recruitment-report-section-title { align-items: flex-start; flex-direction: column; }
  .recruitment-report-section-title > strong { white-space: normal; }
}
@media (max-width: 480px) {
  .masterlist-summary-grid { grid-template-columns: 1fr; }
  .masterlist-summary-card { min-height: 76px; }
  .recruitment-metric-grid,.recruitment-metric-grid.compact,.recruitment-aging-grid,.recruitment-filter-bar,.recruitment-detail-summary,.recruitment-funnel-grid,.recruitment-progress-strip { grid-template-columns: 1fr; }
  .recruitment-funnel-grid > div.rate { grid-column: auto; }
  .recruitment-detail-toolbar > div:last-child { grid-template-columns: 1fr; }
  .recruitment-filter-bar.report-filters,.recruitment-candidate-kpi-grid { grid-template-columns: 1fr; }
  .recruitment-candidate-kpi-grid > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .recruitment-candidate-kpi-grid > div:last-child { border-bottom: 0; }
  .recruitment-metric-card { min-height: 94px; }
  .recruitment-timeline li { grid-template-columns: 18px minmax(0,1fr); gap: 8px; }
  .recruitment-timeline time { grid-column: 2; grid-row: 1; padding-top: 0; text-align: left; }
  .recruitment-timeline li > span { grid-column: 1; grid-row: 1 / span 2; }
  .recruitment-timeline article { grid-column: 2; grid-row: 2; }
}

/* Screen charts: retain their native plot width so SVG labels never shrink below 12px. */
@media screen {
  .dashboard-chart-body, .hr-performance-trend { min-width: 0; grid-template-columns: minmax(0,1fr); }
  .hr-performance-trend { overflow: visible; }
  .chart-plot-viewport { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
  .chart-plot-viewport:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .chart-plot-viewport > svg.headcount-chart,
  .hr-performance-trend .chart-plot-viewport > svg { display: block; width: 100%; min-width: var(--chart-min-width); }
  .chart-plot-viewport > .movement-chart { min-width: var(--chart-min-width); }
  .headcount-chart text, .hr-performance-trend svg text { font-family: var(--font); font-size: var(--chart-text-size,12px); font-weight: 500; fill: var(--text-secondary); }
  .chart-legend, .chart-legend strong { font-size: 13px; line-height: 1.45; }
  .donut-legend span, .donut-legend strong, .department-chart button strong, .department-chart button em { font-size: 13px; }
  .donut-legend span, .department-chart button strong { white-space: normal; overflow-wrap: anywhere; }
  .donut-legend small, .donut-chart span, .department-chart button small,
  .movement-column small, .mini-trend small, .action-status-legend span { font-size: 12px; color: var(--text-secondary); }
}
/* Leave report */
.leave-report-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:18px 0; }
.leave-report-filters label { display:grid; gap:6px; color:var(--text-secondary); font-size:12px; font-weight:700; }
.leave-report-filters label > span { line-height:1.25; }
.leave-report-filters input,.leave-report-filters select { padding:10px; border:1px solid var(--border); border-radius:8px; background:white; color:var(--text); font:inherit; min-width:145px; text-transform:none; letter-spacing:normal; }
.recruitment-report-controls { margin-bottom:18px; }
.recruitment-report-filters { width:100%; }
.recruitment-report-filters label { flex:1 1 150px; min-width:145px; }
.recruitment-report-filters label:has(input[type=search]) { flex-basis:220px; }
.recruitment-report-filter-actions { display:flex; align-items:center; gap:10px; }
.recruitment-report-meta { margin-bottom:18px; }
@media(max-width:720px) {
  .recruitment-report-filters label,.recruitment-report-filters label:has(input[type=search]) { flex:1 1 100%; min-width:0; }
  .recruitment-report-filters input,.recruitment-report-filters select { width:100%; min-width:0; }
  .recruitment-report-filter-actions { width:100%; }
  .recruitment-report-filter-actions .button { flex:1 1 0; }
}
.leave-count-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0; }
.leave-count-cards article { padding:18px; display:grid; gap:10px; }
.leave-count-cards strong { font-size:30px; color:#257858; }
.leave-count-panel { margin:18px 0; overflow:hidden; }
.leave-count-panel .panel-heading { padding:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 14px; }
.leave-count-panel h2 { font-size:17px; margin:0; }
.leave-count-panel .panel-heading > span { color:var(--text-secondary); font-size:11px; font-weight:700; }
.leave-count-panel details { padding:12px 18px; }
.leave-report-note { font-size:12px; color:var(--text-secondary); line-height:1.7; margin:12px 18px; }
.leave-chart-scroll { overflow:auto; padding:12px; }
.leave-report-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:16px; }
.leave-reason-bars { padding:0 18px 18px; }
.leave-reason-bars > div { display:grid; grid-template-columns:minmax(100px,1fr) 1fr 30px; gap:10px; align-items:center; margin:14px 0; font-size:12px; }
.leave-bar-track { background:#eff3f7; height:16px; border-radius:4px; }
.leave-bar-track > span { background:#257858; display:block; height:100%; border-radius:4px; }
.leave-category-dialog { width:min(500px,92vw); padding:24px; border:1px solid #ccd5de; border-radius:16px; max-height:90vh; overflow:auto; }
.leave-category-dialog::backdrop { background:#18283b80; }
.leave-category-dialog fieldset { display:grid; gap:10px; border:1px solid #ccd5de; padding:16px; }
.leave-category-dialog label { display:flex; gap:10px; align-items:center; }
.leave-count-panel td small { display:block; margin-top:4px; color:var(--text-secondary); }
.leave-count-panel table { min-width:560px; }
#leave-report-details table { min-width:1050px; }
#violation-summary-details table { min-width:1100px; }
.violation-filter-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; flex-basis:100%; padding:10px 0 14px; border-bottom:1px solid var(--border); }
.violation-filter-actions small { flex-basis:100%; color:var(--text-secondary); }
@media(max-width:600px) { [data-vs-form] > label { flex:1 1 100%; min-width:0; } [data-vs-form] select,[data-vs-form] input { width:100%; min-width:0; } .violation-filter-actions .button { min-height:44px; } }

/* Central approval center */
.approvals-module { display:grid; gap:18px; }
.approval-page-header { margin:0; }
.approval-tabs { margin:0; }
.approval-queue { overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.approval-section-heading { padding:20px 22px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid var(--border); }
.approval-section-heading > div > span { color:var(--primary); font-size:10px; font-weight:800; letter-spacing:.1em; }
.approval-section-heading h2 { margin:4px 0 5px; font-size:20px; }
.approval-section-heading p { max-width:780px; margin:0; color:var(--text-secondary); font-size:13px; line-height:1.55; }
.approval-section-heading > strong { min-width:82px; padding:7px 11px; border-radius:999px; background:#fff5d9; color:#8a5c00; font-size:12px; text-align:center; }
.approval-filter-bar { padding:15px 18px; display:grid; grid-template-columns:minmax(240px,1.5fr) minmax(190px,.8fr); gap:12px; border-bottom:1px solid var(--border); background:#f8faf9; }
.approval-filter-bar label { display:grid; gap:5px; color:var(--text-secondary); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.approval-filter-bar input,.approval-filter-bar select { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); font:inherit; text-transform:none; letter-spacing:normal; }
.approval-bulk-bar { min-height:58px; padding:10px 18px; display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--border); background:#fff; }
.approval-bulk-bar label { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; }
.approval-bulk-bar label input,.approval-select-cell input { width:17px; height:17px; accent-color:var(--primary); }
.approval-bulk-bar > span { margin-left:auto; color:var(--text-secondary); font-size:12px; }
.approval-bulk-bar > span strong { color:var(--text); }
.approval-table-wrap { border:0; border-radius:0; }
.approval-rate-table { min-width:1420px; }
.approval-recruitment-table { min-width:1180px; }
.approval-select-cell { width:62px; text-align:center; }
.approval-rate-value { min-width:120px; }
.approval-rate-value span,.approval-rate-value strong,.approval-rate-value small { display:block; }
.approval-rate-value span { color:var(--text-secondary); font-size:11px; }
.approval-rate-value strong { margin-top:3px; font-size:14px; white-space:nowrap; }
.approval-rate-value.requested strong { color:var(--primary); }
.approval-rate-table td small,.approval-recruitment-table td small,.approval-history td small { display:block; margin-top:4px; color:var(--text-secondary); line-height:1.4; }
.approval-history { margin:16px 18px 18px; }
.approval-history table { min-width:980px; }
@media(max-width:760px) {
  .approval-page-header,.approval-section-heading { align-items:stretch; flex-direction:column; }
  .approval-filter-bar { grid-template-columns:1fr; }
  .approval-bulk-bar { align-items:stretch; flex-wrap:wrap; }
  .approval-bulk-bar > span { margin-left:0; }
  .approval-bulk-bar .button { width:100%; }
}
/* Training & Development reporting */
.training-development-report{display:grid;gap:20px}
.training-development-report>.panel,.training-development-report>.report-section-heading,.training-development-report>.hr-report-callout,.training-development-report>.hr-report-definitions{margin:0}
.training-report-filters{align-items:end}
.training-report-filters>label{flex:1 1 130px;min-width:0}
.training-report-filters>label input,.training-report-filters>label select{width:100%;min-width:0}
.training-filter-footer{display:flex;grid-column:1/-1;width:100%;align-items:center;justify-content:space-between;gap:16px}
.training-filter-actions{display:flex;gap:10px;align-items:center}
.training-filter-actions .button{min-width:118px}
.training-record-toolbar{display:flex;justify-content:flex-end;margin:-8px 0 12px}
.training-attendee-session{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.6fr);gap:18px;align-items:center;margin:0 0 14px;border:1px solid #b8dac8;border-radius:12px;padding:16px;background:#f3faf6}
.training-attendee-session>div>span,.training-attendee-session dt{display:block;color:var(--text-tertiary);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.training-attendee-session>div>strong,.training-attendee-session>div>small{display:block}
.training-attendee-session>div>strong{margin:5px 0;color:var(--text);font-size:17px}
.training-attendee-session>div>small{color:var(--text-secondary);font-size:12px;line-height:1.45}
.training-attendee-session dl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0}
.training-attendee-session dl>div{min-width:0;border-left:1px solid #cfe5d9;padding-left:10px}
.training-attendee-session dd{margin:4px 0 0;color:var(--primary);font-size:18px;font-weight:800}
.training-attendees-placeholder .empty-state{margin:0}
.training-print-sessions-section .hr-performance-table td strong,.training-print-sessions-section .hr-performance-table td small{display:block}
.training-print-sessions-section .hr-performance-table td small{margin-top:3px;color:var(--text-tertiary);font-size:11px}
.training-summary-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.training-summary-kpis .training-summary-kpi{min-height:118px;margin:0;border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--surface);text-align:left;box-shadow:var(--shadow-xs)}
.training-summary-kpis .training-summary-kpi.danger{border-color:#f0b8b2;background:#fff8f7}
.training-summary-kpis .training-summary-kpi.warning{border-color:#ead3a5;background:#fffbf2}
.training-summary-kpis .training-summary-kpi>span,.training-summary-kpis .training-summary-kpi>strong,.training-summary-kpis .training-summary-kpi>small{display:block}
.training-summary-kpis .training-summary-kpi .dashboard-kpi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-secondary);font-size:12px;font-weight:800;text-transform:uppercase}
.training-summary-kpis .training-summary-kpi>strong{margin:12px 0 7px;color:var(--primary);font-size:25px;line-height:1}
.training-summary-kpis .training-summary-kpi>small{color:var(--text-tertiary);font-size:12px;line-height:1.35}
.training-report-note{margin-top:-4px!important}
.training-trend-panel{overflow:hidden}
.training-trend-panel .leave-line-scroll{overflow-x:auto;padding-bottom:6px}
.training-trend-panel svg{display:block;min-width:760px;width:100%;height:auto}
.training-department-grid{grid-template-columns:minmax(0,1fr)}
.training-department-bars{display:grid;gap:10px;padding:4px 0}
.training-department-bars>button{display:grid;grid-template-columns:minmax(190px,.65fr) minmax(280px,1.35fr);gap:18px;align-items:center;width:100%;border:0;border-bottom:1px solid var(--border);padding:10px 4px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.training-department-bars>button:last-child{border-bottom:0}
.training-department-bars>button:hover{background:var(--primary-soft)}
.training-department-bars>button>span:first-child strong,.training-department-bars>button>span:first-child small{display:block}
.training-department-bars>button>span:first-child small{margin-top:3px;color:var(--text-tertiary)}
.training-rate-bars{display:grid;grid-template-columns:minmax(100px,1fr) 106px;gap:5px 10px;align-items:center}
.training-rate-bars>i{display:block;height:9px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.training-rate-bars>i>b{display:block;height:100%;border-radius:inherit;background:#3869a6}
.training-rate-bars>i.passing>b{background:#18794e}
.training-rate-bars>small{color:var(--text-secondary);font-size:12px;font-weight:700;white-space:nowrap}
.training-print-records-section .hr-performance-table td small{display:block;margin-top:4px;color:var(--text-tertiary)}
.training-print-records-section .report-section-heading>span:has(.button){align-self:center}
@media(max-width:1100px){.training-summary-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.training-attendee-session{grid-template-columns:1fr}.training-attendee-session dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.training-summary-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.training-department-bars>button{grid-template-columns:1fr}.training-rate-bars{grid-template-columns:minmax(80px,1fr) 100px}.training-attendee-session dl{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Turnover & Separations reporting */
.turnover-separations-report{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0}
.turnover-separations-report>*{min-width:0;margin:0}
.turnover-report-filters{grid-template-columns:repeat(4,minmax(150px,1fr));align-items:end}
.turnover-filter-actions{display:flex;align-items:center;gap:10px}
.turnover-filter-actions .button{min-width:118px}
.turnover-summary-kpis{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.turnover-summary-kpis .turnover-summary-kpi{min-height:116px;margin:0;border:1px solid var(--border);border-radius:var(--radius);padding:17px;background:var(--surface);text-align:left;box-shadow:var(--shadow-xs)}
.turnover-summary-kpis .turnover-summary-kpi.warning{border-color:#ead3a5;background:#fffbf2}
.turnover-summary-kpis .turnover-summary-kpi>span,.turnover-summary-kpis .turnover-summary-kpi>strong,.turnover-summary-kpis .turnover-summary-kpi>small{display:block}
.turnover-summary-kpis .turnover-summary-kpi .dashboard-kpi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-secondary);font-size:11px;font-weight:800;text-transform:uppercase}
.turnover-summary-kpis .turnover-summary-kpi>strong{margin:12px 0 7px;color:var(--primary);font-size:25px;line-height:1}
.turnover-summary-kpis .turnover-summary-kpi>small{color:var(--text-tertiary);font-size:11px;line-height:1.35}
.turnover-data-review{display:grid;gap:10px}
.turnover-data-review .hr-report-details{margin:0}
.turnover-data-review .hr-performance-table{margin:0}
.turnover-data-review td small,.turnover-print-department-section td small,.turnover-print-records-section td small{display:block;margin-top:4px;color:var(--text-tertiary)}
.turnover-trend-panel{overflow:hidden}
.turnover-trend-panel>.panel-heading{padding:17px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid var(--border)}
.turnover-trend-panel>.panel-heading h2{margin:0;font-size:17px}
.turnover-trend-panel>.panel-heading p{margin:4px 0 0;color:var(--text-secondary);font-size:11px}
.turnover-trend-panel>.panel-heading>span{color:var(--text-tertiary);font-size:11px;font-weight:700}
.turnover-trend-panel>.dashboard-chart-body{padding:14px 18px 4px}
.turnover-trend-panel>.hr-report-details{margin:8px 16px 16px}
.turnover-print-department-section .hr-performance-table table{min-width:1040px}
.turnover-print-records-section .table-wrap table{min-width:860px}
@media(max-width:900px){.turnover-report-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.turnover-filter-actions{grid-column:1/-1}.turnover-summary-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.turnover-report-filters{grid-template-columns:1fr}.turnover-filter-actions{width:100%}.turnover-filter-actions .button{flex:1 1 0;min-width:0}.turnover-summary-kpis{grid-template-columns:1fr}.turnover-trend-panel>.panel-heading{align-items:flex-start;flex-direction:column}}

/* Administration: user account directory */
.user-management{display:grid;gap:18px;min-width:0}
.user-management>.panel{margin:0;overflow:visible}
.user-management-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #cfe3d8;border-radius:var(--radius);padding:20px 22px;background:linear-gradient(135deg,#f4fbf7 0%,#fff 72%);box-shadow:var(--shadow-xs)}
.user-management-heading h2{margin:4px 0 5px;font-size:22px;line-height:1.2}
.user-management-heading p{max-width:720px;margin:0;color:var(--text-secondary);font-size:13px;line-height:1.55}
.user-account-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.user-account-metric{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:96px;border:1px solid var(--border);border-radius:13px;padding:15px 16px;background:#fff;color:inherit;text-align:left;box-shadow:var(--shadow-xs);cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.user-account-metric:hover{border-color:#98cbb1;box-shadow:0 8px 22px rgba(22,77,53,.09);transform:translateY(-1px)}
.user-account-metric:focus-visible{outline:3px solid rgba(37,120,88,.2);outline-offset:2px}
.user-account-metric>span{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:#eaf6ef;color:var(--primary)}
.user-account-metric>span .ui-icon{width:20px;height:20px}
.user-account-metric small,.user-account-metric strong{display:block}
.user-account-metric small{color:var(--text-secondary);font-size:10px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;line-height:1.3}
.user-account-metric strong{margin-top:6px;color:var(--text);font-size:25px;line-height:1}
.user-account-metric.inactive>span{background:#f1f5f9;color:#64748b}
.user-account-metric.locked>span{background:#fff2dc;color:#a86400}
.user-account-metric.deleted>span{background:#f7eceb;color:var(--danger)}
.user-account-notice{margin:0;align-items:flex-start}
.user-account-notice>span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:#eaf6ef;color:var(--primary)}
.user-account-notice .ui-icon{width:17px;height:17px}
.user-account-notice strong,.user-account-notice span{display:block}
.user-account-notice strong{margin-bottom:3px;font-size:12px}
.user-account-notice div>span{color:var(--text-secondary);font-size:11px;line-height:1.5}
.user-role-tabs{display:flex;align-items:center;gap:8px;overflow-x:auto;border-bottom:1px solid var(--border);padding:0 2px 10px;scrollbar-width:thin}
.user-role-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:40px;flex:0 0 auto;border:1px solid var(--border);border-radius:999px;padding:8px 13px;background:#fff;color:var(--text-secondary);font:700 12px/1 var(--font);cursor:pointer}
.user-role-tabs button:hover{border-color:#9ecfb5;background:#f5fbf7;color:var(--primary)}
.user-role-tabs button.active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 5px 12px rgba(37,120,88,.16)}
.user-role-tabs button b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:999px;padding:0 6px;background:#edf2f0;color:#486058;font-size:10px}
.user-role-tabs button.active b{background:rgba(255,255,255,.18);color:#fff}
.user-account-table{min-width:980px}
.user-account-table th:last-child,.user-account-table td:last-child{width:74px;text-align:center}
.user-account-table td{vertical-align:middle}
.user-account-table td>small{display:block;margin-top:4px;color:var(--text-tertiary);font-size:10.5px;line-height:1.35}
.user-account-person{display:flex;align-items:center;gap:11px;min-width:220px}
.user-account-person>div:last-child{min-width:0}
.user-account-person strong,.user-account-person small{display:block}
.user-account-person strong{font-size:12.5px;line-height:1.35}
.user-account-person small{margin-top:3px!important;color:var(--text-secondary)!important;white-space:nowrap}
.user-account-avatar{display:grid!important;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:10px;background:linear-gradient(135deg,#257858,#6fae89);color:#fff;font-size:14px;font-weight:850;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.user-account-scopes{min-width:190px}
.user-account-scopes>span{display:inline-block;margin:2px 4px 2px 0;border:1px solid #bcdcca;border-radius:999px;padding:4px 7px;background:#f1faf5;color:#236348;font-size:9.5px;font-weight:750;line-height:1.2}
.user-account-actions .action-menu{display:inline-block;text-align:left}
.user-account-actions .action-popover{position:fixed;right:auto;width:210px;min-width:210px;max-height:min(420px,calc(100vh - 24px));overflow-y:auto;z-index:1000}
.user-account-actions .action-popover button{gap:8px;white-space:normal;line-height:1.25}
.user-account-actions .action-popover .ui-icon{width:16px;height:16px;flex:0 0 auto}

.user-account-form{display:grid;gap:16px}
.user-account-form-intro{display:flex;align-items:center;gap:12px;border:1px solid #cfe3d8;border-radius:12px;padding:14px 16px;background:#f4fbf7}
.user-account-form-intro>span{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:#fff;color:var(--primary);box-shadow:var(--shadow-xs)}
.user-account-form-intro .ui-icon{width:21px;height:21px}
.user-account-form-intro strong,.user-account-form-intro small{display:block}
.user-account-form-intro strong{font-size:14px}
.user-account-form-intro small{margin-top:3px;color:var(--text-secondary);font-size:11px;line-height:1.45}
.user-account-approval{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;border:1px solid var(--border);border-radius:11px;padding:12px}
.user-account-approval legend{padding:0 6px;color:var(--text-secondary);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.user-account-approval label{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);border-radius:10px;padding:12px;background:#fff;cursor:pointer}
.user-account-approval label:has(input:checked){border-color:#99cdb2;background:#f2faf6}
.user-account-approval input{width:17px;height:17px;margin-top:1px;accent-color:var(--primary)}
.user-account-approval input:disabled+span{opacity:.5}
.user-account-approval strong,.user-account-approval small{display:block}
.user-account-approval strong{font-size:12px}
.user-account-approval small{margin-top:3px;color:var(--text-secondary);font-size:10.5px;line-height:1.4}
.user-account-form-note{margin:0}
.user-account-password-control{display:grid;grid-template-columns:minmax(0,1fr) 64px}
.user-account-password-control input{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.user-account-password-control button{border:1px solid var(--border-strong);border-left:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#f7faf8;color:var(--primary);font-size:11px;font-weight:800;cursor:pointer}
.user-account-password-control button:hover{background:var(--primary-soft)}
.user-account-password-control:focus-within{border-radius:var(--radius-sm);box-shadow:0 0 0 3px rgba(36,50,71,.1)}
.user-account-password-control:focus-within input,.user-account-password-control:focus-within button{border-color:#64748b;box-shadow:none;outline:0}

.user-account-detail{display:grid;gap:16px}
.user-account-detail>.panel{margin:0}
.user-account-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #bcdcca;border-radius:14px;padding:18px;background:linear-gradient(135deg,#eff9f3,#fff)}
.user-account-detail-person{display:flex;align-items:center;gap:14px;min-width:0}
.user-account-detail-avatar{display:grid;place-items:center;width:54px;height:54px;flex:0 0 auto;border-radius:15px;background:linear-gradient(135deg,#196b4a,#67a982);color:#fff;font-size:18px;font-weight:850;letter-spacing:.02em}
.user-account-detail-person>div>span{color:var(--primary);font-size:9px;font-weight:850;letter-spacing:.08em}
.user-account-detail-person h3{margin:4px 0 3px;font-size:20px;line-height:1.25}
.user-account-detail-person p{margin:0;color:var(--text-secondary);font-size:11.5px}
.user-account-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#fff}
.user-account-detail-summary>div{min-width:0;padding:13px 15px;border-right:1px solid var(--border)}
.user-account-detail-summary>div:last-child{border-right:0}
.user-account-detail-summary span:not(.status-badge),.user-account-detail-summary strong{display:block}
.user-account-detail-summary span:not(.status-badge){margin-bottom:6px;color:var(--text-tertiary);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.user-account-detail-summary strong{overflow-wrap:anywhere;font-size:12px}
.user-account-detail-scopes{display:flex;flex-wrap:wrap;gap:10px;padding:16px}
.user-account-detail-scopes>span{display:flex;align-items:center;gap:8px;border:1px solid #bcdcca;border-radius:10px;padding:10px 12px;background:#f1faf5;color:#236348;font-size:11px}
.user-account-detail-scopes .ui-icon{width:16px;height:16px}
.user-account-history{display:grid;gap:0;margin:0;padding:8px 16px 16px;list-style:none}
.user-account-history li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:9px 0}
.user-account-history li:not(:last-child)::after{content:"";position:absolute;top:38px;bottom:-2px;left:14px;width:1px;background:#d8e4de}
.user-account-history-marker{z-index:1;display:grid;place-items:center;width:29px;height:29px;border:1px solid #bcdcca;border-radius:9px;background:#f1faf5;color:var(--primary)}
.user-account-history-marker .ui-icon{width:15px;height:15px}
.user-account-history header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.user-account-history header strong{font-size:12px}
.user-account-history time,.user-account-history small{color:var(--text-tertiary);font-size:10px}
.user-account-history p{margin:4px 0;color:var(--text-secondary);font-size:11px;line-height:1.45}

@media(max-width:1100px){.user-account-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.user-account-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.user-account-detail-summary>div:nth-child(2){border-right:0}.user-account-detail-summary>div:nth-child(-n+2){border-bottom:1px solid var(--border)}}
@media(max-width:720px){.user-management-heading,.user-account-detail-hero{align-items:stretch;flex-direction:column}.user-management-heading .button,.user-account-detail-hero .profile-actions{width:100%}.user-account-detail-hero .profile-actions .button{flex:1 1 0}.user-account-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.user-account-approval{grid-template-columns:1fr}}
@media(max-width:480px){.user-account-summary,.user-account-detail-summary{grid-template-columns:1fr}.user-account-detail-summary>div{border-right:0;border-bottom:1px solid var(--border)}.user-account-detail-summary>div:last-child{border-bottom:0}.user-account-history header{align-items:flex-start;flex-direction:column;gap:3px}}

/* Administration: data safety */
.data-safety{display:grid;gap:18px;min-width:0}
.data-safety>.panel,.data-safety>.notice{margin:0}
.data-safety-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #c9dfd3;border-radius:var(--radius);padding:20px 22px;background:linear-gradient(135deg,#f2faf6 0%,#fff 70%);box-shadow:var(--shadow-xs)}
.data-safety-heading h2{margin:4px 0 5px;font-size:22px;line-height:1.2}
.data-safety-heading p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.5}
.data-safety-heading-status{max-width:320px;text-align:right}
.data-safety-heading-status small{display:block;margin-top:6px;color:var(--text-secondary);font-size:10.5px;line-height:1.45}
.data-safety-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.data-safety-summary article{min-width:0;border:1px solid var(--border);border-radius:12px;padding:15px 16px;background:#fff;box-shadow:var(--shadow-xs)}
.data-safety-summary span,.data-safety-summary strong,.data-safety-summary small{display:block}
.data-safety-summary span{color:var(--text-secondary);font-size:9.5px;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
.data-safety-summary strong{margin:8px 0 5px;color:var(--primary);font-size:25px;line-height:1}
.data-safety-summary small{color:var(--text-tertiary);font-size:10.5px;line-height:1.35}
.local-database-panel{overflow:hidden}
.local-database-panel>.panel-header{padding:17px 18px}
.local-database-panel>.panel-header h2{margin-top:3px;font-size:18px}
.local-database-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#f8fbf9}
.local-database-overview article{min-width:0;padding:15px 16px;border-right:1px solid var(--border);background:#fff}
.local-database-overview article:last-child{border-right:0}
.local-database-overview span,.local-database-overview strong,.local-database-overview small{display:block}
.local-database-overview span{color:var(--text-tertiary);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.local-database-overview strong{margin:7px 0 4px;color:var(--text);font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.local-database-overview small{color:var(--text-secondary);font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.local-database-actions{display:flex;align-items:center;gap:10px;padding:15px 17px;background:#fff}
.local-database-actions>.button{flex:0 0 auto}
.local-database-actions>.button:disabled{cursor:not-allowed;opacity:.55}
.local-database-actions p{max-width:650px;margin:0 0 0 auto;color:var(--text-secondary);font-size:10.5px;line-height:1.5;text-align:right}
.local-database-actions p strong{color:var(--text)}
.data-safety-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.data-safety-card{min-width:0;border:1px solid var(--border);border-top:3px solid var(--primary);border-radius:12px;padding:16px;background:#fff;box-shadow:var(--shadow-xs)}
.data-safety-card.warning{border-top-color:#b7791f;background:#fffbf2}
.data-safety-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.data-safety-card header>span:first-child{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#eaf6ef;color:var(--primary)}
.data-safety-card.warning header>span:first-child{background:#fff2d9;color:#9a6700}
.data-safety-card header .ui-icon{width:18px;height:18px}
.data-safety-card h3{margin:13px 0 6px;font-size:14px}
.data-safety-card p{margin:0;color:var(--text-secondary);font-size:11px;line-height:1.55}
.data-safety-controls{overflow:hidden}
.data-safety-controls>.panel-header{padding:16px 18px}
.data-safety-controls>.panel-header h2{font-size:17px}
.data-safety-controls>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.data-safety-controls button{display:flex;align-items:flex-start;gap:11px;min-width:0;border:0;border-right:1px solid var(--border);padding:16px;background:#fff;color:inherit;text-align:left;cursor:pointer}
.data-safety-controls button:last-child{border-right:0}
.data-safety-controls button:hover{background:#f3faf6}
.data-safety-controls button>.ui-icon{width:19px;height:19px;flex:0 0 auto;color:var(--primary)}
.data-safety-controls button span{min-width:0}
.data-safety-controls button strong,.data-safety-controls button small{display:block}
.data-safety-controls button strong{font-size:12px}
.data-safety-controls button small{margin-top:4px;color:var(--text-secondary);font-size:10.5px;line-height:1.4}
.data-safety-notice{align-items:flex-start;border-color:#ecd59f;background:#fffaf0}
.data-safety-notice>span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:#fff0cc;color:#9a6700}
.data-safety-notice .ui-icon{width:17px;height:17px}
.data-safety-notice strong,.data-safety-notice div>span{display:block}
.data-safety-notice strong{margin-bottom:3px;font-size:12px}
.data-safety-notice div>span{color:var(--text-secondary);font-size:11px;line-height:1.5}
@media(max-width:1100px){.data-safety-summary,.local-database-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.local-database-overview article:nth-child(2){border-right:0}.local-database-overview article:nth-child(-n+2){border-bottom:1px solid var(--border)}.data-safety-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.data-safety-heading{align-items:flex-start;flex-direction:column}.data-safety-heading-status{max-width:none;text-align:left}.local-database-actions{align-items:stretch;flex-direction:column}.local-database-actions>.button{width:100%}.local-database-actions p{max-width:none;margin:2px 0 0;text-align:left}.data-safety-controls>div{grid-template-columns:1fr}.data-safety-controls button{border-right:0;border-bottom:1px solid var(--border)}.data-safety-controls button:last-child{border-bottom:0}}
@media(max-width:520px){.data-safety-summary,.data-safety-grid,.local-database-overview{grid-template-columns:1fr}.local-database-overview article{border-right:0;border-bottom:1px solid var(--border)}.local-database-overview article:last-child{border-bottom:0}}

/* Secure sign-in */
.auth-gate{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 18% 15%,rgba(111,196,72,.18),transparent 28%),linear-gradient(140deg,#17263a 0%,#223850 55%,#176441 100%)}
.auth-card{width:min(470px,100%);overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:#fff;box-shadow:0 26px 80px rgba(8,24,36,.34)}
.auth-brand{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#f8fff9,#f5f8fb)}
.auth-brand img{width:62px;height:62px;object-fit:contain;flex:0 0 auto}.auth-brand span,.auth-brand h1,.auth-brand p{display:block;margin:0}.auth-brand span{color:var(--primary);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.auth-brand h1{margin-top:3px;color:#223047;font-size:18px;line-height:1.25}.auth-brand p{margin-top:3px;color:var(--text-secondary);font-size:11px}
#auth-content{padding:18px 22px}.auth-heading>span{color:var(--primary);font-size:10px;font-weight:850;letter-spacing:.1em}.auth-heading h2{margin:4px 0;font-size:21px}.auth-heading p{margin:0 0 14px;color:var(--text-secondary);font-size:12px;line-height:1.5}
.auth-form{display:grid;gap:10px}.auth-field{display:grid;gap:5px}.auth-field>span{color:#34445a;font-size:11px;font-weight:760}.auth-field>div{display:grid;grid-template-columns:1fr auto}.auth-field input{width:100%;height:40px;border:1px solid var(--border-strong);border-radius:9px;padding:0 12px;color:var(--text);background:#fff}.auth-field>div input{border-radius:9px 0 0 9px}.auth-field [data-password-toggle]{width:58px;border:1px solid var(--border-strong);border-left:0;border-radius:0 9px 9px 0;background:#f8fafc;color:var(--primary);font-size:11px;font-weight:750}
.auth-password-note,.auth-security-copy,.auth-alert{display:grid;gap:3px;border:1px solid #dce9e1;border-radius:9px;padding:9px 10px;background:#f2faf5}.auth-password-note strong,.auth-security-copy strong,.auth-alert strong{font-size:11px}.auth-password-note span,.auth-security-copy span,.auth-alert span{color:var(--text-secondary);font-size:10.5px;line-height:1.45}.auth-alert.error{margin-bottom:12px;border-color:#efc9c7;background:#fff4f3;color:var(--danger)}
.auth-submit,.auth-secondary{min-height:44px;border-radius:9px;padding:0 16px;font-weight:780}.auth-submit{border:1px solid var(--primary);background:var(--primary);color:#fff}.auth-submit:hover{background:var(--primary-hover)}.auth-submit:disabled{cursor:not-allowed;opacity:.55}.auth-secondary{border:1px solid var(--border-strong);background:#fff;color:var(--text)}.auth-error{min-height:18px;margin:0;color:var(--danger);font-size:11px;line-height:1.45}.auth-security-copy{margin-top:18px;background:#f8fafc;border-color:var(--border)}
.auth-loading{min-height:180px;display:grid;place-items:center;align-content:center;gap:12px;color:var(--text-secondary)}.auth-loading span{width:30px;height:30px;border:3px solid #d9e8df;border-top-color:var(--primary);border-radius:50%;animation:auth-spin .8s linear infinite}.auth-loading p{margin:0;font-size:12px}@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-card>footer{display:grid;gap:2px;padding:10px 22px;border-top:1px solid var(--border);background:#f8fafc}.auth-card>footer strong{font-size:10px;color:#3e4d61}.auth-card>footer span{font-size:9.5px;color:var(--text-tertiary)}
.session-warning-dialog{width:min(440px,calc(100% - 28px));border:0;border-radius:16px;padding:22px;background:#fff;box-shadow:0 24px 80px rgba(8,24,36,.34)}.session-warning-dialog::backdrop{background:rgba(11,27,40,.64);backdrop-filter:blur(2px)}.session-warning-dialog{grid-template-columns:42px 1fr;gap:14px}.session-warning-dialog[open]{display:grid}.session-warning-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff3d5;color:#9a6200;font-size:21px;font-weight:900}.session-warning-dialog h2{margin:1px 0 6px;font-size:18px}.session-warning-dialog p{margin:0;color:var(--text-secondary);font-size:12px;line-height:1.55}.session-warning-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;margin-top:4px}.session-warning-actions .auth-submit,.session-warning-actions .auth-secondary{width:auto;min-width:122px;margin:0;padding:0 16px}
.profile-session-role{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:10px 3px!important;border-bottom:1px solid var(--border)}.profile-session-role span{font-size:10.5px;color:var(--text-secondary)}.profile-session-role strong{font-size:11px;color:var(--primary)}.profile-popover .profile-logout{margin-top:7px;color:var(--danger);font-weight:700}

/* Internal messaging */
.messages-workspace{display:grid;gap:14px}.messages-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.messages-header h2{margin:3px 0 3px;font-size:22px}.messages-header p{margin:0;color:var(--text-secondary);font-size:12px}.messages-header>.button{min-width:138px;justify-content:center}
.messages-layout{height:clamp(590px,calc(100vh - 250px),720px);min-height:590px;display:grid;grid-template-columns:168px minmax(300px,350px) minmax(360px,1fr);overflow:hidden;border:1px solid var(--border);border-radius:15px;background:#fff;box-shadow:var(--shadow-sm)}
.message-folders{min-width:0;display:flex;flex-direction:column;gap:4px;padding:14px 10px;border-right:1px solid var(--border);background:linear-gradient(180deg,#f8fbf9 0%,#f4f7f6 100%)}.message-folder-title{padding:2px 9px 11px}.message-folder-title span,.message-folder-title small{display:block}.message-folder-title span{color:var(--text-primary);font-size:12px;font-weight:850}.message-folder-title small{margin-top:2px;color:var(--text-tertiary);font-size:9.5px}.message-folders button{min-height:41px;border:0;border-radius:9px;padding:0 9px;display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;background:transparent;color:var(--text-secondary);font-size:11.5px;text-align:left}.message-folders button>.ui-icon{width:16px;height:16px}.message-folders button:hover{background:#eaf4ee;color:#19613f}.message-folders button.active{background:#dcefe4;color:#105d39;font-weight:850;box-shadow:inset 3px 0 #18864f}.message-folders b{min-width:23px;border-radius:999px;padding:2px 6px;background:rgba(255,255,255,.88);font-size:9.5px;text-align:center}
.message-list-panel{min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:#fff}.message-list-heading{min-height:59px;padding:11px 14px 9px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #edf1ef}.message-list-heading strong,.message-list-heading span{display:block}.message-list-heading strong{font-size:13px}.message-list-heading span{margin-top:2px;color:var(--text-tertiary);font-size:9.5px}.message-list-toolbar{padding:9px 11px;display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:7px;border-bottom:1px solid var(--border);background:#fbfcfc}.message-list-toolbar label{height:37px;display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:9px;padding:0 10px;background:#fff}.message-list-toolbar label:focus-within{border-color:#7fb99b;box-shadow:0 0 0 3px rgba(24,134,79,.08)}.message-list-toolbar .ui-icon{width:15px;height:15px;color:#7a8d83}.message-list-toolbar input{min-width:0;width:100%;height:34px;border:0;outline:0;background:transparent;font-size:11px}.message-list-toolbar select{min-width:0;width:100%;height:34px;border:0;outline:0;background:#fff;color:var(--text-secondary);font-size:10px}.message-list{min-height:0;display:block;overflow-y:auto}.message-row{position:relative;min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:13px 12px;border:0;border-bottom:1px solid #edf1ef;cursor:pointer;background:#fff;outline:0}.message-row:hover{background:#f6faf8}.message-row:focus-visible{box-shadow:inset 0 0 0 2px #58a87c}.message-row.selected{background:#e8f4ed}.message-row.selected:after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--primary)}.message-row.unread{background:#f0faf4}.message-row.unread.selected{background:#e3f3e9}.message-row.high-priority{box-shadow:inset 3px 0 #d98b18}.message-row.unread h3,.message-row.unread header strong{font-weight:850}.message-avatar{box-sizing:border-box;width:36px;height:36px;min-width:36px;border-radius:50%;display:grid;place-items:center;align-self:center;overflow:hidden;flex:0 0 36px;padding:0;background:linear-gradient(145deg,#dff1e6,#cde8d8);color:#145e3c;font-size:10.5px;font-weight:850;line-height:1;text-align:center}.message-avatar.large{width:42px;height:42px;min-width:42px;flex-basis:42px;font-size:12px}.message-row-copy{min-width:0}.message-row-copy header{display:flex;align-items:center;justify-content:space-between;gap:8px}.message-row-copy header strong{min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;font-size:10.5px;line-height:1.2}.message-row-copy .message-direction{flex:0 0 auto;margin:0;color:var(--text-tertiary);font-size:8.5px;line-height:1;text-transform:uppercase}.message-row-copy .message-counterpart{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:inherit;line-height:inherit;text-transform:none}.message-row-copy time{flex:0 0 auto;color:var(--text-tertiary);font-size:8.5px}.message-row-copy h3{margin:4px 0 2px;display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.message-row-copy h3 .ui-icon{width:12px;height:12px;flex:0 0 auto}.message-favorite-mark{display:inline-flex;color:#d2901d}.message-priority-mark{display:inline-flex;color:#b34f35}.message-row-copy p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:10px}.message-row-copy footer{min-height:16px;margin-top:5px;display:flex;align-items:center;gap:7px}.message-row-copy footer span{display:inline-flex;align-items:center;gap:3px;color:var(--text-tertiary);font-size:8.5px}.message-row-copy footer .ui-icon{width:11px;height:11px}.message-unread-dot{border-radius:999px;padding:2px 6px;background:#d5efe0;color:#12613c!important;font-weight:850}.message-high-label{border-radius:999px;padding:2px 6px;background:#fff0d6;color:#8a5410!important;font-weight:800}.message-empty{min-height:330px;padding:24px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--text-secondary)}.message-empty>.ui-icon{width:32px;height:32px;color:#8ea79a}.message-empty h3{margin:10px 0 2px;font-size:13px}.message-empty p{margin:0;font-size:10.5px}
.message-reading-panel{min-width:0;min-height:0;overflow-y:auto;background:#fff}.message-reader{min-height:100%;display:flex;flex-direction:column;padding:22px 24px}.message-reader-empty{height:100%;min-height:420px;padding:30px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--text-secondary)}.message-reader-empty>.ui-icon{width:42px;height:42px;color:#9aada3}.message-reader-empty h3{margin:12px 0 3px;color:var(--text-primary);font-size:15px}.message-reader-empty p{max-width:290px;margin:0;font-size:11px;line-height:1.5}.message-reader-header{display:flex;align-items:flex-start;gap:10px;padding-bottom:17px;border-bottom:1px solid var(--border)}.message-reader-back{display:none}.message-reader-heading{min-width:0}.message-reader-heading h2{margin:7px 0 5px;overflow-wrap:anywhere;font-size:19px;line-height:1.25}.message-reader-heading p{margin:0;color:var(--text-secondary);font-size:10px}.message-security-label{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 7px;background:#edf7f1;color:#17613e;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.message-security-label .ui-icon{width:12px;height:12px}.message-reading-meta{margin-top:18px;display:flex;align-items:center;gap:10px}.message-reading-meta>div{min-width:0}.message-reading-meta strong,.message-reading-meta span{display:block}.message-reading-meta strong{font-size:12px}.message-reading-meta span{margin-top:2px;color:var(--text-secondary);font-size:9.5px}.message-reading-meta .message-priority-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;background:#fff0d6;color:#8a5410;font-size:9px;font-weight:850}.message-priority-badge .ui-icon{width:12px;height:12px}.message-address-line{margin-top:13px;display:flex;align-items:flex-start;gap:8px;color:var(--text-secondary);font-size:9.5px}.message-address-line>span{flex:0 0 auto;border-radius:5px;padding:3px 6px;background:#f0f3f2;color:var(--text-tertiary);font-size:8.5px;font-weight:800;text-transform:uppercase}.message-address-line strong{overflow-wrap:anywhere;color:var(--text-secondary);font-weight:600}.message-body{min-height:150px;margin-top:17px;padding:18px;border:1px solid #e3eae6;border-radius:11px;background:#fbfcfc;color:var(--text-primary);font-size:11.5px;line-height:1.75;overflow-wrap:anywhere}.message-reader-actions{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:7px}.message-reader-actions>span{flex:1}.message-reader-actions .button{white-space:nowrap}.message-response-actions,.message-manage-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.message-reader-actions .is-favorite{border-color:#e0b25f;background:#fff7e7;color:#915b0a}.message-trash-button{color:var(--danger)!important}.message-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.message-section-title h3{margin:0;font-size:11.5px}.message-section-title span{color:var(--text-tertiary);font-size:9px}.message-attachments{margin-top:15px;display:grid;gap:7px}.message-attachments a{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:#fff;text-decoration:none}.message-attachments a:hover{border-color:#9bc8b1;background:#f8fcfa}.message-attachments a>span{display:flex;align-items:center;gap:7px;min-width:0}.message-attachments a .ui-icon{width:14px;height:14px;color:var(--primary)}.message-attachments a strong{overflow-wrap:anywhere;font-size:10.5px}.message-attachments a small{flex:0 0 auto;color:var(--text-secondary);font-size:9.5px}
.message-storage-panel{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#fff}.message-storage-panel>summary{list-style:none;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 13px;cursor:pointer}.message-storage-panel>summary::-webkit-details-marker{display:none}.message-storage-panel>summary>span{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#e9f5ee;color:var(--primary)}.message-storage-panel>summary>span .ui-icon{width:16px;height:16px}.message-storage-panel>summary strong,.message-storage-panel>summary small{display:block}.message-storage-panel>summary strong{font-size:11px}.message-storage-panel>summary small{margin-top:1px;color:var(--text-secondary);font-size:9.5px}.message-storage-panel>summary>b{color:var(--primary);font-size:12px}.message-storage-content{padding:0 15px 15px;border-top:1px solid var(--border)}.message-storage-meter{height:7px;margin:15px 0;border-radius:999px;background:#e7edf0;overflow:hidden}.message-storage-meter span{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#18794e,#78b936)}.message-storage-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:10px;overflow:hidden}.message-storage-metrics div{padding:12px;border-right:1px solid var(--border)}.message-storage-metrics div:last-child{border-right:0}.message-storage-metrics small,.message-storage-metrics strong{display:block}.message-storage-metrics small{color:var(--text-secondary);font-size:9.5px}.message-storage-metrics strong{margin-top:3px;font-size:14px}.message-storage-lists{margin-top:13px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.message-storage-lists section{border:1px solid var(--border);border-radius:9px;padding:12px}.message-storage-lists h4{margin:0 0 8px;font-size:11px}.message-storage-lists ul{list-style:none;margin:0;padding:0}.message-storage-lists li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid #edf1f4;font-size:10px}.message-storage-lists li span{min-width:0;overflow-wrap:anywhere}.message-storage-lists li small{display:block;color:var(--text-tertiary)}.message-storage-policy{margin-top:11px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-secondary);font-size:10px}.message-storage-policy p{margin:0}
.message-dialog{width:min(790px,calc(100% - 24px))}.message-compose-form{display:grid;gap:14px}.message-compose-form>label,.message-recipient-grid label,.message-compose-options label{display:grid;gap:6px}.message-compose-form label>span,.message-recipient-grid label>span,.message-compose-options label>span{font-size:11px;font-weight:800}.message-compose-form input,.message-compose-form select,.message-compose-form textarea{width:100%;border:1px solid var(--border-strong);border-radius:9px;padding:10px 11px;background:#fff;font-size:12px}.message-compose-form input:focus,.message-compose-form select:focus,.message-compose-form textarea:focus{border-color:#69aa87;outline:3px solid rgba(24,134,79,.08)}.message-compose-form input,.message-compose-form select{height:42px}.message-compose-form textarea{min-height:165px;resize:vertical;line-height:1.55}.message-recipient-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:11px}.message-compose-options{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:11px}.message-recipient-preview{display:grid;gap:7px;border:1px solid #dbe9e0;border-radius:10px;padding:10px 12px;background:#f7fbf8}.message-recipient-preview>strong{font-size:10px;color:#246b49}.message-recipient-preview>div{display:flex;flex-wrap:wrap;gap:6px}.message-recipient-preview>div>span{display:inline-flex;align-items:center;gap:5px;border:1px solid #cfe1d7;border-radius:999px;padding:4px 8px;background:#fff;color:var(--text-primary);font-size:10px;font-weight:700}.message-recipient-preview small{color:var(--text-tertiary);font-size:8.5px;font-weight:500}.message-recipient-preview.empty span{color:var(--text-secondary);font-size:10px}.message-forward-note{display:flex;align-items:flex-start;gap:7px;border-radius:8px;padding:9px 11px;background:#fff8e8;color:#765112;font-size:10px;line-height:1.45}.message-forward-note .ui-icon{width:14px;height:14px;flex:0 0 auto}.message-file-picker{padding:13px;border:1px dashed #9ebbac;border-radius:10px;background:#f7fbf8}.message-file-picker input{height:auto;padding:5px}.message-file-picker small{color:var(--text-secondary);font-size:9.5px}.message-compose-form>footer{display:flex;justify-content:flex-end;gap:8px;padding-top:3px}
@media(max-width:1100px){.messages-layout{height:auto;grid-template-columns:150px minmax(290px,340px) minmax(320px,1fr)}.message-reader{padding:20px}.message-reader-actions{flex-wrap:wrap}.message-reader-actions>span{display:none;flex-basis:100%}}
@media(max-width:900px){.messages-layout{height:auto;min-height:0;grid-template-columns:minmax(280px,38%) minmax(0,1fr)}.message-folders{grid-column:1/-1;flex-direction:row;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--border)}.message-folder-title{min-width:100px;padding:4px 8px}.message-folders button{min-width:103px}.message-list-panel,.message-reading-panel{min-height:560px;max-height:650px}.message-storage-metrics{grid-template-columns:repeat(2,1fr)}.message-storage-metrics div:nth-child(2){border-right:0}.message-storage-metrics div:nth-child(-n+2){border-bottom:1px solid var(--border)}.message-storage-lists{grid-template-columns:1fr}}
@media(max-width:680px){.auth-gate{padding:10px}.auth-brand{padding:16px}.auth-brand img{width:58px;height:58px}.auth-brand h1{font-size:15px}#auth-content{padding:18px}.messages-header{align-items:stretch;flex-direction:column}.messages-header>.button{width:100%}.messages-layout{display:block}.message-folders{display:flex}.message-list-panel{min-height:480px;max-height:none;border-right:0}.message-reading-panel{min-height:0;max-height:none;border-top:1px solid var(--border)}.message-reader{min-height:500px}.message-reader-back{display:inline-flex}.message-list-toolbar,.message-recipient-grid,.message-compose-options{grid-template-columns:1fr}.message-storage-metrics{grid-template-columns:1fr}.message-storage-metrics div{border-right:0;border-bottom:1px solid var(--border)}.message-storage-metrics div:last-child{border-bottom:0}.message-reader-actions{align-items:stretch;flex-direction:column}.message-response-actions,.message-manage-actions{display:grid;grid-template-columns:1fr}.message-reader-actions .button{width:100%;justify-content:center}}