:root {
    --bg: #071821;
    --text: #e8f1f6;
    --muted: #a9c0cf;
    --brand: #22c55e;
    --brand2: #38bdf8;
    --danger: #ef4444;
    --warn: #f59e0b;
    --border: rgba(255,255,255,.08);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 16px;
    --mfl-teal: #14b8a6;
    --mfl-teal-soft: rgba(20,184,166,0.16);
    --mfl-teal-border: rgba(20,184,166,0.38);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(56,189,248,.25), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(34,197,94,.18), transparent 55%), var(--bg);
    color: var(--text);
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* =========================================================
                                         TOPBAR (sticky)
                                         ========================================================= */
.topbar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: var(--shadow);
    position: sticky;
    top: 12px;
    z-index: 1300;
    backdrop-filter: blur(8px);
    flex-wrap: wrap;
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 200px;
}

.logoImg {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    object-fit: contain;
    padding: 4px;
    flex: 0 0 auto;
}

.brand h1 {
    font-size: 16px;
    margin: 0;
}

.brand p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

/* rechter blok in topbar (taal/naam/logout/settings) */
.topbar > .inline {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
}

/* verberg enkel labels in topbar pills (Taal/Ingelogd) */
.topbar .pill .badge {
    display: none;
}

/* maak taal/naam/logout identiek */
.topbar .pill {
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
}

.topbar select {
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    width: auto;
}

#whoTxt {
    line-height: 1;
    font-weight: 800;
}

@media (max-width: 520px) {
    .topbar > .inline {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================================
                                         BUTTONS
                                         ========================================================= */
.btn {
    appearance: none;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: .15s transform, .15s background;
    font-weight: 800;
}

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

    .btn.primary {
        background: rgba(34,197,94,.18);
        border-color: rgba(34,197,94,.35);
    }

        .btn.primary:hover {
            background: rgba(34,197,94,.25);
        }

    .btn.danger {
        background: rgba(239,68,68,.16);
        border-color: rgba(239,68,68,.35);
    }

    .btn.small {
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 12px;
    }

    /* BUTTONS: "Nieuw" (uniforme stijl) */
    .btn.new {
        background: rgba(34,197,94,.18);
        border-color: rgba(34,197,94,.35);
        color: inherit;
    }

        .btn.new:hover {
            background: rgba(34,197,94,.26);
            border-color: rgba(34,197,94,.45);
        }

    /* BUTTONS: Icon buttons (SVG) */
    .btn.icon {
        padding: 10px;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

        .btn.icon svg {
            width: 18px;
            height: 18px;
            display: block;
            fill: currentColor;
        }

        /* Small icon buttons (lijst: bekijken/bewerken/verwijderen) */
        .btn.icon.small {
            width: 36px;
            height: 36px;
            padding: 8px;
        }

            .btn.icon.small svg {
                width: 16px;
                height: 16px;
            }

/* Mobile: icon buttons iets compacter */
@media (max-width: 520px) {
    .btn.icon {
        width: 40px;
        height: 40px;
        padding: 9px;
    }

        .btn.icon svg {
            width: 17px;
            height: 17px;
        }

        .btn.icon.small {
            width: 34px;
            height: 34px;
            padding: 7px;
        }

            .btn.icon.small svg {
                width: 15px;
                height: 15px;
            }
}

/* =========================================================
                                         EDITOR VISIBILITY (hide editor until "Nieuw")
                                         ========================================================= */
#tabCatches.editorHidden .catchEditor {
    display: none !important;
}

#tabCatches.editorHidden .catchOverview {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

#tabCatalog.editorHidden .catEditor {
    display: none !important;
}

#tabCatalog.editorHidden .catOverview {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

#tabPonds.editorHidden .pondEditor {
    display: none !important;
}

#tabPonds.editorHidden .pondOverview {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

#tabGeneral.editorHidden .genEditor {
    display: none !important;
}

#tabGeneral.editorHidden .genOverview {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

#tabSpots.editorHidden .spotEditor {
    display: none !important;
}

#tabSpots.editorHidden .spotOverview {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* CATALOG: compact filters on mobile (only overview block) */
@media (max-width: 520px) {
    #tabCatalog .catOverview .genPickRow {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    #tabCatalog .catOverview .genPickCol label .labelLeft {
        font-size: 11px !important;
    }

    #tabCatalog .catOverview #catFilter,
    #tabCatalog .catOverview #catPicker {
        font-size: 12px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        height: 40px !important;
        line-height: 1.1 !important;
    }
}

