/* ============================================================================
   OfficeManager — design-systeem
   ----------------------------------------------------------------------------
   Kleuren en typografie komen uit de ROES-huisstijl (tst.roes.nl): oranje
   #FF6600 als merkkleur, diep marineblauw voor de zijbalk, Syne voor koppen en
   DM Sans voor tekst. Oranje is voorbehouden aan wat de aandacht verdient — de
   actieve navigatieregel, de primaire knop, een open status — zodat het zijn
   werking houdt; blauw is het rustiger tweede accent.

   Uit de tabelconventies van de administratie blijft over wat functioneel is:
   alleen horizontale lijnen, bedragen rechts uitgelijnd in tabelcijfers.

   BELANGRIJK: er staan geen kale element-selectors in dit bestand. De 126
   bestaande .view.php-schermen renderen onder deze schil met hun eigen
   markup (o.a. PageTable's class "table-data"); alles is daarom gescoped op
   .om-* zodat die schermen ongemoeid blijven.
   ========================================================================= */

:root
{
	/* --- ROES-huisstijl -------------------------------------------------
	   Overgenomen uit tst.roes.nl (templates-tst/roesnl/frontend/style.css),
	   zodat de portal dezelfde taal spreekt als de website: oranje merk,
	   diep marineblauw, koele lichte ondergrond. */

	--om-brand:      #FF6600;   /* --color-brand */
	--om-brand-fel:  #FF8533;
	--om-brand-vlak: #FFF3EA;   /* zachte oranje ondergrond, hier afgeleid */
	--om-brand-rand: rgba(255, 102, 0, .28);

	--om-paper:      #F8F9FC;   /* --color-bg */
	--om-surface:    #FFFFFF;
	--om-band:       #F4F6FA;   /* zachte band voor tabelrijen; moet tegen wit net zichtbaar zijn */
	--om-rule:       #E5E9F2;   /* --color-border */
	--om-rule-sterk: #C7CEDB;

	--om-ink:        #0F1729;   /* --color-text */
	--om-ink-zacht:  #374151;   /* --color-text-secondary */
	--om-ink-flauw:  #6B7280;   /* --color-text-muted */
	--om-donker:     #0F1629;   /* --color-dark, voor de zijbalk */
	--om-donker-op:  #1A2540;   /* --color-dark-card */

	/* Blauw is het tweede accent (de blob-kleur van de site); oranje blijft
	   voorbehouden aan wat de aandacht verdient, anders verliest het zijn
	   werking. */
	--om-accent:      #3E63B0;
	--om-accent-fel:  #4B74C8;
	--om-accent-vlak: #EDF1F9;

	/* Semantiek, uit hetzelfde palet. */
	--om-negatief: #DC2626;
	--om-negatief-vlak: #FEF2F2;
	--om-positief: #16A34A;
	--om-positief-vlak: #F0FDF4;
	--om-attentie: #D97706;

	/* Ritme */
	--om-gap:       16px;
	--om-radius:    6px;
	--om-sidebar-w: 232px;

	--om-font:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--om-font-kop:  "Syne", "DM Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--om-font-smal: "DM Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--om-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
   Schil
   ------------------------------------------------------------------------ */

body.om
{
	margin: 0;
	background: var(--om-paper);
	color: var(--om-ink);
	font: 400 13.5px/1.55 var(--om-font);
	font-feature-settings: "tnum" 1;   /* tabelcijfers overal: komma's lijnen uit */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.om *,
body.om *::before,
body.om *::after { box-sizing: border-box; }

.om-shell   { display: flex; min-height: 100vh; align-items: stretch; }

/* De zijbalk neemt het diepe marineblauw van de website over. Dat scheidt
   navigatie van werkvlak zonder een lijn nodig te hebben, en geeft het oranje
   accent iets om tegen af te steken. */
.om-sidebar
{
	width: var(--om-sidebar-w);
	flex: 0 0 auto;
	background: var(--om-donker);
	color: rgba(255, 255, 255, .72);
	padding: 18px 0 40px;

	/* Vast in beeld: bij lange lijsten scrolde de navigatie anders mee naar
	   boven weg. Eigen overflow, zodat een lang menu zelf kan scrollen zonder
	   de pagina mee te nemen. */
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	overflow-y: auto;
}

/* Geen overflow-x meer op .om-main: dat maakt van het werkvlak een eigen
   scroll-context, en daarbinnen kan de kopbalk niet meer sticky zijn. Brede
   inhoud (de facturentabel is ~1400px) scrollt nu in .om-legacy resp.
   .om-vlak-tabel, zie daar. */
.om-main    { flex: 1 1 auto; min-width: 0; padding: 0 28px 72px; }

.om-topbar
{
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--om-gap);
	padding: 18px 0 14px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--om-rule);

	/* Blijft in beeld bij het scrollen. De achtergrond is nodig omdat de
	   inhoud er anders doorheen schuift. */
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--om-paper);
}

/* Vervaging onder de kopbalk: een verloop in de achtergrondkleur, zodat de
   inhoud eronder lijkt weg te vagen in plaats van hard afgesneden te worden.
   Puur decoratief, dus buiten de muisafhandeling gehouden. */
.om-topbar::after
{
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 18px;
	background: linear-gradient(to bottom, var(--om-paper), rgba(248, 249, 252, 0));
	pointer-events: none;
}

.om-merk
{
	display: block;
	font-family: var(--om-font-smal);
	font-weight: 700; font-size: 16px; letter-spacing: -.01em;
	color: #fff;
	text-decoration: none;
	padding: 0 18px 18px;
}

/* Het logo in de zijbalk. Breedte in plaats van hoogte, zodat de sikkels bij
   elke schermbreedte dezelfde verhouding houden; height:auto voorkomt dat de
   width/height-attributen op de <img> de vorm uitrekken. */
.om-merk img
{
	display: block;
	width: 100%; max-width: 152px; height: auto;
}

/* ---------------------------------------------------------------------------
   Navigatie — de actieve regel krijgt de kantlijn-inktstreep van het journaal
   ------------------------------------------------------------------------ */

.om-nav        { display: flex; flex-direction: column; }

.om-nav-groep
{
	font-family: var(--om-font-smal);
	font-size: 10.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .09em;
	color: rgba(255, 255, 255, .38);
	padding: 18px 18px 5px;
}

