:root {
    --accent: #0f766e;
    --accent-2: #0ea5a4;
    --background: #f3f6f8;
    --surface: #ffffff;
    --surface-2: #f7fafb;
    --text: #17202a;
    --muted: #64748b;
    --line: #dce4e8;
    --shadow: 0 18px 50px rgba(15, 23, 42, .10);
    --danger: #b42318;
    --font-sans: "Inter", "Anuphan", system-ui, -apple-system, sans-serif;
    --font-display: "Inter", "Anuphan", sans-serif;
}
body[data-accent-theme="blue"] { --accent: #2563eb; --accent-2: #38bdf8; }
body[data-accent-theme="green"] { --accent: #ca8a04; --accent-2: #facc15; }
body[data-accent-theme="purple"] { --accent: #7c3aed; --accent-2: #a78bfa; }
body[data-accent-theme="orange"] { --accent: #c2410c; --accent-2: #fb923c; }

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: var(--background);
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
}
body.dark-mode {
    --background: #0f1720;
    --surface: #17212b;
    --surface-2: #1e2b36;
    --text: #edf6f7;
    --muted: #a8bac4;
    --line: #33444f;
    --shadow: 0 18px 50px rgba(0, 0, 0, .30);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.login-page {
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 8% 5%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 38%),
        var(--background);
}
.login-shell { width: min(980px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.login-brand { display: flex; gap: 18px; align-items: center; justify-content:center; padding: 28px 20px; }
.login-brand h1 { margin: 0; font-family:"Anuphan",var(--font-sans); font-size:clamp(36px,4.7vw,54px); font-weight:400; line-height:1.4; letter-spacing:-.8px; }
.login-brand p { margin:7px 0 0; color: var(--muted); line-height: 1.65; font-weight:400; }
.brand-mark {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 88px; height: 88px; border-radius: 25px;
    color: white; font-family:"Inter",var(--font-sans); font-size: 30px; font-weight: 500;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 34%, transparent);
}
.brand-mark.small { width: 42px; height: 42px; border-radius: 13px; font-size: 15px; box-shadow: none; }
.login-card { padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.login-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: 22px; font-weight: 800; }
.field { display: grid; gap: 7px; margin-top: 16px; color: var(--muted); font-weight: 700; }
.input {
    width: 100%; min-height: 46px; padding: 10px 12px;
    color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 10px; outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.button {
    display: inline-flex; justify-content: center; align-items: center;
    min-height: 40px; padding: 9px 15px; border: 0; border-radius: 9px;
    cursor: pointer; font-weight: 800;
}
.button { gap: 7px; }
.button.primary { color: white; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.button.secondary { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); }
.button.danger { color: white; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
.button.wide { width: 100%; margin-top: 22px; }
.button:hover { filter: brightness(.96); transform: translateY(-1px); }
.button:disabled, .button.disabled, .button[aria-disabled="true"] {
    opacity: .38; filter: grayscale(.35); cursor: not-allowed;
    pointer-events: none; transform: none; box-shadow: none;
}
.icon-button {
    display: grid; place-items: center; width: 40px; height: 40px;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 50%; cursor: pointer;
}
.theme-actions { display: flex; align-items: center; gap: 8px; }
.theme-picker {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
    padding: 0 9px; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 9px;
}
.theme-swatch {
    position: relative; width: 19px; height: 19px; padding: 0;
    border: 2px solid var(--surface); border-radius: 50%; cursor: pointer;
    box-shadow: 0 0 0 1px var(--line);
}
.theme-swatch.teal { background: #0f766e; }
.theme-swatch.blue { background: #2563eb; }
.theme-swatch.green { background: #facc15; }
.theme-swatch.purple { background: #7c3aed; }
.theme-swatch.orange { background: #c2410c; }
.theme-swatch.active { box-shadow: 0 0 0 2px var(--text); }
.theme-swatch.active::after {
    content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
    color: white; font-size: 11px; font-weight: 700; line-height: 1;
}
.theme-picker.compact { gap: 5px; padding: 0 7px; }
.theme-picker.compact .theme-swatch { width: 17px; height: 17px; }
.login-message { display: block; margin-top: 14px; padding: 11px 12px; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line)); border-radius: 9px; }
.login-note { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 370px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 11px 12px 20px; color: var(--text); background: var(--surface); border-right: 1px solid var(--line); }
.sidebar-brand { display: flex; align-items: center; gap: 10px; margin: 0 7px 8px; font-size: 18px; }
.sidebar-brand > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.sidebar-brand small { color: var(--muted); font-size: 11px; font-weight: 300; }
.sidebar-close, .sidebar-open { display: none; border: 0; cursor: pointer; }
.nav-link { display: flex; align-items: center; gap: 10px; margin: 3px 0; padding: 9px 11px; border-radius: 9px; color: var(--muted); font-weight: 400; }
.nav-link i { color: var(--accent); font-size: 16px; }
.nav-link:hover, .nav-link.active { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.tree-menu { margin-top: 5px; }
.tree-module { margin-top: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); overflow: hidden; }
.tree-module > summary { display: flex; align-items: center; gap: 10px; padding: 11px; cursor: pointer; list-style: none; }
.tree-module > summary::-webkit-details-marker, .tree-branch > summary::-webkit-details-marker { display: none; }
.tree-module > summary > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.tree-module > summary strong { font-weight: 500; }
.tree-module > summary small { color: var(--muted); font-size: 11px; font-weight: 300; }
.tree-module > summary b { transition: transform .18s ease; }
.tree-module[open] > summary b { transform: rotate(180deg); }
.module-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-radius: 9px; font-size: 16px; }
.tree-children { padding: 0 7px 8px; }
.tree-branch > summary { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px 6px calc(8px + (var(--level) * 10px)); color: var(--text); border-radius: 7px; cursor: pointer; font-family: "Anuphan", var(--font-sans); font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.tree-branch > summary:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.tree-folder { color: var(--accent); }
.tree-branch[open] > summary .tree-folder i::before { content: "\f3d7"; }
.tree-leaf { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px 6px calc(15px + (var(--level) * 10px)); color: color-mix(in srgb, var(--text) 78%, var(--muted)); border-radius: 7px; font-family: "Anuphan", var(--font-sans); font-size: 13.5px; font-weight: 300; line-height: 1.35; }
.tree-leaf:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.tree-leaf > span:last-child { display: grid; gap: 2px; min-width: 0; }
.tree-leaf strong { font-weight: 300; }
.tree-leaf small { color: var(--muted); font-size: 10px; font-weight: 300; }
.tree-leaf-icon { display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; flex: 0 0 auto; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-radius: 6px; font-size: 11px; }
.workspace { min-width: 0; }
.topbar {
    min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 12px 26px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar > div:first-child { display: flex; align-items: center; gap: 10px; }
.company-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.company-heading-logo {
    display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px;
    overflow: hidden; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 12px;
}
.company-heading-logo > i { display: none; font-size: 20px; }
.company-heading-logo .company-brand-logo {
    display: block; width: 100%; height: 100%; max-width: 56px; max-height: 56px;
    object-fit: contain; object-position: center;
}
.company-heading-text { display: grid; min-width: 0; line-height: 1.3; }
.company-heading-text strong { font-weight: 500; }
.company-heading-text small { margin-top: 3px; font-weight: 300; }
.topbar.standalone { position: sticky; top: 0; z-index: 2; }
.topbar small { display: block; margin-top: 4px; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.employee-page-header>div:first-child { min-width:0; gap:5px; }
.employee-page-header>div:first-child>strong { color:var(--accent); font-size:14px; font-weight:500; }
.employee-header-logo { display:inline-grid; place-items:center; flex:none; width:68px; height:42px; }
.employee-header-logo i { display:none; color:var(--muted); font-size:24px; }
.employee-header-logo img { display:block; max-width:68px; max-height:42px; object-fit:contain; }
.content { padding: 28px; }
.content.narrow { max-width: 1100px; margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 22px; }
.page-heading small { color: var(--accent); font-weight: 800; letter-spacing: 1px; }
.page-heading h1 { margin: 6px 0 0; font-size: 28px; }
h1, h2, h3 { font-family: var(--font-display); }
.status-pill { padding: 7px 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; font-size: 12px; font-weight: 800; }
.master-workspace { max-width:1440px; margin:0 auto; }
.master-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:18px; align-items:start; }
.master-nav-card,.data-card { background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:0 8px 24px rgba(15,23,42,.06); }
.master-nav-card { position:sticky; top:92px; overflow:hidden; }
.master-group-switch { display:grid; grid-template-columns:1fr 1fr; padding:8px; gap:6px; border-bottom:1px solid var(--line); }
.master-group-switch a { display:flex; justify-content:center; align-items:center; gap:7px; padding:9px; color:var(--muted); border-radius:8px; font-weight:500; }
.master-group-switch a.active { color:#fff; background:var(--accent); }
.master-nav { display:grid; padding:8px; max-height:calc(100vh - 190px); overflow:auto; }
.master-nav-item { display:flex; align-items:center; gap:10px; padding:10px; color:var(--muted); border-radius:8px; }
.master-nav-item i { width:22px; color:var(--accent); text-align:center; }
.master-nav-item:hover { color:var(--text); background:var(--surface-2); }
.master-nav-item.active { color:var(--text); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); box-shadow:inset 3px 0 var(--accent); }
.data-card { min-width:0; overflow:hidden; }
.data-card-header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding:20px 22px; border-bottom:1px solid var(--line); }
.data-card-header h2 { margin:0; font-size:20px; }.data-card-header p { margin:5px 0 0; color:var(--muted); }
.read-only-badge { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:6px 10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:999px; font-size:12px; font-weight:600; }
.table-scroll { overflow:auto; }.data-table { width:100%; border-collapse:collapse; }
.data-table th,.data-table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); }
.data-table th { position:sticky; top:0; z-index:1; color:var(--muted); background:var(--surface-2); font-size:13px; font-weight:600; }
.data-table tbody tr:hover { background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }
.code-chip { display:inline-flex; min-width:36px; justify-content:center; padding:4px 7px; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); border-radius:6px; font-family:"Inter",var(--font-sans); font-weight:600; }
.state-badge { display:inline-flex; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.state-badge.active { color:#15803d; background:color-mix(in srgb,#22c55e 12%,var(--surface)); }.state-badge.warning { color:#b45309; background:color-mix(in srgb,#f59e0b 14%,var(--surface)); border:1px solid color-mix(in srgb,#f59e0b 28%,var(--line)); }.state-badge.inactive { color:var(--muted); background:var(--surface-2); border:1px solid var(--line); }
.table-empty { display:grid; place-items:center; gap:8px; min-height:220px; color:var(--muted); font-size:16px; }.table-empty i { color:var(--accent); font-size:30px; }
@media(max-width:1000px) { .master-layout { grid-template-columns:230px minmax(0,1fr); } }
@media(max-width:760px) { .master-layout { grid-template-columns:1fr; }.master-nav-card { position:static; }.data-card-header { flex-direction:column; } }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.module-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.module-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px; border-bottom: 1px solid var(--line); }
.module-card header small { color: var(--muted); }
.module-card header h2 { margin: 5px 0 0; font-size: 18px; }
.module-card header > span { color: var(--accent); font-weight: 800; font-size: 12px; }
.module-card.hr { border-top: 4px solid #0f766e; }
.module-card.time { border-top: 4px solid #2563eb; }
.module-card.payroll { border-top: 4px solid #7c3aed; }
.menu-list { display: grid; max-height: 520px; overflow: auto; }
.menu-item { display: grid; gap: 4px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.menu-item:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.menu-item small { color: var(--muted); }
.empty-panel, .placeholder-panel { padding: 34px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.empty-panel.error { color: var(--danger); }
.placeholder-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; color: white; background: var(--accent); border-radius: 20px; font-size: 28px; }
.placeholder-panel p { color: var(--muted); line-height: 1.7; }
.placeholder-panel dl { display: grid; grid-template-columns: 150px 1fr; gap: 1px; max-width: 560px; margin: 25px auto 0; text-align: left; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.placeholder-panel dt, .placeholder-panel dd { margin: 0; padding: 11px 13px; background: var(--surface-2); }
.placeholder-panel dt { font-weight: 800; }
.welcome-panel { min-height: 510px; display: grid; grid-template-columns: 1fr minmax(320px, .72fr); gap: 34px; align-items: center; padding: clamp(28px, 5vw, 68px); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.welcome-kicker { color: var(--accent); font-weight: 800; letter-spacing: 1px; }
.welcome-panel h2 { margin: 10px 0; font-size: clamp(30px, 4vw, 50px); }
.welcome-panel p { max-width: 610px; color: var(--muted); line-height: 1.8; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.summary-item { display: flex; align-items: center; gap: 13px; padding: 15px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; }
.summary-item > div { display: grid; gap: 4px; }
.summary-item small { color: var(--muted); }
.summary-icon { display: grid; place-items: center; width: 42px; height: 42px; color: white; background: var(--accent); border-radius: 12px; font-weight: 800; }

/* WebHRM modal standard: close with X; footer contains action buttons only. */
.modal-surface { position: relative; }
.modal-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 9px;
    cursor: pointer; font-size: 20px;
}
.modal-close:hover { color: white; background: var(--accent); border-color: var(--accent); }
.modal-action-row { display: flex; justify-content: flex-end; gap: 9px; }

@media (max-width: 1000px) {
    .module-grid { grid-template-columns: 1fr; }
    .app-shell { grid-template-columns: 340px minmax(0, 1fr); }
    .welcome-panel { grid-template-columns: 1fr; min-height: 0; }
    .summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-brand { padding: 10px; }
    .login-brand .brand-mark { width: 64px; height: 64px; border-radius: 18px; font-size: 23px; }
    .app-shell { display: block; }
    .sidebar { position: fixed; z-index: 20; left: 0; top: 0; width: min(340px, 90vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 16px 0 35px rgba(0,0,0,.28); }
    .sidebar-visible .sidebar { transform: translateX(0); }
    .sidebar-close { display: grid; place-items: center; width: 34px; height: 34px; color: white; background: rgba(255,255,255,.12); border-radius: 9px; font-size: 23px; }
    .sidebar-open { display: inline-grid; place-items: center; width: 38px; height: 38px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-radius: 9px; font-size: 19px; }
    .topbar { align-items: flex-start; padding: 13px 16px; }
    .topbar-actions > span { display: none; }
    .content { padding: 18px 14px; }
    .page-heading { align-items: flex-start; }
    .placeholder-panel dl { grid-template-columns: 1fr; }
}

/* Employee list */
.employee-filter { display:grid; grid-template-columns:minmax(260px,1.5fr) minmax(210px,1fr) minmax(170px,.7fr) auto auto; gap:12px; align-items:end; padding:18px; }
.filter-field { display:grid; gap:6px; color:var(--muted); font-size:12px; }
.filter-field .input { box-sizing:border-box; width:100%; height:42px; padding:9px 11px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; }
.filter-button { min-height:42px; }
.employee-metrics { grid-template-columns:repeat(2,minmax(0,260px)); }
.metric-card .metric-text { overflow:hidden; font-family:"Anuphan",var(--font-sans); font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.employee-list-card { margin-top:18px; }
.employee-table { min-width:860px; }
.result-limit { padding:12px 18px; color:var(--muted); background:var(--surface-2); border-top:1px solid var(--line); text-align:center; font-size:12px; }
.scope-warning { display:flex; align-items:center; gap:13px; margin-bottom:16px; padding:15px 17px; color:#92400e; background:color-mix(in srgb,#f59e0b 11%,var(--surface)); border:1px solid color-mix(in srgb,#f59e0b 30%,var(--line)); border-radius:12px; }
.scope-warning>i { font-size:24px; }
.scope-warning>div { display:grid; gap:3px; }
.scope-warning span { color:var(--muted); }
@media(max-width:1000px) { .employee-filter { grid-template-columns:1fr 1fr; }.filter-search { grid-column:1/-1; } }
@media(max-width:600px) { .employee-filter { grid-template-columns:1fr; }.filter-search { grid-column:auto; }.filter-button { width:100%; }.employee-metrics { grid-template-columns:1fr; } }
.header-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.employee-create-page { max-width:1320px; }
.employee-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; padding:22px; }
.employee-form-grid .immutable-code,.employee-form-grid select:disabled { color:var(--text); background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); cursor:not-allowed; opacity:1; }
.employee-edit-mode .employee-create-page { display:flex; flex-direction:column; gap:10px; width:calc(100% - 32px); height:calc(100vh - 88px); margin:0 auto; padding:10px 0 8px; overflow:hidden; }
.employee-edit-profile-card { flex:0 0 auto; overflow:hidden; }
.employee-edit-profile-card .employee-view-header { border-bottom:0; }
.employee-edit-tabs { align-items:center; padding-top:0; }
.employee-edit-tabs span { padding:0 10px; color:var(--muted); font-size:11px; }
.employee-edit-mode .employee-create-page > .data-card:last-of-type { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; overflow:hidden; }
.employee-edit-mode .employee-create-page > .employee-edit-panel { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; overflow:hidden; }
.employee-edit-mode .employee-create-page > .employee-edit-panel[hidden] { display:none!important; }
.employee-edit-readonly-grid { display:grid; flex:1 1 auto; min-height:0; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(92px,auto); align-content:start; gap:1px; padding:1px 1px 28px; overflow:auto; background:var(--line); }
.employee-edit-readonly-grid .form-field { box-sizing:border-box; min-width:0; min-height:92px; padding:11px 12px 13px; background:var(--surface); }
.employee-edit-contact-scroll { flex:1 1 auto; min-height:0; overflow:auto; background:var(--surface); }
.employee-edit-contact-grid { display:grid; flex:none; min-height:0; grid-template-columns:repeat(3,minmax(0,1fr)); padding-bottom:1px; overflow:visible; }
.employee-edit-contact-grid .contact-edit-field { min-height:92px; }
.employee-edit-contact-grid .contact-edit-field.address-wide { grid-column:span 2; min-height:92px; }
.employee-edit-contact-grid textarea.input { height:48px; min-height:48px; resize:vertical; }
.employee-edit-contact-grid .address-edit-group { grid-column:1/-1; padding:0; min-height:0; background:var(--surface); }
.address-edit-group h3 { margin:0; padding:7px 10px; color:var(--accent-strong); font-size:13px; font-weight:600; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }
.address-edit-grid { display:grid; grid-template-columns:minmax(150px,1.35fr) minmax(140px,1.2fr) repeat(3,minmax(105px,1fr)) minmax(92px,.8fr); gap:1px; background:var(--line); }
.employee-edit-contact-grid .address-edit-grid .form-field { min-height:68px; padding:7px 9px 8px; gap:4px; background:var(--surface); }
.address-edit-grid .form-field.wide { grid-column:auto; }
.address-edit-grid .form-field .input { height:36px; padding:6px 8px; font-size:12px; border-radius:8px; }
.employee-edit-contact-scroll .employee-background-section { margin:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.employee-sub-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:color-mix(in srgb,var(--accent) 5%,var(--surface)); border-bottom:1px solid var(--line); }
.employee-sub-panel-head strong { color:var(--accent-strong); font-size:13px; font-weight:600; }
.employee-sub-panel-head .button.compact { min-height:34px; padding:7px 12px; font-size:12px; }
.employee-family-action-col { width:88px; text-align:center; }
.employee-family-actions { display:flex; justify-content:center; gap:6px; }
.employee-family-actions .icon-button { width:32px; height:32px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:9px; color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); cursor:pointer; }
.employee-family-actions .icon-button.danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 24%,var(--line)); background:color-mix(in srgb,var(--danger) 7%,var(--surface)); }
.employee-edit-contact-scroll [data-edit-sub-panel] { min-height:120px; background:var(--surface); }
.employee-edit-mode .employee-edit-form-head { flex:0 0 auto; padding:10px 16px; }
.employee-edit-mode .employee-edit-form-head h2 { font-size:15px; }
.employee-edit-mode .employee-edit-form-head p { margin-top:3px; font-size:11px; }
.employee-edit-mode .employee-form-grid { flex:1 1 auto; min-height:0; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(92px,auto); gap:1px; padding:1px 1px 28px; overflow:auto; scroll-padding-bottom:28px; background:var(--line); }
.employee-edit-mode .form-field { box-sizing:border-box; order:var(--field-order,100); align-content:start; min-width:0; min-height:92px; padding:11px 12px 13px; overflow:visible; background:var(--surface); }
.employee-edit-mode .employee-code-field { display:none; }
.employee-edit-mode.employee-add-mode .employee-code-field { display:block; }
.employee-edit-mode .form-actions { flex:0 0 auto; margin:0; padding:10px 14px; background:var(--surface); border-top:1px solid var(--line); }
.employee-edit-mode .form-actions { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; opacity:0; pointer-events:none; }
.employee-new-related-note { min-height:150px; display:flex; align-items:center; justify-content:center; gap:10px; padding:24px; color:var(--muted); text-align:center; border:1px dashed var(--line); border-radius:10px; background:color-mix(in srgb,var(--accent) 4%,var(--surface)); }
.employee-new-related-note i { color:var(--accent); font-size:20px; }
.employee-edit-mode .employee-readonly-field .input.readonly-value { display:flex; align-items:center; min-height:43px; color:var(--text); background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); border-radius:9px; cursor:not-allowed; }
.form-field { display:grid; gap:7px; color:var(--muted); font-size:12px; }
.form-field b { color:var(--danger); }
.form-field .input { box-sizing:border-box; width:100%; height:43px; padding:9px 11px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; }
.employee-edit-mode .employee-form-grid .input.immutable-code { color:var(--text); background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); cursor:not-allowed; opacity:1; }
.form-actions { display:flex; justify-content:flex-end; gap:9px; padding:17px 22px; border-top:1px solid var(--line); }
.save-success { display:flex; align-items:center; gap:9px; margin-bottom:16px; padding:13px 15px; color:#15803d; background:color-mix(in srgb,#22c55e 11%,var(--surface)); border:1px solid color-mix(in srgb,#22c55e 28%,var(--line)); border-radius:11px; }
@media(max-width:600px) { .employee-form-grid { grid-template-columns:1fr; padding:16px; }.header-actions { justify-content:flex-start; }.data-card-header .header-actions { width:100%; } }
@media(max-width:1050px) { .employee-edit-mode .employee-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1050px) { .employee-edit-readonly-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1050px) { .employee-edit-contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.employee-edit-contact-grid .contact-edit-field.address-wide { grid-column:1/-1; } }
@media(max-width:1250px) { .address-edit-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) { .address-edit-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { .employee-edit-mode .employee-create-page { height:auto; overflow:visible; }.employee-edit-mode .employee-form-grid { grid-template-columns:1fr; overflow:visible; }.employee-edit-tabs span { display:none; } }
.form-field small { color:var(--muted); font-size:10.5px; }
.thai-date-field { position:relative; display:block; }
.thai-date-field .input { padding-right:44px; }
.thai-date-trigger { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:35px; height:35px; padding:0; color:var(--accent); background:transparent; border:0; border-radius:7px; cursor:pointer; }
.thai-date-trigger:hover { background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.thai-calendar { width:min(360px,calc(100vw - 28px)); padding:0; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 65px rgba(15,23,42,.28); }
.thai-calendar::backdrop { background:rgba(15,23,42,.5); backdrop-filter:blur(2px); }
.thai-calendar-head { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:8px; padding:14px; border-bottom:1px solid var(--line); }
.thai-calendar-head strong { text-align:center; font-size:16px; }
.thai-calendar-head button { display:grid; place-items:center; width:36px; height:36px; color:var(--accent); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.thai-calendar-week,.thai-calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:0 14px; }
.thai-calendar-week { padding-top:12px; color:var(--muted); text-align:center; font-size:11px; }
.thai-calendar-days { padding-top:7px; padding-bottom:12px; }
.thai-calendar-days>span,.thai-calendar-days>button { aspect-ratio:1; }
.thai-calendar-days>button { color:var(--text); background:transparent; border:0; border-radius:9px; cursor:pointer; }
.thai-calendar-days>button:hover { background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.thai-calendar-days>button.today { box-shadow:inset 0 0 0 1px var(--accent); }
.thai-calendar-days>button.selected { color:#fff; background:var(--accent); }
.thai-calendar-actions { display:flex; justify-content:space-between; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.employee-name-link { color:var(--accent); font-weight:600; }
.employee-name-link:hover { text-decoration:underline; }
.employee-profile-head { display:grid; grid-template-columns:220px 1fr; gap:28px; padding:24px; }
.employee-photo-panel { display:grid; justify-items:center; align-content:start; gap:10px; }
.employee-photo,.employee-photo-empty { width:180px; height:220px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); object-fit:cover; }
.employee-photo-empty { display:grid; place-items:center; color:var(--muted); font-size:68px; }
.photo-upload { position:relative; overflow:hidden; cursor:pointer; }
.photo-upload input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.employee-profile-summary { align-self:center; }
.employee-profile-summary>small { color:var(--accent); font-weight:700; letter-spacing:.8px; }
.employee-profile-summary h1 { margin:8px 0 16px; font-size:32px; }
.profile-facts { display:flex; flex-wrap:wrap; gap:9px 18px; margin-bottom:16px; color:var(--muted); }
.profile-facts span { display:inline-flex; align-items:center; gap:7px; }
.profile-facts i { color:var(--accent); }
.employee-detail-card { margin-top:18px; }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); }
.detail-grid>div { display:grid; gap:6px; padding:17px 20px; background:var(--surface); }
.detail-grid span { color:var(--muted); font-size:12px; }
.detail-grid strong { font-weight:500; }
@media(max-width:760px) { .employee-profile-head { grid-template-columns:1fr; }.employee-profile-summary { text-align:center; }.profile-facts { justify-content:center; }.detail-grid { grid-template-columns:1fr; } }

/* Employee view-only workspace */
.employee-screen { height:calc(100vh - 73px); padding:14px 18px 18px; overflow:hidden; background:var(--background); }
.employee-main-tabs { display:flex; gap:5px; height:44px; padding:5px 7px 0; background:var(--surface); border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0; }
.employee-main-tabs button,.employee-detail-tabs button { padding:8px 14px; color:var(--muted); background:transparent; border:0; border-radius:8px 8px 0 0; cursor:pointer; font-family:"Anuphan",var(--font-sans); }
.employee-main-tabs button.active,.employee-detail-tabs button.active { color:#fff; background:var(--accent); }
[data-panel][hidden] { display:none !important; }
.employee-view-layout { display:grid; grid-template-columns:310px minmax(0,1fr); gap:12px; height:calc(100% - 44px); padding:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:0 0 14px 14px; }
.employee-browser-card,.employee-view-card { min-height:0; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 18px rgba(15,23,42,.05); }
.employee-browser-card { display:grid; grid-template-rows:auto auto minmax(0,1fr); }
.employee-browser-filters { display:grid; grid-template-columns:1fr 1fr; gap:7px 9px; padding:10px 12px; border-bottom:1px solid var(--line); }
.employee-browser-filters label { display:grid; gap:4px; color:var(--muted); font-size:11px; }
.employee-browser-filters .input { box-sizing:border-box; width:100%; height:37px; padding:7px 9px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; }
.employee-browser-filters .wide { grid-column:1/-1; }
.employee-tree-scroll { min-height:0; overflow:auto; padding:7px; }
.employee-tree-heading { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; color:var(--muted); border-bottom:1px solid var(--line); font-size:11px; }
.employee-tree-heading strong { color:var(--accent); font-size:12px; }
.employee-department { margin-bottom:4px; }
.employee-department>summary { position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:7px; padding:8px 9px; color:var(--text); background:var(--surface-2); border-radius:7px; cursor:pointer; font-weight:600; font-size:12px; }
.employee-department>summary span { flex:1; }.employee-department>summary em { color:var(--accent); font-size:10px; font-style:normal; }
.employee-department>summary i { color:var(--accent); }
.employee-tree-person { display:flex; align-items:center; gap:7px; padding:6px 8px 6px 19px; color:var(--text); border-radius:7px; font-size:12px; }
.employee-tree-person:hover,.employee-tree-person.selected { background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.employee-tree-person i,.employee-tree-person b { color:var(--accent); }
.employee-tree-person span { min-width:0; flex:1; }
.employee-tree-person.ended { color:var(--muted); }
.employee-tree-person.ended i,.employee-tree-person.ended b { color:#9ca3af; }
.employee-tree-person em { flex:none; padding:2px 5px; color:#b42318; background:#fee4e2; border-radius:999px; font-size:9px; font-style:normal; font-weight:700; }
.employee-tree-empty { padding:28px 12px; color:var(--muted); text-align:center; }
.employee-view-card { display:flex; flex-direction:column; overflow:hidden; }
.employee-view-empty { display:grid; place-items:center; align-content:center; gap:9px; min-height:100%; color:var(--muted); }
.employee-view-empty i { color:var(--accent); font-size:35px; }
.spin { animation:employee-spin .8s linear infinite; } @keyframes employee-spin { to { transform:rotate(360deg); } }
.employee-view-header { display:grid; grid-template-columns:94px 1fr; gap:14px; align-items:center; padding:12px 16px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface)); border-bottom:1px solid var(--line); }
.employee-view-photo,.employee-view-photo img,.employee-view-photo span { width:82px; height:100px; border-radius:9px; }
.employee-view-photo { overflow:hidden; background:var(--surface-2); border:1px solid var(--line); }
.employee-view-photo img { object-fit:cover; }.employee-view-photo span { display:grid; place-items:center; color:var(--muted); font-size:45px; }
.employee-view-header small { color:var(--accent); font-weight:600; }.employee-view-header h1 { margin:3px 0 5px; font-size:22px; }
.employee-view-summary { min-width:0; }.employee-view-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.employee-profile-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin-left:auto; }.employee-profile-actions .button { flex:0 0 auto; padding:7px 11px; font-size:12px; }
.employee-view-meta { display:flex; flex-wrap:wrap; gap:4px 13px; margin-bottom:6px; color:var(--muted); font-size:12px; }.employee-view-meta b { color:var(--accent); }
.employee-position-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.employee-position-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:7px; font-size:13px; }
.employee-detail-tabs { flex:0 0 auto; display:flex; gap:3px; padding:7px 9px 0; overflow-x:auto; overflow-y:hidden; background:var(--surface); border-bottom:1px solid var(--line); }
.employee-detail-tabs button { flex:0 0 auto; font-size:12px; }
.employee-detail-panel { flex:1 1 auto; min-height:0; padding:14px; overflow:auto; }
.view-field-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; background:var(--line); border:1px solid var(--line); border-radius:9px; }
.view-field-grid.employee-main-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.view-field { display:grid; gap:5px; min-height:54px; padding:11px 13px; background:var(--surface); }.view-field.wide { grid-column:span 2; }
.view-field span { color:color-mix(in srgb,var(--accent) 52%,var(--text)); font-size:10.5px; font-weight:500; }.view-field strong { overflow-wrap:anywhere; color:var(--text); font-size:13px; font-weight:500; }
.view-field strong .employee-date-duration { display:inline-block; margin-left:14px; padding:2px 7px; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); border-radius:999px; font-size:11px; font-style:normal; font-weight:600; }
.employee-background-section { margin-top:12px; overflow:hidden; border:1px solid var(--line); border-radius:9px; }
.employee-sub-tabs { display:flex; gap:3px; padding:7px 9px 0; overflow:auto; background:var(--surface-2); border-bottom:1px solid var(--line); }
.employee-sub-tabs button { flex:0 0 auto; padding:8px 12px; color:var(--muted); background:transparent; border:0; border-radius:7px 7px 0 0; font:inherit; font-size:12px; cursor:pointer; }
.employee-sub-tabs button.active { color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,var(--surface)); box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent) 65%,transparent); font-weight:600; }
[data-employee-sub-panel] { min-height:120px; background:var(--surface); }
.employee-readonly-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; padding:10px 13px; color:var(--accent); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; }
.employee-readonly-heading>div { display:flex; align-items:center; gap:7px; }.employee-readonly-heading strong { font-size:13px; font-weight:600; }.employee-readonly-heading span { color:var(--muted); font-size:11px; }
.tax-view-groups { display:grid; gap:12px; }.tax-view-groups section { overflow:hidden; border:1px solid var(--line); border-radius:9px; }.tax-view-groups h3 { margin:0; padding:9px 12px; color:var(--accent); background:var(--surface-2); border-bottom:1px solid var(--line); font-size:13px; font-weight:600; }
.tax-view-groups .view-field-grid { border:0; border-radius:0; }
.employee-section-heading { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; color:var(--accent); background:var(--surface-2); border-bottom:1px solid var(--line); }
.employee-section-heading>div { display:flex; align-items:center; gap:7px; }
.employee-section-heading strong { font-size:13px; font-weight:600; }
.employee-family-table th,.employee-family-table td { padding:9px 12px; font-size:12px; white-space:nowrap; }
.employee-family-table th { color:color-mix(in srgb,var(--accent) 82%,var(--text)); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); border-bottom-color:color-mix(in srgb,var(--accent) 22%,var(--line)); }
.employee-family-empty { color:var(--muted); text-align:center !important; }
.document-view-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.document-view-grid>div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:10px; background:var(--surface-2); border-radius:8px; }
.document-view-grid small { color:var(--muted); }.employee-panel-note { display:flex; align-items:center; gap:12px; padding:24px; color:var(--muted); background:var(--surface-2); border-radius:10px; }.employee-panel-note i { color:var(--accent); font-size:25px; }
.employee-document-workspace { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr); gap:7px; min-height:390px; padding:7px; border:1px solid var(--line); border-radius:10px; }
.employee-document-preview { display:grid; min-height:390px; overflow:hidden; background:var(--surface-2); border-right:1px solid var(--line); border-radius:7px; }
.employee-document-preview iframe { width:100%; height:100%; min-height:390px; border:0; background:#fff; }
.employee-document-preview>img { width:100%; height:390px; padding:10px; object-fit:contain; object-position:center; background:var(--surface); }
.employee-document-empty { display:grid; place-items:center; align-content:center; gap:8px; color:var(--muted); }.employee-document-empty i { font-size:38px; }
.employee-document-preview>[hidden] { display:none !important; }
.employee-document-list { display:grid; align-content:start; gap:4px; overflow:visible; }
.employee-document-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:6px; align-items:center; padding:5px 6px; background:var(--surface-2); border:1px solid var(--line); border-radius:7px; cursor:pointer; }
.employee-document-row.selected { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent); }
.employee-document-row>span { min-width:0; }.employee-document-row strong,.employee-document-row small { display:block; }.employee-document-row small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.employee-document-title { display:flex; align-items:center; gap:6px; min-width:0; }.employee-document-title strong { color:var(--text); font-size:12px; font-weight:600; }.document-state { display:inline-flex; align-items:center; gap:3px; flex:none; font-size:10px; font-style:normal; font-weight:500; }.document-state.available { color:#15803d; }.document-state.missing { color:var(--muted); }
.employee-document-file { min-width:0; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.employee-document-actions { display:flex; gap:4px; }.employee-document-actions .button { min-height:30px; padding:5px 7px; font-size:11px; }
.employee-document-delete { color:#b42318 !important; border-color:color-mix(in srgb,#b42318 25%,var(--line)) !important; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.confirm-dialog { width:min(480px,calc(100vw - 32px)); padding:0; color:var(--text); background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:16px; box-shadow:0 22px 65px rgba(15,23,42,.25); }
.confirm-dialog::backdrop { background:rgba(15,23,42,.48); backdrop-filter:blur(2px); }
.confirm-dialog .confirm-body { padding:25px 60px 12px 24px; }
.confirm-dialog .confirm-copy h3 { display:flex; align-items:center; gap:9px; margin:0 0 10px; color:var(--accent); font-size:19px; font-weight:600; }
.confirm-dialog .confirm-copy h3 i { color:var(--accent); font-size:21px; }.confirm-dialog .confirm-copy p { margin:0; color:var(--muted); line-height:1.65; }
.confirm-dialog .modal-actions { padding:12px 20px 18px; border-top:1px solid color-mix(in srgb,var(--accent) 12%,var(--line)); }
@media(max-width:850px) { .employee-document-workspace { grid-template-columns:1fr; }.employee-document-preview { min-height:300px; }.employee-document-preview iframe { min-height:300px; }.employee-document-preview>img { height:300px; } }
.employee-history-panel { height:calc(100% - 44px); padding:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:0 0 14px 14px; }
.employee-history-panel>.data-card { height:100%; }
.history-card-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid var(--line); }.history-card-header small { color:var(--accent); }.history-card-header h2 { margin:3px 0 0; font-size:18px; font-weight:500; }
.history-header-actions { display:flex; align-items:center; gap:10px; }.history-toolbar { display:flex; gap:6px; }.history-toolbar .compact { min-height:34px; padding:6px 10px; font-size:11px; }
.history-summary { display:flex; gap:8px; }.history-summary span { padding:6px 10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); border-radius:999px; font-size:11px; }.history-summary span.warning { color:#b45309; background:#fff7ed; }
.history-table-scroll { max-height:calc(100% - 68px); }.employee-history-table th,.employee-history-table td { padding:9px 11px; font-size:12px; vertical-align:top; }.employee-history-table td strong { display:block; font-weight:500; }.employee-history-table td small { display:block; margin-top:3px; color:var(--muted); }
.history-status-actions { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.history-action-detail { display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:3px 7px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:8px; color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); font:inherit; font-size:11px; cursor:pointer; }
.history-action-detail:hover { background:color-mix(in srgb,var(--accent) 13%,var(--surface)); }
.action-detail-dialog { width:min(980px,calc(100vw - 36px)); }
.action-detail-dialog .confirm-body { padding:26px 30px 30px; }
.action-detail-dialog .confirm-copy { width:100%; }
.action-detail-dialog .confirm-copy h3 { font-weight:500; }
.action-detail-dialog [data-action-detail-content] { font-weight:300; }
.action-detail-summary { display:flex; flex-wrap:wrap; align-items:center; gap:9px 28px; margin:20px 0 16px; }
.action-detail-summary>div { display:inline-flex; align-items:baseline; gap:10px; min-width:0; }
.action-detail-change>div { padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }
.action-detail-summary span { flex:0 0 auto; color:var(--accent); font-size:11px; font-weight:400; }
.action-detail-summary small,.action-detail-change small { display:block; margin-bottom:7px; color:var(--accent); font-size:11px; font-weight:500; line-height:1.35; }
.action-detail-summary strong,.action-detail-change strong { display:block; font-weight:400; line-height:1.5; color:var(--text); }
.action-detail-change { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:14px; }
.action-detail-change>i { color:var(--accent); }
.action-detail-table-wrap { max-height:none; overflow:visible; margin-bottom:14px; border:1px solid var(--line); border-radius:9px; }
.action-detail-table-wrap:has(tbody tr:nth-child(9)) { max-height:min(420px,calc(100vh - 360px)); overflow:auto; }
.action-detail-table { table-layout:fixed; }
.action-detail-table col.code-column { width:12%; }
.action-detail-table col.name-column { width:38%; }
.action-detail-table col.amount-column { width:25%; }
.action-detail-table th,.action-detail-table td { padding:7px 12px; font-weight:300; line-height:1.4; }
.action-detail-table thead th { color:var(--accent); font-weight:400; }
.action-detail-table .number,.action-detail-table th:nth-child(3),.action-detail-table th:nth-child(4),.action-detail-table td:nth-child(3),.action-detail-table td:nth-child(4) { text-align:right; font-variant-numeric:tabular-nums; }
.action-detail-table tfoot th { color:var(--accent); font-weight:400; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.action-detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.action-detail-meta.primary { margin-bottom:14px; }
.action-detail-meta>div { display:flex; align-items:baseline; min-width:0; gap:11px; padding:12px 15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.action-detail-meta>div.meta-wide { grid-column:1/-1; }
.action-detail-meta>div.meta-audit { grid-column:1/-1; }
.action-detail-meta dt { flex:0 0 auto; margin:0; color:var(--accent); font-size:11px; font-weight:400; line-height:1.45; }
.action-detail-meta dd { min-width:0; margin:0; color:var(--text); font-weight:300; line-height:1.55; white-space:pre-wrap; }
.action-detail-note { display:flex; gap:8px; align-items:center; margin-bottom:14px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); border-radius:9px; color:var(--muted); background:color-mix(in srgb,var(--accent) 6%,var(--surface)); }
@media(max-width:700px){.action-detail-summary{display:grid;grid-template-columns:1fr}.action-detail-summary>div{display:flex}.action-detail-meta{grid-template-columns:1fr}.action-detail-meta>div{grid-column:1}.action-detail-change{grid-template-columns:1fr}.action-detail-change>i{transform:rotate(90deg);justify-self:center}.history-action-detail span{display:none}}
.history-action-delete { display:inline-flex; align-items:center; justify-content:center; gap:3px; min-height:23px; padding:2px 7px; border:1px solid color-mix(in srgb,#ef4444 32%,var(--line)); border-radius:999px; background:color-mix(in srgb,#ef4444 8%,var(--surface)); color:#dc2626; font:inherit; font-size:11px; font-weight:600; line-height:1; cursor:pointer; }
.history-action-delete:hover { background:color-mix(in srgb,#ef4444 15%,var(--surface)); }
.history-action-delete:disabled { opacity:.55; cursor:wait; }
.payroll-grid-card { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.payroll-grid-toolbar { box-sizing:border-box; display:flex!important; flex-flow:row nowrap!important; align-items:center!important; width:100%; gap:12px; padding:9px 12px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--accent) 3%,var(--surface)); font-size:12px; }
.payroll-grid-toolbar label { display:inline-flex!important; flex:0 0 auto!important; flex-flow:row nowrap!important; align-items:center!important; width:auto!important; gap:7px; margin:0!important; color:var(--muted); white-space:nowrap; }
.payroll-grid-toolbar .input.compact { box-sizing:border-box; flex:0 0 auto!important; width:76px!important; min-width:76px; min-height:34px; height:34px; padding:5px 28px 5px 9px; }
.payroll-grid-toolbar [data-payroll-status] { width:180px!important; min-width:180px!important; }
.payroll-grid-toolbar [data-payroll-page-info] { margin-left:auto; color:var(--muted); white-space:nowrap; }
.payroll-grid-toolbar .grid-pager { display:flex; gap:6px; }
.payroll-data-table { width:100%; border-collapse:collapse; }
.payroll-data-table th { color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); font-weight:500; white-space:nowrap; }
.payroll-data-table th,.payroll-data-table td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:middle; }
.payroll-data-table th:last-child,.payroll-data-table td:last-child { border-right:0; }
.payroll-data-table .number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.payroll-data-table .loan-status-cell { width:96px; text-align:center; }
.payroll-data-table .state-badge { min-width:68px; min-height:27px; align-items:center; justify-content:center; line-height:1; }
.payroll-data-table tr[hidden],.payroll-data-table [hidden] { display:none!important; }
@media(max-width:760px) { .payroll-grid-toolbar { flex-wrap:wrap!important; }.payroll-grid-toolbar [data-payroll-page-info] { margin-left:0; }.payroll-grid-toolbar .grid-pager { margin-left:auto; } }
.action-dialog { width:min(900px,calc(100vw - 32px)); }.action-dialog .confirm-body { padding-bottom:18px; }.action-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px 12px; margin-top:18px; }.action-form-grid .wide { grid-column:1/-1; }.action-form-grid textarea.input { height:auto; min-height:76px; resize:vertical; }.action-preview-note { display:flex; align-items:flex-start; gap:8px; margin-top:14px; padding:10px 12px; color:var(--muted); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line)); border-radius:9px; font-size:11px; }.action-preview-note i { color:var(--accent); font-size:16px; }
.action-form-grid .checkbox-field { display:flex; align-items:center; gap:10px; align-self:end; min-height:46px; padding:0 13px; color:var(--text); background:color-mix(in srgb,var(--accent) 5%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); border-radius:9px; cursor:pointer; }
.action-form-grid .checkbox-field > span { display:flex; align-items:center; gap:8px; margin:0; }
.action-form-grid .checkbox-field input[type="checkbox"] { width:17px; height:17px; margin:0; accent-color:var(--accent); }
.action-change-fields { display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); align-items:end; gap:10px; padding:12px; background:color-mix(in srgb,var(--accent) 5%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); border-radius:10px; }
.action-change-fields[hidden] { display:none!important; }
.action-change-fields>i { align-self:center; justify-self:center; color:var(--accent); font-size:18px; }
.action-current-value { display:flex; flex-direction:column; justify-content:center; min-height:46px; padding:8px 12px; background:var(--surface); border:1px solid var(--line); border-radius:9px; }
.action-current-value small { color:var(--muted); }
.action-current-value strong { margin-top:4px; color:var(--text); font-weight:500; }
.approval-grid-toolbar { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.approval-grid-toolbar label { display:flex; align-items:center; gap:7px; color:var(--muted); white-space:nowrap; }
.approval-grid-toolbar label:first-child { flex:1 1 260px; }.approval-grid-toolbar label:first-child .input { width:100%; }
.approval-grid-toolbar [data-approval-page-size] { width:76px; }.approval-grid-toolbar [data-approval-page-info] { margin-left:auto; color:var(--muted); white-space:nowrap; }
.approval-table td { vertical-align:middle; }.approval-table td small { display:block; margin-top:3px; color:var(--muted); }.approval-table td:last-child { display:flex; gap:5px; white-space:nowrap; }
.approval-table tr[hidden] { display:none!important; }
@media(max-width:760px) { .approval-grid-toolbar { flex-wrap:wrap; }.approval-grid-toolbar [data-approval-page-info] { margin-left:0; } }
@media(max-width:620px) { .action-change-fields { grid-template-columns:1fr; }.action-change-fields>i { transform:rotate(90deg); } }
.employee-edit-button.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.employee-ended-date { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:12px; }
.employee-ended-date i { color:var(--danger,#b91c1c); }
@media(max-width:760px) { .history-card-header,.history-header-actions { align-items:flex-start; flex-direction:column; }.action-form-grid { grid-template-columns:1fr; }.action-form-grid .wide { grid-column:auto; } }
.history-action-code { display:inline-flex; min-width:30px; justify-content:center; padding:3px 6px; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); border-radius:5px; font-weight:600; }.history-change { display:grid; grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr); align-items:center; gap:6px; }.history-change i { color:var(--accent); }.history-incomplete { background:#fffaf0; }
@media(max-width:900px) { .employee-screen { height:auto; min-height:calc(100vh - 73px); overflow:visible; }.employee-view-layout { grid-template-columns:1fr; height:auto; }.employee-browser-card { max-height:520px; }.employee-view-card { min-height:520px; }.view-field-grid,.view-field-grid.employee-main-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .employee-screen { padding:8px; }.employee-main-tabs { overflow:auto; }.employee-view-layout { padding:7px; }.employee-view-header { grid-template-columns:90px 1fr; }.employee-view-photo,.employee-view-photo img,.employee-view-photo span { width:82px;height:100px; }.view-field-grid,.view-field-grid.employee-main-grid,.document-view-grid { grid-template-columns:1fr; }.view-field.wide { grid-column:auto; } }
@media(max-width:600px) { .employee-view-title-row { display:block; }.employee-profile-actions { justify-content:flex-start; margin:7px 0 0; } }
.action-compensation-fields { border:1px solid var(--line); border-radius:12px; background:var(--surface-2); padding:12px; }
.action-certificate-fields { display:grid; grid-template-columns:minmax(0,2fr) minmax(120px,1fr); gap:10px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }
.action-certificate-fields[hidden] { display:none!important; }
.action-certificate-fields small { grid-column:1/-1; color:var(--muted); }
.action-discipline-fields { display:grid; grid-template-columns:minmax(0,2fr) minmax(180px,1fr); gap:10px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }
.action-discipline-fields[hidden] { display:none!important; }
.action-discipline-fields small { grid-column:1/-1; color:var(--muted); }
@media(max-width:620px) { .action-certificate-fields { grid-template-columns:1fr; }.action-certificate-fields small { grid-column:auto; } }
@media(max-width:620px) { .action-discipline-fields { grid-template-columns:1fr; }.action-discipline-fields small { grid-column:auto; } }
.action-compensation-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.action-compensation-heading strong { color:var(--accent); }
.action-compensation-heading small { color:var(--muted); }
.action-compensation-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.action-compensation-row { display:grid; grid-template-columns:minmax(105px,1fr) 82px 14px 105px; align-items:center; gap:6px; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:12px; }
.action-compensation-row strong { color:var(--text); font-size:12px; font-weight:500; }
.action-compensation-row small { display:block; margin-top:2px; color:var(--muted); }
.action-compensation-row>b { text-align:right; color:var(--text); font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; }
.action-compensation-row>i { color:var(--accent); text-align:center; }
.action-compensation-row .input { min-height:36px; padding:7px 8px; text-align:right; font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; }
.action-compensation-total { display:grid; grid-template-columns:minmax(105px,1fr) 170px 18px 170px; align-items:center; gap:8px; margin-top:10px; padding:9px 12px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.action-compensation-total>strong { color:var(--accent); font-size:13px; font-weight:600; }
.action-compensation-total span { display:grid; grid-template-columns:64px minmax(82px,1fr); align-items:baseline; justify-content:end; column-gap:6px; white-space:nowrap; }
.action-compensation-total small { color:var(--muted); font-size:11px; line-height:1.2; white-space:nowrap; }
.action-compensation-total b { color:var(--text); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.action-compensation-total>i { color:var(--accent); text-align:center; }
@media(max-width:920px) { .action-compensation-list { grid-template-columns:1fr; } }
@media(max-width:720px) { .action-compensation-row { grid-template-columns:minmax(0,1fr) 80px 14px 100px; }.action-compensation-total { grid-template-columns:1fr 1fr; }.action-compensation-total>i { display:none; }.action-compensation-total span { grid-template-columns:auto minmax(82px,1fr); } }