/* ============================================================
   hrthing — project-specific styles (sits on top of framework.css)
   All colors come from theme tokens defined in framework.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html, body { min-height: 100vh; }
body {
    display: flex;
    flex-direction: column;
    font-feature-settings: 'cv11', 'ss01';
}

main.section {
    flex: 1 0 auto;
    padding: 2rem 1.5rem 3rem;
}
main.section .container { max-width: 1200px; }

/* ---------- Top navbar ---------- */
.navbar.hr-topbar { min-height: 3.75rem; }
.navbar.hr-topbar .navbar-brand .brand-link {
    color: var(--c-text);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1.0625rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    background: transparent;
}
.navbar.hr-topbar .navbar-brand .brand-link:hover { background: transparent; color: var(--c-text); }
.navbar.hr-topbar .brand-mark {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, #16A34A 0%, #047857 100%);
    color: #fff;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 0.625rem;
    font-size: 0.85rem;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}
[data-theme="dark"] .navbar.hr-topbar .brand-mark {
    background: linear-gradient(135deg, #22C55E 0%, #059669 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Account chip in navbar */
.account-chip {
    display: inline-flex !important; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem !important;
    border: 1px solid var(--c-border);
    border-radius: 999px !important;
    background: var(--c-surface);
    color: var(--c-text) !important;
    font-weight: 500; font-size: 0.85rem;
    transition: background 120ms, border-color 120ms;
    text-decoration: none;
    margin: 0;
}
.account-chip:hover { background: var(--c-surface-alt) !important; border-color: var(--c-border-strong); }
.account-chip .avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--c-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 600;
}

/* Theme toggle button (sun/moon) */
.theme-toggle {
    -webkit-appearance: none; appearance: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    width: 2.25rem; height: 2.25rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-right: 0.5rem;
    transition: background 120ms, color 120ms, border-color 120ms, transform 200ms;
}
.theme-toggle:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
    border-color: var(--c-border-strong);
}
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-moon,
:root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: inline-block; }
}

/* ---------- Page header ---------- */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.page-header .page-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--c-text-subtle);
    font-weight: 600;
    margin: 0;
}
.page-header h1 {
    font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--c-text);
    margin: 0.2rem 0 0.2rem;
    line-height: 1.25;
}
.page-header .page-subtitle {
    color: var(--c-text-muted);
    font-size: 0.95rem;
    margin: 0;
}
.page-header .page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Welcome banner (gradient hero) ---------- */
.hr-welcome {
    background: linear-gradient(135deg, #16A34A 0%, #047857 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .hr-welcome {
    background: linear-gradient(135deg, #15803D 0%, #064E3B 100%);
}
.hr-welcome::after {
    content: ''; position: absolute; right: -80px; top: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.hr-welcome .eyebrow {
    text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.72rem; font-weight: 600; opacity: 0.85; margin-bottom: 0.4rem;
    color: #fff;
}
.hr-welcome h1 {
    color: #fff; font-size: 1.5rem; font-weight: 600;
    letter-spacing: -0.02em; margin: 0;
}
.hr-welcome p {
    color: rgba(255,255,255,0.88); margin-top: 0.4rem;
    font-size: 0.95rem; max-width: 540px;
}

/* ---------- Surface (used to wrap toolbars + tables) ---------- */
.hr-surface {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

/* ---------- Stat tile ---------- */
.stat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow 150ms ease;
    height: 100%;
}
.stat-card:hover { box-shadow: var(--shadow-sm); }
.stat-card .stat-head {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--c-text-muted); font-size: 0.825rem; font-weight: 500;
    margin-bottom: 0.75rem;
}
.stat-card .stat-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-primary-soft); color: var(--c-primary-text);
    font-size: 0.85rem;
}
.stat-card .stat-icon.is-success { background: var(--c-success-soft); color: var(--c-success-text); }
.stat-card .stat-icon.is-warning { background: var(--c-warning-soft); color: var(--c-warning-text); }
.stat-card .stat-icon.is-danger  { background: var(--c-danger-soft);  color: var(--c-danger-text); }
.stat-card .stat-value {
    font-size: 1.75rem; font-weight: 600; color: var(--c-text);
    letter-spacing: -0.02em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.stat-card .stat-delta {
    margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--c-text-muted);
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.stat-card .stat-delta.is-up   { color: var(--c-success-text); }
.stat-card .stat-delta.is-down { color: var(--c-danger-text); }

/* ---------- Pills / tags variant ---------- */
.tag.hr-pill {
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.15rem 0.65rem;
    height: auto;
    border: 1px solid var(--c-border);
    background: var(--c-surface-alt);
    color: var(--c-text-muted);
    text-transform: none;
    letter-spacing: 0;
}
.hr-pill.is-success { background: var(--c-success-soft); color: var(--c-success-text); border-color: transparent; }
.hr-pill.is-warning { background: var(--c-warning-soft); color: var(--c-warning-text); border-color: transparent; }
.hr-pill.is-danger  { background: var(--c-danger-soft);  color: var(--c-danger-text);  border-color: transparent; }
.hr-pill.is-primary { background: var(--c-primary-soft); color: var(--c-primary-text); border-color: transparent; }

/* ---------- Toolbar (for surfaces wrapping a table) ---------- */
.toolbar {
    display: flex; gap: 0.5rem; align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    flex-wrap: wrap;
}
.toolbar .toolbar-search {
    flex: 1; min-width: 220px;
    position: relative;
}
.toolbar .toolbar-search .icon {
    position: absolute; top: 50%; left: 0.75rem;
    transform: translateY(-50%);
    color: var(--c-text-subtle); pointer-events: none;
    width: 1em; height: 1em;
}
.toolbar .toolbar-search input.input {
    padding-left: 2.25rem;
}

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center; padding: 2.75rem 1rem;
    color: var(--c-text-muted);
}
.empty-state .empty-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--c-surface-alt); color: var(--c-text-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}
.empty-state .empty-title { color: var(--c-text); font-weight: 600; margin-bottom: 0.25rem; }
.empty-state .empty-sub { font-size: 0.9rem; margin: 0; }

