/* ============================================ */
/* DARK MODE - KOMPLETNA IMPLEMENTACIJA */
/* ============================================ */

/* ============================================ */
/* 1. OSNOVNE BOJE */
/* ============================================ */

:root {
    /* OSNOVNE BOJE */
    --bg-body: #0f0f1a;
    --bg-primary: #12121f;
    --bg-secondary: #1a1a2e;
    --bg-card: #1e1e32;
    --bg-card-hover: #252540;
    --bg-input: #252540;
    --bg-input-hover: #2d2d4a;
    --bg-input-focus: #2d2d4a;
    --bg-input-disabled: #161625;
    --bg-table: #161625;
    --bg-table-stripe: #1a1a2e;
    --bg-table-hover: #252540;
    --bg-table-header: #0a0a15;
    --bg-dropdown: #1a1a2e;
    --bg-dropdown-hover: #252540;
    --bg-modal: #161625;
    --bg-modal-header: #0a0a15;
    --bg-modal-footer: #0a0a15;
    --bg-alert: #1a1a2e;
    --bg-tooltip: #1a1a2e;
    --bg-popover: #1a1a2e;
    /* TEKST */
    --text-primary: #e8e8f0;
    --text-secondary: #b8b8d0;
    --text-muted: #8888aa;
    --text-light: #f0f0f8;
    --text-white: #ffffff;
    --text-link: #6a9aff;
    --text-link-hover: #8aafff;
    --text-input: #e8e8f0;
    --text-placeholder: #8888aa;
    /* BORDERS */
    --border-color: #2a2a4a;
    --border-light: #1e1e35;
    --border-input: #2a2a4a;
    --border-input-focus: #4a7aff;
    --border-table: #2a2a4a;
    /* FOOTER - SPECIFIČNO */
    --footer-bg: #0a0a15;
    --footer-text: rgba(200,200,220,0.8);
    --footer-text-hover: #ffffff;
    --footer-border: #1a1a2e;
    /* IKONE - FILTER ZA INVERT */
    --icon-filter: none;
}

/* ============================================ */
/* 2. GLOBALNI STILOVI */
/* ============================================ */

html, body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================================ */
/* 3. FOOTER - POTPUNO POPRAVLJEN */
/* ============================================ */

