/* ============================================================================
   De vormgeving van VR46 (laag bovenop modern.css), actief via <html data-look="2"> in index.html.
   Richting: zwevende glazen zijbalk, zachte diepte in plaats van harde randen, grotere afrondingen,
   kleurverloop als accent, rustige beweging, segmentknoppen en een luchtiger ritme.
   ========================================================================== */
html[data-look="2"] {
  --radius: 26px; --side-w: 264px;
  --bg: #06080c; --panel: #0e131b; --surface2: #151c27; --line: rgba(255,255,255,.07);
  --cyan: #5eead4; --blue: #60a5fa; --violet: #a78bfa;                      /* de drie accentkleuren van het thema (zie "Kleurthema's" onderaan) */
  --c1: 94,234,212; --c2: 96,165,250; --c3: 167,139,250;                       /* dezelfde kleuren als r,g,b voor doorzichtige vlakken */
  --accent-grad: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 55%, var(--violet) 100%);
  --accent-soft: rgba(var(--c1), .11); --accent-ink: #04141a; --accent-shadow: var(--blue);
  --text: #eef2f8; --dim: #8b96a8;
  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -24px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.25);
  --glass: color-mix(in srgb, var(--panel) 62%, transparent);
}
html[data-look="2"][data-theme="light"] {
  --bg: #f4f5fa; --panel: #ffffff; --surface2: #f0f2f8; --line: rgba(20,24,60,.07);
  --cyan: #0d9488; --blue: #2563eb; --violet: #7c3aed;
  --c1: 20,184,166; --c2: 59,130,246; --c3: 139,92,246;
  --accent-grad: linear-gradient(135deg, #14b8a6 0%, #3b82f6 55%, #8b5cf6 100%);
  --accent-soft: rgba(var(--c1), .10); --accent-ink: #ffffff;
  --text: #11142a; --dim: #626a82;
  --shadow: 0 1px 2px rgba(20,24,60,.05), 0 14px 34px -20px rgba(20,24,60,.28);
  --glass: rgba(255,255,255,.66);
}
html[data-look="2"] body {
  font-family: "Inter var", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01", "tnum"; letter-spacing: -.005em;
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(var(--c2), .16), transparent 70%),
    radial-gradient(900px 460px at 0% 108%, rgba(var(--c3), .12), transparent 70%), var(--bg);
}
html[data-look="2"][data-theme="light"] body {
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(var(--c2), .20), transparent 70%),
    radial-gradient(900px 460px at 0% 108%, rgba(var(--c3), .14), transparent 70%), var(--bg);
}

/* ---- zijbalk: zwevend glas ---- */
html[data-look="2"] #side {
  inset: 12px auto 12px 12px; width: calc(var(--side-w) - 12px); border-radius: 26px; padding: 18px 10px 12px;
  background: var(--glass); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: var(--shadow); overflow-y: auto; scrollbar-width: none;
}
html[data-look="2"] #side::-webkit-scrollbar { display: none; }
html[data-look="2"] body:has(#app:not([hidden])) { padding-left: calc(var(--side-w) + 4px); }
html[data-look="2"] #ctl { left: calc(var(--side-w) + 4px); }
html[data-look="2"] .side-brand { padding: 6px 12px 16px; font-size: 17px; letter-spacing: .02em; }
html[data-look="2"] .side-brand i { width: 30px; height: 30px; border-radius: 11px; background: var(--accent-grad); box-shadow: 0 8px 22px -8px var(--accent-shadow); }
html[data-look="2"] #side .nav { padding: 10px 12px; border-radius: 14px; font-size: 14.5px; transition: background .15s, color .15s, transform .15s; }
html[data-look="2"] #side .nav:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 6%, transparent); transform: translateX(2px); }
html[data-look="2"] #side .nav[aria-current="page"] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 20%, transparent), color-mix(in srgb, var(--violet) 10%, transparent));
  color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 28%, transparent);
}
html[data-look="2"] #side .nav[aria-current="page"] svg { color: var(--cyan); }
html[data-look="2"] .side-nav .nav-group, html[data-look="2"] .side-nav button.nav-group { font-size: 10.5px; letter-spacing: .14em; opacity: .7; margin: 18px 0 4px; }
html[data-look="2"] .side-foot { border-top: 0; padding: 10px 12px 6px; }
html[data-look="2"] .side-edit { all: unset; box-sizing: border-box; display: block; cursor: pointer; padding: 3px 0; font-size: 12px; color: var(--dim); }

