/*
 * User Payroll - "Indigo" theme layer.
 * Loaded after style.css; overrides colours and polish only, no layout changes.
 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
@import url("../icons/remixicon/fonts/remixicon.css");

:root,
[data-bs-theme=light] {
    --app-primary: #6c5ce7;
    --app-primary-rgb: 108, 92, 231;
    --app-primary-dark: #5443d6;
    --app-accent: #00b8d9;
    --app-gradient: linear-gradient(135deg, #6c5ce7 0%, #8e7cf8 55%, #00b8d9 130%);
    --app-sidebar: linear-gradient(180deg, #1b1a3a 0%, #24215a 55%, #2d2275 100%);
    --app-sidebar-solid: #1f1d45;
    --app-page-bg: #f3f4fb;
    --app-border: #e8e9f3;
    --app-shadow: 0 1px 2px rgba(30, 27, 75, .04), 0 8px 24px -12px rgba(30, 27, 75, .12);
    --app-shadow-hover: 0 2px 4px rgba(30, 27, 75, .05), 0 16px 32px -16px rgba(30, 27, 75, .22);
    --app-radius: 14px;

    --bs-primary: #6c5ce7;
    --bs-primary-rgb: 108, 92, 231;
    --bs-success: #12b886;
    --bs-success-rgb: 18, 184, 134;
    --bs-info: #00b8d9;
    --bs-info-rgb: 0, 184, 217;
    --bs-warning: #f59f00;
    --bs-warning-rgb: 245, 159, 0;
    --bs-danger: #f0506e;
    --bs-danger-rgb: 240, 80, 110;
    --bs-secondary-bg: var(--app-page-bg);
    --bs-border-color: var(--app-border);
    --bs-body-color: #4b5070;
    --bs-heading-color: #1e1b4b;
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: 108, 92, 231;
    --bs-link-hover-color: var(--app-primary-dark);
    --bs-body-font-family: "Plus Jakarta Sans", "poppins", sans-serif;
    --bs-primary-bg-subtle: #efedfd;
    --bs-primary-text-emphasis: #4636c4;
}

html { background: var(--app-page-bg); }
body,
body[data-typography] {
    min-height: 100vh;
    background-attachment: fixed !important;
    --bs-body-font-family: "Plus Jakarta Sans", "poppins", sans-serif;
    font-family: var(--bs-body-font-family);
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(108, 92, 231, .08), transparent 60%),
        radial-gradient(900px 400px at -10% 110%, rgba(0, 184, 217, .06), transparent 60%),
        var(--app-page-bg) fixed;
    color: var(--bs-body-color);
}

::selection { background: rgba(var(--app-primary-rgb), .18); }

/* ---------- Brand / nav header ---------- */
body .nav-header {
    background: var(--app-sidebar-solid);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav-header .brand-logo .logo-abbr {
    background: var(--app-gradient) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(var(--app-primary-rgb), .8);
    letter-spacing: .02em;
}
body .nav-header .brand-logo .brand-title {
    color: #fff !important;
    letter-spacing: .08em;
    font-weight: 800;
}
body .nav-header .nav-control { background: transparent; }
.nav-header .hamburger .line { background: var(--app-primary) !important; height: 2px; border-radius: 2px; }
@media only screen and (max-width: 47.9375rem) {
    body .nav-header { background: transparent; border-bottom: 0; }
}

/* ---------- Top header ---------- */
body .header {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 1px 0 rgba(30, 27, 75, .02);
}
body .header .header-left .dashboard_bar {
    color: var(--bs-heading-color) !important;
    font-weight: 700;
    letter-spacing: -.01em;
}
body .header .header-right .header-info h6 { color: var(--bs-heading-color) !important; font-weight: 600; }
body .header .header-right .header-info small { color: #8a8fb0 !important; }
.header .dz-fullscreen {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--app-primary-rgb), .08);
    transition: background .2s ease;
}
.header .dz-fullscreen:hover { background: rgba(var(--app-primary-rgb), .16); }
.header .dz-fullscreen svg { stroke: var(--app-primary) !important; }
body .header .header-right .profile-media { width: 38px; height: 38px; overflow: visible; }
.header .avatar-md, .dropdown-menu .avatar-sm {
    display: inline-grid;
    place-items: center;
    width: 38px;
    min-width: 0;
    height: 38px;
    font-size: .95rem;
    line-height: 1;
    border: 0;
}
.dropdown-menu .avatar-sm { width: 34px; height: 34px; font-size: .85rem; }
.avatar.avatar-primary {
    background: var(--app-gradient) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(var(--app-primary-rgb), .25);
}
.dropdown-menu {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: 0 20px 40px -16px rgba(30, 27, 75, .25);
    padding: .5rem;
}
.dropdown-item { border-radius: 10px; padding: .55rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--app-primary-rgb), .08); }