.footer {
    background: linear-gradient(135deg, #0a0a15 0%, #12121f 100%) !important;
    color: rgba(200, 200, 220, 0.85) !important;
    border-top: 1px solid #1a1a2e !important;
    padding: 2rem 0 !important;
    margin-top: 50px !important;
}

    .footer .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .footer .row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .footer .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .footer .footer-logo {
        height: 70px !important;
        max-height: 70px !important;
        width: auto !important;
        max-width: 180px !important;
        object-fit: contain !important;
        display: inline-block !important;
    }

    .footer .moj-logo-footer {
        height: 55px !important;
        max-height: 55px !important;
        width: auto !important;
        max-width: 140px !important;
        object-fit: contain !important;
        display: inline-block !important;
    }

    .footer .footer-logo-text {
        color: rgba(200, 200, 220, 0.85) !important;
    }

        .footer .footer-logo-text p {
            color: rgba(200, 200, 220, 0.85) !important;
            margin-bottom: 0.25rem !important;
            font-size: 1rem !important;
        }

        .footer .footer-logo-text small {
            color: rgba(200, 200, 220, 0.6) !important;
            font-size: 0.8rem !important;
        }

        .footer .footer-logo-text .fw-bold {
            color: #e8e8f0 !important;
        }

    .footer a {
        color: rgba(200, 200, 220, 0.8) !important;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

        .footer a:hover {
            color: #ffffff !important;
            text-decoration: underline !important;
        }

    .footer .fa-facebook,
    .footer .fa-envelope {
        color: rgba(200, 200, 220, 0.7) !important;
        transition: all 0.2s ease;
    }

        .footer .fa-facebook:hover,
        .footer .fa-envelope:hover {
            color: #ffffff !important;
        }

/* RESPONSIVE FOOTER */
@media (max-width: 768px) {
    .footer .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center !important;
    }

    .footer .text-md-start {
        text-align: center !important;
    }

    .footer .text-md-end {
        text-align: center !important;
    }

    .footer .footer-logo {
        height: 55px !important;
        max-height: 55px !important;
        margin-bottom: 10px !important;
    }

    .footer .moj-logo-footer {
        height: 45px !important;
        max-height: 45px !important;
        margin-top: 10px !important;
    }

    .footer .d-flex {
        justify-content: center !important;
    }
}

/* ============================================ */
/* 4. IKONE - POPRAVAK ZA ADMIN */
/* ============================================ */

/* IKONE U NAVBARU I DROPDOWNU - NE INVERTIRAJ */
.navbar .fa,
.navbar .fas,
.navbar .far,
.navbar .fab,
.navbar i,
.dropdown-item .fa,
.dropdown-item .fas,
.dropdown-item .far,
.dropdown-item .fab,
.dropdown-item i {
    filter: none !important;
    -webkit-filter: none !important;
}

/* IKONE U KARTICAMA - NE INVERTIRAJ */
.card .fa,
.card .fas,
.card .far,
.card .fab,
.card i,
.dashboard-card .fa,
.dashboard-card .fas,
.dashboard-card i {
    filter: none !important;
    -webkit-filter: none !important;
}

/* IKONE U GUMBOVIMA - NE INVERTIRAJ */
.btn .fa,
.btn .fas,
.btn .far,
.btn .fab,
.btn i {
    filter: none !important;
    -webkit-filter: none !important;
}

/* IKONE U TABLICAMA - NE INVERTIRAJ */
.table .fa,
.table .fas,
.table .far,
.table .fab,
.table i {
    filter: none !important;
    -webkit-filter: none !important;
}

/* SAMO SVG SLIKE KOJE SU LOGOTIPOVI - INVERTIRAJ */
img[src*=".svg"]:not(.no-invert):not(.footer-logo):not(.moj-logo-footer) {
    filter: invert(1) brightness(1.2) !important;
}

/* LOGOTIPOVI - NE INVERTIRAJ */
.footer-logo,
.moj-logo-footer,
img.no-invert {
    filter: none !important;
    -webkit-filter: none !important;
}

/* ============================================ */
/* 5. TABLICE - POTPUNO TAMNE */
/* ============================================ */

.table {
    color: var(--text-primary) !important;
    background-color: var(--bg-table) !important;
    border-color: var(--border-table) !important;
}

    .table thead th {
        background-color: var(--bg-table-header) !important;
        color: var(--text-primary) !important;
        border-bottom: 2px solid var(--border-table) !important;
        font-weight: 600;
        padding: 12px 10px !important;
        white-space: nowrap;
    }

    .table tbody td {
        color: var(--text-primary) !important;
        border-color: var(--border-table) !important;
        padding: 10px 8px !important;
        vertical-align: middle;
    }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-table-stripe) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--bg-table) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--bg-table-hover) !important;
}

/* ============================================ */
/* 6. INPUTI U TABLICAMA */
/* ============================================ */