/* ---- kaarten: zachte diepte, geen harde rand ---- */
html[data-look="2"] .dcard, html[data-look="2"] .today-card, html[data-look="2"] .tile, html[data-look="2"] .ctl-meters, html[data-look="2"] .profile,
html[data-look="2"] .ctl-set, html[data-look="2"] .ctl-det, html[data-look="2"] .kv, html[data-look="2"] .ctl-card, html[data-look="2"] .tg,
html[data-look="2"] .ag-day, html[data-look="2"] .agenda-form {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 100%, #fff 2.5%), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
html[data-look="2"] .today-card { padding: 20px 22px; transition: transform .18s ease, box-shadow .18s ease; animation: look2-in .4s ease both; }
html[data-look="2"] .today-card:hover { transform: translateY(-2px); }
html[data-look="2"] #ctl .ctl-h, html[data-look="2"] .today-card .ctl-h { font-size: 11px; letter-spacing: .13em; font-weight: 600; opacity: .75; margin-bottom: 10px; }
html[data-look="2"] .today-card .today-big { font-size: 32px; font-weight: 650; letter-spacing: -.035em; }
html[data-look="2"] #today-body [data-sec="weather"] .today-big { font-size: 46px; font-weight: 600; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-look="2"] .today-card.hero { background: radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 70%), radial-gradient(420px 240px at 0% 110%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 70%), var(--panel); }
html[data-look="2"] .today-card.hero::after { display: none; }
html[data-look="2"] .sum-h { font-size: 28px; letter-spacing: -.03em; font-weight: 700; }
html[data-look="2"] .sum-t { font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--text) 86%, var(--dim)); }
html[data-look="2"] .today-line { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
html[data-look="2"] .today-line:last-child { border-bottom: 0; }
@keyframes look2-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- knoppen, segmenten en invoer ---- */
html[data-look="2"] button { border-radius: 999px; transition: background .15s, transform .12s, box-shadow .15s; }
html[data-look="2"] button:active:not(:disabled) { transform: scale(.97); }
html[data-look="2"] #ctl button, html[data-look="2"] .composer button { border-radius: 999px; }
html[data-look="2"] #ctl .tg-ev { border-radius: 4px; border: 0; border-left: 3px solid var(--ev); background: color-mix(in srgb, var(--ev) 16%, var(--panel)); box-shadow: 0 0 0 1px var(--panel); color: var(--text); }              /* de agenda-blokken zijn geen knoppen met een ronde vorm (zoals in Outlook) */
html[data-look="2"] #ctl .tg-dayhead { border-radius: 0; }
html[data-look="2"] #ctl .mail-row { border-radius: 0; }              /* Outlook-achtige lijst: rechte rijen met een streepje links */
html[data-look="2"] #ctl .mail-navlist button { border-radius: 4px; }
html[data-look="2"] #ctl .mail-searchrow .mail-sync, html[data-look="2"] #ctl .mail-searchrow input { border-radius: 4px; }
html[data-look="2"] button.primary, html[data-look="2"] #ctl button.primary, html[data-look="2"] #login-form button[type=submit] {
  background: var(--accent-grad); color: var(--accent-ink); border-color: transparent; font-weight: 650; box-shadow: 0 10px 24px -12px var(--accent-shadow);
}
html[data-look="2"] button.primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
html[data-look="2"] input[type=text], html[data-look="2"] input[type=password], html[data-look="2"] input[type=search], html[data-look="2"] input[type=date], html[data-look="2"] input[type=time],
html[data-look="2"] #ctl select, html[data-look="2"] #ctl input[type="text"], html[data-look="2"] #ctl input[type="number"] { border-radius: 14px; background: var(--surface2); border: 1px solid transparent; }
html[data-look="2"] input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px var(--accent-soft); }
html[data-look="2"] .ag-views, html[data-look="2"] .ag-filter { padding: 4px; background: var(--surface2); border-radius: 999px; gap: 2px; }
html[data-look="2"] .ag-views button, html[data-look="2"] .ag-filter button { background: transparent; border-color: transparent; padding: 6px 14px; }
html[data-look="2"] .ag-views .on, html[data-look="2"] .ag-filter .on { background: var(--panel); color: var(--text); border-color: transparent; box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); }
html[data-look="2"] .doc-chips .on { background: var(--accent-soft); border-color: transparent; }
html[data-look="2"] .chips button { border-radius: 999px; background: var(--glass); backdrop-filter: blur(10px); }
html[data-look="2"] .composer { border-radius: 30px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html[data-look="2"] #btn-mic { background: var(--accent-grad); border-radius: 50%; box-shadow: 0 12px 28px -10px var(--accent-shadow); }
html[data-look="2"] .msg.user { background: var(--accent-grad); color: var(--accent-ink); }
html[data-look="2"] .msg { border-radius: 22px; }

/* ---- schermtitel ---- */
html[data-look="2"] .ctl-title strong { font-size: 30px; font-weight: 700; letter-spacing: -.035em; }
html[data-look="2"] .ctl-top { padding-top: calc(26px + env(safe-area-inset-top)); }
html[data-look="2"] .ctl-body { padding: 16px 36px 40px; }

/* ---- agenda, mail en documenten ---- */
html[data-look="2"] .ag-cell { border-radius: 16px; border-color: transparent; background: var(--surface2); }
html[data-look="2"] .ag-cell.today { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--cyan); }
html[data-look="2"] .doc-row { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }
html[data-look="2"] .doc-selbar { border-radius: 18px; border-color: transparent; background: var(--accent-soft); }

