/* ============================================================
   Workforce Automation Scheduling System — Custom Styles
   ============================================================ */

:root {
    /* Satu sumber kebenaran untuk tinggi navbar & lebar sidebar */
    --navbar-height: 56px;
    --sidebar-width: 260px;

    --sidebar-bg: #FFFFFF;
    --sidebar-text: #212529;
    --sidebar-hover: #F2F2F2;
    --sidebar-active: #212529;
    --sidebar-sub-active: #495057;
    --sidebar-active-text: #FFFFFF;
}

body {
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* --- Top Navbar (fixed) --- */
.navbar.fixed-top {
    z-index: 1020;
}

/* --- Sidebar --- */
#wrapper {
    margin-left: var(--sidebar-width);
    padding-top: var(--navbar-height);
    width: calc(100% - var(--sidebar-width));
    max-width: none;
    min-height: calc(100vh - var(--navbar-height));
    overflow-x: auto;
}

.sidebar {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1050 !important;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    display: block !important;
    transform: none !important;
}

/* Desktop: fixed sidebar */
@media (min-width: 992px) {
    .sidebar.offcanvas-lg {
        visibility: visible !important;
        position: fixed !important;
        top: var(--navbar-height) !important;
        left: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        transform: none !important;
        z-index: 1050 !important;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        overflow-x: hidden;
        flex-shrink: 0;
        display: block !important;
        width: var(--sidebar-width) !important;
    }
    .sidebar.offcanvas-lg .offcanvas-header { display: none !important; }
    /* Header offcanvas disembunyikan di desktop, jadi TIDAK boleh ada
       padding-top kompensasi — dulu 124px membuat celah kosong di atas menu. */
    .sidebar .offcanvas-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }
}

.sidebar.offcanvas-lg {
    background-color: var(--sidebar-bg);
    transform: none !important;
    display: block !important;
    width: var(--sidebar-width) !important;
}

/* Sidebar navigation links — white bg, black text, no blue anywhere */
.sidebar-nav a.nav-link,
.sidebar-nav a.nav-link:link,
.sidebar-nav a.nav-link:visited,
.sidebar-nav a.nav-link:focus {
    color: var(--sidebar-text) !important;
    text-decoration: none !important;
    background-color: transparent !important;
    border-left: 3px solid transparent !important;
}

/* HOVER — Main menu */
.sidebar-nav a.nav-link:hover {
    color: var(--sidebar-text) !important;
    background-color: var(--sidebar-hover) !important;
    border-left: 3px solid transparent !important;
}

/* ACTIVE STATE — Main menu: same as navbar (#212529), white text */
.sidebar-nav a.nav-link.active,
.sidebar-nav a.nav-link.active:link,
.sidebar-nav a.nav-link.active:visited,
.sidebar-nav a.nav-link.active:focus {
    color: var(--sidebar-active-text) !important;
    background-color: var(--sidebar-active) !important;
    border-left: 3px solid transparent !important;
    font-weight: 600 !important;
}

/* ACTIVE STATE — Sub menu level 1 */
.sidebar-nav a.sub-link.active,
.sidebar-nav a.sub-link.active:link,
.sidebar-nav a.sub-link.active:visited,
.sidebar-nav a.sub-link.active:focus {
    color: var(--sidebar-active-text) !important;
    background-color: var(--sidebar-sub-active) !important;
    border-left: 3px solid transparent !important;
    font-weight: 600 !important;
}

/* ACTIVE STATE — Sub menu level 2 */
.sidebar-nav a.sub-link2.active,
.sidebar-nav a.sub-link2.active:link,
.sidebar-nav a.sub-link2.active:visited,
.sidebar-nav a.sub-link2.active:focus {
    color: var(--sidebar-active-text) !important;
    background-color: var(--sidebar-sub-active) !important;
    border-left: 3px solid transparent !important;
    font-weight: 600 !important;
}

/* Hover states for sub-menus */
.sidebar-nav a.sub-link:hover,
.sidebar-nav a.sub-link2:hover {
    color: var(--sidebar-text) !important;
    background-color: var(--sidebar-hover) !important;
    border-left: 3px solid transparent !important;
}

/* Force inherit for icon color — follows parent text color */
.sidebar-link i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
    color: inherit !important;
}

.sub-link {
    padding-left: 2rem !important;
    font-size: 0.85rem !important;
    font-weight: 500;
}

