/* ─────────────────────────────────────────────────────────────────────────
   HR Module — shared stylesheet
   Uses var(--sat-*) CSS custom properties set by ThemeService / themeHelper.js
   ───────────────────────────────────────────────────────────────────────── */

/* ── Layout ─────────────────────────────────────────────────────────────── */
.hr-page          { padding:24px; background:var(--sat-bg); min-height:100vh; }

.hr-breadcrumb    { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sat-text-muted); margin-bottom:18px; }
.hr-breadcrumb a  { color:var(--sat-text-muted); text-decoration:none; }
.hr-breadcrumb a:hover { color:var(--sat-primary); }
.hr-breadcrumb .sep  { color:#C8CBD4; }
.hr-breadcrumb .cur  { color:var(--sat-text); font-weight:600; }

.hr-hdr           { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.hr-hdr h4        { margin:0; font-size:20px; font-weight:700; color:var(--sat-text); }
.hr-hdr p         { margin:4px 0 0; font-size:13px; color:var(--sat-text-muted); }

/* ── Card ────────────────────────────────────────────────────────────────── */
.hr-card          { background:var(--sat-surface); border-radius:10px; box-shadow:var(--sat-shadow); margin-bottom:20px; }
.hr-card-hd       { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--sat-border); }
.hr-card-hd h5    { margin:0; font-size:15px; font-weight:700; color:var(--sat-text); }
.hr-card-bd       { padding:20px; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.hr-filter        { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.hr-filter > div  { flex:1; min-width:160px; }
.hr-filter label  { display:block; font-size:12px; font-weight:600; color:var(--sat-text-sub); margin-bottom:5px; }
.hr-filter input,
.hr-filter select { width:100%; padding:9px 12px; border:1.5px solid var(--sat-border-input); border-radius:8px; font-size:13px;
                    color:var(--sat-text); background:var(--sat-surface); outline:none; box-sizing:border-box; }
.hr-filter input:focus,
.hr-filter select:focus { border-color:var(--sat-primary); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hr-btn           { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:8px;
                    font-size:13px; font-weight:600; border:none; cursor:pointer; transition:opacity .15s; }
.hr-btn:hover     { opacity:.85; }
.hr-btn:disabled  { opacity:.5; cursor:not-allowed; }
.hr-btn-primary   { background:var(--sat-primary); color:#fff; }
.hr-btn-light     { background:var(--sat-bg); color:var(--sat-text-sub); border:1px solid var(--sat-border-input); }
.hr-btn-success   { background:#0B8C4A; color:#fff; }
.hr-btn-danger    { background:#C0392B; color:#fff; }
.hr-btn-sm        { padding:6px 12px; font-size:12px; border-radius:6px; }

/* ── Icon buttons ────────────────────────────────────────────────────────── */
.hr-ib            { width:32px; height:32px; border-radius:8px; border:none; cursor:pointer;
                    display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s; }
.hr-ib:hover      { opacity:.8; }
.hr-ib-view       { background:#E8F0FE; color:#1A56DB; }
.hr-ib-edit       { background:#FFF3E6; color:#F97316; }
.hr-ib-del        { background:#FEE8E8; color:#C0392B; }

/* ── Table ───────────────────────────────────────────────────────────────── */
.hr-table-wrap    { overflow-x:auto; }
.hr-table         { width:100%; border-collapse:collapse; font-size:13px; }
.hr-table th      { background:var(--sat-surface-2); color:var(--sat-text-muted); font-size:11px; font-weight:700;
                    text-transform:uppercase; letter-spacing:.5px; padding:10px 16px;
                    border-bottom:1px solid var(--sat-border); text-align:left; white-space:nowrap; }
.hr-table td      { padding:12px 16px; border-bottom:1px solid var(--sat-surface-2);
                    color:var(--sat-text); vertical-align:middle; }
.hr-table tr:last-child td { border-bottom:none; }
.hr-table tr:hover td { background:var(--sat-primary-light); }
.hr-table.clickable tr:hover td { cursor:pointer; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.hr-badge         { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.hr-badge-green   { background:#E6F9F0; color:#0B8C4A; }
.hr-badge-red     { background:#FEE8E8; color:#C0392B; }
.hr-badge-blue    { background:#E8F0FE; color:#1A56DB; }
.hr-badge-purple  { background:#EDE9FF; color:#6C63FF; }
.hr-badge-amber   { background:#FFF8E6; color:#B7791F; }
.hr-badge-gray    { background:#F0F1F5; color:#9396A5; }

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.hr-avatar        { width:38px; height:38px; border-radius:50%; display:inline-flex;
                    align-items:center; justify-content:center; font-weight:700; font-size:15px;
                    color:#fff; flex-shrink:0; }
.hr-avatar-lg     { width:72px; height:72px; font-size:28px; font-weight:800; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.hr-pagination    { display:flex; align-items:center; justify-content:space-between;
                    padding:12px 20px; border-top:1px solid var(--sat-border); }
.hr-pagination span { font-size:13px; color:var(--sat-text-muted); }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.hr-spinner       { display:flex; justify-content:center; align-items:center; padding:60px; }
.hr-spinner-ring  { width:40px; height:40px; border:3px solid var(--sat-border-input);
                    border-top-color:var(--sat-primary); border-radius:50%;
                    animation:hr-spin .8s linear infinite; }
@keyframes hr-spin { to { transform:rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.hr-empty         { padding:56px 20px; text-align:center; color:var(--sat-text-muted); }
.hr-empty p       { margin-top:12px; font-size:15px; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.hr-alert         { padding:10px 16px; border-radius:8px; font-size:13px; font-weight:500; margin-bottom:14px; }
.hr-alert-err     { background:#FEE8E8; color:#C0392B; border:1px solid #FBBDBD; }
.hr-alert-ok      { background:#E6F9F0; color:#0B8C4A; border:1px solid #A3E6C3; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.hr-overlay       { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000;
                    display:flex; align-items:center; justify-content:center; }
.hr-modal         { background:var(--sat-surface); border-radius:12px; padding:28px; width:100%;
                    max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.hr-modal-lg      { max-width:680px; }
.hr-modal-sm      { max-width:400px; }
.hr-modal h5      { margin:0 0 20px; font-size:17px; font-weight:700; color:var(--sat-text); }
.hr-modal-footer  { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

/* ── Form ────────────────────────────────────────────────────────────────── */
.hr-form-group    { margin-bottom:16px; }
.hr-form-group label { display:block; font-size:12px; font-weight:600; color:var(--sat-text-sub); margin-bottom:6px; }
.hr-form-group input,
.hr-form-group select,
.hr-form-group textarea { width:100%; padding:9px 12px; border:1.5px solid var(--sat-border-input);
                           border-radius:8px; font-size:13px; color:var(--sat-text);
                           background:var(--sat-surface); outline:none; box-sizing:border-box; }
.hr-form-group input:focus,
.hr-form-group select:focus,
.hr-form-group textarea:focus { border-color:var(--sat-primary); }
.hr-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hr-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.hr-section-title { font-size:12px; font-weight:700; color:var(--sat-text-muted);
                    text-transform:uppercase; letter-spacing:.5px; margin:20px 0 12px;
                    padding-bottom:6px; border-bottom:1px solid var(--sat-border); }
.hr-checkbox      { display:flex; align-items:center; gap:8px; font-size:13px;
                    color:var(--sat-text-sub); cursor:pointer; }
.hr-checkbox input { width:16px; height:16px; accent-color:var(--sat-primary); }

/* ── Employee hero card ──────────────────────────────────────────────────── */
.emp-hero         { display:flex; align-items:center; gap:20px; padding:24px; flex-wrap:wrap; }
.emp-hero-info h3 { margin:0 0 4px; font-size:22px; font-weight:700; color:var(--sat-text); }
.emp-hero-info p  { margin:0; font-size:14px; color:var(--sat-text-muted); }
.emp-hero-badges  { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.emp-hero-actions { margin-left:auto; display:flex; gap:10px; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.hr-tabs          { display:flex; gap:0; border-bottom:2px solid var(--sat-border);
                    background:var(--sat-surface); border-radius:10px 10px 0 0;
                    overflow:hidden; padding:0 20px; }
.hr-tab           { padding:14px 20px; font-size:13px; font-weight:600; color:var(--sat-text-muted);
                    border:none; background:none; cursor:pointer; border-bottom:2px solid transparent;
                    margin-bottom:-2px; transition:color .15s; white-space:nowrap; }
.hr-tab:hover     { color:var(--sat-primary); }
.hr-tab.active    { color:var(--sat-primary); border-bottom-color:var(--sat-primary); }
.hr-tab-content   { background:var(--sat-surface); border-radius:0 0 10px 10px;
                    padding:24px; box-shadow:var(--sat-shadow); margin-bottom:20px; }

/* ── Profile info grid ───────────────────────────────────────────────────── */
.hr-info-grid     { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hr-info-item label { display:block; font-size:11px; font-weight:700; color:var(--sat-text-muted);
                      text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.hr-info-item span  { font-size:14px; color:var(--sat-text); font-weight:500; }

/* ── Work log stats ──────────────────────────────────────────────────────── */
.wl-stat-bar      { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.wl-stat          { padding:14px 20px; background:var(--sat-surface-2); border-radius:10px;
                    border:1px solid var(--sat-border); flex:1; min-width:110px; }
.wl-stat-val      { font-size:22px; font-weight:800; color:var(--sat-primary); }
.wl-stat-lbl      { font-size:12px; color:var(--sat-text-muted); margin-top:2px; }

/* ── Performance review cards ────────────────────────────────────────────── */
.rev-card         { border:1px solid var(--sat-border); border-radius:10px; padding:16px;
                    margin-bottom:12px; display:flex; align-items:center; gap:16px; cursor:pointer; }
.rev-card:hover   { border-color:var(--sat-primary); background:var(--sat-primary-light); }
.rev-card-icon    { width:44px; height:44px; border-radius:10px; background:#EDE9FF;
                    color:var(--sat-primary); display:flex; align-items:center; justify-content:center;
                    flex-shrink:0; }
.rev-card-info h6 { margin:0 0 3px; font-size:14px; font-weight:700; color:var(--sat-text); }
.rev-card-info p  { margin:0; font-size:12px; color:var(--sat-text-muted); }

/* ── Dark-mode overrides (applied via data-theme on <body>) ─────────────── */
[data-theme="cosmic"] .hr-card,
[data-theme="aurora"] .hr-card,
[data-theme="neon"] .hr-card,
[data-theme="ocean"] .hr-card,
[data-theme="midnight"] .hr-card,
[data-theme="carbon"] .hr-card,
[data-theme="cobalt"] .hr-card {
    border:1px solid var(--sat-border);
}

[data-theme="cosmic"] .hr-table th,
[data-theme="aurora"] .hr-table th,
[data-theme="neon"] .hr-table th,
[data-theme="ocean"] .hr-table th,
[data-theme="midnight"] .hr-table th,
[data-theme="carbon"] .hr-table th,
[data-theme="cobalt"] .hr-table th {
    background:var(--sat-surface-2);
}