/* Basisopmaak van de app: kop, menu, knoppen, formulieren, meldingen. Kleuren, lettertypen en afstanden komen uit theme.css. */
* { box-sizing: border-box; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font:var(--text-base)/var(--leading-normal) var(--font-body); }
a { color:var(--color-link); }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
h1, h2, h3 { font-family:var(--font-heading); font-weight:400; }
h1 { font-size:var(--text-2xl); line-height:1.2; margin:0 0 var(--space-7); }
.wrap { max-width:var(--layout-max-width); margin:0 auto; padding:0 var(--space-7); }
body.wide .wrap { max-width:var(--layout-max-width-wide); }       /* brede tabellen: kop, menu en inhoud even breed */
.file-icon { display:inline-flex; vertical-align:middle; color:var(--color-text-muted); cursor:help; }
.file-icon svg { width:var(--icon-size); height:var(--icon-size); }
main.wrap { padding-top:var(--space-9); padding-bottom:var(--space-11); }   /* main.wrap: anders wint .wrap en blijft de ruimte 0 */

/* Kop: het logo van Resultaat Radar links, vaste plek voor naam en logo van de opdrachtgever rechts, daaronder het menu */
.site-header { background:var(--color-surface); border-bottom:var(--border); }
.header-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4) var(--space-8); padding-top:var(--space-5); padding-bottom:var(--space-3); }
.brand { display:flex; align-items:center; gap:var(--space-6); text-decoration:none; color:var(--color-text); }
.brand-logo { display:block; height:var(--header-logo-height); width:auto; max-width:100%; object-fit:contain; }
.client-brand { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-5); min-height:var(--header-logo-height); flex:1 1 var(--client-block-min-width); min-width:0; margin-left:auto; }
.client-logo { display:block; max-height:var(--header-logo-height); max-width:var(--client-logo-max-width); width:auto; height:auto; object-fit:contain; }
.client-name { font-family:var(--font-heading); font-size:var(--text-lg); color:var(--color-text); text-align:right; overflow-wrap:anywhere; }
/* Account rechtsboven: één rond icoon; een klik opent naam, rol, opdrachtgever kiezen, Mijn account en Uitloggen */
.account-menu { position:relative; }
.account-button { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:var(--account-button-size); height:var(--account-button-size); border:var(--border); border-radius:var(--radius-pill); background:var(--color-surface); color:var(--color-primary); }
.account-button::-webkit-details-marker { display:none; }
.account-button:hover, .account-menu[open] .account-button { border-color:var(--color-primary); background:var(--color-bg-subtle); }
.account-button svg { width:var(--icon-size); height:var(--icon-size); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.account-panel { position:absolute; right:0; top:calc(100% + var(--space-3)); z-index:30; width:var(--account-panel-width); display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5) var(--space-6); background:var(--color-surface); border:var(--border); border-radius:var(--radius-md); font-size:var(--text-sm); }
.account-panel form { margin:0; }
.account-name { font-weight:600; overflow-wrap:anywhere; }
.account-panel .user-role { margin-top:calc(var(--space-3) * -1); }
.account-panel label { display:flex; flex-direction:column; gap:var(--space-1); color:var(--color-text-muted); }
.client-switch select { width:100%; max-width:var(--client-switch-max-width); font-size:var(--text-sm); }
.user-role { color:var(--color-text-muted); }
.no-access h2 { margin-top:0; }
button.link-button { background:none; border:0; padding:0; color:var(--color-primary); text-decoration:underline; font:inherit; cursor:pointer; }
button.link-button:hover { background:none; color:var(--color-text); }
.login-card { max-width:var(--login-width); margin:var(--space-8) auto; background:var(--color-surface); border:var(--border); border-radius:var(--radius-lg); padding:var(--space-8); }
.login-card h1 { margin-top:0; }
.login-card label { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-6); font-size:var(--text-sm); color:var(--color-text-muted); }
.login-card input { width:100%; }
.login-card .errors { background:var(--color-danger-bg); color:var(--color-danger-fg); padding:var(--space-4) var(--space-6); border-radius:var(--radius-md); margin:0 0 var(--space-6); font-size:var(--text-md); }
/* Tweestapsverificatie: de code invullen, instellen met een QR-code, en de reservecodes */
.two-factor-card { max-width:var(--login-width-wide); }
.otp-input { font-family:var(--font-mono); font-size:var(--text-xl); letter-spacing:.3em; text-align:center; }
.login-card .steps { padding-left:var(--space-8); margin:0 0 var(--space-7); }
.login-card .steps li { margin-bottom:var(--space-7); }
.login-card .steps form { display:flex; gap:var(--space-4); align-items:center; margin-top:var(--space-4); }
.login-card .steps form .otp-input { max-width:var(--otp-field-width); }
.qr { margin:var(--space-4) 0; }
.qr-svg { display:block; max-width:100%; height:auto; border:var(--border); }
.secret-key { font-family:var(--font-mono); color:var(--color-text); overflow-wrap:anywhere; }
.backup-codes { list-style:none; padding:0; margin:var(--space-5) 0 var(--space-7); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-8); font-family:var(--font-mono); font-size:var(--text-md); }
/* Menu: de vier groepen in de bovenbalk (hoofdletters), daaronder de secties van de groep waar je bent */
.site-nav nav { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.nav-groups a { color:var(--color-text-muted); text-decoration:none; padding:var(--space-3) var(--space-5) var(--space-2); font-size:var(--text-md); font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; border-bottom:3px solid transparent; }
.nav-groups a:hover { color:var(--color-text); background:var(--color-bg-subtle); }
.nav-groups a.active { color:var(--color-primary); border-bottom-color:var(--color-accent); }
.nav-sections { background:var(--color-bg-subtle); margin:0 calc(var(--space-7) * -1); padding:0 var(--space-7); border-top:var(--border); }
.nav-sections a { color:var(--color-text-muted); text-decoration:none; padding:var(--space-2) var(--space-5); font-size:var(--text-md); white-space:nowrap; }
.nav-sections a:hover { color:var(--color-text); }
.nav-sections a.active { color:var(--color-primary); font-weight:600; box-shadow:inset 0 -3px 0 var(--color-accent); }

.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.muted { color:var(--color-text-muted); }
.notice { background:var(--color-warn-bg); color:var(--color-warn-fg); padding:var(--space-4) var(--space-6); border-radius:var(--radius-md); margin:0 0 var(--space-7); font-size:var(--text-md); }
.badge { display:inline-block; min-width:1.3rem; padding:0 var(--space-2); border-radius:var(--radius-pill); background:var(--color-accent); color:var(--color-on-accent); font-size:var(--text-xs); font-weight:700; text-align:center; line-height:1.3rem; margin-left:var(--space-1); }
.badge[hidden] { display:none; }
.messages { list-style:none; padding:0; margin:0 0 var(--space-7); }
.messages li { padding:var(--space-4) var(--space-6); border-radius:var(--radius-md); margin-bottom:var(--space-2); font-size:var(--text-md); }
.messages .success { background:var(--color-success-bg); color:var(--color-success-fg); }
.messages .error { background:var(--color-danger-bg); color:var(--color-danger-fg); }

/* Formulieren en knoppen: blauw is de gewone knop (goed leesbaar), oranje is accent en geen knopkleur */
select, input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], textarea, button, .btn { font:inherit; padding:var(--space-2) var(--space-4); border:var(--border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); }
button, .btn { background:var(--color-primary); color:var(--color-on-primary); border-color:var(--color-primary); cursor:pointer; text-decoration:none; }
button:hover, .btn:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); }
button.secondary, .btn.secondary { background:var(--color-surface); color:var(--color-text); border-color:var(--color-border); }
button.secondary:hover, .btn.secondary:hover { background:var(--color-bg-subtle); border-color:var(--color-primary); }
button.danger { background:var(--color-surface); color:var(--color-danger); border-color:var(--color-border); }
button.danger:hover { background:var(--color-surface); border-color:var(--color-danger); }
button:disabled { opacity:.4; cursor:not-allowed; }
button:disabled:hover { background:var(--color-primary); border-color:var(--color-primary); }
button.secondary:disabled:hover { background:var(--color-surface); border-color:var(--color-border); }
tr.up .num strong { color:var(--color-danger); }
tr.down .num strong { color:var(--color-success); }
.subnav { display:flex; flex-wrap:wrap; gap:0 var(--space-1); margin:0 0 var(--space-8); border-bottom:var(--border); }
.subnav a { padding:var(--space-2) var(--space-5); color:var(--color-text-muted); text-decoration:none; border-bottom:3px solid transparent; }
.subnav a.active { color:var(--color-primary); border-bottom-color:var(--color-accent); font-weight:600; }
.subnav a:hover { color:var(--color-text); background:var(--color-bg-subtle); }


