/* ==========================================================================
   WBC-HRIS Theme Layer
   Modern reskin over AdminLTE 3 + Bootstrap 4.
   Loaded LAST in the ~/Content/css bundle so these rules win.
   Palette: refined West Bay gold + deep teal-slate.
   ========================================================================== */

:root {
    --hris-gold: #d4a017;
    --hris-gold-600: #c2900f;
    --hris-gold-hover: #e9b838;
    --hris-gold-soft: rgba(212, 160, 23, .12);

    --hris-teal: #0e3d4a;
    --hris-teal-700: #0b2f39;
    --hris-teal-500: #14586b;

    --hris-ink: #1f2d33;
    --hris-muted: #6b7c85;
    --hris-surface: #f4f6f8;
    --hris-card: #ffffff;
    --hris-border: #e5e9ec;

    --hris-info: #17a2b8;
    --hris-success: #2fa36b;
    --hris-warning: #e0a800;
    --hris-danger: #d9534f;

    --hris-radius: .65rem;
    --hris-shadow: 0 1px 3px rgba(16, 42, 50, .08), 0 1px 2px rgba(16, 42, 50, .06);
    --hris-shadow-lg: 0 6px 18px rgba(16, 42, 50, .12);
}

/* ---------- Base ---------- */
body,
.wrapper {
    background-color: var(--hris-surface);
    color: var(--hris-ink);
}

body {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--hris-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

a {
    color: var(--hris-teal-500);
}

a:hover {
    color: var(--hris-teal);
}

/* ---------- Navbar / topbar ---------- */
.main-header.navbar {
    background: var(--hris-card);
    border-bottom: 1px solid var(--hris-border);
    box-shadow: var(--hris-shadow);
}

.main-header.navbar-yellow,
.main-header.navbar-blue {
    background: var(--hris-card) !important;
}

.main-header .nav-link {
    color: var(--hris-ink) !important;
}

.main-header .nav-link:hover {
    color: var(--hris-gold-600) !important;
}

.navbar-badge {
    background: var(--hris-gold);
    color: #3a2c00;
}

/* Top brand accent strip */
.main-header.navbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hris-gold), var(--hris-gold-hover));
}

/* ---------- Sidebar ---------- */
.main-sidebar,
.main-sidebar.sidebar-dark-cyan {
    background: linear-gradient(180deg, var(--hris-teal) 0%, var(--hris-teal-700) 100%);
    box-shadow: 2px 0 8px rgba(11, 47, 57, .18);
}

.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .12);
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.brand-link .brand-image {
    box-shadow: 0 0 0 2px var(--hris-gold);
    background: #fff;
}

.brand-link .brand-text {
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
}

/* User panel */
.sidebar .user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar .user-panel .image img {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}

.sidebar .user-panel .info a,
.sidebar .user-panel .info {
    color: #e8eef0;
    font-weight: 600;
}

/* Section headers inside the menu */
.nav-sidebar .nav-header {
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .09em;
    font-weight: 700;
    padding: .9rem 1rem .35rem;
}

/* Nav links */
.nav-sidebar .nav-link {
    color: #cfd9dd;
    border-radius: .4rem;
    margin: .12rem .5rem;
    transition: background .15s ease, color .15s ease;
}

.nav-sidebar .nav-link .nav-icon {
    color: var(--hris-gold-hover);
    width: 1.4rem;
}

.nav-sidebar > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

/* Active + open parent states */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-item > .nav-link.active {
    background: var(--hris-gold);
    color: #3a2c00 !important;
    box-shadow: 0 2px 6px rgba(212, 160, 23, .35);
}

.nav-sidebar .nav-link.active .nav-icon {
    color: #3a2c00;
}

.nav-sidebar .menu-open > .nav-link {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

/* Treeview children */
.nav-treeview .nav-link {
    color: #b6c4c9;
    font-size: .9rem;
}

.nav-treeview .nav-link:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.nav-treeview .nav-link .nav-icon {
    color: rgba(233, 184, 56, .6);
    font-size: .72rem;
}

.nav-treeview .nav-link.active {
    background: var(--hris-gold-soft);
    color: #fff !important;
    border-left: 3px solid var(--hris-gold);
    border-radius: 0 .4rem .4rem 0;
}

/* ---------- Content watermark tone-down ---------- */
.content-wrapper > img.position-absolute {
    opacity: .04 !important;
    max-width: 380px !important;
    filter: grayscale(1);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--hris-border);
    border-radius: var(--hris-radius);
    box-shadow: var(--hris-shadow);
    border-top: none;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hris-border);
    padding: .9rem 1.1rem;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--hris-ink);
}

.card-title a {
    color: inherit;
}

.card-footer {
    background: #fbfcfd;
    border-top: 1px solid var(--hris-border);
}

