/* De kleuren komen uit de Java-code: InternFrame, Button98, ZoekScherm en Toolbar */
:root {
    --back: rgb(63, 63, 191);          /* InternFrame back */
    --high: rgb(182, 182, 255);        /* back.brighter() x3 */
    --dark: rgb(21, 21, 65);           /* back.darker() x3 */
    --titel: rgb(44, 44, 133);         /* back.darker() */
    --paars: rgb(120, 120, 230);       /* Toolbar, Button98 KLEURNORM */
    --paneel: rgb(220, 220, 255);      /* ZoekScherm, Toolbar */
    --lijst: rgb(171, 171, 255);       /* back.brighter() in ZoekScherm */
    --knop: rgb(210, 210, 240);        /* Button98 */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background: var(--dark);
    color: black;
    font: 13px Arial, Helvetica, sans-serif;
}

.frame-titel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 16px;
    color: white;
    background: var(--titel);
    border-bottom: 1px solid var(--high);
}

.frame-titel span {
    font-weight: bold;
    letter-spacing: 0.1em;
}

.frame-titel a {
    color: var(--high);
}

#gids {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 1px;
    padding: 1px;
}

.laden {
    color: white;
    margin: 16px;
}

/* InternFrame */
.intern-frame {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0 3px 3px;
    background: var(--back);
    border: 1px solid;
    border-color: var(--high) var(--dark) var(--dark) var(--high);
}

.titel-balk {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 17px;
    padding: 1px 0;
}

.titel, .titel-knop {
    font: 12px Arial, Helvetica, sans-serif;
    line-height: 13px;
    color: white;
    background: var(--titel);
    border: 1px solid;
    border-color: var(--high) var(--dark) var(--dark) var(--high);
    border-radius: 7px;
    padding: 0 9px;
    white-space: nowrap;
}

.titel-knop {
    cursor: pointer;
    background: var(--back);
}

.titel-knop:hover {
    color: yellow;
}

.titel-knop:active {
    background: var(--titel);
    border-color: var(--dark) var(--high) var(--high) var(--dark);
}

/* ButtonFrame: knoppen op 1/8 en 7/8 van de breedte */
.browser .titel-balk {
    justify-content: space-between;
    padding: 1px 8%;
}

.inhoud {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--dark) var(--high) var(--high) var(--dark);
}

/* Object menu */
.object-menu {
    flex: 0 0 200px;
}

.object-menu .inhoud {
    overflow-y: auto;
    background: var(--paneel);
}

.button98 {
    display: flex;
    align-items: center;
    height: 25px;
    margin-left: calc(1px + var(--sub, 0) * 10px);
    margin-right: 1px;
    padding: 0 3px 0 1px;
    background: var(--knop);
    border: 1px solid transparent;
    color: var(--paars);
    font: bold 12px "Times New Roman", Times, serif;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button98 .icon {
    flex: none;
    width: 23px;
    height: 23px;
    margin-right: 4px;
}

.button98[data-teken-soort="1"] {
    border-color: white dimgray dimgray white;
    color: blue;
}

.button98[data-teken-soort="2"] {
    border-color: dimgray white white dimgray;
    color: rgb(0, 0, 178);
}

.button98[data-teken-soort="2"] .icon {
    transform: translate(1px, 1px);
}

/* MainMap: twee vensters naast elkaar, de zoomkaart eronder, altijd vierkant */
.main-map {
    flex: none;
    height: 100%;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr;
    gap: 1px;
}

.zoom-kaart {
    grid-column: 1 / -1;
}

.kaart {
    position: absolute;
    inset: 0;
    background: rgb(127, 255, 127);
}

.kaart canvas {
    display: block;
    touch-action: none;
}

/* Zoek Venster */
.zoek-venster .inhoud {
    background: var(--paneel);
}

.zoek-scherm {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 1px;
}

.categorie-label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 2px;
    background: var(--paars);
    font: 13px "Times New Roman", Times, serif;
}

.categorie-label select {
    flex: 1;
    min-width: 0;
    background: var(--lijst);
    font: inherit;
}

.namen {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--lijst);
    border: 1px solid var(--dark);
    font: 13px Arial, Helvetica, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.namen:focus-visible {
    outline: 2px solid yellow;
}

.namen li {
    padding: 1px 4px;
    cursor: default;
    white-space: nowrap;
}

.namen li.gekozen {
    background: var(--titel);
    color: white;
}

/* Browser */
.browser {
    flex: 1 1 280px;
    min-width: 240px;
}

.browser iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: white;
}

/* Smal scherm: de kaarten bovenaan, menu en browser eronder */
@media (max-width: 900px) {
    #gids {
        flex-direction: column;
        overflow-y: auto;
    }

    .main-map {
        order: -1;
        width: 100%;
        height: auto;
    }

    .object-menu {
        flex: 0 0 240px;
    }

    .browser {
        flex: 0 0 70vh;
        min-width: 0;
    }
}