.sub-link2 {
    padding-left: 3rem !important;
    font-size: 0.82rem !important;
    font-weight: 400;
}

.sidebar-divider {
    border-color: rgba(0, 0, 0, 0.12);
    margin: 0.5rem 1rem;
}

.transition-rotate {
    transition: transform 0.3s ease;
}

.sidebar-nav .nav-link[aria-expanded="true"] .transition-rotate {
    transform: rotate(180deg);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sidebar-text);
    background-color: var(--sidebar-bg);
    text-decoration: none;
}

.sidebar-brand:hover {
    color: var(--sidebar-text);
}

/* --- Editable grid (import) --- */
.grid-cell, .fc-cell {
    min-width: 60px;
    padding: 4px 6px;
    outline: none;
    background: #fff;
    border-right: 1px solid #dee2e6;
}

.grid-cell:focus, .fc-cell:focus {
    background: #fffbe6;
    box-shadow: inset 0 0 0 1px #0d6efd;
}

#gridBody tr:hover .grid-cell,
#forecastBody tr:hover .fc-cell {
    background: #f0f7ff;
}

#gridBody tr:hover .grid-cell:focus,
#forecastBody tr:hover .fc-cell:focus {
    background: #fffbe6;
}

/* Locked header row in import grid */
#importGridTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
    font-size: 0.78rem;
}

/* --- Footer --- */
.footer {
    margin-left: var(--sidebar-width);
    padding: 12px 24px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.footer .container-fluid {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* --- Main Content --- */
#mainContent {
    overflow: visible;
    background-color: #f8f9fa;
    width: 100%;
    max-width: none;
    padding: 33px 24px 20px !important;
    display: block;
}

#mainContent .container-fluid {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    display: block;
}

#mainContent .card {
    max-width: none;
    width: 100%;
}

#mainContent .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#mainContent .table {
    width: 100%;
}