/* ---------- Report card ---------- */
.report-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    padding: 1.5rem;
    transition: box-shadow 150ms ease, border-color 150ms ease;
    display: flex; flex-direction: column; height: 100%;
}
.report-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--c-border-strong);
}
.report-card .report-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--c-primary-soft); color: var(--c-primary-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    margin-bottom: 0.85rem;
}
.report-card h3 {
    font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem;
    color: var(--c-text);
}
.report-card p {
    color: var(--c-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.1rem;
    flex: 1;
}
.report-card .report-cta {
    color: var(--c-primary-text); font-weight: 600; font-size: 0.875rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    text-decoration: none;
}
.report-card .report-cta:hover { color: var(--c-primary-hover); }

/* Settings page: keep nested .menu inside a .box flush */
.box .menu { font-size: 0.95rem; }
.box .menu .menu-label:first-child { margin-top: 0; }

/* ============================================================
   Login / auth page (standalone, centered card)
   ============================================================ */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(22, 163, 74, 0.08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(22, 163, 74, 0.06), transparent 60%),
        var(--c-bg);
}
[data-theme="dark"] .auth-body {
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(74, 222, 128, 0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(74, 222, 128, 0.07), transparent 60%),
        var(--c-bg);
}

/* Theme toggle floats top-right when on the auth page */
.auth-theme-toggle {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    margin: 0 !important;
}

