:root {
    --navy: #0A2540;
    --blue: #3990E7;
    --orange: #F59E0B;
    --bg: #F4F6F9;
}

body {
    background: var(--bg);
    font-family: 'Segoe UI', Calibri, Arial, sans-serif;
    overflow-x: hidden;
}

/* ---------- Login page ---------- */
.login-body {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrapper { width: 100%; max-width: 420px; padding: 20px; }
.login-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

/* ---------- Topbar ---------- */
.topbar {
    background: var(--navy);
    padding: 0.75rem 1.25rem;
    /* Defensive: keeps the menu toggle button clear of a phone's notch
       or status bar if the app is ever launched in a mode where the
       status bar overlays content (e.g. certain iOS home-screen /
       installed-app configurations). env() falls back to 0 on
       browsers that don't support it, so this is a safe no-op
       everywhere else. */
    padding-top: max(0.75rem, env(safe-area-inset-top));
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: 230px;
    min-height: calc(100vh - 56px);
    background: #fff;
    border-right: 1px solid #e5e9f0;
    padding-top: 1rem;
    flex-shrink: 0;
}
.sidebar .nav-link {
    color: #445;
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
}
.sidebar .nav-link i { margin-right: 8px; width: 18px; display: inline-block; }
.sidebar .nav-link:hover { background: #f0f4fa; color: var(--navy); }
.sidebar .nav-link.active {
    background: #eaf2fd;
    color: var(--blue);
    border-left-color: var(--blue);
    font-weight: 600;
}
/* Sidebar "something changed" indicator, per explicit request -- a
   subtle highlight plus a small pulsing sparkle badge, using AWT's
   own established orange brand accent, so unseen activity under a
   specific menu is noticeable without being disruptive. */
.sidebar .nav-link.nav-has-update {
    background: #fff7ed;
    border-left-color: #F59E0B;
}
.sidebar .nav-link.nav-has-update:hover {
    background: #ffedd5;
}
.nav-update-spark {
    display: inline-flex;
    margin-left: 6px;
    color: #F59E0B;
    animation: navSparkPulse 1.6s ease-in-out infinite;
}
.nav-update-spark i { margin-right: 0; width: auto; }
@keyframes navSparkPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* ---------- Main content ---------- */
.main-content {
    flex-grow: 1;
    padding: 1.75rem;
    min-width: 0; /* critical: lets flex children shrink so wide tables scroll internally instead of widening the whole page */
    max-width: 100%;
}

/* ---------- Cards / Stat widgets ---------- */
.stat-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(10,37,64,0.06);
    border-left: 4px solid var(--blue);
}
.stat-card h3 { margin: 0; font-weight: 700; color: var(--navy); }
.stat-card .icon-circle {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #eaf2fd; color: var(--blue);
    font-size: 20px;
}

.table-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(10,37,64,0.06);
}

.badge-active { background: #16a34a; }
.badge-inactive { background: #6b7280; }
.badge-on_leave { background: var(--orange); }
.badge-terminated { background: #dc2626; }

.btn-primary {
    background: var(--blue);
    border-color: var(--blue);
}
.btn-primary:hover {
    background: var(--navy);
    border-color: var(--navy);
}

/* ---------- Sticky Actions column for wide tables ---------- */
/* Keeps action buttons reachable without a long horizontal scroll
   on mobile, for tables with many columns (e.g. NIC resources table). */
.sticky-action-col {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -4px 0 6px -4px rgba(0,0,0,0.15);
    z-index: 1;
}

/* ---------- Sticky first (Employee) column for wide payroll tables ---------- */
/* Keeps the employee's name visible while the rest of the row scrolls
   horizontally, so it's always clear whose row you're looking at. */
.sticky-first-col {
    position: sticky;
    left: 0;
    background: #fff;
    box-shadow: 4px 0 6px -4px rgba(0,0,0,0.15);
    z-index: 2;
}
thead .sticky-first-col {
    z-index: 3;
}
tr.table-light .sticky-first-col {
    background: #f8f9fa;
}

/* ---------- Month Picker (calendar-style) ---------- */
.month-picker {
    position: relative;
    display: inline-block;
}
.month-picker-toggle {
    white-space: nowrap;
}
.month-picker-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(10,37,64,0.15);
    padding: 10px;
    z-index: 1060;
    width: 220px;
}
.month-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--navy);
}
.month-picker-header button {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--navy);
}
.month-picker-header button:hover {
    background: #f0f4fa;
}
.month-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.month-picker-cell {
    border: 1px solid transparent;
    background: #f8f9fb;
    border-radius: 6px;
    padding: 6px 0;
    font-size: 0.85rem;
    cursor: pointer;
    color: #333;
}
.month-picker-cell:hover {
    background: #eaf2fd;
    color: var(--blue);
}
.month-picker-cell.active {
    background: var(--blue);
    color: #fff;
    font-weight: 600;
}

