/* =======================================================================
   ChsHR — Global modern theme overrides (loaded on every page)
   Unifies the app on the navy brand (#15558d) and a clean, professional
   card-based look. Loaded AFTER the base theme CSS so these rules win.
   Only colours / radius / spacing are changed — no layout logic.
   ======================================================================= */

:root {
    --chs-primary: #15558d;
    --chs-primary-dark: #114472;
    --chs-ink: #0f172a;
    --chs-muted: #64748b;
    --chs-border: #eceff5;
    --chs-bg: #f4f6fb;
}

/* ---------- App canvas ---------- */
.page-wrapper { background: var(--chs-bg) !important; }

/* ---------- Sidebar ---------- */
.sidebar,
.sidebar .sidebar-inner { background: #ffffff !important; }
.sidebar { border-right: 1px solid var(--chs-border) !important; }

/* Section labels: MAIN / HR / OPERATIONS ...  (#id prefix beats theme specificity) */
#sidebar-menu ul li.menu-title span {
    text-transform: uppercase; font-size: .68rem; letter-spacing: .06em;
    font-weight: 700; color: #94a3b8 !important;
}
#sidebar-menu ul li.menu-title { margin-top: 14px; }

/* All nav links */
#sidebar-menu ul li a {
    color: #475569 !important; font-weight: 500; font-size: .9rem;
    display: flex; align-items: center; gap: 12px; border-radius: 10px;
    transition: background .12s, color .12s;
}
#sidebar-menu ul li a i {
    color: #64748b !important; font-size: 1.15rem; width: 22px; min-width: 22px; text-align: center;
}
/* kill the theme's orange indicator bars */
#sidebar-menu ul li a::before { background: transparent !important; }

/* Top-level items become rounded pills */
#sidebar-menu .sidebar-vertical > li > a { margin: 2px 12px; padding: 10px 14px; }

/* Hover */
#sidebar-menu ul li a:hover { background: #eef3fa !important; color: var(--chs-primary) !important; }
#sidebar-menu ul li a:hover i { color: var(--chs-primary) !important; }

/* Active — leaf item & submenu child = solid navy */
#sidebar-menu .sidebar-vertical > li.active > a,
#sidebar-menu .sidebar-vertical > li.submenu > ul > li.active > a {
    background: var(--chs-primary) !important; color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(21, 85, 141, .22);
}
#sidebar-menu .sidebar-vertical > li.active > a i,
#sidebar-menu .sidebar-vertical > li.submenu > ul > li.active > a i { color: #ffffff !important; }

/* Active — submenu PARENT (expanded) = soft navy */
#sidebar-menu .sidebar-vertical > li.submenu > a.active {
    background: #eef3fa !important; color: var(--chs-primary) !important; box-shadow: none;
}
#sidebar-menu .sidebar-vertical > li.submenu > a.active i { color: var(--chs-primary) !important; }

/* Nested submenu links */
#sidebar-menu .sidebar-vertical ul ul li a { padding-left: 52px; font-size: .85rem; margin: 1px 12px; }
#sidebar-menu .menu-arrow { border-top-color: currentColor; border-right-color: currentColor; }

/* ---------- Buttons ----------
   The theme scopes its orange under html[data-layout-mode="orange"], and its
   primary CTA class is `.add-btn` (not .btn-primary). We match that
   specificity (html[data-layout-mode] …) so navy wins everywhere. */
html[data-layout-mode] .btn-primary,
html[data-layout-mode] .btn.add-btn,
html[data-layout-mode] .add-btn,
html[data-layout-mode] .submit-btn,
html[data-layout-mode] .btn-appointment,
.btn-primary, .btn.add-btn, .add-btn, .submit-btn {
    background: var(--chs-primary) !important; background-image: none !important;
    border-color: var(--chs-primary) !important; color: #fff !important;
    box-shadow: none !important;
}
html[data-layout-mode] .btn-primary:hover,
html[data-layout-mode] .btn.add-btn:hover,
html[data-layout-mode] .add-btn:hover,
html[data-layout-mode] .submit-btn:hover,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.add-btn:hover, .add-btn:focus, .submit-btn:hover,
.btn-primary.active, .show > .btn-primary.dropdown-toggle {
    background: var(--chs-primary-dark) !important; border-color: var(--chs-primary-dark) !important; color: #fff !important;
}
.btn-outline-primary { color: var(--chs-primary) !important; border-color: var(--chs-primary) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--chs-primary) !important; color: #fff !important; }
.btn { border-radius: 9px; font-weight: 500; }

