/* Vandaag · kopband (26 september 2026, gebruikerskeuze B3 "volle breedte").
   Alleen mobiel: logo, avatar, begroeting, datum en dagstatus staan op een donkere
   band over de volle schermbreedte; de omzetkaart schuift er half overheen.
   De band volgt het gekozen palet (licht: inktkleur, donker: verhoogd oppervlak).
   Rood alleen bij te late betalingen, amber bij aandachtspunten.
   Op de computer is .today-band display:contents; daar verandert niets. */
#todayView .today-band { display: contents; }
#todayView .today-day-status { display: none; }

@media (max-width: 720px) {
  #todayView .today-band {
    --band-bg: var(--ink);
    --band-ink: var(--paper);
    --band-muted: color-mix(in srgb, var(--paper) 66%, var(--ink));
    --band-line: color-mix(in srgb, var(--paper) 24%, transparent);
    --band-chip: color-mix(in srgb, var(--paper) 11%, transparent);
    /* Op de donkere band dezelfde felle signaalkleuren als in de donkere stand (ontwerp F, 27 sep 2026). */
    --band-danger: #ff5d4f;
    --band-amber: #ffb224;
    --band-ok: #5fd36f;
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    gap: 12px;
    padding-bottom: 58px;
    color: var(--band-ink);
  }
  :root[data-theme="dark"] #todayView .today-band {
    /* Donker (26 sep 2026): de band is het donkerste vlak, net als in licht; de kaart valt er lichter overheen.
       Sinds 27 sep in de kleur van het palet (--band-deep in palettes.css), nog steeds het donkerste vlak. */
    --band-bg: var(--band-deep, color-mix(in srgb, var(--canvas) 55%, #000));
    --band-ink: var(--ink);
    --band-muted: var(--muted);
    --band-line: var(--line);
    --band-chip: color-mix(in srgb, var(--ink) 9%, transparent);
    --band-danger: var(--danger);
    --band-amber: var(--amber);
    --band-ok: var(--green);
  }
}
@media (max-width: 720px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #todayView .today-band {
    --band-bg: var(--band-deep, color-mix(in srgb, var(--canvas) 55%, #000));
    --band-ink: var(--ink);
    --band-muted: var(--muted);
    --band-line: var(--line);
    --band-chip: color-mix(in srgb, var(--ink) 9%, transparent);
    --band-danger: var(--danger);
    --band-amber: var(--amber);
    --band-ok: var(--green);
  }
}
@media (max-width: 720px) {
  /* Volle breedte: de achtergrond loopt tot de schermranden en tot boven in de pagina
     (.main knipt horizontaal af), in de iPhone-app ook achter de statusbalk (zie onder). */
  #todayView .today-band::before,
  #todayView .today-band::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  #todayView .today-band::before {
    top: calc(-80px - env(safe-area-inset-top));
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    /* Eén egale kleur (26 sep 2026): gelijk aan de strook achter de statusbalk in de app. */
    background: var(--band-bg);
  }
  .main:has(> #banners > *) #todayView .today-band::before { top: -8px; }
  /* Grote, vage Σ als watermerk. */
  #todayView .today-band::after {
    right: -26px;
    bottom: 40px;
    width: 150px;
    height: 150px;
    opacity: .045;
    transform: rotate(-12deg);
    background: var(--band-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M82 30 80 16H22l36 34-36 34h58l2-14' fill='none' stroke='%23000' stroke-width='11' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M82 30 80 16H22l36 34-36 34h58l2-14' fill='none' stroke='%23000' stroke-width='11' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #todayView .today-band > * { position: relative; }
  #todayView .today-band .modern-topbar { padding-top: 8px; border: 0; }

  /* Op de donkere band altijd het lichte logo. */
  #todayView .today-band .modern-topbar .modern-brand .summa-wordmark {
    background-image: url('assets/brand/sigmi-logo-dark-bg.svg?v=2026-09-28-sigmi');
  }
  /* Avatar: zelfde 44px-knop, doorzichtig op de band (navigation-icons.css gebruikt html body). */
  html body #todayView .today-band .today-settings-button,
  html body #todayView .today-band .today-settings-button .user-initials {
    border-color: var(--band-line);
    background: transparent;
    color: var(--band-ink);
    box-shadow: none;
  }
  html body #todayView .today-band .today-settings-button .user-initials { border: 0; }
  #todayView .today-band .modern-demo-badge {
    border-color: var(--band-line);
    background: var(--band-chip);
    color: var(--band-ink);
  }
  #todayView .today-band .modern-welcome { margin-top: 10px; }
  #todayView .today-band .modern-welcome h1,
  #todayView .today-band .modern-welcome h1 em { color: var(--band-ink); }
  #todayView .today-band .modern-welcome #todayMobileDate { color: var(--band-muted); }

  #todayView .today-day-status:not([hidden]) {
    position: relative;
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 0;
    margin: 7px 0 0;
    padding: 8px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--band-chip);
    box-shadow: none;
    color: var(--band-ink);
    font: 600 13px/1.45 Figtree, system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Klikvlak minstens 44px hoog, zonder de pil groter te maken. */
  #todayView .today-day-status::after { content: ""; position: absolute; inset: -6px 0; }
  #todayView .today-day-status:not(:disabled):is(:hover, :active) { background: color-mix(in srgb, var(--band-ink) 18%, transparent); }
  #todayView .today-day-status:focus-visible { outline: 2px solid var(--band-ink); outline-offset: 2px; }
  #todayView .today-day-status:disabled { cursor: default; opacity: 1; }
  #todayView .today-day-status-chevron { flex: none; width: 14px; height: 14px; margin: 0 -3px 0 -1px; color: var(--band-muted); }
  #todayView .today-day-status:disabled .today-day-status-chevron { display: none; }
  #todayView .today-day-status-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--band-ok);
  }
  #todayView .today-day-status.is-attention .today-day-status-dot { background: var(--band-amber); }
  #todayView .today-day-status.is-urgent .today-day-status-dot { background: var(--band-danger); }

  /* De omzetkaart schuift half over de band. */
  .main #todayView #todayRevenuePanel {
    position: relative;
    z-index: 1;
    margin-top: -46px;
  }
}

/* iPhone-app (26 september 2026, gebruikersverzoek): de app tekent bovenin een strook in de
   paginakleur (NativeLayout.css, body::before). Zolang de band daar nog achter staat, krijgt die
   strook dezelfde egale kleur als de band, zodat de band doorloopt tot de bovenrand en tekst bij het
   scrollen er netjes onder verdwijnt. screens/today-band.js zet de klasse en vraagt de app om een
   lichte statusbalk. Zodra de omzetkaart de strook bereikt, komt de paginakleur terug. */
@media (max-width: 720px) {
  html.summa-native.summa-band-top body::before { background: var(--ink); }
  html.summa-native.summa-band-top[data-theme="dark"] body::before { background: var(--band-deep, color-mix(in srgb, var(--canvas) 55%, #000)); }
}
@media (max-width: 720px) and (prefers-color-scheme: dark) {
  html.summa-native.summa-band-top:not([data-theme="light"]) body::before { background: var(--band-deep, color-mix(in srgb, var(--canvas) 55%, #000)); }
}