/* ===== Alufile: nuchter, technisch, plat. Geanodiseerd grafiet met één signaalkleur ===== */
body[data-brand="rol"] {
  --night: #101010;
  --glass: #1a1a1a;
  --glass-solid: #1a1a1a;
  --raise: #222;
  --line: #2a2f34;
  --line-strong: #3d444b;
  --text: #e9ecee;
  --muted: #8d969e;
  --green: #fdb515; --green-dim: rgba(253, 181, 21, 0.12);
  --teal: var(--green); --teal-dim: var(--green-dim);
  --steel: #7d868e;
  --amber: #fdb515; --amber-dim: rgba(253, 181, 21, 0.14);
  --rose: #ff6b57;
  --r-lg: 6px; --r-md: 5px; --r-sm: 3px;
  background: #101010;
}
body[data-brand="rol"] #map, body[data-brand="rol"][data-view] #map { opacity: 0 !important; pointer-events: none; }
body[data-brand="rol"] .veil { display: none; }
body[data-brand="rol"] .panel, body[data-brand="rol"] .kpis, body[data-brand="rol"] .dock, body[data-brand="rol"] .table-wrap, body[data-brand="rol"] .tb-ico, body[data-brand="rol"] .bsw {
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
body[data-brand="rol"] .dock { border-radius: 6px; padding: 3px; background: #1a1a1a; }
body[data-brand="rol"] .dock a { border-radius: 4px; }
body[data-brand="rol"] .dock a.on { background: #2a2a2a; box-shadow: inset 0 -2px 0 var(--amber); }
body[data-brand="rol"] .tb-ico { border-radius: 6px; background: #1a1a1a; }
body[data-brand="rol"] .seg, body[data-brand="rol"] .seg button, body[data-brand="rol"] .btn, body[data-brand="rol"] input, body[data-brand="rol"] select, body[data-brand="rol"] textarea { border-radius: 4px; }
body[data-brand="rol"] .seg.vat button.on, body[data-brand="rol"] .seg button.on { background: #2d2d2d; box-shadow: inset 0 -2px 0 var(--amber); }
body[data-brand="rol"] .btn.primary { background: #fdb515; color: #101316; }
body[data-brand="rol"] .btn.primary:hover { background: #fff; }
body[data-brand="rol"] .drawer, body[data-brand="rol"] .modal-card { background: #161616; }
body[data-brand="rol"] .f-bar i, body[data-brand="rol"] .bar-cell i { background: #fdb515; border-radius: 1px; }
body[data-brand="rol"] option { background: #1a1a1a; }
body[data-brand="rol"] .tbl th { background: #1a1a1a; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; }
body[data-brand="rol"] .page-h h1 { font-weight: 500; font-size: 30px; letter-spacing: -0.01em; }

/* wissel tussen bedrijven: een strook schuift over het scherm */
.brand-wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; transform: translateX(-101%); animation: wipe 0.75s cubic-bezier(.7, 0, .2, 1); }
.brand-wipe.alu { background: #cfd5da; } .brand-wipe.tgg { background: #6fe3a1; }
@keyframes wipe { 0% { transform: translateX(-101%); } 45% { transform: translateX(0); } 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }

/* schakelaar: één duidelijke keuze, de gekozen kant heeft de kleur van het bedrijf */

body[data-brand="rol"] .btn.primary { background: #fdb515; color: #1a1a1a; font-weight: 700; }
body[data-brand="rol"] .btn.primary:hover { background: #ffc83d; }
body[data-brand="rol"] .bsw { border-radius: 6px; background: #121212; }
body[data-brand="rol"] .bsw button.on { color: #1a1a1a; }
body[data-brand] .bsw[style*="--n"] { grid-template-columns: repeat(var(--n), 1fr); min-width: calc(var(--n) * 128px); }
body[data-brand] .bsw[style*="--n"]::before { width: calc((100% - 6px) / var(--n)); transform: translateX(calc(var(--i) * 100%)); }
body[data-brand="rol"] .bsw::before { background: #fdb515; }
@media (max-width: 700px) { body[data-brand] .bsw[style*="--n"] { min-width: 0 !important; width: calc(var(--n) * 52px) !important; } }
/* Rolsun */
.rol-note { padding: 10px 14px; border-left: 3px solid #fdb515; background: rgba(253, 181, 21, 0.1); border-radius: 4px; margin: 10px 0; font-size: 13.5px; }
.rol-note.warn { border-left-color: #ff6b57; background: rgba(255, 107, 87, 0.1); }
.rol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rol-lines { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rol-lines th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 4px; }
.rol-lines td { padding: 4px; vertical-align: top; }
.rol-lines input, .rol-lines select { width: 100%; min-width: 0; }
.rol-lines .num { width: 74px; } .rol-lines .qty { width: 56px; }
.rol-lines .r { text-align: right; white-space: nowrap; }
.rol-tot { margin-left: auto; width: min(340px, 100%); }
.rol-tot div { display: flex; justify-content: space-between; padding: 4px 0; }
.rol-tot .big { font-size: 20px; font-weight: 700; border-top: 2px solid #fdb515; margin-top: 6px; padding-top: 8px; }
.rol-sub { color: var(--muted); font-size: 12px; }
.rol-pg { overflow-x: auto; } .rol-pg table { border-collapse: collapse; font-size: 12.5px; } .rol-pg td, .rol-pg th { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--line); } .rol-pg th { color: var(--muted); }
.page-h .row-actions { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.page-h .row-actions select { width: auto; min-width: 130px; }
.rol-lines .rol-sub select { width: auto; display: inline-block; min-width: 130px; }