/* ---- onderbalk op de telefoon: zwevende pil ---- */
@media (max-width: 760px) {
  /* De zwevende onderbalk is 62px hoog en staat 10px + de veilige rand boven de onderkant; de ruimte die de pagina vrijhoudt volgt dat (anders ligt het invoerveld eronder). */
  html[data-look="2"] { --tab-h: calc(62px + 24px + env(safe-area-inset-bottom)); }
  html[data-look="2"] body:has(#app:not([hidden])) { padding-left: 0; padding-bottom: var(--tab-h); }
  html[data-look="2"] #tabbar { inset: auto 12px calc(10px + env(safe-area-inset-bottom)) 12px; border-radius: 26px; padding: 6px 8px; min-height: 62px;
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1px solid var(--line); box-shadow: var(--shadow); }
  html[data-look="2"] #tabbar button[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--cyan) 16%, transparent); border-radius: 18px; }
  html[data-look="2"] .ctl-body { padding: 12px 16px calc(var(--tab-h) + 12px); }
  html[data-look="2"] #ctl { bottom: 0; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="2"] .today-card { animation: none; transition: none; }
  html[data-look="2"] #side .nav, html[data-look="2"] button { transition: none; }
}

/* knoppen die geen pil horen te zijn (de algemene pilregel hierboven heeft #ctl als extra gewicht) */
html[data-look="2"] #ctl .ag-cell { border-radius: 16px; }
html[data-look="2"] #ctl .ag-dayhead, html[data-look="2"] #ctl .doc-title { border-radius: 8px; }
html[data-look="2"] #ctl .doc-pick { border-radius: 6px; }


