[data-theme="custom"], :root{
	--primary-color-hue: 216;
	--primary-color-saturation: 42%;
	--primary-color-lightness: 25%;
	--banner-background: url(https://vellinga.shoes/img/cms/Mobiel%20formaat/Krycnerova-Photography_LR_004%20(2)%20(1).jpg);
}

.login-page {
	--login-background: rgba(0, 0, 0, 0.4) url("https://vellinga.shoes/img/p/6/6/66.jpg");
--login-logo: url("https://vellinga.shoes/img/logo-1772532953.jpg"); /* for relative path, must be relative to the css file or use full url starting by http:// */
}
/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS */
/* ========================================================================= * Vellinga - Klantportaal (Dolibarr Web Portal) - huisstijl * * Bronnen huisstijl: * - https://www.vellinga.frl/ (Montserrat/Poppins/Inter) * - https://vellinga.shoes/ (Montserrat/Ubuntu/Inter, rood #C51818) * * Plaatsing in Dolibarr: * Setup -> WebPortaal -> "Aangepaste CSS URL" (WEBPORTAL_CSS_URL) * * Filosofie: * Rood is alleen voor de banner en de hoofd-CTA. Topmenu, tabellen, * randen en sub-knoppen zijn neutraal grijs/wit, zodat het rustig blijft * en alle modules er identiek uitzien. * ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap"); :root { /* Merkkleuren */ --vellinga-red: #C51818; --vellinga-red-dark: #9E0F0F; --vellinga-red-hover: #B01515; /* Neutralen */ --vellinga-bg: #F6F6F6; --vellinga-surface: #FFFFFF; --vellinga-text: #1A1A1A; --vellinga-text-muted: #54595F; --vellinga-border: #E2E2E2; --vellinga-border-soft:#EFEFEF; --vellinga-thead-bg: #F0F0F0; --vellinga-thead-text: #1A1A1A; --vellinga-row-hover: #FAFAFA; /* Status */ --vellinga-ok: #1E8E3E; --vellinga-warn: #C97A00; --vellinga-warn-bg: #FFF6E5; --vellinga-err: var(--vellinga-red); --vellinga-err-bg: #FDECEC; /* Vorm */ --vellinga-radius: 6px; --vellinga-radius-lg: 10px; --vellinga-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); --vellinga-shadow-hover: 0 4px 8px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.06); --vellinga-portal-stack-bp: 64rem; --vellinga-portal-stack-bp-wide: 75rem; /* Typografie */ --vellinga-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --vellinga-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---------- Basis ---------- */ body, body.bodyforpublicportallogin, body.bodyforpublicportal, .webportal-page, .webportal-content { font-family: var(--vellinga-font-body); color: var(--vellinga-text); background-color: var(--vellinga-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, .titre, .fichetitle { font-family: var(--vellinga-font-heading); font-weight: 700; color: var(--vellinga-text); letter-spacing: -0.01em; } a { color: var(--vellinga-red); text-decoration: none; } a:hover, a:focus { color: var(--vellinga-red-dark); text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--vellinga-border); } /* ---------- Topnavigatie (rustig, geen rode hover-tekst) ---------- */ .header-portal, .header-nav, .navigation, .topnav, .public-portal-header { background: var(--vellinga-surface); border-bottom: 1px solid var(--vellinga-border); } .header-nav a, .navigation a, .topnav a, .public-portal-header a { color: var(--vellinga-text); font-family: var(--vellinga-font-heading); font-weight: 600; font-size: 0.95rem; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .header-nav a:hover, .navigation a:hover, .topnav a:hover, .public-portal-header a:hover { color: var(--vellinga-text); text-decoration: none; border-bottom-color: var(--vellinga-text-muted); } .header-nav a.active, .navigation a.active, .public-portal-header a.active { color: var(--vellinga-text); border-bottom-color: var(--vellinga-red); } /* ---------- Welkom-banner (de enige opvallend rode plek) ---------- */ .welcomebanner, .portal-welcome, .home-welcome, .home-page__welcome { background: linear-gradient(135deg, var(--vellinga-red) 0%, var(--vellinga-red-dark) 100%); color: var(--vellinga-surface); padding: 1rem 1.25rem; border-radius: var(--vellinga-radius); box-shadow: var(--vellinga-shadow); font-family: var(--vellinga-font-heading); font-weight: 600; } .welcomebanner h1, .welcomebanner h2, .portal-welcome h1, .portal-welcome h2 { color: var(--vellinga-surface); margin: 0; } /* ---------- Home-tegels ---------- */ .home-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; } .home-links-card { background: var(--vellinga-surface); border: 1px solid var(--vellinga-border); border-radius: var(--vellinga-radius-lg); box-shadow: var(--vellinga-shadow); padding: 1.25rem 1rem; min-height: 7rem; display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .home-links-card:hover { transform: translateY(-2px); box-shadow: var(--vellinga-shadow-hover); border-color: var(--vellinga-border); } .home-links-card__link { color: var(--vellinga-text); font-family: var(--vellinga-font-heading); font-weight: 600; font-size: 0.95rem; text-align: center; text-decoration: none; word-break: break-word; hyphens: auto; line-height: 1.3; } .home-links-card:hover .home-links-card__link { color: var(--vellinga-text); } /* ---------- Hero banner (native webportal) ---------- */ .hero-header { background: var(--vellinga-surface); border-bottom: 1px solid var(--vellinga-border-soft); margin-bottom: 1.25rem; } .hero-header__title { font-family: var(--vellinga-font-heading); font-weight: 700; font-size: 1.75rem; color: var(--vellinga-text); margin: 0 0 0.35rem; } .hero-header__desc { color: var(--vellinga-text-muted); font-size: 1rem; margin: 0; } main.container table[role="grid"] thead th a, main.container table[role="grid"] thead th a:hover { color: var(--vellinga-red); font-weight: 600; text-decoration: none; } main.container table[role="grid"] thead th a:hover { color: var(--vellinga-red-dark); text-decoration: underline; } /* ---------- Module-portals: content (hero = page title) ---------- */ .clothingreorder-portal-skin h1.page-title, .medewerkers-portal-skin h1.page-title, .inmeetscheduler-portal-skin h1.page-title { font-family: var(--vellinga-font-heading); font-weight: 700; font-size: 1.5rem; color: var(--vellinga-text); margin: 0.25rem 0 0.75rem; letter-spacing: -0.01em; } .clothingreorder-portal-skin h2, .clothingreorder-portal-skin h3, .medewerkers-portal-skin h2, .medewerkers-portal-skin h3, .inmeetscheduler-portal-skin h2, .inmeetscheduler-portal-skin h3, .inmeetscheduler-portal-skin .im-portal-section-title { font-family: var(--vellinga-font-heading); font-weight: 600; color: var(--vellinga-text); margin-top: 1.25rem; margin-bottom: 0.5rem; } .clothingreorder-portal-skin > main > p:first-of-type, .medewerkers-portal-skin .medewerkers-portal-intro, .inmeetscheduler-portal-skin .im-portal-intro, .inmeetscheduler-portal-skin .im-portal-company { color: var(--vellinga-text-muted); margin-bottom: 1rem; } /* ---------- Knoppen: rustig default, één rode CTA ---------- */ /* Default (neutraal wit/grijs) */ .button, .butAction, .butActionRefused, input[type="submit"].button, input[type="button"].button, button.button, button[type="submit"], button[type="button"]:not(.btn-filter-icon):not(.cr-cat-addline):not(.cr-cat-clearfilters):not(.cr-portal-toast-close) { background: var(--vellinga-surface); color: var(--vellinga-text) !important; -webkit-text-fill-color: var(--vellinga-text); border: 1px solid var(--vellinga-border); border-radius: var(--vellinga-radius); padding: 0.5rem 1rem; font-family: var(--vellinga-font-heading); font-weight: 600; font-size: 0.95rem; cursor: pointer; box-shadow: none; text-transform: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .button:hover, .butAction:hover, button[type="submit"]:hover, button[type="button"]:not(.btn-filter-icon):not(.cr-cat-addline):not(.cr-cat-clearfilters):not(.cr-portal-toast-close):hover, input[type="submit"]:hover { background: var(--vellinga-bg); border-color: var(--vellinga-text-muted); } /* Primair (rode CTA): expliciete classes + bekende submits */ .button-primary, .button.button-save, button.button-save, .butActionNew, input[type="submit"][name="save"], input[type="submit"][name="confirm_reorder"], input[type="submit"][name="savecreate"], input[type="submit"][name="addcontact"], input[type="submit"][name="savecontact"] { background: var(--vellinga-red); color: var(--vellinga-surface) !important; -webkit-text-fill-color: var(--vellinga-surface); border-color: var(--vellinga-red); } .button-primary:hover, .button.button-save:hover, button.button-save:hover, .butActionNew:hover, input[type="submit"][name="save"]:hover, input[type="submit"][name="confirm_reorder"]:hover, input[type="submit"][name="savecreate"]:hover, input[type="submit"][name="addcontact"]:hover, input[type="submit"][name="savecontact"]:hover { background: var(--vellinga-red-dark); border-color: var(--vellinga-red-dark); color: var(--vellinga-surface) !important; } /* Secundair / annuleren (incl. medewerkers .buttonrefused) */ .butActionDelete, .button.button-secondary, .button-cancel, button.cancel, a.buttonrefused, .buttonrefused { background: var(--vellinga-surface) !important; color: var(--vellinga-text) !important; -webkit-text-fill-color: var(--vellinga-text); border: 1px solid var(--vellinga-border) !important; border-radius: var(--vellinga-radius); padding: 0.5rem 1rem; font-family: var(--vellinga-font-heading); font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .butActionDelete:hover, .button.button-secondary:hover, .button-cancel:hover, button.cancel:hover, a.buttonrefused:hover, .buttonrefused:hover { background: var(--vellinga-bg) !important; color: var(--vellinga-text) !important; border-color: var(--vellinga-text-muted) !important; text-decoration: none; } /* Medewerkers: anchor-buttons (toevoegen / bewerken) */ .medewerkers-portal-skin a.button, .medewerkers-portal-skin a.button.medewerkers-portal-btn-edit { background: var(--vellinga-surface); color: var(--vellinga-text) !important; -webkit-text-fill-color: var(--vellinga-text); border: 1px solid var(--vellinga-border); border-radius: var(--vellinga-radius); padding: 0.5rem 1rem; font-family: var(--vellinga-font-heading); font-weight: 600; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .medewerkers-portal-skin a.button:hover, .medewerkers-portal-skin a.button.medewerkers-portal-btn-edit:hover { background: var(--vellinga-bg); border-color: var(--vellinga-text-muted); text-decoration: none; } /* De "Toevoegen"-knop in de medewerkers-toolbar als primaire CTA */ .medewerkers-portal-skin .medewerkers-portal-toolbar a.button { background: var(--vellinga-red); color: var(--vellinga-surface) !important; -webkit-text-fill-color: var(--vellinga-surface); border-color: var(--vellinga-red); } .medewerkers-portal-skin .medewerkers-portal-toolbar a.button:hover { background: var(--vellinga-red-dark); border-color: var(--vellinga-red-dark); } /* Catalogus-foto: geen generieke knopstijl op thumbnail-link */ .clothingreorder-portal-skin a.cr-cat-thumb, .clothingreorder-portal-skin button.cr-cat-thumb, .clothingreorder-portal-skin button.cr-cat-thumb[type="button"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0.2rem !important; color: inherit !important; -webkit-text-fill-color: unset !important; } .clothingreorder-portal-skin .cr-cat-thumb-img { display: block !important; opacity: 1 !important; visibility: visible !important; -webkit-text-fill-color: unset !important; } /* Reorder-portal: dialog-actions verzenden = primair, annuleren = neutraal */ #cr-order-confirm-dialog .cr-order-dialog-actions button[type="submit"], .clothingreorder-portal-skin .cr-order-dialog-actions button[type="submit"] { background: var(--vellinga-red); color: var(--vellinga-surface) !important; -webkit-text-fill-color: var(--vellinga-surface); border-color: var(--vellinga-red); } #cr-order-confirm-dialog .cr-order-dialog-actions button[type="submit"]:hover, .clothingreorder-portal-skin .cr-order-dialog-actions button[type="submit"]:hover { background: var(--vellinga-red-dark); border-color: var(--vellinga-red-dark); } /* ---------- Formulieren ---------- */ input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], select, textarea { border: 1px solid var(--vellinga-border); border-radius: var(--vellinga-radius); padding: 0.5rem 0.75rem; font-family: var(--vellinga-font-body); font-size: 0.95rem; background: var(--vellinga-surface); color: var(--vellinga-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vellinga-red); box-shadow: 0 0 0 3px rgba(197, 24, 24, 0.12); } input[disabled], select[disabled], textarea[disabled] { background: var(--vellinga-bg); color: var(--vellinga-text-muted); cursor: not-allowed; } label, .fieldrequired, .field-label { font-family: var(--vellinga-font-heading); font-weight: 500; color: var(--vellinga-text); } input[type="checkbox"], input[type="radio"] { accent-color: var(--vellinga-red); } /* ---------- Tabellen (één stijl voor alle modules) ---------- */ /* Generieke Dolibarr-tabellen (table.liste, .tagtable). Module-eigen tabellen * (medewerkers-portal-list, im-slot-grid, clothingreorder catalog/list) * stylen zichzelf via dezelfde CSS-vars in hun eigen stijlblok. */ .tagtable, table.liste, table.noborder, .div-table-responsive table { background: var(--vellinga-surface); border-radius: var(--vellinga-radius); overflow: hidden; border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--vellinga-border-soft); } table.liste tr.liste_titre, table.liste tr.liste_titre_filter, .tagtr.liste_titre { background: var(--vellinga-thead-bg); color: var(--vellinga-thead-text); font-family: var(--vellinga-font-heading); font-weight: 600; } table.liste tr.liste_titre a, table.liste tr.liste_titre .a-link, .tagtr.liste_titre a { color: var(--vellinga-thead-text); } table.liste tbody tr { border-bottom: 1px solid var(--vellinga-border-soft); } table.liste tbody tr:hover, .tagtr:hover { background: var(--vellinga-row-hover); } table.liste td, .tagtd { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--vellinga-border-soft); } /* Native webportal grids (embedded custom modules + core lists) */ main.container table[role="grid"], .clothingreorder-portal-skin table[role="grid"], .medewerkers-portal-skin table[role="grid"], .inmeetscheduler-portal-skin table[role="grid"] { background: var(--vellinga-surface); border: 1px solid var(--vellinga-border-soft); border-radius: var(--vellinga-radius); border-collapse: separate; border-spacing: 0; width: 100%; margin-bottom: 0.5rem; } main.container table[role="grid"] thead tr[role="search-row"] td, .clothingreorder-portal-skin table[role="grid"] thead tr[role="search-row"] td, .medewerkers-portal-skin table[role="grid"] thead tr[role="search-row"] td, .inmeetscheduler-portal-skin table[role="grid"] thead tr[role="search-row"] td { padding: 0.35rem 0.25rem; vertical-align: middle; } main.container table[role="grid"] thead tr[role="search-row"] input, main.container table[role="grid"] thead tr[role="search-row"] select, .clothingreorder-portal-skin table[role="grid"] thead input[type="text"], .clothingreorder-portal-skin table[role="grid"] thead input[type="date"], .medewerkers-portal-skin table[role="grid"] thead input[type="text"], .inmeetscheduler-portal-skin table[role="grid"] thead input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; } main.container table[role="grid"] thead th, main.container table[role="grid"] thead th a { font-family: var(--vellinga-font-heading); font-weight: 600; } /* jNotify: native Dolibarr — compact blok bovenaan gecentreerd (zoals offerte/order) */ .jnotify-container { top: max(0.65rem, env(safe-area-inset-top)) !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%); width: auto !important; max-width: min(32rem, calc(100vw - 1.5rem)) !important; z-index: 100000 !important; } .jnotify-container .jnotify-notification { position: relative; margin: 0 auto 0.5rem; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14); } .jnotify-container .jnotify-notification .jnotify-message { padding: 0.85rem 2.25rem 0.85rem 1rem !important; text-align: center !important; font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.35 !important; font-family: var(--vellinga-font-body, Arial, Helvetica, sans-serif) !important; } .jnotify-container .jnotify-notification-error .jnotify-background { background-color: #f8d3dc !important; opacity: 1 !important; } .jnotify-container .jnotify-notification-error .jnotify-message, .jnotify-container .jnotify-notification-error a.jnotify-close { color: #8a1f3a !important; } .jnotify-container .jnotify-notification-warning .jnotify-background { background-color: #fff7d1 !important; opacity: 1 !important; } .jnotify-container .jnotify-notification-warning .jnotify-message, .jnotify-container .jnotify-notification-warning a.jnotify-close { color: #9a7b1a !important; } .jnotify-container .jnotify-notification-success .jnotify-background { background-color: #d6f5dd !important; opacity: 1 !important; } .jnotify-container .jnotify-notification-success .jnotify-message, .jnotify-container .jnotify-notification-success a.jnotify-close { color: #1c6b34 !important; } .jnotify-container a.jnotify-close { top: 0.35rem !important; right: 0.5rem !important; font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1 !important; padding: 0 0.25rem !important; text-decoration: none !important; } /* Fallback toast when jnotify is not loaded (same position as jNotify) */ .vellinga-portal-flash-fallback { position: fixed; top: max(0.65rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: min(32rem, calc(100vw - 1.5rem)); z-index: 100000; border-radius: 8px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14); padding: 0.85rem 1rem; text-align: center; font-size: 0.95rem; font-weight: 700; line-height: 1.35; font-family: var(--vellinga-font-body, Arial, Helvetica, sans-serif); } .vellinga-portal-flash-fallback-success { background-color: #d6f5dd; color: #1c6b34; } .vellinga-portal-flash-fallback-warning { background-color: #fff7d1; color: #9a7b1a; } .vellinga-portal-flash-fallback-error { background-color: #f8d3dc; color: #8a1f3a; } /* ClothingReorder embedded (vellinga replaces iframe inline CSS) */ .clothingreorder-portal-skin h3.marginbottom2 { font-size: 1.05rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.5rem; } /* Grid-tabellen: colgroup + één tbody = uitgelijnde kolommen */ .clothingreorder-portal-skin table.cr-portal-grid-table { table-layout: fixed; width: 100%; border-collapse: collapse; } .clothingreorder-portal-skin table.cr-portal-grid-table th, .clothingreorder-portal-skin table.cr-portal-grid-table td { vertical-align: middle; padding: 0.45rem 0.5rem; box-sizing: border-box; } .clothingreorder-portal-skin table.cr-portal-grid-table thead th { vertical-align: bottom; padding-bottom: 0.55rem; } /* Catalogus kolommen */ .clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-photo { width: 4.75rem; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-actions { width: 2.85rem; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-qty { width: 4.75rem; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-size { width: 7.25rem; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-product { width: 18%; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-status { width: 10.25rem; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-medew { width: 12%; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-note { width: 10%; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="product"], .clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="product"] { overflow: hidden; text-overflow: ellipsis; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="product"] .cr-cat-producttext, .clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="product"] { white-space: nowrap; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-status"] .cr-line-status-badge { max-width: 100%; width: 100%; text-align: center; } /* Historie kolommen */ .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-actions { width: 2.85rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-customer { width: 10%; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-medew { width: 12%; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-product { width: 16%; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-size { width: 7.5rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-date { width: 6.5rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-qtylast { width: 5.5rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-qty { width: 4.75rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-note { width: 12%; } .clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-status { width: 11.5rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="product"], .clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="product"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="row-status"] .cr-line-status-badge { max-width: 100%; width: 100%; text-align: center; } .clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="qty"], .clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="qty_last"], .clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="date"], .clothingreorder-portal-skin table.cr-portal-grid-table th.right { text-align: right; } .clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="photo"] { text-align: center; } .clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="row-actions"] { text-align: center; padding-left: 0.25rem; padding-right: 0.25rem; } .clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="row-status"] { text-align: right; } .clothingreorder-portal-skin table.cr-portal-grid-table td input, .clothingreorder-portal-skin table.cr-portal-grid-table td select { max-width: 100%; width: 100%; min-width: 0; box-sizing: border-box; } .clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="qty"] input.clothingreorder-qty-input { width: 100%; text-align: right; } /* Uniforme rij-hoogte: alle invoervelden in catalog/historie even hoog */ .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td input[type="text"], .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td input[type="number"], .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td select, .clothingreorder-portal-skin #webportal-clothingreorder-list tbody td input[type="text"], .clothingreorder-portal-skin #webportal-clothingreorder-list tbody td input[type="number"], .clothingreorder-portal-skin #webportal-clothingreorder-list tbody td select { height: 2.35rem; min-height: 2.35rem; line-height: 1.3; padding: 0.3rem 0.5rem; box-sizing: border-box; vertical-align: middle; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="photo"] .cr-cat-thumb-img { margin: 0 auto; } /* Desktop: Herbestellen-tabel (?64rem) */ @media (min-width: 64.0625rem) { .clothingreorder-portal-skin table.cr-portal-grid-table, .clothingreorder-portal-skin table.vellinga-portal-stack-grid { display: table !important; } .clothingreorder-portal-skin table.cr-portal-grid-table thead, .clothingreorder-portal-skin table.vellinga-portal-stack-grid thead { display: table-header-group !important; } .clothingreorder-portal-skin table.cr-portal-grid-table tbody, .clothingreorder-portal-skin table.vellinga-portal-stack-grid tbody { display: table-row-group !important; } .clothingreorder-portal-skin table.cr-portal-grid-table tr, .clothingreorder-portal-skin table.vellinga-portal-stack-grid tr { display: table-row !important; } .clothingreorder-portal-skin table.cr-portal-grid-table th, .clothingreorder-portal-skin table.cr-portal-grid-table td, .clothingreorder-portal-skin table.vellinga-portal-stack-grid th, .clothingreorder-portal-skin table.vellinga-portal-stack-grid td { display: table-cell !important; } .clothingreorder-portal-skin table.cr-portal-grid-table tbody tr td::before, .clothingreorder-portal-skin table.vellinga-portal-stack-grid tbody tr td::before { display: none !important; content: none !important; } } /* Desktop: Medewerkers + Inmeet-tabel (?75rem) */ @media (min-width: 75.0625rem) { .medewerkers-portal-skin table.medewerkers-portal-grid, .medewerkers-portal-skin table.vellinga-portal-stack-grid, .inmeetscheduler-portal-skin table.im-portal-requests-grid, .inmeetscheduler-portal-skin table.vellinga-portal-stack-grid { display: table !important; } .medewerkers-portal-skin table.medewerkers-portal-grid thead, .medewerkers-portal-skin table.vellinga-portal-stack-grid thead, .inmeetscheduler-portal-skin table.im-portal-requests-grid thead, .inmeetscheduler-portal-skin table.vellinga-portal-stack-grid thead { display: table-header-group !important; } .medewerkers-portal-skin table.medewerkers-portal-grid tbody, .medewerkers-portal-skin table.vellinga-portal-stack-grid tbody, .inmeetscheduler-portal-skin table.im-portal-requests-grid tbody, .inmeetscheduler-portal-skin table.vellinga-portal-stack-grid tbody { display: table-row-group !important; } .medewerkers-portal-skin table.medewerkers-portal-grid tr, .medewerkers-portal-skin table.vellinga-portal-stack-grid tr, .inmeetscheduler-portal-skin table.im-portal-requests-grid tr, .inmeetscheduler-portal-skin table.vellinga-portal-stack-grid tr { display: table-row !important; } .medewerkers-portal-skin table.medewerkers-portal-grid th, .medewerkers-portal-skin table.medewerkers-portal-grid td, .medewerkers-portal-skin table.vellinga-portal-stack-grid th, .medewerkers-portal-skin table.vellinga-portal-stack-grid td, .inmeetscheduler-portal-skin table.im-portal-requests-grid th, .inmeetscheduler-portal-skin table.im-portal-requests-grid td, .inmeetscheduler-portal-skin table.vellinga-portal-stack-grid th, .inmeetscheduler-portal-skin table.vellinga-portal-stack-grid td { display: table-cell !important; } .medewerkers-portal-skin table.medewerkers-portal-grid tbody tr td::before, .medewerkers-portal-skin table.vellinga-portal-stack-grid tbody tr td::before, .inmeetscheduler-portal-skin table.im-portal-requests-grid tbody tr td::before, .inmeetscheduler-portal-skin table.vellinga-portal-stack-grid tbody tr td::before { display: none !important; content: none !important; } } .clothingreorder-portal-skin .cr-section-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } .clothingreorder-portal-skin td[data-col="row-actions"] { white-space: nowrap; } .clothingreorder-portal-skin .cr-row-action-wrap { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; width: 100%; } .clothingreorder-portal-skin td[data-col="row-actions"] .btn-filter-icon { margin: 0 auto; } /* Assortiment backoffice — klanten aanvinken */ .cr-catalog-soc-checkboxes-list { max-height: 14rem; overflow-y: auto; border: 1px solid var(--vellinga-border-soft, #ddd); border-radius: var(--vellinga-radius-lg, 6px); padding: 0.5rem 0.65rem; background: #fff; } .cr-catalog-soc-check-label { display: block; padding: 0.2rem 0; cursor: pointer; } .cr-catalog-soc-checkboxes-item + .cr-catalog-soc-checkboxes-item { margin-top: 0.1rem; } .cr-catalog-row-editing td { background: var(--vellinga-surface-alt, #f8f9fa); } .cr-catalog-edit-form { margin: 0.25rem 0; } .inmeetscheduler-portal-skin table#webportal-inmeet-requests thead tr.liste_titre a.im-portal-sort-link { font-weight: 600; text-decoration: underline; } /* Regelstatus: expliciete Dolibarr-kleuren (portaal-theme overschrijft anders alles groen) */ .clothingreorder-portal-skin .cr-line-status-badge.badge { display: inline-block; box-sizing: border-box; font-size: 0.78rem; font-weight: 600; line-height: 1.3; padding: 0.25em 0.5em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: normal; vertical-align: middle; border-radius: 4px; color: #fff !important; } .clothingreorder-portal-skin .cr-line-status-badge.cr-line-badge-ok { background-color: #55a430 !important; border: 1px solid #4a9230 !important; color: #fff !important; } .clothingreorder-portal-skin .cr-line-status-badge.cr-line-badge-warn { background-color: #bc9526 !important; border: 1px solid #a68322 !important; color: #fff !important; } .clothingreorder-portal-skin .cr-line-status-badge.cr-line-badge-error { background-color: #c44d4d !important; border: 1px solid #a83f3f !important; color: #fff !important; } .clothingreorder-portal-skin button.cr-cat-addline, .clothingreorder-portal-skin button.cr-cat-clearfilters { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 1.65rem; width: 1.65rem; height: 1.65rem; padding: 0; margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1; border: 1px solid var(--vellinga-border); border-radius: var(--vellinga-radius); background: var(--vellinga-bg); color: inherit; cursor: pointer; box-sizing: border-box; } .clothingreorder-portal-skin button.cr-cat-addline:hover, .clothingreorder-portal-skin button.cr-cat-clearfilters:hover { background: var(--vellinga-row-hover); } .clothingreorder-portal-skin button.cr-cat-addline:disabled { opacity: 0.45; cursor: not-allowed; } .clothingreorder-portal-skin .cr-cat-thumb-img { width: 4.25rem; height: 4.25rem; object-fit: contain; } .clothingreorder-portal-skin details.cr-section { margin-bottom: 0.75rem; border: 1px solid var(--vellinga-border-soft); border-radius: var(--vellinga-radius); padding: 0.35rem 0.6rem 0.65rem; background: var(--vellinga-surface); } .clothingreorder-portal-skin details.cr-draft { margin-bottom: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--vellinga-border-soft); } .clothingreorder-portal-skin details.cr-draft > summary { cursor: pointer; font-weight: 600; list-style-position: outside; } .clothingreorder-portal-skin details.cr-draft > summary .link { color: var(--vellinga-red); text-decoration: underline; } .clothingreorder-portal-skin details.cr-section > summary.cr-section-summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: 0.25rem 0; } .clothingreorder-portal-skin .cr-portal-actions { margin-top: 1rem; margin-bottom: 0.5rem; } .clothingreorder-portal-skin .cr-portal-actions .button, .clothingreorder-portal-skin .cr-portal-actions input[type="button"] { width: 100%; max-width: 22rem; min-height: 2.75rem; } /* Vaste bestelknop onderin (mobiel + desktop) */ .clothingreorder-portal-skin form.clothingreorder-portal-form { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } .clothingreorder-portal-skin .cr-portal-actions.cr-portal-actions--dock, #cr-portal-actions-dock.cr-portal-actions--dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; margin: 0; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: var(--vellinga-surface); border-top: 1px solid var(--vellinga-border); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: opacity 0.15s ease, transform 0.15s ease; } .clothingreorder-portal-skin .cr-portal-actions--dock.cr-portal-actions--hidden, #cr-portal-actions-dock.cr-portal-actions--hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(0.35rem); } .clothingreorder-portal-skin .cr-portal-actions-inner, #cr-portal-actions-dock .cr-portal-actions-inner { width: 100%; max-width: 28rem; } .clothingreorder-portal-skin .cr-portal-actions--dock input#cr-portal-review-btn, #cr-portal-actions-dock input#cr-portal-review-btn { width: 100%; max-width: none; min-height: 2.85rem; font-size: 1rem; font-weight: 600; background: var(--vellinga-red); color: var(--vellinga-surface) !important; -webkit-text-fill-color: var(--vellinga-surface); border-color: var(--vellinga-red); } .clothingreorder-portal-skin .cr-portal-actions--dock input#cr-portal-review-btn:hover, #cr-portal-actions-dock input#cr-portal-review-btn:hover { background: var(--vellinga-red-hover); border-color: var(--vellinga-red-hover); } @media (min-width: 48rem) { .clothingreorder-portal-skin .cr-portal-actions.cr-portal-actions--dock, #cr-portal-actions-dock.cr-portal-actions--dock { left: 50%; right: auto; width: min(32rem, calc(100vw - 2rem)); transform: translateX(-50%); border-radius: var(--vellinga-radius-lg) var(--vellinga-radius-lg) 0 0; } .clothingreorder-portal-skin .cr-portal-actions--dock.cr-portal-actions--hidden, #cr-portal-actions-dock.cr-portal-actions--hidden { transform: translateX(-50%) translateY(0.35rem); } } .clothingreorder-portal-skin #webportal-clothingreorder-list thead input[type="text"], .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead .cr-cat-search-input { width: 100%; min-width: 0; box-sizing: border-box; } .clothingreorder-portal-skin #webportal-clothingreorder-list thead td[data-col="date"] input[type="date"] { display: block; width: 100%; max-width: 11rem; box-sizing: border-box; margin: 0 0 0.25rem; font-size: 0.9rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list thead td[data-col="date"] input[type="date"]:last-child { margin-bottom: 0; } .clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="size"] select, .clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="size"] select, .clothingreorder-portal-skin #webportal-clothingreorder-catalog .cr-cat-input-medew, .clothingreorder-portal-skin #webportal-clothingreorder-catalog .cr-cat-input-note, .clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="note"] input { max-width: 100%; width: 100%; min-width: 0; box-sizing: border-box; } .clothingreorder-portal-skin a.cr-cat-thumb, .clothingreorder-portal-skin button.cr-cat-thumb { display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 90, 180, 0.12); } .clothingreorder-portal-skin select.cr-input-error, .clothingreorder-portal-skin input.cr-input-error { border-color: var(--vellinga-red) !important; box-shadow: 0 0 0 2px rgba(197, 24, 24, 0.2) !important; background-color: var(--vellinga-err-bg); } .clothingreorder-portal-skin .cr-inline-hint { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--vellinga-red-dark); line-height: 1.3; } dialog.cr-cat-gallery-dialog { max-width: min(96vw, 56rem); width: 100%; padding: 0; margin: auto; border: none; border-radius: var(--vellinga-radius-lg); background: transparent; } dialog.cr-cat-gallery-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } .cr-cat-gallery-panel { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(72vh, 30rem); padding: 2.25rem 2.75rem; box-sizing: border-box; } .cr-cat-gallery-img { max-width: 100%; max-height: min(82vh, 36rem); width: auto; height: auto; object-fit: contain; touch-action: pinch-zoom; } .cr-cat-gallery-close { position: absolute; top: 0.35rem; right: 0.5rem; width: 2.75rem; height: 2.75rem; border: 0; background: rgba(255, 255, 255, 0.95); font-size: 1.5rem; cursor: pointer; border-radius: 4px; touch-action: manipulation; } .cr-cat-gallery-prev, .cr-cat-gallery-next { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; min-height: 3rem; border: 0; background: rgba(255, 255, 255, 0.95); font-size: 1.75rem; cursor: pointer; border-radius: 4px; touch-action: manipulation; } .cr-cat-gallery-prev { left: 0.35rem; } .cr-cat-gallery-next { right: 0.35rem; } /* Bestel-bevestiging: dialog = transparante shell; .cr-order-dialog-inner = echte box */ #cr-order-confirm-dialog.cr-order-dialog, #cr-order-confirm-dialog.cr-order-dialog:modal, #cr-order-confirm-dialog.cr-order-dialog[open] { box-sizing: border-box !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; color: inherit; align-items: unset !important; justify-content: unset !important; } #cr-order-confirm-dialog.cr-order-dialog:modal, #cr-order-confirm-dialog.cr-order-dialog[open] { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; display: block !important; transform: translate(-50%, -50%) !important; } #cr-order-confirm-dialog.cr-order-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } #cr-order-confirm-dialog .cr-order-dialog-inner { display: flex; flex-direction: column; width: min(44rem, calc(100vw - 2rem)); max-width: min(44rem, calc(100vw - 2rem)); max-height: min(88dvh, 38rem); padding: 1rem 1.1rem 0.85rem; box-sizing: border-box; min-width: 0; background: var(--vellinga-surface); border: 1px solid var(--vellinga-border); border-radius: var(--vellinga-radius-lg); box-shadow: var(--vellinga-shadow-hover); overflow: hidden; color: var(--vellinga-text); } #cr-order-confirm-dialog .cr-order-dialog-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; flex-shrink: 0; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--vellinga-border-soft); } #cr-order-confirm-dialog .cr-order-dialog-title { flex-shrink: 0; margin: 0 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--vellinga-border-soft); font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--vellinga-text); } #cr-order-confirm-dialog .cr-order-summary { position: relative; flex: 1 1 auto; min-height: 0; max-height: 20rem; overflow-x: hidden; overflow-y: auto; margin: 0 -0.25rem 0.75rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; min-width: 0; max-width: none; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; scroll-padding-bottom: 1.25rem; border-top: 1px solid var(--vellinga-border-soft); border-bottom: 1px solid var(--vellinga-border-soft); background: linear-gradient(var(--vellinga-surface) 30%, rgba(255, 255, 255, 0)) 0 0 / 100% 1.25rem no-repeat, linear-gradient(rgba(255, 255, 255, 0), var(--vellinga-surface) 70%) 0 100% / 100% 1.25rem no-repeat, radial-gradient(at top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 0 0 / 100% 0.5rem no-repeat, radial-gradient(at bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 0 100% / 100% 0.5rem no-repeat; background-attachment: local, local, scroll, scroll; } #cr-order-confirm-dialog .cr-order-summary::-webkit-scrollbar { width: 8px; } #cr-order-confirm-dialog .cr-order-summary::-webkit-scrollbar-thumb { background: var(--vellinga-border); border-radius: 4px; } #cr-order-confirm-dialog .cr-order-summary::-webkit-scrollbar-thumb:hover { background: var(--vellinga-text-muted); } #cr-order-confirm-dialog .cr-order-note-block { flex-shrink: 0; } .clothingreorder-portal-skin .cr-order-summary-table, #cr-order-confirm-dialog .cr-order-summary-table { display: table !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: fixed; font-size: 0.88rem; border-collapse: collapse; } .clothingreorder-portal-skin .cr-order-summary-table td, .clothingreorder-portal-skin .cr-order-summary-table th { padding: 0.3rem 0.35rem; overflow-wrap: anywhere; word-break: break-word; vertical-align: top; } .clothingreorder-portal-skin .cr-order-summary-table th:nth-child(3), .clothingreorder-portal-skin .cr-order-summary-table td:nth-child(3) { width: 38%; } /* Samenvatting in popup: lijst met heldere scheidingen */ .clothingreorder-portal-skin .cr-order-summary-list, #cr-order-confirm-dialog .cr-order-summary-list { display: flex; flex-direction: column; gap: 0; max-width: 100%; min-width: 0; } .clothingreorder-portal-skin .cr-order-summary-item, #cr-order-confirm-dialog .cr-order-summary-item { padding: 0.45rem 0.35rem; border: 0; border-bottom: 1px solid var(--vellinga-border-soft); border-radius: 0; background: transparent; font-size: 0.88rem; line-height: 1.4; overflow-wrap: break-word; word-break: normal; } .clothingreorder-portal-skin .cr-order-summary-item:last-child, #cr-order-confirm-dialog .cr-order-summary-item:last-child { border-bottom: 0; } .clothingreorder-portal-skin .cr-order-summary-item strong, #cr-order-confirm-dialog .cr-order-summary-item strong { font-weight: 600; } .clothingreorder-portal-skin .cr-order-summary-src, #cr-order-confirm-dialog .cr-order-summary-src { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vellinga-red); margin-bottom: 0.15rem; } .clothingreorder-portal-skin .cr-order-summary-meta, #cr-order-confirm-dialog .cr-order-summary-meta { font-size: 0.82rem; color: var(--vellinga-text-muted); margin-top: 0.2rem; } #cr-order-confirm-dialog .cr-order-note-block, .clothingreorder-portal-skin .cr-order-note-block { margin-top: 0; } #cr-order-confirm-dialog textarea#note_order, .clothingreorder-portal-skin textarea#note_order { min-height: 3.75rem; max-height: 7rem; width: 100%; box-sizing: border-box; resize: vertical; } #cr-order-confirm-dialog .cr-order-note-block label { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; font-weight: 600; } .clothingreorder-portal-skin .cr-order-medew-warn, #cr-order-confirm-dialog .cr-order-medew-warn { flex-shrink: 0; margin: 0 0 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--vellinga-warn); border-left: 4px solid var(--vellinga-warn); border-radius: var(--vellinga-radius); background: var(--vellinga-warn-bg); font-size: 0.82rem; line-height: 1.35; max-width: 100%; overflow-wrap: break-word; word-break: normal; box-sizing: border-box; } .clothingreorder-portal-skin .cr-order-medew-ack, #cr-order-confirm-dialog .cr-order-medew-ack { display: flex; gap: 0.45rem; align-items: flex-start; flex-shrink: 0; max-width: 100%; margin: 0 0 0.5rem; padding: 0; overflow-wrap: break-word; word-break: normal; font-size: 0.82rem; line-height: 1.35; box-sizing: border-box; cursor: pointer; } #cr-order-confirm-dialog .cr-order-medew-ack input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; } /* Tablet: horizontaal scrollen i.p.v. afgeknipte kolommen */ @media (max-width: 75rem) and (min-width: 64.0625rem) { .clothingreorder-portal-skin .cr-section-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } .clothingreorder-portal-skin #webportal-clothingreorder-list, .clothingreorder-portal-skin #webportal-clothingreorder-catalog { min-width: 52rem; } } /* Smal scherm: kaartweergave (Herbestellen, Medewerkers, Inmeet) */ @media (max-width: 64rem) { main.container .clothingreorder-portal-skin, .clothingreorder-portal-skin, main.container .medewerkers-portal-skin, .medewerkers-portal-skin, main.container .inmeetscheduler-portal-skin, .inmeetscheduler-portal-skin { padding-left: max(0.35rem, env(safe-area-inset-left)); padding-right: max(0.35rem, env(safe-area-inset-right)); } .clothingreorder-portal-skin details.cr-section > summary.cr-section-summary { padding: 0.45rem 0.15rem; min-height: 2.75rem; box-sizing: border-box; } .clothingreorder-portal-skin details.cr-draft > summary { padding: 0.35rem 0; min-height: 2.5rem; } main.container .div-table-responsive, main.container .div-table-responsive-no-min, .clothingreorder-portal-skin .cr-section-body, .medewerkers-portal-skin .medewerkers-portal-list-wrap, .medewerkers-portal-skin .div-table-responsive-no-min, .inmeetscheduler-portal-skin .im-portal-tablewrap, .inmeetscheduler-portal-skin .div-table-responsive-no-min { overflow-x: visible !important; width: 100%; max-width: 100%; } main.container .div-table-responsive table.vellinga-portal-stack-grid, main.container .div-table-responsive-no-min table.vellinga-portal-stack-grid { min-width: 0 !important; } .clothingreorder-portal-skin table.cr-portal-grid-table, .clothingreorder-portal-skin table.vellinga-portal-stack-grid, .medewerkers-portal-skin table.vellinga-portal-stack-grid, .inmeetscheduler-portal-skin table.vellinga-portal-stack-grid { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: auto !important; border: none; background: transparent; } .clothingreorder-portal-skin #webportal-clothingreorder-list, .clothingreorder-portal-skin #webportal-clothingreorder-catalog, .medewerkers-portal-skin #webportal-medewerkers-list, .inmeetscheduler-portal-skin #webportal-inmeet-requests { display: block !important; width: 100% !important; max-width: 100% !important; border: none; background: transparent; } .clothingreorder-portal-skin #webportal-clothingreorder-list thead, .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead, .medewerkers-portal-skin #webportal-medewerkers-list thead, .inmeetscheduler-portal-skin #webportal-inmeet-requests thead { display: block !important; width: 100%; } .clothingreorder-portal-skin #webportal-clothingreorder-list thead tr[role="search-row"], .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr.cr-cat-search-row, .medewerkers-portal-skin #webportal-medewerkers-list thead tr[role="search-row"], .inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] { display: flex !important; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; padding: 0.5rem 0.35rem; margin: 0 0 0.5rem; border-radius: var(--vellinga-radius); background: var(--vellinga-bg); border: 1px solid var(--vellinga-border-soft); box-sizing: border-box; } .clothingreorder-portal-skin #webportal-clothingreorder-list thead tr[role="search-row"] > td.cr-search-skip, .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr.cr-cat-search-row > td.cr-search-skip, .inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td[data-col="planned"], .inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td[data-col="datec"], .inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td[data-col="slots"], .inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td[data-col="nb"] { display: none !important; } .clothingreorder-portal-skin #webportal-clothingreorder-list thead tr[role="search-row"] > td, .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr.cr-cat-search-row > td, .medewerkers-portal-skin #webportal-medewerkers-list thead tr[role="search-row"] > td, .inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td { display: block !important; flex: 1 1 100%; min-width: 0; box-sizing: border-box; padding: 0.25rem 0; } .clothingreorder-portal-skin #webportal-clothingreorder-list thead tr[role="search-row"] > td[data-col="row-actions"], .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr.cr-cat-search-row > td[data-col="row-actions"] { flex: 0 0 auto; align-self: flex-start; } .clothingreorder-portal-skin #webportal-clothingreorder-list thead tr:not([role="search-row"]), .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr:not(.cr-cat-search-row), .medewerkers-portal-skin #webportal-medewerkers-list thead tr:not([role="search-row"]), .inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr:not([role="search-row"]) { display: none !important; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody, .medewerkers-portal-skin #webportal-medewerkers-list tbody, .inmeetscheduler-portal-skin #webportal-inmeet-requests tbody { display: block !important; width: 100%; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.oddeven[data-medew-lastname], .inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow { display: flex !important; flex-direction: column; width: 100% !important; max-width: 100%; box-sizing: border-box; margin: 0 0 0.85rem; padding: 0.65rem 0.75rem; border: 1px solid var(--vellinga-border-soft); border-radius: var(--vellinga-radius-lg); background: var(--vellinga-surface); box-shadow: var(--vellinga-shadow); } .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow.cr-cat-followup { margin-top: -0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--vellinga-border); border-radius: 0 0 var(--vellinga-radius-lg) var(--vellinga-radius-lg); } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.oddeven[data-medew-lastname] td, .inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow td { display: flex !important; flex-direction: column; align-items: stretch; gap: 0.35rem; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0.55rem 0; border: none; border-bottom: 1px solid var(--vellinga-border-soft); box-sizing: border-box; vertical-align: top; white-space: normal; text-align: left !important; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td:last-child, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td:last-child, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td:last-child, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.oddeven[data-medew-lastname] td:last-child, .inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow td:last-child { border-bottom: none; } .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-editrow { display: block !important; width: 100%; margin: 0 0 0.85rem; padding: 0; border: none; background: transparent; box-shadow: none; } .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-editrow > td { display: block !important; width: 100% !important; padding: 0.65rem 0.75rem; border: 1px solid var(--vellinga-border-soft); border-radius: var(--vellinga-radius-lg); background: var(--vellinga-surface); box-shadow: var(--vellinga-shadow); } .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-editrow > td::before { display: none !important; content: none !important; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-actions"] { display: none !important; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-actions"] { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td::before, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td::before, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td::before, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.oddeven[data-medew-lastname] td::before, .inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow td::before { content: attr(data-label); font-weight: 600; font-size: 0.8rem; line-height: 1.3; color: var(--vellinga-text-muted); } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-label=""]::before, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-label=""]::before, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr td[data-label=""]::before { display: none; } .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td[data-col="action"], .medewerkers-portal-skin #webportal-medewerkers-list tbody tr td[data-col="action"] { order: -30; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: stretch; padding-top: 0; padding-bottom: 0.65rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--vellinga-border-soft); } .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td[data-col="action"]::before { flex: 1 1 auto; } .medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td[data-col="lastname"] { order: -25; font-size: 1.05rem; font-weight: 600; } .medewerkers-portal-skin #webportal-medewerkers-list tbody tr td[data-col="action"] .button, .medewerkers-portal-skin #webportal-medewerkers-list tbody tr td[data-col="action"] .medewerkers-portal-btn-edit { width: 100%; max-width: 100%; text-align: center; box-sizing: border-box; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-status"], .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-status"] { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--vellinga-border-soft); padding-top: 0.35rem; padding-bottom: 0.65rem; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-status"]::before, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-status"]::before { flex: 1 1 auto; } .clothingreorder-portal-skin .cr-line-status-badge.badge { max-width: none; flex: 0 1 auto; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td input, .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td select, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td input, .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td select, .medewerkers-portal-skin #webportal-medewerkers-list thead tr[role="search-row"] input, .inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] input { width: 100% !important; max-width: 100% !important; min-height: 2.75rem; font-size: 1rem; box-sizing: border-box; } .clothingreorder-portal-skin #webportal-clothingreorder-list input.clothingreorder-qty-input, .clothingreorder-portal-skin #webportal-clothingreorder-catalog .clothingreorder-qty-input { text-align: left !important; } .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="product"], .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="product"] { word-break: break-word; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="photo"] { align-items: center; } .clothingreorder-portal-skin #webportal-clothingreorder-catalog .cr-cat-thumb-img { width: min(100%, 5.5rem); height: auto; aspect-ratio: 1; } .clothingreorder-portal-skin button.cr-cat-addline, .clothingreorder-portal-skin button.cr-cat-clearfilters, .clothingreorder-portal-skin .btn-filter-icon { min-width: 2.75rem; min-height: 2.75rem; } .clothingreorder-portal-skin .cr-row-action-wrap { min-height: 2.75rem; justify-content: flex-end; } .clothingreorder-portal-skin details.cr-draft table.cr-draft-lines { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } #cr-order-confirm-dialog .cr-order-summary-table, .clothingreorder-portal-skin .cr-order-summary-table { display: table !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .clothingreorder-portal-skin .cr-portal-actions .button, .clothingreorder-portal-skin .cr-portal-actions input[type="button"] { max-width: none; width: 100%; } #cr-order-confirm-dialog .cr-order-dialog-actions, .clothingreorder-portal-skin .cr-order-dialog-actions { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; } #cr-order-confirm-dialog .cr-order-dialog-actions .button, #cr-order-confirm-dialog .cr-order-dialog-actions button, .clothingreorder-portal-skin .cr-order-dialog-actions .button, .clothingreorder-portal-skin .cr-order-dialog-actions button { width: 100%; min-height: 2.85rem; } #cr-order-confirm-dialog .cr-order-dialog-inner, .clothingreorder-portal-skin .cr-order-dialog-inner { padding: 0.85rem; } .jnotify-container, .clothingreorder-portal-skin .cr-portal-toast-error { max-width: calc(100vw - 1rem) !important; } .medewerkers-portal-skin .medewerkers-portal-editfields { display: flex; flex-direction: column; gap: 0.75rem; } .medewerkers-portal-skin .medewerkers-portal-field { width: 100%; min-width: 0; } .medewerkers-portal-skin .medewerkers-portal-field .flat, .medewerkers-portal-skin .medewerkers-portal-field select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .medewerkers-portal-skin .medewerkers-portal-actions--below { display: flex; flex-direction: column-reverse; gap: 0.5rem; } .medewerkers-portal-skin .medewerkers-portal-actions--below .button, .medewerkers-portal-skin .medewerkers-portal-actions--below a.buttonrefused { width: 100%; text-align: center; box-sizing: border-box; } .inmeetscheduler-portal-skin .im-portal-form table.border { display: block !important; width: 100% !important; } .inmeetscheduler-portal-skin .im-portal-form table.border tbody, .inmeetscheduler-portal-skin .im-portal-form table.border tr, .inmeetscheduler-portal-skin .im-portal-form table.border td { display: block !important; width: 100% !important; box-sizing: border-box; } .inmeetscheduler-portal-skin .im-portal-form table.border td.titlefield { font-weight: 600; padding-bottom: 0.25rem; } .inmeetscheduler-portal-skin table.im-slot-grid { display: block !important; width: 100% !important; } .inmeetscheduler-portal-skin table.im-slot-grid thead { display: none !important; } .inmeetscheduler-portal-skin table.im-slot-grid tbody { display: block !important; width: 100%; } .inmeetscheduler-portal-skin table.im-slot-grid tbody tr { display: block !important; margin: 0 0 0.65rem; padding: 0.5rem 0.65rem; border: 1px solid var(--vellinga-border-soft); border-radius: var(--vellinga-radius); background: var(--vellinga-surface); } .inmeetscheduler-portal-skin table.im-slot-grid tbody tr th.im-slot-day { display: block !important; width: 100% !important; padding: 0 0 0.45rem; margin: 0 0 0.35rem; border: none; border-bottom: 1px solid var(--vellinga-border-soft); background: transparent; text-align: left; } .inmeetscheduler-portal-skin table.im-slot-grid tbody tr td.im-slot-cell { display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; width: 100% !important; padding: 0.45rem 0; border: none; border-bottom: 1px solid var(--vellinga-border-soft); text-align: left; } .inmeetscheduler-portal-skin table.im-slot-grid tbody tr td.im-slot-cell:last-child { border-bottom: none; } .inmeetscheduler-portal-skin table.im-slot-grid tbody tr td.im-slot-cell::before { content: attr(data-label); font-weight: 600; font-size: 0.85rem; color: var(--vellinga-text-muted); margin-right: 0.5rem; flex: 1 1 auto; } .inmeetscheduler-portal-skin .im-portal-details-row { flex-direction: column; align-items: stretch; } .inmeetscheduler-portal-skin .im-portal-details-measures { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .inmeetscheduler-portal-skin .im-portal-submit .button { width: 100%; box-sizing: border-box; } .cr-cat-gallery-panel { min-height: min(58dvh, 24rem); padding: 3rem 0.75rem 2.5rem; } .cr-cat-gallery-img { max-height: min(78dvh, 34rem); } } @media (max-width: 28rem) { .clothingreorder-portal-skin #webportal-clothingreorder-list thead td[data-col="date"] input[type="date"] { max-width: 100%; } } /* Medewerkers embedded list */ .medewerkers-portal-skin .medewerkers-portal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .medewerkers-portal-skin #webportal-medewerkers-list tbody td { vertical-align: middle; } /* Inmeetscheduler embedded */ .inmeetscheduler-portal-skin .im-portal-title, .inmeetscheduler-portal-skin .im-portal-company, .inmeetscheduler-portal-skin .im-portal-intro { text-align: center; max-width: 42rem; margin-left: auto; margin-right: auto; } .inmeetscheduler-portal-skin .im-portal-section-title { text-align: center; width: 100%; margin: 1.5rem 0 0.75rem; } .inmeetscheduler-portal-skin .im-slot-wrap { margin: 0.35rem auto 0.75rem; max-width: 36rem; } .inmeetscheduler-portal-skin table.im-slot-grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .inmeetscheduler-portal-skin table.im-slot-grid .im-slot-th, .inmeetscheduler-portal-skin table.im-slot-grid td, .inmeetscheduler-portal-skin table.im-slot-grid .im-slot-day { padding: 0.5rem 0.4rem; vertical-align: middle; border: 1px solid var(--vellinga-border-soft); } .inmeetscheduler-portal-skin table.im-slot-grid .im-slot-th { background: var(--vellinga-thead-bg); font-weight: 600; text-align: center; } .inmeetscheduler-portal-skin table.im-slot-grid td.im-slot-cell { text-align: center; } .inmeetscheduler-portal-skin .im-portal-details-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.75rem; } .inmeetscheduler-portal-skin .im-portal-submit { margin-top: 1rem; } .inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow-hasnote { cursor: help; } /* ---------- Meldingen / alerts (uniform) ---------- */ .error, .ok, .warning, .infos, div.error, div.ok, div.warning, div.info { border-radius: var(--vellinga-radius); border-left: 4px solid; padding: 0.75rem 1rem; margin: 0.75rem 0; background: var(--vellinga-surface); box-shadow: var(--vellinga-shadow); } .error, div.error { border-left-color: var(--vellinga-err); color: var(--vellinga-err); background: var(--vellinga-err-bg); } .ok, div.ok { border-left-color: var(--vellinga-ok); color: var(--vellinga-ok); } .warning,div.warning{border-left-color: var(--vellinga-warn); color: var(--vellinga-warn); background: var(--vellinga-warn-bg); } .infos, div.info { border-left-color: var(--vellinga-text-muted); color: var(--vellinga-text); } /* ClothingReorder: fallback als jNotify ontbreekt — zelfde positie/stijl als native error-toast */ .clothingreorder-portal-skin .cr-portal-toast-error { position: fixed; top: max(0.65rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); right: auto; bottom: auto; z-index: 12000; width: auto; max-width: min(32rem, calc(100vw - 1.5rem)); margin: 0; padding: 0.85rem 2.25rem 0.85rem 1rem; font-size: 0.95rem; font-weight: 700; line-height: 1.35; text-align: center; border-radius: 8px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14); border-left: none; background: #f8d3dc; color: #8a1f3a; } .clothingreorder-portal-skin .cr-portal-toast-error.cr-portal-toast-error--open, .clothingreorder-portal-skin .cr-portal-toast-error:not([hidden]) { display: block; } .clothingreorder-portal-skin .cr-portal-toast-body { color: var(--vellinga-text); } .clothingreorder-portal-skin .cr-portal-toast-close { position: absolute; top: 0.35rem; right: 0.35rem; width: 1.75rem; height: 1.75rem; padding: 0; margin: 0; border: none; background: transparent; color: var(--vellinga-warn); font-size: 1.35rem; line-height: 1; cursor: pointer; border-radius: 4px; } .clothingreorder-portal-skin .cr-portal-toast-close:hover { background: rgba(0, 0, 0, 0.06); } /* Reorder-tegel in home-grid: rustige rand */ .home-links-card.--clothing-reorder, .home-links-card.--medewerkers-portal { border-color: var(--vellinga-border); } /* ---------- Login-pagina ---------- */ .bodyforpublicportallogin { background: linear-gradient(135deg, var(--vellinga-bg) 0%, #ECECEC 100%); } .bodyforpublicportallogin .login_block, .bodyforpublicportallogin .login-form, .bodyforpublicportallogin form { background: var(--vellinga-surface); border-radius: var(--vellinga-radius-lg); box-shadow: var(--vellinga-shadow-hover); padding: 2rem; border-top: 4px solid var(--vellinga-red); } /* ---------- Footer ---------- */ .webportal-footer, .public-portal-footer, .portal-footer { background: