/* ============================================================================
   WBC Employee Portal - Redesign theme layer (AdminLTE 3 / Bootstrap 4)
   Additive: load AFTER adminlte.min.css + hris-theme.css. Restyles the shell,
   cards, tables, buttons and forms so every module inherits the new identity.
   Design language: deep teal ink + a disciplined gold accent; Sora/Inter type;
   IBM Plex Mono reserved for clock times, DTR punches and reference numbers.
   ========================================================================== */

:root {
    --wbc-teal-900: #0b2e38;
    --wbc-teal-800: #0e3d4a;
    --wbc-teal-700: #14586b;
    --wbc-teal-600: #128294;
    --wbc-teal-500: #1a9db2;
    --wbc-gold-500: #d4a017;
    --wbc-gold-600: #b6850f;
    --wbc-gold-100: #f7ecc9;
    --wbc-ink: #1f2d33;
    --wbc-muted: #6b7c85;
    --wbc-line: #e4eaed;
    --wbc-bg: #eef2f4;
    --wbc-card: #ffffff;
    --wbc-success: #227a4f;
    --wbc-warn: #b6850f;
    --wbc-danger: #c0403c;
    --wbc-radius: 12px;
    --wbc-radius-sm: 8px;
    --wbc-shadow: 0 1px 2px rgba(14,61,74,.04), 0 6px 20px -12px rgba(14,61,74,.28);
    --wbc-shadow-lg: 0 12px 40px -16px rgba(11,46,56,.45);
    --font-head: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Consolas', monospace;
}

/* ---- Base ---------------------------------------------------------------- */
body,
.wrapper {
    font-family: var(--font-body);
    color: var(--wbc-ink);
}

.content-wrapper {
    background: var(--wbc-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.brand-text {
    font-family: var(--font-head);
    letter-spacing: -.01em;
}

.text-gold { color: var(--wbc-gold-600) !important; }
.mono, .wbc-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

::selection { background: var(--wbc-gold-100); color: var(--wbc-teal-800); }

/* Focus visibility (a11y) */
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--wbc-gold-500);
    outline-offset: 2px;
}

/* ---- Content header ------------------------------------------------------ */
.content-header h1,
.content-wrapper .content-header h1 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    color: var(--wbc-teal-800);
}

.breadcrumb {
    background: transparent;
    font-size: .82rem;
}
.breadcrumb-item.active { color: var(--wbc-muted); }

/* ---- Sidebar (branded teal) --------------------------------------------- */
.main-sidebar,
.main-sidebar.sidebar-dark-cyan,
body.dark-mode .main-sidebar {
    background: linear-gradient(200deg, var(--wbc-teal-800) 0%, var(--wbc-teal-900) 68%, #082530 100%) !important;
    box-shadow: 4px 0 24px -18px rgba(0,0,0,.7);
}

.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(212,160,23,.35) !important;
    padding: .95rem 1rem;
    background: rgba(0,0,0,.12);
}
.main-sidebar .brand-link .brand-image {
    box-shadow: 0 0 0 2px rgba(212,160,23,.6);
    background: #fff;
    opacity: 1;
    margin-left: .1rem;
    max-height: 36px;
}
.main-sidebar .brand-text {
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
    letter-spacing: -.01em;
}

.main-sidebar .user-panel {
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin: 0 .35rem;
}
.main-sidebar .user-panel .info > a,
.main-sidebar .user-panel .info span {
    color: #eaf2f4;
    font-weight: 600;
    font-family: var(--font-head);
    font-size: .92rem;
}
.main-sidebar .user-panel .image img {
    box-shadow: 0 0 0 2px rgba(212,160,23,.55);
}

/* nav headers / section titles inside the sidebar menu */
.main-sidebar .nav-sidebar .nav-header {
    color: var(--wbc-gold-500);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .68rem;
    font-weight: 700;
    padding-top: 1rem;
}

.main-sidebar .nav-sidebar .nav-link {
    color: #c5d6db;
    border-radius: var(--wbc-radius-sm);
    margin: 1px .5rem;
    position: relative;
    transition: background .15s ease, color .15s ease;
}
.main-sidebar .nav-sidebar .nav-link p { font-size: .9rem; }
.main-sidebar .nav-sidebar .nav-link .nav-icon {
    color: #7fa6b0;
    transition: color .15s ease;
}
.main-sidebar .nav-sidebar .nav-link:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}
.main-sidebar .nav-sidebar .nav-link:hover .nav-icon { color: var(--wbc-gold-500); }