.auth-shell {
    width: 100%;
    max-width: 26rem;
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.auth-card {
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 2rem 1.75rem 1.5rem;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.auth-brand .brand-mark {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #16A34A 0%, #047857 100%);
    color: #fff;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}
[data-theme="dark"] .auth-brand .brand-mark {
    background: linear-gradient(135deg, #22C55E 0%, #059669 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.auth-brand .brand-name {
    color: var(--c-text);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

.auth-title {
    color: var(--c-text);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 0.35rem;
}
.auth-subtitle {
    color: var(--c-text-muted);
    font-size: 0.925rem;
    margin: 0 0 1.5rem;
}

.auth-form .field { margin-bottom: 1rem; }
.auth-form .label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.auth-form .label-row .label { margin-bottom: 0; }

.auth-link-small {
    font-size: 0.78rem;
    color: var(--c-primary-text);
    font-weight: 500;
    text-decoration: none;
}
.auth-link-small:hover { color: var(--c-primary-hover); text-decoration: underline; }

/* Show/hide password toggle button */
.password-toggle {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem; height: 2rem;
    border: 0;
    background: transparent;
    color: var(--c-text-subtle);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms, color 120ms;
}
.password-toggle:hover { background: var(--c-surface-alt); color: var(--c-text); }
.password-toggle:focus { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); }

/* Remember-me row uses a flat checkbox (no border box) on the auth page */
.auth-row { margin-top: 0.25rem; }
.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-text);
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    padding: 0;
    border: 0;
    background: transparent;
}
.auth-remember:hover { background: transparent; }
.auth-remember input { accent-color: var(--c-primary); width: 16px; height: 16px; }

.auth-form .button.is-primary { height: 2.75rem; font-size: 0.95rem; }

.auth-success { margin-top: 1rem; }

.auth-footer-note {
    margin: 1.25rem 0 0;
    color: var(--c-text-muted);
    font-size: 0.78rem;
    text-align: center;
}
.auth-footer-note a { color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.auth-footer-note a:hover { color: var(--c-text); }

.auth-foot {
    color: var(--c-text-subtle);
    font-size: 0.78rem;
    margin: 0;
}
.auth-foot a { color: var(--c-text-muted); }
.auth-foot a:hover { color: var(--c-text); }

/* Highlight invalid inputs on the login form */
.auth-form .input.is-invalid {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* ============================================================
   Form sections (employee create / import / export)
   ============================================================ */
.form-section {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-mute);
}
.form-section-head h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}
.form-section-head p {
    font-size: 0.85rem;
    color: var(--c-text-muted);
    margin: 0.15rem 0 0;
}
.form-section-icon {
    width: 36px; height: 36px;
    flex: none;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--c-primary-soft);
    color: var(--c-primary-text);
    border-radius: 9px;
    font-size: 0.95rem;
}
.form-section-body { padding: 1.25rem; }

/* Required-field marker */
.req { color: var(--c-danger); font-weight: 500; margin-left: 0.15rem; }

/* Footer action row inside a form */
.form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

/* Highlight invalid inputs on any form */
.employee-form .input.is-invalid,
.employee-form .textarea.is-invalid,
.employee-form .select.is-invalid select {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* ============================================================
   Format picker cards (CSV / XML)
   ============================================================ */
.format-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.format-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas:
        "icon name"
        "icon desc";
    column-gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.format-card:hover { border-color: var(--c-border-strong); background: var(--c-surface-mute); }
.format-card.is-active {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.format-card input[type="radio"] {
    position: absolute; top: 0.6rem; right: 0.6rem;
    accent-color: var(--c-primary);
}
.format-card .format-icon {
    grid-area: icon;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface-alt);
    color: var(--c-text-muted);
    border-radius: 9px;
    font-size: 1.1rem;
}
.format-card.is-active .format-icon {
    background: var(--c-primary);
    color: #fff;
}
.format-card .format-name { grid-area: name; font-weight: 600; color: var(--c-text); font-size: 0.95rem; }
.format-card .format-desc { grid-area: desc; color: var(--c-text-muted); font-size: 0.8rem; }

/* Template download row under the format picker */
.template-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--c-surface-mute);
    border: 1px dashed var(--c-border);
    border-radius: 9px;
    color: var(--c-text-muted);
    font-size: 0.85rem;
}
.template-row .icon { color: var(--c-text-subtle); }

/* ============================================================
   Dropzone (file upload)
   ============================================================ */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2.25rem 1rem;
    border: 1.5px dashed var(--c-border-strong);
    border-radius: 12px;
    background: var(--c-surface-mute);
    cursor: pointer;
    text-align: center;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.dropzone:hover, .dropzone.is-hover {
    background: var(--c-primary-soft);
    border-color: var(--c-primary);
    color: var(--c-primary-text);
}
.dropzone-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-primary-soft);
    color: var(--c-primary-text);
    border-radius: 50%;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.dropzone:hover .dropzone-icon, .dropzone.is-hover .dropzone-icon {
    background: var(--c-primary); color: #fff;
}
.dropzone-title { font-weight: 600; color: var(--c-text); font-size: 0.95rem; }
.dropzone-sub { color: var(--c-text-muted); font-size: 0.85rem; }
.dropzone.is-hidden { display: none !important; }