/* PONDS: compact filter on mobile (only pondPicker) */
@media (max-width: 520px) {
    #tabPonds .pondOverview .genPickRow {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    #tabPonds .pondOverview .genPickCol label .labelLeft {
        font-size: 11px !important;
    }

    #tabPonds .pondOverview #pondPicker {
        font-size: 12px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        height: 40px !important;
        line-height: 1.1 !important;
    }
}

/* GENERAL NOTES: compact filters on mobile */
@media (max-width: 520px) {
    #tabGeneral .genOverview .genPickRow {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    #tabGeneral .genOverview .genPickCol label .labelLeft {
        font-size: 11px !important;
    }

    #tabGeneral .genOverview #genFilter,
    #tabGeneral .genOverview #generalPicker {
        font-size: 12px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        height: 40px !important;
        line-height: 1.1 !important;
    }
}

/* SPOTS: compact filters on mobile */
@media (max-width: 520px) {
    #tabSpots .spotOverview .genPickRow {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    #tabSpots .spotOverview .genPickCol label .labelLeft {
        font-size: 11px !important;
    }

    #tabSpots .spotOverview #spotPondFilter,
    #tabSpots .spotOverview #spotPicker {
        font-size: 12px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        height: 40px !important;
        line-height: 1.1 !important;
    }
}

/* =========================================================
                                         LAYOUT + CARDS
                                         ========================================================= */
.row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.col {
    flex: 1 1 340px;
    min-width: 320px;
}

.card {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
}

    .card h2 {
        margin: 0 0 8px 0;
        font-size: 16px;
    }

    .card h3 {
        margin: 14px 0 8px 0;
        font-size: 14px;
        color: var(--brand2);
    }

.muted {
    color: var(--muted);
    font-size: 13px;
}

.hint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    margin: 10px 0 6px;
}

.labelLeft {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.15);
    color: var(--text);
    outline: none;
}

    select option {
        background: #0b2230;
        color: var(--text);
    }

textarea {
    min-height: 90px;
    resize: vertical;
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.grid4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    font-size: 12px;
    color: var(--muted);
}

    .pill select {
        width: auto;
        padding: 6px 10px;
        border-radius: 999px;
        color: var(--text);
        background: rgba(0,0,0,.18);
        border: 1px solid var(--border);
    }

.hr {
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}

/* =========================================================
                                         TABS (menu)
                                         ========================================================= */
.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    /* ✅ centreren in de balk (desktop/tablet) */
    justify-content: center;
    width: 100%;
}


.tab {
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    font-weight: 900;
    font-size: 13px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .tab:hover {
        background: rgba(255,255,255,.07);
    }

    .tab.active {
        background: rgba(56,189,248,.14);
        border-color: rgba(56,189,248,.35);
    }

.tabSpacer {
    flex: 1;
}

/* Sticky tabs-card (desktop) */
#tabsCard {
    position: sticky;
    top: 86px;
    z-index: 1200;
    backdrop-filter: blur(8px);
}

@media (max-width: 520px) {
    /* mobiel wordt fixed-bottom via het mobile-blok onderaan */
    #tabsCard {
        top: 132px;
    }
}

/* =========================================================
                                         LISTS
                                         ========================================================= */
.list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0,0,0,.12);
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

    .item .meta {
        max-width: calc(100% - 240px);
    }

    .item b {
        display: block;
    }

    .item small {
        color: var(--muted);
    }

.rightBtns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.55);
    box-shadow: var(--shadow);
    color: var(--text);
    max-width: 420px;
    display: none;
    backdrop-filter: blur(8px);
    z-index: 999;
}

.badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: rgba(255,255,255,.04);
    white-space: nowrap;
}

.photo {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.12);
    overflow: hidden;
}

    .photo img {
        width: 100%;
        display: block;
        max-height: 280px;
        object-fit: cover;
    }