.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background: rgba(212,160,23,.14) !important;
    color: #fff !important;
    box-shadow: none;
}
.main-sidebar .nav-sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: -.5rem; top: 18%; bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--wbc-gold-500);
}
.main-sidebar .nav-sidebar .nav-link.active .nav-icon { color: var(--wbc-gold-500) !important; }

/* treeview open state */
.main-sidebar .nav-treeview .nav-link { color: #a9c1c8; }
.main-sidebar .nav-treeview .nav-link:hover { background: rgba(255,255,255,.05); color:#fff; }

/* ---- Top navbar --------------------------------------------------------- */
.main-header.navbar,
.main-header.navbar-blue,
.main-header.navbar-light {
    background: var(--wbc-card) !important;
    border-bottom: 1px solid var(--wbc-line) !important;
    box-shadow: 0 1px 0 rgba(14,61,74,.04);
}
.main-header .nav-link { color: var(--wbc-teal-800) !important; }
.main-header .nav-link:hover { color: var(--wbc-teal-600) !important; }

/* Brand + live clock lockup in the topbar */
.wbc-topbar-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--wbc-teal-800);
    font-size: 1rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.wbc-topbar-brand .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--wbc-gold-500);
    box-shadow: 0 0 0 3px rgba(212,160,23,.18);
}
.wbc-topclock {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--wbc-teal-700);
    font-size: .95rem;
    letter-spacing: .02em;
    padding: .3rem .7rem;
    border: 1px solid var(--wbc-line);
    border-radius: 999px;
    background: #f6f9fa;
}
.wbc-topclock .sep { animation: wbcblink 1s steps(1) infinite; }
@keyframes wbcblink { 50% { opacity: .25; } }
.wbc-topclock .date { color: var(--wbc-muted); font-size: .78rem; margin-right: .5rem; }

/* ---- Cards -------------------------------------------------------------- */
.card {
    border: 1px solid var(--wbc-line);
    border-radius: var(--wbc-radius);
    box-shadow: var(--wbc-shadow);
    /* no overflow:hidden - cards host dropdowns, date-pickers and DataTables menus that must not be clipped */
}
.card > .card-header:first-child {
    border-top-left-radius: calc(var(--wbc-radius) - 1px);
    border-top-right-radius: calc(var(--wbc-radius) - 1px);
}
.card > .card-header {
    border-bottom: 1px solid var(--wbc-line);
    background: var(--wbc-card);
    padding: .85rem 1.1rem;
}
.card > .card-header .card-title {
    font-weight: 600;
    font-size: .98rem;
    color: var(--wbc-teal-800);
}
.card-header .card-title .fas,
.card-header .card-title .far,
.card-header .card-title .fab { color: var(--wbc-gold-600) !important; }

/* Gold hairline accent on the primary cards */
.card.wbc-accent { border-top: 3px solid var(--wbc-gold-500); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    border-radius: var(--wbc-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
}
/* Solid buttons: force white text so the theme's dark ink (#3a2c00) can't bleed through on the color fills. */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus {
    color: #fff !important;
}
.btn-primary {
    background: var(--wbc-teal-800);
    border-color: var(--wbc-teal-800);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--wbc-teal-700);
    border-color: var(--wbc-teal-700);
}
.btn-outline-primary { color: var(--wbc-teal-800) !important; border-color: var(--wbc-teal-800); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--wbc-teal-800); border-color: var(--wbc-teal-800); color: #fff !important; }
.btn-info { background: var(--wbc-teal-600); border-color: var(--wbc-teal-600); }
.btn-info:hover { background: var(--wbc-teal-700); border-color: var(--wbc-teal-700); }
.btn-success { background: var(--wbc-success); border-color: var(--wbc-success); }
.btn-danger { background: var(--wbc-danger); border-color: var(--wbc-danger); }

