/*
|--------------------------------------------------------------------------
| rjtsolutions admin responsive layout
|--------------------------------------------------------------------------
| Maakt Filament-pagina's beter bruikbaar op grote schermen en compacter
| op kleinere schermen.
*/

/* Hoofdcontent niet smal centreren op grote schermen */
.fi-main {
    max-width: none !important;
    width: 100% !important;
}

/* Veel Filament-pagina's gebruiken geneste max-width wrappers */
.fi-main > .mx-auto,
.fi-page,
.fi-page-content,
.fi-resource-list-records-page,
.fi-resource-edit-record-page,
.fi-resource-create-record-page,
.fi-dashboard-page {
    max-width: none !important;
    width: 100% !important;
}

/* Iets ruimere desktop-padding, zonder dat het te breed/rommelig wordt */
@media (min-width: 1280px) {
    .fi-main {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 1536px) {
    .fi-main {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}

/* Tabellen mogen de beschikbare breedte gebruiken */
.fi-ta,
.fi-ta-ctn,
.fi-ta-content {
    width: 100% !important;
    max-width: none !important;
}

/* Horizontale scroll blijft beschikbaar, maar pas als het echt nodig is */
.fi-ta-ctn,
.fi-ta-content,
.fi-ta-table {
    overflow-x: auto;
}

/* Op brede schermen tabellen rustiger laten ademen */
@media (min-width: 1280px) {
    .fi-ta table {
        width: 100% !important;
    }

    .fi-ta-header-toolbar {
        gap: 1rem !important;
    }
}

/* Lange namen/teksten in tabellen mogen netter afbreken */
.fi-ta-cell,
.fi-ta-text {
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Forms en secties ook meer breedte geven */
.fi-section,
.fi-fo-component-ctn,
.fi-form,
.fi-wi-widget {
    max-width: none !important;
}

/* Dashboard widgets op grote schermen beter laten vullen */
@media (min-width: 1280px) {
    .fi-wi-stats-overview-stats-ctn,
    .fi-wi-widgets {
        width: 100% !important;
    }
}

/* Kleine schermen: acties en knoppen netter onder elkaar */
@media (max-width: 768px) {
    .fi-main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .fi-header {
        gap: 0.75rem !important;
    }

    .fi-header-heading {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    .fi-header-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    .fi-btn {
        max-width: 100%;
        white-space: normal;
    }

    .fi-ta-header-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .fi-ta-search-field {
        width: 100% !important;
    }
}

/* Grote logo's in de sidebar/header niet de layout laten domineren */
.fi-sidebar-header,
.fi-topbar {
    overflow: hidden;
}

.fi-logo img,
.fi-sidebar-header img {
    max-width: 100%;
    height: auto;
}