/* ---------- Responsive / Mobile ---------- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 37, 64, 0.45);
    z-index: 1039;
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 16px rgba(0,0,0,0.2);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.sidebar-open .sidebar {
        transform: translateX(0);
    }
    body.sidebar-open .sidebar-backdrop {
        display: block;
    }
    body.sidebar-open {
        overflow: hidden;
    }
    .main-content {
        padding: 1.1rem;
        width: 100%;
    }
    .topbar .container-fluid {
        flex-wrap: nowrap;
    }
}

@media (max-width: 575.98px) {
    .main-content {
        padding: 0.85rem;
    }
    .table-card, .stat-card {
        padding: 0.9rem;
    }
    .stat-card h3 {
        font-size: 1.35rem;
    }
    .login-card {
        padding: 28px 20px;
    }
    .modal-dialog {
        margin: 0.75rem;
    }
}

/* ---------- HR Dashboard ---------- */
.hrd-hero {
    background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 100%);
    border-radius: 14px;
    padding: 1.75rem 2rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}
.hrd-hero::after {
    /* A quiet, oversized ring in the corner -- the one deliberate
       decorative flourish on this page, echoing the icon-circle
       motif used everywhere else in the app at a much larger scale. */
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    border: 28px solid rgba(255,255,255,0.06);
}
.hrd-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.35rem;
}
.hrd-hero-headline {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
}
.hrd-hero-headline span {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
}
.hrd-hero-sub {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hrd-hero-chip {
    background: rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
.hrd-hero-chip-muted {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
}
.hrd-hero-date {
    text-align: center;
    background: rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 0.6rem 1.1rem;
    flex-shrink: 0;
    z-index: 1;
}
.hrd-hero-date-day {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}
.hrd-hero-date-month {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    margin-top: 0.2rem;
}

.hrd-stat {
    background: #fff;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(10,37,64,0.06);
    height: 100%;
    transition: box-shadow 0.15s ease;
}
a:hover .hrd-stat {
    box-shadow: 0 4px 14px rgba(10,37,64,0.12);
}
.hrd-stat-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    margin-bottom: 0.6rem;
}
.hrd-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}
.hrd-stat-label {
    font-size: 0.78rem;
    color: #667085;
    margin-top: 0.15rem;
}

.hrd-bar-track {
    background: #eef1f5;
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
}
.hrd-bar-fill {
    background: var(--blue);
    height: 100%;
    border-radius: 6px;
}

@media (max-width: 767.98px) {
    .hrd-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .hrd-hero-headline {
        font-size: 1.9rem;
    }
}

/* ---------- Employee Dashboard: Celebration Poster ---------- */
.ed-celeb-poster {
    height: 100%;
}
.ed-celeb-card {
    background: linear-gradient(150deg, var(--navy) 0%, var(--blue) 65%, var(--orange) 130%);
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    height: 100%;
    min-height: 240px;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.ed-celeb-card::before {
    /* A quiet confetti-like scatter of soft rings, echoing the icon-
       circle motif used across this app, kept subtle so it reads as
       texture rather than clutter. */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10) 0, rgba(255,255,255,0.10) 6px, transparent 7px),
        radial-gradient(circle at 85% 15%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 5px, transparent 6px),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.10) 0, rgba(255,255,255,0.10) 7px, transparent 8px),
        radial-gradient(circle at 10% 85%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 5px, transparent 6px);
    pointer-events: none;
}
.ed-celeb-photo {
    width: 84px; height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    margin-bottom: 0.6rem;
    position: relative;
    z-index: 1;
}
.ed-celeb-initials {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.18);
    font-size: 1.8rem;
    font-weight: 700;
}
.ed-celeb-icon {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
    opacity: 0.9;
}
.ed-celeb-name {
    position: relative;
    z-index: 1;
    font-size: 1.15rem;
    font-weight: 700;
}
.ed-celeb-message {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
    margin-top: 0.15rem;
}
.ed-celeb-cta {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    margin-top: 0.75rem;
}
.ed-celeb-card-modal {
    border-radius: 12px;
    cursor: default;
    min-height: 200px;
}

/* ---------- BD Dashboard ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
    --bdd-navy-deep: #071c31;
    --bdd-blue-soft: #eaf2fd;
    --bdd-ink: #1a2b3c;
    --bdd-muted: #667085;
}

.bdd-display { font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; }

/* ---------- Hero ---------- */
.bdd-hero {
    position: relative;
    background: linear-gradient(120deg, var(--bdd-navy-deep) 0%, var(--navy) 55%, #0f3a63 100%);
    border-radius: 16px;
    padding: 1.6rem 1.75rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    color: #fff;
}
.bdd-hero::before {
    /* A faint repeating wave motif, echoing AWT's own logo mark --
       three offset sine-like curves drifting across the hero rather
       than a generic dot-grid or diagonal-line texture. */
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.10;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M0 60 Q 27.5 20 55 60 T 110 60 T 165 60 T 220 60' fill='none' stroke='%233990E7' stroke-width='3'/%3E%3Cpath d='M0 90 Q 27.5 50 55 90 T 110 90 T 165 90 T 220 90' fill='none' stroke='%23F59E0B' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 220px 120px;
    pointer-events: none;
}
.bdd-hero-content { position: relative; z-index: 1; }
.bdd-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}
.bdd-hero-sub {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.72);
    margin-top: 0.15rem;
}
.bdd-hero-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    backdrop-filter: blur(2px);
}
.bdd-hero-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}
.bdd-hero-toggle .btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.75);
}
.bdd-hero-toggle .btn.active {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
    font-weight: 600;
}