.inline {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.seq-item {
    display: block;
}

    .seq-item.hidden {
        display: none;
    }

/* =========================================================
                                         MODAL
                                         ========================================================= */
.modalBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.modal {
    width: min(960px, 96vw);
    max-height: 86vh;
    overflow: auto;
    border: 1px solid var(--border);
    background: rgba(10,25,35,.96);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 14px 14px 16px 14px;
}

.modalHeader {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.modalTitle {
    margin: 0;
    font-size: 16px;
}

.modalBody {
    margin-top: 10px;
    color: var(--text);
}

.kv {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 8px 12px;
    margin: 10px 0;
}

    .kv div {
        padding: 6px 8px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(255,255,255,.03);
    }

    .kv .k {
        color: var(--muted);
        font-size: 12px;
    }

.modalImg {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: transparent;
    overflow: hidden;
    margin: 8px 0 14px;
}

    .modalImg img {
        width: 100%;
        display: block;
        max-height: 380px;
        object-fit: contain;
        background: transparent;
        image-rendering: auto;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

@media (max-width: 520px) {
    .modalImg img {
        max-height: 52vh;
    }
}

/* =========================================================
                                         PICKER ROW
                                         ========================================================= */
.genPickRow {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: nowrap;
}

.genPickCol {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 520px) {
    .genPickRow {
        flex-wrap: wrap;
    }
}

/* =========================================================
                WEATHER TABLE (pixel perfect rows)
                FIX: lijn blijft mooi + sticky titels (wxSticky) weer zichtbaar (blauw)
                LET OP: geen globale kleur overrides meer voor dagwaarden!
                ========================================================= */

#weatherResult .wxTable tbody tr:nth-child(odd) td:not(.wxSticky) {
    background: rgba(255,255,255,.04);
}

#weatherResult .wxTable tbody tr:nth-child(even) td:not(.wxSticky) {
    background: rgba(0,0,0,.10);
}

#weatherResult .wxTable {
    font-size: var(--wxfs, 11px);
}

    /* ✅ Lijn: border weg, inset-lijn (kleur ok bij jou) */
    #weatherResult .wxTable th,
    #weatherResult .wxTable td {
        border-bottom: 0 !important;
        box-shadow: inset 0 -1px rgba(0,0,0,.35);
        background-clip: padding-box;
        vertical-align: middle;
    }

    #weatherResult .wxTable thead th {
        padding: var(--wxthpad, 8px 10px);
        line-height: 1.1;
    }

    #weatherResult .wxTable .wxSticky {
        min-width: var(--wxlabel, 190px);
    }

    /* ✅ Sticky titelkolom: terug zichtbaar + blauw-achtig zoals je dag-stijl */
    #weatherResult .wxTable tbody td.wxSticky {
        color: var(--muted);
        font-weight: 900;
    }

    /* (rest blijft zoals je had) */
    #weatherResult .wxTable tbody td:not(.wxSticky) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #weatherResult .wxTable tbody td.wxSticky {
        white-space: normal;
        word-break: break-word;
        font-size: var(--wxlabelfs, 11px);
    }

    #weatherResult .wxTable tbody tr.wxCompact td {
        padding: var(--wxpad, 6px 8px);
        height: var(--wxrowh, 34px);
        line-height: 1.05;
    }

    #weatherResult .wxTable tbody tr.wxTall td {
        padding: var(--wxtallpad, 8px 10px);
        height: auto;
        line-height: 1.1;
    }

        #weatherResult .wxTable tbody tr.wxTall td.wxSticky {
            vertical-align: top;
        }

@media (max-width: 520px) {
    #weatherResult .wxWrap {
        --wxcol: 68px !important;
        --wxlabel: 112px !important;
        --wxpad: 4px 6px !important;
        --wxthpad: 4px 6px !important;
        --wxfs: 9.5px !important;
        --wxlabelfs: 10px !important;
        --wxrowh: 30px !important;
        --wxtallpad: 6px 6px !important;
    }

    #weatherResult .wxTable .wxIcon {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    #weatherResult .wxTable tbody td.wxSticky {
        font-weight: 900;
        color: var(--muted);
    }
}

/* Duidelijke trend iconen */
.wxTrend {
    display: inline-block;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
    color: #fff; /* ✅ forceer wit (geen paars meer) */
}

@media (max-width:520px) {
    .wxTrend {
        font-size: 16px;
    }
}

/* (i) info badge + clickable row title */
.wxHasInfo {
    cursor: pointer;
}

/* subtielere info indicator (minder lomp) */
.wxInfo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
    color: rgba(233,241,246,.70);
    font-weight: 900;
    font-size: 10px;
    line-height: 1;
    margin-left: 6px;
    vertical-align: baseline;
    opacity: .85;
}

    .wxInfo:hover {
        opacity: 1;
        border-color: rgba(255,255,255,.22);
        color: var(--text);
        background: rgba(255,255,255,.06);
    }

/* ✅ Beet-indicator label: 2 lijnen + links uitlijnen */
.wxFishWrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
}

    .wxFishWrap select {
        width: auto; /* niet meer full-width */
        min-width: 140px;
        max-width: 220px;
        padding: 6px 8px;
        border-radius: 10px;
        font-size: 11px;
    }

