/* =====================================================================
   HRIS · "Ledger 2.0" design system
   Modern professional register: indigo primary, floating cards, pill
   navigation with a brass jewel on the active item, Manrope + Inter,
   tabular numerals for data. One gradient locus: brand tile + auth.
   ===================================================================== */

:root {
    /* palette */
    --hr-indigo: #4056d8;
    --hr-indigo-deep: #3546b8;
    --hr-indigo-ink: #2a3a9e;
    --hr-indigo-soft: #eef1fd;
    --hr-brass: #c08a2d;
    --hr-ink: #191e2b;
    --hr-canvas: #f5f6fa;
    --hr-panel: #ffffff;
    --hr-line: #e6e9f0;

    --bs-primary: #4056d8;
    --bs-primary-rgb: 64, 86, 216;
    --bs-primary-bg-subtle: #eef1fd;
    --bs-link-color: #4056d8;
    --bs-link-color-rgb: 64, 86, 216;
    --bs-link-hover-color: #3546b8;
    --bs-link-hover-color-rgb: 53, 70, 184;
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: #2a3140;
    --bs-body-bg: #ffffff;
    --bs-secondary-color: #667080;
    --bs-border-radius: .55rem;
    --bs-border-radius-lg: .8rem;
    --bs-border-color: #e6e9f0;

    --hr-shadow-card: 0 1px 2px rgba(23, 28, 38, .05), 0 10px 28px -22px rgba(23, 28, 38, .28);
    --hr-shadow-pop: 0 12px 32px -8px rgba(23, 28, 38, .22);
}

[data-bs-theme="dark"] {
    --hr-indigo-soft: rgba(120, 138, 255, .12);
    --hr-canvas: #0f131b;
    --hr-panel: #171c26;
    --hr-line: #2a3140;
    --bs-body-bg: #171c26;
    --bs-body-color: #d5dbe4;
    --bs-secondary-color: #94a0af;
    --bs-border-color: #2a3140;
    --bs-tertiary-bg: #1d2330;
    --bs-secondary-bg: #222937;
    --bs-primary-bg-subtle: rgba(120, 138, 255, .14);
    --bs-link-color: #8b9bf4;
    --bs-link-color-rgb: 139, 155, 244;
    --bs-link-hover-color: #a7b3f7;
    --bs-link-hover-color-rgb: 167, 179, 247;
    --hr-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -22px rgba(0, 0, 0, .55);
}