/* Formulierveld met label erboven */
.field { display:flex; flex-direction:column; gap:var(--space-1); margin-bottom:var(--space-6); max-width:32rem; }
.field label { font-size:var(--text-sm); color:var(--color-text-muted); }
.preview { border:var(--border); border-radius:var(--radius-md); padding:var(--space-5) var(--space-7); background:var(--color-surface); }

.site-footer { display:flex; align-items:center; gap:var(--space-6); margin-top:var(--space-8); padding-top:var(--space-7); padding-bottom:var(--space-7); border-top:var(--border); color:var(--color-text-muted); font-size:var(--text-sm); }
.site-footer { flex-wrap:wrap; }
.site-footer p { margin:0; }
.site-footer .footer-contact { margin-left:auto; }                 /* rechts uitgelijnd (besluit eigenaar, 26 sept 2026) */

/* kolomkoppen om op te sorteren (templates/_sort_th.html) */
th a.sort { color:inherit; text-decoration:none; white-space:nowrap; }
th a.sort:hover { color:var(--color-text); }
th[aria-sort] a.sort, th a.sort.active { color:var(--color-primary); font-weight:600; }

[hidden] { display:none !important; }                     /* ook als een klasse zelf een display heeft */

/* uitleg bovenaan een pagina, inklapbaar (static/js/app.js) */
details.explain { margin:0 0 var(--space-7); }
details.explain > summary { cursor:pointer; color:var(--color-primary); font-size:var(--text-sm); margin-bottom:var(--space-2); }
details.explain > p.note { margin:0; }