/* ✅ DAG-WEER: kolommen zo smal mogelijk (op basis van langste content) */
#weatherResult .wxTable {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}

    /* uur/dag kolommen: laat breedte door content bepalen */
    #weatherResult .wxTable thead th:not(.wxSticky),
    #weatherResult .wxTable tbody td:not(.wxSticky) {
        width: 1% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    /* sticky label kolom: ook zo smal mogelijk tot langste tekst */
    #weatherResult .wxTable .wxSticky {
        width: 1% !important;
        min-width: 0 !important;
        max-width: 210px; /* safety */
    }

/* mobiel: select nog compacter */
@media (max-width: 520px) {
    .wxFishWrap select {
        min-width: 120px;
        max-width: 180px;
    }
}


/* =========================================================
                                         MOBILE: grids + tab order + no empty space
                                         ========================================================= */
@media (max-width: 900px) {
    .grid4 {
        grid-template-columns: 1fr 1fr;
    }

    .grid3 {
        grid-template-columns: 1fr 1fr;
    }

    .grid2 {
        grid-template-columns: 1fr;
    }

    #tabGeneral, #tabCatalog, #tabPonds, #tabSpots, #tabCatches {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        #tabGeneral .genOverview {
            order: 1;
        }

        #tabGeneral .genEditor {
            order: 2;
        }

        #tabGeneral .col {
            flex: 0 0 auto !important;
            min-width: 0 !important;
        }

        #tabCatalog .catOverview {
            order: 1;
        }

        #tabCatalog .catEditor {
            order: 2;
        }

        #tabCatalog .col {
            flex: 0 0 auto !important;
            min-width: 0 !important;
        }

        #tabPonds .pondOverview {
            order: 1;
        }

        #tabPonds .pondEditor {
            order: 2;
        }

        #tabPonds .col {
            flex: 0 0 auto !important;
            min-width: 0 !important;
        }

        #tabSpots .spotOverview {
            order: 1;
        }

        #tabSpots .spotEditor {
            order: 2;
        }

        #tabSpots .col {
            flex: 0 0 auto !important;
            min-width: 0 !important;
        }

        #tabCatches .catchOverview {
            order: 1;
        }

        #tabCatches .catchEditor {
            order: 2;
        }

        #tabCatches .col {
            flex: 0 0 auto !important;
            min-width: 0 !important;
        }
}

/* =========================================================
                                         STICKY TABS FALLBACK (JS)
                                         ========================================================= */
#tabsCardPlaceholder {
    display: none;
}

#tabsCard.tabsFixed {
    position: fixed !important;
    z-index: 1200 !important;
}

/* =========================================================
                                         CATCHES: compact filters on mobile (only overview block)
                                         ========================================================= */
@media (max-width: 520px) {
    #tabCatches .catchOverview .genPickRow {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    #tabCatches .catchOverview .genPickCol label .labelLeft {
        font-size: 11px !important;
    }

    #tabCatches .catchOverview #catchFilter,
    #tabCatches .catchOverview #catchPicker {
        font-size: 12px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        height: 40px !important;
        line-height: 1.1 !important;
    }
}

/* =========================================================
                             MOBILE NAV + TOPBAR COMPACT
                             (enkel layout, geen werking wijzigen)
                             ========================================================= */
.brandTitleShort {
    display: none;
}

.brandTitle {
    margin: 0;
    font-size: 16px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* tab icon/text helpers (SVG) */
.tabIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mfl-teal);
    flex: 0 0 auto;
}

.tabText {
    display: inline;
}

/* SVG icons = lijnstijl in currentColor */
.tabIcon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* Active tab highlight in teal */
.tab.active {
    background: var(--mfl-teal-soft) !important;
    border-color: var(--mfl-teal-border) !important;
}

/* TOPBAR ICON BUTTONS (logout + settings) */
#btnLogout.btn.icon.small,
#btnSettings.btn.icon.small {
    border-radius: 999px !important;
    padding: 0 10px !important;
    height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #btnLogout.btn.icon.small svg,
    #btnSettings.btn.icon.small svg {
        width: 20px !important;
        height: 20px !important;
        stroke: currentColor;
        fill: none;
        stroke-width: 3 !important;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: block;
    }

