/* Sportdag Planner - sportthema: scorebord-navy, cobalt, hesjes-volt. Laadt na ui.css. */
@font-face{font-family:"Barlow";src:url("fonts/Barlow-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-Bold.woff2") format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-ExtraBoldItalic.ttf") format("truetype");font-weight:800;font-style:italic;font-display:swap}

:root{
  --navy:#0B1A3D;--navy-2:#14275A;--cobalt:#2350E8;--cobalt-dark:#1A3BB0;--volt:#D7F53C;
  --tartan:#E8512A;--turf:#0E8A4A;--paper:#F2F4F9;--ink:#14213D;--muted:#4A5878;
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
}

/* ---------- Achtergrond: sportvelden links en rechts van de inhoud ---------- */
html{background:var(--navy)}
body{background:transparent;color:var(--ink);font-family:var(--font)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,26,61,.62),rgba(11,26,61,.28) 22%,rgba(11,26,61,.28) 78%,rgba(11,26,61,.62)),
             url("login-sports-background-v2.jpg") center / cover no-repeat}
main{background:var(--paper);min-height:calc(100vh - 152px);box-shadow:0 0 0 1px rgba(11,26,61,.06),0 24px 60px rgba(6,14,36,.45)}
footer{background:var(--navy)!important;color:#AEBBDD!important;border-top:0!important;margin-top:0!important}
footer a{color:var(--volt)!important}

/* ---------- Scorebord: titel + navigatie ---------- */
.app-header{background:var(--navy);height:84px;padding:12px 24px}
.app-header::before{background:radial-gradient(ellipse at 70% 40%,rgba(35,80,232,.38),transparent 65%)}
.app-header h1{display:flex;align-items:center;gap:14px;font-family:var(--display);font-style:italic;font-weight:800;font-size:2.125rem;line-height:1;letter-spacing:.005em;color:#fff}
.app-header h1::before{content:"";flex:none;width:30px;height:24px;transform:skewX(-18deg);
  background:repeating-linear-gradient(90deg,var(--volt) 0 6px,transparent 6px 11px)}
.app-header p{margin:4px 0 0 44px;color:#AEBBDD;font-weight:500;font-size:.875rem;letter-spacing:.01em;text-transform:none}
.account-button small{color:#AEBBDD}

.app-nav{background:var(--navy);border-bottom:0;border-top:1px solid rgba(255,255,255,.08);padding:8px 16px 12px;gap:8px;
  box-shadow:0 10px 24px rgba(6,14,36,.35)}
.app-nav button{position:relative;min-height:50px;padding:10px 16px;border:0!important;border-radius:6px!important;background:transparent;
  color:#C7D0EA;font-family:var(--display);font-style:italic;font-weight:700;font-size:1.1875rem;letter-spacing:.01em;
  transform:skewX(-12deg);transition:background-color .18s,color .18s,box-shadow .18s}
.app-nav button>span{display:inline-flex;align-items:center;transform:skewX(12deg)}
.app-nav button::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;background:var(--volt);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.app-nav button:hover:not(.tab-active){background:rgba(255,255,255,.07)!important;color:#fff}
.app-nav button:hover:not(.tab-active)::after{transform:scaleX(1)}
.app-nav button.tab-active{background:var(--volt)!important;color:var(--navy)!important;box-shadow:0 8px 20px rgba(215,245,60,.22)}
.app-nav button:focus-visible{outline:3px solid var(--volt);outline-offset:3px}
.app-nav .ui-icon{stroke-width:2.1}

/* ---------- Typografie in de inhoud ---------- */
#stepTitle,.empty-state h3,.loading-panel h2,.panel h2{font-family:var(--display);font-style:italic;font-weight:800;letter-spacing:.005em;color:var(--navy)!important}
#stepTitle{font-size:1.75rem!important;line-height:1.1}
.summary-item{border-color:#DCE2EE}
.summary-item dd{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.125rem;line-height:1.05;color:var(--navy)}
.summary-item:last-child dd{font-size:1.5rem}
.section-tab{font-family:var(--display)!important;font-style:italic;font-weight:700!important;font-size:1.0625rem!important;letter-spacing:.01em}
.btn-primary,.primary{background:var(--cobalt);font-weight:600;letter-spacing:.005em}
.btn-primary:hover,.primary:hover{background:var(--cobalt-dark);box-shadow:0 6px 18px rgba(35,80,232,.32)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:rgba(35,80,232,.45)}
.schema-table thead th,table.grid th{background:var(--navy)}
.schema-table thead th.special-th{background:#A8361A}
.schema-table thead th.class-th{background:#0B7340}

/* ---------- Schema als groot venster (opent vanuit het midden) ---------- */
body.sheet-open{overflow:hidden}
.schema-overlay{position:fixed;inset:0;z-index:120;background:rgba(6,14,36,0);transition:background-color .35s ease}
.schema-overlay[hidden]{display:none}
.schema-overlay.open{background:rgba(6,14,36,.66)}
.schema-sheet{position:absolute;inset:max(14px,2.5vh) max(14px,2.5vw);display:flex;flex-direction:column;background:var(--paper);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  clip-path:inset(calc(50% - 28px) calc(50% - 28px) round 28px);
  transition:clip-path .58s cubic-bezier(.2,.9,.25,1)}
.schema-overlay.open .schema-sheet{clip-path:inset(0 round 18px)}
.schema-overlay.closing .schema-sheet{clip-path:inset(calc(50% - 28px) calc(50% - 28px) round 28px);transition:clip-path .32s cubic-bezier(.55,0,.8,.2)}
.schema-sheet-head{display:flex;align-items:center;gap:16px;padding:14px 16px 14px 28px;background:var(--navy);color:#fff}
.schema-sheet-head h2{margin:0;display:flex;align-items:center;gap:12px;font-family:var(--display);font-style:italic;font-weight:800;font-size:1.875rem;line-height:1}
.schema-sheet-head h2::before{content:"";width:24px;height:20px;transform:skewX(-18deg);background:repeating-linear-gradient(90deg,var(--volt) 0 5px,transparent 5px 9px)}
.schema-sheet-head p{margin:0;flex:1;color:#AEBBDD;font-size:.9375rem}
.schema-close{flex:none;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%!important;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background-color .15s,color .15s}
.schema-close:hover{background:var(--volt);color:var(--navy)}
.schema-close:focus-visible{outline:3px solid var(--volt);outline-offset:2px}
.schema-close svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;fill:none}
.schema-sheet-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 28px 24px;opacity:0;transition:opacity .25s ease .22s}
.schema-overlay.open .schema-sheet-body{opacity:1}
.schema-overlay.closing .schema-sheet-body{opacity:0;transition:opacity .12s ease}
.schema-sheet-body .table-scroll{flex:1;min-height:0;max-height:none}

@media(max-width:640px){
  .app-header{height:calc(64px + env(safe-area-inset-top))}
  .app-header h1{font-size:1.5rem;gap:10px}
  .app-header h1::before{width:22px;height:18px}
  .app-header p{display:none}
  .app-nav{padding:6px 6px 8px;gap:4px}
  .app-nav button{font-size:.9375rem;padding:6px 2px;transform:skewX(-8deg)}
  .app-nav button>span{display:block;transform:skewX(8deg)}
  .app-nav .nav-icon{display:flex;justify-content:center}
  .app-nav button::after{bottom:3px}
  main{min-height:0;box-shadow:none}
  .schema-sheet{inset:8px;border-radius:14px}
  .schema-sheet-head{padding:10px 10px 10px 16px}
  .schema-sheet-head h2{font-size:1.5rem}
  .schema-sheet-head p{display:none}
  .schema-sheet-body{padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .schema-sheet,.schema-overlay.closing .schema-sheet{clip-path:none!important;transition:opacity .15s!important;opacity:0}
  .schema-overlay.open .schema-sheet{opacity:1}
  .schema-sheet-body{transition:none}
  .app-nav button,.app-nav button::after{transition:none}
}