/*
 * ============================================================
 * PREMIS - Custom Filament Stijlen
 * Bestand: public/css/premis-custom.css
 * ============================================================
 *
 * HOE WERKT CSS?
 * --------------
 * Een CSS regel bestaat uit een SELECTOR en EIGENSCHAPPEN:
 *
 *   selector {
 *       eigenschap: waarde !important;
 *   }
 *
 * Het !important dwingt de stijl af over Filament's eigen CSS.
 *
 * MAATEENHEID: rem
 * ----------------
 *   0.25rem =  4px  (heel klein)
 *   0.5rem  =  8px  (klein)
 *   0.75rem = 12px  (middel)
 *   1rem    = 16px  (standaard)
 *   1.5rem  = 24px  (groot)
 *   2rem    = 32px  (heel groot)
 *
 * VEEL GEBRUIKTE EIGENSCHAPPEN
 * -----------------------------
 *   padding-top      Ruimte BOVEN de inhoud van een element
 *   padding-bottom   Ruimte ONDER de inhoud van een element
 *   padding          Ruimte aan ALLE kanten tegelijk
 *   row-gap          Ruimte TUSSEN rijen in een grid/formulier
 *   height           Vaste hoogte van een element
 *   min-height       Minimale hoogte van een element
 *
 * SELECTORS IN DIT BESTAND
 * -------------------------
 *   tr.fi-ta-row td          Tabelrijen (de datarijen)
 *   .fi-ta-col-wrp           Inhoud binnen een tabelcel
 *   .fi-ta-header-cell       De koprij van de tabel (Naam, Adres etc.)
 *   .fi-section-content.p-6  Wit blok met inhoud (formulier secties)
 *   header.fi-section-header Titelbalk van een wit blok (bijv. "Woningen")
 *   .gap-y-8                 Ruimte tussen formuliervelden
 *   header.fi-header         Paginatitel bovenaan (bijv. "Bewoners/Relaties")
 *   .fi-main-ctn             Hoofdcontainer van de pagina
 *
 * AANPASSEN
 * ----------
 * 1. Verander een getal (bijv. 0.2rem naar 0.5rem)
 * 2. Sla het bestand op
 * 3. Druk in Firefox op Ctrl+Shift+R (hard refresh)
 * 4. Resultaat is meteen zichtbaar
 * ============================================================
 */

/* ============================================================
   1. TABEL RIJEN - compacter
   ============================================================ */

tr.fi-ta-row td {
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
}

.fi-ta-col-wrp,
.fi-ta-text,
.fi-ta-text>div {
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: flex-start !important;
}

.fi-ta-cell-content {
    justify-content: flex-start !important;
}

/* Inline edit velden kleiner */
.fi-ta-col-wrp input,
.fi-ta-col-wrp select {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    min-height: 0 !important;
    height: 1.25rem !important;
}

/* ============================================================
   2. TABEL HEADER
   ============================================================ */

.fi-ta-header-cell {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* ============================================================
   3. SECTION CONTENT
   ============================================================ */

.fi-section-content.p-6 {
    padding: 0.5rem 1rem !important;
}

header.fi-section-header {
    padding: 0.35rem 1rem !important;
}

/* ============================================================
   4. FORMULIER
   ============================================================ */

.gap-y-8 {
    row-gap: 0.75rem !important;
}

/* ============================================================
   5. PAGINA HEADER
   ============================================================ */

header.fi-header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.fi-main-ctn {
    padding-top: 0.5rem !important;
}

/* ============================================================
   6. TABEL HEADER KLEINER (blauwe balk)
   ============================================================ */

.fi-table-header-row {
    height: 2.0rem !important;
    min-height: 2.0rem !important;
}

.fi-ta-header-cell {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    height: 1.75rem !important;
}

/* Lettergrootte kleiner in header */
.fi-ta-header-cell .fi-table-cell-content {
    font-size: 0.5rem !important;
}

/* ============================================================
   7. ALLE LETTERS 75% - STERKER + COMPLEET
   ============================================================ */

/* Basis font voor ALLES */
* {
    font-size: 0.9rem !important;
}

/* Specifieke Filament elementen extra dwingen */
.fi-table-cell-content,
.fi-table-cell__content,
.text-sm,
.text-base,
.text-lg {
    font-size: 0.9rem !important;
}

/* Inputs ook echt kleiner */
input,
select,
textarea {
    font-size: 0.9rem !important;
}

/* ============================================================
   8. DETAIL RECORD BLOKKEN COMPACTER
   ============================================================ */

/* Wit blok op detailpagina compacter */
.fi-section-content {
    padding: 0.25rem 0.75rem !important;
    min-height: auto !important;
}

/* Titelbalk van wit blok kleiner */
header.fi-section-header {
    padding: 0.1rem 0.5rem !important;
    font-size: 0.5rem !important;
}

/* Ruimte tussen blokken weg */
.fi-section+.fi-section {
    margin-top: 0 !important;
}

/* Scrollbar altijd zichtbaar bij tabel overflow */
.fi-ta-content {
    overflow-x: auto !important;
}

.fi-ta-content::-webkit-scrollbar {
    height: 8px;
}

.fi-ta-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.fi-ta-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.fi-ta-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================================
   9. STICKY SCROLLBAR
   ============================================================ */

/* Tabel container vaste hoogte zodat scrollbar altijd zichtbaar */
.fi-ta-content {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 250px) !important;
}

/* Firefox scrollbar */
.fi-ta-content {
    scrollbar-width: thin !important;
    scrollbar-color: #888 #f1f1f1 !important;
}