/* UREN EN REIZEN (fase 3, 26-09-2026)
   Alleen indeling. Kleuren, afstanden, radii en lettergroottes komen uit de variabelen van
   bouwdoos.css: het palet van de app (Ibley-blauw, de signaalkleuren, de grijzen), geen eigen
   kleur. De app is altijd licht, ook op een donkere Mac (besluit 26-09). Elke laagkaart op deze
   schermen is de blauwe (laag 'week': licht Ibley-blauw, donkere tekst). De onderdelen zelf
   (statkaart, laagkaart, voorstelkaart, rechterkolom) staan in de bouwdoos. */

/* Het hele scherm op de inhoudsbreedte van de bouwdoos, net als de kop en de tabbalk
   (die hebben max-width: --inhoud-max). Anders loopt op een breed scherm (2560 px) de
   rechterkolom 200 px voorbij Ververs, het tandwiel en de twee lijnen. */
.ur-scherm { display: grid; gap: var(--a4); max-width: var(--inhoud-max); }
.ur-scherm .bd-schermkop h1 { color: var(--tekst); }
.ur-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); }
.ur-stats--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ur-rij { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--a4); align-items: start; }
.ur-hoofd { display: grid; gap: var(--a4); min-width: 0; }

.ur-zin { margin: 0; font-size: var(--tekst-basis); color: var(--tekst); background: var(--laag-vlak);
  border-radius: var(--radius-kaart); padding: var(--a3); }
.ur-kolom .ur-zin, .bd-kolom .ur-zin { background: transparent; padding: 0; }
.ur-zin--zacht { color: var(--tekst-zacht); font-size: var(--tekst-tabel); }

/* Het invulblok op de plek van het beeld in een voorstelkaart. */
.ur-invul { display: grid; grid-template-columns: 96px 128px minmax(0, 1fr); gap: var(--a2); align-items: center; }
.ur-veld { height: var(--hoogte-veld); font-size: var(--tekst-basis); min-width: 0; width: 100%; box-sizing: border-box; }
.ur-uren { display: block; }

.ur-snel, .ur-sjabloonform { display: grid; gap: var(--a2); }
.ur-snel-rij { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }
.ur-label { display: grid; gap: var(--a1); font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ur-knoppen { display: flex; justify-content: flex-end; gap: var(--a2); }

.ur-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a1); font-size: var(--tekst-tabel); }
.ur-lijst li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--a2); align-items: center; min-height: var(--klikdoel); }
.ur-lijst--ritten li { grid-template-columns: 28px 76px minmax(0, 1fr) 96px 76px; background: var(--vlak);
  border-radius: var(--radius-kaart); padding: var(--a1) var(--a2); box-shadow: var(--schaduw); }
.ur-lijst-datum { color: var(--tekst-zacht); white-space: nowrap; }
.ur-lijst-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur-lijst-km, .ur-lijst b { text-align: right; white-space: nowrap; }


.ur-paneel-sjablonen { display: grid; gap: var(--a2); margin-top: var(--a4); padding-top: var(--a3); border-top: 1px solid var(--lijn); }
.ur-paneel-sjablonen h3 { margin: 0; font-size: var(--tekst-basis); }
.ur-paneel-sjabloon { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: var(--a2); align-items: center; font-size: var(--tekst-tabel); }

/* Blokken per soort werk in een voorstel; de bron achter een klik. */
.ur-blokken { list-style: none; margin: 0 0 var(--a2); padding: 0; display: grid; gap: var(--a1); }
.ur-blok summary { cursor: pointer; font-size: var(--tekst-basis); color: var(--tekst); min-height: var(--klikdoel); display: flex; align-items: center; gap: var(--a1); }
.ur-blok-bron { margin: 0 0 var(--a1) var(--a3); font-size: var(--tekst-klein); color: var(--tekst-zacht); }

/* Waar komt dit vandaan? */
.ur-herkomst { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); display: grid; gap: var(--a2); }
.ur-herkomst > summary { cursor: pointer; font-size: var(--tekst-titel); font-weight: 700; color: var(--tekst); min-height: var(--klikdoel); }
.ur-herkomst-tabel { overflow-x: auto; }
.ur-herkomst .bd-tabel th, .ur-herkomst .bd-tabel td { vertical-align: top; text-align: left; padding: var(--a1) var(--a2); border-bottom: 1px solid var(--lijn); }
.ur-herkomst-bron { color: var(--tekst-zacht); font-size: var(--tekst-klein); }

