/* ============================================================
   PCS HRIS — design system (enterprise data-dense)
   Slate/navy corporate palette · Inter · compact spacing
   ============================================================ */
:root {
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* neutrals (slate) */
    --bg:        #eef1f6;
    --surface:   #ffffff;
    --surface-2: #f8fafc;
    --border:    #e2e8f0;
    --border-2:  #cbd5e1;
    --ink:       #0f172a;
    --ink-2:     #334155;
    --muted:     #64748b;
    --faint:     #94a3b8;

    /* brand */
    --brand:     #1d4ed8;
    --brand-600: #2563eb;
    --brand-700: #1e40af;
    --brand-050: #eff4ff;

    /* sidebar */
    --nav-bg:    #0b1220;
    --nav-bg-2:  #0f1a2e;
    --nav-ink:   #94a3b8;
    --nav-ink-2: #e2e8f0;
    --nav-active:#1d4ed8;

    /* semantic (muted) */
    --ok:    #15803d; --ok-bg:    #dcfce7;
    --warn:  #b45309; --warn-bg:  #fef3c7;
    --bad:   #b91c1c; --bad-bg:   #fee2e2;
    --info:  #0e7490; --info-bg:  #cffafe;

    /* chart palette */
    --c1:#2563eb; --c2:#0891b2; --c3:#7c3aed; --c4:#d97706; --c5:#059669; --c6:#db2777;

    --radius:   10px;
    --radius-sm: 7px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
    --shadow:    0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,.08);
    --sidebar-w: 236px;
}

* { box-sizing: border-box; }
html { font-size: 14px; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.06px;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-700); }
.text-muted { color: var(--muted) !important; }
.fw-medium { font-weight: 500; }

/* ---------- Shell ---------- */
.hris-shell { display: flex; min-height: 100vh; }
.hris-main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-w); }
.hris-content { padding: 1.25rem 1.5rem 2.5rem; flex: 1; max-width: 1480px; width: 100%; }
@media (max-width: 991.98px) { .hris-main { margin-left: 0; } }

/* ---------- Faceted-filter sidebar (opt-in per master via cfg.facets) ---------- */
.facet-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; }
.facet-sidebar { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
    padding: .65rem .55rem .85rem; position: sticky; top: .5rem; min-width: 0; }
