/* CHIEL_UNIFIED_JOURNAAL_WEER_V1
   Centrale visuele laag voor Machielatsma.nl.
   Gebaseerd op CHIEL Journaal + CHIEL Weer: nachtelijk blauw, glas, cyaan en warm goud.
   Alleen presentatie; modulelogica en layout blijven lokaal. */
:root{
  color-scheme:dark;
  --bg:#06111d;
  --bg-2:#091827;
  --panel:rgba(10,27,45,.78);
  --panel-strong:rgba(12,31,51,.92);
  --panel-soft:rgba(255,255,255,.045);
  --card:rgba(12,31,51,.90);
  --card2:rgba(15,38,61,.92);
  --line:rgba(210,232,255,.12);
  --line-strong:rgba(190,224,255,.22);
  --text:#f5f8fc;
  --muted:#9fb2c6;
  --soft:#758da6;
  --blue:#6ec5ff;
  --blue-2:#2a8fff;
  --green:#45dfa5;
  --amber:#ffd46d;
  --gold:#edc384;
  --danger:#ff8290;
  --red:#ff8290;
  --sea:#6ec5ff;
  --mint:#b9dbe8;
  --shadow:0 28px 80px rgba(0,0,0,.30);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:17px;

  --chiel-bg:#06111d;
  --chiel-bg-deep:#04101c;
  --chiel-surface:#0a1b2d;
  --chiel-surface-raised:#0f263d;
  --chiel-surface-soft:#0c2034;
  --chiel-border:rgba(210,232,255,.12);
  --chiel-border-strong:rgba(190,224,255,.22);
  --chiel-text:#f5f8fc;
  --chiel-text-muted:#9fb2c6;
  --chiel-text-soft:#758da6;
  --chiel-blue:#6ec5ff;
  --chiel-green:#45dfa5;
  --chiel-green-strong:#34c994;
  --chiel-yellow:#ffd46d;
  --chiel-gold:#edc384;
  --chiel-red:#ff8290;
  --chiel-radius-card:22px;
  --chiel-radius-panel:18px;
  --chiel-radius-control:14px;
  --chiel-radius-small:12px;
  --chiel-shadow-card:0 28px 80px rgba(0,0,0,.30);
  --chiel-shadow-soft:0 14px 38px rgba(0,0,0,.20);
  --chiel-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html{
  background:#06111d!important;
}
html,body,button,input,select,textarea{
  font-family:var(--chiel-font)!important;
}
body{
  color:var(--text)!important;
  background:
    radial-gradient(circle at 72% -10%,rgba(83,151,215,.24),transparent 30%),
    radial-gradient(circle at 20% 25%,rgba(33,100,153,.12),transparent 28%),
    linear-gradient(150deg,#04101c 0%,#071522 47%,#05101b 100%)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Redactionele accenten uit Journaal. */
.eyebrow,.label,.tag,.section-kicker,.chiel-page-kicker{
  color:var(--gold)!important;
}
.muted,.sub,.lead small,.hint,.small,.footnote{
  color:var(--muted)!important;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,video:focus-visible{
  outline:3px solid var(--gold)!important;
  outline-offset:4px!important;
}

/* Glass cards uit Weer, zonder layouts te veranderen. */
.card,
.panel:not(.scene-panel),
.stat,
.metric,
.portal-group,
.system-card,
.status-box,
.info-card,
.route,
.record,
.idea-proof,
.release-row,
.dialog{
  border-color:var(--line)!important;
  background:linear-gradient(145deg,rgba(14,34,55,.88),rgba(7,22,38,.82))!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
}
.card,.portal-group,.dialog{
  border-radius:var(--radius-lg)!important;
}
.card:hover,.panel:hover,.portal-group:hover{
  border-color:rgba(110,197,255,.26)!important;
}

/* Navigatie als rustige, translucente rail. */
.ecosystem-nav,
.chiel-ecosystem-nav,
.side-rail,
.sidebar{
  border-color:var(--line)!important;
  background:linear-gradient(160deg,rgba(12,31,50,.90),rgba(5,18,31,.86))!important;
  box-shadow:0 22px 70px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}
.ecosystem-nav a,
.chiel-ecosystem-nav a,
.nav-link,
.side-nav a{
  color:#a8bacc!important;
}
.ecosystem-nav a.active,
.ecosystem-nav a[aria-current],
.chiel-ecosystem-nav a.active,
.chiel-ecosystem-nav a[aria-current],
.nav-link.active,
.side-nav a.active{
  color:#f7fbff!important;
  border-color:rgba(119,190,255,.18)!important;
  background:rgba(72,145,211,.13)!important;
}

/* Inputs en beheercontrols. */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  border-color:var(--line-strong)!important;
  border-radius:14px!important;
  background:rgba(5,18,31,.78)!important;
  color:var(--text)!important;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(110,197,255,.62)!important;
  box-shadow:0 0 0 3px rgba(110,197,255,.11)!important;
}
input[type="checkbox"],input[type="radio"]{
  accent-color:var(--blue)!important;
}

/* Pills, tabs en rustige secundaire controls. */
.pill,.chip,.badge,.tab,.count,.service-badge,.group-count,.status-pill{
  border-color:var(--line)!important;
}
.tab.active,.chip.active,.pill.active{
  border-color:rgba(110,197,255,.30)!important;
  background:rgba(72,145,211,.14)!important;
  color:#f7fbff!important;
}

/* Statuskleuren blijven semantisch overal hetzelfde. */
.ok,.good,.state-online,.status.ok,.badge.ok{--status-color:var(--green)}
.warn,.warning,.state-warning,.status.warning,.badge.warn{--status-color:var(--amber)}
.bad,.error,.state-offline,.status.error{--status-color:var(--danger)}
.status.ok,.badge.ok,.notice.good{color:var(--green)!important}
.status.warning,.badge.warn,.warn{color:var(--amber)!important}
.status.error,.notice.error,.bad{color:var(--danger)!important}

/* Buttons: vorm gelijk, bestaande functionele/semantische kleurclasses blijven intact. */
button,.btn,.ghost,.back,.hero-action{
  border-radius:14px!important;
}
.btn:not(.danger):not(.amber),
button.secondary,
.ghost,
.back,
.hero-action{
  border-color:var(--line)!important;
}

/* Mediaframes krijgen dezelfde premium rand en schaduw. */
.video-wrap,.player-shell,.thumb,.camera-media,.frame{
  border-color:rgba(190,224,255,.20)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.28)!important;
}

::selection{
  background:rgba(110,197,255,.28);
  color:#fff;
}

@media(max-width:640px){
  .card,.portal-group,.dialog{border-radius:18px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
}

/* CHIEL_UNIFIED_COMPONENT_FINISH_V2: consistent typography, controls and mobile ergonomics. */
:root{--chiel-space-1:8px;--chiel-space-2:12px;--chiel-space-3:18px;--chiel-space-4:24px;--chiel-control-height:42px}
:where(h1,h2,h3){text-wrap:balance;letter-spacing:-.025em}
:where(p,li,.hint,.muted){overflow-wrap:break-word}
:where(button,.btn,[role="button"],input[type="submit"],input[type="button"]){min-height:var(--chiel-control-height);font:inherit;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
:where(button,.btn,[role="button"],a,input,select,textarea):focus-visible{outline:3px solid var(--gold)!important;outline-offset:3px!important}
:where(button,.btn,[role="button"]):not(:disabled):hover{border-color:rgba(110,197,255,.42)!important}
:where(button,.btn,[role="button"]):disabled{cursor:not-allowed;opacity:.58}
:where(.card,.panel,.dialog,.portal-group){min-width:0}
:where(table){border-collapse:separate;border-spacing:0}
:where(th){color:var(--muted);font-weight:650}
:where(hr){border:0;border-top:1px solid var(--line)}
@media(max-width:640px){
  :root{--chiel-control-height:44px}
  :where(input,select,textarea){font-size:16px!important}
  :where(.card,.panel,.dialog,.portal-group){max-width:100%}
  :where(img,video,canvas,svg){max-width:100%}
  :where(table){max-width:100%}
}
@media(prefers-reduced-motion:reduce){:where(button,.btn,[role="button"]){transition:none!important}}