/* =========================================================
StitchField paneel (Backpack / CoreUI "blue-bundle")
---------------------------------------------------------
Sluit de achterkant aan op de frontend-huisstijl.
Opzet: alle kleuren lopen via tokens die per thema opnieuw
worden gezet. Eerder stonden kleuren hard in de regels en
waren alleen de lichte regels afgeschermd met
html:not(.theme-dark); koppen en kaarten bleven daardoor in
het donkere thema donkerbruin op bijna-zwart staan.
========================================================= */
body.app {
--sf-header-h: 64px;
--sf-header-h-compact: 64px;
/* Zelfde displayfont als de frontend; stond hier niet, dus alle koppen
vielen terug op Georgia. */
--sf-font-display: "Lora", "Georgia", serif;
/* Vlakken, van ver naar dichtbij */
--p-bg: #f4f2ee;
--p-surface: #ffffff;
--p-surface-2: #faf9f7;
--p-line: #d8d3ca;
--p-line-soft: #e6e2db;
--p-thead: #efeae0; /* kop en voet van tabellen: zachte bruintint */
/* Tekst */
--p-text: #4a443e;
--p-heading: #2a211b;
--p-muted: #7a736b;
/* Zelfde tweedeling als de voorkant: een donker vlak voor gevulde knoppen en
een middenbruin voor links, zodat die niet donkerder worden dan de tekst. */
--p-action: #30251c;
--p-action-strong: #1c1510;
--p-accent: #8a5a2b;
--p-accent-strong: #6b4520;
--p-on-accent: #ffffff;
--p-accent-soft: rgba(138, 90, 43, 0.10);
--p-danger: #b23a3a;
--p-success: #3f7d4e;
font-family: var(--sf-font-body, "Source Sans 3", sans-serif);
font-size: 15px;
color: var(--p-text);
background: var(--p-bg);
}
/* ---------- Donker thema ----------
Blauwgrijs in plaats van bruin: op een scherm vol data leest een neutrale
ondergrond rustiger dan de warme papierkleur van de voorkant. */
html.theme-dark body.app {
--p-bg: #17130f;
--p-surface: #211b16;
--p-surface-2: #2a231d;
--p-line: #3a3129;
--p-line-soft: #2f2820;
--p-thead: #2c251e; /* in het donker juist iets lichter dan de kaart */
--p-text: #d6cec4;
--p-heading: #f5f1ea;
--p-muted: #9a9086;
/* In het donker wordt het bruin een lichte tint, anders is het niet van de
ondergrond te onderscheiden. Donkere tekst erop. */
/* In het donker is het donkere bruin onbruikbaar als vlak. Actie en accent vallen
daar samen in het geel van Atlantis, dat op deze ondergrond ruim genoeg
contrast geeft en meteen de merkkleur terugbrengt. */
--p-action: #ffd000;
--p-action-strong: #ffdb3d;
--p-accent: #ffd000;
--p-accent-strong: #ffdb3d;
--p-on-accent: #17130f;
--p-accent-soft: rgba(255, 208, 0, 0.14);
--p-danger: #e08a7a;
--p-success: #8fb37a;
color: var(--p-text);
background: var(--p-bg);
}
/* De (lege) CoreUI-header en de vaste marges die daarbij horen */
body.app .app-header { display: none; }
/* clip in plaats van de hidden van blue-bundle: hidden maakt van .app-body een
scrollcontainer, en dan plakt de zijbalk aan die container in plaats van aan
het venster, dus scrolde hij gewoon mee weg. */
body.app .app-body {
margin-top: 0;
overflow-x: clip;
}
@supports not (overflow: clip) {
body.app .app-body { overflow-x: hidden; }
}
/* De zijbalk blijft mee staan onder de balk. CoreUI maakt hem alleen vast met de
klasse sidebar-fixed, die hier niet gebruikt wordt; sticky werkt in de flexrij van
.app-body zonder dat de kolombreedte verandert. */
body.app .app-body > .sidebar,
body.app .sidebar {
position: sticky;
top: var(--sf-header-h);
align-self: flex-start;
height: calc(100vh - var(--sf-header-h));
overflow-y: auto;
overflow-x: hidden;
}
body.app.sidebar-fixed .sidebar {
position: fixed;
top: var(--sf-header-h);
height: calc(100vh - var(--sf-header-h));
}
/* ---------- Inloggen en wachtwoord herstellen ----------
Deze pagina's draaien op layouts.plain: geen navigatie, geen zijbalk, dus ook
geen merk. Er stond alleen een kaartje midden op een leeg vlak, zonder weg
terug naar de site. */
body.app.flex-row { padding: 40px 0; }
body.app .auth-column { padding-top: 8px; }
body.app .auth-brand {
display: block;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 22px;
transition: opacity .2s ease;
}
body.app .auth-brand:hover { opacity: .8; }
body.app .auth-brand img {
display: block;
height: 92px;
width: auto;
image-rendering: auto;
}
body.app .auth-back {
margin-top: 22px;
font-size: 0.9rem;
}
body.app .auth-back a { color: var(--p-muted); }
body.app .auth-back a:hover { color: var(--p-accent); }
@media (max-width: 575.98px) {
body.app .auth-brand img { height: 74px; }
}
/* ---------- Navbar van de frontend, compact in het paneel ---------- */
/* In het paneel staat de balk altijd bovenaan mee te scrollen, dus krijgt hij
meteen het glas van de gescrolde toestand op de voorkant: doorschijnend papier,
sterke blur en een lichte glansrand. */
body.app nav.navbar.main-navigation {
padding: 0;
position: sticky;
top: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 60%),
rgba(var(--sf-header-bg, 234, 230, 222), 0.80);
-webkit-backdrop-filter: saturate(180%) blur(24px);
backdrop-filter: saturate(180%) blur(24px);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 0 rgba(42, 33, 27, 0.05),
0 14px 34px -24px rgba(42, 33, 27, 0.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
body.app nav.navbar.main-navigation { background: rgba(var(--sf-header-bg, 234, 230, 222), 0.97); }
}
/* De balk gebruikt de .container van de voorkant, met een max van 1360px. In het
paneel loopt de inhoud over de volle breedte (.main .container-fluid, 30px van
de rand), dus stonden het merk en de knoppen middenin met gaten aan beide kanten.
Nu volle breedte met diezelfde 30px, zodat de balk op de inhoud uitlijnt. */
body.app nav.navbar.main-navigation > .container {
height: var(--sf-header-h);
max-width: none !important;
width: 100%;
padding-left: 30px;
padding-right: 30px;
}
/* Het merk staat nu als twee bestanden in de balk (inkt en wit); de hoogte stuurt,
de breedte volgt, anders wordt het logo in de breedte platgedrukt. */
body.app nav.navbar .brand img { height: 52px; width: auto; }
body.app nav.navbar .menu a.is-cta,
body.app nav.navbar .menu a.is-atlantis { height: 34px; padding: 0 16px; }
html.theme-dark body.app nav.navbar.main-navigation {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%),
rgba(33, 27, 22, 0.74);
border-bottom-color: rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 14px 34px -24px rgba(0, 0, 0, 0.8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.theme-dark body.app nav.navbar.main-navigation { background: rgba(33, 27, 22, 0.97); }
}
html.theme-dark body.app nav.navbar .menu a,
html.theme-dark body.app .nav-tools a,
html.theme-dark body.app .nav-tools button { color: var(--p-heading); }
html.theme-dark body.app nav.navbar .brand .logo-ink { opacity: 0; }
html.theme-dark body.app nav.navbar .brand .logo-light { opacity: 1; }
html.theme-dark body.app .nav-tools img.svg-icon { filter: invert(1); }
html.theme-dark body.app nav.navbar .menu a.is-cta { background: var(--p-accent); color: var(--p-on-accent); }
html.theme-dark body.app nav.navbar .menu a.is-atlantis { background: var(--p-surface-2); border-color: var(--p-line); }
html.theme-dark body.app nav.navbar .menu a.is-atlantis img { filter: invert(1); }
/* Het uitklapmenu komt van de voorkant en werkt daar met vaste lichte kleuren.
In het paneel moet het met het thema meebewegen, anders staat er in het donker
donkere tekst op een donker vlak. De frontendregel staat op
"nav.navbar .menu .dropdown-content-nav a" met !important en wint op
specificiteit, dus die selector staat hier compleet overgenomen. */
body.app .dropdown-content-nav {
background: var(--p-surface);
border-color: var(--p-line);
}
body.app .dropdown-content-nav a,
body.app nav.navbar .menu .dropdown-content-nav a { color: var(--p-heading) !important; }
body.app .dropdown-content-nav a:hover,
body.app nav.navbar .menu .dropdown-content-nav a:hover {
background: var(--p-accent-soft);
color: var(--p-accent) !important;
}
body.app .dropdown-content-nav .dropdown-heading { color: var(--p-muted); }
body.app .dropdown-content-nav .dropdown-divider { background: var(--p-line); }
body.app .dropdown-recent__meta { color: var(--p-muted); }
body.app .dropdown-content-nav a:hover .dropdown-recent__meta { color: var(--p-accent); }
body.app .dropdown-recent__thumb {
background: var(--p-surface-2);
border-color: var(--p-line);
color: var(--p-muted);
}
/* ---------- Sidebar ---------- */
body.app .sidebar,
body.app .sidebar.sf-sidebar {
background: var(--p-surface);
border-right: 1px solid var(--p-line);
}
/* Backpack zet .sidebar.sidebar-pills .nav-title en .nav-link op #495057 en de actieve
staat op #467fd0 !important. Beide moeten hier overschreven worden, vandaar de extra
klasse in de selector en de !important op de kleuren. */
body.app .sidebar.sidebar-pills .nav-title,
body.app .sidebar .nav-title {
font-family: var(--sf-font-body, sans-serif);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--p-muted) !important;
padding: 10px 22px 2px;
}
body.app .sidebar .nav-link,
body.app .sidebar.sidebar-pills .nav-link {
color: var(--p-heading) !important;
border-radius: 999px;
/* Compact, zodat er meer menu op een scherm past. */
margin: 0 10px;
padding: 4px 14px;
/* Broodtekstletter: op deze grootte leest een schreefloze in de zijbalk
rustiger dan de Lora van de koppen. */
font-family: var(--sf-font-body, "Source Sans Pro", sans-serif);
font-size: 0.88rem;
line-height: 1.3;
font-weight: 400;
transition: background-color .2s ease, color .2s ease;
}
body.app .sidebar .nav-link .nav-icon { margin-right: 8px; font-size: 1rem; }
body.app .sidebar .nav-item { line-height: 1; }
body.app .sidebar .nav-link .nav-icon,
body.app .sidebar.sidebar-pills .nav-link .nav-icon { color: var(--p-muted) !important; }
body.app .sidebar .nav-link:hover,
body.app .sidebar.sidebar-pills .nav-link:hover {
background: var(--p-accent-soft);
color: var(--p-accent) !important;
}
body.app .sidebar .nav-link:hover .nav-icon,
body.app .sidebar.sidebar-pills .nav-link:hover .nav-icon { color: var(--p-accent); }
body.app .sidebar .nav-link.active,
body.app .sidebar.sidebar-pills .nav-link.active {
background: var(--p-action) !important;
color: var(--p-on-accent) !important;
}
body.app .sidebar .nav-link.active .nav-icon,
body.app .sidebar.sidebar-pills .nav-link.active .nav-icon,
body.app .sidebar.sidebar-pills .nav-link:hover .nav-icon { color: inherit !important; }
body.app .sidebar .nav-dropdown.open { background: transparent; }
body.app .sidebar .nav-dropdown-items .nav-link { margin-left: 24px; font-weight: 400; }
body.app .sidebar .badge { background: var(--p-danger); color: #fff; }
/* ---------- Hoofdvlak ---------- */
body.app .main,
body.app .main.bg-light { background: var(--p-bg) !important; }
body.app .main .navbar-toggler { margin-left: 20px; color: var(--p-muted); }
/* ---------- Omgevingslabel in de zijbalk ---------- */
body.app .sidebar .env-item {
list-style: none;
margin: 10px 10px 4px;
line-height: 1;
}
body.app .sidebar .env-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px 6px 10px;
border-radius: 999px;
border: 1px solid;
background: var(--p-surface);
font-family: var(--sf-font-body, sans-serif);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
body.app .sidebar .env-badge__dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
body.app .sidebar .env-badge.is-local {
color: var(--p-danger);
border-color: var(--p-danger);
}
/* Testomgeving is minder alarmerend dan een draaiende ontwikkelversie. */
body.app .sidebar .env-badge.is-staging {
color: var(--p-accent);
border-color: var(--p-accent);
}
/* ---------- Zijbalk in- en uitklappen ----------
Was een kale knop met twee pictogrammen los naast elkaar. Nu dezelfde pil-vorm
als het thema- en schermvullend-knopje, met een pijl die meedraait: naar links
als de zijbalk openstaat (klikken klapt hem in), naar rechts als hij dicht is.
De pictogrammen komen uit icon() en zijn ![]()
, geen inline svg. Ze zijn zwart,
dus kleuren gaat via dekking en in het donkere thema via een invert op de
afbeelding zelf - niet op de knop, want dan keert ook het vlak om. */
body.app .main .sidebar-toggler.navbar-toggler {
/* Blokniveau met fit-content in plaats van inline-flex: op een inline element
duwt een ondermarge de volgende regel niet weg, en de paginakop plakte er
daardoor tegenaan. */
display: flex;
width: fit-content;
align-items: center;
justify-content: center;
gap: 7px;
height: 36px;
padding: 0 13px !important;
margin: 10px 0 22px 24px;
border-radius: 999px !important;
background: var(--p-surface) !important;
border: 1px solid var(--p-line) !important;
line-height: 1;
transition: background-color .2s ease, border-color .2s ease;
}
body.app .main .sidebar-toggler.navbar-toggler:hover,
body.app .main .sidebar-toggler.navbar-toggler:focus-visible {
background: var(--p-accent-soft) !important;
border-color: var(--p-accent) !important;
}
/* De knop blijft in beeld bij scrollen (2026-10-05, op verzoek): sticky vlak onder
de navigatiebalk, die zelf ook sticky is. De inhoud schuift eronderdoor, vandaar
een lichte schaduw en een z-index boven de kaarten; onder de uitklapmenu's van
de navigatie (50001) en de zijbalk. */
@media (min-width: 992px) {
body.app .main .sidebar-toggler.navbar-toggler {
position: sticky;
top: calc(var(--sf-header-h) + 10px);
z-index: 1010;
box-shadow: 0 2px 8px rgba(42, 33, 27, 0.08);
}
}
body.app .sidebar-toggler__panel,
body.app .sidebar-toggler__arrow {
display: inline-flex;
align-items: center;
}
body.app .sidebar-toggler img.svg-icon {
display: block;
opacity: .55;
transition: opacity .2s ease;
}
body.app .sidebar-toggler:hover img.svg-icon { opacity: .9; }
/* De pijl wijst standaard naar rechts: uitklappen. Staat de zijbalk open, dan
die naar links, want dan klapt de knop juist in. Twee losse pictogrammen en geen
gedraaide: rotate(180deg) op een pijl keert hem ook verticaal om, en dat zag je. */
body.app .sidebar-toggler__arrow.is-collapse { display: none; }
body.app.sidebar-lg-show .sidebar-toggler__arrow.is-collapse { display: inline-flex; }
body.app.sidebar-lg-show .sidebar-toggler__arrow.is-expand { display: none; }
/* De algemene regel in de layout keert de hele knop om in het donkere thema; dat
zou ook het vlak en de rand omdraaien. Alleen de pictogrammen dus. */
html.theme-dark body.app .main .sidebar-toggler.navbar-toggler { filter: none; }
html.theme-dark body.app .sidebar-toggler img.svg-icon { filter: invert(1); }
body.app h1, body.app h2, body.app h3,
body.app .card-title {
font-family: var(--sf-font-display, Georgia, serif);
font-weight: 600;
color: var(--p-heading);
letter-spacing: -0.01em;
}
body.app h1 { font-size: 1.9rem; }
body.app h2 { font-size: 1.45rem; }
body.app h3 { font-size: 1.2rem; }
body.app h4, body.app h5, body.app h6 {
font-family: var(--sf-font-body, sans-serif);
font-weight: 700;
color: var(--p-heading);
}
body.app p, body.app label { color: var(--p-text); }
body.app .text-muted, body.app small.text-muted { color: var(--p-muted) !important; }
body.app .breadcrumb {
background: transparent;
padding-left: 0;
font-size: 0.85rem;
color: var(--p-muted);
}
body.app .breadcrumb a { color: var(--p-muted); }
body.app .breadcrumb a:hover { color: var(--p-accent); }
body.app .breadcrumb .active { color: var(--p-muted); }
/* ---------- Kaarten ---------- */
body.app .card {
background: var(--p-surface);
border: 1px solid var(--p-line);
border-radius: 8px;
box-shadow: none;
color: var(--p-text);
}
body.app .card-header {
background: transparent;
border-bottom: 1px solid var(--p-line);
font-weight: 700;
color: var(--p-heading);
}
body.app .card-body { color: var(--p-text); }
body.app .list-group-item {
background: var(--p-surface);
border-color: var(--p-line);
color: var(--p-text);
}
/* ---------- Tabellen ---------- */
body.app .table { color: var(--p-text); border-color: var(--p-line); }
/* Kop en voet krijgen dezelfde opmaak. DataTables herhaalt de kolomnamen onderaan;
die stonden in gewone schrijfwijze en een maat groter dan de kop. */
body.app .table thead th,
body.app .table tfoot th,
body.app .table tfoot td {
background-color: var(--p-thead);
border-top: 0;
border-bottom: 1px solid var(--p-line);
color: var(--p-heading);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.app .table tfoot th,
body.app .table tfoot td {
border-top: 1px solid var(--p-line);
border-bottom: 0;
}
/* De band loopt door tot de rand van de kaart en volgt daar de ronding. */
body.app .table thead tr:first-child th:first-child { border-top-left-radius: 8px; }
body.app .table thead tr:first-child th:last-child { border-top-right-radius: 8px; }
body.app .table tfoot tr:last-child th:first-child,
body.app .table tfoot tr:last-child td:first-child { border-bottom-left-radius: 8px; }
body.app .table tfoot tr:last-child th:last-child,
body.app .table tfoot tr:last-child td:last-child { border-bottom-right-radius: 8px; }
/* Meer lucht links van de eerste kolom. Op alle rijen tegelijk, anders meet
DataTables de kolombreedte aan de body en lopen kop en kolommen uit elkaar. */
/* !important is hier nodig, niet cosmetisch: blue-bundle zet
".table thead th { padding: .2rem !important }", wat ook de linkerpadding raakt.
Zonder deze regel begint de kopregel 3px van de rand en de rij eronder op 22px. */
html body.app .table thead th:first-child,
html body.app :is(#crudTable, .crud-table) thead th:first-child,
html body.app table.dataTable.fixedHeader-floating thead th:first-child,
html body.app table.dataTable.fixedHeader-locked thead th:first-child { padding-left: 1.4rem !important; }
body.app .table tfoot th:first-child,
body.app .table tfoot td:first-child,
body.app .table tbody td:first-child,
body.app .table tbody th:first-child { padding-left: 1.4rem; }
body.app .table td, body.app .table th { border-color: var(--p-line-soft); }
body.app .table-striped tbody tr:nth-of-type(odd) { background-color: var(--p-surface-2); }
body.app .table-hover tbody tr:hover { background-color: var(--p-accent-soft); color: var(--p-text); }
/* De tabel kreeg van Backpack de Bootstrap-klasse .rounded, oftewel 4px, terwijl
de kop- en voetcellen hierboven op 8px staan. In de vier hoeken keek de witte
tabelachtergrond daardoor onder de gekleurde band uit. Dezelfde ronding op de
tabel zelf knipt die achtergrond op precies dezelfde plek af. */
/* !important is hier nodig, niet cosmetisch: Bootstrap zet .rounded zelf al op
!important, en die klasse staat in de lijstweergave op de tabel. */
body.app :is(#crudTable_wrapper, .dt-container) table,
body.app :is(#crudTable_wrapper, .dt-container) table.rounded { border-radius: 8px !important; }
/* Met border-collapse (blue-bundle zet dat met !important) kan de eigen rand van de tabel
de ronding niet volgen: de kopcellen waren rond, de buitenrand bleef vierkant. Met
gescheiden randen volgt de 1px-rand wel de hoeken. Alleen voor de datatables, zodat
andere tabellen in het paneel niet veranderen. */
body.app :is(#crudTable_wrapper, .dt-container) table {
border-collapse: separate !important;
border-spacing: 0;
}
/* Bij scrollen zijn kop en inhoud twee tabellen onder elkaar: de kop houdt alleen de
bovenhoeken en geen onderrand, de inhoud alleen de onderhoeken en geen bovenrand,
anders ontstaan er inkepingen en een dubbele lijn op de naad. De verborgen kop in de
scrollbody (alleen voor kolombreedtes) krijgt geen randen. */
body.app :is(.dataTables_scrollHead, .dt-scroll-head) table {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom: 0 !important;
}
body.app :is(.dataTables_scrollBody, .dt-scroll-body) table {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-top: 0 !important;
}
body.app :is(.dataTables_scrollBody, .dt-scroll-body) table thead th,
body.app :is(.dataTables_scrollBody, .dt-scroll-body) table thead td { border: 0 !important; }
body.app :is(#crudTable_wrapper, .dt-container) table { background: var(--p-surface) !important; color: var(--p-text); }
body.app table.dataTable.fixedHeader-floating,
body.app table.dataTable.fixedHeader-locked {
background-color: var(--p-thead) !important;
color: var(--p-text);
}
body.app table.dataTable.fixedHeader-floating thead th,
body.app table.dataTable.fixedHeader-locked thead th {
background-color: var(--p-thead) !important;
color: var(--p-heading);
}
body.app :is(.dataTables_wrapper, .dt-container) :is(.dataTables_info, .dt-info),
body.app :is(.dataTables_wrapper, .dt-container) :is(.dataTables_length, .dt-length),
body.app :is(.dataTables_wrapper, .dt-container) :is(.dataTables_paginate, .dt-paging) { color: var(--p-muted); }
/* ---------- Lijstpagina's (CRUD) ----------
De bestellingenlijst heeft achttien kolommen vol bedieningselementen. Zonder
deze regels vechten knoppen, schakelaars, keuzelijsten en invoervelden allemaal
om aandacht, en springen rijen in hoogte door afbeeldingen zonder maximum. */
/* De regel "Toon 1 tot 39 van 39 items" staat als in een en erfde
daardoor de serif van de koppen. */
body.app :is(#datatable_info_stack, [id^=datatable_info_stack_]),
body.app :is(#datatable_info_stack, [id^=datatable_info_stack_]) *,
body.app h2 small {
font-family: var(--sf-font-body, sans-serif) !important;
font-weight: 400;
font-size: 0.85rem;
letter-spacing: 0;
color: var(--p-muted);
text-transform: none;
}
body.app :is(#datatable_info_stack, [id^=datatable_info_stack_]) a { color: var(--p-accent); margin-left: 6px; }
/* Miniaturen met aantal. Het getal stond als losse regel boven de afbeelding, wat
de rijen ongelijk maakte en de kolom rafelig. Het is nu een badge in de hoek. */
body.app .thumb-row {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
}
body.app .thumb {
position: relative;
display: inline-block;
line-height: 0;
flex: 0 0 auto;
}
body.app .thumb img {
height: 30px !important;
width: 30px !important;
object-fit: contain;
border-radius: 4px;
display: block;
background: var(--p-surface-2);
}
body.app .thumb .thumb-count {
position: absolute;
top: -7px;
right: -7px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var(--p-action);
color: var(--p-on-accent);
font-size: 10px;
font-weight: 700;
line-height: 17px;
text-align: center;
box-shadow: 0 0 0 2px var(--p-surface);
}
/* Bijschrift onder een borduursel: niet breder dan de thumbnail (30px), afgekapt met
puntjes. Bij hover blijft het gewoon staan, anders verspringt de rij; de volledige
naam staat in de title van de thumbnail en verschijnt als tooltip. De vergroting
zelf (8x) komt uit blue-bundle. */
body.app .thumb .thumb-caption {
display: block;
max-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 9px;
line-height: 1.1;
color: var(--p-muted);
margin-top: 2px;
}
/* Bij hover over de thumbnail: de volledige naam als label onderin de 8x-vergroting.
Een pseudo-element uit de title van de thumbnail, absoluut gepositioneerd, zodat het
bijschrift in de rij zelf blijft staan en niets verspringt. */
body.app .thumb:has(.thumb-caption):hover { z-index: 10002; }
body.app .thumb:has(.thumb-caption):hover::after {
content: attr(title);
position: absolute;
left: 0;
top: calc(30px * 8 - 26px);
max-width: calc(30px * 8);
box-sizing: border-box;
padding: 4px 8px;
background: rgba(27, 22, 17, .85);
color: #fff;
border-radius: 0 6px 0 0;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 10003;
pointer-events: none;
}
/* Statuskolommen even breed, zodat de drie kolommen onder elkaar uitlijnen. */
body.app :is(#crudTable, .crud-table) .custom-dropdown {
display: flex !important;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 116px;
padding: 7px 14px !important;
border-radius: 999px !important;
font-size: 0.78rem;
line-height: 1.2;
}
/* Nog geen status gekozen. Dit is een leeg veld, geen actie: het staat in drie
kolommen naast elkaar en op elke rij, dus het moet zich gedragen als rustige
achtergrondinformatie. De accentkleur bleef daardoor te hard en vulde het scherm;
de onderbroken rand en de chevron zeggen al genoeg dat er iets te kiezen valt.
Het accent verschijnt pas onder de muis. */
body.app :is(#crudTable, .crud-table) .custom-dropdown.is-empty {
background-color: transparent !important;
color: var(--p-muted) !important;
border: 1px dashed var(--p-line);
font-weight: 500;
font-style: normal;
}
body.app :is(#crudTable, .crud-table) .custom-dropdown.is-empty::after { opacity: .45; }
body.app :is(#crudTable, .crud-table) .custom-dropdown.is-empty:hover {
background-color: var(--p-accent-soft) !important;
border-color: var(--p-accent);
border-style: solid;
color: var(--p-accent) !important;
}
body.app :is(#crudTable, .crud-table) .custom-dropdown.is-empty:hover::after { opacity: .9; }
body.app :is(#crudTable, .crud-table) .custom-dropdown:not(.dropdown-disabled)::after {
content: '';
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: .7;
flex: 0 0 auto;
}
/* De keuzelijst viel achter de meescrollende kopregel. Die kop staat op z-index 2;
de cel met een open lijst gaat daar bewust boven. */
body.app :is(#crudTable, .crud-table) td:has(.dropdown-content.show) {
position: relative;
z-index: 6;
}
body.app :is(#crudTable, .crud-table) .dropdown-content {
z-index: 7;
border-radius: 10px;
border: 1px solid var(--p-line);
background: var(--p-surface);
box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .45);
/* Scrollen in plaats van afknippen: met veel statussen vielen de onderste weg. */
overflow-x: hidden;
overflow-y: auto;
/* De knop is een flexcontainer met align-items:center; zonder top kwam de lijst
verticaal gecentreerd óp de knop te staan in plaats van eronder. */
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
margin-top: 0;
padding: 8px;
cursor: default;
font-style: normal;
}
body.app :is(#crudTable, .crud-table) .dropdown-content .dropdown-grid { padding: 0; gap: 6px; }
/* De keuzes in dezelfde pill-stijl als de knop in de lijst. */
body.app :is(#crudTable, .crud-table) .dropdown-option {
display: flex;
align-items: center;
justify-content: center;
min-width: 116px;
margin: 0;
padding: 7px 14px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
body.app :is(#crudTable, .crud-table) .dropdown-option > div { gap: 6px; width: 100%; justify-content: center !important; min-width: 0; }
/* Lange statusnamen ("Proev(en) Verstuurd", "Werkbon Al gemaakt") liepen buiten de pill.
De pills in het raster zijn even breed; de tekst wordt afgekapt met puntjes en de
volledige naam staat in de title. Het opmerking-icoon blijft altijd zichtbaar. */
body.app :is(#crudTable, .crud-table) .dropdown-option { max-width: 100%; min-width: 0; }
body.app :is(#crudTable, .crud-table) .dropdown-option-label,
body.app :is(#crudTable, .crud-table) .custom-dropdown .dropdown-label {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.app :is(#crudTable, .crud-table) .status-option-comment-btn { flex: 0 0 auto; }
body.app :is(#crudTable, .crud-table) .dropdown-option-null {
background-color: transparent !important;
border: 1px dashed var(--p-line);
color: var(--p-muted) !important;
font-style: normal !important;
font-weight: 500;
}
body.app :is(#crudTable, .crud-table) .dropdown-option-null:hover {
opacity: 1;
background-color: var(--p-accent-soft) !important;
border-color: var(--p-accent);
border-style: solid;
color: var(--p-accent) !important;
}
body.app :is(#crudTable, .crud-table) .dropdown-content a { display: block; text-align: center; }
/* Kolommen met alleen een schakelaar of pictogram: gecentreerd onder hun kop. */
body.app :is(#crudTable, .crud-table) td .switch,
body.app :is(#crudTable, .crud-table) td > .la,
body.app :is(#crudTable, .crud-table) td > a > .la { display: inline-block; }
/* De referentiekolom stapelt referentie, omschrijving en herkomst onder elkaar.
Alles blijft staan, maar de vervolgregels zijn kleiner en gedempt: dat scheelt
hoogte en zet meteen de referentie zelf vooraan. */
body.app :is(#crudTable, .crud-table) td small {
line-height: 1.3;
font-size: 0.78rem;
display: inline-block;
color: var(--p-muted);
}
body.app :is(#crudTable, .crud-table) td small strong a { font-size: 0.86rem; color: var(--p-accent); }
body.app :is(#crudTable, .crud-table) td small a { color: var(--p-muted); }
body.app :is(#crudTable, .crud-table) td small strong { color: var(--p-accent); }
/* Sorteerpijlen op een vaste plek in plaats van achter de tekst aan */
body.app :is(#crudTable, .crud-table) thead th { white-space: nowrap; }
/* Rijen even hoog: afbeeldingen krijgen een maximum en alles staat verticaal
gecentreerd in plaats van boven. */
body.app :is(#crudTable, .crud-table) tbody td,
body.app :is(#crudTable, .crud-table) tbody th { vertical-align: middle; }
body.app :is(#crudTable, .crud-table) tbody img {
max-height: 34px;
width: auto;
border-radius: 3px;
display: inline-block;
}
body.app :is(#crudTable, .crud-table) tbody td > * { vertical-align: middle; }
/* Bedieningselementen in de tabel: compact en rustig. Ze mogen pas opvallen als
je erop staat, anders leest de tabel als een formulier in plaats van een lijst. */
body.app :is(#crudTable, .crud-table) .btn {
padding: 6px 12px;
font-size: 0.74rem;
letter-spacing: 0.04em;
white-space: nowrap;
}
body.app :is(#crudTable, .crud-table) .btn-secondary {
background: transparent;
border-color: var(--p-line);
color: var(--p-muted);
}
body.app :is(#crudTable, .crud-table) .btn-secondary:hover {
background: var(--p-accent-soft);
border-color: var(--p-accent);
color: var(--p-accent);
}
body.app :is(#crudTable, .crud-table) .form-control,
body.app :is(#crudTable, .crud-table) select,
body.app :is(#crudTable, .crud-table) input[type="text"] {
padding: 4px 8px;
height: auto;
font-size: 0.85rem;
background: transparent;
border-color: transparent;
border-radius: 4px;
min-width: 60px;
}
body.app :is(#crudTable, .crud-table) tr:hover .form-control,
body.app :is(#crudTable, .crud-table) .form-control:hover,
body.app :is(#crudTable, .crud-table) .form-control:focus,
body.app :is(#crudTable, .crud-table) select:hover,
body.app :is(#crudTable, .crud-table) select:focus {
background: var(--p-surface);
border-color: var(--p-line);
}
/* Datums en getallen rustig uitlijnen */
body.app :is(#crudTable, .crud-table) .text-danger { font-weight: 700; }
/* Kopregel blijft staan bij lange lijsten */
body.app :is(#crudTable, .crud-table) thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--p-thead);
}
/* Badges: één vorm, rustige kleuren */
body.app .badge {
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
}
body.app .badge-secondary { background: var(--p-surface-2); color: var(--p-muted); border: 1px solid var(--p-line); }
body.app .badge-info { background: var(--p-accent-soft); color: var(--p-accent); border: 1px solid transparent; }
/* ---------- Filterbalk ----------
De regel hieronder stond op .backpack-filter, maar Backpack zet de balk zelf neer
als .navbar-filters; de filters bleven daardoor in het blauwgrijs van CoreUI
staan terwijl de rest van het paneel al bruin was. */
body.app .navbar-filters {
padding: 0;
margin-bottom: 6px;
gap: 2px;
}
body.app .navbar-filters .nav { gap: 2px; }
body.app .navbar-filters .nav-item > .nav-link,
body.app .navbar-filters .nav-link,
body.app .navbar-filters .dropdown-toggle {
color: var(--p-muted);
font-family: var(--sf-font-body, sans-serif);
font-size: 0.82rem;
font-weight: 600;
padding: 7px 12px;
border-radius: 999px;
transition: background-color .15s ease, color .15s ease;
}
body.app .navbar-filters .nav-link:hover,
body.app .navbar-filters .nav-link:focus {
color: var(--p-heading);
background: var(--p-surface-2);
}
/* Een filter dat aanstaat krijgt dezelfde zachte accentpil als elders in het
paneel, zodat je in één oogopslag ziet waarop de lijst is ingeperkt. */
body.app .navbar-filters li.active > .nav-link,
body.app .navbar-filters li.active > .dropdown > .nav-link {
color: var(--p-accent);
background: var(--p-accent-soft);
}
body.app .navbar-filters .nav-item > span.la,
body.app .navbar-filters > a.nav-item {
color: var(--p-muted);
opacity: .75;
padding-right: 4px;
}
body.app .navbar-filters .nav-link i,
body.app .navbar-filters .nav-link .la { margin-right: 5px; opacity: .8; }
/* Het gum-pictogram zit niet in deze versie van Line Awesome en kwam als een leeg
ruitje in beeld; de tekst zegt het al. */
body.app .navbar-filters :is(#remove_filters_button, .remove_filters_button) i.la-eraser { display: none; }
body.app .navbar-filters :is(#remove_filters_button, .remove_filters_button) { color: var(--p-muted); }
body.app .navbar-filters :is(#remove_filters_button, .remove_filters_button):hover { color: var(--p-danger); background: rgba(178, 58, 58, .08); }
body.app .navbar-filters .navbar-toggler {
color: var(--p-heading);
border-color: var(--p-line);
border-radius: 999px;
}
/* De knoppen boven de lijst stonden tegen elkaar aan. Een flexrij met gap houdt ze
uit elkaar en laat ze netjes afbreken op smalle schermen. */
body.app .main .d-print-none.with-border,
body.app .main .row > .col-sm-6 > .d-print-none {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
border: 0;
padding: 0;
margin-bottom: 4px;
}
body.app .main .d-print-none .btn { margin: 0; }
body.app .main .d-print-none .btn-group { margin: 0; }
/* Zoekveld en knoppenrij op één hoogte */
body.app :is(#datatable_search_stack, [id^=datatable_search_stack_]) .form-control { min-width: 220px; }
/* ---------- Knoppen ---------- */
body.app .btn {
border-radius: 999px;
font-weight: 500;
letter-spacing: 0.02em;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
body.app .btn-primary,
body.app .btn-primary:not(:disabled):not(.disabled):active {
background-color: var(--p-action);
border-color: var(--p-action);
color: var(--p-on-accent);
}
body.app .btn-primary:hover, body.app .btn-primary:focus {
background-color: var(--p-action-strong);
border-color: var(--p-action-strong);
color: var(--p-on-accent);
box-shadow: none;
}
body.app .btn-outline-primary { color: var(--p-accent); border-color: var(--p-accent); background: transparent; }
/* Alleen de hover-staat was hier gezet, de ruststaat kwam uit blue-bundle: in het
lichte thema een vrijwel onzichtbare knop (de Logs-knop bij een bestelling). */
body.app .btn-outline-primary {
background: transparent;
border-color: var(--p-accent);
color: var(--p-accent);
}
body.app .btn-outline-primary:hover { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }
body.app .btn-link {
color: var(--p-accent);
text-decoration: none;
}
body.app .btn-link:hover { color: var(--p-accent-strong); text-decoration: underline; }
body.app .btn-secondary {
background: var(--p-surface-2);
border-color: var(--p-line);
color: var(--p-heading);
}
body.app .btn-secondary:hover { background: var(--p-line-soft); border-color: var(--p-line); color: var(--p-heading); }
body.app .btn-success { background: var(--p-success); border-color: var(--p-success); color: #fff; }
body.app .btn-danger { background: var(--p-danger); border-color: var(--p-danger); color: #fff; }
body.app .btn-link { color: var(--p-accent); }
/* Alleen binnen het hoofdvlak: deze selector heeft door de vier :not()'s een hoge
specificiteit en kleurde anders ook de pills in de navbar (donkerblauwe tekst op de
inktkleurige offerte-pill, contrast 1.4). */
body.app .main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color: var(--p-accent); }
body.app .main a:not(.btn):hover { color: var(--p-accent-strong); }
body.app .text-primary { color: var(--p-accent) !important; }
body.app .bg-primary { background-color: var(--p-action) !important; }
body.app .badge-primary { background-color: var(--p-action); color: var(--p-on-accent); }
body.app .badge-success { background-color: var(--p-success); color: #fff; }
body.app .badge-danger { background-color: var(--p-danger); color: #fff; }
/* Bootstrap-hulpklassen die anders hun eigen wit of zwart meenemen */
body.app .bg-white { background-color: var(--p-surface) !important; color: var(--p-text); }
body.app .bg-light { background-color: var(--p-surface-2) !important; color: var(--p-text); }
body.app .text-dark { color: var(--p-heading) !important; }
body.app .border-light { border-color: var(--p-line) !important; }
/* ---------- Formulieren ---------- */
body.app .form-control,
body.app .custom-select,
body.app :is(.dataTables_wrapper, .dt-container) :is(.dataTables_filter, .datatable_search_stack) input,
body.app :is(.dataTables_wrapper, .dt-container) :is(.dataTables_length, .dt-length) select {
background: var(--p-surface);
border: 1px solid var(--p-line);
border-radius: 6px;
color: var(--p-heading);
}
body.app .form-control::placeholder { color: var(--p-muted); }
body.app .form-control:focus,
body.app :is(.dataTables_wrapper, .dt-container) :is(.dataTables_filter, .datatable_search_stack) input:focus {
background: var(--p-surface);
border-color: var(--p-accent);
box-shadow: 0 0 0 3px var(--p-accent-soft);
color: var(--p-heading);
outline: 0;
}
body.app select option { background: var(--p-surface); color: var(--p-heading); }
body.app .input-group-text { background: var(--p-surface-2); border-color: var(--p-line); color: var(--p-muted); }
body.app .nav-tabs { border-bottom-color: var(--p-line); }
body.app .nav-tabs .nav-link { color: var(--p-muted); border-color: transparent; }
body.app .nav-tabs .nav-link.active,
body.app .nav-tabs .nav-item.show .nav-link {
color: var(--p-accent);
background: var(--p-surface);
border-color: var(--p-line) var(--p-line) var(--p-surface);
}
body.app .tab-content { background: var(--p-surface); color: var(--p-text); }
body.app .modal-content { background: var(--p-surface); color: var(--p-text); border-color: var(--p-line); }
body.app .modal-header, body.app .modal-footer { border-color: var(--p-line); }
body.app .dropdown-menu { background: var(--p-surface); border-color: var(--p-line); }
body.app .dropdown-item { color: var(--p-text); }
body.app .dropdown-item:hover { background: var(--p-accent-soft); color: var(--p-accent); }
body.app .dropdown-header { color: var(--p-muted); }
body.app .dropdown-divider { border-color: var(--p-line); }
/* ---------- Paginering ---------- */
body.app .page-link { color: var(--p-accent); background: var(--p-surface); border-color: var(--p-line); }
body.app .page-item.active .page-link { background-color: var(--p-action); border-color: var(--p-action); color: var(--p-on-accent); }
body.app .page-item.disabled .page-link { color: var(--p-muted); background: var(--p-surface-2); }
/* ---------- Schakelaars rechtsboven ----------
Waren twee zwarte blokken met filter:invert. Nu twee rustige ronde knoppen
die met de rest van het paneel meekleuren. */
/* Deze twee zweven met float:right mee op de regel van de inklapknop. Die knop is
nu een blok (anders werkt zijn ondermarge niet), waardoor ze een regel zakten.
Vast in de rechterbovenhoek van het hoofdvlak houdt ze waar ze stonden. */
body.app .main { position: relative; }
body.app #theme-toggle,
body.app #maximize-toggle {
position: absolute;
top: 10px;
filter: none !important;
width: 36px;
height: 36px;
padding: 0 !important;
margin: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px !important;
background: var(--p-surface) !important;
border: 1px solid var(--p-line) !important;
color: var(--p-muted);
font-size: 15px;
line-height: 1;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.app #theme-toggle { right: 24px; }
body.app #maximize-toggle { right: 66px; }
/* Boven de inhoud: de paginakop (.header-operation, met fade-in) kwam er anders
overheen te liggen zodra de inklapknop bovenin wegviel, en dan was er niets
meer aan te klikken. */
body.app #theme-toggle,
body.app #maximize-toggle { z-index: 30; }
body.app #theme-toggle:hover,
body.app #maximize-toggle:hover {
background: var(--p-accent) !important;
border-color: var(--p-accent) !important;
color: var(--p-on-accent);
}
/* ---------- Meldingen-bel in de navbar ---------- */
body.app .nav-tools .notifications .nav-link {
color: var(--p-heading);
font-size: 20px;
padding: 8px 10px;
position: relative;
}
body.app .nav-tools .notification-badge {
position: absolute;
top: 0;
right: 0;
font-size: 11px;
padding: 3px 6px;
border-radius: 10px;
background: var(--p-danger);
color: #fff;
}
/* ---------- Dashboard: kop en welkomsttekst ----------
De twee kolommen begonnen op verschillende hoogtes: links een losse
voor
de titel en een negatieve marge onder de bedrijfsnaam, rechts een italic
die met
-tags op zijn plek werd gehouden. Nu bepaalt deze regel de ruimte
en starten beide kolommen op dezelfde lijn. */
/* Twee Bootstrap-kolommen van elk de helft: de naam vult daar een derde van, dus
de welkomsttekst begon pas halverwege het scherm en liet links een gat staan. Een
raster met een smalle naamkolom zet de tekst een stuk naar links; de leesbreedte
van de alinea's wordt daarna door .dashboard-intro begrensd, niet door de kolom. */
body.app .dashboard-top {
display: grid;
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
gap: 40px;
align-items: start;
margin: 4px 0 28px;
/* .row brengt negatieve marges mee die in een raster niets meer opheffen */
margin-left: 0;
margin-right: 0;
}
body.app .dashboard-top > [class*="col-"] {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: none;
width: auto;
max-width: none;
padding-left: 0;
padding-right: 0;
}
@media (max-width: 767.98px) {
body.app .dashboard-top {
grid-template-columns: 1fr;
gap: 18px;
}
}
body.app .dashboard-top h1 {
margin: 0;
line-height: 1.15;
}
body.app .dashboard-eyebrow {
display: block;
font-family: var(--sf-font-body, sans-serif);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0;
color: var(--p-muted);
margin-bottom: 2px;
}
body.app .dashboard-company {
margin: 4px 0 0;
font-size: 1.2rem;
color: var(--p-muted);
}
body.app .dashboard-intro {
/* Een leesbreedte blijft nodig, want de kolom is bijna het hele scherm. Maar 72
tekens liet rechts te veel leeg; op 110 loopt de alinea door tot ongeveer waar
de tweede kaart eronder begint. */
max-width: 110ch;
margin: 0;
color: var(--p-text);
font-size: 0.95rem;
line-height: 1.6;
}
body.app .dashboard-intro p { margin: 0 0 10px; }
body.app .dashboard-intro p:last-child { margin-bottom: 0; color: var(--p-muted); }
/* Op het dashboard is de kaarttitel en staat eronder in de tekst. Met h3
op 1.2rem in de displayletter en h4 op de standaardmaat schreefloos stond de
ondertitel groter dan de kop erboven. Alleen hier omgedraaid; in de CRUD's houden
h3 en h4 hun eigen betekenis. */
body.app .sf-dashboard .card-body h4 {
font-family: var(--sf-font-display, Georgia, serif);
font-weight: 600;
font-size: 1.25rem;
letter-spacing: -0.01em;
margin: 0 0 6px;
}
body.app .sf-dashboard .card-body h3 {
font-family: var(--sf-font-body, sans-serif);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--p-muted);
margin: 20px 0 8px;
}
body.app .dashboard-shoplink {
margin: 4px 0 0;
font-size: 1rem;
color: var(--p-text);
}
body.app .dashboard-shoplink img { height: 22px; width: auto; margin-bottom: 6px; }
/* Kortingspercentage: stond op de CSS-kleurnaam green, buiten het palet om. */
body.app .dashboard-figure {
margin: 4px 0 18px;
font-size: 1.6rem;
color: var(--p-success);
}
/* Documenten stonden achter elkaar op een regel. */
body.app .dashboard-files {
list-style: none;
margin: 8px 0 0;
padding: 0;
}
body.app .dashboard-files li {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
}
body.app .dashboard-files svg { flex: 0 0 auto; color: var(--p-muted); }
/* ---------- Dashboard: actietegels ----------
Dit waren .btn-elementen met inline padding. Met de pill-radius van de gewone
knoppen werden dat grote ovalen. Nu zijn het echte tegels: vaste rij, icoon
boven, twee regels tekst, en een duidelijke hoofdregel. */
body.app .sf-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 220px));
gap: 16px;
margin-top: 4px;
}
body.app .sf-action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 20px 22px 22px;
border-radius: 10px;
background: var(--p-action);
border: 1px solid var(--p-action);
color: var(--p-on-accent) !important;
text-decoration: none !important;
line-height: 1.3;
transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.app .sf-action i {
font-size: 30px;
line-height: 1;
margin-bottom: 14px;
opacity: 0.85;
}
body.app .sf-action__lead {
font-size: 0.86rem;
opacity: 0.8;
}
body.app .sf-action__title {
font-weight: 700;
font-size: 1.02rem;
}
body.app .sf-action:hover,
body.app .sf-action:focus-visible {
background: var(--p-action-strong);
border-color: var(--p-action-strong);
color: var(--p-on-accent) !important;
transform: translateY(-2px);
box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.6);
}
/* Terugkijken is secundair aan bestellen: rustige tegel met een rand */
body.app .sf-actions--quiet .sf-action {
background: var(--p-surface-2);
border-color: var(--p-line);
color: var(--p-heading) !important;
}
body.app .sf-actions--quiet .sf-action i { opacity: 0.6; }
body.app .sf-actions--quiet .sf-action:hover,
body.app .sf-actions--quiet .sf-action:focus-visible {
background: var(--p-accent-soft);
border-color: var(--p-accent);
color: var(--p-accent) !important;
}
@media (max-width: 575px) {
body.app .sf-actions { grid-template-columns: 1fr; }
}
/* Alle meldingskaders in het paneel dezelfde ronding als de kaarten. */
body.app .alert {
border-radius: 12px;
border: 1px solid var(--p-line);
padding: 14px 18px;
color: var(--p-text);
}
body.app .alert-info { background: var(--p-accent-soft); }
body.app .alert-success { background: rgba(63, 125, 78, 0.12); border-color: rgba(63, 125, 78, 0.32); }
body.app .alert-warning { background: rgba(255, 208, 0, 0.14); border-color: rgba(171, 143, 73, 0.40); }
body.app .alert-danger { background: rgba(178, 58, 58, 0.12); border-color: rgba(178, 58, 58, 0.32); }
/* ---------- Volledig scherm (knop rechtsboven, body.maximize) ----------
De zijbalk is dan al ingeklapt; de inklapknop erbij tonen is dubbelop en nam
bovenin een hele regel in. Minder rand rondom, zodat de tabel de breedte benut. */
body.app.maximize .main .sidebar-toggler.navbar-toggler { display: none !important; }
/* De kop met titel en zoekveld begint bovenaan; rechts ruimte vrijhouden voor de twee
knoppen, zodat die er niet onder verdwijnen. */
body.app.maximize .main .header-operation { padding-right: 100px; }
/* blue-bundle schoof de tabel bij een ingeklapte zijbalk 30px naar links
("body:not(.sidebar-lg-show) .dt-scroll { margin-left: -30px }"), een oude
correctie voor de vorige layout. Hier geeft dat een lege strook rechts. */
body.app:not(.sidebar-lg-show) :is(.dataTables_scroll, .dt-scroll) { margin-left: 0 !important; margin-right: 0 !important; }
body.app.maximize .main > .container-fluid { padding-left: 16px; padding-right: 16px; }
body.app.maximize .main h1 { font-size: 1.5rem; margin-bottom: .25rem; }
body.app.maximize .breadcrumb { display: none; }
body.app.maximize .main .container-fluid > .row:first-child { margin-top: 0 !important; }
body.app.maximize :is(#crudTable_wrapper, .dt-container) .dt-layout-table.mt-2 { margin-top: .25rem !important; }
/* ---------- Opmerkingenkolom ----------
De knop had de ruime padding van een gewone knop, waardoor het icoon ver van de
kolomkop stond; het tellertje hangt nu onderaan over het icoon. */
body.app .table td .js-comments-open {
padding: 4px 6px !important;
margin: 0;
line-height: 1;
}
body.app .table td .js-comments-open .comments-badge {
top: auto !important;
bottom: -4px !important;
right: -2px !important;
padding: 1px 4px !important;
min-width: 16px !important;
line-height: 14px;
}
/* ---------- Ref-kolom ----------
Een lange klantreferentie trok de kolom breed en brak de rest; nu een vaste
maximumbreedte, de klantreferentie afgekapt met puntjes (volledig in de title). */
body.app .table td .order-refs { display: block; max-width: 170px; line-height: 1.35; }
body.app .table td .order-refs__your {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}