/* ============================================
   LIGHT THEME - COMPLETE OVERRIDE
   Semua rule menggunakan body.light-mode prefix
   untuk override futuristic-ui.css !important
   ============================================ */

/* ===== CSS VARIABLES LIGHT ===== */
body.light-mode {
    --bg: #f4f6f9;
    --glass: rgba(255,255,255,.92);
    --border: rgba(0,0,0,.08);
    --primary: #5b4cff;
    --secondary: #0095ff;
    --text: #1e293b;
    --cyan: #0095ff;
    --green: #10b981;
}

/* ===== BODY ===== */
body.light-mode {
    background: #f4f6f9 !important;
    color: #1e293b !important;
}

body.light-mode::before {
    background: #e0e7ff !important;
    opacity: .12 !important;
}

body.light-mode::after {
    background: #bae6fd !important;
    opacity: .12 !important;
}

/* ===== MAIN CONTAINER ===== */
body.light-mode .main,
body.light-mode .main .main-container {
    background: transparent !important;
    background-color: transparent !important;
}

/* ===== GLASS ELEMENTS — OVERRIDE futuristic-ui ===== */
body.light-mode .header,
body.light-mode .main-menu,
body.light-mode .card,
body.light-mode .bg-white,
body.light-mode .list-group-item,
body.light-mode .dropdown-menu,
body.light-mode .modal-content,
body.light-mode .form-control,
body.light-mode .custom-select,
body.light-mode .swal2-popup {
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

body.light-mode .card-body {
    background: transparent !important;
}

/* ===== TEXT — ALL ELEMENTS ===== */
body.light-mode,
body.light-mode p,
body.light-mode span,
body.light-mode div,
body.light-mode label,
body.light-mode a,
body.light-mode small,
body.light-mode .small,
body.light-mode li {
    color: #1e293b !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #0f172a !important;
}

body.light-mode .text-muted {
    color: #64748b !important;
}

body.light-mode .text-white {
    color: #1e293b !important;
}

body.light-mode .text-secondary {
    color: #475569 !important;
}

body.light-mode .text-default {
    color: #1e293b !important;
}

/* ===== FORMS ===== */
body.light-mode input,
body.light-mode textarea,
body.light-mode select,
body.light-mode .form-control {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .form-control:focus {
    border-color: #5b4cff !important;
    box-shadow: 0 0 0 3px rgba(91,76,255,.1) !important;
}

body.light-mode .form-control::placeholder {
    color: #94a3b8 !important;
}

/* ===== FLOATING HEADER ===== */
body.light-mode .floating-header-inner {
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
}

body.light-mode .floating-title {
    color: #0f172a !important;
}

body.light-mode .floating-icon-btn,
body.light-mode .floating-action {
    color: #1e293b !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    background: rgba(0,0,0,.02) !important;
}

body.light-mode .floating-icon-btn:hover,
body.light-mode .floating-action:hover {
    background: rgba(0,0,0,.05) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}

body.light-mode .floating-action small {
    color: #475569 !important;
}

body.light-mode .floating-badge {
    border: 2px solid #ffffff !important;
}

/* ===== SIDEBAR ===== */
body.light-mode .main-menu {
    background: #ffffff !important;
    box-shadow: 4px 0 30px rgba(0,0,0,.1) !important;
}

body.light-mode .sidebar-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .sidebar-user-text h6 {
    color: #0f172a !important;
}

body.light-mode .sidebar-user-text p {
    color: #64748b !important;
}

body.light-mode .main-menu .nav-link {
    color: #1e293b !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

body.light-mode .main-menu .nav-link:hover {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .main-menu .nav-link.active {
    background: linear-gradient(135deg, #5b4cff, #0095ff) !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .main-menu .nav-link .icon {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .main-menu .nav-link.active .icon {
    background: rgba(255,255,255,.2) !important;
    border-color: rgba(255,255,255,.2) !important;
}

body.light-mode .main-menu .nav-link.active div,
body.light-mode .main-menu .nav-link.active span {
    color: #ffffff !important;
}

body.light-mode .btn-sidebar-close {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .btn-sidebar-logout {
    border: 1px solid #fecdd3 !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
}

body.light-mode .sidebar-footer {
    border-top: 1px solid #e2e8f0 !important;
}

body.light-mode .backdrop {
    background: rgba(0,0,0,.3) !important;
}

/* ===== BOTTOM NAVIGATION ===== */
body.light-mode .appBottomMenu {
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.06) !important;
    backdrop-filter: blur(12px) !important;
}

body.light-mode .appBottomMenu .item {
    color: #94a3b8 !important;
}

body.light-mode .appBottomMenu .item.active {
    color: #5b4cff !important;
}

body.light-mode .appBottomMenu .item.active strong {
    color: #5b4cff !important;
}

body.light-mode .appBottomMenu strong {
    color: inherit !important;
}

body.light-mode .action-button {
    box-shadow: 0 8px 24px rgba(91,76,255,.2) !important;
}

body.light-mode .action-button.done {
    box-shadow: 0 8px 24px rgba(16,185,129,.2) !important;
}

body.light-mode .footer-nav {
    z-index: 9998;
}

/* ===== HOME PAGE ===== */
body.light-mode .welcome-text {
    color: #64748b !important;
}

body.light-mode .animated-blur {
    background: linear-gradient(90deg, #0f172a 0%, #475569 50%, #0f172a 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.light-mode .user-position {
    color: #64748b !important;
}

body.light-mode .digital-clock {
    color: #0f172a !important;
    text-shadow: none !important;
}

body.light-mode .home-card,
body.light-mode .home-card.button-absent {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}

body.light-mode .home-card:hover,
body.light-mode .home-card.button-absent:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
    transform: translateY(-2px);
}

body.light-mode .home-card p,
body.light-mode .home-card small {
    color: #1e293b !important;
}

body.light-mode .button-absent small {
    color: #64748b !important;
}

body.light-mode .home-icon {
    background: linear-gradient(135deg, rgba(91,76,255,.08), rgba(0,149,255,.08)) !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .home-icon .material-icons {
    color: #5b4cff !important;
}

body.light-mode .row.text-center p,
body.light-mode .row.text-center small {
    color: #475569 !important;
}

body.light-mode .row.text-center a {
    color: #1e293b !important;
}

body.light-mode .row.text-center .icon,
body.light-mode .row.text-center .icon-50 {
    background: linear-gradient(135deg, rgba(91,76,255,.06), rgba(0,149,255,.06)) !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .row.text-center .icon .material-icons,
body.light-mode .row.text-center .icon-50 .material-icons {
    color: #5b4cff !important;
}

/* ===== LOGIN FORM ===== */
body.light-mode .form-login {
    min-height: calc(100vh - 100px);
}

body.light-mode .login-glass-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.06) !important;
}

body.light-mode .login-glass-wrapper::before,
body.light-mode .login-glass-wrapper::after {
    opacity: .3 !important;
}

body.light-mode .login-title {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
}

body.light-mode .login-subtitle {
    color: #64748b !important;
}

body.light-mode .home-form-group .form-control-label {
    color: #475569 !important;
}

body.light-mode .home-form-group .form-control {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .home-form-group .form-control:focus {
    border-color: #5b4cff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(91,76,255,.08) !important;
}

body.light-mode .toggle-password {
    color: #5b4cff !important;
}

body.light-mode .forgot-password a {
    color: #64748b !important;
}

body.light-mode .forgot-password a:hover {
    color: #5b4cff !important;
}

/* ===== DROPDOWN / NOTIFICATION ===== */
body.light-mode .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.1) !important;
    border-radius: 16px !important;
}

body.light-mode .dropdown-menu .list-group-item {
    background: #ffffff !important;
    border-color: #f1f5f9 !important;
    color: #1e293b !important;
}

body.light-mode .dropdown-menu .list-group-item:hover {
    background: #f8fafc !important;
}

/* ===== CARDS GENERAL ===== */
body.light-mode .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}

/* ===== TABLE ===== */
body.light-mode .table,
body.light-mode .table td,
body.light-mode .table th {
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
}

/* ===== BADGES ===== */
body.light-mode .badge-success {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

body.light-mode .badge-danger {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

body.light-mode .badge-info {
    background: #dbeafe !important;
    color: #2563eb !important;
}

body.light-mode .badge-warning {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

/* ===== SWEETALERT ===== */
body.light-mode .swal-modal {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.12) !important;
}

body.light-mode .swal-title {
    color: #0f172a !important;
}

body.light-mode .swal-text {
    color: #475569 !important;
}

body.light-mode .swal-icon {
    border-color: transparent !important;
    background: transparent !important;
}

body.light-mode .swal-icon--success {
    border-color: #16a34a !important;
}

body.light-mode .swal-icon--success::before,
body.light-mode .swal-icon--success::after {
    background: #ffffff !important;
}

body.light-mode .swal-icon--success__hide-corners {
    background: #ffffff !important;
}

body.light-mode .swal-icon--success__line {
    background-color: #16a34a !important;
}

body.light-mode .swal-icon--success__ring {
    border-color: rgba(22,163,74,.2) !important;
}

body.light-mode .swal-icon--error {
    border-color: #dc2626 !important;
}

body.light-mode .swal-icon--error__line {
    background-color: #dc2626 !important;
}

body.light-mode .swal-button--confirm {
    background: linear-gradient(90deg, #5b4cff, #0095ff) !important;
    color: #fff !important;
}

body.light-mode .swal-button--cancel {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .swal-footer {
    background: transparent !important;
    border-top: 1px solid #e2e8f0 !important;
}

body.light-mode .swal-content__input {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

/* ===== CHATBOX ===== */
body.light-mode .chatbox {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.1) !important;
}

body.light-mode .chatbox .topmenu {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .chatbox .chat-tab {
    color: #64748b !important;
}

body.light-mode .chatbox .chat-tab.active {
    color: #5b4cff !important;
    background: rgba(91,76,255,.06) !important;
    border-color: rgba(91,76,255,.2) !important;
}

body.light-mode .chatbox .btn-close-chat {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

body.light-mode .chatbox .friend ul li p strong {
    color: #0f172a !important;
}

body.light-mode .chatbox .friend ul li p span {
    color: #64748b !important;
}

body.light-mode .chatbox .friend ul li:hover {
    background: #f8fafc !important;
}

body.light-mode .chatbox .top-meu-profile {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .chatbox .top-meu-profile p strong {
    color: #0f172a !important;
}

body.light-mode .chatbox .chat-messages .message.left .bubble {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

body.light-mode .chatbox .chat-messages .message.right .bubble {
    background: rgba(91,76,255,.08) !important;
    color: #1e293b !important;
}

body.light-mode .chatbox .chat-messages .message .bubble span {
    color: #94a3b8 !important;
}

body.light-mode .chatbox .sendmessage {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

body.light-mode .chatbox .form-add-chat input[type="text"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .chatbox-overlay {
    background: rgba(0,0,0,.3) !important;
    backdrop-filter: blur(2px) !important;
}

/* ===== LOADER ===== */
body.light-mode .loader-display {
    background: radial-gradient(circle at center, #f4f6f9 0%, #e2e5ea 100%) !important;
}

body.light-mode .loader-app-name {
    color: #0f172a !important;
}

/* ===== ABSEN-IN / ABSEN-OUT PAGE ===== */
body.light-mode .clock-absen {
    color: #0f172a !important;
    text-shadow: none !important;
}

body.light-mode .title {
    color: #64748b !important;
}

body.light-mode .subtitle {
    background: linear-gradient(90deg, #0f172a 0%, #475569 50%, #0f172a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ===== DATEPICKER ===== */
body.light-mode .datepicker,
body.light-mode .datepicker-dropdown {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.1) !important;
    color: #1e293b !important;
}

body.light-mode .datepicker table tr td,
body.light-mode .datepicker table tr th {
    color: #1e293b !important;
    background: transparent !important;
}

body.light-mode .datepicker table tr th {
    color: #64748b !important;
}

body.light-mode .datepicker table tr td:hover {
    background: #f1f5f9 !important;
}

body.light-mode .datepicker table tr td.active,
body.light-mode .datepicker table tr td.active:hover {
    background: #5b4cff !important;
    color: #ffffff !important;
}

body.light-mode .datepicker table tr td.today {
    background: #dbeafe !important;
    color: #1e293b !important;
}

body.light-mode .datepicker table tr td.old,
body.light-mode .datepicker table tr td.new {
    color: #94a3b8 !important;
}

/* ===== MODAL ===== */
body.light-mode .modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .modal-header,
body.light-mode .modal-footer {
    border-color: #e2e8f0 !important;
}

/* ===== BUTTONS ===== */
body.light-mode .btn-primary,
body.light-mode .bg-default,
body.light-mode .badge-primary {
    background: linear-gradient(135deg, #5b4cff, #0095ff) !important;
    color: #ffffff !important;
}

/* ===== SCROLLBAR ===== */
body.light-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(#5b4cff, #0095ff) !important;
}

body.light-mode ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}

/* ===== ID CARD PAGE ===== */
body.light-mode .main.has-footer {
    background: #f4f6f9 !important;
}

/* ===== AVATAR ===== */
body.light-mode .avatar,
body.light-mode .icon,
body.light-mode .btn-40 {
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

/* ===== HR ===== */
body.light-mode hr {
    border-color: #e2e8f0 !important;
}

/* ===== LINKS ===== */
body.light-mode a:hover {
    color: #5b4cff !important;
}

/* ===== FILE UPLOAD ===== */
body.light-mode .image-upload-wrap {
    border: 2px dashed #cbd5e1 !important;
    background: #f8fafc !important;
}

body.light-mode .image-upload-wrap:hover {
    border-color: #5b4cff !important;
    background: rgba(91,76,255,.02) !important;
}

/* ===== TOGGLE BUTTON ===== */
.theme-toggle-btn {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #fff;
    transition: all .3s ease;
    text-decoration: none !important;
}

.theme-toggle-btn:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.10);
}

body.light-mode .theme-toggle-btn {
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #1e293b !important;
}

body.light-mode .theme-toggle-btn:hover {
    background: #f1f5f9 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
}

.theme-toggle-btn .material-icons {
    font-size: 20px;
}

@media (max-width: 767px) {
    .theme-toggle-btn {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
    .theme-toggle-btn .material-icons {
        font-size: 18px;
    }
}

@media (max-width: 380px) {
    .theme-toggle-btn {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
    .theme-toggle-btn .material-icons {
        font-size: 16px;
    }
}


/* ============================================
   ADDITIONAL FIXES - LIST ITEMS & DATA CARDS
   ============================================ */

/* List cards need more contrast with page background */
body.light-mode .card .card-body .card,
body.light-mode .card .card-body .list-group-item,
body.light-mode .load-data .card,
body.light-mode .postList .card,
body.light-mode .load-kunjungan .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

/* Data list items inside cards */
body.light-mode .card .row,
body.light-mode .card .col,
body.light-mode .card .col-auto {
    color: #1e293b !important;
}

/* ===== BADGES / STATUS LABELS ===== */
body.light-mode .badge,
body.light-mode [class*="badge"] {
    font-weight: 600 !important;
}

body.light-mode .badge-success,
body.light-mode .bg-success,
body.light-mode span.badge.badge-success {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

body.light-mode .badge-danger,
body.light-mode .bg-danger,
body.light-mode span.badge.badge-danger {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

body.light-mode .badge-warning,
body.light-mode .bg-warning,
body.light-mode span.badge.badge-warning {
    background: #fef9c3 !important;
    color: #a16207 !important;
    border: 1px solid #fde68a !important;
}

body.light-mode .badge-info,
body.light-mode .bg-info,
body.light-mode span.badge.badge-info {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

body.light-mode .badge-primary,
body.light-mode .bg-primary,
body.light-mode span.badge.badge-primary {
    background: #ede9fe !important;
    color: #6d28d9 !important;
    border: 1px solid #ddd6fe !important;
}

body.light-mode .badge-secondary,
body.light-mode .bg-secondary,
body.light-mode span.badge.badge-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* ===== SHOW MORE / LOAD MORE BUTTON ===== */
body.light-mode .btn-show-more,
body.light-mode .show-more,
body.light-mode [class*="show-more"],
body.light-mode [class*="load-more"],
body.light-mode a[class*="more"] {
    color: #5b4cff !important;
    background: transparent !important;
}

body.light-mode .btn-link {
    color: #5b4cff !important;
}

/* ===== BUTTONS - GENERAL ===== */
body.light-mode .btn {
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .btn-primary {
    background: linear-gradient(135deg, #5b4cff, #0095ff) !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .btn-success {
    background: #16a34a !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .btn-danger {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .btn-warning {
    background: #f59e0b !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .btn-info {
    background: #0ea5e9 !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .btn-default,
body.light-mode .btn-secondary,
body.light-mode .btn-outline-secondary {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .btn-outline-primary {
    background: transparent !important;
    color: #5b4cff !important;
    border: 1px solid #5b4cff !important;
}

/* ===== TEXT COLORS - SPECIFIC ===== */
body.light-mode .text-primary {
    color: #5b4cff !important;
}

body.light-mode .text-success {
    color: #16a34a !important;
}

body.light-mode .text-danger {
    color: #dc2626 !important;
}

body.light-mode .text-warning {
    color: #d97706 !important;
}

body.light-mode .text-info {
    color: #0ea5e9 !important;
}

/* ===== FLOATING BUTTONS (FAB) ===== */
body.light-mode .btn-floating .btn {
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}

/* ===== AVATAR / IMAGES IN LISTS ===== */
body.light-mode img[class*="avatar"],
body.light-mode .avatar img {
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}

body.light-mode img.rounded-circle {
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}

/* ===== ICON CIRCLES (emoji/status icons) ===== */
body.light-mode .icon,
body.light-mode [class*="icon-"] {
    box-shadow: none !important;
}

body.light-mode .icon-success,
body.light-mode .bg-success-light {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

body.light-mode .icon-danger,
body.light-mode .bg-danger-light {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

body.light-mode .icon-warning,
body.light-mode .bg-warning-light {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

body.light-mode .icon-info,
body.light-mode .bg-info-light {
    background: #dbeafe !important;
    color: #0ea5e9 !important;
}

/* ===== PAGINATION / SHOW MORE ===== */
body.light-mode .pagination .page-link {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .pagination .page-item.active .page-link {
    background: #5b4cff !important;
    color: #ffffff !important;
    border-color: #5b4cff !important;
}

/* ===== SPECIFIC DATA DISPLAY ===== */
body.light-mode .text-red,
body.light-mode [style*="color: red"],
body.light-mode [style*="color:red"] {
    color: #dc2626 !important;
}

body.light-mode .text-green,
body.light-mode [style*="color: green"],
body.light-mode [style*="color:green"] {
    color: #16a34a !important;
}

/* ===== INLINE STYLE OVERRIDES ===== */
/* Cards with bg-* inline classes */
body.light-mode .card.bg-warning {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
}

body.light-mode .card.bg-danger {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}

body.light-mode .card.bg-info {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
}

body.light-mode .card.bg-success {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}

body.light-mode .card.bg-secondary {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .card.bg-white {
    background: #ffffff !important;
}

/* Strong text inside colored cards */
body.light-mode .card.bg-warning strong,
body.light-mode .card.bg-danger strong,
body.light-mode .card.bg-info strong,
body.light-mode .card.bg-success strong {
    color: #1e293b !important;
}

body.light-mode .card.bg-warning p,
body.light-mode .card.bg-danger p,
body.light-mode .card.bg-info p,
body.light-mode .card.bg-success p {
    color: #475569 !important;
}

/* ===== COUNTER / STATS ===== */
body.light-mode .counter {
    background: linear-gradient(135deg, #5b4cff, #0095ff) !important;
    color: #ffffff !important;
}

/* ===== EMPTY STATE / NO DATA ===== */
body.light-mode .empty-state,
body.light-mode .no-data,
body.light-mode [class*="empty"] {
    color: #94a3b8 !important;
}

/* ===== DROPDOWN MENU ITEMS ===== */
body.light-mode .dropdown-item {
    color: #1e293b !important;
}

body.light-mode .dropdown-item:hover {
    background: #f1f5f9 !important;
}

body.light-mode .dropdown-divider {
    border-color: #e2e8f0 !important;
}

/* ===== THREE DOT MENU ===== */
body.light-mode .dropdown-toggle::after {
    color: #64748b !important;
}

body.light-mode [data-toggle="dropdown"] {
    color: #475569 !important;
}

/* ===== SPECIFIC PAGE FIXES ===== */

/* Izin/Cuti/Overtime - status text */
body.light-mode .status-disetujui,
body.light-mode [class*="disetujui"] {
    color: #16a34a !important;
}

body.light-mode .status-pending,
body.light-mode [class*="pending"] {
    color: #d97706 !important;
}

body.light-mode .status-ditolak,
body.light-mode [class*="ditolak"] {
    color: #dc2626 !important;
}

/* Selengkapnya link */
body.light-mode a[href*="selengkap"],
body.light-mode .selengkapnya,
body.light-mode [class*="selengkap"] {
    color: #5b4cff !important;
}

/* ===== KUNJUNGAN - LOADING CIRCLES ===== */
body.light-mode .spinner-border,
body.light-mode [class*="spinner"] {
    color: #5b4cff !important;
    border-color: #e2e8f0 !important;
    border-top-color: #5b4cff !important;
}

/* Image placeholders */
body.light-mode img[src*="avatar"][src$=".jpg"]:not([src*="data:"]),
body.light-mode img[src*="avatar"][src$=".png"]:not([src*="data:"]) {
    background: #f1f5f9 !important;
    border: 2px solid #e2e8f0 !important;
}

/* ===== TEXTAREA ===== */
body.light-mode textarea,
body.light-mode textarea.form-control {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

/* ===== SELECT / CUSTOM SELECT ===== */
body.light-mode select,
body.light-mode .custom-select {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

/* ===== TABS ===== */
body.light-mode .nav-tabs {
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .nav-tabs .nav-link {
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
}

body.light-mode .nav-tabs .nav-link.active {
    color: #5b4cff !important;
    background: rgba(91,76,255,.06) !important;
    border-bottom: 2px solid #5b4cff !important;
}

/* ===== ALERT BOXES ===== */
body.light-mode .alert-success {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #15803d !important;
}

body.light-mode .alert-danger {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}

body.light-mode .alert-warning {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #a16207 !important;
}

body.light-mode .alert-info {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
}

/* ===== PROGRESS BAR ===== */
body.light-mode .progress {
    background: #f1f5f9 !important;
}

/* ===== TOOLTIP ===== */
body.light-mode .tooltip-inner {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* ===== BOTTOM NAV TEXT ===== */
body.light-mode .appBottomMenu .item strong,
body.light-mode .appBottomMenu strong {
    color: inherit !important;
}


/* ============================================
   FORCE ALL WHITE TEXT TO DARK IN LIGHT MODE
   ============================================ */

/* Nuclear override — catch ALL white/light colored text */
body.light-mode * {
    color: #0f172a;
}

/* Re-apply specific colors that should NOT be dark */
body.light-mode .btn-primary,
body.light-mode .btn-primary *,
body.light-mode .btn-success,
body.light-mode .btn-success *,
body.light-mode .btn-danger,
body.light-mode .btn-danger *,
body.light-mode .btn-warning,
body.light-mode .btn-warning *,
body.light-mode .btn-info,
body.light-mode .btn-info *,
body.light-mode .btn-login,
body.light-mode .btn-login *,
body.light-mode .btn-login-google,
body.light-mode .btn-login-google *,
body.light-mode .action-button,
body.light-mode .action-button *,
body.light-mode .floating-badge,
body.light-mode .floating-badge *,
body.light-mode .counter,
body.light-mode .counter *,
body.light-mode .main-menu .nav-link.active,
body.light-mode .main-menu .nav-link.active *,
body.light-mode .badge-primary,
body.light-mode [class*="btn-primary"],
body.light-mode [class*="bg-default"] {
    color: #ffffff !important;
}

/* Badge text colors */
body.light-mode .badge-success,
body.light-mode .badge-success * {
    color: #15803d !important;
}

body.light-mode .badge-danger,
body.light-mode .badge-danger * {
    color: #dc2626 !important;
}

body.light-mode .badge-warning,
body.light-mode .badge-warning * {
    color: #a16207 !important;
}

body.light-mode .badge-info,
body.light-mode .badge-info * {
    color: #1d4ed8 !important;
}

body.light-mode .badge-secondary,
body.light-mode .badge-secondary * {
    color: #475569 !important;
}

/* Specific text utility classes */
body.light-mode .text-primary,
body.light-mode .text-primary * {
    color: #5b4cff !important;
}

body.light-mode .text-success,
body.light-mode .text-success * {
    color: #16a34a !important;
}

body.light-mode .text-danger,
body.light-mode .text-danger * {
    color: #dc2626 !important;
}

body.light-mode .text-warning,
body.light-mode .text-warning * {
    color: #d97706 !important;
}

body.light-mode .text-info,
body.light-mode .text-info * {
    color: #0ea5e9 !important;
}

body.light-mode .text-muted,
body.light-mode .text-muted * {
    color: #64748b !important;
}

/* Placeholder text */
body.light-mode ::placeholder {
    color: #94a3b8 !important;
}

body.light-mode ::-webkit-input-placeholder {
    color: #94a3b8 !important;
}

/* Links */
body.light-mode a {
    color: #1e293b;
}

body.light-mode a:hover {
    color: #5b4cff !important;
}

/* Material icons inherit parent color */
body.light-mode .material-icons {
    color: inherit !important;
}

/* Floating header icons stay dark */
body.light-mode .floating-icon-btn .material-icons,
body.light-mode .floating-action .material-icons,
body.light-mode .floating-action i {
    color: #1e293b !important;
}

/* Action button icons stay white */
body.light-mode .action-button .material-icons {
    color: #ffffff !important;
}

/* Bottom nav icons */
body.light-mode .appBottomMenu .item .material-icons {
    color: inherit !important;
}

body.light-mode .appBottomMenu .item.active .material-icons {
    color: #5b4cff !important;
}

/* Sidebar icons */
body.light-mode .main-menu .nav-link .material-icons {
    color: #475569 !important;
}

body.light-mode .main-menu .nav-link.active .material-icons {
    color: #ffffff !important;
}

/* Home icon grid */
body.light-mode .home-icon .material-icons {
    color: #5b4cff !important;
}

/* Theme toggle icon */
body.light-mode .theme-toggle-btn .material-icons {
    color: #1e293b !important;
}

/* Clock */
body.light-mode .clock,
body.light-mode .clock-absen,
body.light-mode .digital-clock {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* Inline style color overrides — catch elements with style="color:#fff" etc */
body.light-mode [style*="color:#fff"],
body.light-mode [style*="color: #fff"],
body.light-mode [style*="color:white"],
body.light-mode [style*="color: white"],
body.light-mode [style*="color:#FFF"],
body.light-mode [style*="color: #FFF"] {
    color: #1e293b !important;
}


/* ============================================
   MODAL SCROLL FIX - BOTH DARK & LIGHT MODE
   ============================================ */

/* Modal backdrop scroll */
.modal {
    overflow-y: auto !important;
    padding: 0 !important;
    z-index: 99999 !important;
}

.modal-backdrop {
    z-index: 99998 !important;
}

.modal-open {
    overflow: hidden !important;
}

/* Modal dialog — NOT centered vertically, start from top */
.modal-dialog,
.modal-dialog-centered,
.modalbox .modal-dialog,
.modal-add .modal-dialog {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: auto !important;
    margin: 30px auto !important;
    max-width: 520px !important;
}

/* Modal content — fixed height with internal scroll */
.modal-content,
.modal-add .modal-content,
.modalbox .modal-content {
    max-height: calc(100vh - 80px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Header stays on top */
.modal-header {
    flex-shrink: 0 !important;
    display: flex !important;
    padding: 14px 20px !important;
}

/* Body scrolls */
.modal-body {
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px 20px !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Footer stays at bottom */
.modal-footer {
    flex-shrink: 0 !important;
    display: flex !important;
    padding: 14px 20px !important;
    gap: 10px !important;
}

/* Ensure buttons inside footer are visible */
.modal-footer .btn {
    min-width: 80px !important;
    padding: 10px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 767px) {
    .modal-dialog,
    .modal-dialog-centered,
    .modalbox .modal-dialog,
    .modal-add .modal-dialog {
        margin: 16px 10px !important;
        max-width: calc(100% - 20px) !important;
        align-items: flex-start !important;
        min-height: auto !important;
    }

    .modal-content,
    .modal-add .modal-content,
    .modalbox .modal-content {
        max-height: calc(100vh - 32px) !important;
        border-radius: 16px !important;
    }

    .modal-header {
        padding: 12px 16px !important;
    }

    .modal-body {
        padding: 14px 16px !important;
    }

    .modal-body .form-group {
        margin-bottom: 12px !important;
    }

    .modal-body .form-control,
    .modal-body select.form-control,
    .modal-body textarea.form-control {
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: .85rem !important;
        border-radius: 12px !important;
    }

    .modal-body textarea.form-control {
        min-height: 70px !important;
    }

    .modal-body label,
    .modal-body .form-control-label {
        font-size: .8rem !important;
        margin-bottom: 4px !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        gap: 8px !important;
    }

    .modal-footer .btn {
        min-width: 70px !important;
        padding: 8px 16px !important;
        font-size: .82rem !important;
        border-radius: 12px !important;
    }

    /* File upload area smaller */
    .modal-body .image-upload-wrap {
        padding: 14px 12px !important;
    }

    .modal-body .drag-text h3 {
        font-size: .78rem !important;
    }

    .modal-body .file-upload-image {
        max-height: 120px !important;
    }
}

@media (max-width: 380px) {
    .modal-dialog,
    .modalbox .modal-dialog,
    .modal-add .modal-dialog {
        margin: 10px 8px !important;
        max-width: calc(100% - 16px) !important;
    }

    .modal-content,
    .modal-add .modal-content,
    .modalbox .modal-content {
        max-height: calc(100vh - 20px) !important;
        border-radius: 14px !important;
    }

    .modal-body .form-control {
        min-height: 40px !important;
        font-size: .82rem !important;
    }

    .modal-footer .btn {
        min-width: 60px !important;
        padding: 7px 12px !important;
        font-size: .78rem !important;
    }
}


/* ============================================
   SELECT DROPDOWN FIX - LIGHT MODE
   ============================================ */

body.light-mode select option {
    background: #ffffff !important;
    color: #1e293b !important;
}

body.light-mode select optgroup {
    background: #ffffff !important;
    color: #1e293b !important;
}

/* ============================================
   MODAL - ENSURE FOOTER ABOVE BOTTOM NAV
   ============================================ */

/* Modal must sit above bottom nav */
.modal {
    z-index: 99999 !important;
}

.modal-backdrop {
    z-index: 99998 !important;
}

/* Add extra padding at bottom of modal body so footer isn't hidden behind bottom nav */
.modal-footer {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

@media (max-width: 767px) {
    /* On mobile, add padding to account for bottom nav */
    .modal-dialog {
        margin-bottom: 100px !important;
        padding-bottom: 0 !important;
    }

    .modal-footer {
        padding-bottom: 16px !important;
    }

    /* Modalbox class (used in this project) - fullscreen style fix */
    .modalbox .modal-dialog,
    .modal-add .modal-dialog {
        margin-bottom: 100px !important;
    }
}

/* ============================================
   LIGHT MODE - MODAL SPECIFIC
   ============================================ */

body.light-mode .modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.12) !important;
    color: #1e293b !important;
}

body.light-mode .modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .modal-title {
    color: #0f172a !important;
}

body.light-mode .close {
    color: #475569 !important;
}

body.light-mode .modal-body {
    background: #ffffff !important;
    color: #1e293b !important;
}

body.light-mode .modal-body label,
body.light-mode .modal-body .form-control-label {
    color: #475569 !important;
}

body.light-mode .modal-body .form-control,
body.light-mode .modal-body select,
body.light-mode .modal-body textarea {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .modal-body .form-control:focus,
body.light-mode .modal-body select:focus,
body.light-mode .modal-body textarea:focus {
    border-color: #5b4cff !important;
    box-shadow: 0 0 0 3px rgba(91,76,255,.08) !important;
    background: #ffffff !important;
}

body.light-mode .modal-footer {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

body.light-mode .modal-footer .btn-primary,
body.light-mode .modal-footer .btn-save {
    background: linear-gradient(135deg, #5b4cff, #0095ff) !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .modal-footer .btn-secondary,
body.light-mode .modal-footer .btn-close {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}


/* ============================================
   LIGHT MODE - STRONGER BORDERS / OUTLINES
   ============================================ */

body.light-mode .home-card,
body.light-mode .home-card.button-absent {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .home-card.absen-done-in {
    border: 1.5px solid #10b981 !important;
    background: rgba(16,185,129,.08) !important;
}

body.light-mode .home-card.absen-done-out {
    border: 1.5px solid #ef4444 !important;
    background: rgba(239,68,68,.08) !important;
}

body.light-mode .home-icon {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .card {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .form-control,
body.light-mode select,
body.light-mode textarea {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .form-control:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
    border: 1.5px solid #5b4cff !important;
}

body.light-mode .floating-header-inner {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .appBottomMenu {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .floating-icon-btn,
body.light-mode .floating-action,
body.light-mode .theme-toggle-btn {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .dropdown-menu {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .modal-content {
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .list-group-item {
    border: 1px solid #e2e8f0 !important;
}

body.light-mode hr {
    border-top: 1.5px solid #cbd5e1 !important;
}


/* ============================================
   LIGHT MODE - NEW HOME DESIGN
   ============================================ */

/* Hero Card */
body.light-mode .hero-card {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 50%, #312e81 100%) !important;
    border: 1.5px solid rgba(99,102,241,.3) !important;
}

/* Absen Cards */
body.light-mode .absen-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .absen-card-icon {
    background: #f1f5f9 !important;
}

body.light-mode .absen-card-icon .material-icons {
    color: #64748b !important;
}

body.light-mode .absen-card-info strong {
    color: #0f172a !important;
}

body.light-mode .absen-card-info .absen-time {
    color: #1e293b !important;
}

body.light-mode .absen-card-info small {
    color: #64748b !important;
}

body.light-mode .absen-card.absen-done-in {
    border-color: #10b981 !important;
    background: rgba(16,185,129,.05) !important;
}

body.light-mode .absen-card.absen-done-in .absen-card-info .absen-time {
    color: #10b981 !important;
}

body.light-mode .absen-card.absen-done-out {
    border-color: #ef4444 !important;
    background: rgba(239,68,68,.05) !important;
}

body.light-mode .absen-card.absen-done-out .absen-card-info .absen-time {
    color: #ef4444 !important;
}

/* Menu Grid */
body.light-mode .menu-grid-item {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
}

body.light-mode .menu-grid-item:hover {
    border-color: #7b61ff !important;
    background: rgba(123,97,255,.03) !important;
    box-shadow: 0 8px 24px rgba(123,97,255,.08) !important;
}

body.light-mode .menu-grid-icon {
    background: linear-gradient(135deg, rgba(123,97,255,.08), rgba(99,102,241,.06)) !important;
    border: 1px solid rgba(123,97,255,.15) !important;
}

body.light-mode .menu-grid-icon .material-icons {
    color: #5b4cff !important;
}

body.light-mode .menu-grid-item strong {
    color: #0f172a !important;
}

body.light-mode .menu-grid-item small {
    color: #64748b !important;
}


/* ============================================
   HERO CARD - TEXT ALWAYS WHITE (BOTH MODES)
   Hero card has dark/colored gradient bg so text must stay white
   ============================================ */

body.light-mode .hero-card,
body.light-mode .hero-card * {
    color: #ffffff !important;
}

body.light-mode .hero-greeting {
    color: rgba(255,255,255,.8) !important;
}

body.light-mode .hero-name {
    color: #ffffff !important;
}

body.light-mode .hero-position {
    color: rgba(255,255,255,.7) !important;
}

body.light-mode .hero-clock {
    background: rgba(0,0,0,.25) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
}

body.light-mode .hero-clock .material-icons {
    color: rgba(255,255,255,.8) !important;
}

body.light-mode .hero-clock span {
    color: #ffffff !important;
}

/* Light mode hero gradients — slightly brighter for contrast */
body.light-mode .hero-card.hero-pagi {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #9a3412 100%) !important;
    border-color: rgba(245,158,11,.4) !important;
}

body.light-mode .hero-card.hero-siang {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e3a8a 100%) !important;
    border-color: rgba(37,99,235,.4) !important;
}

body.light-mode .hero-card.hero-sore {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 50%, #7c2d12 100%) !important;
    border-color: rgba(234,88,12,.4) !important;
}

body.light-mode .hero-card.hero-malam {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 50%, #1e1b4b 100%) !important;
    border-color: rgba(67,56,202,.4) !important;
}


/* ============================================
   LIGHT MODE - IZIN/CUTI/OVERTIME LIST CARDS
   ============================================ */

body.light-mode .postList .card p,
body.light-mode .postList .card span,
body.light-mode .postList .card div,
body.light-mode .postList .card small,
body.light-mode .postList .card h6 {
    color: #0f172a !important;
}

body.light-mode .postList .card .text-muted,
body.light-mode .postList .card .text-secondary {
    color: #334155 !important;
}

body.light-mode .postList .card .text-success,
body.light-mode .badge-success {
    color: #15803d !important;
    background: rgba(34,197,94,.1) !important;
    border-color: rgba(34,197,94,.3) !important;
}

body.light-mode .postList .card .text-danger,
body.light-mode .badge-danger {
    color: #dc2626 !important;
    background: rgba(239,68,68,.1) !important;
    border-color: rgba(239,68,68,.3) !important;
}

body.light-mode .postList .card .text-warning,
body.light-mode .badge-warning {
    color: #a16207 !important;
    background: rgba(245,158,11,.1) !important;
    border-color: rgba(245,158,11,.3) !important;
}

body.light-mode .postList .card .text-info,
body.light-mode .badge-info {
    color: #1d4ed8 !important;
    background: rgba(59,130,246,.1) !important;
    border-color: rgba(59,130,246,.3) !important;
}

/* Badge status specific */
body.light-mode .badge-status-pending {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}

body.light-mode .badge-status-approved {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}

body.light-mode .badge-status-rejected {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

/* Selengkapnya button */
body.light-mode .btn-expand-detail,
body.light-mode a[class*="selengkap"],
body.light-mode .postList .card a {
    color: #2563eb !important;
}


/* ===== ABSEN CARD OUTLINE COLORS ===== */
body.light-mode .absen-card.card-in {
    border: 2px solid #22c55e !important;
}

body.light-mode .absen-card.card-out {
    border: 2px solid #ef4444 !important;
}

body.light-mode .absen-card.absen-done-in {
    background: #16a34a !important;
    border-color: #16a34a !important;
}

body.light-mode .absen-card.absen-done-in *,
body.light-mode .absen-card.absen-done-in .absen-card-info strong,
body.light-mode .absen-card.absen-done-in .absen-card-info .absen-time,
body.light-mode .absen-card.absen-done-in .absen-card-info small,
body.light-mode .absen-card.absen-done-in .absen-card-icon .material-icons {
    color: #ffffff !important;
}

body.light-mode .absen-card.absen-done-in .absen-card-icon {
    background: rgba(255,255,255,.25) !important;
    border: none !important;
}

body.light-mode .absen-card.absen-done-out {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

body.light-mode .absen-card.absen-done-out *,
body.light-mode .absen-card.absen-done-out .absen-card-info strong,
body.light-mode .absen-card.absen-done-out .absen-card-info .absen-time,
body.light-mode .absen-card.absen-done-out .absen-card-info small,
body.light-mode .absen-card.absen-done-out .absen-card-icon .material-icons {
    color: #ffffff !important;
}

body.light-mode .absen-card.absen-done-out .absen-card-icon {
    background: rgba(255,255,255,.25) !important;
    border: none !important;
}


/* ===== FIX: Card header icon avatar ===== */
body.light-mode .subtitle .avatar,
body.light-mode .card-header .avatar.bg-default-light {
    background: rgba(91,76,255,.1) !important;
    border: none !important;
    box-shadow: none !important;
}

body.light-mode .subtitle .avatar .material-icons,
body.light-mode .card-header .avatar.bg-default-light .material-icons {
    color: #5b4cff !important;
}

/* ===== FIX: Profile photo border di light mode ===== */
body.light-mode .profile-photo-img {
    border-color: rgba(91,76,255,.3) !important;
    box-shadow: 0 4px 16px rgba(91,76,255,.12) !important;
}

/* ===== FIX: Setting avatar border di light mode ===== */
body.light-mode .setting-avatar {
    border-color: rgba(91,76,255,.25) !important;
    box-shadow: 0 4px 16px rgba(91,76,255,.1) !important;
}