/* ---------- Period banner (chip style) ---------- */
.bdd-period-banner {
    background: var(--bdd-blue-soft);
    color: var(--navy);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Stat cards ---------- */
.bdd-stat {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.1rem;
    box-shadow: 0 2px 10px rgba(10,37,64,0.07);
    height: 100%;
    color: inherit;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    border: 1px solid #eef1f6;
}
.bdd-stat::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--blue);
}
.bdd-stat-danger::after { background: #dc2626; }
.bdd-stat-warning::after { background: var(--orange); }
.bdd-stat-success::after { background: #16a34a; }
.bdd-stat:hover, .bdd-clickable-card:hover {
    box-shadow: 0 10px 26px rgba(10,37,64,0.14);
    transform: translateY(-2px);
    color: inherit;
}
.bdd-clickable-card { color: inherit; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.bdd-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--bdd-blue-soft), #d7e9fc);
    color: var(--blue);
}
.bdd-stat-danger .bdd-stat-icon { background: linear-gradient(135deg, #fdecec, #fad4d4); color: #dc2626; }
.bdd-stat-warning .bdd-stat-icon { background: linear-gradient(135deg, #fff4e5, #ffe6bf); color: var(--orange); }
.bdd-stat-success .bdd-stat-icon { background: linear-gradient(135deg, #e8f9ef, #c9f2d9); color: #16a34a; }
.bdd-stat-value {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--bdd-ink);
    line-height: 1;
}
.bdd-stat-label {
    font-size: 0.8rem;
    color: var(--bdd-muted);
    margin-top: 0.3rem;
    font-weight: 500;
}

/* ---------- Section eyebrow + widget card ---------- */
.bdd-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bdd-muted);
    margin-bottom: 0.35rem;
}
.bdd-widget {
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(10,37,64,0.06);
    border: 1px solid #eef1f6;
}
.bdd-widget-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    vertical-align: -7px;
}

/* ---------- Rows / empty states ---------- */
.bdd-row-link {
    transition: background-color 0.15s;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
}
.bdd-row-link:hover { background-color: #f4f6f9; }
.bdd-empty {
    text-align: center;
    padding: 1.1rem 0.5rem;
    color: var(--bdd-muted);
    font-size: 0.85rem;
}
.bdd-empty i { font-size: 1.3rem; display: block; margin-bottom: 0.4rem; opacity: 0.45; }

/* ---------- Avatar-initial circles for people ---------- */
.bdd-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--navy));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------- Soft pill badges ---------- */
.bdd-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.bdd-pill-danger { background: #fdecec; color: #b91c1c; }
.bdd-pill-warning { background: #fff4e5; color: #b45309; }
.bdd-pill-success { background: #e8f9ef; color: #15803d; }
.bdd-pill-info { background: var(--bdd-blue-soft); color: #1d4ed8; }
.bdd-pill-muted { background: #f1f3f6; color: var(--bdd-muted); }

/* ---------- Table refinements ---------- */
.bdd-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bdd-muted);
    font-weight: 700;
    border-bottom-width: 1px;
}
.bdd-table tbody tr { transition: background-color 0.12s; }
.bdd-table tbody tr:hover { background-color: #f8fafc; }

@media (max-width: 767px) {
    .bdd-hero { padding: 1.25rem; }
    .bdd-hero-title { font-size: 1.25rem; }
}

/* Task Board status dropdown: the arrow icon sits 12-28px from the
   right edge, but the element's own padding-right left far less room
   than that, so longer option text (e.g. "In Progress") ran directly
   under the arrow instead of stopping short of it. */
.bd-status-select {
    padding-right: 2rem !important;
    background-position: right 0.6rem center !important;
}

/* Notification bell dropdown: the fixed 340px width (set inline in
   includes/header.php) is right-aligned to the bell button via
   Bootstrap's dropdown-menu-end, which works fine on desktop but on
   a narrow phone screen the dropdown can extend past the left edge
   -- or, since the bell button itself isn't flush against the
   viewport's right edge (the user-menu button sits to its right),
   past the right edge too -- getting visually clipped by the
   viewport either way. On small screens this pins the dropdown to
   fixed, equal offsets from both edges of the viewport directly,
   instead of trusting its position relative to the button. The
   !important rules are necessary since Bootstrap's Popper
   positioning sets its own inline top/left/transform styles via JS,
   which would otherwise still win. */
@media (max-width: 575.98px) {
    #notifBellBtn + .dropdown-menu {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 84px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        max-height: calc(100vh - 100px) !important;
    }
}