/* ---- Mobile rules ---- */
@media (max-width: 520px) {

    /* geef ruimte onderaan voor fixed bottom menu */
    .wrap {
        padding-bottom: 110px;
    }

    /* TOPBAR: alles op 1 lijn */
    .topbar {
        flex-wrap: nowrap !important;
        gap: 10px;
        padding: 10px 12px;
    }

    .brand {
        min-width: 0 !important;
        flex: 1 1 auto;
        gap: 8px;
    }

    .brandTitles {
        min-width: 0;
    }

    /* titel inkorten: lange weg, korte aan */
    .brandTitleLong {
        display: none;
    }

    .brandTitleShort {
        display: inline;
    }

    .logoImg {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    /* rechterblok compact en niet wrappen */
    .topbar > .inline {
        width: auto !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        justify-content: flex-end;
    }

    /* maak pill + logout + settings net iets compacter */
    .topbar .pill,
    .topbar #btnLogout.btn.icon.small,
    .topbar #btnSettings.btn.icon.small {
        height: 34px;
        padding: 0 10px;
    }

    .topbar select {
        height: 28px;
        padding: 0 10px;
    }

    /* ===== Bottom fixed menu (tabs) - mobiel ONLY ===== */
    #tabsCard {
        position: fixed !important;
        top: auto !important;
        bottom: 14px !important;
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 1600 !important;
        border-radius: 18px;
    }

        /* tabs horizontaal, gelijk verdeeld */
        #tabsCard .tabs {
            flex-wrap: nowrap !important;
            gap: 6px;
            justify-content: space-between;
        }

    /* Mobiel: tekst weg, alleen iconen */
    .tabText {
        display: none !important;
    }

    .tabIcon {
        display: inline-flex !important;
    }

        .tabIcon svg {
            width: 20px;
            height: 20px;
        }

    /* tab knopjes compact & mooi */
    .tab {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 12px 0;
        border-radius: 14px;
        gap: 0;
    }

    /* placeholder van sticky fallback nooit tonen op mobile */
    #tabsCardPlaceholder {
        display: none !important;
    }
}

/* =========================================================
                                LOCATIE (tabPonds) - headers met + rechts + checkbox rows
                                ========================================================= */

/* Header: titel links, + knop rechts */
#tabPonds .pondSectionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px 0;
}

    #tabPonds .pondSectionHeader .btn.icon {
        width: 44px;
        height: 44px;
    }

/* checkbox row = exact als input */
#tabPonds label.checkRow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.15);
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
}

    #tabPonds label.checkRow input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        flex: 0 0 auto;
    }

    #tabPonds label.checkRow span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* =========================================================
                                LOCATIE: Gemeente input + GPS knop naast invulveld (aparte kolom)
                                ========================================================= */
/* btnSetGps gebruikt stroke icon */
#btnSetGps svg {
    width: 20px;
    height: 20px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
                                LOCATIE: grid2 keep2 => blijft 2 kolommen op mobiel
                                (voor Max haakmaat/weerhaak + Max netgewicht/vis scheiden)
                                ========================================================= */
@media (max-width: 900px) {
    #tabPonds .grid2.keep2 {
        grid-template-columns: 1fr 1fr !important;
        align-items: end;
        gap: 12px;
    }

        /* de “ ” label boven de checkbox mag geen extra hoogte maken */
        #tabPonds .grid2.keep2 > div > label {
            margin-top: 10px; /* zelfde als standaard label */
            margin-bottom: 6px;
        }

        /* checkbox rij geen extra verticale spacing */
        #tabPonds .grid2.keep2 label.checkRow {
            margin: 0;
        }
}
/* Adres header: status + knop rechts (zelfde rij) */
#tabPonds .addrHeaderRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

/* Zorg dat de status tekst mooi kan inkorten (1 lijn) */
#tabPonds #addrStatus {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(560px, 55vw);
}

/* GPS knop icon is stroke-based (zichtbaar) */
#tabPonds #btnSetGps svg {
    width: 20px;
    height: 20px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Op mobiel: status mag naar 2 lijnen als het te krap is */
@media (max-width: 520px) {
    #tabPonds #addrStatus {
        white-space: normal;
        max-width: 52vw;
    }
}

/* Checkbox kleur (paars -> lichtblauw) */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand2); /* #38bdf8 */
}

/* =========================================================
                        STEKINFO (tabSpots) - layout gelijk aan Locatie
                        ========================================================= */

/* 2 velden (Vijver + Vijvernummer/Steknummer) altijd op 1 rij (ook mobiel) */
#tabSpots .spotPondNumberRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}