.om-nav-link
{
	display: flex; align-items: center; gap: 9px;
	padding: 7px 18px;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	border-left: 3px solid transparent;
}
.om-nav-link:hover { background: var(--om-donker-op); color: #fff; }

/* Actief = merkoranje. Dat is de enige plek in de navigatie waar het
   opduikt, zodat je in één oogopslag ziet waar je bent. */
.om-nav-link.is-actief
{
	border-left-color: var(--om-brand);
	background: var(--om-donker-op);
	color: #fff;
	font-weight: 600;
}
.om-nav-link.is-actief .om-nav-icoon { color: var(--om-brand); opacity: 1; }

.om-nav-icoon { font-size: 17px; opacity: .8; }

/* ---------------------------------------------------------------------------
   Koppen en vlakken
   ------------------------------------------------------------------------ */

.om-titel
{
	font-family: var(--om-font-kop);
	font-size: 22px; font-weight: 700; letter-spacing: -.015em;
	margin: 0 0 4px;
}

.om-subtitel { color: var(--om-ink-zacht); font-size: 13px; margin: 0 0 16px; }

/* In de topbalk staat de ondertitel direct onder de titel, zonder de
   ondermarge die hij in de inhoud wel nodig heeft. */
.om-subtitel--kop { margin: 2px 0 0; }

/* Vlakken zijn recht (radius 0): een gelinieerd blad heeft geen ronde hoeken. */
.om-vlak
{
	background: var(--om-surface);
	border: 1px solid var(--om-rule);
	border-radius: var(--om-radius);
	padding: 16px 18px;
	margin-bottom: var(--om-gap);
}

.om-vlak-tabel { padding: 0; overflow-x: auto; }

.om-terug
{
	display: inline-block; margin-bottom: 10px;
	font-size: 12.5px; color: var(--om-ink-zacht); text-decoration: none;
}
.om-terug:hover { color: var(--om-accent); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   De tabel — het signatuur-element
   ------------------------------------------------------------------------ */

.om-table
{
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* Smalle, gekapitaliseerde kolomkoppen: uit gedrukte jaarrekeningen, en het
   scheelt breedte in tabellen met veel kolommen. */
.om-table th
{
	font-family: var(--om-font-smal);
	font-size: 10.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--om-ink-flauw);
	text-align: left; white-space: nowrap;
	padding: 10px 12px;
	border-bottom: 2px solid var(--om-rule);
	background: var(--om-paper);
}

/* PageTable maakt van elke kolomkop een link om op te sorteren. Die moet als
   kop lezen, niet als link: kleur en gewicht van de kop, geen underline —
   pas bij hover verraadt hij dat je erop kunt klikken. */
.om-table th a
{
	color: inherit;
	text-decoration: none;
}
.om-table th a:hover { color: var(--om-accent); text-decoration: underline; }

.om-table td
{
	padding: 8px 12px;
	border-bottom: 1px solid var(--om-rule);
	vertical-align: top;
}

/* Banding is functioneel, geen versiering: het houdt je oog op de regel bij
   brede tabellen. Geen verticale lijnen — die hakken de regel juist stuk. */
.om-table tbody tr:nth-child(even) { background: var(--om-band); }
.om-table tbody tr:last-child td   { border-bottom: 0; }

/* De regel onder de muis wordt volledig oranje met witte tekst. Alles wat in
   die regel zijn eigen kleur draagt — links, nummers, hints, bedragen in rood
   of groen, de rijacties — moet dan mee, anders blijft er een woord in een
   andere kleur staan dat op oranje niet meer leesbaar is. */
.om-table tbody tr:hover { background: var(--om-brand); color: #fff; }

.om-table tbody tr:hover a:not(.om-knop),
.om-table tbody tr:hover .om-nummer,
.om-table tbody tr:hover .om-hint,
.om-table tbody tr:hover .om-negatief,
.om-table tbody tr:hover .om-positief,
.om-table tbody tr:hover .om-rij-actie { color: #fff; }

.om-table tbody tr:hover a:hover:not(.om-knop) { color: #fff; }

/* Een .om-knop in een rij (bv. "Bewerken" op de borden) heeft zijn eigen
   lichte achtergrond; die volgt niet mee met de oranje rij, dus zijn eigen
   tekstkleur ook niet — anders staat er witte tekst op een wit knopje. */
.om-table tbody tr:hover .om-knop { color: var(--om-ink); }

/* Een rijactie is op oranje een wit vlekje met de merkkleur erin — omgekeerd
   dus, want wit-op-oranje is de enige combinatie die daar opvalt. */
.om-table tbody tr:hover .om-rij-actie:hover
{
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* Een statuslabel heeft zelf een gekleurd vlak; dat botst met oranje. Op de
   actieve regel wordt het een doorzichtig wit label. */
.om-table tbody tr:hover .om-status
{
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.om-table .is-klikbaar { cursor: pointer; }

/* Bedragen en datums: zelfde lettertype als de rest van de tekst — een
   monospace-lettertype (DM Mono) oogde als Courier tussen de overige,
   proportionele tekst. Wel rechts uitgelijnd. */
.om-getal,
.om-table td.om-getal
{
	font-family: var(--om-font);
	text-align: right;
	white-space: nowrap;
}

/* Links in een tabel: de regel is al klikbaar, dus een link binnenin moet
   opvallen zonder de rij te laten uitzien als een blok blauwe tekst. */
.om-table td a { color: var(--om-accent); text-decoration: none; }
.om-table td a:hover { text-decoration: underline; }

/* Het potloodje of prullenbakje aan het einde van een regel. Grijs tot je er
   met de muis overheen gaat: de actie hoort de gegevens niet te overstemmen. */
.om-rij-actie
{
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: var(--om-radius);
	color: var(--om-ink-flauw);
	text-decoration: none;
}
.om-rij-actie:hover { background: var(--om-brand-vlak); color: var(--om-brand); }

/* .om-rij-actie stond tot nu toe alleen op <a> (bewerken); het importscherm
   zet hem ook op <button> (proefdraai/importeren) — die heeft de browser-
   eigen rand en achtergrond nog nodig om weg te vallen. */
button.om-rij-actie { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }
.om-rij-actie--gevaar:hover { background: var(--om-negatief-vlak); color: var(--om-negatief); }

/* Een statusicoon draagt wél meteen kleur: de betaalstand van een factuur is
   informatie, geen actie die je pas bij hover hoeft te zien. */
.om-rij-actie--nee { color: var(--om-negatief); }
.om-rij-actie--nee:hover { background: var(--om-negatief-vlak); color: var(--om-negatief); }
.om-rij-actie--ja { color: var(--om-positief); }
.om-rij-actie--ja:hover { background: var(--om-positief-vlak); color: var(--om-positief); }
.om-rij-actie .material-icons-outlined { font-size: 17px; }

.om-negatief { color: var(--om-negatief); }
.om-positief { color: var(--om-positief); }

/* Issuenummer (KLAPP-412) — fase 2 gebruikt dit. */
.om-nummer
{
	font-family: var(--om-font-mono);
	font-size: 12px; font-weight: 500;
	color: var(--om-ink-zacht);
	white-space: nowrap;
}

.om-totaal td
{
	border-top: 2px solid var(--om-ink);
	border-bottom: 0;
	font-weight: 600;
	background: var(--om-paper);
}

/* Tussenregels onder een lijst — per jaar, openstaand, aantallen. Lichter dan
   .om-totaal: die ene regel is de uitkomst, deze zetten hem in perspectief. */
/* Samenvattings- en totaalregels zijn geen gegevens waar je op klikt; die
   blijven staan waar ze staan als de muis erover gaat. */
.om-table tbody tr.om-samenvatting,
.om-table tbody tr.om-samenvatting:hover { background: var(--om-paper); }
.om-table tbody tr.om-samenvatting:hover,
.om-table tbody tr.om-samenvatting:hover td { color: var(--om-ink-zacht); }
.om-table tbody tr.om-totaal:hover { background: var(--om-paper); color: var(--om-ink); }
.om-table tr.om-samenvatting td
{
	border-bottom: 0;
	font-weight: 600;
	color: var(--om-ink-zacht);
	padding-top: 5px; padding-bottom: 5px;
}
.om-table tr.om-samenvatting + tr.om-totaal td { border-top-width: 1px; }

/* ---------------------------------------------------------------------------
   Statuslabels
   ------------------------------------------------------------------------ */

.om-status
{
	display: inline-block;
	font-family: var(--om-font-smal);
	font-size: 10.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	padding: 3px 8px;
	border: 1px solid currentColor;
	border-radius: 999px;
	white-space: nowrap;
}
.om-status--open     { color: var(--om-brand);    background: var(--om-brand-vlak); }
.om-status--bezig    { color: var(--om-attentie); background: #FFFBEB; }
.om-status--wachten  { color: var(--om-accent);   background: var(--om-accent-vlak); }
.om-status--gesloten { color: var(--om-positief); background: var(--om-positief-vlak); }

/* ---------------------------------------------------------------------------
   Knoppen — bedienbaar, dus wél een lichte radius
   ------------------------------------------------------------------------ */

.om-knop
{
	/* inline-flex met een vaste hoogte: zo staat een knop precies even hoog
	   als het invoerveld ernaast in een filterbalk. */
	display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box;
	min-height: 31px;
	padding: 5px 13px;
	font: 500 13px/1.4 var(--om-font);
	color: var(--om-ink);
	background: var(--om-surface);
	border: 1px solid var(--om-rule-sterk);
	border-radius: var(--om-radius);
	text-decoration: none; cursor: pointer;
	white-space: nowrap;
}
.om-knop:hover { background: var(--om-band); border-color: var(--om-ink-flauw); }

.om-knop--primair
{
	background: var(--om-brand);
	border-color: var(--om-brand);
	color: #fff; font-weight: 600;
}
.om-knop--primair:hover { background: var(--om-brand-fel); border-color: var(--om-brand-fel); }

.om-knop--gevaar { color: var(--om-negatief); border-color: var(--om-negatief); }
.om-knop--gevaar:hover { background: var(--om-negatief); color: #fff; }

/* ---------------------------------------------------------------------------
   Formulieren
   ------------------------------------------------------------------------ */

/* Drie voorouders delen dezelfde velden: .om-form (formulier mét <form>-tag),
   .om-fieldset (presentatie-layout waar die tag wegvalt; zie de toelichting
   hierboven) en .om-filter (de filterbalk boven een overzicht).

   Alles krijgt dezelfde hoogte. Een <select> is anders een paar pixels lager
   dan een <input> — de browser rekent zijn eigen padding erbij — waardoor een
   rij velden er ongelijk bij stond. Vandaar de vaste min-height plus
   box-sizing, en appearance:none zodat het pijltje van ons is en niet van het
   besturingssysteem. */
:is(.om-form, .om-fieldset, .om-filter)
	:is(.om-veld, input[type="text"], input[type="password"], input[type="email"],
	    input[type="number"], input[type="date"], input[type="search"],
	    input[type="tel"], input[type="url"], select, textarea)
{
	width: 100%;
	box-sizing: border-box;
	min-height: 31px;
	padding: 6px 9px;
	font: 400 13.5px/1.5 var(--om-font);
	color: var(--om-ink);
	/* background-color en niet de background-shorthand: die zou het pijltje
	   van de <select> hieronder wissen, want deze regel weegt zwaarder. */
	background-color: var(--om-surface);
	border: 1px solid var(--om-rule-sterk);
	border-radius: var(--om-radius);
}

/* De <select> houdt bewust het pijltje van het besturingssysteem: dat is het
   enige zichtbare verschil met een tekstveld, en zonder dat verschil ziet een
   keuzelijst eruit als iets waar je in kunt typen. Alleen de linkerpadding
   gaat een pixel omlaag, want de browser telt er zelf al iets bij op. */
/* :not([multiple]) staat er om twee redenen: een keuzelijst met meerdere
   regels moet wél kunnen groeien, én het maakt deze regel even zwaar als de
   gedeelde regel hierboven, zodat de padding hieronder wint. Zonder dat stond
   een <select> twee pixels hoger dan het tekstveld ernaast. */
:is(.om-form, .om-fieldset, .om-filter) select:not([multiple])
{
	height: 31px;
	padding-top: 0; padding-bottom: 0; padding-left: 6px;
}

:is(.om-form, .om-fieldset, .om-filter) textarea { min-height: 0; }

:is(.om-form, .om-fieldset, .om-filter) :is(input, select, textarea):focus
{
	border-color: var(--om-brand);
	box-shadow: 0 0 0 3px var(--om-brand-vlak);
	outline: 0;
}

:is(.om-form, .om-fieldset, .om-filter) :is(input[type="number"], .om-veld--getal)
{
	font-family: var(--om-font); text-align: right;
}

:is(.om-form, .om-fieldset, .om-filter) .is-invalid { border-color: var(--om-negatief); background: #FDF6F5; }

/* PageForm rendert echte <fieldset>/<legend>-elementen. De browserdefault is
   een ingekeepte 3D-rand uit 1997; hier wordt het een gewoon vlak met de
   legenda als kop erboven.

   De klasse zit op de fieldset en niet op een .om-form-ouder, omdat PageForm
   zijn $class op het <form>-element zet — en dat element verdwijnt zodra
   $render_form_tag false is. WebForm::createFieldset() hangt .om-fieldset er
   daarom zelf aan. */
.om-fieldset
{
	border: 1px solid var(--om-rule);
	background: var(--om-surface);
	padding: 14px 16px;
	margin: 0 0 var(--om-gap);
}

.om-fieldset legend,
.om-form legend
{
	font-family: var(--om-font-smal);
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--om-ink-zacht);
	padding: 0 6px 0 0;
}

.om-form-label
{
	display: block;
	font-family: var(--om-font-smal);
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--om-ink-zacht);
	margin-bottom: 3px;
}

.om-form-acties
{
	display: flex; gap: 9px; align-items: center;
	margin-top: 18px; padding-top: 14px;
	border-top: 1px solid var(--om-rule);
}

.om-hint { color: var(--om-ink-zacht); font-size: 12px; margin-top: 3px; }

/* --- select2 --------------------------------------------------------------
   select2 4.0.6 brengt zijn eigen grijze thema mee uit 2018: 4px radius,
   #aaa-randen, Helvetica. Zonder correctie staat een zoekende keuzelijst er
   naast een gewone <select> zichtbaar anders bij. Hieronder alleen wat nodig
   is om beide op elkaar te laten lijken — de werking blijft die van select2.

   Bewust ook buiten de pm-schermen van kracht (body.om als grens): de oude
   facturen- en hostingschermen gebruiken select2 al, en die hoorden juist
   dezelfde opmaak te krijgen als de nieuwe. De dropdown zelf hangt select2
   aan <body>, vandaar de losse regels voor .select2-dropdown.
   ------------------------------------------------------------------------ */

body.om .select2-container { font-family: var(--om-font); font-size: 13.5px; }

body.om .select2-container--default .select2-selection--single,
body.om .select2-container--default .select2-selection--multiple
{
	height: auto;
	min-height: 31px;
	padding: 2px 4px;
	background: var(--om-surface);
	border: 1px solid var(--om-rule-sterk);
	border-radius: var(--om-radius);
}

body.om .select2-container--default .select2-selection--single .select2-selection__rendered
{
	line-height: 25px;
	padding-left: 5px;
	color: var(--om-ink);
}

body.om .select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px; }
body.om .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--om-ink-flauw); }

body.om .select2-container--default.select2-container--focus .select2-selection--single,
body.om .select2-container--default.select2-container--open .select2-selection--single
{
	border-color: var(--om-brand);
	box-shadow: 0 0 0 3px var(--om-brand-vlak);
	outline: 0;
}

/* De dropdown hangt select2 aan <body>, niet aan het veld — vandaar body.om
   als grens en niet .om-form. Diezelfde prefix is ook nodig om te winnen van
   select2.min.css: die staat in de header ná om.css. */
body.om .select2-dropdown
{
	font-family: var(--om-font);
	font-size: 13.5px;
	border-color: var(--om-rule-sterk);
	border-radius: var(--om-radius);
	box-shadow: 0 8px 24px rgba(15, 22, 41, .12);
}

body.om .select2-container--default .select2-search--dropdown .select2-search__field
{
	padding: 6px 9px;
	border: 1px solid var(--om-rule-sterk);
	border-radius: var(--om-radius);
	font: 400 13.5px/1.5 var(--om-font);
}

body.om .select2-container--default .select2-results__option { padding: 6px 10px; }
body.om .select2-container--default .select2-results__option--highlighted[aria-selected]
{
	background: var(--om-brand);
	color: #fff;
}
body.om .select2-container--default .select2-results__option[aria-selected="true"]
{
	background: var(--om-brand-vlak);
	color: var(--om-ink);
}

/* Nummer vóór de titel in een zoekresultaat: monospace, zodat de codes onder
   elkaar uitlijnen. */
.om-zoek-nummer
{
	font-family: var(--om-font-mono);
	font-size: 12px;
	color: var(--om-ink-flauw);
	margin-right: 8px;
}
body.om .select2-results__option--highlighted .om-zoek-nummer { color: rgba(255, 255, 255, .82); }

/* ---------------------------------------------------------------------------
   Filters
   ---------------------------------------------------------------------------
   Elk overzicht filtert, en tot nu toe deed elk scherm dat anders: losse
   keuzelijsten op een rij, elders een tabel met links gescheiden door pijpjes,
   en nergens een zichtbaar antwoord op "wat staat er nu eigenlijk aan".

   Eén vorm voor alle schermen: de keuzevelden bovenaan met hun label erboven,
   daaronder de snelfilters als chips. Een actieve chip is oranje — dat is de
   enige plek op het scherm waar in één oogopslag te zien is waarop gefilterd
   wordt. Rechts staan altijd Filteren en Wissen, in die volgorde.
   ------------------------------------------------------------------------ */

.om-filter
{
	background: var(--om-surface);
	border: 1px solid var(--om-rule);
	border-radius: var(--om-radius);
	padding: 13px 16px;
	margin-bottom: var(--om-gap);
}

.om-filter-rij
{
	display: flex; align-items: flex-end; flex-wrap: wrap;
	gap: 10px 12px;
}

/* Een tweede rij (de chips) hoort bij dezelfde balk, maar moet er wel van te
   onderscheiden zijn — een dunne lijn, geen tweede kader. */
.om-filter-rij + .om-filter-rij
{
	margin-top: 12px; padding-top: 12px;
	border-top: 1px solid var(--om-rule);
}

.om-filter-veld { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.om-filter-veld--breed { flex: 1; min-width: 200px; }

/* De acties duwen zichzelf naar rechts, zodat ze op elk scherm op dezelfde
   plek staan, hoeveel velden ervoor ook staan. */
.om-filter-acties { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.om-filter-kop
{
	font-family: var(--om-font-smal);
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--om-ink-flauw);
	width: 92px; flex: none;
	padding-top: 5px;
}

.om-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

/* Een rij met chips lijnt bovenaan uit: bij een groep die over vier regels
   wikkelt hoort het kopje links bij de eerste regel te staan, niet bij de
   laatste. */
.om-filter-rij:has(.om-filter-chips) { align-items: flex-start; }

.om-chip
{
	display: inline-flex; align-items: center;
	padding: 3px 10px;
	font-size: 12px; line-height: 1.5;
	color: var(--om-ink-zacht);
	background: var(--om-surface);
	border: 1px solid var(--om-rule-sterk);
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
/* Nadrukkelijk geen onderstreping bij hover: een chip is een knop, geen link. */
.om-chip:hover,
.om-legacy .om-chip:hover { border-color: var(--om-brand); color: var(--om-brand); text-decoration: none; }

.om-chip.is-actief,
.om-chip.is-actief:hover
{
	background: var(--om-brand);
	border-color: var(--om-brand);
	color: #fff;
}

/* Veertig chips in vijf groepen hoeven niet altijd open te staan. <details>
   in plaats van eigen JavaScript: de browser doet het inklappen zelf, en het
   werkt met het toetsenbord zonder dat wij daar iets voor hoeven te doen. */
.om-filter-meer
{
	margin-top: 12px; padding-top: 12px;
	border-top: 1px solid var(--om-rule);
}
.om-filter-meer > summary
{
	cursor: pointer;
	font-family: var(--om-font-smal);
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--om-ink-flauw);
	list-style: none;
	display: flex; align-items: center; gap: 6px;
}
.om-filter-meer > summary::-webkit-details-marker { display: none; }
.om-filter-meer > summary::before { content: "▸"; font-size: 12px; }
.om-filter-meer[open] > summary::before { content: "▾"; }
.om-filter-meer > summary:hover { color: var(--om-brand); }

/* Binnen het uitklapblok geen tweede scheidingslijn boven de eerste rij: die
   staat al boven de samenvatting. */
.om-filter-meer .om-filter-rij:first-of-type { margin-top: 10px; }
.om-filter-meer .om-filter-rij + .om-filter-rij { border-top: 0; padding-top: 0; margin-top: 8px; }

/* Een aan/uit-keuze die de lijst zelf verandert (bv. "toon omschrijving"):
   hoort bij de filters, niet bij de gegevens. */
.om-filter-schakelaar
{
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12.5px; color: var(--om-ink-zacht);
	white-space: nowrap;
}
.om-filter-schakelaar input { width: auto; }

/* --- Sleepbare rijen -------------------------------------------------------
   De inrichting van een bord (statussen, eigen kolommen) wordt gesleept in
   plaats van genummerd. Het greepje is een <button> zodat de volgorde ook met
   het toetsenbord te wijzigen is; zie om.pm.js.
   ------------------------------------------------------------------------ */

.om-sleep-greep
{
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; padding: 0;
	background: transparent;
	border: 0; border-radius: var(--om-radius);
	color: var(--om-ink-flauw);
	cursor: grab;
}
.om-sleep-greep:hover  { background: var(--om-band); color: var(--om-ink); }
.om-sleep-greep:active { cursor: grabbing; }
.om-sleep-greep:focus-visible
{
	outline: 2px solid var(--om-brand);
	outline-offset: 1px;
}
.om-sleep-greep .material-icons-outlined { font-size: 18px; }

.om-table tr.is-sleepend { opacity: .45; background: var(--om-brand-vlak); }

/* ---------------------------------------------------------------------------
   Meldingen
   ------------------------------------------------------------------------ */

.om-melding
{
	padding: 10px 14px;
	border-left: 3px solid var(--om-brand);
	background: var(--om-brand-vlak);
	border-radius: 0 var(--om-radius) var(--om-radius) 0;
	margin-bottom: var(--om-gap);
}
.om-melding--fout { border-left-color: var(--om-negatief); background: var(--om-negatief-vlak); }
.om-melding--goed { border-left-color: var(--om-positief); background: var(--om-positief-vlak); }

.om-leeg
{
	padding: 34px 18px;
	text-align: center;
	color: var(--om-ink-zacht);
}

/* ---------------------------------------------------------------------------
   Toegankelijkheid en responsiviteit
   ------------------------------------------------------------------------ */

body.om :focus-visible
{
	outline: 2px solid var(--om-brand);
	outline-offset: 1px;
}

/* Brede tabellen scrollen in hun eigen vlak; de pagina zelf nooit. */
.om-scroll-x { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   Overgangslaag voor de nog niet omgebouwde schermen
   ---------------------------------------------------------------------------
   De 126 bestaande .view.php-schermen renderen binnen .om-main met hun eigen
   markup. Hun standaard-browserblauw botst hard met het inktblauwe accent.
   Alleen de kleur wordt hier bijgetrokken — geen layout, geen underline, geen
   spacing — zodat er functioneel niets aan die schermen verandert. Deze regel
   verdwijnt zodra het laatste oude scherm is omgezet (fase 3 e.v.).
   ------------------------------------------------------------------------ */

.om-main a:not([class^="om-"]):not([class*=" om-"]) { color: var(--om-accent); }
.om-legacy .header { color: var(--om-brand); }

@media (max-width: 860px)
{
	.om-shell   { flex-direction: column; }
	.om-sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--om-rule); padding-bottom: 12px; }
	.om-nav     { flex-direction: row; flex-wrap: wrap; }
	.om-nav-groep { display: none; }
	.om-nav-link  { border-left: 0; border-bottom: 2px solid transparent; }
	.om-nav-link.is-actief { border-left: 0; border-bottom-color: var(--om-accent); }
	.om-main    { padding: 18px 16px 56px; }
}

@media (prefers-reduced-motion: reduce)
{
	body.om *, body.om *::before, body.om *::after
	{
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ---------------------------------------------------------------------------
   Frontend-schil
   ---------------------------------------------------------------------------
   Externe gasten en de urenregistratie. Geen zijnavigatie: een gast heeft maar
   een handvol schermen, die passen in een bovenbalk. Bewust een eigen,
   gecentreerde maat — het frontend is geen administratiescherm.
   ------------------------------------------------------------------------ */

.om-fe-shell { min-height: 100vh; display: flex; flex-direction: column; }

.om-fe-balk
{
	display: flex; align-items: center; gap: 22px;
	padding: 0 24px;
	border-bottom: 1px solid var(--om-rule);
	background: var(--om-surface);
}

.om-merk--fe { padding: 16px 0; color: var(--om-brand); font-family: var(--om-font-kop); }

.om-fe-nav   { display: flex; gap: 4px; flex: 1 1 auto; }

.om-fe-link
{
	padding: 16px 12px;
	color: var(--om-ink-zacht); text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.om-fe-link:hover     { color: var(--om-ink); }
.om-fe-link.is-actief { color: var(--om-brand); font-weight: 600; border-bottom-color: var(--om-brand); }

.om-fe-rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.om-fe-naam   { color: var(--om-ink-zacht); font-size: 12.5px; }

.om-fe-main
{
	flex: 1 1 auto;
	width: 100%; max-width: 1180px; margin: 0 auto;
	padding: 22px 24px 64px;
}

@media (max-width: 700px)
{
	.om-fe-balk  { flex-wrap: wrap; gap: 10px; padding: 0 16px; }
	.om-fe-link  { padding: 10px 8px; }
	.om-fe-main  { padding: 16px 16px 48px; }
}

/* ===========================================================================
   Oude schermen — compatibiliteitslaag
   ---------------------------------------------------------------------------
   De 126 .view.php-schermen dateren uit 2005: <font>-tags, <NOBR>, tabellen
   met width/cellpadding-attributen, en de klassen uit de oude
   templates/officemanager/style.css (Verdana 11px, oranje links). Die
   stylesheet wordt niet meer geladen; deze laag beeldt dat vocabulaire af op
   het design-systeem, zodat de hele portal er hetzelfde uitziet zonder dat er
   ook maar één regel PHP in die schermen verandert.

   Alles hangt onder .om-legacy — de wrapper die Page::render() sectie H om de
   view-include zet. Daardoor mogen hier wél element-selectors staan: ze kunnen
   de nieuwe component-schermen niet raken.

   Deze hele sectie verdwijnt zodra het laatste oude scherm is omgezet.
   ======================================================================== */

.om-legacy { font: 400 13px/1.5 var(--om-font); color: var(--om-ink); overflow-x: auto; }

/* <font size=.. color=..> uit 2005 negeren: laat het de schil-typografie erven. */
.om-legacy font { font-family: inherit !important; font-size: inherit !important; }

/* De :not() sluit onze eigen componenten uit — een chip of een knop is geen
   tekstlink en hoort bij hover geen streep te krijgen. Zelfde grens als bij
   .om-main a hierboven. */
.om-legacy a:not([class^="om-"]):not([class*=" om-"])       { color: var(--om-accent); text-decoration: none; }
.om-legacy a:not([class^="om-"]):not([class*=" om-"]):hover { text-decoration: underline; }
.om-legacy a.black    { color: var(--om-ink); }

/* Koppen: HTMLModule::getHeader() rendert .header / .header-small. */
.om-legacy .header
{
	font-family: var(--om-font-smal);
	font-size: 21px; font-weight: 600; color: var(--om-ink);
	letter-spacing: -.005em;
}
.om-legacy .header-small
{
	font-family: var(--om-font-smal);
	font-size: 16px; font-weight: 600; color: var(--om-ink);
}

/* Tabellen. Dezelfde ledger-opmaak als .om-table, maar toegepast op de
   bestaande markup: horizontale lijnen, gebande rijen, geen verticale rasters. */
.om-legacy table            { border-collapse: collapse; }
.om-legacy table.table-data { width: 100%; }

.om-legacy th,
.om-legacy .table-header
{
	font-family: var(--om-font-smal);
	font-size: 10.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--om-ink-zacht);
	text-align: left; width: auto;
	padding: 8px 10px;
	border-bottom: 1px solid var(--om-rule-sterk);
	white-space: nowrap;
}
.om-legacy th a,
.om-legacy .table-header a { color: inherit; text-decoration: none; }
.om-legacy th a:hover      { color: var(--om-accent); text-decoration: underline; }

.om-legacy table.table-data td { padding: 7px 10px; border-bottom: 1px solid var(--om-rule); }
.om-legacy table.table-data tbody tr:hover { background: var(--om-brand-vlak); }
.om-legacy .row-highlight      { background: var(--om-band); }

/* Vlakken uit de oude stylesheet. */
.om-legacy .block-parent { padding: 0; height: auto; }
.om-legacy .block-light,
.om-legacy .block-dark
{
	padding: 14px 16px;
	border: 1px solid var(--om-rule);
	background: var(--om-surface);
}

/* Tabbladen. */
.om-legacy .tab,
.om-legacy .tab_unselected,
.om-legacy .tab_selected
{
	text-align: left;
	padding: 7px 12px;
	border: 0; border-bottom: 2px solid transparent;
	background: transparent;
	font-family: var(--om-font-smal); font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--om-ink-zacht);
}
.om-legacy .tab_selected   { color: var(--om-accent); border-bottom-color: var(--om-accent); }
.om-legacy .tab_filler     { border-bottom: 1px solid var(--om-rule); background: transparent; }
.om-legacy .tab_body       { text-align: left; padding: 16px 0 0; border: 0; background: transparent; }

/* Invoervelden: de oude klassen dicteren breedtes, die blijven staan; alleen
   rand, radius, typografie en focus worden bijgetrokken. */
.om-legacy input[type="text"],
.om-legacy input[type="password"],
.om-legacy input[type="email"],
.om-legacy input[type="number"],
.om-legacy select,
.om-legacy textarea,
.om-legacy .inputbox,
.om-legacy .input-text, .om-legacy .input-text-100,
.om-legacy .input-text-date-day, .om-legacy .input-text-date-year,
.om-legacy .input-text-number,
.om-legacy .input-textarea, .om-legacy .input-textarea-100, .om-legacy .input-textarea-200,
.om-legacy .input-select, .om-legacy .input-select-small
{
	font: 400 13px/1.4 var(--om-font);
	color: var(--om-ink);
	background: var(--om-surface);
	border: 1px solid var(--om-rule-sterk);
	border-radius: var(--om-radius);
	padding: 5px 8px;
	/* Dezelfde hoogte als de velden in de nieuwe componenten. De oude klassen
	   zetten er height:20px op — een maat uit het Verdana-tijdperk, waardoor
	   een <select> en een tekstveld naast elkaar niet gelijk stonden. */
	min-height: 31px;
	height: auto;
	margin: 0;
}

/* Een <select> krijgt van de browser zijn eigen padding bovenop de opgegeven
   waarde; vandaar een vaste hoogte in plaats van min-height. :not([multiple])
   houdt keuzelijsten met meerdere regels vrij. */
.om-legacy select:not([multiple])
{
	height: 31px;
	padding-top: 0; padding-bottom: 0;
}

/* Een textarea moet juist wél kunnen groeien; de oude klassen zetten daar een
   werkbare hoogte op. */
.om-legacy textarea { min-height: 0; }
.om-legacy input:focus,
.om-legacy select:focus,
.om-legacy textarea:focus
{
	outline: none;
	border-color: var(--om-brand);
	box-shadow: 0 0 0 3px var(--om-brand-rand);
}
/* De dag/maand/jaar-vakjes van HTMLModule::getFieldDate() krijgen hun breedte
   als inline stijl mee (25px voor de dag, 35px voor het jaar), geschreven voor
   het content-box-model van 2005. Onder de border-box van deze schil ging daar
   padding en rand vanaf, en bleef er van "05" nog een halve nul over. Content-
   box plus smalle padding zet ze terug op maat. */
.om-legacy .input-text-date-day,
.om-legacy .input-text-date-month,
.om-legacy .input-text-date-year
{
	box-sizing: content-box;
	padding-left: 3px; padding-right: 3px;
	text-align: center;
}

/* Het kalenderknopje naast een datumveld wijst naar calendar/icon.gif in de
   framework-templates; daar staat alleen calendar.gif, dus stond er op elk
   detailscherm een kapot plaatje. De afbeelding uit onze eigen sjabloonmap
   schuiven we er met content: overheen — het <img> blijft klikbaar, en het
   framework hoeft er niet voor aangepast te worden. */
.om-legacy img[src$="calendar/icon.gif"]
{
	content: url("javascript/calendar/calendar.gif");
	width: 16px; height: 16px;
	vertical-align: middle;
	cursor: pointer;
}

.om-legacy .input-red   { color: var(--om-negatief); font-weight: 600; }
.om-legacy .input-black { color: var(--om-ink);      font-weight: 600; }

/* Knoppen. */
.om-legacy input[type="submit"],
.om-legacy input[type="button"],
.om-legacy .button,
.om-legacy .button-small
{
	font: 500 13px/1.4 var(--om-font);
	color: var(--om-ink);
	background: var(--om-surface);
	border: 1px solid var(--om-rule-sterk);
	border-radius: var(--om-radius);
	padding: 6px 13px;
	height: auto;
	cursor: pointer;
}
.om-legacy input[type="submit"]:hover,
.om-legacy input[type="button"]:hover,
.om-legacy .button:hover,
.om-legacy .button-small:hover { background: var(--om-band); border-color: var(--om-ink-flauw); }

.om-legacy hr   { border: 0; border-top: 1px solid var(--om-rule); height: 0; margin: 14px 0; }
.om-legacy .icon { margin-bottom: 0; vertical-align: middle; }

/* De oude schermen zetten hun tekstkleur soms per <div>/<p>; laat erven. */
.om-legacy div, .om-legacy p, .om-legacy tr { font-family: inherit; font-size: inherit; color: inherit; }

/* --- Schermacties -----------------------------------------------------------
   Opslaan / Toevoegen / Terug, aangeleverd door Template::getMenu(). Stonden
   in de oude schil als icoonkolom rechts; hier een gewone knoppenrij boven het
   scherm, op dezelfde plek als de knoppen op de pm-schermen.
   ------------------------------------------------------------------------ */

.om-legacy-acties
{
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 0 0 var(--om-gap);
}
.om-legacy-acties .om-knop { gap: 6px; }
.om-knop-icoon { font-size: 17px; }

/* --- Formulieren op de detailschermen --------------------------------------
   De klasse wordt door om.legacy.js aangebracht op elk formulier met drie of
   meer zichtbare velden; zie dat bestand voor het waarom. Het resultaat is
   hetzelfde witte vlak met subtiele rand als elk ander blok in de schil, en
   labels die als label lezen in plaats van als tabelkop.
   ------------------------------------------------------------------------ */

.om-legacy-form
{
	display: block;
	background: var(--om-surface);
	border: 1px solid var(--om-rule);
	border-radius: var(--om-radius);
	padding: 16px 18px;
	margin-bottom: var(--om-gap);
}

/* Binnen zo'n vlak is de tabel puur layout: geen randen, geen banding, wel
   lucht tussen de regels. */
.om-legacy-form table { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
.om-legacy-form td { padding: 3px 10px 3px 0; vertical-align: middle; }
.om-legacy-form tr:hover { background: transparent; }

/* De labelkolom draagt in deze schermen .table-header — een tabelkop-klasse
   voor iets dat een label is. Hier wordt het weer een label: niet in
   kapitalen zoals een kolomkop, wel hetzelfde grijs. */
.om-legacy-form .table-header
{
	width: 190px;
	font-family: var(--om-font-smal);
	font-size: 12px; font-weight: 600;
	text-transform: none; letter-spacing: 0;
	color: var(--om-ink-zacht);
	background: transparent;
	border: 0;
	white-space: normal;
	padding-right: 16px;
}

/* De tussenkoppen (.header-small) delen de scheidingslijn van een sectie. */
.om-legacy-form .header-small
{
	margin-top: 14px; padding-top: 12px;
	border-top: 1px solid var(--om-rule);
}

/* Een datatabel binnen het formulier (factuurregels, uren) houdt wél zijn
   eigen lijnen; die is geen layout maar gegevens. */
.om-legacy-form table.table-data td,
.om-legacy-form .om-legacy-data td { padding: 7px 10px; }

/* ---------------------------------------------------------------------------
   Opmerkingen bij een item
   ---------------------------------------------------------------------------
   Een lineaire lijst, bewust geen updates-met-reacties zoals Monday: dat
   tweetrapsmodel dwingt je elke keer te kiezen waar iets hoort. Interne
   opmerkingen krijgen een afwijkende ondergrond, zodat je nooit per ongeluk
   denkt dat de klant meeleest.
   ------------------------------------------------------------------------ */

.om-opmerking
{
	padding: 12px 0;
	border-bottom: 1px solid var(--om-rule);
}
.om-opmerking:last-child { border-bottom: 0; padding-bottom: 0; }
.om-opmerking:first-child { padding-top: 0; }

.om-opmerking.is-intern
{
	background: #FCFAF3;
	border-left: 3px solid var(--om-attentie);
	padding-left: 12px;
	margin-left: -12px;
}

.om-opmerking-kop  { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.om-opmerking-body { white-space: normal; }

/* De opmerkingen komen sinds de editor als HTML binnen (gefilterd door
   pm_veilige_html). Hier de paar elementen die daar uit kunnen komen op maat
   zetten, zodat een alinea of opsomming niet de browserdefault meebrengt. */
.om-opmerking-body > *:first-child { margin-top: 0; }
.om-opmerking-body > *:last-child  { margin-bottom: 0; }
.om-opmerking-body p  { margin: 0 0 8px; }
.om-opmerking-body ul,
.om-opmerking-body ol { margin: 0 0 8px; padding-left: 22px; }
.om-opmerking-body li { margin-bottom: 2px; }
.om-opmerking-body a  { color: var(--om-accent); }
.om-opmerking-body pre,
.om-opmerking-body code
{
	font-family: var(--om-font-mono);
	font-size: 12.5px;
	background: var(--om-band);
	border-radius: 4px;
	padding: 1px 5px;
}
.om-opmerking-body pre { padding: 10px 12px; overflow-x: auto; }
.om-opmerking-body blockquote
{
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 3px solid var(--om-rule-sterk);
	color: var(--om-ink-zacht);
}

/* CKEditor brengt zijn eigen 2012-chroom mee; alleen rand en radius bijtrekken
   zodat het vak in dezelfde vorm staat als de andere velden. */
.om-form .cke,
.om-form .cke_chrome
{
	border: 1px solid var(--om-rule-sterk) !important;
	border-radius: var(--om-radius);
	box-shadow: none !important;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------------------ */

.om-titel--sectie
{
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--om-ink-flauw);
	margin: 26px 0 12px;
}
.om-titel--sectie:first-of-type { margin-top: 4px; }

.om-kaarten { display: flex; gap: var(--om-gap); flex-wrap: wrap; }

.om-kaart
{
	flex: 1 1 440px;
	min-width: 0;
	background: var(--om-surface);
	border: 1px solid var(--om-rule);
	border-radius: var(--om-radius);
	padding: 14px 16px 16px;
}

.om-kaart-kop
{
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	padding-bottom: 8px; margin-bottom: 8px;
	border-bottom: 1px solid var(--om-rule);
}

.om-kaart-titel
{
	font-family: var(--om-font-kop);
	font-size: 14px; font-weight: 700; letter-spacing: -.01em;
}

.om-kaart-cijfers { font-size: 12px; color: var(--om-ink-flauw); font-variant-numeric: tabular-nums; }

.om-cijfer-plus { color: var(--om-positief); font-weight: 600; }
.om-cijfer-min  { color: var(--om-negatief); font-weight: 600; }
.om-cijfer-open { color: var(--om-brand);    font-weight: 600; }

.om-chart { width: 100%; }

/* Kaart met alleen één kengetal (omzet/uren deze/vorige maand), zonder
   grafiek eronder — smaller dan een grafiekkaart. */
.om-kaart-stat { flex: 1 1 200px; }
.om-kaart-stat-waarde
{
	font-family: var(--om-font-kop);
	font-size: 28px; font-weight: 700; letter-spacing: -.01em;
	line-height: 1.2;
}
.om-kaart-stat-sub { font-size: 12px; color: var(--om-ink-flauw); margin-top: 2px; }

/* Schermkop van de oude .view.php-bestanden (Template::getHeader). */
.om-legacy-kop
{
	display: flex; align-items: center; gap: 9px;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--om-rule);
}
.om-legacy-kop-icoon { color: var(--om-brand); }
.om-legacy-kop-titel
{
	font-family: var(--om-font-kop);
	font-size: 20px; font-weight: 700; letter-spacing: -.015em;
	color: var(--om-ink);
}
.om-legacy-kop-sub
{
	font-size: 13px; color: var(--om-ink-flauw);
	padding-left: 2px;
}
.om-legacy-kop-sub::before { content: "/"; padding-right: 7px; color: var(--om-rule-sterk); }

/* De oude iconenlinks op verzamelschermen: een los icoontje in een link is
   oranje. De :not() sluit onze eigen componenten uit — het icoon in een
   .om-knop hoort de kleur van die knop te volgen. Zonder die uitzondering
   stond er een oranje plusje op een oranje knop, dus onzichtbaar. */
.om-legacy a:not([class^="om-"]):not([class*=" om-"]) .material-icons-outlined { color: var(--om-brand); }

/* Belletje met ongelezen berichten in de topbalk. */
.om-bel
{
	position: relative;
	display: inline-flex; align-items: center;
	color: var(--om-ink-zacht);
	text-decoration: none;
	padding: 4px;
}
.om-bel:hover { color: var(--om-brand); }

.om-bel-teller
{
	position: absolute; top: -3px; right: -6px;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	background: var(--om-brand); color: #fff;
	border-radius: 999px;
	font-size: 10px; font-weight: 700; line-height: 16px;
	text-align: center;
}

/* ===========================================================================
   Inlogscherm
   ---------------------------------------------------------------------------
   Twee panelen: links het merk in het donkere marineblauw van de website, met
   dezelfde zachte kleurvlekken die roes.nl gebruikt; rechts het formulier op
   wit. Op smalle schermen valt het merkpaneel weg — daar telt alleen inloggen.
   ======================================================================== */

body.om-login { min-height: 100vh; }

.om-login-shell { display: flex; min-height: 100vh; }

/* --- Merkpaneel --------------------------------------------------------- */

.om-login-merk
{
	position: relative;
	flex: 0 0 44%;
	max-width: 560px;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 44px 48px;
	background: var(--om-donker);
	color: #fff;
	overflow: hidden;
}

/* De blobs: grote, sterk vervaagde cirkels. Ze geven het vlak diepte zonder
   een afbeelding nodig te hebben, en ze zijn puur decoratief — daarom staan ze
   achter de inhoud en vangen ze geen muisklikken. */
.om-login-blob
{
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}
.om-login-blob--oranje
{
	width: 380px; height: 380px;
	top: -110px; right: -120px;
	background: rgba(255, 102, 0, .28);
}
.om-login-blob--blauw
{
	width: 420px; height: 420px;
	bottom: -160px; left: -140px;
	background: rgba(62, 99, 176, .28);
}

/* Drie zones: logo bovenaan, claim in het midden, copyright onderaan. De
   claim krijgt auto-marges zodat hij optisch centreert en niet tegen het
   copyright aan kruipt. */
.om-login-merk-inhoud { position: relative; z-index: 1; margin: auto 0; }

/* Het logo is een afbeelding met een vaste verhouding (1000x356). Alleen de
   breedte sturen, hoogte automatisch — zo blijft hij scherp op elk scherm en
   verschuift er niets tijdens het laden, omdat width/height in de HTML staan. */
.om-login-logo
{
	position: relative; z-index: 1;
	display: block;
	width: 208px; height: auto;
}

.om-login-claim
{
	font-family: var(--om-font-kop);
	font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -.025em;
	margin: 0 0 16px;
}

.om-login-uitleg
{
	margin: 0;
	max-width: 34ch;
	font-size: 14.5px; line-height: 1.6;
	color: rgba(255, 255, 255, .66);
}

.om-login-voet
{
	position: relative; z-index: 1;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .45);
}
.om-login-voet a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.om-login-voet a:hover { color: var(--om-brand); }

/* --- Formulierpaneel ----------------------------------------------------- */

.om-login-paneel
{
	flex: 1 1 auto;
	display: flex; align-items: center; justify-content: center;
	padding: 40px 24px;
	background: var(--om-surface);
}

.om-login-kaart { width: 100%; max-width: 344px; }

.om-login-titel
{
	font-family: var(--om-font-kop);
	font-size: 25px; font-weight: 700; letter-spacing: -.02em;
	margin: 0 0 6px;
}

.om-login-sub
{
	margin: 0 0 24px;
	font-size: 14px; line-height: 1.55;
	color: var(--om-ink-flauw);
}

.om-login-fout
{
	display: flex; align-items: flex-start; gap: 8px;
	padding: 11px 13px; margin-bottom: 18px;
	background: var(--om-negatief-vlak);
	border-left: 3px solid var(--om-negatief);
	border-radius: 0 var(--om-radius) var(--om-radius) 0;
	color: var(--om-negatief);
	font-size: 13.5px; line-height: 1.45;
}

.om-login-form input[type="text"],
.om-login-form input[type="password"]
{
	width: 100%;
	padding: 10px 12px;
	font: 400 15px/1.4 var(--om-font);
	color: var(--om-ink);
	background: var(--om-surface);
	border: 1px solid var(--om-rule-sterk);
	border-radius: var(--om-radius);
}
.om-login-form input:focus
{
	outline: none;
	border-color: var(--om-brand);
	box-shadow: 0 0 0 3px var(--om-brand-rand);
}

/* Tweefactor-code als 6 losse vakjes. Gedrag (navigatie, plakken, maskeren,
   auto-submit) zit in login-code.js; hier alleen het uiterlijk. */
.om-otp-groep
{
	display: flex;
	gap: 8px;
	margin-top: 2px;
}

.om-login-form input.om-otp-vak
{
	width: auto;
	flex: 1 1 0;
	min-width: 0;
	padding: 10px 0;
	font-family: var(--om-font-mono);
	font-size: 22px;
	text-align: center;
}

.om-login-knop
{
	width: 100%;
	margin-top: 20px;
	padding: 11px 16px;
	font-size: 14.5px;
	border: 0;
}

.om-login-link
{
	display: block;
	margin-top: 16px;
	font-size: 13px;
	color: var(--om-ink-flauw);
	text-decoration: none;
	text-align: center;
}
.om-login-link:hover { color: var(--om-brand); text-decoration: underline; }

@media (max-width: 860px)
{
	.om-login-shell { flex-direction: column; }
	.om-login-merk
	{
		flex: 0 0 auto; max-width: none;
		padding: 30px 26px 26px;
	}
	.om-login-merk-inhoud { margin-top: 0; }
	.om-login-logo   { width: 156px; }
	.om-login-claim  { font-size: 27px; }
	.om-login-uitleg { display: none; }
	.om-login-voet   { display: none; }
	.om-login-paneel { padding: 34px 22px 48px; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   Oude schermen: datatabellen en filterblokken
   ---------------------------------------------------------------------------
   De klassen hieronder worden door om.legacy.js aangebracht, omdat de 2005-
   markup geen enkel kenmerk heeft waaraan een datatabel te herkennen is en CSS
   niet op rij- of kolomaantal kan selecteren. Zie dat bestand.
   ------------------------------------------------------------------------ */

.om-legacy-data
{
	width: 100%;
	border-collapse: collapse;
	background: var(--om-surface);
	border: 1px solid var(--om-rule);
	border-radius: var(--om-radius);
	overflow: hidden;
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--om-gap);
}

.om-legacy-data td
{
	padding: 7px 12px;
	border-bottom: 1px solid var(--om-rule);
	vertical-align: top;
	line-height: 1.45;
}

/* De 2005-markup zet hoogtes en padding op de cellen zelf; die overrulen. */
.om-legacy-data td[height],
.om-legacy-data tr[height] { height: auto !important; }

/* Gebande rijen, net als bij de nieuwe tabellen: het houdt je oog op de regel
   bij brede lijsten. nth-child werkt hier op de rijen zoals ze in de bron
   staan — deze tabellen hebben geen thead. */
.om-legacy-data tr:nth-child(even) { background: var(--om-band); }
.om-legacy-data tr:last-child td   { border-bottom: 0; }

/* Zelfde behandeling als bij .om-table: de regel onder de muis wordt oranje
   met witte tekst, inclusief alles wat daarin zijn eigen kleur droeg. De
   oude schermen zetten kleuren soms per <font> of inline, vandaar !important
   op de tekstkleur — anders wint de 2005-markup. */
.om-legacy-data tr:hover { background: var(--om-brand); }
.om-legacy-data tr:hover,
.om-legacy-data tr:hover td,
.om-legacy-data tr:hover a,
.om-legacy-data tr:hover b,
.om-legacy-data tr:hover font,
.om-legacy-data tr:hover nobr,
.om-legacy-data tr:hover span { color: #fff !important; }

/* De eerste rij is in deze schermen de kop (met .table-header-cellen). */
.om-legacy-data tr:first-child
{
	background: var(--om-paper);
	border-bottom: 2px solid var(--om-rule);
}
.om-legacy-data tr:first-child:hover { background: var(--om-paper); }

/* Filterblokken boven een lijst krijgen een eigen kader, zodat zichtbaar is
   waar het filteren ophoudt en de gegevens beginnen. */
.om-legacy-filter,
.om-filterkader
{
	display: block;
	background: var(--om-surface);
	border: 1px solid var(--om-rule);
	border-radius: var(--om-radius);
	padding: 14px 16px;
	margin-bottom: var(--om-gap);
	width: 100%;
}

.om-legacy-filter td { padding: 3px 6px; }
.om-legacy-filter tr:hover { background: transparent; }

/* Binnen een filterkader zijn tabellen puur layout; geen banding of randen. */
.om-filterkader table { border-collapse: collapse; }
.om-filterkader td    { padding: 3px 8px 3px 0; border: 0; }
.om-filterkader tr:hover { background: transparent; }
.om-filterkader > *:first-child { margin-top: 0; }
.om-filterkader > *:last-child  { margin-bottom: 0; }