@font-face{font-family:"Material Symbols";src:url("fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"),url("fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations");font-style:normal;font-weight:100 700}
/* Page rules for the embeddable prototype. The design system itself is in styles.css. */

/* From the design files' <helmet> ("Facturatie sysadmin v2" is the screen design; the walkthrough file adds the pulse) */
html, body { margin: 0; background: #edf3f7; }
a { color: var(--lb-action-secondary-default); }
a:hover { color: var(--lb-action-secondary-hover); }
input::placeholder, textarea::placeholder { font-style: italic; color: var(--lb-neutral-6); }
.rz-grid-table thead th .rz-column-title { padding-right: 5px; box-sizing: border-box; }
.rz-sidebar .rz-panel-menu { --rz-panel-menu-item-margin-block: 0px; --rz-panel-menu-item-padding-block: 8px; --rz-panel-menu-item-line-height: 20px; }
.rz-sidebar .rz-panel-menu .nav-item { padding-bottom: 0 !important; margin-bottom: 12px !important; }
@keyframes lbTourPulse {
  0%, 100% { outline: 0 solid rgba(82, 127, 159, 0.35); }
  50% { outline: 6px solid rgba(82, 127, 159, 0); }
}

/* Custom dropdown / menu items: navy fill on hover, as in the design system rules */
.lb-menu-item:hover { background: var(--lb-action-secondary-default) !important; color: var(--lb-action-secondary-inverted) !important; }
.lb-menu-item:hover .rzi { color: inherit !important; }
.lb-option:hover { background: var(--lb-neutral-4); }

/* Clickable table rows (invoice overview): the app's own hover tint */
.lb-rowlink { cursor: pointer; }
.lb-rowlink:hover > td { background: var(--lb-action-highlight) !important; }

/* Hover explanation on disabled checkboxes */
.lb-tip { position: relative; }
.lb-tip::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--lb-neutral-black); color: #fff; font-size: 13px; font-weight: 400; line-height: 18px; padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 50;
}
.lb-tip:hover::after { opacity: 1; }

/* Default mode: a fixed 1600x800 stage, zoomed to whatever size the iframe gets.
   The stage size is set from index.html (STAGE_W / STAGE_H); these are the fallbacks. */
html, body { height: 100%; }
body { overflow: hidden; font-family: "Inter", system-ui, sans-serif; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #edf3f7; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 800px; transform-origin: 0 0; }
#root { height: 100%; }

/* ?fit=reflow : the original responsive layout instead of zooming (panel stacks under the screen below 900px) */
html.reflow, html.reflow body { height: auto; overflow: auto; }
html.reflow #viewport { position: static; overflow: visible; }
html.reflow #stage { position: static; width: auto; height: auto; transform: none !important; }
html.reflow #root { min-height: 100vh; }

/* Compact tables: 30px rows, 13px text, every cell truncated with an ellipsis (full text on hover) */
.lb-compact thead th > div:not(.rz-cell-filter) { padding: 6px 0; }
.lb-compact thead th .rz-column-title { font-size: 12px; line-height: 18px; padding-inline: 8px; }
.lb-compact tbody td { border-bottom: 1px solid var(--lb-neutral-2); vertical-align: middle; }
.lb-compact .rz-chkbox { width: 18px !important; height: 18px !important; }
.lb-compact .rz-chkbox-box { width: 18px; height: 18px; min-width: 18px; }

/* Resizable columns: a drag handle on the right edge of each header cell */
.lb-th { position: sticky; }
.lb-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 3; }
.lb-resize::after { content: ""; position: absolute; top: 6px; bottom: 6px; right: 0; width: 1px; background: transparent; transition: background .12s; }
.lb-th:hover .lb-resize::after, .lb-resize:hover::after { background: var(--lb-action-primary-default); }

/* Filler column: takes the width the fixed columns leave over, no border on its left */
.lb-compact .lb-filler { padding: 0; border-inline-start: none !important; }
.lb-compact thead th:not(:last-child) { border-inline-end: var(--rz-grid-header-cell-border); }
.lb-compact thead th.lb-filler { border-inline-end: none; }

/* Checkboxes: a clear difference between selectable (white box, dark border) and not selectable
   (grey filled box, no transparency) so the rule reads at a glance, also when zoomed down */
.lb-chk .rz-chkbox-box { background: var(--lb-neutral-white); border: 1.5px solid var(--lb-neutral-6); box-shadow: none; }
.lb-chk .rz-chkbox-box.rz-state-active { background: var(--lb-action-primary-default); border-color: var(--lb-action-primary-default); }
.lb-chk.lb-chk-off .rz-chkbox-box { background: var(--lb-neutral-3); border: 1.5px solid var(--lb-neutral-2); opacity: 1; cursor: not-allowed; }
.lb-chk.lb-chk-off .rz-chkbox-box.rz-state-active { background: var(--lb-neutral-1); border-color: var(--lb-neutral-1); }

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}








/* Responsive portfolio decisions */
 html.reflow #root{min-height:0;height:auto}
 html.embedded-tour,html.embedded-tour body{overflow:hidden}
 html.embedded-tour:fullscreen,html.embedded-tour:fullscreen body{overflow:auto}
 .portfolio-tour{min-height:0!important}
 .portfolio-tour>div:first-child{position:static!important;max-height:none!important;padding:18px!important}
 .portfolio-tour>div:first-child{font-family:var(--tour-text-family,'DM Sans',Arial,sans-serif);color:var(--tour-text-color,#193651)}
 .portfolio-tour>div:last-child{padding:24px!important}
 @media(max-width:759px){.portfolio-tour>div:first-child{order:0!important;border:0!important}.portfolio-tour>div:last-child{order:1!important}}