/* Op mobiel normaal gaat .grid2 naar 1 kolom, maar dit moet 2 blijven */
@media (max-width: 900px) {
    #tabSpots .spotPondNumberRow {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Bodeminfo: 5 checkboxes op 1 rij (desktop/tablet) */
#tabSpots .grid5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

/* Bodem checkbox stijl zoals Locatie checkboxen (input-achtige rij) */
#tabSpots label.checkRow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.15);
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
}

    #tabSpots label.checkRow input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        flex: 0 0 auto;
    }

    #tabSpots label.checkRow span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ✅ Mobiel: 2 op rij 1 + 3 op rij 2 (links uitgelijnd) */
@media (max-width: 520px) {
    #tabSpots .grid5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    #tabSpots label.checkRow {
        padding: 9px 8px;
        font-size: 12px;
    }

        #tabSpots label.checkRow input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }

    /* laatste item (5de) neemt halve rij zodat rij 2 effectief 3 items toont */
    #tabSpots .grid5 > label.checkRow:nth-child(5) {
        grid-column: span 2;
    }
}

/* Grote velden voor notities (zoals Vangsten textarea) */
#tabSpots textarea.spotBigNote {
    min-height: 120px;
    resize: vertical;
}

/* Sessies header: titel links, + rechts (zoals Locatie headers) */
#tabSpots .spotSectionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 10px 0;
}

    #tabSpots .spotSectionHeader .btn.icon {
        width: 44px;
        height: 44px;
    }

/* Stek bekijken: sessieblokken iets leesbaarder */
.modalBody .muted {
    font-size: 13px;
}

.modalBody {
    line-height: 1.35;
}


/* =========================================================
                        LIST ROWS: laat .listRow er exact uitzien als .item
                        ========================================================= */
.listRow {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0,0,0,.12);
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

    .listRow .meta {
        max-width: calc(100% - 240px);
    }

    .listRow b {
        display: block;
    }

    .listRow small {
        color: var(--muted);
    }

/* kleine verbetering voor modal tekst */
.modalBody .sectionTitle {
    font-weight: 900;
    margin: 12px 0 6px 0;
    color: var(--brand2);
}

.modalBody .bullets {
    white-space: pre-wrap;
    line-height: 1.35;
}

/* =========================================================
        3-UURS WEER TABEL — kolommen zo smal mogelijk (tot grootste woord)
        Doel:
        - GEEN kleinere tekst
        - Wel: kolombreedtes laten "auto"-sizen op basis van content (intrinsic)
        - Minder horizontale padding zodat er meer uren zichtbaar zijn
        ========================================================= */

.wx3Wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0,0,0,.10);
    /* enkel spacing/rijhoogte (GEEN font-size tweaks) */
    --wx3pad: 4px 6px; /* compacter dan 6px 8px */
    --wx3thpad: 6px 6px; /* compacter dan 8px 10px */
    --wx3rowh: 34px;
}

.wx3Table {
    border-collapse: collapse;
    /* belangrijk: laat de tabel haar "intrinsic" breedte nemen (kolommen op content) */
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    /* behoud je bestaande variabele indien je die elders gebruikt */
    font-size: var(--wx3fs, 11px);
}

    /* ✅ lijnen zoals dag */
    .wx3Table th,
    .wx3Table td {
        border-bottom: 0 !important;
        box-shadow: inset 0 -1px rgba(0,0,0,.35);
        background-clip: padding-box;
        vertical-align: middle;
    }

    /* headers */
    .wx3Table thead th {
        padding: var(--wx3thpad, 8px 10px);
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
        color: var(--text);
        font-weight: 900;
    }

        /* ✅ uurkolommen: zo smal mogelijk => breedte volgt grootste content in die kolom */
        .wx3Table thead th:not(.wx3Sticky),
        .wx3Table tbody td:not(.wx3Sticky) {
            width: 1%;
            padding: var(--wx3pad, 6px 8px);
            white-space: nowrap;
        }

    /* sticky label kolom: zo smal mogelijk tot het grootste woord */
    .wx3Table .wx3Sticky {
        position: sticky;
        left: 0;
        background: rgba(10,25,35,.98);
        width: 1%;
        min-width: 0; /* ← laat auto-sizing toe */
        max-width: 220px; /* safety: voorkomt extreme breedte */

        text-align: left;
        color: var(--muted) !important;
        font-weight: 900;
        z-index: 2;
        /* “grootste woord” gedrag: wél op spaties breken, niet in woorden */
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        font-size: var(--wx3labelfs, 11px);
    }

    /* gewone cellen */
    .wx3Table tbody td {
        text-align: center;
        height: var(--wx3rowh, 34px);
        line-height: 1.05;
        color: var(--muted) !important;
        font-weight: 700;
    }

    /* zebra identiek aan dag */
    .wx3Table tbody tr:nth-child(odd) td:not(.wx3Sticky) {
        background: rgba(255,255,255,.04);
    }

    .wx3Table tbody tr:nth-child(even) td:not(.wx3Sticky) {
        background: rgba(0,0,0,.10);
    }

    /* iconen mogen wit blijven */
    .wx3Table .wx3Icon {
        display: inline-block;
        font-size: 18px;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        color: var(--text);
    }