body {
    font-family: var(--bs-body-font-family);
    font-size: .92rem;
    letter-spacing: .004em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .modal-title {
    font-family: "Manrope", "Inter", system-ui, sans-serif;
    color: var(--hr-ink);
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] .modal-title { color: #eef1f6; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { letter-spacing: -.02em; }
.app-content h1 { font-weight: 800; font-size: 1.35rem; }
.app-content h1 + p.text-secondary, .app-content h1 + .text-secondary { margin-top: .15rem; }

/* ---------- Buttons ---------- */
.btn {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: .6rem;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, color .15s ease, transform .15s ease;
}
.btn-sm { border-radius: .5rem; }
.btn-lg { border-radius: .7rem; }
.btn-primary {
    --bs-btn-bg: var(--hr-indigo);
    --bs-btn-border-color: var(--hr-indigo);
    --bs-btn-hover-bg: var(--hr-indigo-deep);
    --bs-btn-hover-border-color: var(--hr-indigo-deep);
    --bs-btn-active-bg: var(--hr-indigo-ink);
    --bs-btn-active-border-color: var(--hr-indigo-ink);
    --bs-btn-disabled-bg: var(--hr-indigo);
    --bs-btn-disabled-border-color: var(--hr-indigo);
    --bs-btn-focus-shadow-rgb: 64, 86, 216;
    box-shadow: 0 1px 2px rgba(64, 86, 216, .35);
}
.btn-primary:hover { box-shadow: 0 4px 12px -2px rgba(64, 86, 216, .45); }
.btn-outline-primary {
    --bs-btn-color: var(--hr-indigo);
    --bs-btn-border-color: #b4befb;
    --bs-btn-hover-bg: var(--hr-indigo);
    --bs-btn-hover-border-color: var(--hr-indigo);
    --bs-btn-active-bg: var(--hr-indigo-deep);
    --bs-btn-active-border-color: var(--hr-indigo-deep);
    --bs-btn-focus-shadow-rgb: 64, 86, 216;
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #a7b3f7;
    --bs-btn-border-color: #3d478c;
}
.btn-link { font-weight: 500; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* ---------- App shell ---------- */
.app-wrapper { display: flex; min-height: 100vh; }

.app-sidebar {
    width: 252px;
    flex-shrink: 0;
    background: var(--hr-panel);
    color: #333333;
    border-right: 1px solid var(--hr-line);
    display: flex;
    flex-direction: column;
}
[data-bs-theme="dark"] .app-sidebar { color: #cfd6e0; }
@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; height: 100vh; overflow: hidden; }
}
@media (max-width: 991.98px) {
    .app-sidebar { height: 100%; }
    .app-sidebar.offcanvas-lg { --bs-offcanvas-width: 292px; }
}
.app-sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--hr-panel); --bs-offcanvas-color: #333333; }
[data-bs-theme="dark"] .app-sidebar.offcanvas-lg { --bs-offcanvas-color: #cfd6e0; }

.sidebar-brand {
    height: 62px;
    border-bottom: 1px solid var(--hr-line);
    color: var(--hr-ink);
    flex-shrink: 0;
}
[data-bs-theme="dark"] .sidebar-brand { color: #eef1f6; }
.sidebar-brand .fw-bold { font-family: "Manrope", sans-serif; letter-spacing: -.015em; }
/* Brand tile: the one gradient locus (shared with auth) */
.sidebar-brand .auth-logo-sm {
    background: linear-gradient(135deg, var(--hr-indigo) 0%, var(--hr-indigo-ink) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 6px rgba(64, 86, 216, .35);
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.sidebar-heading {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 700;
    color: #9aa3b2;
    padding: 1.2rem .9rem .4rem;
    user-select: none;
}
[data-bs-theme="dark"] .sidebar-heading { color: #6d7889; }

/* Pill navigation — signature: brass jewel on the active pill */
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .52rem .9rem .52rem 1.05rem;
    margin: .14rem .35rem;
    border-radius: .65rem;
    color: #333333;
    text-decoration: none;
    font-size: .895rem;
    font-weight: 500;
    transition: background-color .13s ease, color .13s ease;
}
[data-bs-theme="dark"] .sidebar-link { color: #cfd6e0; }
.sidebar-link i {
    font-size: 1.02rem;
    width: 1.25rem;
    text-align: center;
    color: #5b6672;
    transition: color .13s ease;
}
[data-bs-theme="dark"] .sidebar-link i { color: #8b96a5; }
.sidebar-link:hover { background: #f1f3f9; color: #14181f; }
.sidebar-link:hover i { color: #333f4d; }
[data-bs-theme="dark"] .sidebar-link:hover { background: #202836; color: #eef1f6; }
[data-bs-theme="dark"] .sidebar-link:hover i { color: #cfd6e0; }
.sidebar-link.active {
    background: var(--hr-indigo-soft);
    color: var(--hr-indigo-ink);
    font-weight: 600;
}
.sidebar-link.active i { color: var(--hr-indigo); }
[data-bs-theme="dark"] .sidebar-link.active { color: #b9c3fa; }
[data-bs-theme="dark"] .sidebar-link.active i { color: #8b9bf4; }
.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: .38rem;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--hr-brass);
    box-shadow: 0 0 0 3px rgba(192, 138, 45, .18);
}

.app-sidebar::-webkit-scrollbar, .sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #d5dae3; border-radius: 4px; }
[data-bs-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb { background: #37404f; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .btn-close { filter: none; }
[data-bs-theme="dark"] .app-sidebar .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
    height: 62px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--hr-panel);
    background: color-mix(in srgb, var(--hr-panel) 90%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hr-line);
}
.app-topbar .btn-link { color: var(--bs-body-color); border-radius: .55rem; }
.app-topbar .btn-link:hover { background: var(--bs-tertiary-bg); text-decoration: none; }
.app-topbar .btn-sm { border-radius: 50rem; padding-left: .8rem; padding-right: .8rem; }

.app-content { flex: 1; background: var(--hr-canvas); }
@media (max-width: 991.98px) {
    .app-topbar { padding: 0 .75rem; }
    .app-content > .p-4, .app-content .container-fluid { padding-left: .9rem !important; padding-right: .9rem !important; }
    .sidebar-link { padding-top: .68rem; padding-bottom: .68rem; font-size: .95rem; }
}

/* ---------- Cards ---------- */
.card {
    --bs-card-border-color: var(--hr-line);
    background: var(--hr-panel);
    border: 1px solid var(--hr-line) !important;
    border-radius: .9rem;
    box-shadow: var(--hr-shadow-card);
}
.card.shadow-sm { box-shadow: var(--hr-shadow-card) !important; }
.card-header {
    background: transparent;
    border-bottom-color: var(--hr-line);
    font-weight: 700;
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.card .card-body.border-bottom { border-color: var(--hr-line) !important; }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: rgba(64, 86, 216, .045); }
[data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(139, 155, 244, .07); }
.table > thead th {
    font-size: .69rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    font-weight: 700;
    white-space: nowrap;
    border-bottom-width: 1px;
}
.table td, .table th { font-variant-numeric: tabular-nums; }
.table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; }
.card .table { margin-bottom: 0; }
.card .table > thead th { background: #f7f8fc; border-top: 0; }
[data-bs-theme="dark"] .card .table > thead th { background: #1d2330; }
.card .table > :not(caption) > * > *:first-child { padding-left: 1.05rem; }
.card .table > :not(caption) > * > *:last-child { padding-right: 1.05rem; }

/* ---------- Badges: modern chips ---------- */
.badge {
    font-weight: 600;
    letter-spacing: .015em;
    border-radius: 50rem;
    padding: .34em .68em;
}
.badge.border { border-color: rgba(20, 26, 40, .1) !important; }
[data-bs-theme="dark"] .badge.border { border-color: rgba(255, 255, 255, .12) !important; }
.badge.font-monospace { border-radius: .45rem; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-color: #dce0ea;
    border-radius: .55rem;
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: #333d4c; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--hr-indigo);
    box-shadow: 0 0 0 .22rem rgba(64, 86, 216, .16);
}
.form-check-input:checked { background-color: var(--hr-indigo); border-color: var(--hr-indigo); }
.form-label { font-weight: 600; font-size: .8rem; color: var(--bs-body-color); }
.form-control-sm, .form-select-sm { border-radius: .5rem; }

/* ---------- Links / pagination / dropdowns / modals / toasts ---------- */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .sidebar-link:hover, .page-link:hover, .dropdown-item:hover,
.nav-link:hover, .navbar-brand:hover, .badge:hover { text-decoration: none; }

.page-link { color: var(--hr-indigo); border-radius: .45rem; margin: 0 .12rem; border-color: transparent; }
.page-link:hover { background: var(--hr-indigo-soft); }
.active > .page-link, .page-link.active {
    background-color: var(--hr-indigo);
    border-color: var(--hr-indigo);
    box-shadow: 0 1px 2px rgba(64, 86, 216, .4);
}
.pagination { --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(64, 86, 216, .16); }

.dropdown-menu {
    border-color: var(--hr-line);
    box-shadow: var(--hr-shadow-pop);
    border-radius: .7rem;
    padding: .35rem;
}
.dropdown-item { border-radius: .45rem; padding: .42rem .7rem; }
.dropdown-item:active { background: var(--hr-indigo); }

.modal-content {
    border-radius: 1rem;
    border: 1px solid var(--hr-line);
    box-shadow: 0 24px 64px -12px rgba(10, 15, 25, .35);
}
.modal-header { padding-top: .95rem; padding-bottom: .95rem; }
.modal-title { font-weight: 700; }
.nav-tabs .nav-link { border-radius: .55rem .55rem 0 0; font-weight: 500; }
.nav-tabs .nav-link.active { font-weight: 700; }
.toast { border-radius: .7rem; box-shadow: var(--hr-shadow-pop); border-color: var(--hr-line); }
.alert { border-radius: .7rem; }

/* ---------- Small components ---------- */
.avatar-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hr-indigo-soft);
    color: var(--hr-indigo);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
}
[data-bs-theme="dark"] .avatar-circle { color: #a7b3f7; }

.stat-icon {
    width: 46px; height: 46px;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.card .display-6, .card .fs-3, .card .fs-4 { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.text-bg-primary-subtle  { background: var(--bs-primary-bg-subtle); }
.text-bg-success-subtle  { background: var(--bs-success-bg-subtle); }
.text-bg-info-subtle     { background: var(--bs-info-bg-subtle); }
.text-bg-warning-subtle  { background: var(--bs-warning-bg-subtle); }

/* ---------- Auth pages ---------- */
.auth-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 500px at 88% -12%, rgba(192, 138, 45, .12), transparent 58%),
        radial-gradient(1000px 560px at -12% 112%, rgba(64, 86, 216, .2), transparent 55%),
        #171c29;
}
.auth-card-wrapper { width: 100%; max-width: 402px; }
.auth-card-wrapper > .text-center { color: #f2f4f8; }
.auth-card-wrapper > .text-center .text-secondary { color: #97a2b4 !important; }
.auth-card {
    border-radius: 1.05rem;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: 0 24px 70px -18px rgba(0, 0, 0, .55);
}

.auth-logo {
    width: 54px; height: 54px;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--hr-indigo) 0%, var(--hr-indigo-ink) 100%);
    color: #fff;
    font-size: 1.55rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 18px -4px rgba(64, 86, 216, .55);
}
.auth-logo-sm { width: 34px; height: 34px; border-radius: .6rem; font-size: 1rem; }

/* ---------- Accessibility / motion ---------- */
:focus-visible { outline: 2px solid var(--hr-indigo); outline-offset: 2px; }
.sidebar-link:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===================== Employee profile ===================== */
.profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    background: var(--hr-indigo-soft);
    color: var(--hr-indigo);
    font-weight: 700;
    letter-spacing: .03em;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .profile-avatar { color: #a7b3f7; }
.profile-dl dt { font-weight: 500; color: var(--bs-secondary-color); }
.profile-dl dd { margin-bottom: .5rem; }
.profile-dl dd:last-child { margin-bottom: 0; }

/* ===================== Payslip printing ===================== */
@media print {
    .app-sidebar, .app-topbar, .d-print-none, #toastStack { display: none !important; }
    .app-main, .app-content { margin: 0 !important; padding: 0 !important; }
    .payslip-sheet { box-shadow: none !important; border: 1px solid #ccc !important; }
    body { background: #fff !important; }
}

/* ===================== Org chart ===================== */
.org-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 1.75rem;
    border-left: 2px solid var(--hr-line);
}
.org-tree > ul { border-left: 0; padding-left: 0; }
.org-tree li { position: relative; padding: .25rem 0; }
.org-tree ul li::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: 1.35rem;
    width: 1.4rem;
    border-top: 2px solid var(--hr-line);
}
.org-node {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid var(--hr-line);
    border-radius: .7rem;
    padding: .42rem .8rem;
    background: var(--hr-panel);
    box-shadow: var(--hr-shadow-card);
}
.org-node .org-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--hr-indigo-soft);
    color: var(--hr-indigo);
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .org-node .org-avatar { color: #a7b3f7; }