/* ---------- Stat small-boxes ---------- */
.small-box {
    border-radius: var(--hris-radius);
    box-shadow: var(--hris-shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.small-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--hris-shadow-lg);
}

.small-box > .inner {
    padding: 1.1rem 1.2rem;
}

.small-box h3 {
    font-weight: 700;
    font-size: 2.2rem;
}

.small-box .icon > i {
    opacity: .28;
    font-size: 4.5rem;
    top: 10px;
}

.small-box.bg-info {
    background: linear-gradient(135deg, #17a2b8, #128294) !important;
}

.small-box.bg-success {
    background: linear-gradient(135deg, #2fa36b, #227a4f) !important;
}

.small-box.bg-warning {
    background: linear-gradient(135deg, #e6b52c, #c99310) !important;
    color: #3a2c00 !important;
}

.small-box.bg-warning h3,
.small-box.bg-warning p {
    color: #3a2c00 !important;
}

.small-box.bg-danger {
    background: linear-gradient(135deg, #e05a56, #c0403c) !important;
}

.small-box-footer {
    background: rgba(0, 0, 0, .12);
}

/* ---------- Tables ---------- */
.table {
    color: var(--hris-ink);
}

.table thead th {
    background: #f0f3f5;
    color: var(--hris-muted);
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .05em;
    font-weight: 700;
    border-bottom: 2px solid var(--hris-border);
    border-top: none;
    padding: .7rem .85rem;
}

.table td {
    padding: .65rem .85rem;
    vertical-align: middle;
    border-top: 1px solid var(--hris-border);
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
    background: var(--hris-gold-soft);
}

/* DataTables wrapper polish */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--hris-border);
    border-radius: .4rem;
    padding: .25rem .5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--hris-gold) !important;
    border-color: var(--hris-gold) !important;
    color: #3a2c00 !important;
    border-radius: .35rem;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: .45rem;
    font-weight: 600;
}

.btn-primary {
    background: var(--hris-gold);
    border-color: var(--hris-gold);
    color: #3a2c00;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--hris-gold-hover);
    border-color: var(--hris-gold-hover);
    color: #3a2c00;
    box-shadow: 0 0 0 .2rem rgba(212, 160, 23, .35);
}

.btn-info {
    background: var(--hris-teal-500);
    border-color: var(--hris-teal-500);
}

.btn-info:hover,
.btn-info:focus {
    background: var(--hris-teal);
    border-color: var(--hris-teal);
    box-shadow: 0 0 0 .2rem rgba(14, 61, 74, .3);
}

.btn-outline-secondary {
    border-color: var(--hris-border);
    color: var(--hris-muted);
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    padding: .35em .6em;
    border-radius: .35rem;
}

/* ---------- todo-list (dashboard rosters / reminders) ---------- */
.todo-list > li {
    border-radius: .45rem;
    border: 1px solid var(--hris-border);
    margin-bottom: .4rem;
    background: #fff;
    padding: .55rem .75rem;
}

.todo-list > li:hover {
    background: var(--hris-gold-soft);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.breadcrumb-item.active {
    color: var(--hris-gold-600);
}

/* ---------- Forms ---------- */
.form-control:focus,
.custom-select:focus {
    border-color: var(--hris-gold);
    box-shadow: 0 0 0 .2rem rgba(212, 160, 23, .25);
}

label {
    font-weight: 600;
    color: var(--hris-ink);
}

/* ---------- Footer ---------- */
.main-footer {
    background: var(--hris-card);
    border-top: 1px solid var(--hris-border);
    color: var(--hris-muted);
}

/* ---------- Page header helper ---------- */
.content-header .h1,
.content-header h1 {
    font-size: 1.6rem;
}

/* ==========================================================================
   Login page
   ========================================================================== */
body.login-page {
    background: linear-gradient(135deg, var(--hris-teal) 0%, var(--hris-teal-700) 100%);
    min-height: 100vh;
}

.hris-login-box {
    width: 400px;
    max-width: 92%;
    margin: 6vh auto;
}

.hris-login-logo {
    text-align: center;
    margin-bottom: 1rem;
}

.hris-login-logo img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #fff;
    padding: 6px;
    box-shadow: 0 0 0 3px var(--hris-gold);
}

.hris-login-logo .brand {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .04em;
    margin-top: .6rem;
}

.hris-login-logo .sub {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: .85rem;
}

.hris-login-card {
    background: #fff;
    border-radius: var(--hris-radius);
    box-shadow: var(--hris-shadow-lg);
    padding: 1.75rem 1.75rem 1.4rem;
}

.hris-login-card h4 {
    font-weight: 600;
    margin-bottom: 1.1rem;
}

.hris-login-card .btn-block {
    padding: .55rem;
}