.btn-gold {
    background: var(--wbc-gold-500);
    border: 1px solid var(--wbc-gold-500);
    color: #3a2c00;
}
.btn-gold:hover, .btn-gold:focus {
    background: var(--wbc-gold-600);
    border-color: var(--wbc-gold-600);
    color: #fff;
}

/* ---- Forms -------------------------------------------------------------- */
.form-control {
    border-radius: var(--wbc-radius-sm);
    border-color: #d5dee1;
}
.form-control:focus {
    border-color: var(--wbc-teal-600);
    box-shadow: 0 0 0 .18rem rgba(18,130,148,.16);
}
label { font-weight: 600; color: #33454c; font-size: .86rem; }

/* ---- Tables ------------------------------------------------------------- */
.table thead th {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--wbc-muted);
    border-top: none;
    border-bottom: 1px solid var(--wbc-line);
    background: #f7fafb;
}
.table td { vertical-align: middle; }
.table.table-striped tbody tr:nth-of-type(odd) { background: #fafcfc; }
.table td.time, .table .wbc-time { font-family: var(--font-mono); color: var(--wbc-teal-700); }

/* ---- Badges / status chips --------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .35em .7em; }
.wbc-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    padding: .2rem .6rem; border-radius: 999px; text-transform: uppercase;
}
.wbc-chip.is-approved { background: #e3f2ea; color: var(--wbc-success); }
.wbc-chip.is-pending  { background: #fdf3d9; color: var(--wbc-gold-600); }
.wbc-chip.is-cancelled { background: #f7e4e3; color: var(--wbc-danger); }
.wbc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Timeline (announcements / birthdays) ------------------------------- */
.timeline > .time-label > span { border-radius: 6px; font-weight: 600; font-family: var(--font-head); }
.timeline > div > .fas, .timeline > div > .far { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--wbc-line); }
.timeline-item { border-radius: var(--wbc-radius-sm); box-shadow: var(--wbc-shadow); border: 1px solid var(--wbc-line); }
.timeline-header { font-family: var(--font-head); font-size: .92rem; }

/* ---- AdminLTE small-box (tamed) ----------------------------------------- */
.small-box { border-radius: var(--wbc-radius); box-shadow: var(--wbc-shadow); }
.small-box > .inner h3 { font-family: var(--font-head); font-weight: 700; }

/* ============================================================================
   Dashboard signature components
   ========================================================================== */