/* The currently-selected file row */
.file-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--c-primary-soft);
    border: 1px solid var(--c-primary-soft-2);
    border-radius: 10px;
}
.file-row-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-primary);
    color: #fff;
    border-radius: 9px;
}
.file-row-meta { flex: 1; min-width: 0; }
.file-row-name {
    font-weight: 600; color: var(--c-text);
    font-size: 0.925rem; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-row-sub { font-size: 0.8rem; color: var(--c-text-muted); margin: 0.1rem 0 0; }

/* ============================================================
   Column-mapping list (import)
   ============================================================ */
.map-list { display: flex; flex-direction: column; gap: 0.5rem; }
.map-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto minmax(200px, 2fr);
    gap: 0.85rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    background: var(--c-surface);
}
.map-source { display: flex; align-items: center; }
.map-tag {
    display: inline-flex;
    padding: 0.25rem 0.55rem;
    background: var(--c-surface-alt);
    color: var(--c-text);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}
.map-arrow { color: var(--c-text-subtle); }
@media (max-width: 640px) {
    .map-row { grid-template-columns: 1fr; }
    .map-arrow { display: none; }
}

/* Highlight problematic table cells in the preview */
.cell-warn { color: var(--c-warning-text); }

/* ============================================================
   Field group (export — checkboxes by category)
   ============================================================ */
.field-group + .field-group { margin-top: 1.1rem; }
.field-group-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-subtle);
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.4rem;
}
.field-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    transition: background 120ms, border-color 120ms;
}
.field-check:hover { background: var(--c-surface-mute); }
.field-check input { accent-color: var(--c-primary); }
.field-check:has(input:checked) {
    background: var(--c-primary-soft);
    border-color: var(--c-primary-soft-2);
    color: var(--c-primary-text);
    font-weight: 500;
}

/* ============================================================
   Export preview block
   ============================================================ */
.export-preview {
    background: var(--c-surface-mute);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    max-height: 320px;
    overflow: auto;
    white-space: pre;
    margin: 0;
}

/* ============================================================
   Summary card sidebar (import & export)
   ============================================================ */
.import-summary {
    position: sticky;
    top: 1rem;
}
.summary-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.summary-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
}
.summary-label { color: var(--c-text-muted); }
.summary-value {
    font-weight: 600;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Data tables — shared between employees, time off, settings
   ============================================================ */
.hr-table { margin-bottom: 0; }
.hr-table thead th {
    background: var(--c-surface-mute);
    color: var(--c-text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--c-border);
    padding: 0.6rem 0.85rem;
}
.hr-table tbody td {
    padding: 0.7rem 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    font-size: 0.92rem;
}
.hr-table tbody tr:last-child td { border-bottom: none; }
.hr-table tbody tr:hover td { background: var(--c-surface-mute); }
.hr-table .has-text-right { text-align: right; }

/* Avatar used in person cells */
.hr-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--c-primary-soft); color: var(--c-primary-text);
    font-weight: 600; font-size: 0.78rem;
    flex-shrink: 0;
}

/* "Person" cell: avatar + name + sub */
.cell-person {
    display: flex; align-items: center; gap: 0.65rem;
}
.cell-person-meta { display: flex; flex-direction: column; line-height: 1.2; }
.cell-person-name { font-weight: 600; color: var(--c-text); }
.cell-person-sub  { font-size: 0.78rem; color: var(--c-text-muted); margin-top: 1px; }
.cell-email       { color: var(--c-text-muted); }
.cell-email:hover { color: var(--c-primary-text); }
.cell-muted       { color: var(--c-text-muted); }
.cell-reason      { color: var(--c-text-muted); font-size: 0.88rem; }
.has-text-text-muted { color: var(--c-text-muted); }

/* Table foot (count + tiny pagination) */
.table-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-mute);
    font-size: 0.85rem;
    color: var(--c-text-muted);
}
.pagination-mini { display: inline-flex; align-items: center; gap: 0.5rem; }
.pagination-page { font-variant-numeric: tabular-nums; }