/* ✅ mobiel: enkel spacing compacter (geen font-size) */
@media (max-width: 520px) {
    .wx3Wrap {
        --wx3pad: 3px 4px !important;
        --wx3thpad: 4px 4px !important;
        --wx3rowh: 32px !important;
    }

    .wx3Table .wx3Sticky {
        max-width: 160px !important;
    }

    .wx3Table .wx3Icon {
        font-size: 16px !important;
        line-height: 1 !important;
    }
}

/* =========================================================
                        Weer waarschuwing badge naast Prognose
                        ========================================================= */
.wxWarnBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,200,0,.35);
    background: rgba(255,180,0,.12);
    color: #ffd36b;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 10px;
}

@media (max-width: 520px) {
    .wxWarnBadge {
        font-size: 11px;
        padding: 6px 8px;
        margin-left: 8px;
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Adviesblok onder weer tabel */
.wxAdvice {
    margin-top: 12px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.12);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--shadow);
}

    .wxAdvice h3 {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: var(--brand2);
    }

    .wxAdvice ul {
        margin: 6px 0 0 18px;
        padding: 0;
    }

    .wxAdvice li {
        margin: 4px 0;
    }

.wxTag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    font-size: 12px;
    color: var(--muted);
    margin-right: 6px;
    margin-top: 6px;
}


/* =========================================================
                        BACKUP / INSTELLINGEN TAB: 1 kolom + boxed blocks
                        ========================================================= */
#tabBackup .col {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

.settingsBox {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0,0,0,.12);
    padding: 12px;
    margin-top: 10px;
}

    .settingsBox h3 {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: var(--brand2);
    }

    .settingsBox .hint {
        margin-top: 6px;
        font-size: 12px;
    }

/* =========================================================
                        WEBSITE MENU (alleen bij uitgelogd) - zelfde look als contact
                        ========================================================= */

.siteTopbar {
    position: sticky;
    top: 12px;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(11,34,48,.55);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.siteBrand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    flex: 0 0 auto;
}

.siteLogo {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    padding: 6px;
}

.siteBrandText {
    line-height: 1.05;
    min-width: 0
}

.siteBrandTitle {
    font-weight: 950;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.siteBrandSub {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.siteNav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .siteNav::-webkit-scrollbar {
        display: none;
    }

.siteLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--muted);
    font-weight: 900;
    white-space: nowrap;
    flex: 0 0 auto;
}

    .siteLink:hover {
        color: var(--text);
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.08);
    }

    .siteLink.active {
        color: var(--text);
        background: rgba(56,189,248,.14);
        border-color: rgba(56,189,248,.35);
    }

.siteIco {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand2);
    flex: 0 0 auto;
}

    .siteIco svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: block;
    }

.siteLbl {
    display: inline-block;
}

.siteLang {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

    .siteLang select {
        height: 34px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(0,0,0,.18);
        color: var(--text);
        font-weight: 900;
        cursor: pointer;
        outline: none;
    }

@media (max-width: 1100px) {
    .siteLbl {
        display: none;
    }

    .siteLink {
        padding: 9px 10px;
    }
}

@media (max-width: 980px) {
    .siteNav {
        display: none;
    }
}

/* Mobile bottom nav (website) */
.siteBottomNav {
    display: none;
}

@media (max-width:980px) {
    .siteBottomNav {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 1700;
        padding: 10px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: rgba(11,34,48,.75);
        backdrop-filter: blur(10px);
        box-shadow: var(--shadow);
        justify-content: space-between;
        gap: 8px;
    }

    .siteBLink {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 6px;
        border-radius: 16px;
        border: 1px solid transparent;
        color: var(--muted);
        font-weight: 900;
        font-size: 11px;
    }

        .siteBLink:hover {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.08);
            color: var(--text);
        }

        .siteBLink.active {
            background: rgba(56,189,248,.14);
            border-color: rgba(56,189,248,.35);
            color: var(--text);
        }

    .siteBottomNav .siteIco svg {
        width: 20px;
        height: 20px;
    }

    .siteBottomNav .home .siteBLbl {
        display: none;
    }
    /* home = icon only */
}
/* =========================================================
                        FIX 1 — Website topbar brand exact zoals andere pagina’s
                        ========================================================= */