/* voortgangsbalk (templates/_progress.html): oranje accent op een lichte baan */
.progress { display:block; width:100%; height:var(--progress-height); background:var(--color-border); border-radius:var(--radius-sm); overflow:hidden; margin:var(--space-2) 0; }
.progress-fill { display:block; height:100%; background:var(--color-accent); border-radius:var(--radius-sm); }
.progress.small { display:inline-block; vertical-align:middle; width:var(--progress-width-small); height:var(--progress-height-small); margin:0 var(--space-2); }

/* snelknoppen voor de periode, bovenaan elk overzicht (templates/_period_pills.html, foodcost/periods.py) */
.period-pills { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-4); }
.period-pills .pill { padding:var(--space-1) var(--space-5); border:var(--border); border-radius:var(--radius-pill); background:var(--color-surface); color:var(--color-text); text-decoration:none; font-size:var(--text-sm); }
.period-pills .pill:hover { border-color:var(--color-primary); }
.period-pills .pill.active { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-primary); }

/* receptscherm in bewerkstand: een aangevinkte regel wordt doorgestreept (verwijderd bij Opslaan) */
.recipe-edit tr:has(.remove-toggle input:checked) td { text-decoration:line-through; color:var(--color-text-muted); }
.recipe-edit tr:has(.remove-toggle input:checked) input[type=text], .recipe-edit tr:has(.remove-toggle input:checked) select { opacity:.5; }
.remove-toggle { display:inline-flex; align-items:center; gap:var(--space-1); cursor:pointer; white-space:nowrap; }

