/* =========================================
   JURIGCOD ABSEN - CUSTOM DARK THEME OVERRIDES
   ========================================= */

:root {
    --dash-bg: #131314;       /* Main Page Background */
    --dash-panel: #1e1f20;    /* Card/Box Background */
    --dash-text: #FFFFFF;     /* Text Color */
    --dash-border: #2c2d2e;   /* Border Color */
}

/* 1. Global Background */
body {
    background-color: var(--dash-bg) !important;
    color: var(--dash-text) !important;
    overflow-x: hidden; 
}

.text-break { word-break: break-word; }

/* 2. Top Navigation Bar */
.sb-topnav {
    background-color: var(--dash-bg) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1040;
}

/* Navbar Brand - Absolute Center */
.navbar-brand {
    width: auto !important;
    margin: 0 !important;
    background: transparent !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    font-weight: bold;
    letter-spacing: 1px;
    z-index: 10;
    transition: opacity 0.2s ease-in-out;
}

/* Icons (Toggle & User) */
#sidebarToggle, .sb-topnav .navbar-nav .nav-link {
    color: #FFFFFF !important;
    position: relative;
    z-index: 20; 
}

/* 3. Sidebar (Sidenav) */
.sb-sidenav-dark {
    background-color: var(--dash-panel) !important;
    color: var(--dash-text) !important;
    border-right: 1px solid var(--dash-border);
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
    color: #FFFFFF !important;
}

.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
    color: #FFFFFF !important;
    font-weight: bold !important;
    opacity: 0.7;
}

.sb-sidenav-footer {
    background-color: var(--dash-panel) !important;
    border-top: 1px solid var(--dash-border);
}

/* --- MOBILE FIXES --- */
@media (max-width: 991.98px) {
    .sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
        z-index: 1040 !important; 
    }
    body.sb-sidenav-toggled .navbar-brand {
        opacity: 0;
        pointer-events: none;
    }
}

/* 4. Data Boxes & Cards */
.list-group-item {
    background-color: var(--dash-panel) !important;
    color: var(--dash-text) !important;
    border-color: var(--dash-border) !important;
}

.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: #2a2b2c !important;
    color: var(--dash-text) !important;
}

.card {
    background-color: var(--dash-panel) !important;
    color: var(--dash-text) !important;
    border: 1px solid var(--dash-border);
}
.card-body, .card-header { font-weight: bold; }
.card-header { border-bottom: 1px solid var(--dash-border); }
.card-footer { border-top: 1px solid var(--dash-border); }

.dark-card, .shame-card {
    background-color: var(--dash-panel);
    border: 1px solid var(--dash-border);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    color: var(--dash-text);
}

/* 5. Modals & Dropdowns */
.modal-content, .dropdown-menu {
    background-color: var(--dash-panel) !important;
    color: var(--dash-text) !important;
    border: 1px solid var(--dash-border);
    z-index: 1050;
}
.dropdown-item, .dropdown-item-text { color: var(--dash-text) !important; }
.dropdown-item:hover { background-color: rgba(255, 255, 255, 0.1); }
.modal-header, .modal-footer, .dropdown-divider { border-color: var(--dash-border) !important; }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.dropdown-menu-scrollable { max-height: 300px; overflow-y: auto; }

/* 6. Form Inputs */
.form-control, .form-select, .form-control-dark {
    background-color: var(--dash-bg) !important;
    border-color: var(--dash-border) !important;
    color: var(--dash-text) !important;
}
.form-control:focus, .form-select:focus, .form-control-dark:focus {
    background-color: var(--dash-bg) !important;
    color: var(--dash-text) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1) !important;
}
.form-label-dark {
    color: #aaa;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.input-error {
    border-color: #dc3545 !important;
    background-color: #2c0b0e !important;
}

/* 7. Datatables */
.datatable-selector, .datatable-input {
    background-color: var(--dash-bg);
    color: var(--dash-text);
    border: 1px solid var(--dash-border);
}
.datatable-table, .datatable-info, .datatable-pagination a {
    color: var(--dash-text) !important;
}
.datatable-pagination .datatable-active a, .datatable-pagination a:hover {
    background-color: var(--dash-panel) !important;
    border-color: var(--dash-border) !important;
}

/* 8. Utility Classes & Colors */
.btn-transparent {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s;
    cursor: pointer;
}
.btn-transparent:hover {
    transform: scale(1.2);
    opacity: 1 !important;
}

