/* ========================================================================== Arctic CRM — ontwerpsysteem Rustig, strak en met materiaal: matglas voor de dragende vlakken (zijbalk, bovenbalk, kerncijfers), haarlijnen in plaats van zware randen, en veel wit. Alle kleuren komen uit variabelen; de accentkleur wordt door de app op gezet vanuit Instellingen → Huisstijl. ========================================================================== */ :root { /* Vlakken */ --canvas: #f2f3f6; --surface: #ffffff; --surface-2: #f7f8fa; /* Tekst */ --text: #14181f; --text-2: #495260; --muted: #767d89; /* Lijnen & diepte */ --hairline: rgba(20, 24, 31, .09); --hairline-strong: rgba(20, 24, 31, .16); --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --shadow-md: 0 4px 12px rgba(16, 24, 40, .06), 0 2px 4px rgba(16, 24, 40, .04); --shadow-lg: 0 18px 40px rgba(12, 24, 45, .12); /* Accent (wordt overschreven vanuit de huisstijl-instellingen) */ --primary: #2b5ce6; --primary-soft: rgba(43, 92, 230, .10); /* Signaalkleuren */ --danger: #c0392b; --danger-soft: #fdecea; --success: #1e8f57; --success-soft: #e7f6ee; --warning: #b26a00; /* Donkere zijbalk */ --sidebar-a: #101a2c; --sidebar-b: #16233b; --sidebar-text: rgba(255, 255, 255, .72); --radius: 14px; --radius-sm: 10px; --radius-pill: 980px; /* De standaard paginabreedte: elke gewone adminpagina (facturen, offertes, klanten, creditnota's, …) rendert in .content en deelt deze bovengrens. Eén knop, zodat de breedte overal gelijk loopt (kassa en reparatie-ticket zijn fullscreen en vallen hier buiten -- die hebben hun eigen layout). */ --content-max: 1500px; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { letter-spacing: -.017em; font-weight: 600; } h1 { font-size: 1.55rem; margin: 0 0 .4rem; } h2 { font-size: 1.02rem; margin: 0 0 .9rem; } .muted { color: var(--muted); } .small { font-size: .82rem; } /* Bedragen en aantallen uitlijnen op cijferbreedte */ .num, .stat__value, td.num, th.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ── Layout ────────────────────────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; /* Vast aan het scherm, niet aan de paginahoogte. Met position:sticky liet de balk los zodra er iets onder .layout de pagina langer maakte dan de zijbalk (bijv. de absoluut-gepositioneerde feedback-pinnen op een factuurpagina): de sticky-grens ligt bij de onderkant van .layout, en daaronder scrolde de balk mee weg. Fixed is immuun voor wat de pagina ook langer maakt. .main schuift ernaast (margin-left). */ position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: .8rem .7rem .9rem; color: var(--sidebar-text); /* Egale, diepe kleur in plaats van een flauw verloop: geeft de kolom een duidelijke rand en laat de accentkleur het werk doen. */ background: var(--sidebar-a); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; } /* ── Inklapbare zijbalk: alleen de pictogrammen ──────────────────────────── De knop staat onderaan (margin-top:auto). Ingeklapt versmalt de balk en verdwijnen de labels + groepskoppen, zodat een lange lijst weer past. De keuze wordt per browser onthouden (zie admin.twig). */ .sidebar-toggle { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 0; border-top: 1px solid rgba(255, 255, 255, .08); background: var(--sidebar-a); color: var(--sidebar-text); font: inherit; font-size: .85rem; cursor: pointer; transition: color .14s ease; } .sidebar-toggle:hover { color: #fff; } .sidebar-toggle svg { flex: 0 0 auto; transition: transform .18s ease; } /* Ingeklapt: overflow zichtbaar en een hogere z-index, zodat de snelle tooltip (zie verderop) rechts naast het icoon buiten de smalle balk mag uitsteken en boven de pagina-inhoud komt te liggen. */ .sidebar.is-ingeklapt { width: 66px; overflow: visible; z-index: 30; } .sidebar.is-ingeklapt .brand { justify-content: center; padding-left: 0; padding-right: 0; } /* Ingeklapt is er geen ruimte voor het volledige logo of de naam: toon het merkteken. */ .sidebar.is-ingeklapt .brand__logo, .sidebar.is-ingeklapt .brand__name { display: none; } .sidebar.is-ingeklapt .brand__mark { display: grid; place-items: center; } .sidebar.is-ingeklapt .nav__group { display: none; } /* Icoonmodus: een groep kan hier niet in- of uitgeklapt worden (de kop is verborgen), dus tonen we alle items -- ook die van een dichte groep -- zodat elk pictogram bereikbaar blijft. */ .sidebar.is-ingeklapt .nav__groep.is-dicht .nav__items { display: flex; } .sidebar.is-ingeklapt .nav__item { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } .sidebar.is-ingeklapt .nav__item > span { display: none; } .sidebar.is-ingeklapt .nav__item.is-active::before { display: none; } .sidebar.is-ingeklapt .sidebar-toggle { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar.is-ingeklapt .sidebar-toggle__tekst { display: none; } .sidebar.is-ingeklapt .sidebar-toggle svg { transform: rotate(180deg); } /* ── Snelle tooltip bij de ingeklapte zijbalk ────────────────────────────────── Ingeklapt zie je alleen de pictogrammen; het label komt dan als eigen tooltip meteen in beeld. De trage native title-tooltip (~1s) is bewust weg: het label staat nu in aria-label (voor schermlezers) en die tekst gebruiken we hier ook. Alleen ingeklapt, rechts van het icoon, boven de rest en niet-klikbaar. */ .sidebar.is-ingeklapt .nav__item::after { content: attr(aria-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 50; padding: .3rem .55rem; border-radius: var(--radius-sm); background: #0b1220; color: #fff; font-size: .8rem; font-weight: 500; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .09s ease; } .sidebar.is-ingeklapt .nav__item:hover::after, .sidebar.is-ingeklapt .nav__item:focus-visible::after { opacity: 1; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; margin-left: 248px; } /* Volgt de ingeklapte zijbalk: die is 66px, dus schuift .main net zo ver mee terug. */ .layout:has(.sidebar.is-ingeklapt) .main { margin-left: 66px; } .topbar, .content { position: relative; z-index: 1; } /* Merk: logo + naam uit de huisstijl-instellingen */ .brand { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem .9rem; color: #fff; font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; } /* Vaste hoogte, breedte schaalt mee en wordt begrensd door de zijbalk (244px min padding). Zo blijft élk aangeleverd logo netjes en onvervormd. */ .brand__logo { display: block; height: 36px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; } .brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Het merkteken (favicon): standaard verborgen; alleen zichtbaar als de zijbalk is ingeklapt (zie de is-ingeklapt-regel hierboven). Vierkant en klein, past in 66px. Zonder geüpload merkteken is het een gekleurd vierkantje met de beginletter. */ .brand__mark { display: none; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; object-fit: contain; } .brand__mark--letter { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1; } .brand--center { justify-content: center; padding-bottom: 0; } .nav { display: flex; flex-direction: column; gap: 2px; } /* Kop boven een groep items: houdt een lange lijst leesbaar. Nu een echte knop, want klikken vouwt de groep open of dicht (zie .nav__groep hieronder). De typografie blijft gelijk aan de oude kop; alleen de knop-chrome halen we eraf. */ .nav__group { display: flex; align-items: center; gap: .4rem; width: 100%; margin: .6rem 0 .2rem; padding: .15rem .75rem; background: none; border: 0; border-radius: var(--radius-sm); font-family: inherit; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; text-align: left; color: rgba(255, 255, 255, .5); cursor: pointer; } .nav__group:hover { color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .04); } .nav__group:focus-visible { outline: 2px solid rgba(255, 255, 255, .45); outline-offset: 1px; } .nav__group-tekst { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* De caret rechts in de kop: wijst omlaag als de groep open is, naar rechts als hij dicht is. */ .nav__caret { flex: 0 0 auto; opacity: .7; transition: transform .16s ease; } /* Een inklapbare groep is de kop plus zijn items. */ .nav__groep { display: flex; flex-direction: column; } .nav__items { display: flex; flex-direction: column; gap: 2px; } .nav__groep.is-dicht .nav__items { display: none; } .nav__groep.is-dicht .nav__caret { transform: rotate(-90deg); } /* Rustige regels: alleen tekst en pictogram. De doorzichtige rand houdt de breedte gelijk aan het actieve item, dat er wél een echte rand omheen krijgt. */ .nav__item { position: relative; display: flex; align-items: center; gap: .65rem; padding: .38rem .7rem; border-radius: var(--radius-sm); border: 1px solid transparent; color: var(--sidebar-text); text-decoration: none; font-size: .91rem; font-weight: 450; transition: background-color .14s ease, color .14s ease; } .nav__icon { flex: 0 0 20px; opacity: .62; transition: opacity .14s ease; } .nav__item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; } .nav__item:hover .nav__icon { opacity: .9; } /* Alleen waar je staat krijgt matglas: een opgetild vlak in de accentkleur, met een lichte rand en een glans langs de bovenrand. Eén element dat eruit springt wijst beter de weg dan vijftien die allemaal om aandacht vragen. */ .nav__item.is-active { background: color-mix(in srgb, var(--primary) 42%, rgba(255, 255, 255, .10)); border-color: color-mix(in srgb, var(--primary) 26%, rgba(255, 255, 255, .34)); color: #fff; font-weight: 550; box-shadow: 0 6px 18px rgba(4, 10, 24, .35), inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); } .nav__item.is-active .nav__icon { opacity: 1; } .nav__item.is-active::before { content: ""; position: absolute; left: -.7rem; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: #fff; } /* Bovenbalk: egaal, blijft staan bij scrollen. Matglas heeft hier geen zin — wat erachter langs schuift is toch bijna wit. */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .7rem 1.6rem; background: var(--surface); border-bottom: 1px solid var(--hairline); } .page-title { font-weight: 600; letter-spacing: -.01em; } .user-menu { display: flex; align-items: center; gap: .9rem; margin-left: auto; color: var(--muted); font-size: .9rem; } .user-name { font-weight: 500; color: var(--text-2); } /* Naam + foto samen één klikbare link naar het eigen profiel. */ .profiel-knop { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .3rem; border-radius: 999px; text-decoration: none; transition: background .15s ease; } .profiel-knop:hover { background: var(--hairline); } .profiel-knop:hover .user-name { color: var(--text); } .profiel-knop .avatar { flex: 0 0 auto; } .inline-form { display: inline; } /* Uren-knop in de bovenbalk (module Urenregistratie). Zelfde maat en gedrag als het belletje ernaast; de stip verschijnt zodra er voor de gebruiker een timer loopt. De stijl staat bewust in app.css (altijd geladen) en niet in een module-bestand, want de knop zelf komt al via een 'ignore missing'-partial mee of niet. */ .uren-knop { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-pill); color: var(--text-2); text-decoration: none; } .uren-knop:hover, .uren-knop:focus-visible { background: var(--surface-2); color: var(--text); } .uren-knop .nav__icon { flex: 0 0 20px; opacity: 1; } /* De stip met een ringetje in de balkkleur, zodat hij loskomt van het pictogram. */ .uren-knop__stip { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface); } /* Extra lucht onderaan: rechtsonder zweeft de feedbackknop, en die dekte anders af wat daar toevallig eindigde — op het factuurformulier precies het totalenblok. Deze ruimte zorgt dat je altijd langs de knop heen kunt scrollen. */ .content { padding: 1.6rem 1.6rem 5.5rem; max-width: var(--content-max); width: 100%; } /* ── Globaal zoeken ────────────────────────────────────────────────────── */ .topsearch { flex: 0 1 340px; margin-left: 1.5rem; } .topsearch__input { width: 100%; padding: .45rem .8rem; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-pill); font: inherit; font-size: .9rem; color: var(--text); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .topsearch__input::placeholder { color: var(--muted); } .topsearch__input:focus { outline: none; background: var(--surface); border-color: var(--hairline-strong); box-shadow: 0 0 0 4px var(--primary-soft); } /* ── Panelen & kaarten ─────────────────────────────────────────────────── */ /* Egaal wit met een haarlijn. Matglas werkt alleen als er iets áchter zit om te vervagen; op een bijna witte pagina levert het alleen vaagheid op. De scheiding komt hier van de rand en een lichte schaduw. */ .panel { background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); border-radius: var(--radius); padding: 1.35rem; margin-bottom: 1.1rem; } .cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .page-head__title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } /* ── Hero: zachte merkachtergrond waar de glazen kaarten op rusten ─────── */ .hero { position: relative; isolation: isolate; margin: -.4rem -.4rem 1.2rem; padding: 1.5rem 1.6rem 1.7rem; border-radius: 22px; overflow: hidden; background: linear-gradient(150deg, #16233b 0%, #1d3557 45%, #24507e 100%); box-shadow: var(--shadow-lg); } /* Het berglandschap ligt er heel subtiel onder, zodat het glas iets te tonen heeft. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--hero-image); background-size: cover; background-position: center 65%; opacity: .34; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 24, 45, .30) 0%, rgba(12, 24, 45, .72) 100%); } .hero__intro h1 { color: #fff; margin: 0 0 .1rem; font-size: 1.6rem; } .hero__date { margin: 0; color: rgba(255, 255, 255, .68); font-size: .9rem; } .hero .stat-grid { margin: 1.3rem 0 0; } /* Binnen de hero zijn de kaarten écht van glas */ .hero .stat { background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)); border-color: rgba(255, 255, 255, .18); color: #fff; box-shadow: 0 8px 26px rgba(5, 19, 34, .18); } .hero .stat__label { color: rgba(255, 255, 255, .68); } .hero .stat__sub { color: rgba(255, 255, 255, .62); } .hero a.stat:hover { background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .10)); } .hero .stat--alert { border-color: rgba(255, 168, 160, .55); } .hero .stat--alert .stat__value { color: #ffcfc9; } /* ── Kerncijfers: matglas op een subtiel verloop ───────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .75rem; margin: 1.1rem 0; } /* Bewust wat compacter dan eerst (feedback: "deze blokken mogen kleiner"): minder padding en een kleiner bedrag, zodat er meer naast elkaar past zonder dat de cijfers onleesbaar worden. Gedeeld component, dus dit werkt op alle lijstpagina's door. */ .stat { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .16s ease; } a.stat:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat__label { font-size: .74rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; color: var(--muted); } .stat__value { font-size: 1.4rem; font-weight: 600; letter-spacing: -.022em; } .stat__sub { font-size: .82rem; color: var(--muted); } .stat--alert { border-color: rgba(192, 57, 43, .28); } .stat--alert .stat__value { color: var(--danger); } /* ── Snelkoppelingen: glazen tegels op de huisstijl-achtergrond ────────── */ .quick-nav { margin-top: 1.4rem; padding: 1.4rem; border-radius: 20px; background-size: cover; background-position: center; box-shadow: var(--shadow-lg); } .quick-nav__title { margin: 0 0 .2rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .62); } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: .8rem; margin-top: 1rem; } .tile { padding: 1.05rem 1.15rem; border-radius: var(--radius); background-color: rgba(18, 30, 52, .40); background-image: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: .8px solid rgba(255, 255, 255, .16); box-shadow: 0 8px 24px rgba(5, 19, 34, .16); color: #fff; text-decoration: none; transition: transform .16s cubic-bezier(.2, .7, .3, 1), border-color .16s ease, background-color .16s ease; } .tile:hover { text-decoration: none; transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); background-color: rgba(18, 30, 52, .5); } .tile__label { font-weight: 550; font-size: .95rem; } /* ── Formulieren ───────────────────────────────────────────────────────── */ .form, .field { display: block; } .field { margin-bottom: .95rem; } .field > span { display: block; font-size: .82rem; color: var(--text-2); margin-bottom: .3rem; font-weight: 500; } .field-row { display: flex; gap: .9rem; flex-wrap: wrap; } .field-row .field { flex: 1; min-width: 140px; } .field--grow { flex: 2; } .field--small { flex: 0 0 110px; } .field-error { display: block; color: var(--danger); font-size: .8rem; font-style: normal; margin-top: .25rem; } .form--narrow { max-width: 620px; } .form--wide { max-width: 820px; } .form-actions { display: flex; gap: .6rem; margin-top: 1.4rem; } /* ── Documentformulier (factuur, offerte) ────────────────────────────────── Een document met een regeltabel is geen invulformulier maar een werkblad: de tabel heeft zes kolommen plus een keuzelijst per regel en past niet in de 820px van .form--wide (die blijft ongemoeid, elders in gebruik). Vandaar een eigen, veel bredere variant. De bovengrens houdt de leesregels van de kopvelden hanteerbaar op een zeer breed scherm. De opbouw volgt het patroon dat boekhoudpakketten hanteren: kopgegevens in twee kolommen naast elkaar, daaronder de regels over de volle breedte. */ .form--document { max-width: var(--content-max); } .form__kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; align-items: start; } /* Onder deze breedte is twee kolommen naast elkaar smaller dan één leesbare kolom; dan vallen de blokken onder elkaar. */ @media (max-width: 900px) { .form__kop { grid-template-columns: minmax(0, 1fr); gap: 0; } } .form__kop-blok { min-width: 0; } .form__kop-titel { font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); margin: 0 0 .7rem; } .form__regels { margin-top: 1.6rem; } /* De regeltabel gebruikt de volle breedte; de tekstkolommen rekken mee en de getalkolommen blijven zo smal als hun inhoud. */ .form__regels .table { width: 100%; table-layout: auto; } .form__regels .table td { vertical-align: top; } .regel__product { margin-bottom: .35rem; } /* In een tabelcel moeten de getalvelden zich naar hun kolom voegen in plaats van de width:100% van een gewoon formulierveld te erven. */ .form__regels .table td input[type=text], .form__regels .table td select { width: 100%; min-width: 0; } /* .row-actions is elders een flexrij, maar op een haalt display:flex de cel uit de tabelopmaak: de tabel rekent haar breedte dan zonder die kolom en de rijscheiding stopt te vroeg. Binnen de regeltabel blijft het dus een gewone cel. */ .form__regels .table td.row-actions { display: table-cell; text-align: right; } .col--getal { width: 7rem; } .col--smal { width: 6rem; } /* Ruim genoeg voor "21% (hoog)" plus het uitklappijltje van de browser. */ .col--btw { width: 10rem; } .col--acties { width: 7rem; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=color], select, textarea { width: 100%; padding: .55rem .75rem; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); font: inherit; font-size: .93rem; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); } textarea { resize: vertical; } /* Label met een actie ernaast, bijv. "Klant + Nieuwe klant" */ .field__label { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .82rem; color: var(--text-2); margin-bottom: .3rem; font-weight: 500; } .check { display: flex; align-items: center; gap: .5rem; margin: .9rem 0; font-size: .93rem; } .check input { width: auto; } .toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .toolbar input[type=search] { max-width: 300px; } /* In een filterbalk sturen de velden zich naar hun inhoud. Zonder dit erven ze de width:100% van een gewoon formulierveld, en springt elk filter op een eigen regel: op een breed scherm krijg je dan een kolom van balken over de volle breedte in plaats van een balk. */ /* Onderdelen die samen één gedachte vormen (twee vinkjes plus hun knop) breken als één geheel af in plaats van los van elkaar. */ .toolbar__groep { display: inline-flex; align-items: center; gap: .6rem; flex: 0 0 auto; } .toolbar select, .toolbar input[type=text], .toolbar input[type=date], .toolbar input[type=number], .toolbar .picker { width: auto; min-width: 170px; flex: 0 1 auto; } /* ── Knoppen ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: .5rem .95rem; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .14s ease, border-color .14s ease, transform .1s ease; } .btn:hover { text-decoration: none; background: var(--surface-2); } .btn:active { transform: scale(.985); } .btn-primary { background: var(--primary); border-color: transparent; color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); } .btn-primary:hover { background: var(--primary); filter: brightness(1.07); } /* Onomkeerbare acties: rood van tekst en rand, maar niet gevuld — het is een uitweg, geen hoofdactie, en mag dus niet om aandacht schreeuwen. */ .btn-danger { color: var(--danger); border-color: rgba(192, 57, 43, .28); } .btn-danger:hover { background: var(--danger-soft); border-color: rgba(192, 57, 43, .45); } .btn-block { width: 100%; } .btn-link { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; font-size: .89rem; cursor: pointer; } .btn-link:hover { text-decoration: underline; } .row-actions { display: flex; gap: .8rem; align-items: center; white-space: nowrap; } /* ── Kleine, herbruikbare hulpjes (globaal, zodat er geen losse CSS per pagina nodig is) ── */ .nowrap { white-space: nowrap; } /* Een inhouds-thumbnail (bijv. een productafbeelding), begrensd en met de standaardronding. */ .thumb { display: block; max-width: 220px; height: auto; border-radius: var(--radius-sm); } /* Boomweergave: inspringing per diepte via een variabele --diepte, zodat de OPMAAK globaal blijft en alleen de (dynamische) waarde inline staat. */ .boom-node { margin-left: calc(var(--diepte, 0) * 1.6rem); } /* Paginering onder een tabel: info links, knoppen rechts. */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; } /* ── Meldingen ─────────────────────────────────────────────────────────── */ /* Melding met een pictogram links en een kruisje rechts. Het pictogram zegt of het goed of mis ging zonder dat je de kleur hoeft te kunnen zien; het kruisje geeft je de kans hem weg te halen in plaats van eromheen te lezen. */ .flash { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: var(--radius); margin: 1rem 0; font-size: .92rem; border: 1px solid transparent; box-shadow: var(--shadow-sm); } /* Een leeg meldingsvak dat pas door JavaScript gevuld wordt, staat als [hidden] in de HTML. Zonder deze regel wint de display:flex hierboven van de browser-standaard en zie je een lege rode balk (o.a. in het taak-popupformulier). Geldt overal. */ .flash[hidden] { display: none !important; } /* In de adminlayout staat de melding tussen de bovenbalk en .content en zou hij anders vlak tegen de balk plakken en tot de rand doorlopen. Deze regel geeft hem lucht aan de bovenkant en lijnt hem uit met de padding van .content. Alleen daar: op het inlogscherm zit de melding in een kaart en hoort dit niet. */ .main > .flash { margin: 1.2rem 1.6rem 0; } .flash__teken { flex: 0 0 auto; display: flex; margin-top: .05rem; } .flash__tekst { flex: 1 1 auto; min-width: 0; } .flash__sluit { flex: 0 0 auto; margin: -.15rem -.35rem 0 .4rem; padding: 0 .35rem; border: 0; background: none; cursor: pointer; color: inherit; opacity: .55; font: inherit; font-size: 1.25rem; line-height: 1.2; border-radius: var(--radius-sm); } .flash__sluit:hover { opacity: 1; background: rgba(20, 24, 31, .08); } .flash--error { background: var(--danger-soft); color: var(--danger); border-color: rgba(192, 57, 43, .22); } .flash--success { background: var(--success-soft); color: var(--success); border-color: rgba(30, 143, 87, .22); } .flash--info { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 22%, transparent); } /* ── Tabellen ──────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--radius); } .table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid rgba(255, 255, 255, .68); border-radius: var(--radius); overflow: hidden; font-size: .92rem; } /* Binnen een paneel staat de tabel al op glas: dan geen tweede laag. */ .panel .table { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--hairline); } .table th, .table td { text-align: left; padding: .68rem .85rem; border-bottom: 1px solid var(--hairline); } .table th { background: rgba(247, 248, 250, .8); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .table tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background-color .12s ease; } /* Subtiele zebra: even rijen een heel lichte tint, zodat lange lijsten beter te volgen zijn. */ .table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); } .table tbody tr:hover { background: var(--surface-2); } .table td.num, .table th.num { text-align: right; white-space: nowrap; } .table tr.is-muted td { color: var(--muted); } /* ── Bladerbalk onder een lijst (partials/_paginering.twig) ─────────────── */ .lijst-pager { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.1rem; margin-top: 1rem; } .lijst-pager__tel { font-variant-numeric: tabular-nums; } .lijst-pager__grootte { display: inline-flex; align-items: center; gap: .45rem; } .lijst-pager__grootte select { padding: .38rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .86rem; } /* De knoppen rechts uitlijnen zodat Vorige/Volgende los van de teller staat. */ .lijst-pager__knoppen { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; } .lijst-pager__knop { padding: .4rem .8rem; font-size: .85rem; } .lijst-pager__pos { font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: center; } .lijst-pager .is-disabled { opacity: .45; pointer-events: none; } /* ── Labels ────────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: .16rem .6rem; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-size: .76rem; font-weight: 550; letter-spacing: -.005em; white-space: nowrap; } .badge--muted { background: rgba(20, 24, 31, .06); color: var(--muted); } .badge--danger { background: var(--danger-soft); color: var(--danger); } .badge--success { background: var(--success-soft); color: var(--success); } /* ── Venster (native