/* instellingslijsten: standaard lezen, met het potloodje één regel aanpassen (foodcost/editing.py) */
a.pencil { display:inline-block; padding:var(--space-1) var(--space-3); border:var(--border); border-radius:var(--radius-sm); color:var(--color-primary); background:var(--color-surface); text-decoration:none; line-height:1.4; }
a.pencil:hover { border-color:var(--color-primary); background:var(--color-bg-subtle); }
.is-editing { background:var(--color-bg-subtle); border-radius:var(--radius-sm); outline:2px solid var(--color-primary); outline-offset:var(--space-1); }
.row[id], tr[id] { scroll-margin-top:25vh; }   /* na het potloodje of Opslaan staat de regel niet tegen de rand */

/* label bij een halffabricaat (Resultaat Radar › Halffabricaten en in recepten) */
.tag-preparation { display:inline-block; font-size:var(--text-2xs); font-weight:600; border:var(--border); border-radius:var(--radius-pill); padding:var(--space-hairline) var(--space-3); background:var(--color-bg-subtle); color:var(--color-primary); white-space:nowrap; }

/* bevestigingsvenster (templates/base.html, static/js/app.js; plan gebruikersinterface, punt 8) */
.confirm-dialog { width:min(30rem, calc(100vw - 2 * var(--space-7))); border:var(--border); border-radius:var(--radius-lg); padding:var(--space-8); background:var(--color-surface); color:var(--color-text); }
.confirm-dialog::backdrop { background:color-mix(in srgb, var(--brand-blue) 35%, transparent); }
.confirm-dialog h2 { font-size:var(--text-lg); margin:0 0 var(--space-5); }
.confirm-text { margin:0 0 var(--space-5); font-size:var(--text-md); }
.confirm-facts { margin:0 0 var(--space-5); font-size:var(--text-md); }
.confirm-facts .fact { display:flex; justify-content:space-between; gap:var(--space-5); padding:var(--space-2) 0; border-top:var(--border); }
.confirm-facts .fact:last-child { border-bottom:var(--border); }
.confirm-facts .fact span { color:var(--color-text-muted); }
.confirm-facts .fact strong { font-weight:600; text-align:right; overflow-wrap:anywhere; }
.confirm-backup { margin:0 0 var(--space-5); padding:var(--space-3) var(--space-5); border-radius:var(--radius-md); background:var(--color-success-bg); color:var(--color-success-fg); font-size:var(--text-sm); }
.confirm-buttons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-4); margin-top:var(--space-7); }

/* ---------- Telefoon (smaller dan een tablet; plan gebruikersinterface, punt 6) ----------
   De kop wordt één smalle regel (radarsymbool, opdrachtgever, knop Menu); het hele menu zit achter die knop. Tabbladen
   staan op één regel en schuiven opzij. Periodekeuze: alleen de snelknoppen, de rest achter "Meer keuzes". Kerncijfers
   twee naast elkaar. Tabellen die daar niet op zijn gemaakt (class "phone-fit") schuiven binnen zichzelf opzij, zodat
   de pagina zelf nooit zijwaarts beweegt. Laptop en tablet veranderen niet. */