.text-primary-light { color: #5c9eff !important; } 
.text-info-light { color: #33d9b2 !important; }     
.text-warning-light { color: #ffca2c !important; } 
.text-danger-light { color: #ff6b6b !important; }

/* 9. Layout Utilities (Sticky Headers) */
.sticky-top-section {
    position: -webkit-sticky;
    position: sticky;
    top: 56px; 
    z-index: 900; 
    background-color: var(--dash-bg);
    padding-top: 1.5rem; 
    padding-bottom: 0.5rem;
    border-bottom: 1px solid transparent; 
    transition: border-color 0.3s;
    margin-right: -1.5rem; 
    margin-left: -1.5rem; 
    padding-right: 1.5rem; 
    padding-left: 1.5rem;
    width: calc(100% + 3rem);
}
.sticky-top-section.is-pinned {
    border-color: var(--dash-border);
}
#dataList {
    padding-bottom: 1rem;
}
.sticky-bottom-bar {
    position: fixed; bottom: 20px; right: 20px; z-index: 1020;
}

/* =========================================
   ADDITIONAL COMPONENT MERGES
   ========================================= */

/* --- A. EXPANDABLE SEARCH BAR --- */
.search-expand-container {
    width: 42px; height: 42px; 
    background: var(--dash-panel); 
    border-radius: 50px;
    display: flex; align-items: center; overflow: hidden;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.5); 
    border: 1px solid var(--dash-border); 
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-expand-container.active {
    width: 100%;
    max-width: calc(100% - 100px);
}
@media (min-width: 768px) {
    .search-expand-container.active { max-width: 300px; }
}
.search-trigger {
    width: 42px; height: 42px; 
    display: flex; justify-content: center; align-items: center; 
    cursor: pointer; flex-shrink: 0; color: #fff;
}
.search-input-field {
    width: 100%; border: none; outline: none; background: transparent; 
    padding-right: 15px; color: #fff; opacity: 0; transition: opacity 0.3s;
}
.search-expand-container.active .search-input-field { opacity: 1; }

/* --- B. TABLES --- */
.rounded-table-container { border-radius: 15px; overflow: visible; border: none; }
#mainTable thead th {
    position: -webkit-sticky; position: sticky; z-index: 900;
    background-color: var(--dash-panel) !important;
    color: white; border-bottom: 1px solid var(--dash-border);
    padding: 12px 16px; cursor: pointer; user-select: none;
}
#mainTable thead th:hover { background-color: var(--dash-border) !important; }
#mainTable tbody tr:nth-of-type(odd) td { background-color: var(--dash-bg) !important; color: white; border-color: var(--dash-border); }
#mainTable tbody tr:nth-of-type(even) td { background-color: var(--dash-panel) !important; color: white; border-color: var(--dash-border); }
#mainTable td { padding: 12px 16px; vertical-align: middle; font-size: 0.9rem; }

/* Status Text */
.status-text-hadir { color: #198754 !important; font-weight: bold; }
.status-text-izin  { color: #0d6efd !important; font-weight: bold; }
.status-text-sakit { color: #ffc107 !important; font-weight: bold; }
.status-text-alpa  { color: #dc3545 !important; font-weight: bold; }
.status-text-none  { color: #6c757d !important; font-style: italic; }

/* --- C. CHAT & MATRIX (Condensed) --- */
/* ... (Existing Matrix and Chat CSS remains here) ... */

/* --- 10. SQUIRCLE INPUTS (Reusable) --- */
.profile-input-wrapper { position: relative; z-index: 1; }

.form-control-dark {
    background-color: var(--dash-bg) !important;
    border: 1px solid var(--dash-border) !important;
    color: var(--dash-text) !important;
    padding-right: 40px !important;
    border-radius: 15px !important;
}
.form-control-dark:focus {
    background-color: #000 !important;
    border-color: #ffffff !important; /* White Border */
    color: #fff !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1) !important; /* White Glow */
}
.value-text { color: #ffffff; font-weight: bold; font-size: 1rem; margin-bottom: 15px; }

.btn-inside {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: #aaa; padding: 5px;
    z-index: 2; 
}
.btn-inside:hover { color: #fff; }

.btn:disabled {
    cursor: not-allowed;
    background-color: #131314 !important;
    border-color: #2c2d2e !important;
    color: #6c757d !important;
    opacity: 1 !important; 
}