/* Tabs — slight upgrade so the active state is unmistakable */
.hr-tabs ul { border-bottom-color: var(--c-border); }
.hr-tabs li { cursor: pointer; }
.hr-tabs li a {
    color: var(--c-text-muted);
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1rem;
    transition: color 120ms, border-color 120ms;
}
.hr-tabs li:hover a { color: var(--c-text); }
.hr-tabs li.is-active a {
    color: var(--c-primary-text);
    border-bottom-color: var(--c-primary);
    font-weight: 600;
}

/* Time off — balance bars inside a cell */
.balance-cell {
    display: flex; align-items: center; gap: 0.6rem;
    min-width: 130px;
}
.balance-bar {
    flex: 1;
    height: 6px;
    background: var(--c-surface-mute);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--c-border);
}
.balance-fill { height: 100%; border-radius: 999px; transition: width 200ms; }
.balance-fill.is-primary { background: var(--c-primary); }
.balance-fill.is-warning { background: var(--c-warning); }
.balance-fill.is-danger  { background: var(--c-danger); }
.balance-text {
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--c-text-muted);
    min-width: 50px;
    text-align: right;
}

/* ---------- Dashboard activity feed ---------- */
.card-header-icon { padding: 0.5rem 0.75rem; }
.card-header-link {
    color: var(--c-primary-text);
    font-size: 0.82rem;
    font-weight: 500;
}
.activity-feed { list-style: none; padding: 0; margin: 0; }
.activity-item {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--c-border);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--c-surface-mute); color: var(--c-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.activity-icon.is-success { background: var(--c-success-soft); color: var(--c-success-text); }
.activity-icon.is-warning { background: var(--c-warning-soft); color: var(--c-warning-text); }
.activity-icon.is-danger  { background: var(--c-danger-soft);  color: var(--c-danger-text); }
.activity-icon.is-primary { background: var(--c-primary-soft); color: var(--c-primary-text); }
.activity-body { flex: 1; min-width: 0; }
.activity-text { color: var(--c-text); font-size: 0.92rem; margin: 0; }
.activity-when { color: var(--c-text-muted); font-size: 0.78rem; margin: 0.15rem 0 0; }

/* "Out today" sidebar list on dashboard */
.out-today-list { list-style: none; padding: 0; margin: 0; }
.out-today-list li {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--c-border);
}
.out-today-list li:last-child { border-bottom: none; }
.out-name { margin: 0; font-weight: 600; color: var(--c-text); font-size: 0.9rem; }
.out-sub  { margin: 0; font-size: 0.78rem; color: var(--c-text-muted); }

/* ============================================================
   Settings — sub-section headers & cards
   ============================================================ */
.settings-section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.settings-section-head h2,
.settings-section-head h3 {
    margin: 0 0 0.15rem; color: var(--c-text); font-weight: 600;
}
.settings-section-head h2 { font-size: 1.25rem; }
.settings-section-head h3 { font-size: 1rem; }
.settings-section-head p { margin: 0; color: var(--c-text-muted); font-size: 0.9rem; }

.role-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    background: var(--c-primary-soft); color: var(--c-primary-text);
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
}

/* Billing cards */
.billing-card { height: 100%; }
.billing-plan-name { font-size: 1.5rem; font-weight: 700; color: var(--c-text); margin: 0; }
.billing-plan-price { color: var(--c-text-muted); margin: 0.1rem 0 0; }
.billing-method {
    display: flex; align-items: center; gap: 0.65rem;
    font-weight: 600; color: var(--c-text); margin: 0 0 0.2rem;
    font-size: 1rem;
}
.billing-method .icon.is-large { font-size: 1.6rem; color: var(--c-primary-text); }

/* Integrations grid */
.integration-card {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-surface);
    transition: border-color 120ms, box-shadow 120ms;
}
.integration-card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-xs); }
.integration-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--c-surface-mute); color: var(--c-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.integration-meta { flex: 1; min-width: 0; }
.integration-name { margin: 0; font-weight: 600; color: var(--c-text); }
.integration-desc { margin: 0.15rem 0 0; color: var(--c-text-muted); font-size: 0.85rem; }
.integration-cat  {
    margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.integration-actions {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
    flex-shrink: 0;
}

/* Buttons used inline in tables — keep "ghost" subtle */
.button.is-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-text-muted);
}
.button.is-ghost:hover {
    background: var(--c-surface-mute);
    color: var(--c-text);
}