/* --- Cards --- */
.card {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.card-header {
    font-weight: 600;
}

/* --- Schedule grid --- */
.schedule-grid th,
.schedule-grid td {
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 0.3rem;
    font-size: 0.9rem;
}

.schedule-grid .shift-cell {
    font-weight: 600;
    border-radius: 4px;
    display: inline-block;
    min-width: 40px;
    padding: 2px 6px;
}

.shift-OFF {
    background-color: #ffcccc;
    color: #a00;
}

.shift-Morning {
    background-color: #d4edda;
    color: #155724;
}

.shift-Swing {
    background-color: #fff3cd;
    color: #856404;
}

.shift-Night {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* --- Forecast grid --- */
.forecast-grid input[type="number"] {
    width: 60px;
    text-align: center;
}

.forecast-grid th {
    font-size: 0.85rem;
}

/* --- Validation panel --- */
.validation-card {
    border-left: 4px solid #6c757d;
}

.validation-card.passed {
    border-left-color: #28a745;
}

.validation-card.failed {
    border-left-color: #dc3545;
}

.progress-thin {
    height: 8px;
    border-radius: 4px;
}

/* --- Dashboard --- */
.dashboard-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.dashboard-card .card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.dashboard-card:hover .card {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-icon {
    font-size: 2rem;
    opacity: 0.7;
}

/* --- Tables --- */
.table-hover tbody tr:hover {
    background-color: #f0f7ff;
}

/* --- Loading spinner --- */
.schedule-loading {
    display: none;
}

.schedule-loading.active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* --- Footer --- */
.footer {
    margin-top: auto;
}

/* ============================================================
   OVERRIDES — Sidebar & Dashboard stat cards
   Ditulis di paling bawah agar menang cascade, termasuk atas
   <style> inline di views/layouts/header.php (selector di-scope
   ulang memakai id #sidebarCanvas).
   - Semua teks menu sidebar: hitam #000 di semua state.
   - Menu aktif: background hitam + teks putih (tetap kontras).
   - Kartu statistik dashboard: tanpa underline/biru saat normal,
     underline hanya saat hover sebagai penanda bisa diklik.
   Bootstrap di assets/vendor tidak disentuh; tanpa inline style.
   ============================================================ */

/* ---------- 1. SIDEBAR — teks hitam untuk SEMUA state ---------- */
#sidebarCanvas .sidebar-nav a.nav-link,
#sidebarCanvas .sidebar-nav a.nav-link:link,
#sidebarCanvas .sidebar-nav a.nav-link:visited,
#sidebarCanvas .sidebar-nav a.nav-link:focus,
#sidebarCanvas .sidebar-nav a.nav-link:focus-visible,
#sidebarCanvas .sidebar-nav a.nav-link:active,
#sidebarCanvas .sidebar-nav a.nav-link:hover,
#sidebarCanvas .sidebar-nav a.sub-link,
#sidebarCanvas .sidebar-nav a.sub-link:link,
#sidebarCanvas .sidebar-nav a.sub-link:visited,
#sidebarCanvas .sidebar-nav a.sub-link:focus,
#sidebarCanvas .sidebar-nav a.sub-link:focus-visible,
#sidebarCanvas .sidebar-nav a.sub-link:active,
#sidebarCanvas .sidebar-nav a.sub-link:hover,
#sidebarCanvas .sidebar-nav a.sub-link2,
#sidebarCanvas .sidebar-nav a.sub-link2:link,
#sidebarCanvas .sidebar-nav a.sub-link2:visited,
#sidebarCanvas .sidebar-nav a.sub-link2:focus,
#sidebarCanvas .sidebar-nav a.sub-link2:focus-visible,
#sidebarCanvas .sidebar-nav a.sub-link2:active,
#sidebarCanvas .sidebar-nav a.sub-link2:hover {
    color: #000 !important;
    text-decoration: none !important;
}

/* Hover/focus menu non-aktif: tetap hitam + latar abu sebagai umpan balik */
#sidebarCanvas .sidebar-nav a.nav-link:hover,
#sidebarCanvas .sidebar-nav a.nav-link:focus-visible,
#sidebarCanvas .sidebar-nav a.sub-link:hover,
#sidebarCanvas .sidebar-nav a.sub-link:focus-visible,
#sidebarCanvas .sidebar-nav a.sub-link2:hover,
#sidebarCanvas .sidebar-nav a.sub-link2:focus-visible {
    color: #000 !important;
    background-color: var(--sidebar-hover) !important;
}

/* ---------- 2. SIDEBAR — menu AKTIF tetap kontras (hitam + putih) ---------- */
#sidebarCanvas .sidebar-nav a.nav-link.active,
#sidebarCanvas .sidebar-nav a.nav-link.active:link,
#sidebarCanvas .sidebar-nav a.nav-link.active:visited,
#sidebarCanvas .sidebar-nav a.nav-link.active:focus,
#sidebarCanvas .sidebar-nav a.nav-link.active:focus-visible,
#sidebarCanvas .sidebar-nav a.nav-link.active:active,
#sidebarCanvas .sidebar-nav a.nav-link.active:hover,
#sidebarCanvas .sidebar-nav a.sub-link.active,
#sidebarCanvas .sidebar-nav a.sub-link.active:link,
#sidebarCanvas .sidebar-nav a.sub-link.active:visited,
#sidebarCanvas .sidebar-nav a.sub-link.active:focus,
#sidebarCanvas .sidebar-nav a.sub-link.active:focus-visible,
#sidebarCanvas .sidebar-nav a.sub-link.active:active,
#sidebarCanvas .sidebar-nav a.sub-link.active:hover,
#sidebarCanvas .sidebar-nav a.sub-link2.active,
#sidebarCanvas .sidebar-nav a.sub-link2.active:link,
#sidebarCanvas .sidebar-nav a.sub-link2.active:visited,
#sidebarCanvas .sidebar-nav a.sub-link2.active:focus,
#sidebarCanvas .sidebar-nav a.sub-link2.active:focus-visible,
#sidebarCanvas .sidebar-nav a.sub-link2.active:active,
#sidebarCanvas .sidebar-nav a.sub-link2.active:hover {
    color: #FFFFFF !important;
    background-color: #000000 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* ---------- 3. DASHBOARD — kartu statistik (4 kartu atas) ---------- */
a.dashboard-card,
a.dashboard-card:link,
a.dashboard-card:visited,
a.dashboard-card:focus,
a.dashboard-card:active {
    color: #000 !important;
    text-decoration: none !important;
}

/* Underline HANYA saat hover/focus sebagai penanda bisa diklik */
a.dashboard-card:hover,
a.dashboard-card:focus-visible {
    color: #000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Teks di dalam kartu ikut hitam (termasuk label .text-muted) */
a.dashboard-card .card-title,
a.dashboard-card .card-text,
a.dashboard-card .text-muted {
    color: #000 !important;
}

/* Fokus keyboard tetap jelas, tanpa warna biru */
a.dashboard-card:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: 2px;
}