.fi-sidebar .fi-main-sidebar .fi-sidebar-nav .fi-sidebar-item.fi-sidebar-item-active {
    color: white !important;
}

/* Sidebar linkovi */
.fi-sidebar-item a {
    color: #d1d5db !important;
}

.fi-sidebar-item a:hover {
    color: white !important;
}


/* removed custom sidebar background color to use default theme */


.testera .fi-section {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}


.fi-ta-ctn {
    border-radius: 0px !important;
}


.testera .fi-section>div {
    padding: 0 !important;
    margin: 0 !important;
}


.gridoje {
    background-color: none !important;
    border-color: blue !important;
    border: 1px solid thin !important;

}

fi-ta-table>thead {
    background-color: red !important;
}

/* Boja pozadine za header red tabele */
.fi-ta-table>thead {
    /*background-color: #0C132C !important;
    /* Indigo-600 */
    color: white !important;
}

/* Ako Filament koristi zasebne klase za ćelije */





.top-igraca-table thead {
    /* background-color: #0C132C !important; */
    color: white !important;
}

/* Tanka linija (border) na desnoj strani sidebara */
.fi-main-sidebar {
    border-right: 1px solid #e0e0e0 !important;
    /* tailwind gray-400 - tamnije */
    background-color: #eff3f7 !important;

}

.top-igraca-table .fi-ta-header-cell-label {
    color: white !important;
}

.fi-ta-header {
    /*background-color: #3358dd !important;*/
    /* Indigo-700 */

    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    text-align: center !important;
}


.fi-ta-header-heading {


    font-weight: bold !important;

}


.top-igraca-table .fi-ta-header-cell-label {
    color: white !important;
}

.cursor-pointer,
.cursor-pointer * {
    text-align: center !important;
}

.fi-wi-stats-overview-stat.cursor-pointer * {
    text-align: center !important;
}

.fi-wi-stats-overview-stat-content {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: medium !important;
    font-weight: bold !important;
}

.fi-ta-col {
    max-height: 60px !important;
    padding: 0px !important;

}

.fi-topbar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

/* Pozicionira dropdown tačno ispred avatara */
.fi-topbar-end .topbar-status-filter {
    position: absolute;
    right: 60px;
    /* pomjeri 60px lijevo od desnog ruba */
    top: 50%;
    /* vertikalno centriranje */
    transform: translateY(-50%);
    z-index: 150;
    min-width: 150px;
}

/* Stilizacija select elementa */
/* ok, samo  mi treba pozicija prije avatara */



.topbar-status-filter select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;

    padding: 0.5rem 2rem 0.5rem 0.75rem;
    /* desni padding za strelicu */
    border-radius: 0.375rem;
    /* Rounded-md */
    font-size: 0.875rem;
    /* Text-sm */


    /* Gray-700 */
    cursor: pointer;

    box-sizing: border-box;
    right: 50px;
    width: 100px;
    position: absolute;
    margin-top: -18px;
    z-index: 15;

}

.fi-topbar-end {
    display: flex;
    flex-direction: row-reverse;
}

.cursor-pointer {
    cursor: pointer;
}

/* Responsive visibility: hide modal button on large screens; hide toolbar controls on small */
@media (min-width: 1024px) {
    .global-modal-button {
        display: none !important;
    }
}

/* Sakrij toolbar kontrole (select dropdowns) na mobilnom */
@media (max-width: 1023px) {

    /* Sakriva SVE elemente u topbar-end */
    .fi-topbar-end>* {
        display: none !important;
    }

    /* Vrati samo user dropdown/avatar */
    .fi-topbar-end .fi-dropdown,
    .fi-topbar-end button[aria-label*="User"],
    .fi-topbar-end [data-slot="trigger"] {
        display: flex !important;
    }
}

/* Floating action button for mobile */
.global-modal-fab {
    position: fixed;
    right: 3%;
    bottom: 10%;
    z-index: 1000;
    display: none;
}

/* make the button circular with centered icon */
.global-modal-fab .fi-btn {
    width: 56px;
    height: 56px;
    border-radius: 9999px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1023px) {
    .global-modal-fab {
        display: block !important;
    }
}

/* Mobile Bottom Navigation Footer */
.mobile-footer-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1500;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.07), 0 1.5px 0 #ececec;
    border-top: 1px solid #e6e7e8;
    padding: 6px 8px;
}

.footer-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.footer-btn {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: none;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    color: #6366f1;
    font-size: 1.4rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.footer-btn:active {
    background: #e0e7ff;
}

.footer-icon {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.footer-label {
    font-size: 10px;
    color: #6b7280;
    font-weight: 500;
    text-align: center;
    line-height: 1;
}

@media (min-width: 769px) {
    .mobile-footer-nav {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-footer-nav {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    .moja-custom-klasa .filament-tables-container {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .fi-header {
        text-align: center;
    }

    .fi-header-actions-ctn {
        text-align: center !important;
        margin-left: 10%;
    }

    .fi-ta-header-toolbar {
        margin-right: 12%;
    }
}

.fi-section-content {
    padding: 0px !important;
}

/* Toolbar kontrole sa labelama */
.toolbar-control-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 16px;
    gap: 8px;
}

.toolbar-control-wrapper label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
    min-width: fit-content;
}

.toolbar-control-wrapper .toolbar-control-inner {
    min-width: 140px;
    max-width: 180px;
}

.toolbar-control-wrapper .fi-fo-field-wrp {
    margin: 0 !important;
}

.toolbar-control-wrapper .fi-input-wrp,
.toolbar-control-wrapper .fi-select-wrp {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.toolbar-control-wrapper .fi-input-wrp:focus-within,
.toolbar-control-wrapper .fi-select-wrp:focus-within {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.toolbar-control-wrapper .fi-select,
.toolbar-control-wrapper select,
.toolbar-control-wrapper input {
    font-size: 0.875rem !important;
    padding: 6px 10px !important;
    height: 36px !important;
    border: none !important;
}

.toolbar-control-wrapper .fi-input {
    --tw-ring-shadow: none !important;
}

.fi-topbar {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}

/* Hamburger ostaje levo */
.fi-topbar-start {
    margin-right: auto !important;
}

/* Grupiši .fi-topbar-end I toolbar kontrole zajedno na desnoj strani */
.fi-topbar-end {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Toolbar kontrole nakon .fi-topbar-end */
.fi-topbar>div[wire\:snapshot],
.fi-topbar>div[wire\:id] {
    display: flex;
    align-items: center;
    gap: 0;
}

/* User menu na KRAJU (posle toolbar kontrola) */
.fi-topbar-end .fi-user-menu {
    order: 9999 !important;
    margin-left: 16px !important;
}

/* Sakrij toggle columns button */
.fi-ta-header-ctn button[x-data*="toggleColumns"],
button[aria-label*="Toggle columns"],
.fi-ta-toggle-cols-trigger {
    display: none !important;
}

/* KONAČNO RJEŠENJE: Sakriva toolbar kontrole po klasi koju imaju */
@media (max-width: 1023px) {
    .toolbar-control {
        display: none !important;
    }

    .fi-ta-header-ctn {}
}


/* Top bar background */
.fi-topbar {

    /* tamno plava */
}

/* Tekst i ikone u top bar-u */
.fi-topbar * {
    /* color: #ffffff !important; */
}

/* Dropdown arrow/icon hover */
.fi-topbar button:hover,
.fi-topbar a:hover {
    opacity: .85;
}