/* Huisstijl gelijk aan de frontend (GWLWMS): systeemlettertype in plaats van Inter. */
:root {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Inlogscherm zoals GWLWMS/login.html (Tailwind gray-100, gray-300, green-500/600/700, red-500) */
.gwl-login {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1rem; background: #f3f4f6; color: #111827;
}
.gwl-login-card {
    width: 100%; max-width: 28rem; padding: 2rem; background: #fff;
    border-radius: 0.75rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}
.gwl-login-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.gwl-login-brand img { height: 5rem; margin-right: 1rem; }
.gwl-login-brand h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 300; color: #15803d; }
.gwl-login form { display: flex; flex-direction: column; gap: 1rem; }
.gwl-login input {
    width: 100%; padding: 0.75rem; font-size: 1rem; color: #111827; background: #fff;
    border: 1px solid #d1d5db; border-radius: 0.25rem; box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);
}
.gwl-login input::placeholder { color: #9ca3af; opacity: 0.5; }
.gwl-login input:focus { outline: none; box-shadow: 0 0 0 2px #22c55e; }
.gwl-login button {
    width: 100%; padding: 0.75rem 0; font-size: 1rem; color: #fff; background: #16a34a;
    border-radius: 0.25rem; cursor: pointer; transition: background-color .15s;
}
.gwl-login button:hover { background: #15803d; }
.gwl-login-error { margin-top: 1rem; color: #ef4444; }

/* Logo in de balk boven de zijbalk (64 px hoog): passend op de hoogte, breedte volgt vanzelf */
.gwl-logo-balk { display: block; height: 52px; width: auto; }

/* Tweestapsverificatie (twofactor/templates), in dezelfde kaart als het inlogscherm */
.gwl-2fa { display: flex; flex-direction: column; gap: 1rem; font-size: 14px; line-height: 1.5; color: #374151; }
.gwl-2fa-klein { font-size: 13px; color: #6b7280; }
.gwl-2fa code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #111827; letter-spacing: .05em; }
.gwl-2fa-qr { display: flex; justify-content: center; }
.gwl-2fa-qr svg { width: 12rem; height: 12rem; }
.gwl-2fa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.5rem; padding: 1rem 1.25rem;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .5rem; list-style: decimal inside; }
.gwl-2fa-knop { display: block; width: 100%; padding: .75rem 0; text-align: center; color: #fff; background: #16a34a;
    border-radius: .25rem; }
.gwl-2fa-knop:hover { background: #15803d; }
.gwl-login form.gwl-2fa-uit { display: block; margin-top: 1.5rem; font-size: 13px; color: #6b7280; text-align: center; }
.gwl-login .gwl-2fa-uit button { display: inline; width: auto; padding: 0; color: #15803d; background: none; text-decoration: underline; }

/* Dashboard op de beginpagina (templates/admin/index.html); .dark is de donkere modus van Unfold */
.gwl-dash { display: flex; flex-direction: column; gap: 1.5rem; }
.gwl-dash-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; }
.gwl-dash-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.gwl-dash-rij-breed { grid-template-columns: 2fr 1fr; }
.gwl-dash-rij-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gwl-dash-rij-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gwl-dash-rij-een { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1400px) {
    .gwl-dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gwl-dash-rij-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .gwl-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gwl-dash-rij, .gwl-dash-rij-breed, .gwl-dash-rij-drie, .gwl-dash-rij-vier { grid-template-columns: minmax(0, 1fr); }
}
.gwl-dash-blok {
    display: block; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.dark .gwl-dash-blok { background: #111827; border-color: #1f2937; }
.gwl-dash-blok header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gwl-dash-blok h2 { font-size: 15px; font-weight: 600; color: #111827; }
.dark .gwl-dash-blok h2 { color: #f3f4f6; }
.gwl-dash-blok header span, .gwl-dash-sub, .gwl-dash-leeg { font-size: 12px; color: #6b7280; }
.gwl-dash-kpi { display: flex; flex-direction: column; gap: 0.25rem; transition: border-color .15s, box-shadow .15s; }
.gwl-dash-kpi:hover { border-color: #86efac; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .08); }
.gwl-dash-label { font-size: 13px; color: #4b5563; }
.dark .gwl-dash-label { color: #9ca3af; }
.gwl-dash-taart header { margin-bottom: 0.25rem; }
.gwl-dash-taart-cijfer { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; width: fit-content; }
.gwl-dash-taart-cijfer:hover .gwl-dash-getal { text-decoration: underline; }
.gwl-dash-taart-cijfer strong { font-weight: 600; color: #374151; }
.dark .gwl-dash-taart-cijfer strong { color: #e5e7eb; }
.gwl-dash-getal { font-size: 2.25rem; line-height: 2.5rem; font-weight: 300; color: #15803d; }
.dark .gwl-dash-getal { color: #4ade80; }
.gwl-dash-grafiek { position: relative; height: 260px; }
.gwl-dash-let-op { border-color: #fca5a5; }
.gwl-dash-let-op .gwl-dash-getal { color: #dc2626; }
.gwl-dash-regel { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding: .5rem 0; font-size: 13px;
    border-bottom: 1px solid #f3f4f6; }
.gwl-dash-regel strong { font-weight: 600; color: #15803d; text-align: right; }
.gwl-dash-regel span:last-child { grid-column: 1 / -1; font-size: 12px; color: #6b7280; }
.dark .gwl-dash-regel { border-color: #1f2937; }
.gwl-dash-voortgang { margin-bottom: 1rem; }
.gwl-dash-voortgang > div:first-child { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 0.35rem; }
.gwl-dash-voortgang > div:first-child span:last-child { color: #6b7280; }
.gwl-dash-balk { height: 0.5rem; background: #f3f4f6; border-radius: 9999px; overflow: hidden; }
.dark .gwl-dash-balk { background: #1f2937; }
.gwl-dash-balk div { height: 100%; background: #16a34a; border-radius: 9999px; }
.gwl-dash-punt, .gwl-dash-goed { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; font-size: 13px; }
.gwl-dash-punt { color: #b45309; border-bottom: 1px solid #f3f4f6; }
.gwl-dash-punt:hover { color: #92400e; }
.gwl-dash-goed { color: #15803d; }
.gwl-dash-punt .material-symbols-outlined, .gwl-dash-goed .material-symbols-outlined { font-size: 18px; }

/* Rollen: rechten in het beheer als tabel (masterdata/templates/masterdata/widgets/beheer_tabel.html) */
.gwl-rechten { width: 100%; max-width: 44rem; border-collapse: collapse; font-size: 13px; }
.gwl-rechten th { text-align: center; font-weight: 600; padding: .5rem .75rem; border-bottom: 1px solid #e5e7eb; }
.gwl-rechten th:first-child, .gwl-rechten td:first-child { text-align: left; }
.gwl-rechten td { text-align: center; padding: .35rem .75rem; border-bottom: 1px solid #f3f4f6; }
.gwl-rechten tr.gwl-rechten-app td { padding-top: 1rem; font-weight: 600; color: #15803d; border-bottom: 0; }
.dark .gwl-rechten th, .dark .gwl-rechten td { border-color: #1f2937; }
.gwl-rechten input[type=checkbox], form ul[id$="-wms"] input[type=checkbox], form ul[id$="groups"] input[type=checkbox] {
    width: 1rem; height: 1rem; accent-color: #16a34a; }
/* Vinkjes voor rechten in het WMS en rollen bij een gebruiker: in kolommen */
form ul[id="id_wms"], form ul[id="id_groups"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .5rem 1.5rem; }
form ul[id="id_wms"] label, form ul[id="id_groups"] label { display: flex; align-items: center; gap: .5rem; }

/* Prioriteiten en afspraken bij een opdrachtgever: smalle kolommen voor code en getallen, ruimte voor de tekst */
input[name^="priority_agreements-"][name$="-code"], input[name^="priority_agreements-"][name$="-ship_within_days"] { width: 5rem; }
input[name^="priority_agreements-"][name$="-country_code"] { width: 4rem; text-transform: uppercase; }
/* Tijdvelden: het veld vult zijn blok, want Unfold zet het klokje rechts in dat blok; rechts ruimte voor het klokje */
input.vTimeField { width: 100%; min-width: 0; padding-right: 2.75rem; }
div:has(> input[name^="priority_agreements-"][name$="-cutoff_time"]) { min-width: 8.5rem; max-width: 9rem; }
input[name^="priority_agreements-"][name$="-description"] { min-width: 12rem; }
textarea[name^="priority_agreements-"][name$="-notes"] { min-width: 18rem; }

/* Testomgeving: ruimte voor de oranje balk (gwl/omgevingsbalk.js) boven de pagina en de vaste zijbalk */
body.gwl-met-balk { padding-top: var(--gwl-balk); }
body.gwl-met-balk #nav-sidebar { top: var(--gwl-balk); }

/* Toestemming AI-app (wmsmcp): tweede knop rustig grijs */
.gwl-login button.gwl-knop-secundair { color: #111827; background: #e5e7eb; }
.gwl-login button.gwl-knop-secundair:hover { background: #d1d5db; }

/* Module van de WMS-frontend ingebed in het beheer (wms/app.py) */
.gwl-app { display: flex; flex-direction: column; gap: 0.5rem; }
.gwl-app-kop { display: flex; justify-content: space-between; align-items: center; }
.gwl-app-los { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 13px; color: #15803d; }
.gwl-app-los .material-symbols-outlined { font-size: 18px; }
.gwl-app-frame { width: 100%; height: calc(100vh - 11rem - var(--gwl-balk, 0px)); border: 1px solid #e5e7eb;
    border-radius: 0.75rem; background: #f3f4f6; }