/* Time & Attendance hero */
.wbc-hero {
    position: relative;
    border-radius: var(--wbc-radius);
    background: linear-gradient(120deg, var(--wbc-teal-800) 0%, var(--wbc-teal-700) 55%, var(--wbc-teal-600) 100%);
    color: #eaf4f6;
    padding: 1.4rem 1.6rem;
    overflow: hidden;
    box-shadow: var(--wbc-shadow-lg);
}
.wbc-hero::after { /* faint gold arc, evokes a clock face */
    content: "";
    position: absolute;
    right: -120px; top: -120px;
    width: 320px; height: 320px; border-radius: 50%;
    border: 2px solid rgba(212,160,23,.25);
    box-shadow: inset 0 0 0 18px rgba(212,160,23,.06);
}
.wbc-hero .wbc-hero-hello { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wbc-gold-500); font-weight: 700; }
.wbc-hero .wbc-hero-name { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1.1; }
.wbc-hero .wbc-hero-role { color: #b9d3d9; font-size: .9rem; }
.wbc-hero .wbc-clock {
    font-family: var(--font-mono);
    font-size: 2.6rem;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    letter-spacing: .01em;
    text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.wbc-hero .wbc-clock .sep { color: var(--wbc-gold-500); animation: wbcblink 1s steps(1) infinite; }
.wbc-hero .wbc-clock .ampm { font-size: 1rem; color: #b9d3d9; margin-left: .35rem; letter-spacing: .1em; }
.wbc-hero .wbc-clock-date { font-family: var(--font-mono); color: #cfe3e7; font-size: .82rem; letter-spacing: .04em; margin-top: .25rem; }
.wbc-hero .btn-gold { box-shadow: 0 8px 24px -10px rgba(212,160,23,.7); }

/* Stat strip */
.wbc-stat {
    background: var(--wbc-card);
    border: 1px solid var(--wbc-line);
    border-radius: var(--wbc-radius);
    padding: .95rem 1.05rem;
    box-shadow: var(--wbc-shadow);
    height: 100%;
    position: relative;
}
.wbc-stat::before {
    content: ""; position: absolute; left: 0; top: .95rem; bottom: .95rem; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--wbc-gold-500);
}
.wbc-stat .wbc-stat-label { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 700; color: var(--wbc-muted); }
.wbc-stat .wbc-stat-value { font-family: var(--font-mono); font-weight: 600; font-size: 1.7rem; color: var(--wbc-teal-800); line-height: 1; }
.wbc-stat .wbc-stat-value.sm { font-size: 1.15rem; }
.wbc-stat .wbc-stat-icon { color: var(--wbc-teal-600); opacity: .5; font-size: 1.35rem; }

/* Quick actions grid */
.wbc-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}
.wbc-quick a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
    text-align: center;
    padding: .95rem .5rem;
    border: 1px solid var(--wbc-line);
    border-radius: var(--wbc-radius-sm);
    background: #fff;
    color: var(--wbc-teal-800);
    font-weight: 600;
    font-size: .8rem;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.wbc-quick a i { font-size: 1.25rem; color: var(--wbc-teal-600); }
.wbc-quick a:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: var(--wbc-gold-500);
    box-shadow: var(--wbc-shadow);
}
.wbc-quick a:hover i { color: var(--wbc-gold-600); }

/* ============================================================================
   Login - branded split screen
   ========================================================================== */
body.login-page.wbc-login { background: var(--wbc-bg); display: block; }
.wbc-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}
.wbc-auth-brand {
    position: relative;
    background: linear-gradient(160deg, var(--wbc-teal-800) 0%, var(--wbc-teal-900) 70%, #072028 100%);
    color: #eaf4f6;
    padding: 3rem 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.wbc-auth-brand::after {
    content: ""; position: absolute; right: -160px; bottom: -160px;
    width: 460px; height: 460px; border-radius: 50%;
    border: 2px solid rgba(212,160,23,.22);
    box-shadow: inset 0 0 0 26px rgba(212,160,23,.05);
}
.wbc-auth-brand img { width: 64px; height: 64px; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 0 0 2px rgba(212,160,23,.6); }
.wbc-auth-brand .wbc-auth-kicker { margin-top: 2.2rem; color: var(--wbc-gold-500); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; font-size: .74rem; }
.wbc-auth-brand h1 { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; line-height: 1.08; color: #fff; margin: .4rem 0 .8rem; letter-spacing: -.02em; }
.wbc-auth-brand p { color: #b9d3d9; max-width: 30ch; }
.wbc-auth-brand .wbc-auth-clock { font-family: var(--font-mono); color: #cfe3e7; font-size: .85rem; letter-spacing: .04em; position: relative; }
.wbc-auth-brand .wbc-auth-clock .sep { color: var(--wbc-gold-500); animation: wbcblink 1s steps(1) infinite; }

.wbc-auth-panel {
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    background: var(--wbc-bg);
}
.wbc-auth-card {
    width: 100%; max-width: 400px;
    background: #fff;
    border: 1px solid var(--wbc-line);
    border-radius: 16px;
    box-shadow: var(--wbc-shadow-lg);
    padding: 2.2rem 2rem;
}
.wbc-auth-card h4 { font-family: var(--font-head); font-weight: 700; color: var(--wbc-teal-800); font-size: 1.15rem; margin-bottom: .3rem; }
.wbc-auth-card .lede { color: var(--wbc-muted); font-size: .88rem; margin-bottom: 1.3rem; }
.btn-google {
    background:#fff; color:#3c4043; border:1px solid #dadce0; font-weight:600;
    padding:.7rem 1rem; display:flex; align-items:center; justify-content:center;
    border-radius: var(--wbc-radius-sm); width: 100%;
}
.btn-google .fa-google { color:#ea4335; }
.btn-google:hover { background:#f7f8f8; border-color:#d2d5d9; box-shadow:0 1px 3px rgba(16,42,50,.15); color:#202124; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .wbc-auth { grid-template-columns: 1fr; }
    .wbc-auth-brand { display: none; }
    .wbc-quick { grid-template-columns: repeat(2, 1fr); }
    .wbc-hero .wbc-clock { font-size: 2.1rem; }
}

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