/* Oefenmeester — overgangslaag uit de vorige overhaul.
   Deze stijlen draaien nog op de pagina's die includes/brand.php laden.
   De eigen kleuren zijn vervangen door verwijzingen naar om-tokens.css, zodat
   ze meelopen met het nieuwe palet en met het rolaccent. Zodra een pagina naar
   de nieuwe shell is overgezet, mag hij uit includes/brand.php verdwijnen. */
:root{
  --ov-primary:var(--om-brand);--ov-primary-2:var(--om-brand-2);--ov-cyan:var(--om-sky);
  --ov-success:var(--om-ok);--ov-warning:var(--om-warn);--ov-danger:var(--om-bad);
  --ov-bg:var(--om-bg);--ov-surface:var(--om-surface);--ov-soft:var(--om-brand-soft);
  --ov-text:var(--om-ink);--ov-muted:var(--om-ink-2);--ov-line:var(--om-line);
  --ov-shadow:var(--om-sh);--ov-shadow-sm:var(--om-sh-sm);
  --ov-radius:var(--om-r);--ov-radius-sm:var(--om-r-sm);--ov-content:var(--om-content-wide);
}
html{scroll-behavior:smooth;background:var(--ov-bg)}
body{background:radial-gradient(circle at 8% 0,rgba(86,100,226,.07),transparent 27rem),var(--ov-bg)!important;color:var(--ov-text);text-rendering:optimizeLegibility}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(66,84,150,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(66,84,150,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}

/* Pagina-opbouw */
main,.main,.wrap,.container{position:relative}
.main,.page-wrap{max-width:var(--ov-content)!important;margin-inline:auto!important}
.card,.panel,.sidebar-card,.list-card,.stat-tile,.bank,.rep,.info-card{border-color:var(--ov-line)!important;border-radius:var(--ov-radius)!important;box-shadow:var(--ov-shadow-sm)!important;background:color-mix(in srgb,var(--ov-surface) 97%,var(--ov-soft))!important}
.card:hover,.list-card:hover,.bank:hover{border-color:color-mix(in srgb,var(--ov-primary) 32%,var(--ov-line))!important;box-shadow:var(--ov-shadow)!important}
h1,h2,h3{letter-spacing:-.025em;color:var(--ov-text)}
p{line-height:1.65}

/* Knoppen, velden en interactieve onderdelen */
.btn-primary,button.btn-primary,a.btn-primary,.btn-main{background:linear-gradient(135deg,var(--ov-primary),var(--ov-primary-2))!important;color:#fff!important;border:0!important;border-radius:12px!important;box-shadow:0 8px 18px color-mix(in srgb,var(--ov-primary) 25%,transparent)!important;transition:.18s ease!important}
.btn-primary:hover,button.btn-primary:hover,a.btn-primary:hover,.btn-main:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 12px 25px color-mix(in srgb,var(--ov-primary) 34%,transparent)!important}
button,a,.btn{touch-action:manipulation}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{border:1px solid var(--ov-line)!important;border-radius:12px!important;background:var(--ov-surface)!important;color:var(--ov-text)!important;min-height:44px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--ov-primary)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ov-primary) 13%,transparent)!important;outline:0!important}
table{border-collapse:separate;border-spacing:0}
th{background:#f6f7fb!important;color:#6d7690!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.075em}
tbody tr{transition:background .15s}tbody tr:hover{background:#f8f9ff}

/* Nieuwe navigatie */
.site-header{min-height:74px!important;margin:10px max(10px,calc((100vw - 1540px)/2));border:1px solid rgba(73,87,147,.13)!important;border-radius:18px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 12px 38px rgba(29,42,93,.09)!important}
.site-header:before{height:0!important}
.site-logo img{max-height:46px}
.nav-link{border-radius:12px!important;padding:9px 11px!important}
.nav-link:hover{background:var(--ov-soft)!important;color:var(--ov-primary)!important}
.nav-link.active{background:linear-gradient(135deg,var(--ov-primary),var(--ov-primary-2))!important;box-shadow:0 7px 18px color-mix(in srgb,var(--ov-primary) 26%,transparent)!important}
.nav-link .nav-icon{background:#eff2ff!important}
.nav-avatar{border-radius:14px!important;border-color:#d9def5!important;box-shadow:0 4px 14px rgba(35,52,109,.10)}
.nav-dropdown-menu{border-color:var(--ov-line)!important;border-radius:16px!important;box-shadow:var(--ov-shadow)!important}
.ov-role-strip{max-width:var(--ov-content);margin:0 auto;padding:4px 24px 0;display:flex;align-items:center;justify-content:space-between;color:var(--ov-muted);font-size:12px}
.ov-role-strip strong{color:var(--ov-primary)}

/* Dashboard */
.welcome-hero{border-radius:24px!important;background:linear-gradient(125deg,#17234d 0%,var(--ov-primary) 57%,var(--ov-primary-2) 115%)!important;box-shadow:0 22px 55px color-mix(in srgb,var(--ov-primary) 25%,transparent)!important;border:1px solid rgba(255,255,255,.14)!important}
.welcome-hero:after{content:"";position:absolute;width:230px;height:230px;right:12%;top:-110px;border-radius:50%;border:38px solid rgba(255,255,255,.06);pointer-events:none}
.welcome-greeting{font-family:inherit!important;font-weight:850!important;letter-spacing:-.035em}
.list-grid{gap:16px!important}.list-card{overflow:hidden}.list-icon{border-radius:14px!important}
.section-hdr{margin-top:8px}.section-hdr h2,.section-hdr h3{font-weight:800}
.sidebar-card{overflow:hidden}.stat-tile{box-shadow:none!important;background:#f6f7fd!important}
.tip-banner{border-radius:16px!important;border:1px solid #dce3f7!important}

/* Publieke homepage */
.hero,.landing-hero{position:relative;overflow:hidden}
.eyebrow{color:var(--ov-primary)!important;background:var(--ov-soft);border-radius:999px;padding:6px 11px;font-weight:800}
.sec-head h2{font-size:clamp(28px,4vw,46px)!important}
.review,.pricing-card,.feature-card{border-radius:var(--ov-radius)!important;border-color:var(--ov-line)!important;box-shadow:var(--ov-shadow-sm)!important}

/* Mobiele hoofdnav */
.ov-mobile-nav{display:none}
@media(max-width:768px){
  body{padding-bottom:78px!important}.site-header{margin:0;border-width:0 0 1px!important;border-radius:0!important;min-height:64px!important}.site-logo img{max-width:145px!important}
  .ov-role-strip{display:none}.main,.wrap,.container{padding-left:14px!important;padding-right:14px!important}
  .welcome-hero{border-radius:18px!important;padding:22px!important}.welcome-greeting{font-size:23px!important}.welcome-stats{gap:11px!important}
  .ov-mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:10px;right:10px;bottom:10px;z-index:900;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border:1px solid var(--ov-line);border-radius:18px;box-shadow:0 16px 45px rgba(21,31,70,.22);padding:7px}
  .ov-mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px;border-radius:12px;text-decoration:none;color:var(--ov-muted);font-size:10px;font-weight:750;min-width:0}
  .ov-mobile-nav a.active{background:var(--ov-soft);color:var(--ov-primary)}.ov-mobile-nav .mi{font-size:20px;line-height:1}
  .two-col,.grid-2,.grid2{grid-template-columns:1fr!important}.list-grid{grid-template-columns:1fr!important}.card,.sidebar-card{border-radius:16px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media(prefers-color-scheme:dark){html[data-theme="dark"]{--ov-bg:#0e1424;--ov-surface:#151e32;--ov-soft:#202a47;--ov-text:#edf1ff;--ov-muted:#aab3c8;--ov-line:#2b3650}}