.facet-group { border-bottom: 1px solid var(--border, #eef2f7); padding: .5rem .15rem; }
.facet-group:last-of-type { border-bottom: 0; }
.facet-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; padding: .15rem .25rem; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #64748b); }
.facet-group > summary::-webkit-details-marker { display: none; }
.facet-group > summary::after { content: "▾"; font-size: .7rem; opacity: .55; transition: transform .15s ease; }
.facet-group:not([open]) > summary::after { transform: rotate(-90deg); }
.facet-options { display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem; max-height: 240px; overflow-y: auto; }
.facet-opt { display: flex; align-items: center; gap: .45rem; padding: .25rem .35rem; border-radius: 6px;
    font-size: .82rem; color: var(--ink-2, #334155); cursor: pointer; }
.facet-opt:hover { background: var(--surface-2, #f1f5f9); }
.facet-opt input[type="checkbox"] { margin: 0; }
.facet-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-opt-count { color: var(--faint, #94a3b8); font-size: .76rem; font-weight: 600; }
.facet-main { min-width: 0; } /* lets the grid table shrink-to-fit instead of overflowing the column */
@media (max-width: 991.98px) {
    .facet-layout { grid-template-columns: 1fr; }
    .facet-sidebar { position: static; }
    .facet-options { max-height: 180px; }
}

/* ---------- Sidebar ---------- */
.hris-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--nav-bg-2), var(--nav-bg));
    color: var(--nav-ink); display: flex; flex-direction: column;
    z-index: 1030; transition: transform .2s ease; border-right: 1px solid #0b1220;
}
.hris-brand { padding: 1rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.hris-nav { padding: .85rem .65rem; flex: 1; overflow-y: auto; }
.hris-nav-group { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em;
    color: #475569; padding: .9rem .85rem .35rem; font-weight: 600; }
.hris-nav-link {
    display: flex; align-items: center; gap: .7rem; padding: .5rem .85rem; margin: .1rem 0;
    color: var(--nav-ink); border-radius: var(--radius-sm); font-weight: 500; font-size: .875rem;
    position: relative; transition: background .12s, color .12s;
}
.hris-nav-link .bi { font-size: 1.02rem; width: 1.2rem; text-align: center; color: #64748b; }
.hris-nav-link:hover { background: rgba(148,163,184,.1); color: var(--nav-ink-2); }
.hris-nav-link:hover .bi { color: var(--nav-ink-2); }
.hris-nav-link.active { background: rgba(37,99,235,.16); color: #fff; }
.hris-nav-link.active .bi { color: #60a5fa; }
.hris-nav-link.active::before { content:""; position:absolute; left:0; top:18%; bottom:18%;
    width:3px; border-radius:0 3px 3px 0; background:#60a5fa; }
.hris-nav-link .badge { margin-left: auto; }
.hris-sidebar-foot { padding: .85rem 1.15rem; border-top: 1px solid rgba(255,255,255,.07);
    font-size: .7rem; color: #475569; }
@media (max-width: 991.98px) {
    .hris-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-md); }
    .hris-sidebar.open { transform: translateX(0); }
}

/* ---------- Topbar ---------- */
.hris-topbar {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .6rem;
    padding: .55rem 1.5rem; background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border); min-height: 56px;
}
.hris-search { position: relative; max-width: 460px; flex: 1; }
.hris-search .bi { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: .9rem; }
.hris-search input { padding-left: 2.3rem; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); height: 38px; font-size: .875rem; }
.hris-search input:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.hris-userbtn { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border);
    background: #fff; border-radius: var(--radius-sm); padding: .25rem .6rem .25rem .35rem; font-weight: 500; font-size: .85rem; color: var(--ink-2); }
.hris-userbtn:hover { background: var(--surface-2); }

/* ---------- Avatars ---------- */
.hris-avatar { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; background: var(--brand-050); color: var(--brand-700);
    font-weight: 600; font-size: .72rem; flex: 0 0 auto; border: 1px solid #dbe4ff; }
.hris-avatar-sm { width: 30px; height: 30px; border-radius: 8px; font-size: .68rem; }
.hris-avatar-lg { width: 46px; height: 46px; border-radius: 11px; font-size: .95rem; }
.hris-avatar-xl { width: 72px; height: 72px; border-radius: 16px; font-size: 1.5rem; }
/* photo variant: the <img> fills the same rounded square (initials chip is the fallback) */
.hris-avatar.is-photo { padding: 0; overflow: hidden; background: #fff; }
img.hris-avatar { object-fit: cover; }
/* deterministic color variants (applied via :nth or data attr in markup) */
.av-1{background:#eff6ff;color:#1d4ed8;border-color:#dbeafe} .av-2{background:#ecfeff;color:#0e7490;border-color:#cffafe}
.av-3{background:#f5f3ff;color:#6d28d9;border-color:#ede9fe} .av-4{background:#fff7ed;color:#c2410c;border-color:#ffedd5}
.av-5{background:#ecfdf5;color:#047857;border-color:#d1fae5} .av-6{background:#fdf2f8;color:#be185d;border-color:#fce7f3}

/* ---------- Page header ---------- */
.hris-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.hris-page-head h1 { font-size: 1.35rem; font-weight: 700; margin: 0; letter-spacing: -0.4px; }
.hris-page-head .sub { color: var(--muted); font-size: .85rem; margin-top: .15rem; }
.hris-crumb { color: var(--faint); font-size: .78rem; font-weight: 500; margin-bottom: .15rem; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    padding: .7rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.card-head .bi { color: var(--muted); }
.card-body { padding: 1rem; }
.card-body.tight { padding: .6rem 1rem; }

/* ---------- KPI tiles ---------- */
.kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 1200px){ .kpi-strip { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 575px){ .kpi-strip { grid-template-columns: repeat(2,1fr); } }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .8rem .9rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.kpi-label { font-size: .7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; display:flex; align-items:center; gap:.35rem; }
.kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; margin-top: .35rem; letter-spacing: -0.5px; }
.kpi-foot { font-size: .72rem; color: var(--faint); margin-top: .15rem; }
.kpi-spark { position:absolute; right:.6rem; top:.6rem; font-size:1rem; opacity:.85; }
.kpi.kpi-accent { background: linear-gradient(135deg, #1e3a8a, #2563eb); border-color: transparent; color: #fff; }
.kpi.kpi-accent .kpi-label, .kpi.kpi-accent .kpi-foot { color: rgba(255,255,255,.8); }

/* ---------- Chart box ---------- */
.chart-box { position: relative; height: 220px; }
.chart-box.sm { height: 180px; }

/* ---------- Data table ---------- */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.data-table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    font-weight: 600; padding: .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.data-table tbody td { padding: .6rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { cursor: pointer; transition: background .1s; }
.data-table tbody tr:hover { background: var(--brand-050); }
.data-table .emp-name { font-weight: 600; color: var(--ink); }
.data-table .emp-id { color: var(--faint); font-size: .76rem; }

/* ---------- Chips / badges ---------- */
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600;
    padding: .15rem .5rem; border-radius: 999px; line-height: 1.4; }
.chip-unset { background: var(--surface-2); color: var(--faint); border: 1px dashed var(--border-2); font-weight: 500; font-style: italic; }
.chip-ok   { background: var(--ok-bg);   color: var(--ok); }
.chip-bad  { background: var(--bad-bg);  color: var(--bad); }
.chip-info { background: var(--info-bg); color: var(--info); }
.chip-warn { background: #fef3c7; color: #b45309; }
.chip-soft { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }
.status-dot { width:7px;height:7px;border-radius:50%;display:inline-block; }
.status-dot.on{background:var(--ok)} .status-dot.off{background:var(--faint)}

/* ---------- Completeness bars ---------- */
.cbar-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.55rem; }
.cbar-row:last-child{margin-bottom:0}
.cbar-label { width: 120px; flex:0 0 auto; font-size:.8rem; color: var(--ink-2); }
.cbar { flex:1; height:8px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.cbar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c1),var(--c2)); }
.cbar-pct { width:42px; text-align:right; font-size:.78rem; font-weight:600; color:var(--ink-2); }
a.cbar-link { text-decoration:none; color:inherit; padding:.18rem .35rem; margin:0 -.35rem .2rem; border-radius:7px; transition:background .12s; }
a.cbar-link:hover { background:#f1f5f9; }
a.cbar-link:hover .cbar-label { color:var(--brand,#2563eb); }
a.cbar-link.disabled { pointer-events:none; opacity:.85; }

/* ---------- Definition lists (profile) ---------- */
.dl-grid { display:grid; grid-template-columns: 1fr; gap: 0; }
.dl-grid .row-item { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--border); }
.dl-grid .row-item:last-child{border-bottom:0}
.dl-grid dt { color: var(--muted); font-size:.82rem; font-weight:500; margin:0; }
.dl-grid dd { margin:0; font-weight:500; text-align:right; color:var(--ink); }

/* ---------- Tabs ---------- */
.hris-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); padding: 0 .5rem; }
.hris-tabs .nav-link { color: var(--muted); font-weight:600; font-size:.83rem; border:0; border-bottom:2px solid transparent;
    padding:.7rem .85rem; background:transparent; cursor:pointer; }
.hris-tabs .nav-link:hover { color: var(--ink-2); }
.hris-tabs .nav-link.active { color: var(--brand-700); border-bottom-color: var(--brand); background:transparent; }

/* ---------- Org chart ---------- */
.hris-org-scroll { overflow-x: auto; }
.hris-org-card { display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .7rem; background:#fff;
    border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--ink); box-shadow:var(--shadow-sm); }
.hris-org-card:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(37,99,235,.15); color: var(--ink); }
.hris-org-meta { display:flex; flex-direction:column; line-height:1.25; }
.hris-org-name { font-weight:600; font-size:.85rem; }
.hris-org-role { font-size:.72rem; color: var(--muted); }
.hris-org-tree, .hris-org-tree ul { list-style:none; margin:0; padding-left:1.5rem; }
.hris-org-tree li { position:relative; padding:.35rem 0; }
.hris-org-tree ul li::before { content:""; position:absolute; left:-.75rem; top:0; bottom:50%;
    border-left:1px solid var(--border-2); border-bottom:1px solid var(--border-2); width:.75rem; }
.org-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.6rem; }

/* ---------- Buttons (refine bootstrap) ---------- */
.btn { font-weight:500; font-size:.85rem; border-radius:var(--radius-sm); }
.btn-primary { background:var(--brand); border-color:var(--brand); }
.btn-primary:hover { background:var(--brand-700); border-color:var(--brand-700); }
.btn-outline-primary { color:var(--brand); border-color:var(--border-2); }
.btn-outline-primary:hover { background:var(--brand); border-color:var(--brand); }
.form-control, .form-select { font-size:.85rem; border-radius:var(--radius-sm); border-color:var(--border-2); }
.form-control:focus, .form-select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.form-label { font-size:.78rem; font-weight:600; color:var(--ink-2); margin-bottom:.25rem; }

/* Select2 (auto-applied to large dropdowns) — match the app's compact form controls. */
.select2-container--bootstrap-5 .select2-selection { font-size:.85rem; border-radius:var(--radius-sm); border-color:var(--border-2); min-height:calc(1.5em + .75rem + 2px); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.select2-container--bootstrap-5 .select2-dropdown { font-size:.85rem; border-color:var(--border-2); }
.select2-container { z-index:2100; } /* above the app's message modals (z-index 2000) */

/* ---------- Section grid ---------- */
.grid-2 { display:grid; grid-template-columns: 1.6fr 1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width: 991.98px){ .grid-2,.grid-3 { grid-template-columns:1fr; } }

/* ---------- Empty state ---------- */
.empty-state { text-align:center; padding:1.75rem 1rem; color:var(--muted); }
.empty-state .bi { font-size:1.6rem; color:var(--border-2); display:block; margin-bottom:.4rem; }

/* ---------- List rows ---------- */
.lrow { display:flex; align-items:center; gap:.6rem; padding:.55rem 1rem; border-bottom:1px solid var(--border); color:var(--ink); }
.lrow:last-child{border-bottom:0}
.lrow:hover{ background:var(--surface-2); }

/* ---------- Auth ---------- */
.hris-auth-body { min-height:100vh; background:
    radial-gradient(1100px 560px at 85% -15%, rgba(56,120,255,.28), transparent),
    radial-gradient(900px 500px at 5% 110%, rgba(13,148,136,.18), transparent),
    linear-gradient(155deg, #070d1b, #11203f 55%, #1b316b); }
.hris-auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.hris-auth-split { width:100%; max-width:940px; display:grid; grid-template-columns:1.05fr .95fr;
    background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 40px 100px rgba(2,8,23,.55);
    border:1px solid rgba(255,255,255,.08); }

/* Left brand / value panel */
.hris-auth-aside { position:relative; color:#fff; padding:2.6rem 2.4rem; display:flex; flex-direction:column;
    justify-content:space-between; min-height:560px;
    background:radial-gradient(700px 360px at 110% -10%, rgba(99,160,255,.45), transparent),
        linear-gradient(160deg, #1b3aa0, #1e40af 45%, #0f2056); overflow:hidden; }
.hris-auth-aside::before { content:""; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size:22px 22px;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%, transparent); opacity:.6; }
.hris-auth-aside > * { position:relative; z-index:1; }
.hris-auth-aside .aside-eyebrow { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(255,255,255,.7); font-weight:700; }
.hris-auth-aside h2 { font-size:1.85rem; line-height:1.18; font-weight:800; letter-spacing:-.5px; margin:.9rem 0 .8rem; }
.hris-auth-aside p { color:rgba(255,255,255,.82); font-size:.92rem; line-height:1.55; margin:0 0 1.4rem; max-width:34ch; }
.aside-features { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.aside-features li { display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:rgba(255,255,255,.92); }
.aside-features li i { width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.14); border-radius:7px; font-size:.85rem; }
.aside-foot { font-size:.72rem; color:rgba(255,255,255,.6); }

/* Right form panel */
.hris-auth-main { display:flex; align-items:center; justify-content:center; padding:2.6rem 2.4rem; }
.hris-auth-card { width:100%; max-width:360px; }
.hris-auth-card .auth-mobile-brand { display:none; margin-bottom:1.2rem; }
.hris-auth-card h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.5px; margin:0 0 .2rem; color:var(--ink,#0f172a); }
.hris-auth-card .auth-sub { color:var(--muted,#64748b); font-size:.9rem; margin:0 0 1.6rem; }
.hris-auth-card .form-label { font-weight:600; font-size:.82rem; color:var(--ink-2,#334155); }
.hris-auth-card .input-group-text { border-right:0; }
.hris-auth-card .form-control { padding-top:.6rem; padding-bottom:.6rem; }
.hris-auth-card .btn-auth { width:100%; padding:.7rem; font-weight:600; border:0; color:#fff;
    background:linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow:0 8px 20px rgba(37,99,235,.32);
    transition:transform .12s, box-shadow .12s; }
.hris-auth-card .btn-auth:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(37,99,235,.42); }
.hris-auth-card .btn-pw { border-left:0; color:var(--muted,#94a3b8); }
.hris-auth-foot { text-align:center; font-size:.78rem; margin:1.5rem 0 0; color:var(--muted,#94a3b8); }
.auth-sso-divider { display:flex; align-items:center; gap:.75rem; margin:1.25rem 0 1rem; color:var(--muted,#94a3b8); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; }
.auth-sso-divider::before, .auth-sso-divider::after { content:""; flex:1; height:1px; background:var(--border,#e2e8f0); }
.auth-sso-buttons { display:flex; flex-direction:column; gap:.55rem; }
.auth-sso-btn { display:flex; align-items:center; justify-content:center; font-weight:600; padding:.6rem; border-radius:10px; }

@media (max-width:860px) {
    .hris-auth-split { grid-template-columns:1fr; max-width:430px; }
    .hris-auth-aside { display:none; }
    .hris-auth-main { padding:2.2rem 1.8rem; }
    .hris-auth-card { max-width:none; }
    .hris-auth-card .auth-mobile-brand { display:block; }
}

/* ---------- Error ---------- */
.hris-error { text-align:center; padding:4rem 1rem; }
.hris-error .code { font-size:3.5rem; font-weight:800; color:var(--border-2); letter-spacing:-2px; }

/* ---------- Accessibility: keyboard focus ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .nav-leaf:focus-visible, .nav-top:focus-visible,
.gs-item:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--brand, #2563eb) !important;
    outline-offset: 2px;
    border-radius: 6px;
}
.hris-nav-tree .nav-leaf:focus-visible, .hris-nav-tree .nav-top:focus-visible,
.hris-nav-tree summary:focus-visible { outline-color: #fff !important; }
/* mobile sidebar scrim when open */
@media (max-width: 991.98px) {
    .hris-sidebar.open::after { content:""; position:fixed; inset:0 0 0 var(--sidebar-w,260px); background:rgba(15,23,42,.35); z-index:-1; }
}

/* ============================================================
   PHASE G — Horizontal mega-menu shell + MDI iframe tabs
   ============================================================ */
.hris-shell-body { margin:0; height:100vh; display:flex; flex-direction:column; overflow:hidden; }

/* App bar (horizontal top) */
.hris-appbar { display:flex; align-items:center; gap:.35rem; padding:.3rem .55rem; min-height:54px;
    background: linear-gradient(180deg, var(--nav-bg-2,#1e293b), var(--nav-bg,#0f172a));
    color:#e2e8f0; border-bottom:1px solid #0b1220; z-index:1040; flex:0 0 auto; min-width:0; }
.hris-appbar-brand { display:flex; align-items:center; flex:0 0 auto; padding-right:.25rem; }
.hris-menu-toggle { display:none; background:none; border:0; color:#cbd5e1; font-size:1.3rem; padding:.1rem .4rem; }

/* Horizontal menu — wraps to a second row at narrow widths; overflow stays visible so dropdown panels are never clipped */
.hris-menu { display:flex; align-items:center; gap:.05rem .05rem; flex:1 1 auto; min-width:0;
    flex-wrap:wrap; overflow:visible; row-gap:.2rem; }
.mm-item { position:relative; flex:0 0 auto; }
.mm-top { display:inline-flex; align-items:center; gap:.3rem; padding:.4rem .45rem; border-radius:8px;
    color:#cbd5e1; background:none; border:0; font-size:.78rem; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; }
.mm-top .bi:not(.bi-chevron-down) { font-size:.92rem; }
.mm-top:hover { background:rgba(255,255,255,.08); color:#fff; }
.mm-top.active, .mm-item.open .mm-top { background:rgba(37,99,235,.85); color:#fff; }
.mm-top .bi-chevron-down { font-size:.62rem; opacity:.8; }
.mm-panel { position:absolute; top:calc(100% + 6px); left:0; background:#fff; color:var(--ink,#0f172a);
    border:1px solid var(--border,#e2e8f0); border-radius:12px; box-shadow:0 18px 44px rgba(15,23,42,.22);
    padding:.9rem 1rem; z-index:1050; display:none; width:max-content; max-width:min(1040px, 94vw);
    /* never grow past the viewport — tall menus (e.g. Payroll) scroll inside the panel */
    max-height:calc(100vh - 66px); max-height:calc(100dvh - 66px);
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.mm-item.open .mm-panel { display:block; }
.mm-cols { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; align-items:flex-start; }
.mm-col { flex:0 0 198px; width:198px; }
.mm-col h6 { font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#94a3b8);
    font-weight:700; margin:.3rem 0 .35rem; padding-bottom:.25rem; border-bottom:1px solid var(--border,#eef2f7); }
.mm-leaf { display:block; padding:.32rem .5rem; border-radius:7px; color:var(--ink-2,#334155); font-size:.82rem;
    text-decoration:none; line-height:1.25; overflow-wrap:anywhere; cursor:pointer; }
.mm-leaf:hover { background:var(--brand-050,#eff6ff); color:var(--brand-700,#1d4ed8); }

/* App-bar right cluster (search + notif + user) — no opaque overlay; menu owns its own overflow now */
.hris-appbar-right { display:flex; align-items:center; gap:.35rem; flex:0 0 auto; margin-left:.35rem;
    position:relative; z-index:5; padding-left:.3rem; }
.hris-appbar .hris-search { max-width:180px; flex:0 1 160px; }
@media (min-width: 1500px) { .hris-appbar .hris-search { max-width:240px; flex:0 1 220px; } }
@media (min-width: 1700px) { .hris-appbar .hris-search { max-width:300px; flex:0 1 280px; } }
.hris-appbar .hris-search input { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
    color:#fff; height:34px; font-size:.8rem; }
.hris-appbar .hris-search input::placeholder { color:rgba(226,232,240,.65); }
.hris-appbar .hris-search input:focus { background:#fff; color:var(--ink); }
.hris-appbar .hris-search .bi { color:rgba(226,232,240,.7); }
.hris-appbar .hris-userbtn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#e2e8f0; max-width:200px; }
.hris-appbar .hris-userbtn > span:nth-child(2) { min-width:0; max-width:130px; overflow:hidden; }
.hris-appbar .hris-userbtn > span:nth-child(2) > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px; }
@media (max-width: 1499.98px) {
    .hris-appbar .hris-userbtn > span:nth-child(2) > span:nth-child(2) { display:none; } /* hide role label to save space */
}
.hris-appbar .hris-userbtn:hover { background:rgba(255,255,255,.16); }
.hris-appbar .hris-userbtn .text-muted { color:rgba(226,232,240,.7) !important; }

/* Floating "My HR Assistant" launcher + chat panel (shell-level, over all tabs) */
/* Icon-only circle at rest; expands to the full greeting on hover/focus (Intercom-style). */
.hra-fab { position:fixed; right:18px; bottom:18px; z-index:1300; display:inline-flex; align-items:center;
    background:linear-gradient(135deg,var(--brand-600,#2563eb),var(--brand-700,#1e40af)); color:#fff; border:0;
    border-radius:999px; padding:.3rem; font-weight:600; font-size:.82rem;
    box-shadow:0 8px 22px rgba(29,78,216,.42); cursor:pointer;
    transition:transform .14s ease, box-shadow .14s ease, padding .24s ease; }
.hra-fab:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(29,78,216,.55); padding-right:1rem; }
.hra-fab:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 10px 28px rgba(29,78,216,.5); padding-right:1rem; }
.hra-fab .hra-fab-ic { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
    border-radius:50%; background:rgba(255,255,255,.2); font-size:1.25rem; flex:0 0 auto; }
.hra-fab .hra-fab-txt { white-space:nowrap; overflow:hidden; max-width:0; opacity:0; margin-left:0;
    transition:max-width .26s ease, opacity .2s ease, margin-left .26s ease; }
.hra-fab:hover .hra-fab-txt, .hra-fab:focus-visible .hra-fab-txt { max-width:320px; opacity:1; margin-left:.55rem; }
.hra-fab.hra-hidden { display:none; }
.hra-panel { position:fixed; right:16px; bottom:16px; z-index:1300; width:404px; max-width:calc(100vw - 32px);
    height:76vh; max-height:700px; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:18px;
    box-shadow:0 26px 70px rgba(15,23,42,.34); display:none; flex-direction:column; overflow:hidden; }
.hra-panel.open { display:flex; animation:hraIn .16s ease; }
@keyframes hraIn { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.hra-head { display:flex; align-items:center; justify-content:space-between; padding:.7rem .9rem; flex:0 0 auto;
    background:linear-gradient(135deg,var(--brand-600,#2563eb),var(--brand-700,#1e40af)); color:#fff; }
.hra-id { display:flex; align-items:center; gap:.6rem; }
.hra-av { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center;
    justify-content:center; font-size:1.15rem; flex:0 0 auto; }
.hra-id-txt { display:flex; flex-direction:column; line-height:1.2; font-weight:700; font-size:.95rem; }
.hra-id-txt small { font-weight:500; font-size:.66rem; opacity:.9; display:flex; align-items:center; gap:.32rem; margin-top:1px; }
.hra-dot { width:7px; height:7px; border-radius:50%; background:#34d399; display:inline-block; animation:hraPulse 2s infinite; }
@keyframes hraPulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)} 70%{box-shadow:0 0 0 6px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.hra-x { background:transparent; border:0; color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; padding:0 .25rem; opacity:.85; }
.hra-x:hover { opacity:1; }
.hra-panel iframe { flex:1 1 auto; border:0; width:100%; background:#f7f9fc; }

/* My HR Assistant — chat content (rendered inside the panel iframe / standalone tab) */
.asst { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; background:linear-gradient(180deg,#f8fafc,#eef2f8); }
.hris-embed-body:has(.asst) .hris-embedbar { display:none; }
.asst-bar { flex:0 0 auto; display:flex; justify-content:flex-end; padding:.4rem .7rem 0; }
.asst-bar button { background:transparent; border:0; color:var(--muted); font-size:.74rem; font-weight:600; cursor:pointer;
    display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .5rem; border-radius:8px; }
.asst-bar button:hover { background:rgba(15,23,42,.06); color:var(--ink); }
.asst-thread { flex:1 1 auto; overflow-y:auto; padding:.7rem .85rem 1rem; display:flex; flex-direction:column; gap:.7rem; }
.asst-empty { margin:auto; text-align:center; max-width:340px; padding:.5rem 0; }
.asst-hero-av { width:58px; height:58px; margin:0 auto .75rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--brand-600,#2563eb),var(--brand-700,#1e40af)); color:#fff; font-size:1.55rem; box-shadow:0 10px 26px rgba(37,99,235,.4); }
.asst-empty h3 { font-size:1.1rem; font-weight:700; color:var(--ink); margin:0 0 .3rem; }
.asst-empty p { font-size:.82rem; color:var(--muted); margin:0 0 1.1rem; line-height:1.5; }
.asst-starters { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.asst-starters form { margin:0; }
.asst-starter { width:100%; height:100%; text-align:left; background:#fff; border:1px solid var(--border); border-radius:13px;
    padding:.6rem .65rem; cursor:pointer; display:flex; flex-direction:column; gap:.35rem; font-size:.76rem; color:var(--ink-2); line-height:1.3; transition:.12s; }
.asst-starter:hover { border-color:var(--brand); box-shadow:0 5px 16px rgba(37,99,235,.14); transform:translateY(-1px); }
.asst-starter i { color:var(--brand); font-size:1.05rem; }
.asst-row { display:flex; gap:.5rem; }
.asst-row.me { justify-content:flex-end; }
.asst-av { flex:0 0 28px; width:28px; height:28px; border-radius:50%; margin-top:2px; color:#fff; font-size:.8rem;
    display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--brand-600,#2563eb),var(--brand-700,#1e40af)); }
.asst-bubble { max-width:84%; padding:.55rem .78rem; border-radius:15px; font-size:.84rem; line-height:1.5; }
.asst-row.me .asst-bubble { background:linear-gradient(135deg,var(--brand-600,#2563eb),var(--brand-700,#1e40af)); color:#fff; border-bottom-right-radius:5px; }
.asst-row.bot .asst-bubble { background:#fff; color:var(--ink); border:1px solid var(--border); border-bottom-left-radius:5px; box-shadow:var(--shadow-sm); }
.asst-bubble.warn { border-left:3px solid #d97706; }
.asst-bubble.bad { border-left:3px solid #dc2626; }
.asst-time { font-size:.62rem; color:var(--faint); margin-top:.35rem; }
.asst-bubble table { width:100%; border-collapse:collapse; margin-top:.5rem; font-size:.75rem; }
.asst-bubble th { text-align:left; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); padding:.22rem .35rem; }
.asst-bubble td { padding:.22rem .35rem; border-bottom:1px solid var(--surface-2); }
.asst-links { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; }
.asst-link { font-size:.72rem; font-weight:600; border:1px solid var(--brand); color:var(--brand); background:#fff; border-radius:999px;
    padding:.25rem .6rem; text-decoration:none; display:inline-flex; align-items:center; gap:.28rem; }
.asst-link:hover { background:var(--brand-050,#eff4ff); }
.asst-action { margin-top:.6rem; border:1px solid var(--brand); border-radius:12px; padding:.55rem .65rem; background:var(--brand-050,#eff4ff); }
.asst-action .lbl { font-size:.76rem; font-weight:700; color:var(--brand-700,#1e40af); display:flex; align-items:center; gap:.35rem; }
.asst-action .btns { display:flex; gap:.45rem; margin-top:.5rem; }
.asst-confirm { background:#16a34a; border:0; color:#fff; border-radius:8px; padding:.32rem .75rem; font-size:.74rem; font-weight:600; cursor:pointer; }
.asst-confirm:hover { background:#15803d; }
.asst-cancel { background:#fff; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:.32rem .75rem; font-size:.74rem; cursor:pointer; text-decoration:none; }
.asst-composer { flex:0 0 auto; padding:.55rem .75rem .75rem; }
.asst-chips { display:flex; gap:.35rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; }
.asst-chips::-webkit-scrollbar { display:none; }
.asst-chips form { margin:0; }
.asst-chip { white-space:nowrap; background:#fff; border:1px solid var(--border); color:var(--ink-2); border-radius:999px; padding:.26rem .65rem; font-size:.72rem; cursor:pointer; }
.asst-chip:hover { border-color:var(--brand); color:var(--brand); }
.asst-inputbar { display:flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--border); border-radius:999px; padding:.25rem .3rem .25rem .95rem; box-shadow:var(--shadow-sm); }
.asst-inputbar:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.13); }
.asst-inputbar input { flex:1; border:0; outline:0; background:transparent; font-size:.85rem; padding:.42rem 0; color:var(--ink); }
.asst-send { flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:0; color:#fff; cursor:pointer; font-size:1.05rem;
    display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--brand-600,#2563eb),var(--brand-700,#1e40af)); }
.asst-send:hover { filter:brightness(1.07); }

/* Tab strip */
.hris-tabbar { display:flex; align-items:center; gap:.3rem; padding:.35rem .6rem; background:#fff;
    border-bottom:1px solid var(--border,#e2e8f0); overflow-x:auto; overflow-y:hidden; flex:0 0 auto; min-height:42px; }
.hris-tabbar::-webkit-scrollbar { height:5px; } .hris-tabbar::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.hris-tab { display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .35rem .32rem .7rem; border-radius:8px;
    border:1px solid transparent; background:var(--surface-2,#f1f5f9); color:var(--ink-2,#475569); font-size:.8rem;
    font-weight:600; cursor:pointer; white-space:nowrap; max-width:220px; }
.hris-tab:hover { background:#e7edf5; }
.hris-tab.active { background:#fff; border-color:var(--border,#e2e8f0); color:var(--brand-700,#1d4ed8); box-shadow:var(--shadow-sm); }
.hris-tab.active::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand,#2563eb); flex:0 0 auto; }
.hris-tab-label { overflow:hidden; text-overflow:ellipsis; }
.hris-tab-x { border:0; background:none; color:inherit; opacity:.55; font-size:1rem; line-height:1; padding:0 .15rem; border-radius:5px; cursor:pointer; }
.hris-tab-x:hover { opacity:1; background:rgba(0,0,0,.08); }

/* Iframe panes */
.hris-panes { flex:1 1 auto; position:relative; min-height:0; background:var(--bg,#f8fafc); }
.hris-pane { position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--bg,#f8fafc); }

/* Shell flash toast */
/* Shell-level flash — prominent center-top banner (not a corner toast, so a save
   error after the inline +New row submits can't be missed). Slides in so the
   user's eye lands on it. */
.hris-shell-flash { position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:1060; min-width:420px; max-width:780px; box-shadow:0 10px 30px rgba(15,23,42,.18); animation:hrisFlashIn .25s ease-out; }
.hris-shell-flash .alert { font-size:.95rem; padding:.7rem 1rem; margin:0; border-left:4px solid currentColor; }
.hris-shell-flash .alert-danger  { background:#fef2f2; color:#9b1c1c; border-color:#9b1c1c; }
.hris-shell-flash .alert-success { background:#f0fdf4; color:#166534; border-color:#16a34a; }
@keyframes hrisFlashIn { from { opacity:0; transform:translate(-50%,-8px); } to { opacity:1; transform:translate(-50%,0); } }
/* Embedded (in-tab) flash above the content gets the same prominent treatment. */
.hris-embed-content > .alert { font-size:.95rem; border-left:4px solid currentColor; margin-bottom:1rem; }

/* Global search dropdown (lives in the app bar) */
.gs-results{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:260px;background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.18);z-index:1200;max-height:60vh;overflow-y:auto;padding:.35rem}
.gs-sec{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#94a3b8);font-weight:700;padding:.45rem .6rem .2rem}
.gs-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:7px;text-decoration:none;color:var(--ink,#1e293b);font-size:.85rem;cursor:pointer}
.gs-item:hover,.gs-item.active{background:var(--brand,#2563eb);color:#fff}
.gs-item .gs-sub{font-size:.74rem;color:var(--muted,#94a3b8)}
.gs-item:hover .gs-sub,.gs-item.active .gs-sub{color:rgba(255,255,255,.8)}
.gs-empty{padding:.8rem .6rem;color:var(--muted,#94a3b8);font-size:.82rem}

/* Embedded (in-tab) layout */
.hris-embed-body { margin:0; background:var(--bg,#f8fafc); }
.hris-embedbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:.6rem;
    padding:.4rem .9rem; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border,#e2e8f0); min-height:42px; }
.hris-back { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--border,#e2e8f0);
    background:#fff; color:var(--ink-2,#334155); border-radius:7px; padding:.25rem .6rem; font-size:.8rem; font-weight:600; cursor:pointer; }
.hris-back:hover { background:var(--surface-2,#f1f5f9); border-color:#cbd5e1; }
.hris-embed-title { font-size:.82rem; font-weight:600; color:var(--muted,#64748b); }
.hris-embed-content { padding:1.1rem 1.4rem 2.5rem; max-width:1480px; width:100%; }

@media (max-width: 991.98px) {
    .hris-menu-toggle { display:inline-block; }
    .hris-menu { position:absolute; top:54px; left:0; right:0; flex-direction:column; align-items:stretch;
        background:linear-gradient(180deg,var(--nav-bg-2,#1e293b),var(--nav-bg,#0f172a)); padding:.5rem; gap:.15rem;
        max-height:calc(100vh - 54px); overflow-x:hidden; overflow-y:auto; flex-wrap:nowrap; display:none; z-index:1045; }
    .hris-menu.open { display:flex; }
    .mm-item { flex:0 0 auto; width:100%; }
    .mm-top { width:100%; justify-content:flex-start; }
    .mm-panel { position:static; display:none; box-shadow:none; border:0; background:rgba(255,255,255,.04);
        padding:.3rem .3rem .3rem 1rem; margin:.1rem 0; }
    .mm-item.open .mm-panel { display:block; }
    .mm-cols { flex-direction:column; gap:.5rem; }
    .mm-col { max-width:none; } .mm-col + .mm-col { border-left:0; padding-left:0; }
    .mm-col h6 { color:#64748b; } .mm-leaf { color:#cbd5e1; } .mm-leaf:hover { background:rgba(255,255,255,.1); color:#fff; }
    .hris-appbar .hris-search { display:none; }
}

/* ---- Per-column table filters (app-wide) ---- */
.data-table thead th { position: relative; }
.colf-btn{ background:none; border:0; color:#b3bdc9; cursor:pointer; padding:0 .15rem; margin-left:.25rem; font-size:.78rem; line-height:1; vertical-align:middle; opacity:.55; }
.data-table thead th:hover .colf-btn{ opacity:1; }
.colf-btn:hover{ color:var(--brand,#2563eb); }
.data-table thead th.colf-active .colf-btn{ color:var(--brand,#2563eb); opacity:1; }
/* Column-filter UI is interactive-only — never render it in print / Save-as-PDF. */
@media print { .colf-btn, .colf-pop, .colf-bar { display:none !important; } }
.colf-pop{ position:fixed; z-index:3000; display:none; width:230px; background:#fff; border:1px solid #d8dee8; border-radius:8px; box-shadow:0 10px 28px rgba(20,40,80,.16); padding:.6rem; }
.colf-pop .colf-title{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#5b6776; margin-bottom:.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.colf-bar{ font-size:.8rem; color:#5b6776; background:#eef4ff; border:1px solid #d6e3ff; border-radius:8px; padding:.35rem .6rem; margin-bottom:.5rem; }
.colf-bar a{ color:var(--brand,#2563eb); text-decoration:none; }
.colf-sep{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:#9aa5b1; text-align:center; margin:.4rem 0 .3rem; }
.colf-selctl{ font-size:.74rem; margin-bottom:.25rem; }
.colf-selctl a{ color:var(--brand,#2563eb); text-decoration:none; }
.colf-vals{ max-height:180px; overflow-y:auto; border:1px solid #e6eaf0; border-radius:6px; padding:.2rem; }
.colf-vrow{ display:flex; align-items:center; gap:.4rem; padding:.15rem .25rem; font-size:.82rem; cursor:pointer; border-radius:4px; }
.colf-vrow:hover{ background:#f3f7ff; }
.colf-vrow .colf-vt{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.colf-vrow .colf-ct{ color:#9aa5b1; font-size:.72rem; }
.colf-empty{ font-size:.76rem; color:#9aa5b1; padding:.3rem; text-align:center; }

/* ---------- Focused-panel screens (single-task cancel / confirm / select-then-act flows) ---------- */
.panel-screen { max-width: 680px; margin: 0 auto; }
.panel-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); background: var(--surface); }
.panel-card + .panel-card { margin-top: 1rem; }

/* Header strip — icon badge + uppercase title + sub + context date */
.panel-head { display:flex; align-items:center; gap:.85rem;
    padding:.95rem 1.2rem; border-bottom:1px solid var(--border);
    background: linear-gradient(180deg, var(--brand-050), var(--surface)); }
.panel-head .panel-ic { flex:0 0 auto; width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:1.05rem;
    background: linear-gradient(135deg, var(--brand-600), var(--c2)); color:#fff;
    box-shadow: 0 3px 8px rgba(8,145,178,.28); }
.panel-head .panel-htext { min-width:0; flex:1; }
.panel-head h2 { font-size:.9rem; font-weight:700; letter-spacing:.035em; margin:0; color:var(--ink);
    text-transform:uppercase; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panel-head .panel-hsub { font-size:.76rem; color:var(--muted); margin-top:.12rem; }
.panel-head .panel-date { font-size:.78rem; font-weight:600; color:var(--muted); white-space:nowrap;
    display:flex; align-items:center; gap:.35rem; }

.panel-body { padding:1.2rem; }
.panel-flabel { font-size:.76rem; font-weight:600; color:var(--ink-2); margin-bottom:.4rem; display:block;
    text-transform:uppercase; letter-spacing:.03em; }

/* Selects/inputs inside panels — taller, crisp focus ring */
.panel-screen .form-select, .panel-screen .form-control { height:42px; border-radius:var(--radius-sm);
    border-color:var(--border-2); transition: border-color .15s ease, box-shadow .15s ease; }
.panel-screen .form-select:focus, .panel-screen .form-control:focus {
    border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

/* Identity strip — initials avatar + name/number + status chip */
.panel-id { display:flex; align-items:center; gap:.8rem; padding:.95rem 1.2rem; border-bottom:1px solid var(--border);
    background: linear-gradient(90deg, var(--brand-050), var(--surface) 60%); }
.panel-avatar { flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-weight:700; font-size:.92rem; color:#fff; letter-spacing:.03em;
    background: linear-gradient(135deg, var(--c1), var(--c3)); box-shadow: 0 3px 8px rgba(124,58,237,.3); }
.panel-id .chip { background:#fff; color:var(--brand-700); border:1px solid rgba(37,99,235,.22); box-shadow: var(--shadow-sm); }
.panel-id-text { min-width:0; flex:1; }
.panel-id-name { font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panel-id-no { font-size:.74rem; color:var(--faint); font-weight:600; letter-spacing:.04em; }

/* Snapshot — clean 2-col grid with field icons, flush under the identity strip */
.panel-snap-grid { display:grid; grid-template-columns:1fr 1fr; }
.panel-snap-cell { display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.7rem 1.2rem; border-top:1px solid var(--border); min-width:0; }
.panel-snap-cell:nth-child(odd) { border-right:1px solid var(--border); }
.panel-snap-cell.full { grid-column:1 / -1; border-right:0; }   /* full-width snapshot row (odd field count) */
.panel-snap-grid .panel-snap-cell:nth-child(1),
.panel-snap-grid .panel-snap-cell:nth-child(2) { border-top:0; }
.panel-snap-lab { display:flex; align-items:center; gap:.5rem; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.04em; color:var(--muted); font-weight:600; white-space:nowrap; }
.panel-snap-lab .bi { color:var(--faint); font-size:.9rem; }
/* Colour the snapshot field icons by position (Location/Department/Category/Grade/Position/…). */
.panel-snap-cell:nth-child(1) .panel-snap-lab .bi { color:var(--c1); }
.panel-snap-cell:nth-child(2) .panel-snap-lab .bi { color:var(--c2); }
.panel-snap-cell:nth-child(3) .panel-snap-lab .bi { color:var(--c3); }
.panel-snap-cell:nth-child(4) .panel-snap-lab .bi { color:var(--c4); }
.panel-snap-cell:nth-child(5) .panel-snap-lab .bi { color:var(--c5); }
.panel-snap-cell:nth-child(6) .panel-snap-lab .bi { color:var(--c6); }
.panel-snap-val { margin:0; font-weight:600; color:var(--ink); text-align:right; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Danger zone — labelled red panel */
.panel-danger { margin:1.2rem; border:1px solid var(--bad-bg); background:var(--surface);
    border-radius:var(--radius-sm); overflow:hidden; }
.panel-dzone { display:flex; align-items:center; gap:.45rem; font-size:.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; color:var(--bad); padding:.55rem 1.1rem; background:var(--bad-bg); }
.panel-dbody { padding:1.1rem 1.2rem; }
.panel-warn { display:flex; gap:.55rem; font-size:.83rem; color:var(--ink-2); margin-bottom:1rem; line-height:1.5; }
.panel-warn .bi { color:var(--bad); font-size:1rem; flex:0 0 auto; margin-top:.1rem; }
.panel-actions { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; }
.panel-actions .flex-grow-1 { min-width:220px; }
.panel-actions .btn { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.panel-actions .btn-danger:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(185,28,28,.28); }
.panel-actions .btn:disabled { opacity:.5; cursor:not-allowed; }

@media (max-width:575px){
    .panel-snap-grid { grid-template-columns:1fr; }
    .panel-snap-cell:nth-child(odd) { border-right:0; }
    .panel-snap-grid .panel-snap-cell:nth-child(2) { border-top:1px solid var(--border); }
    .panel-head { flex-wrap:wrap; }
}

/* Hide the up/down spinner arrows on number inputs across the app. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* --- Flatpickr: make the month + YEAR header clear (users were missing the year) --- */
.flatpickr-current-month { font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.flatpickr-current-month .cur-month { font-weight: 700; }
/* The year sits in a bordered, tinted box with a "Year" hint so it reads as a year picker. */
.flatpickr-current-month .numInputWrapper { width: 6.5ch; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; }
.flatpickr-current-month .numInputWrapper:hover { background: #dbeafe; }
.flatpickr-current-month input.cur-year { font-weight: 700; color: #1d4ed8; padding-left: .25rem; }
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown { opacity: 1; border-left: 1px solid #bfdbfe; }
.flatpickr-months .flatpickr-month { height: 42px; }

/* ============================================================
   Responsive hardening (global) — fit every screen, 320px → ultrawide
   Central overrides so all pages adapt without per-view edits:
   • neutralise inline grid-template-columns so grids actually collapse
   • tighten gutters on phones/tablets, use more width on large monitors
   • keep tables & media from forcing the page into horizontal scroll
   ============================================================ */

/* Content gutters — roomy on desktop, tighter on small screens so
   nothing gets squeezed against the edge. */
@media (max-width: 991.98px) {
    .hris-content, .hris-embed-content { padding-left: 1rem; padding-right: 1rem; }
    .hris-topbar, .hris-embedbar, .hris-appbar { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 575px) {
    .hris-content, .hris-embed-content { padding: .9rem .8rem 2rem; }
    .hris-topbar, .hris-embedbar { padding-left: .8rem; padding-right: .8rem; }
}

/* Large / ultrawide monitors — use the extra pixels instead of a fixed 1480px column. */
@media (min-width: 1800px) { .hris-content, .hris-embed-content { max-width: 1680px; } }
@media (min-width: 2200px) { .hris-content, .hris-embed-content { max-width: 1920px; } }

/* KPI strips collapse gracefully. !important overrides per-view inline
   grid-template-columns (dashboard, payroll, recruitment, performance, leave…
   hardcode column counts inline, which otherwise defeat these breakpoints
   and overflow narrow screens). */
@media (max-width: 1200px) { .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 820px)  { .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 460px)  { .kpi-strip { grid-template-columns: 1fr !important; } }

/* Two/three-column section grids stack on tablet & below, even when set inline. */
@media (max-width: 991.98px) { .grid-2, .grid-3 { grid-template-columns: 1fr !important; } }

/* Media never forces the page wider than the viewport. */
img, canvas, svg, video { max-width: 100%; }

/* Data tables: wrap headers and tighten cells on phones so 5–7 column tables
   fit better instead of shoving the whole page into horizontal scroll. */
@media (max-width: 575px) {
    .data-table { font-size: .82rem; }
    .data-table thead th { white-space: normal; }
    .data-table thead th, .data-table tbody td { padding: .5rem .55rem; }
}

/* Page header — let the action button wrap under the title on small screens. */
@media (max-width: 575px) {
    .hris-page-head { flex-wrap: wrap; align-items: flex-start; }
    .hris-page-head h1 { font-size: 1.2rem; }
}