:root {
--vic-red: #D90012;
--vic-on-brand: #ffffff; /* text/icon color against --vic-red used as a BACKGROUND (header, buttons) */
--vic-accent: #D90012; /* --vic-red used as FOREGROUND text on the app's light backgrounds (links). A separate variable because a light brandColor (e.g. white) is legible as a background-with-on-brand-text but not as light-text-on-a-light-page — branding.js falls this back to --vic-ink instead of the raw brand color in that case. */
--vic-gold: #FFD100;
--vic-ink: #1a1a1a;
--vic-bg: #f7f7f7;
--vic-surface: #ffffff;
--vic-border: #e0e0e0;
--vic-success: #1f9254;
--vic-danger: #c0392b;
--vic-radius: 8px;
--vic-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Planner design system (2026-09 redesign) */
--font-planner: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--surface-0: #F4F5F7;
--surface-2: #ffffff;
--border: rgba(15, 23, 42, 0.08);
--border-strong: rgba(15, 23, 42, 0.18);
--sidebar-bg: #1D2235;
--sidebar-text: #94A3B8;
--sidebar-text-active: #ffffff;
--sidebar-active-bg: rgba(255, 255, 255, 0.10);
--radius-card: 10px;
--warning: #F59E0B;
--muted: #94A3B8;
--chip-success-bg: #D1FAE5;
--chip-success-text: #065F46;
--chip-warning-bg: #FEF3C7;
--chip-warning-text: #92400E;
--chip-danger-bg: #FEE2E2;
--chip-danger-text: #991B1B;
--chip-muted-bg: #E2E8F0;
--chip-muted-text: #475569;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/montserrat-variable.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/montserrat-variable.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/montserrat-variable.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/montserrat-variable.woff2') format('woff2');
}
* {
box-sizing: border-box;
}
/* Used only to disable a whole form at once (company settings, read-only for non-admins), so it
must not add a border, spacing, or a min-width that would break the grid inside it. */
fieldset {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
[x-cloak] {
display: none !important;
}
/* Restore the native hidden attribute's effect: several components below set
an explicit `display` (e.g. .vic-sidebar-link, #vic-back-to-portal-link,
#vic-manage-planning-link) which would otherwise override the user-agent's
[hidden] { display: none } rule and defeat role-gating via el.hidden. */
[hidden] {
display: none !important;
}
/* Role-gated chrome, hidden declaratively rather than by a one-time DOM sweep: the guard
(js/auth.js, js/planning-auth.js) marks once, and this rule then matches every element
that ever carries the gated class, including markup Alpine renders later (e.g. Gebruikers'
per-row buttons, which arrive only after /api/users resolves — a querySelectorAll run at
DOMContentLoaded can never reach those). Both target display: none, same as [hidden] above,
so the two mechanisms never disagree about an element that carries both. */
.vic-not-owner .vic-owner-only,
.vic-not-office .vic-admin-only {
display: none !important;
}
body {
margin: 0;
font-family: var(--font-planner);
font-size: 0.875rem;
line-height: 1.45;
background: var(--surface-0);
color: var(--vic-ink);
-webkit-font-smoothing: antialiased;
}
select, button, input, textarea {
font-family: var(--font-planner);
}
a {
color: var(--vic-accent);
}
.vic-header {
background: var(--vic-red);
color: var(--vic-on-brand);
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.vic-header a {
color: var(--vic-on-brand);
}
.vic-nav {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.5rem 1rem;
background: var(--vic-surface);
border-bottom: 1px solid var(--vic-border);
}
.vic-nav a {
text-decoration: none;
color: var(--vic-ink);
padding: 0.5rem 0.75rem;
border-radius: var(--vic-radius);
}
.vic-nav a.active,
.vic-nav a:hover {
background: var(--vic-gold);
color: var(--vic-ink);
}
.vic-card {
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-card);
padding: 1rem;
margin: 0 0 1rem;
}
.vic-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: var(--vic-red);
color: var(--vic-on-brand);
border: 1px solid transparent;
border-radius: var(--vic-radius);
padding: 0.6rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.vic-input {
width: 100%;
padding: 0.55rem 0.6rem;
border: 1px solid var(--border-strong);
border-radius: var(--vic-radius);
font-size: 0.8rem;
}
.vic-error {
color: var(--vic-danger);
font-size: 0.9rem;
}
.vic-calendar-cell {
border: 1px solid var(--vic-border);
border-radius: var(--vic-radius);
padding: 0.5rem;
min-height: 3rem;
cursor: pointer;
}
.vic-calendar-cell--holiday {
border-color: var(--vic-danger);
background: #fdecea;
}
.vic-calendar-cell--selected {
background: var(--vic-gold);
}
@media (max-width: 640px) {
.vic-calendar-cell {
padding: 0.25rem;
font-size: 0.85rem;
min-width: 0;
overflow-wrap: break-word;
}
#export-client-select {
width: 100%;
}
}
/* Planner design system: sidebar shell, chips, stat cards, tables, task cards */
.vic-shell {
display: flex;
min-height: 100vh;
}
.vic-sidebar {
width: 176px;
flex: 0 0 176px;
background: var(--sidebar-bg);
color: var(--sidebar-text);
display: flex;
flex-direction: column;
padding: 1rem 0.75rem;
position: sticky;
top: 0;
height: 100vh;
}
.vic-sidebar-logo {
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
padding: 0 0.5rem 1.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vic-sidebar-logo img {
display: block;
/* aspect-ratio (rather than height:auto) sizes the box directly — an SVG loaded via ![]()
that only declares a viewBox (no width/height attributes) has ambiguous intrinsic sizing
in some engines, and width:auto/height:auto both resolving from that can collapse to 0. */
width: 100%;
max-width: 128px;
aspect-ratio: 1 / 1;
object-fit: contain;
margin: 0 auto;
}
.vic-sidebar-nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
}
.vic-sidebar-link {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.6rem;
border-radius: var(--vic-radius);
color: var(--sidebar-text);
text-decoration: none;
font-size: 0.82rem;
font-weight: 500;
}
.vic-sidebar-link:hover {
color: var(--sidebar-text-active);
}
.vic-sidebar-link.active {
color: var(--sidebar-text-active);
background: var(--sidebar-active-bg);
}
.vic-sidebar-link .vic-icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.vic-sidebar-user {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.5rem 0;
border-top: 0.5px solid rgba(255, 255, 255, 0.12);
margin-top: 0.5rem;
}
.vic-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--vic-red);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 600;
flex: 0 0 28px;
}
.vic-sidebar-user-info {
display: flex;
flex-direction: column;
min-width: 0;
font-size: 0.75rem;
}
.vic-sidebar-user-info > span {
color: var(--sidebar-text-active);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vic-sidebar-user-info a {
color: var(--sidebar-text);
font-size: 0.7rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.vic-content {
flex: 1;
min-width: 0;
padding: 1.5rem;
}
.vic-icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.vic-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.vic-stat-card {
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-card);
padding: 0.9rem 1rem;
}
.vic-stat-label {
font-size: 0.72rem;
color: var(--vic-ink);
opacity: 0.6;
}
.vic-stat-value {
font-size: 1.35rem;
font-weight: 700;
margin-top: 0.15rem;
}
.vic-filter-bar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.vic-filter-bar .vic-input {
width: auto;
flex: 1 1 200px;
}
.vic-chip {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 500;
background: var(--surface-0);
color: var(--vic-ink);
white-space: nowrap;
}
.vic-chip--success {
background: var(--chip-success-bg);
color: var(--chip-success-text);
}
.vic-chip--warning {
background: var(--chip-warning-bg);
color: var(--chip-warning-text);
}
.vic-chip--danger {
background: var(--chip-danger-bg);
color: var(--chip-danger-text);
}
.vic-status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 0.4rem;
background: currentColor;
}
.vic-table {
width: 100%;
border-collapse: collapse;
}
.vic-table th,
.vic-table td {
text-align: left;
padding: 0.6rem 0.5rem;
border-bottom: 0.5px solid var(--border);
font-size: 0.8rem;
}
.vic-table th {
font-weight: 600;
color: var(--vic-ink);
opacity: 0.65;
font-size: 0.7rem;
}
.vic-tabs {
display: flex;
gap: 1.25rem;
border-bottom: 0.5px solid var(--border);
margin-bottom: 1rem;
}
.vic-tab {
padding: 0.5rem 0;
color: var(--vic-ink);
opacity: 0.55;
text-decoration: none;
font-size: 0.82rem;
font-weight: 500;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
background: none;
}
.vic-tab.active {
opacity: 1;
color: var(--vic-red);
border-bottom-color: var(--vic-red);
}
.vic-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.vic-alert {
background: var(--chip-warning-bg);
color: var(--chip-warning-text);
border-radius: var(--radius-card);
padding: 0.85rem 1rem;
margin-bottom: 1rem;
font-size: 0.85rem;
}
.vic-alert a {
color: inherit;
font-weight: 600;
}
/* .vic-alert's default tint is warning-yellow, which misreads for a plain statement of fact (e.g.
"this page is read-only") that carries no problem to fix. Reuses the same neutral grey pairing
the passed-time chip already uses, rather than inventing a second banner component. */
.vic-alert--muted {
background: var(--chip-muted-bg);
color: var(--chip-muted-text);
}
.vic-quick-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.vic-quick-actions a.vic-button {
text-decoration: none;
}
.vic-dashboard-columns {
display: flex;
gap: 1rem;
align-items: stretch;
margin-bottom: 1rem;
}
.vic-dashboard-column {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.vic-dashboard-panel {
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-card);
padding: 1rem;
}
.vic-dashboard-panel h2 {
margin-top: 0;
}
/* Matches the height of the sibling column's stacked panels (via the flex container's
align-items:stretch) instead of its own content, so its scroll area — not the page —
absorbs a long task list. */
.vic-dashboard-panel--fill {
height: 100%;
display: flex;
flex-direction: column;
}
.vic-dashboard-panel--fill .vic-dashboard-scroll {
flex: 1 1 0;
min-height: 0;
}
.vic-dashboard-scroll {
overflow-y: auto;
padding-right: 0.25rem;
}
@media (max-width: 900px) {
.vic-dashboard-columns {
flex-direction: column;
}
.vic-dashboard-panel--fill {
height: auto;
}
.vic-dashboard-panel--fill .vic-dashboard-scroll {
max-height: 420px;
}
}
.vic-info-card {
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-card);
padding: 0.85rem 1rem;
}
.vic-task-card {
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-card);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
/* An employee task card is a link around the whole card, so the anchor itself is the column. */
.vic-task-card--link {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
text-decoration: none;
color: inherit;
}
/* Start time left, clock status right. A task without a start time renders no time badge, so the
status is pushed right on its own — space-between would slide it to the left edge instead. */
.vic-task-card-head {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 1.6rem;
}
.vic-task-card-head .vic-chip {
margin-left: auto;
}
.vic-task-card-head .vic-task-status {
margin-left: auto;
}
/* Card status stripes — one per card, colour = outcome (admin Planning's taskCardStatus; the
employee portal uses --completed). The label next to the duration uses the matching
.vic-task-status--* colour, darkened for amber which is too light as text on white. */
.vic-task-card--unassigned,
.vic-task-card--substitute {
border-left: 3px solid var(--warning);
}
/* The client portal's "Niet bevestigd" — a past visit nobody clocked out; the system has no
registration, which is not the same as saying nobody came. */
.vic-task-card--unconfirmed {
border-left: 3px solid var(--warning);
}
.vic-task-card--completed,
.vic-task-card--active {
border-left: 3px solid var(--vic-success);
}
.vic-task-card--failed {
border-left: 3px solid var(--vic-danger);
}
.vic-task-card--cancelled {
border-left: 3px solid var(--muted);
}
/* A moved visit: the trace card on its original date. Same grey as cancelled — the work still
happens, just not here, so this must never read as the red/failed treatment. */
.vic-task-card--moved {
border-left: 3px solid var(--muted);
}
/* The client portal's pending request on a day of its window: gold is "op aanvraag" everywhere in
this tool, dashed because nothing is planned yet. */
.vic-task-card--requested {
border-left: 3px dashed var(--vic-gold);
}
.vic-task-status {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.vic-task-status--completed,
.vic-task-status--active {
color: var(--vic-success);
}
.vic-task-status--failed {
color: var(--vic-danger);
}
.vic-task-status--unassigned,
.vic-task-status--substitute {
color: var(--chip-warning-text);
}
.vic-task-status--unconfirmed {
color: var(--chip-warning-text);
}
.vic-task-status--planned {
color: var(--muted);
}
.vic-task-status--cancelled {
color: var(--muted);
}
.vic-task-status--moved {
color: var(--muted);
}
/* Gold text is unreadable on the light surface; the dashed stripe carries the meaning. */
.vic-task-status--requested {
color: var(--chip-muted-text);
}
.vic-assignee-state {
font-size: 0.75rem;
font-weight: 600;
}
.vic-assignee-state--success {
color: var(--vic-success);
}
.vic-assignee-state--danger {
color: var(--vic-danger);
}
.vic-assignee-note {
font-size: 0.75rem;
font-style: italic;
opacity: 0.7;
cursor: help;
}
.vic-task-time {
background: var(--vic-red);
color: #fff;
border-radius: var(--vic-radius);
padding: 0.3rem 0.5rem;
font-size: 0.72rem;
font-weight: 600;
flex: 0 0 auto;
white-space: nowrap;
}
/* Its slot has passed — clocking in is no longer possible, so the chip stops competing for
attention. It keeps the red chip's geometry, so nothing shifts as the day moves on. */
.vic-task-time--passed {
background: var(--chip-muted-bg);
color: var(--chip-muted-text);
}
.vic-unscheduled-divider {
border-top: 1px dashed var(--border);
margin: 1rem 0 0.5rem;
padding-top: 0.5rem;
font-size: 0.72rem;
color: var(--vic-ink);
opacity: 0.6;
}
.vic-week-strip {
display: flex;
gap: 0.4rem;
margin-bottom: 1rem;
}
.vic-week-day {
flex: 1;
border: 0.5px solid var(--border);
border-radius: var(--vic-radius);
background: var(--surface-2);
padding: 0.5rem 0.25rem;
text-align: center;
cursor: pointer;
font-size: 0.75rem;
color: var(--vic-ink);
}
.vic-week-day.active {
background: var(--vic-red);
color: #fff;
border-color: var(--vic-red);
}
/* Today keeps a gold ring and caption whether or not it is the selected (red) day, so nobody
has to work out which tile is "now" after clicking around the week. */
.vic-week-day.today {
border: 2px solid var(--vic-gold);
font-weight: 600;
}
.vic-week-day.active.today {
border-color: var(--vic-gold);
}
.vic-week-day-today {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--vic-gold);
margin-top: 0.15rem;
}
.vic-week-day.active .vic-week-day-today {
color: #fff;
}
.vic-week-day-dot {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--vic-gold);
margin-top: 0.25rem;
}
.vic-archived-link {
font-size: 0.75rem;
color: var(--vic-ink);
opacity: 0.55;
text-decoration: underline;
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-top: 0.5rem;
display: inline-block;
}
#vic-back-to-portal-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--sidebar-text-active);
font-size: 0.8rem;
padding: 0.55rem 0.6rem;
text-decoration: none;
margin-bottom: 0.5rem;
}
.vic-portal-topbar {
background: var(--sidebar-bg);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
}
.vic-portal-topbar img {
display: block;
/* The same ambiguous-intrinsic-size trap as .vic-sidebar-logo img: a company logo uploaded as an
SVG that declares only a viewBox has no intrinsic width or height, so max-height alone left the
box at zero and the logo never appeared in the portal's top bar. A definite box plus
object-fit avoids resolving either axis from the file. */
height: 1.75rem;
width: 6rem;
object-fit: contain;
object-position: left center;
}
.vic-portal-datebar {
background: var(--vic-red);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.vic-portal-datebar button {
background: none;
border: none;
color: #fff;
font-size: 1rem;
cursor: pointer;
}
.vic-portal-content {
padding: 0 1rem 4.5rem;
}
.vic-portal-tabs {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: var(--surface-2);
border-top: 0.5px solid var(--border);
}
.vic-portal-tab {
flex: 1;
text-align: center;
padding: 0.6rem 0;
color: var(--vic-ink);
opacity: 0.55;
text-decoration: none;
font-size: 0.75rem;
}
.vic-portal-tab.active {
opacity: 1;
color: var(--vic-red);
font-weight: 600;
}
/* Profiel's own way out, for the touch layout where there is no sidebar to log out from. */
.vic-portal-logout {
display: block;
text-align: center;
margin-top: 2rem;
color: var(--vic-red);
}
/* The touch layout already names the page in its top bar and its active tab, so the heading only
appears in the desktop shell, where both of those are gone. Scoped to .vic-portal-shell for
specificity, not neatness: the element also carries .vic-page-header, whose `display: flex` is
declared later in this file, so a single-class selector here would lose on source order and the
heading would show at every width — outside the padded content area, flush to the left edge. */
.vic-portal-shell .vic-portal-page-header {
display: none;
}
.vic-portal-topbar-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* A manager works in both halves of the tool, so the shortcut across sits with the account chrome
rather than in a full-width band of its own. It is a plain secondary button — the tool's own
component, not a bespoke pill — and only needs to be kept off a second line. */
.vic-portal-topbar .vic-manage-planning-link {
white-space: nowrap;
}
/* The admin sidebar shell (.vic-shell/.vic-sidebar) was designed fixed-width for desktop — at
176px it eats close to half the width of a phone screen with the actual page squeezed into
what's left. MANAGER only ever reaches one admin page (Planning) and does so from a phone, so
this collapses the sidebar into a slim horizontal bar below this breakpoint instead of a
176px-wide column: same nav items, icon-only, logout stays reachable. */
@media (max-width: 640px) {
.vic-shell {
flex-direction: column;
}
.vic-sidebar {
width: 100%;
flex: 0 0 auto;
height: auto;
flex-direction: row;
align-items: center;
padding: 0.5rem 0.75rem;
gap: 0.5rem;
}
.vic-sidebar-logo {
padding: 0;
flex: 0 0 auto;
max-width: 90px;
}
.vic-sidebar-logo img {
width: 2.5rem;
max-width: none;
aspect-ratio: 1 / 1;
object-fit: contain;
margin: 0;
}
.vic-sidebar-nav {
flex-direction: row;
flex: 1 1 0;
min-width: 0;
gap: 0.1rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(to right, #000 88%, transparent);
}
.vic-stat-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.vic-sidebar-link {
padding: 0.5rem;
flex: 0 0 auto;
}
.vic-sidebar-link span {
display: none;
}
.vic-sidebar-user {
border-top: none;
margin-top: 0;
padding: 0;
flex: 0 0 auto;
}
.vic-sidebar-user-info > span {
display: none;
}
#vic-logout-link span {
display: none;
}
#vic-back-to-portal-link {
flex: 0 0 auto;
white-space: nowrap;
margin-bottom: 0;
}
#vic-back-to-portal-link span {
display: none;
}
.vic-content {
padding: 1rem;
}
}
/* Slide-over edit/create panel — replaces the old centered .vic-card modal for the Client,
Location, Contract, and User forms. Header + scrollable sectioned body + sticky footer,
instead of one continuous list of fields. */
.vic-panel-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
z-index: 20;
transition: opacity 0.2s ease;
}
.vic-panel {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 460px;
max-width: 100vw;
background: var(--surface-2);
z-index: 21;
display: flex;
flex-direction: column;
box-shadow: -8px 0 24px rgba(15, 23, 42, 0.14);
}
.vic-panel-transition {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.vic-panel-enter-start {
transform: translateX(24px);
opacity: 0;
}
.vic-panel-enter-end {
transform: translateX(0);
opacity: 1;
}
.vic-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 1.1rem 1.25rem;
border-bottom: 0.5px solid var(--border);
flex: 0 0 auto;
}
.vic-panel-header h2 {
margin: 0;
}
.vic-panel-close {
background: none;
border: none;
cursor: pointer;
color: var(--vic-ink);
opacity: 0.5;
padding: 0.3rem;
display: flex;
border-radius: var(--vic-radius);
flex: 0 0 auto;
}
.vic-panel-close:hover {
opacity: 1;
background: var(--surface-0);
}
.vic-panel-close .vic-icon {
width: 16px;
height: 16px;
}
.vic-panel-body {
flex: 1;
overflow-y: auto;
padding: 1.1rem 1.25rem;
}
.vic-panel-footer {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 1rem 1.25rem;
border-top: 0.5px solid var(--border);
background: var(--surface-2);
}
.vic-panel-section {
margin-bottom: 1.6rem;
}
.vic-panel-section:last-child {
margin-bottom: 0;
}
.vic-panel-section-header {
display: flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.85rem;
}
.vic-panel-section-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--surface-0);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 26px;
color: var(--vic-red);
}
.vic-panel-section-icon .vic-icon {
width: 14px;
height: 14px;
}
.vic-panel-section-title {
font-size: 0.78rem;
font-weight: 600;
opacity: 0.75;
}
.vic-field {
margin-bottom: 0.75rem;
}
.vic-field:last-child {
margin-bottom: 0;
}
.vic-field > label,
.vic-field > .vic-field-label {
display: block;
font-size: 0.72rem;
font-weight: 500;
opacity: 0.65;
margin-bottom: 0.25rem;
}
.vic-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.vic-field--checkbox > label {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 400;
opacity: 1;
margin-bottom: 0;
}
@media (max-width: 640px) {
.vic-panel {
width: 100%;
}
.vic-field-row {
grid-template-columns: 1fr;
}
}
/* Auth pages (login, etc.) — dark background with branded card styling */
body.vic-auth-page {
background: var(--sidebar-bg);
/* The auth page owns the whole viewport: the card is centred in it, not laid on a page. */
min-height: 100vh;
}
body.vic-auth-page .vic-card {
border-top: 3px solid var(--vic-gold);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Facturatie */
.vic-chip--gold {
background: var(--vic-gold);
color: #1D2235;
}
.vic-chip--muted {
background: var(--surface-0);
color: var(--muted);
text-decoration: line-through;
}
.vic-panel--wide {
width: 760px;
}
/* Rapporten */
.vic-report-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.vic-report-period {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 200px;
}
.vic-report-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* The stat grids sit between .vic-card blocks, which carry a 1rem margin — match that inset. */
.vic-report-stats {
margin: 0 0 1rem;
}
.vic-table .num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* The line editor sits below the table now, so the row it belongs to has to say so itself. The
rule is on the first cell only — on every cell it draws a stripe down each column border. */
.vic-table tr.vic-row--editing td {
background: var(--surface-0);
}
.vic-table tr.vic-row--editing td:first-child {
box-shadow: inset 3px 0 0 var(--vic-red);
}
.vic-line-form {
border: 0.5px solid var(--border);
border-radius: var(--radius-card);
padding: 0.75rem;
margin-bottom: 0.75rem;
background: var(--surface-0);
}
.vic-table tr.vic-row--click {
cursor: pointer;
}
.vic-table tr.vic-row--click:hover td {
background: var(--surface-2);
}
.vic-table .vic-subtable {
margin: 0.25rem 0 0.75rem;
}
.vic-report-footnote {
font-size: 0.72rem;
opacity: 0.65;
margin-top: 0.75rem;
}
/* Design system, second layer (2026-09 consistency pass) */
h1, h2, h3 {
margin: 0 0 0.75rem;
line-height: 1.25;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
}
h2 {
font-size: 1.05rem;
font-weight: 700;
}
h3 {
font-size: 0.9rem;
font-weight: 600;
}
.vic-text-muted {
font-size: 0.8rem;
opacity: 0.7;
}
.vic-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.vic-page-header h1 {
margin: 0;
}
.vic-page-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.vic-period-nav {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.vic-period-nav strong {
min-width: 11rem;
text-align: center;
font-size: 0.95rem;
}
/* The employee portal's month nav spans the card instead of sitting inside a header row, so the
chevrons pin to the edges with the label centred between them. */
.vic-period-nav--spread {
display: flex;
justify-content: space-between;
width: 100%;
/* the first day heading sits straight under this, and ran into it without a gap */
margin-bottom: 1rem;
}
.vic-button:hover {
opacity: 0.9;
}
.vic-button .vic-icon {
width: 16px;
height: 16px;
}
.vic-button--secondary {
background: var(--surface-2);
color: var(--vic-ink);
border-color: var(--border-strong);
}
.vic-button--secondary:hover {
background: var(--surface-0);
opacity: 1;
}
.vic-button--danger {
background: var(--surface-2);
color: var(--vic-danger);
border-color: var(--vic-danger);
}
.vic-button--danger:hover {
background: #fdecea;
opacity: 1;
}
.vic-button--ghost {
background: none;
color: var(--vic-ink);
opacity: 0.75;
border-color: transparent;
padding: 0.4rem 0.6rem;
}
.vic-button--ghost:hover {
background: var(--surface-0);
opacity: 1;
}
.vic-button--icon {
padding: 0;
width: 32px;
height: 32px;
flex: 0 0 32px;
}
.vic-button--sm {
padding: 0.35rem 0.6rem;
font-size: 0.72rem;
}
.vic-button:disabled,
.vic-button:disabled:hover,
/* The week card's Inklokken is a inside the card link, not a