/* ---------- Sidebar ---------- */
body .deznav {
    background: var(--app-sidebar);
    border-right: 0;
    box-shadow: 8px 0 30px -18px rgba(30, 27, 75, .6);
}
.deznav .metismenu .menu-title {
    color: rgba(201, 198, 245, .55) !important;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
}
.deznav .metismenu > li { padding: 1px 12px; }
body .deznav .metismenu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 12px;
    color: rgba(226, 224, 255, .72) !important;
    font-weight: 500;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.deznav .metismenu > li > a .menu-icon {
    display: grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: .6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    transition: background .2s ease;
}
.deznav .metismenu > li > a .menu-icon svg { margin: 0 !important; width: 18px; height: 18px; }
body .deznav .metismenu > li > a .menu-icon svg path { stroke: rgba(226, 224, 255, .75); }
body .deznav .metismenu > li:hover > a {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
}
body .deznav .metismenu > li:hover > a .menu-icon { background: rgba(255, 255, 255, .12); }
body .deznav .metismenu > li:hover > a .menu-icon svg path { stroke: #fff; }
body .deznav .metismenu > li.mm-active > a {
    color: #fff !important;
    font-weight: 600;
    background: linear-gradient(90deg, rgba(var(--app-primary-rgb), .55), rgba(var(--app-primary-rgb), .12));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
body .deznav .metismenu > li.mm-active > a .menu-icon {
    background: var(--app-gradient);
    box-shadow: 0 6px 14px -6px rgba(var(--app-primary-rgb), .9);
}
body .deznav .metismenu > li.mm-active > a .menu-icon svg path { stroke: #fff; }
body .deznav .metismenu > li.mm-active > a:after { display: none; }
body .deznav .metismenu > li.mm-active > a:before {
    content: "";
    position: absolute;
    left: -12px;
    top: 22%;
    bottom: 22%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--app-accent);
    box-shadow: 0 0 12px var(--app-accent);
}
.deznav .deznav-footer p { color: rgba(201, 198, 245, .45); }
.menu-toggle .deznav .metismenu > li > a .menu-icon { margin-right: 0; }

/* ---------- Page title bar ---------- */
body .page-title {
    background: transparent;
    border-bottom: 0;
    padding-top: 18px;
    padding-bottom: 6px;
}
.page-title h1, .page-title .h1 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--bs-heading-color);
    letter-spacing: -.02em;
}
.page-title .breadcrumb li a { color: #8a8fb0; }
.page-title .breadcrumb li.active {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), .1);
    color: var(--app-primary);
    font-weight: 600;
    font-size: .8rem;
}

/* ---------- Cards ---------- */
.card {
    --bs-card-border-color: var(--app-border);
    --bs-card-border-radius: var(--app-radius);
    --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    transition: box-shadow .25s ease;
}
.card:hover { box-shadow: var(--app-shadow-hover); }
.card > .card-header {
    position: relative;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    background: linear-gradient(180deg, #fbfbff, #fff);
    border-bottom: 1px solid var(--app-border);
}
.card > .card-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--app-radius) var(--app-radius) 0 0;
    background: var(--app-gradient);
    opacity: .9;
}
.card .header-title, .card .card-title {
    font-weight: 700;
    color: var(--bs-heading-color);
    letter-spacing: -.01em;
}
.card-footer { background: #fbfbff; border-top: 1px solid var(--app-border); }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.btn:not(:disabled):not(.btn-link):hover { transform: translateY(-1px); }
.btn:not(:disabled):not(.btn-link):active { transform: translateY(0); }
.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--app-primary-dark);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--app-primary-dark);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--app-primary);
    background-image: linear-gradient(135deg, #6c5ce7 0%, #8b7bf7 100%);
    box-shadow: 0 8px 18px -10px rgba(var(--app-primary-rgb), .9);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 22px -10px rgba(var(--app-primary-rgb), .95); }