/* ---- Kleurthema's: kiezen via Kleuren en thema onderaan de zijbalk (data-accent op <html>) ---- */
/* Elk thema vervangt de drie accentkleuren; donker en licht hebben elk hun eigen tint voor genoeg contrast. */
html[data-look="2"][data-accent="sunset"] { --cyan: #fdba74; --blue: #fb7185; --violet: #c084fc; --c1: 253,186,116; --c2: 251,113,133; --c3: 192,132,252; --accent-shadow: #fb7185; }
html[data-look="2"][data-theme="light"][data-accent="sunset"] { --cyan: #ea580c; --blue: #db2777; --violet: #9333ea; --c1: 249,115,22; --c2: 236,72,153; --c3: 168,85,247; --accent-grad: linear-gradient(135deg, #f97316 0%, #ec4899 55%, #a855f7 100%); }
html[data-look="2"][data-accent="forest"] { --cyan: #86efac; --blue: #5eead4; --violet: #7dd3fc; --c1: 134,239,172; --c2: 94,234,212; --c3: 125,211,252; --accent-shadow: #4ade80; }
html[data-look="2"][data-theme="light"][data-accent="forest"] { --cyan: #15803d; --blue: #0d9488; --violet: #0369a1; --c1: 34,197,94; --c2: 20,184,166; --c3: 14,165,233; --accent-grad: linear-gradient(135deg, #22c55e 0%, #14b8a6 55%, #0ea5e9 100%); }
html[data-look="2"][data-accent="lavender"] { --cyan: #c4b5fd; --blue: #a5b4fc; --violet: #f0abfc; --c1: 196,181,253; --c2: 165,180,252; --c3: 240,171,252; --accent-shadow: #a78bfa; }
html[data-look="2"][data-theme="light"][data-accent="lavender"] { --cyan: #6d28d9; --blue: #4f46e5; --violet: #a21caf; --c1: 139,92,246; --c2: 99,102,241; --c3: 217,70,239; --accent-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #d946ef 100%); }
html[data-look="2"][data-accent="rose"] { --cyan: #fda4af; --blue: #f9a8d4; --violet: #fdba74; --c1: 253,164,175; --c2: 249,168,212; --c3: 253,186,116; --accent-shadow: #fb7185; }
html[data-look="2"][data-theme="light"][data-accent="rose"] { --cyan: #e11d48; --blue: #db2777; --violet: #ea580c; --c1: 244,63,94; --c2: 236,72,153; --c3: 249,115,22; --accent-grad: linear-gradient(135deg, #f43f5e 0%, #ec4899 55%, #f97316 100%); }
html[data-look="2"][data-accent="graphite"] { --cyan: #e2e8f0; --blue: #cbd5e1; --violet: #94a3b8; --c1: 226,232,240; --c2: 203,213,225; --c3: 148,163,184; --accent-shadow: #64748b; --accent-soft: rgba(226,232,240,.08); }
html[data-look="2"][data-theme="light"][data-accent="graphite"] { --cyan: #334155; --blue: #475569; --violet: #64748b; --c1: 51,65,85; --c2: 71,85,105; --c3: 100,116,139; --accent-grad: linear-gradient(135deg, #334155 0%, #475569 55%, #64748b 100%); --accent-soft: rgba(51,65,85,.08); }
html[data-look="2"][data-accent="sunset"]:not([data-theme="light"]), html[data-look="2"][data-accent="forest"]:not([data-theme="light"]), html[data-look="2"][data-accent="lavender"]:not([data-theme="light"]),
html[data-look="2"][data-accent="rose"]:not([data-theme="light"]), html[data-look="2"][data-accent="graphite"]:not([data-theme="light"]) { --accent-grad: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 55%, var(--violet) 100%); }

/* ---- scherm Kleuren en thema, segmentknoppen en kiosk-instellingen ---- */
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
#ctl .th-card { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: auto; height: auto; padding: 10px; border-radius: 20px; border: 1.5px solid transparent; background: var(--surface2); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
#ctl .th-card:hover { transform: translateY(-2px); border-color: var(--line); }
#ctl .th-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
#ctl .th-card[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 0 4px var(--accent-soft); }
#ctl .th-sw { display: block; width: 100%; height: 64px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
#ctl .th-name { display: block; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--text); }
.th-modes { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--surface2); border-radius: 999px; }
#ctl .th-modes button.th-seg, .th-box .th-modes button { height: auto; min-height: 0; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); font-weight: 500; box-shadow: none; }
#ctl .th-modes button.th-seg:hover:not([aria-pressed="true"]), .th-box .th-modes button:hover:not([aria-pressed="true"]) { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
#ctl .th-modes button.th-seg[aria-pressed="true"], .th-box .th-modes button[aria-pressed="true"] { background: var(--accent-grad); color: var(--accent-ink); font-weight: 650; box-shadow: 0 8px 18px -10px var(--accent-shadow); }
#ctl .kc-row { align-items: center; }
#ctl .kc-label { flex: 1; min-width: 0; }
#ctl .kc-row input[type="checkbox"] { accent-color: var(--cyan); }
#ctl .kc-row input[type="time"], #ctl .kc-row input[type="number"] { height: auto; padding: 8px 12px; }
#theme-body .ctl-desc, #kiosk-body .ctl-desc { margin-top: 10px; }
.th-box { width: min(480px, 100%); }
.th-modes button[aria-pressed="false"] { box-shadow: none; }
html[data-look="2"] #ctl .th-card { border-radius: 20px; }
html[data-look="2"] #ctl .th-sw { border-radius: 14px; }
@media (max-width: 760px) { html[data-look="2"] #moresheet { inset: 0 0 var(--tab-h) 0; } }

/* Geen witte rand onder of naast de pagina: de achtergrond hoort bij het hele scherm (ook onder de veilige rand op een iPhone). */
html[data-look="2"] { background: var(--bg); min-height: 100%; }
@media (max-width: 760px) { html[data-look="2"] body { min-height: 100dvh; } }