.brand-mark, .phone-menu, .period-pills .more, .phone-only, .phone-cell { display:none; }
@media (max-width:700px) {
  .site-header { position:relative; }
  .header-top { flex-wrap:nowrap; gap:var(--space-4); padding-top:var(--space-3); padding-bottom:var(--space-3); padding-right:calc(var(--space-7) + var(--phone-menu-button-width)); }
  .brand-logo, .client-logo, .header-top .account-menu, .site-nav .nav-groups, .site-nav .nav-sections { display:none; }
  .brand-mark { display:block; height:var(--phone-mark-height); width:auto; }
  .client-brand { min-height:0; justify-content:flex-start; margin-left:0; flex:1 1 auto; }
  .client-name { font-size:var(--text-md); text-align:left; }

  .phone-menu { display:block; }
  .phone-menu-button { position:absolute; top:var(--space-3); right:var(--space-7); list-style:none; cursor:pointer; padding:var(--space-2) var(--space-5); border:var(--border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-primary); font-weight:600; white-space:nowrap; }
  .phone-menu-button::-webkit-details-marker { display:none; }
  .phone-menu[open] .phone-menu-button { background:var(--color-bg-subtle); border-color:var(--color-primary); }
  .phone-menu-panel { position:absolute; left:0; right:0; top:100%; z-index:20; max-height:80vh; overflow-y:auto; background:var(--color-surface); border-bottom:var(--border); padding:0 var(--space-7) var(--space-5); }
  .site-nav .phone-menu-panel nav { display:block; }
  .phone-menu-panel ul { list-style:none; margin:0; padding:0; }
  .phone-menu-panel nav > ul > li { border-top:var(--border); }
  .phone-menu-panel nav a, .phone-menu-panel summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-2); color:var(--color-text); text-decoration:none; font-weight:600; cursor:pointer; list-style:none; }
  .phone-menu-panel summary::-webkit-details-marker { display:none; }
  .phone-menu-panel summary::after { content:"▾"; color:var(--color-text-muted); }
  .phone-menu-panel details[open] > summary::after { content:"▴"; }
  .phone-menu-panel nav details a { font-weight:400; padding-left:var(--space-8); color:var(--color-text-muted); }
  .phone-menu-panel nav a.active, .phone-menu-panel summary.active { color:var(--color-primary); }
  .phone-menu-panel nav details a.active { box-shadow:inset 3px 0 0 var(--color-accent); font-weight:600; }
  .phone-menu-account { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-5); border-top:var(--border); padding-top:var(--space-5); font-size:var(--text-sm); color:var(--color-text-muted); }
  .phone-menu-account form { margin:0; }
  .phone-menu-account select { max-width:100%; font-size:var(--text-sm); }

  .subnav { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .subnav a { flex:0 0 auto; }
  main.wrap { padding-top:var(--space-8); }
  h1 { font-size:var(--text-xl); margin-bottom:var(--space-6); }

  .period-pills .more { display:inline-block; font:inherit; font-size:var(--text-sm); cursor:pointer; }
  .js .period-pills:not(.open) + form { display:none; }

  main .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
  main .tiles .tile { padding:var(--space-4) var(--space-5); min-width:0; }
  main .tiles .tile .value { font-size:var(--text-lg); overflow-wrap:anywhere; }

  main table:not(.phone-fit):not(.phone-stack) { display:block; max-width:100%; overflow-x:auto; }
  main table.phone-stack, main table.phone-stack tbody, main table.phone-stack tr, main table.phone-stack td { display:block; width:100%; }
  main table.phone-stack thead { display:none; }
  main table.phone-stack tr { border-top:var(--border); padding:var(--space-3) 0; }
  main table.phone-stack td { border:0; padding:var(--space-1) 0; }
  main table.phone-stack input[type=text] { max-width:100%; }
  .phone-cell { display:table-cell; }
  .phone-hide { display:none; }
  main table.phone-fit th, main table.phone-fit td { padding-left:var(--space-2); padding-right:var(--space-2); }
  main table.phone-fit th a { white-space:normal; }
  main table.phone-fit td:first-child { overflow-wrap:anywhere; }   /* lange artikelnamen zonder spaties */
  .phone-only { display:block; }
  .phone-detail { color:var(--color-text-muted); font-size:var(--text-xs); font-weight:400; overflow-wrap:anywhere; }
  .phone-break { display:block; }                        /* een toevoeging (zoals een percentage) op een eigen regel */
}