.btn-success {
    --bs-btn-bg: #12b886;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #0ca678;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #099268;
    background-image: linear-gradient(135deg, #12b886 0%, #20c9a0 100%);
    box-shadow: 0 8px 18px -10px rgba(18, 184, 134, .9);
    color: #fff;
}
.btn-warning {
    --bs-btn-color: #7a4a00;
    --bs-btn-bg: #fff4dc;
    --bs-btn-border-color: #ffe3a6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f59f00;
    --bs-btn-hover-border-color: #f59f00;
}
.btn-danger {
    --bs-btn-color: #c92a4a;
    --bs-btn-bg: #fde8ec;
    --bs-btn-border-color: #fbd0d9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f0506e;
    --bs-btn-hover-border-color: #f0506e;
}
.btn-secondary, .btn-light {
    --bs-btn-color: #4b5070;
    --bs-btn-bg: #eef0f8;
    --bs-btn-border-color: #e3e5f2;
    --bs-btn-hover-color: #1e1b4b;
    --bs-btn-hover-bg: #e3e5f2;
    --bs-btn-hover-border-color: #d6d9ec;
}

/* ---------- Forms ---------- */
.form-control, .form-select,
.select2-container--default .select2-selection--single {
    border-color: #e1e3f0 !important;
    border-radius: 10px !important;
    background-color: #fcfcff;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control:focus, .form-select:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(var(--app-primary-rgb), .6) !important;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb), .12) !important;
}
.form-label { font-weight: 600; font-size: .82rem; color: #5b6082; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }

/* ---------- Tables ---------- */
.table {
    --bs-table-striped-bg: #fafaff;
    --bs-table-hover-bg: rgba(var(--app-primary-rgb), .05);
}
.table > thead > tr > th {
    background: #f6f5ff;
    color: #6a6f94;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--app-border);
    white-space: nowrap;
}
.table > thead > tr > th a { color: inherit !important; }
.table > thead > tr > th a:hover { color: var(--app-primary) !important; }
.table > tbody > tr { transition: background .15s ease; }
.table > tbody > tr > td { border-color: #f0f1f8; }

/* ---------- Badges & alerts ---------- */
.badge {
    border-radius: 999px;
    padding: .38em .8em;
    font-weight: 600;
    letter-spacing: .02em;
}
.badge.bg-success { background: #dcf7ee !important; color: #0b8a63 !important; }
.badge.bg-secondary { background: #eceef6 !important; color: #6a6f94 !important; }
.badge.bg-danger { background: #fde8ec !important; color: #c92a4a !important; }
.badge.bg-warning { background: #fff4dc !important; color: #a86a00 !important; }
.badge.bg-info { background: #dff7fc !important; color: #00809a !important; }
.badge.bg-primary { background: #efedfd !important; color: #4636c4 !important; }
.alert {
    border: 0;
    border-left: 4px solid currentColor;
    border-radius: 12px;
    box-shadow: var(--app-shadow);
}
.alert-success { background: #e7faf3; color: #0b8a63; }
.alert-danger { background: #fdecef; color: #c92a4a; }
.alert-warning { background: #fff6e3; color: #a86a00; }
.alert-info { background: #e3f9fd; color: #00809a; }

/* ---------- Pagination ---------- */
.pagination { gap: 4px; }
.pagination .page-link {
    border: 0;
    border-radius: 8px !important;
    color: #5b6082;
    background: #f1f2f9;
    min-width: 32px;
    text-align: center;
}
.pagination .page-link:hover { background: rgba(var(--app-primary-rgb), .12); color: var(--app-primary); }
.pagination .page-item.active .page-link {
    background: var(--app-gradient);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(var(--app-primary-rgb), .9);
}
.pagination .page-item.disabled .page-link { background: #f6f7fb; color: #b6b9cf; }

/* ---------- DataTables ---------- */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--app-gradient) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 8px;
}

/* ---------- Misc ---------- */
.text-primary { color: var(--app-primary) !important; }
a.text-primary:hover { color: var(--app-primary-dark) !important; }
.bg-primary { background-color: var(--app-primary) !important; }
.footer { background: transparent; }
.footer .copyright p { color: #9a9ec0; font-size: .8rem; }
#preloader .lds-ripple div { border-color: var(--app-primary) !important; }
.content-body { background: transparent; }

.content-body .container-fluid > .card,
.content-body .container-fluid > .row,
.content-body .container-fluid > .collapse {
    animation: app-rise .45s ease both;
}
.content-body .container-fluid > :nth-child(2) { animation-delay: .05s; }
.content-body .container-fluid > :nth-child(3) { animation-delay: .1s; }
.content-body .container-fluid > :nth-child(4) { animation-delay: .15s; }
@keyframes app-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .content-body .container-fluid > * { animation: none !important; }
    .btn { transition: none; }
}

::-webkit-scrollbar-thumb { background: rgba(var(--app-primary-rgb), .25); border-radius: 8px; }

/* ---------- Template overrides (style.css forces white text on every coloured .btn) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
.btn > i[class^="ri-"], .btn > i[class*=" ri-"] { font-size: 1.05em; line-height: 1; margin: 0 !important; }
.btn.btn-warning, .btn.btn-warning:not(.btn-link):focus { color: #9a5b00; }
.btn.btn-danger, .btn.btn-danger:not(.btn-link):focus { color: #c92a4a; }
.btn.btn-secondary, .btn.btn-secondary:not(.btn-link):focus,
.btn.btn-light, .btn.btn-light:not(.btn-link):focus { color: #4b5070; }
.btn.btn-info { background-image: linear-gradient(135deg, #00a8c6 0%, #22c3e6 100%); border-color: transparent; color: #fff; }
.btn.btn-warning:not(.btn-link):hover, .btn.btn-danger:not(.btn-link):hover { color: #fff; }
.btn.btn-secondary:not(.btn-link):hover, .btn.btn-light:not(.btn-link):hover { color: #1e1b4b; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .78rem; border-radius: 8px; }
.btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: rgba(var(--app-primary-rgb), .45); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); }

/* Action columns: keep buttons on one line */
.table td.text-end { white-space: nowrap; }
.table td.text-end form.d-inline { display: inline-block !important; margin-left: 4px; }

/* Tighter gap between page title and content */
body .content-body > .container-fluid { padding-top: 16px; }

/* Select2 single select aligned with .form-control */
body .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 !important;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0 36px 0 16px;
    line-height: 42px;
    color: var(--bs-body-color);
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 10px;
    height: 100%;
}
.select2-dropdown { border-color: var(--app-border); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px -16px rgba(30, 27, 75, .25); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--app-primary); }

/* Inline filter forms (search box + select + button in one row) */
form.d-flex > .form-control,
form.d-flex > .form-select { width: auto; flex: 1 1 190px; min-width: 160px; }

/* Outline buttons */
.btn-outline-secondary {
    --bs-btn-color: #4b5070;
    --bs-btn-border-color: #d9dbeb;
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--app-primary);
    --bs-btn-hover-bg: rgba(var(--app-primary-rgb), .08);
    --bs-btn-hover-border-color: rgba(var(--app-primary-rgb), .4);
}
.btn-outline-success {
    --bs-btn-color: #0b8a63;
    --bs-btn-border-color: rgba(18, 184, 134, .45);
    --bs-btn-hover-bg: #12b886;
    --bs-btn-hover-border-color: #12b886;
    --bs-btn-hover-color: #fff;
}

/* Small screens: let card-header toolbars wrap instead of overflowing */
@media (max-width: 767.98px) {
    .card > .card-header.d-flex { flex-wrap: wrap; gap: 12px; }
    .card > .card-header.d-flex > *,
    .card > .card-header .d-flex { flex-wrap: wrap; max-width: 100%; }
    .card > .card-header form.d-flex { width: 100%; }
    .card > .card-header form.d-flex > .form-control,
    .card > .card-header form.d-flex > .form-select { flex: 1 1 100%; }
    body .content-body > .container-fluid { padding-left: 16px; padding-right: 16px; }
}