/* Primary utility colours */
.text-primary { color: var(--chs-primary) !important; }
.bg-primary { background-color: var(--chs-primary) !important; }
a { color: var(--chs-primary); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--chs-border) !important; border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04) !important;
}
.card .card-header {
    background: transparent !important; border-bottom: 1px solid var(--chs-border) !important;
    font-weight: 600;
}
.card .card-footer { background: transparent !important; border-top: 1px solid var(--chs-border) !important; }

/* ---------- Page header / breadcrumb ---------- */
.page-header .page-title,
.page-header h3, .breadcrumb-title { color: var(--chs-ink); font-weight: 700; }
.breadcrumb { background: transparent; margin-bottom: 0; }
.breadcrumb a { color: var(--chs-muted); }
.breadcrumb .breadcrumb-item.active { color: var(--chs-primary); }

/* ---------- Badges (inverse variants used across the app) ---------- */
.badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; }
.bg-inverse-success { background: #e6f7ee !important; color: #15803d !important; }
.bg-inverse-danger  { background: #ffe9ef !important; color: #be123c !important; }
.bg-inverse-warning { background: #fff4e5 !important; color: #b45309 !important; }
.bg-inverse-info    { background: #e6efff !important; color: #1d4ed8 !important; }
.bg-inverse-primary { background: #e6efff !important; color: var(--chs-primary) !important; }

/* ---------- Tables ---------- */
.table > thead > tr > th, .custom-table thead th {
    color: var(--chs-muted); font-weight: 600; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--chs-border);
}
.table > tbody > tr > td { border-color: var(--chs-border); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #fafbfe; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 9px !important; border-color: #e2e8f0 !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--chs-primary) !important;
    box-shadow: 0 0 0 3px rgba(21, 85, 141, .12) !important;
}

/* ---------- "Go Back" button (breadcrumb) ---------- */
.page-header .btn-outline-secondary {
    border-radius: 999px !important; padding: 6px 16px !important;
    border: 1px solid #dbe2ea !important; color: #475569 !important;
    background: #fff !important; font-weight: 600; font-size: .82rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: all .12s;
}
.page-header .btn-outline-secondary i { margin-right: 4px; }
.page-header .btn-outline-secondary:hover,
.page-header .btn-outline-secondary:focus {
    background: var(--chs-primary) !important; border-color: var(--chs-primary) !important;
    color: #fff !important; box-shadow: 0 6px 16px rgba(21, 85, 141, .22);
}

/* ---------- Page loader / reloading colour ---------- */
#loader-wrapper #loader .loader-ellips .loader-ellips__dot:nth-child(1) { background: var(--chs-primary) !important; }
#loader-wrapper #loader .loader-ellips .loader-ellips__dot:nth-child(2) { background: #3b82f6 !important; }
#loader-wrapper #loader .loader-ellips .loader-ellips__dot:nth-child(3) { background: var(--chs-primary) !important; }
#loader-wrapper #loader .loader-ellips .loader-ellips__dot:nth-child(4) { background: var(--chs-primary) !important; }
/* NProgress top bar + spinner */
#nprogress .bar { background: var(--chs-primary) !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--chs-primary), 0 0 5px var(--chs-primary) !important; }
#nprogress .spinner-icon { border-top-color: var(--chs-primary) !important; border-left-color: var(--chs-primary) !important; }

/* ---------- Misc ---------- */
.nav-tabs .nav-link.active { color: var(--chs-primary); border-bottom-color: var(--chs-primary); }
.pagination .page-item.active .page-link { background: var(--chs-primary); border-color: var(--chs-primary); }