.siteTopbar a,
.siteTopbar a:visited,
.siteTopbar a:hover,
.siteTopbar a:active {
    color: inherit !important;
    text-decoration: none !important;
}

/* Logo identiek */
.siteTopbar .siteLogo {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    object-fit: contain !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    padding: 6px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.25) !important;
}

/* Titel identiek */
.siteTopbar .siteBrandTitle {
    font-weight: 950 !important;
    font-size: 13.8px !important;
    letter-spacing: -0.2px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

/* Subtitel identiek */
.siteTopbar .siteBrandSub {
    font-size: 12px !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
}

/* =========================================================
                        FIX 2 — Geen underline in website bottom menu
                        ========================================================= */
.siteBottomNav a,
.siteBottomNav a:visited,
.siteBottomNav a:hover,
.siteBottomNav a:active {
    text-decoration: none !important;
    color: inherit !important;
}

/* =========================================================
                        Fotes delete buttons
                        ========================================================= */
/* Stekinfo foto delete knop (overlay) */
#spotPhotoPreviewWrap.spotPhotoWrap {
    position: relative;
}

#btnSpotPhotoDelete.spotPhotoDelBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

/* Generic photo delete overlay button */
.photoWrapRel {
    position: relative;
}

.photoDelBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

/* =========================
                AUTH: "Wachtwoord vergeten?"
             ========================= */
.btnLink {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--brand2);
    font-weight: 900;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

    .btnLink:hover {
        text-decoration: underline;
    }

/* Label met actieknop (quick +) zonder layout te verschuiven */
.labelWithAction {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* geen space-between => label blijft compact */
    gap: 10px;
    padding-right: 44px; /* ruimte voor de knop rechts */
}

    .labelWithAction .labelLeft {
        margin: 0;
    }

    /* de knop hangt “boven” de label, dus geen extra label-hoogte */
    .labelWithAction .btn.icon.small.quickNewCatalog {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

/* Locatie: quick + en delete compacter zodat niets overlapt */
#tabPonds .labelWithAction {
    padding-right: 32px; /* minder ruimte nodig omdat knop kleiner wordt */
    min-height: 18px; /* label blijft stabiel */
}

    /* quick + kleiner (niet meer in de combobox-zone) */
    #tabPonds .labelWithAction .btn.icon.small.quickNewCatalog {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

/* delete knoppen in allowed/forbidden rows ook kleiner */
#tabPonds .rightBtns .btn.icon.small {
    width: 30px !important;
    height: 30px !important;
    padding: 6px !important;
}

    #tabPonds .rightBtns .btn.icon.small svg {
        width: 14px !important;
        height: 14px !important;
    }

#tabCatches .catchesTwoCols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

@media (max-width:820px) {
    #tabCatches .catchesTwoCols {
        grid-template-columns: 1fr
    }
}

/* label-rij: titel links + (groen) naast titel + (grijs) rechts uitgelijnd */
#tabCatches label.catchLabelRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 6px
}

/* knoppen compact (grijs) + groen net iets kleiner */
#tabCatches label.catchLabelRow .btn.icon.small {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1
}

    #tabCatches label.catchLabelRow .btn.icon.small.new {
        width: 28px;
        height: 28px;
        font-size: 15px
    }

/* Vangsten: quick-new knoppen grijs (zonder globale .btn.new te breken) */
#tabCatches .btn.new {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}

    #tabCatches .btn.new:hover {
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.18);
    }

/* =========================
   LOCATIE: file preview box (Reglement / Kalender)
   ========================= */
.filePreviewBox {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0,0,0,.12);
    padding: 10px;
}

.fileLinkRow {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 6px;
}

    .fileLinkRow a {
        color: var(--brand2);
        text-decoration: none;
        font-weight: 900;
    }

        .fileLinkRow a:hover {
            text-decoration: underline;
        }

/* =========================
   Koppen
   ========================= */
.fileChoiceWrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .fileChoiceWrap .btn {
        min-width: 120px;
    }

@media (max-width: 520px) {
    .fileChoiceWrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

        .fileChoiceWrap .btn {
            width: 100%;
            min-width: 0;
            padding: 10px 8px;
        }
}