.table td input,
.table td select,
.table td textarea,
.table td .form-control,
.table td .form-select {
    background-color: var(--bg-input) !important;
    color: var(--text-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
}

    .table td input:focus,
    .table td select:focus,
    .table td .form-control:focus,
    .table td .form-select:focus {
        background-color: var(--bg-input-focus) !important;
        border-color: var(--border-input-focus) !important;
        box-shadow: 0 0 0 0.2rem rgba(74, 122, 255, 0.25) !important;
        color: var(--text-input) !important;
    }

    .table td input:disabled,
    .table td select:disabled,
    .table td .form-control:disabled {
        background-color: var(--bg-input-disabled) !important;
        color: var(--text-muted) !important;
        opacity: 0.7;
    }

    .table td input::placeholder {
        color: var(--text-placeholder) !important;
    }

/* ============================================ */
/* 7. INPUT BROJEVI - SPECIFIČNO ZA DODJELU */
/* ============================================ */

input[type="number"] {
    background-color: var(--bg-input) !important;
    color: var(--text-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}

    input[type="number"]:focus {
        background-color: var(--bg-input-focus) !important;
        border-color: var(--border-input-focus) !important;
        box-shadow: 0 0 0 0.2rem rgba(74, 122, 255, 0.25) !important;
    }

    input[type="number"]:disabled {
        background-color: var(--bg-input-disabled) !important;
        color: var(--text-muted) !important;
        opacity: 0.7;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        opacity: 0.5;
    }

/* ============================================ */
/* 8. SELECTI */
/* ============================================ */

select.form-select,
select.form-control {
    background-color: var(--bg-input) !important;
    color: var(--text-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
}

    select.form-select option,
    select.form-control option {
        background-color: var(--bg-dropdown) !important;
        color: var(--text-primary) !important;
    }

    select.form-select:focus,
    select.form-control:focus {
        background-color: var(--bg-input-focus) !important;
        border-color: var(--border-input-focus) !important;
        box-shadow: 0 0 0 0.2rem rgba(74, 122, 255, 0.25) !important;
    }

/* ============================================ */
/* 9. CHECKBOX I RADIO */
/* ============================================ */

.form-check-input {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
}

    .form-check-input:checked {
        background-color: var(--border-input-focus) !important;
        border-color: var(--border-input-focus) !important;
    }

    .form-check-input:focus {
        border-color: var(--border-input-focus) !important;
        box-shadow: 0 0 0 0.2rem rgba(74, 122, 255, 0.25);
    }

/* ============================================ */
/* 10. KARTICE */
/* ============================================ */

.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}

.card-header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-footer {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* ============================================ */
/* 11. MODALI */
/* ============================================ */

.modal-content {
    background-color: var(--bg-modal) !important;
    border: 1px solid var(--border-color) !important;
}

.modal-header {
    background-color: var(--bg-modal-header) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

    .modal-header .btn-close {
        filter: invert(1) brightness(2);
    }

.modal-footer {
    background-color: var(--bg-modal-footer) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* ============================================ */
/* 12. DROPDOWN */
/* ============================================ */

.dropdown-menu {
    background-color: var(--bg-dropdown) !important;
    border: 1px solid var(--border-color) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

    .dropdown-item:hover {
        background-color: var(--bg-dropdown-hover) !important;
        color: #ffffff !important;
    }

/* ============================================ */
/* 13. TABOVI */
/* ============================================ */

.nav-tabs {
    border-bottom: 2px solid var(--border-color) !important;
    background-color: var(--bg-secondary) !important;
}

    .nav-tabs .nav-link {
        color: var(--text-secondary) !important;
        border: none !important;
        border-bottom: 3px solid transparent !important;
    }

        .nav-tabs .nav-link.active {
            color: var(--text-primary) !important;
            border-bottom-color: var(--border-input-focus) !important;
            background: transparent !important;
        }

.tab-content {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    padding: 20px !important;
}

/* ============================================ */
/* 14. ALERTI */
/* ============================================ */

.alert {
    background-color: var(--bg-alert) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.alert-success {
    background-color: rgba(46, 204, 113, 0.10) !important;
    border-color: rgba(46, 204, 113, 0.20) !important;
    color: #7ddfa0 !important;
}

.alert-danger {
    background-color: rgba(231, 76, 60, 0.10) !important;
    border-color: rgba(231, 76, 60, 0.20) !important;
    color: #f5a0a8 !important;
}

.alert-warning {
    background-color: rgba(243, 156, 18, 0.10) !important;
    border-color: rgba(243, 156, 18, 0.20) !important;
    color: #f5c97a !important;
}

.alert-info {
    background-color: rgba(26, 188, 156, 0.10) !important;
    border-color: rgba(26, 188, 156, 0.20) !important;
    color: #7dd8e0 !important;
}

.alert .btn-close {
    filter: invert(1) brightness(2);
}

/* ============================================ */
/* 15. BADGE */
/* ============================================ */

.badge-primary {
    background-color: #4a7aff !important;
    color: #ffffff !important;
}

.badge-secondary {
    background-color: #2a2a4a !important;
    color: #ffffff !important;
}

.badge-success {
    background-color: #2ecc71 !important;
    color: #ffffff !important;
}

.badge-danger {
    background-color: #e74c3c !important;
    color: #ffffff !important;
}

.badge-warning {
    background-color: #f39c12 !important;
    color: #1a1a2e !important;
}

.badge-info {
    background-color: #1abc9c !important;
    color: #ffffff !important;
}

.badge-light {
    background-color: #2a2a4a !important;
    color: #e8e8f0 !important;
}

.badge-dark {
    background-color: #0a0a15 !important;
    color: #ffffff !important;
}

/* ============================================ */
/* 16. PAGINACIJA */
/* ============================================ */

.page-link {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

    .page-link:hover {
        background-color: var(--bg-table-hover) !important;
        color: #ffffff !important;
    }

.page-item.active .page-link {
    background: linear-gradient(135deg, #4a7aff 0%, #2c5fdc 100%) !important;
    border-color: #4a7aff !important;
    color: #ffffff !important;
}

/* ============================================ */
/* 17. HERO SEKCIJA */
/* ============================================ */

.hero-section {
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 50%, #12121f 100%) !important;
    color: #e8e8f0 !important;
    border-bottom: 1px solid #1a1a2e !important;
}

.hero-title {
    color: #e8e8f0 !important;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================ */
/* 18. SCROLLBAR */
/* ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #161625;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #2a2a4a;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #3a3a5a;
    }

* {
    scrollbar-width: thin;
    scrollbar-color: #2a2a4a #161625;
}

/* ============================================ */
/* 19. LINKOVI */
/* ============================================ */

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: #6a9aff !important;
}

    a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
        color: #8aafff !important;
    }

/* ============================================ */
/* 20. RESPONSIVE */
/* ============================================ */

@media (max-width: 768px) {
    .table {
        font-size: 0.85rem !important;
    }

        .table thead th,
        .table tbody td {
            padding: 6px 4px !important;
        }

    .form-control,
    .form-select {
        font-size: 0.9rem !important;
    }

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

    .hero-section {
        padding: 40px 0 !important;
    }

    .hero-title {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 480px) {
    .table {
        font-size: 0.75rem !important;
    }

        .table thead th,
        .table tbody td {
            padding: 4px 3px !important;
        }

    .card-body {
        padding: 12px !important;
    }

    .badge {
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
    }

    .btn {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }
}

/* ============================================ */
/* 21. BOOTSTRAP OVERRIDE */
/* ============================================ */

.bg-white {
    background-color: var(--bg-card) !important;
}

.bg-light {
    background-color: var(--bg-secondary) !important;
}

.bg-dark {
    background-color: var(--bg-body) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.border {
    border-color: var(--border-color) !important;
}

/* ============================================ */
/* 22. SPECIFIČNI ELEMENTI */
/* ============================================ */

.header-card {
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%) !important;
    color: #e8e8f0 !important;
    border: 1px solid #1a1a2e !important;
}

.dashboard-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

    .dashboard-card .card-icon {
        color: #4a7aff !important;
    }

.razred-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

    .razred-card:hover {
        background: var(--bg-card-hover) !important;
    }

.dom-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

    .dom-item:hover {
        background: var(--bg-card-hover) !important;
    }

.filter-bar {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* ============================================ */
/* 23. TOAST NOTIFIKACIJE */
/* ============================================ */

.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
    max-width: 450px;
}

    .toast-notification.show {
        opacity: 1;
        transform: translateX(0);
    }

.toast-success {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
}

.toast-error {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
}

.toast-warning {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%) !important;
}

.toast-info {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%) !important;
}

/* ============================================ */
/* PRISILNO DARK MODE ZA SVE TABLICE - OVERRIDE */
/* ============================================ */

/* Osnovna tablica */
body.dark-mode .table,
body.dark-mode .table-striped,
body.dark-mode .table-bordered,
body.dark-mode .table-hover,
body.dark-mode .table-sm,
body.dark-mode .table-responsive .table,
body.dark-mode .table-responsive .table-striped {
    background-color: #1a1a2e !important;
    color: #e8e8f0 !important;
    border-color: #2a2a4a !important;
}

    /* Glava tablice */
    body.dark-mode .table thead,
    body.dark-mode .table-striped thead,
    body.dark-mode .table-bordered thead,
    body.dark-mode .table-hover thead,
    body.dark-mode .table thead th,
    body.dark-mode .table-striped thead th,
    body.dark-mode .table-bordered thead th,
    body.dark-mode .table-hover thead th {
        background-color: #0a0a12 !important;
        color: #e8e8f0 !important;
        border-color: #2a2a4a !important;
    }

    /* Redovi tablice */
    body.dark-mode .table tbody,
    body.dark-mode .table-striped tbody,
    body.dark-mode .table-bordered tbody,
    body.dark-mode .table-hover tbody,
    body.dark-mode .table tbody tr,
    body.dark-mode .table-striped tbody tr,
    body.dark-mode .table-bordered tbody tr,
    body.dark-mode .table-hover tbody tr {
        background-color: #1a1a2e !important;
        color: #e8e8f0 !important;
    }

        body.dark-mode .table tbody td,
        body.dark-mode .table-striped tbody td,
        body.dark-mode .table-bordered tbody td,
        body.dark-mode .table-hover tbody td {
            background-color: #1a1a2e !important;
            color: #e8e8f0 !important;
            border-color: #2a2a4a !important;
        }

        /* Neparni redovi (striped) */
        body.dark-mode .table-striped tbody tr:nth-of-type(odd),
        body.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
        body.dark-mode .table tbody tr:nth-of-type(odd) {
            background-color: #161625 !important;
        }

            body.dark-mode .table-striped tbody tr:nth-of-type(odd) td,
            body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) td,
            body.dark-mode .table tbody tr:nth-of-type(odd) td {
                background-color: #161625 !important;
            }

        /* Parni redovi (striped) */
        body.dark-mode .table-striped tbody tr:nth-of-type(even),
        body.dark-mode .table-striped > tbody > tr:nth-of-type(even),
        body.dark-mode .table tbody tr:nth-of-type(even) {
            background-color: #1a1a2e !important;
        }

            body.dark-mode .table-striped tbody tr:nth-of-type(even) td,
            body.dark-mode .table-striped > tbody > tr:nth-of-type(even) td,
            body.dark-mode .table tbody tr:nth-of-type(even) td {
                background-color: #1a1a2e !important;
            }

        /* Hover efekt */
        body.dark-mode .table-hover tbody tr:hover,
        body.dark-mode .table-hover > tbody > tr:hover,
        body.dark-mode .table tbody tr:hover {
            background-color: #252540 !important;
        }

            body.dark-mode .table-hover tbody tr:hover td,
            body.dark-mode .table-hover > tbody > tr:hover td,
            body.dark-mode .table tbody tr:hover td {
                background-color: #252540 !important;
            }

    /* Inputi unutar tablice */
    body.dark-mode .table .form-control,
    body.dark-mode .table .form-select,
    body.dark-mode .table .form-control-sm,
    body.dark-mode .table .form-select-sm,
    body.dark-mode .table td .form-control,
    body.dark-mode .table td .form-select {
        background-color: #252540 !important;
        color: #e8e8f0 !important;
        border-color: #2a2a4a !important;
    }

        body.dark-mode .table .form-control:focus,
        body.dark-mode .table .form-select:focus,
        body.dark-mode .table td .form-control:focus,
        body.dark-mode .table td .form-select:focus {
            background-color: #2d2d4a !important;
            border-color: #4a7aff !important;
            color: #e8e8f0 !important;
            box-shadow: 0 0 0 0.25rem rgba(74, 122, 255, 0.25) !important;
        }

        body.dark-mode .table .form-control::placeholder,
        body.dark-mode .table td .form-control::placeholder {
            color: #8888aa !important;
            opacity: 1 !important;
        }

    /* Gumbi unutar tablice */
    body.dark-mode .table .btn {
        color: #e8e8f0 !important;
    }

    body.dark-mode .table .btn-outline-secondary {
        border-color: #5d6d7e !important;
        color: #b8b8d0 !important;
    }

        body.dark-mode .table .btn-outline-secondary:hover {
            background-color: #5d6d7e !important;
            color: #ffffff !important;
        }

    body.dark-mode .table .btn-outline-danger {
        border-color: #e74c3c !important;
        color: #e74c3c !important;
    }

        body.dark-mode .table .btn-outline-danger:hover {
            background-color: #e74c3c !important;
            color: #ffffff !important;
        }

    body.dark-mode .table .btn-outline-success {
        border-color: #2ecc71 !important;
        color: #2ecc71 !important;
    }

        body.dark-mode .table .btn-outline-success:hover {
            background-color: #2ecc71 !important;
            color: #0a0a15 !important;
        }

    body.dark-mode .table .btn-primary {
        background: linear-gradient(135deg, #2c5fdc, #4a7aff) !important;
        border: none !important;
        color: #ffffff !important;
    }

        body.dark-mode .table .btn-primary:hover {
            background: linear-gradient(135deg, #4a7aff, #5a8aff) !important;
            color: #ffffff !important;
        }

    body.dark-mode .table .btn-success {
        background: linear-gradient(135deg, #1e8449, #2ecc71) !important;
        border: none !important;
        color: #0a0a15 !important;
    }

        body.dark-mode .table .btn-success:hover {
            background: linear-gradient(135deg, #2ecc71, #3ddc81) !important;
            color: #0a0a15 !important;
        }

    body.dark-mode .table .btn-info {
        background: linear-gradient(135deg, #138d75, #1abc9c) !important;
        border: none !important;
        color: #ffffff !important;
    }

        body.dark-mode .table .btn-info:hover {
            background: linear-gradient(135deg, #1abc9c, #48c9b0) !important;
            color: #ffffff !important;
        }

    body.dark-mode .table .btn-secondary {
        background: linear-gradient(135deg, #3d4d5e, #5d6d7e) !important;
        border: none !important;
        color: #ffffff !important;
    }

        body.dark-mode .table .btn-secondary:hover {
            background: linear-gradient(135deg, #5d6d7e, #6d7d8e) !important;
            color: #ffffff !important;
        }

    /* Badge unutar tablice */
    body.dark-mode .table .badge {
        font-weight: 600 !important;
    }

        body.dark-mode .table .badge.bg-success {
            background-color: #2ecc71 !important;
            color: #0a0a15 !important;
        }

        body.dark-mode .table .badge.bg-danger {
            background-color: #e74c3c !important;
            color: #ffffff !important;
        }

        body.dark-mode .table .badge.bg-warning {
            background-color: #f39c12 !important;
            color: #212529 !important;
        }

        body.dark-mode .table .badge.bg-info {
            background-color: #1abc9c !important;
            color: #ffffff !important;
        }

        body.dark-mode .table .badge.bg-secondary {
            background-color: #3a3a5a !important;
            color: #e8e8f0 !important;
        }

        body.dark-mode .table .badge.bg-primary {
            background-color: #4a7aff !important;
            color: #ffffff !important;
        }

        body.dark-mode .table .badge.bg-purple {
            background-color: #8e44ad !important;
            color: #ffffff !important;
        }

    /* Paginacija unutar tablice */
    body.dark-mode .table .pagination .page-link {
        background-color: #1a1a2e !important;
        border-color: #2a2a4a !important;
        color: #b8b8d0 !important;
    }

        body.dark-mode .table .pagination .page-link:hover {
            background-color: #22223d !important;
            color: #e8e8f0 !important;
        }

    body.dark-mode .table .pagination .page-item.active .page-link {
        background: linear-gradient(135deg, #4a7aff, #2c5fdc) !important;
        border-color: #4a7aff !important;
        color: #ffffff !important;
    }
/* ============================================ */
/* KRAJ DARK MODE CSS */
/* ============================================ */