/* ==========================================================================
   Drents Archief - Elements Mediabank v3 Theming
   ==========================================================================
   The v3 components use --elements-* CSS custom properties for theming.
   Global vars (--elements-primary etc.) cascade into component-specific
   vars (--elements-mediabank-primary etc.) automatically.
   ========================================================================== */

@scope (#elements-mediabank) {
    /* --------------------------------------------------------------------------
       Global theme tokens
       -------------------------------------------------------------------------- */
    .elements-mediabank-root.elements-mediabank-root {
        /* Brand colors */
        --elements-primary: oklch(0.44 0.11 250); /* Drents Archief blauw */
        --elements-secondary: oklch(0.56 0.18 38); /* Drents Archief rood */
        --elements-tertiary: #c9dded;

        /* Text & links */
        --elements-body-color: oklch(0.44 0.11 250);
        --elements-link-color: oklch(0.56 0.18 38);

        /* Blue-tinted neutrals (matching Drents Archief design) */
        --elements-light: oklch(0.97 0.015 250); /* Lichte achtergronden */
        --elements-medium: oklch(0.80 0.05 250); /* Borders, scheidingslijnen */
        --elements-dark: oklch(0.59 0.09 250); /* Subtiele tekst, iconen */

        /* Typography */
        --elements-font-family: 'Source Sans 3', sans-serif;


        --elements-mediabank-z-index-error-overlay: 1000;
        --elements-mediabank-white: var(--white);
        --elements-mediabank-spacing-lg: 2rem;
        --elements-mediabank-spacing-md: 1rem;
        --elements-mediabank-border-radius: 0;
    }

    /* --------------------------------------------------------------------------
       Layout
       -------------------------------------------------------------------------- */

    #elements-mediabank {
        background: var(--white);
        box-shadow: var(--box-shadow);
    }

    .elements-mediabank-root {
        width: 100%;
    }

    .elements-mediabank-root .elements-mediabank-container {
        padding: 0;
        max-inline-size: 100%;
    }

    .elements-mediabank-root .elements-mediabank-container[mediaId] {
        padding: 1rem;
    }

    /* --------------------------------------------------------------------------
       Overrides — copied from user.css
       -------------------------------------------------------------------------- */

    .elements-mediabank-container:has(.row > .col-12 > .elements-mediabank-searchbar-outer) {
        background: var(--elements-light);
    }

    .elements-mediabank-searchbar-outer {
        padding: 1rem;
    }

    .elements-mediabank-filter-panel,
    .elements-mediabank-gallery-header {
        padding-inline: 1rem;
    }
}

@layer picturae-overrides {
    @scope (#elements-mediabank) {
        .elements-mediabank-container > .row > .col-12.mt-3 {
            margin-top: 0 !important;
        }
        .elements-mediabank-filter-panel__clear.elements-mediabank-filter-panel__clear {
            margin-bottom: 0 !important;
        }
    }
}

@scope (#elements-mediabank) {
    .elements-mediabank-media-gallery .elements-mediabank-gallery-horizontal {
        padding: 1rem;
        background: var(--white);
    }

    .elements-mediabank-filter-panel .elements-mediabank-button,
    .elements-mediabank-media-gallery .elements-mediabank-button,
    .elements-mediabank-media-gallery .elements-mediabank-select {
        background-color: var(--white);
    }

    .elements-mediabank-searchbar-input input[type=search]::placeholder {
        --elements-mediabank-medium: var(--elements-dark);
    }

    .com_picturae main a,
    .com_picturae main button {
        text-decoration: none;
    }

    .elements-mediabank-root .elements-mediabank-gallery-table .table {
        --emphasis-color: var(--elements-dark);
        --table-color: var(--elements-dark);
        --table-bg: transparent;
        --table-active-bg: var(--elements-light);
        --table-hover-bg: var(--elements-light);
    }

    .elements-mediabank-root .elements-mediabank-table-row:nth-child(even of .elements-mediabank-table-row) {
        --table-bg: var(--elements-light);
    }

    .elements-mediabank-root .elements-mediabank-table-row:nth-child(even of .elements-mediabank-table-row) + .elements-mediabank-table-details-row,
    .elements-mediabank-root .elements-mediabank-table-row.table-active + .elements-mediabank-table-details-row,
    .elements-mediabank-root .elements-mediabank-table-row.table-active:hover + .elements-mediabank-table-details-row{
        --table-bg: #f9f9f9;
    }

    .elements-mediabank-root .elements-mediabank-gallery-table .table tbody tr.elements-mediabank-table-row.table-active,
    .elements-mediabank-root .elements-mediabank-gallery-table .table tbody tr.elements-mediabank-table-row.table-active:hover,
    .elements-mediabank-root .elements-mediabank-gallery-table .table tbody tr.elements-mediabank-table-row.table-active + .elements-mediabank-table-details-row:hover {
        --table-bg: #f9f9f9;
        background-color: #f9f9f9;
    }

    .elements-mediabank-root .elements-mediabank-gallery-table .table tbody tr.elements-mediabank-table-row.table-active td,
    .elements-mediabank-root .elements-mediabank-gallery-table .table tbody tr.elements-mediabank-table-row.table-active:hover td,
    .elements-mediabank-root .elements-mediabank-gallery-table .table tbody tr.elements-mediabank-table-row.table-active + .elements-mediabank-table-details-row:hover td {
        box-shadow: none;
    }

    .elements-mediabank-root .elements-mediabank-gallery-table .elements-mediabank-table-row table tbody tr.table-active,
    .elements-mediabank-root .elements-mediabank-gallery-table .elements-mediabank-table-row table tbody tr.table-active:hover {
        --table-bg-state:  #f9f9f9;

        background-color: var(--table-bg-state);
    }



    .elements-mediabank-root .elements-mediabank-gallery-table .table thead th {
        color: var(--white);
        background-color: var(--elements-dark);
    }

    @media (min-width: 62rem) {
        .elements-mediabank-metadata-panel.elements-mediabank-metadata-panel[data-v-daacab2a] {
            inline-size: clamp(25rem, calc(25rem + (37.5 - 25) * ((100vw - 75rem) / (96 - 75))), 37.5rem);
        }
    }
    .elements-mediabank-metadata-section.elements-mediabank-metadata-section {
        max-inline-size: 620px;
    }
}