/* Vaste blokken: rechts op Vandaag, beheer onder het tandwiel. */
.ur-vaste { display: grid; gap: var(--a2); }
.ur-lijst li.ur-vast { grid-template-columns: minmax(0, 1fr) auto auto; }
.ur-blokform { display: grid; grid-template-columns: minmax(0, 1fr) 72px 110px auto auto; gap: var(--a1); align-items: center; }

/* Overzicht: uren per maand als staafjes met het nodige maandgemiddelde als lijn. */
.ur-prognose { margin-bottom: var(--a2); }
.ur-maanden { margin: 0; background: var(--laag-vlak); border-radius: var(--radius-kaart); padding: var(--a3); }
.ur-maanden svg { width: 100%; height: auto; display: block; }
.ur-staaf { fill: var(--accent); }
.ur-staaf--genoeg { fill: var(--goed-tekst); }
.ur-staaf-getal { fill: var(--tekst); font-size: var(--tekst-klein); font-weight: 600; }
.ur-staaf-as { fill: var(--tekst-zacht); font-size: var(--tekst-klein); }
.ur-staaf-as--nu { fill: var(--tekst); font-weight: 700; }
.ur-staaf-as--later { opacity: 0.6; }
.ur-maand-lijn { stroke: var(--tekst); stroke-width: 1.5; stroke-dasharray: 6 4; }
.ur-maand-lijn-tekst { fill: var(--tekst); font-size: var(--tekst-klein); font-weight: 600; }

/* Reizen: maand kiezen, sjabloonrit met enkel/retour, totalen per maand en per jaar. */
.ur-maandkeuze { display: flex; gap: var(--a1); align-items: center; margin-left: var(--a2); }
.ur-maandkeuze .ur-veld { width: 160px; }
.ur-sjabloon-rit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }
.ur-totalen-rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a3); }
.ur-totalen-vak { background: var(--laag-vlak); border-radius: var(--radius-kaart); padding: var(--a2) var(--a3); overflow-x: auto; }
.ur-totalen th, .ur-totalen td { text-align: right; padding: var(--a1) var(--a2); border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.ur-totalen th:first-child, .ur-totalen td:first-child { text-align: left; }
.ur-totalen .ur-rij-nu th, .ur-totalen .ur-rij-nu td { font-weight: 700; background: var(--accent-licht); }

/* Import van de oude Excel: bestand kiezen, kolommen koppelen, droge run. */
.ur-import-kies { display: flex; gap: var(--a2); align-items: end; flex-wrap: wrap; margin-bottom: var(--a3); }
.ur-import-kies .ur-label { min-width: 240px; }
.ur-import-tabel { background: var(--laag-vlak); border-radius: var(--radius-kaart); margin: var(--a2) 0; }
.ur-import-tabel th, .ur-import-tabel td { text-align: left; padding: var(--a1) var(--a2); border-bottom: 1px solid var(--lijn); vertical-align: top; }
.ur-import-koppel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a2); margin: var(--a3) 0; }
.ur-import-droog { display: grid; gap: var(--a2); margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--lijn); }

/* Uitvoer voor de boekhouder */
.ur-uitvoer { display: grid; gap: var(--a2); }
.ur-uitvoer .bd-knop { display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; box-sizing: border-box; }
.ur-uitvoer-csv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }

/* Per dag (26-09): blokken aanvinken, vaste blokken erbij, één urenveld, uren per blok achter een klik. */
.ur-dag { display: grid; gap: var(--a2); }
.ur-invul--dag { grid-template-columns: 96px minmax(0, 1fr); }
.ur-blokken li { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.ur-deel { display: inline-flex; align-items: center; gap: var(--a1); font-size: var(--tekst-basis); color: var(--tekst); min-height: var(--klikdoel); cursor: pointer; }
.ur-deel input { width: 16px; height: 16px; accent-color: var(--accent); }
.ur-blokken .ur-blok summary { font-size: var(--tekst-klein); color: var(--tekst-zacht); min-height: auto; }
.ur-vast-kies { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a3); font-size: var(--tekst-tabel); }
.ur-deel--vast { font-size: var(--tekst-tabel); }
.ur-verdeel > summary { cursor: pointer; font-size: var(--tekst-tabel); color: var(--accent); min-height: var(--klikdoel); display: flex; align-items: center; }
.ur-verdeel-rij { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--a2); align-items: center; font-size: var(--tekst-tabel); margin-top: var(--a1); }

@media (max-width: 1100px) { .ur-rij { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ur-stats, .ur-stats--drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ur-invul { grid-template-columns: 1fr 1fr; }
  .ur-invul .ur-veld--tekst { grid-column: 1 / -1; }
  .ur-import-koppel { grid-template-columns: 1fr 1fr; }
}