/* Minimal RDW theme extracted from Storingsdienst design system
   Contains design tokens and essential layout (app-shell, topbar, nav, content)
   Keep this small to avoid surprising overrides; more can be merged later. */

:root {
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-primary-active: #1E40AF;
    --color-primary-soft: #EFF6FF;
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-border: #E2E8F0;
    --color-border-strong: #CBD5E1;
    --color-text: #0F172A;
    --color-text-muted: #64748B;

    --font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --radius: 10px;
    --space-1: .5rem;   /* 8px */
    --space-2: 1rem;    /* 16px */
    --space-3: 1.5rem;  /* 24px */
    --app-topbar-height: 64px;
    --content-max-width: 1400px;
    --topbar-grad-start: #1b2e73;
    --topbar-grad-end: #2a3f93;
    --topbar-border: rgba(255, 255, 255, 0.16);
    --topbar-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

body { font-family: var(--font-family); background: var(--color-bg); color: var(--color-text); }

/* App shell */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); }
.app-topbar {
    position: sticky; top: 0; z-index: 40; height: var(--app-topbar-height);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: 0 var(--space-3);
    background: linear-gradient(120deg, var(--topbar-grad-start) 0%, var(--topbar-grad-end) 62%, #3951ab 100%);
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: var(--topbar-shadow);
}

.app-topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%);
}

.app-topbar-start,
.app-topbar-end {
    position: relative;
    z-index: 1;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 700;
    color: #f8fbff;
    text-decoration: none;
    letter-spacing: .01em;
}

.app-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 5px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.24);
}

.app-brand-text {
    font-size: .98rem;
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.2);
}

.app-brand-mark img { width:100%; height:100%; display:block; object-fit:contain }

.app-user { display: flex; align-items: center; }

.app-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 246, 255, 0.95);
    color: #1d4ed8;
    font-weight: 700;
}

.app-account-trigger {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.16);
    color: #f8fbff;
    border-radius: 11px;
    padding: .36rem .62rem;
    cursor: pointer;
    min-width: 176px;
    backdrop-filter: blur(8px);
    transition: background-color .16s ease, border-color .16s ease;
}

.app-account-trigger:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.36);
}

.app-account-trigger .app-user-naam {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    color: #f8fbff;
}

.app-account-trigger .app-user-rol {
    font-size: .74rem;
    line-height: 1.2;
    color: rgba(226, 232, 240, 0.96);
}

.app-account-dropdown {
    margin-top: .4rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.app-account-dropdown-item {
    color: var(--color-text);
}

.app-account-dropdown-item:hover,
.app-account-dropdown-item.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.app-body { flex:1; display:flex; min-height:0 }
.app-nav {
    width:250px; flex-shrink:0; background:#223381; padding:var(--space-2) var(--space-1); color:#fff;
    border-right:1px solid var(--color-border); display:flex; flex-direction:column; gap:.1rem; position:sticky; top:var(--app-topbar-height); height:calc(100vh - var(--app-topbar-height)); max-height:calc(100dvh - var(--app-topbar-height)); min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
.app-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.08);
}

.app-nav::-webkit-scrollbar {
    width: 10px;
}

.app-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.app-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    border: 2px solid rgba(34, 51, 129, 0.95);
}

.app-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.62);
}
.app-nav .nav-item { display:flex; align-items:center; gap:.6rem; margin:1px .5rem; padding:.55rem .75rem; border-radius:var(--radius); color:inherit; text-decoration:none; font-weight:500 }
.app-nav .nav-item:hover { background: rgba(255,255,255,0.06); }
.app-nav .nav-item.active { background: rgba(255,255,255,0.08); font-weight:700; }
.nav-groep { margin: var(--space-2) .75rem .25rem; font-size:.7rem; font-weight:700; text-transform:uppercase; color:rgba(255,255,255,0.85) }
.app-nav .nav-level-0 { margin-left: .5rem; }
.app-nav .nav-level-1 { margin-left: 1.15rem; }
.app-nav .nav-level-2 { margin-left: 1.8rem; }
.nav-footer { margin-top:auto; padding:var(--space-2) .5rem 0; border-top:1px solid rgba(255,255,255,0.06) }
.nav-logout { background:transparent; border:1px solid rgba(255,255,255,0.12); color:#fff; padding:.6rem .75rem; border-radius:var(--radius); font-weight:600 }

.app-content { flex:1; min-width:0; padding:var(--space-3) }
.app-content-inner { max-width:var(--content-max-width); margin-inline:auto }

/* Page header */
.pagina-kop { display:flex; gap:var(--space-2); justify-content:space-between; align-items:flex-start; margin-bottom:var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--color-border); }
.pagina-subtitel { margin-top:.25rem; color:var(--color-text-muted); }

/* Blocks */
.blok { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:0 1px 2px rgba(15,23,42,.06); padding:var(--space-3); margin-bottom:var(--space-3) }

@media (max-width:860px) {
    .app-body { flex-direction:column }
    .app-topbar {
        padding: 0 .9rem;
    }

    .app-brand-text {
        font-size: .93rem;
    }

    .app-account-trigger {
        min-width: auto;
        padding: .3rem .5rem;
    }

    .app-account-trigger .app-user-rol {
        display: none;
    }

    .app-nav { position:static; width:100%; height:auto; max-height:40vh; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--color-border) }
    .nav-groep { display:none }
}

/* Basic form field styling (compatible with Storingsdienst markup) */
.form-veld,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], select, textarea {
    width: 100%; padding: .62rem .75rem; margin: 0 0 .75rem;
    font-family: inherit; font-size: .92rem; color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong); border-radius: 8px;
}
.form-veld:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 6px rgba(37,99,235,0.06); }

/* Data table */
.data-tabel { width:100%; border-collapse: collapse; margin-bottom: 1rem; }
.data-tabel thead th { text-align:left; padding: .6rem; border-bottom: 1px solid var(--color-border); font-weight:700; }
.data-tabel tbody td { padding: .55rem; border-bottom: 1px solid var(--color-border); }
.data-tabel tr.leeg td { text-align:center; color:var(--color-text-muted); }

/* Secondary button used across Storingsdienst pages */
.btn-secundair {
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong);
    padding: .6rem .9rem; border-radius: 8px; font-weight:600; cursor:pointer;
}
.btn-secundair.smal { padding: .45rem .9rem; font-size:.85rem }

.leeg { color: var(--color-text-muted); }

.badge { display:inline-block; padding:.25rem .5rem; border-radius:6px; font-weight:600; font-size:.85rem }
.badge-blauw { background: var(--color-primary-soft); color: var(--color-primary-active); border:1px solid rgba(37,99,235,.12) }
.badge-groen { background: var(--color-success-soft); color: var(--color-success-text) }
.badge-rood { background: var(--color-error-soft); color: var(--color-error-text) }