/* HR & Payroll Module */
.hr-module { --hr-card: rgba(255,255,255,0.86); --hr-border: rgba(148,163,184,0.22); --hr-soft: rgba(15,23,42,0.04); --hr-accent: #2563eb; }
.hr-root { display:flex; flex-direction:column; gap:16px; }
.hr-page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px; border:1px solid var(--hr-border); border-radius:22px; background:linear-gradient(135deg, rgba(37,99,235,0.10), rgba(14,165,233,0.08)), var(--hr-card); box-shadow:0 18px 45px rgba(15,23,42,0.08); }
.hr-page-header h2 { margin:4px 0 4px; font-size:28px; letter-spacing:-0.04em; }
.hr-eyebrow { display:inline-flex; align-items:center; gap:6px; color:#2563eb; font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.hr-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.hr-tabs { display:flex; gap:8px; flex-wrap:wrap; padding:8px; border:1px solid var(--hr-border); border-radius:18px; background:rgba(248,250,252,0.82); }
.hr-tabs button { border:0; background:transparent; color:#475569; font-weight:800; padding:10px 14px; border-radius:14px; cursor:pointer; }
.hr-tabs button.active { background:#0f172a; color:#fff; box-shadow:0 12px 24px rgba(15,23,42,0.18); }
.hr-summary-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.hr-metric { position:relative; overflow:hidden; padding:16px; border:1px solid var(--hr-border); border-radius:20px; background:var(--hr-card); box-shadow:0 12px 30px rgba(15,23,42,0.06); }
.hr-metric:after { content:""; position:absolute; inset:auto -20px -45px auto; width:110px; height:110px; border-radius:50%; background:rgba(37,99,235,0.08); }
.hr-metric span { display:block; color:#64748b; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; }
.hr-metric strong { display:block; margin-top:8px; font-size:26px; letter-spacing:-0.03em; color:#0f172a; }
.hr-metric small { display:block; margin-top:4px; color:#64748b; }
.hr-panel { border:1px solid var(--hr-border); border-radius:22px; padding:18px; background:var(--hr-card); box-shadow:0 12px 30px rgba(15,23,42,0.06); }
.hr-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.hr-panel-head h3 { margin:0 0 4px; font-size:18px; }
.hr-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hr-toolbar .input,.hr-toolbar .select { min-height:38px; }
.hr-filter-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.hr-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.hr-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hr-table-wrap { overflow:auto; border:1px solid rgba(148,163,184,0.18); border-radius:18px; }
.hr-table { width:100%; border-collapse:separate; border-spacing:0; min-width:860px; }
.hr-table th { position:sticky; top:0; z-index:1; background:#f8fafc; color:#334155; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; text-align:left; padding:12px; border-bottom:1px solid rgba(148,163,184,0.22); }
.hr-table td { padding:12px; border-bottom:1px solid rgba(148,163,184,0.14); vertical-align:top; color:#0f172a; }
.hr-table tr:hover td { background:rgba(37,99,235,0.035); }
.hr-muted { color:#64748b; }
.hr-chip { display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border-radius:999px; font-size:12px; font-weight:800; background:#eef2ff; color:#3730a3; text-transform:capitalize; white-space:nowrap; }
.hr-chip.success { background:#dcfce7; color:#166534; }
.hr-chip.warning { background:#fef3c7; color:#92400e; }
.hr-chip.danger { background:#fee2e2; color:#991b1b; }
.hr-chip.info { background:#e0f2fe; color:#075985; }
.hr-row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.hr-mini-card { border:1px solid rgba(148,163,184,0.18); border-radius:18px; padding:14px; background:#fff; }
.hr-mini-card strong { display:block; margin-bottom:5px; }
.hr-progress { height:9px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.hr-progress > span { display:block; height:100%; background:#2563eb; border-radius:inherit; }
.hr-dashboard-list { display:grid; gap:10px; }
.hr-dashboard-item { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid rgba(148,163,184,0.16); border-radius:16px; padding:12px; background:#fff; }
.hr-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.hr-form-grid label, .hr-inline-form label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:800; color:#475569; }
.hr-form-grid label.full { grid-column:1 / -1; }
.hr-form-grid textarea { min-height:84px; resize:vertical; }
.hr-inline-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; }
.hr-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.hr-modal[hidden] { display:none; }
.hr-modal-backdrop { position:absolute; inset:0; border:0; background:rgba(15,23,42,0.58); backdrop-filter:blur(4px); }
.hr-dialog { position:relative; width:min(1040px, 100%); max-height:88vh; overflow:auto; border:1px solid rgba(255,255,255,0.26); border-radius:24px; background:#fff; box-shadow:0 30px 90px rgba(15,23,42,0.42); }
.hr-dialog header { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:18px 20px; border-bottom:1px solid rgba(148,163,184,0.18); background:linear-gradient(135deg, #f8fafc, #eef2ff); position:sticky; top:0; z-index:2; }
.hr-dialog header h3 { margin:0; }
.hr-dialog-body { padding:20px; }
.hr-dialog-footer { display:flex; justify-content:flex-end; gap:8px; padding:16px 20px; border-top:1px solid rgba(148,163,184,0.18); background:#f8fafc; position:sticky; bottom:0; }
.hr-payslip-preview { border:1px solid rgba(148,163,184,0.22); border-radius:18px; padding:22px; background:#fff; max-width:820px; margin:auto; }
.hr-payslip-header { display:flex; justify-content:space-between; gap:16px; border-bottom:2px solid #0f172a; padding-bottom:14px; margin-bottom:14px; }
.hr-payslip-title { font-size:24px; font-weight:900; color:#0f172a; }
.hr-payslip-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.hr-payslip-table { width:100%; border-collapse:collapse; margin-top:12px; }
.hr-payslip-table th,.hr-payslip-table td { padding:10px; border-bottom:1px solid #e2e8f0; text-align:left; }
.hr-payslip-total { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:14px; border-radius:14px; background:#0f172a; color:#fff; font-weight:900; font-size:18px; }
.hr-empty { padding:24px; text-align:center; color:#64748b; border:1px dashed rgba(148,163,184,0.4); border-radius:18px; background:#f8fafc; }
.hr-source-banner { border:1px solid rgba(251,191,36,0.5); background:#fffbeb; color:#92400e; padding:10px 12px; border-radius:14px; font-weight:700; }
.dark .hr-page-header,.dark .hr-panel,.dark .hr-metric,.dark .hr-dialog,.dark .hr-mini-card,.dark .hr-dashboard-item,.dark .hr-payslip-preview { background:#101827; border-color:rgba(148,163,184,0.22); color:#e5e7eb; }
.dark .hr-table th { background:#111827; color:#cbd5e1; }
.dark .hr-table td,.dark .hr-metric strong { color:#e5e7eb; }
.dark .hr-tabs { background:#0f172a; }
.dark .hr-dialog header,.dark .hr-dialog-footer { background:#0f172a; }
.dark .hr-empty { background:#0f172a; color:#94a3b8; }
@media (max-width:1100px){ .hr-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.hr-grid-2,.hr-grid-3,.hr-filter-grid,.hr-form-grid,.hr-inline-form{grid-template-columns:1fr 1fr;} }
@media (max-width:720px){ .hr-page-header,.hr-panel-head{flex-direction:column;}.hr-summary-grid,.hr-grid-2,.hr-grid-3,.hr-filter-grid,.hr-form-grid,.hr-inline-form{grid-template-columns:1fr;}.hr-dialog{max-height:94vh;}.hr-payslip-grid{grid-template-columns:1fr;} }

.hr-tabs button { white-space:nowrap; }
.hr-dashboard-item .btn { flex:0 0 auto; }
.hr-panel .hr-metric { min-width:0; }
.hr-payslip-table tbody tr:last-child td { border-bottom:0; }
.hr-notification-dot { width:8px; height:8px; border-radius:50%; background:#2563eb; display:inline-block; }
@media print { body * { visibility:hidden; } #hrPayslipPreview, #hrPayslipPreview * { visibility:visible; } #hrPayslipPreview { position:absolute; left:0; top:0; width:100%; border:0; box-shadow:none; } }