/* Kleuren, fonts en maatvoering volgen wea-crm (src/app/globals.css + shadcn sidebar). */
:root {
  --background: 240 20% 98%;
  --foreground: 244 38% 28%;
  --card: 0 0% 100%;
  --primary: 244 38% 28%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 11% 90%;
  --muted: 240 11% 96%;
  /* Iets donkerder dan de CRM-waarde (65%) zodat lopende tekst WCAG AA haalt. */
  --muted-foreground: 240 5% 42%;
  --accent: 244 40% 96%;
  --destructive: 0 84% 60%;
  --border: 240 5% 90%;
  --ring: 244 38% 28%;
  --radius: .5rem;
  --sidebar-background: 240 48% 10%;
  --sidebar-foreground: 0 0% 96%;
  --sidebar-accent: 244 40% 36%;
  --sidebar-border: 240 2% 35%;
  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
  --font-body: 'PT Sans', 'Segoe UI', Arial, sans-serif;
  --font-headline: 'Playfair Display', Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 240 10% 10%; --foreground: 0 0% 96%; --card: 240 10% 12%;
    --primary: 210 90% 60%; --primary-foreground: 240 10% 10%; --secondary: 240 10% 20%;
    --muted: 240 10% 15%; --muted-foreground: 240 5% 65%; --accent: 240 10% 20%;
    --destructive: 0 72% 50%; --border: 240 10% 25%; --ring: 210 90% 60%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: 240 10% 10%; --foreground: 0 0% 96%; --card: 240 10% 12%;
  --primary: 210 90% 60%; --primary-foreground: 240 10% 10%; --secondary: 240 10% 20%;
  --muted: 240 10% 15%; --muted-foreground: 240 5% 65%; --accent: 240 10% 20%;
  --destructive: 0 72% 50%; --border: 240 10% 25%; --ring: 210 90% 60%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); background: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; font-synthesis: none; }
[hidden] { display: none !important; }
svg { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; }
p { line-height: 1.6; }
h1, h2 { font-family: var(--font-headline); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); margin: 0 0 .25rem; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.muted { color: hsl(var(--muted-foreground)); font-size: .875rem; }
.eyebrow { font-size: .6875rem; letter-spacing: .12em; font-weight: 700; color: hsl(var(--muted-foreground)); margin: 0 0 .5rem; }

/* Knoppen en formulieren */
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: .5rem 1rem; font-size: .875rem; font-weight: 700; min-height: 2.5rem; transition: opacity .15s, background .15s; }
.btn:hover { opacity: .9; }
.btn-outline { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-outline:hover { background: hsl(var(--accent)); opacity: 1; }
.btn-block { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: inherit; }
.icon-btn svg { width: 1.125rem; height: 1.125rem; }
label { display: block; font-size: .875rem; font-weight: 700; margin-bottom: 1rem; }
input { display: block; width: 100%; height: 2.5rem; padding: .5rem .75rem; margin-top: .5rem; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); background: hsl(var(--card)); color: inherit; font: inherit; font-size: .875rem; }
.password-field { margin-bottom: 1.25rem; }
.password-field > label { margin-bottom: .5rem; }
.password-control { position: relative; }
.password-control input { margin-top: 0; padding-right: 3rem; }
.password-control button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.25rem; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: hsl(var(--muted-foreground)); display: flex; align-items: center; justify-content: center; }
.password-control button:hover, .password-control button[aria-pressed="true"] { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.notice { padding: .75rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--muted)); font-size: .875rem; }
#demo-login { margin-top: 1rem; }

/* Aanmeldscherm */
.auth { min-height: 100svh; display: grid; grid-template-columns: minmax(29rem, 40vw) 1fr; background: #020617; padding: .75rem; }
.auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem; background: #08111f; color: #fff; border-radius: 2px 0 0 2px; }
.auth-brand::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 52px 52px; }
.auth-brand::after { content: ''; position: absolute; inset: 0 0 auto; height: 10rem; background: radial-gradient(circle at top, rgba(59,130,246,.28), transparent 62%); }
.auth-brand > * { position: relative; z-index: 1; }
.auth-logo { align-self: center; margin-top: 2rem; display: flex; align-items: center; justify-content: center; width: 11rem; height: 10rem; background: #fff; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(23,37,84,.3); }
.auth-logo img { width: auto; height: 8rem; }
.auth-copy { max-width: 28rem; padding-bottom: 2rem; }
.auth-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .28em; color: #60a5fa; margin: 0 0 1.25rem; }
.auth-copy h1 { font-family: var(--font-body); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.12; letter-spacing: 0; margin: 0; }
.auth-rule { height: 1px; width: 3rem; background: #60a5fa; margin: 1.25rem 0 2rem; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; font-size: .875rem; color: #f1f5f9; }
.auth-points li { display: flex; align-items: center; gap: .75rem; }
.auth-points span { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; background: rgba(59,130,246,.15); color: #93c5fd; }
.auth-footnote { font-size: .75rem; color: rgba(147,197,253,.7); margin: 0; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 3rem 4rem; background: hsl(var(--card)); border-radius: 0 2px 2px 0; }
.auth-card { width: 100%; max-width: 28rem; }
.auth-card h2 { font-family: var(--font-body); font-size: 1.875rem; margin: 0 0 .5rem; }

/* Statusmeldingen */
.status-box { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.status-box:has(#status:empty):has(#retry[hidden]) { display: none; }
#status { margin: 0; flex: 1 1 16rem; }
#status:not(:empty), .status-line:not(:empty) { padding: .75rem 1rem; background: hsl(var(--accent)); border: 1px solid hsl(var(--border)); border-left: 3px solid hsl(var(--primary)); border-radius: calc(var(--radius) - 2px); font-size: .875rem; }
.status-line { margin: 0 0 1.5rem; }

/* Shell */
.shell { display: flex; min-height: 100svh; }
.sidebar { position: sticky; top: 0; height: 100svh; width: var(--sidebar-width); flex-shrink: 0; display: flex; flex-direction: column; gap: .5rem; padding: .5rem; background: hsl(var(--sidebar-background)); color: hsl(var(--sidebar-foreground)); border-right: 1px solid hsl(var(--sidebar-border)); z-index: 20; transition: width .2s ease; }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; height: 2.5rem; padding: 0 .75rem; border-radius: calc(var(--radius) - 2px); text-decoration: none; }
.sidebar-brand:hover { background: hsl(var(--sidebar-accent)); }
.sidebar-brand img { width: 1.25rem; height: 1.25rem; object-fit: contain; filter: brightness(0) invert(1); flex-shrink: 0; }
.sidebar-brand .label { font-family: var(--font-headline); font-weight: 700; font-size: 1.125rem; }
.sidebar .icon-btn:hover, .sidebar-nav a:hover { background: hsl(var(--sidebar-accent)); }
.sidebar-nav a[aria-current="page"] { background: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 700; }
.sidebar-separator { border: 0; border-top: 1px solid hsl(var(--sidebar-border)); margin: 0 .5rem; width: auto; }
.sidebar-nav { flex: 1; overflow-y: auto; padding-top: .5rem; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.sidebar-nav a { display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: calc(var(--radius) - 2px); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.sidebar-footer { display: flex; flex-direction: column; gap: .5rem; }
.sidebar-badge { display: flex; align-items: center; gap: .5rem; margin: 0 .5rem; padding: .5rem .75rem; border-radius: var(--radius); background: hsl(var(--sidebar-accent)); }
.sidebar-badge svg { width: .875rem; height: .875rem; }
.sidebar-badge .label { display: flex; flex-direction: column; min-width: 0; }
.sidebar-badge strong { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.sidebar-badge span { font-size: .75rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user { display: flex; align-items: center; justify-content: space-between; padding: .5rem; }
.moon { display: none; }
:root[data-theme="dark"] .sun { display: none; }
:root[data-theme="dark"] .moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .sun { display: none; } :root:not([data-theme]) .moon { display: block; } }

/* Gebruikersmenu */
.user-menu { position: relative; }
.avatar { width: 2rem; height: 2rem; border-radius: 999px; border: 0; padding: 0; background: hsl(240 11% 96%); color: hsl(244 38% 28%); font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.avatar:focus-visible { outline-color: hsl(var(--sidebar-accent)); }
.dropdown { position: absolute; bottom: calc(100% + .5rem); left: 0; width: 14rem; padding: .25rem; background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.15), 0 4px 6px -4px rgba(0,0,0,.1); z-index: 50; }
.dropdown-label { padding: .375rem .5rem; }
.dropdown-label p { margin: 0; line-height: 1.3; }
.dropdown-label p:first-child { font-size: .875rem; font-weight: 700; }
.dropdown-label .muted { font-size: .75rem; word-break: break-all; }
.dropdown hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: .25rem -.25rem; }
.dropdown-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .375rem .5rem; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: inherit; font-size: .875rem; text-align: left; }
.dropdown-item:hover, .dropdown-item:focus-visible { background: hsl(var(--accent)); }

/* Ingeklapte zijbalk (alleen iconen), zoals collapsible="icon" in de CRM */
.sidebar-toggle { position: fixed; top: 1rem; left: calc(var(--sidebar-width) - 1.25rem); z-index: 50; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); transition: left .2s, background .2s, box-shadow .2s; }
.sidebar-toggle:hover { background: hsl(var(--muted)); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }

@media (min-width: 768px) {
  .shell.collapsed .sidebar { width: var(--sidebar-width-icon); }
  .shell.collapsed .sidebar .label { display: none; }
  .shell.collapsed .sidebar-brand { padding: 0; justify-content: center; }
  .shell.collapsed .sidebar-user { flex-direction: column; align-items: center; gap: .5rem; padding: .25rem 0; }
  .shell.collapsed .sidebar-nav a { justify-content: center; }
  .shell.collapsed .sidebar-badge { margin: 0; padding: 0; width: 2rem; height: 2rem; justify-content: center; align-self: center; }
  .shell.collapsed .sidebar-separator { margin: 0; }
  .shell.collapsed .sidebar-toggle { left: calc(var(--sidebar-width-icon) - 1.25rem); }
  .shell.collapsed .topbar-brand { display: inline; margin-left: 1.5rem; }
}

/* Topbalk */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; gap: .5rem; padding: .5rem 1.5rem; background: hsl(var(--card) / .95); border-bottom: 1px solid hsl(var(--border)); backdrop-filter: blur(8px); }
.topbar-row { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; }
.topbar-brand { display: none; font-family: var(--font-headline); font-weight: 700; font-size: 1.125rem; color: hsl(var(--primary)); text-decoration: none; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.badge { border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-radius: calc(var(--radius) - 2px); padding: .25rem .5rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.badge:empty { display: none; }
.breadcrumbs { display: flex; align-items: center; gap: .375rem; min-height: 1.5rem; padding-left: 2rem; font-size: .875rem; color: hsl(var(--muted-foreground)); flex-wrap: wrap; }
.breadcrumbs a { display: inline-flex; align-items: center; gap: .375rem; text-decoration: none; }
.breadcrumbs a:hover { color: hsl(var(--foreground)); }
.breadcrumbs svg { width: .875rem; height: .875rem; }
.breadcrumbs .crumb-sep { opacity: .6; }
#crumb-page { color: hsl(var(--foreground)); font-weight: 700; }
.mobile-only { display: none; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; }

/* Inhoud */
.content { flex: 1; padding: 1.5rem; width: 100%; max-width: 1400px; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.page-header p { margin: 0; }
.panel { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 1.5rem; margin-bottom: 1.5rem; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.25rem 0 1.5rem; }
.metric { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 1.25rem 1.5rem; }
.metric p { font-size: .875rem; font-weight: 700; margin: 0; color: hsl(var(--muted-foreground)); }
.metric strong { font-size: 2rem; font-weight: 700; display: block; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
td, th { padding: .5rem 0; text-align: left; border-bottom: 1px solid hsl(var(--border)); font-variant-numeric: tabular-nums; }
thead th { color: hsl(var(--muted-foreground)); font-weight: 700; }
td:last-child, th:last-child { text-align: right; }
summary { font-weight: 700; cursor: pointer; }
dt { font-weight: 700; margin-top: 1rem; }
dd { margin: .375rem 0; color: hsl(var(--muted-foreground)); line-height: 1.6; }
/* Medewerkersoverzicht */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.panel-header p { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: 1.25rem 0 .5rem; }
.field { margin: 0; font-size: .75rem; color: hsl(var(--muted-foreground)); display: flex; flex-direction: column; gap: .375rem; }
.field input { margin: 0; width: 18rem; max-width: 100%; }
select { height: 2.5rem; padding: 0 2rem 0 .75rem; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); background: hsl(var(--card)); color: hsl(var(--foreground)); font: inherit; font-size: .875rem; min-width: 12rem; }
.table-scroll { overflow-x: auto; margin: 0 -1.5rem; padding: 0 1.5rem; }
.employee-table { min-width: 66rem; }
.billable-table { min-width: 62rem; }
.billable-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.billable-table .price-warning { display: block; font-size: .7rem; }
#billable-chart { margin: .5rem 0 1.5rem; }
.hours-bar-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 6rem; gap: .75rem; align-items: center; font-size: .8rem; margin: .35rem 0; }
.hours-bar-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.hours-bar-track { height: 1rem; background: hsl(var(--muted)); border-radius: .2rem; overflow: hidden; }
.hours-bar-fill { height: 100%; background: hsl(var(--primary)); }
.hours-trend-chart { width: 100%; overflow-x: auto; }
.hours-trend-chart svg { display: block; width: 100%; min-width: 600px; height: auto; aspect-ratio: 1000 / 320; stroke: none; stroke-width: 1; }
.hours-trend-chart text { fill: currentColor; stroke: none; font-size: 12px; }
.hours-trend-grid { stroke: hsl(var(--border)); stroke-dasharray: 3 3; }
.hours-trend-cursor { stroke: hsl(var(--primary)); stroke-dasharray: 4 4; pointer-events: none; }
.hours-trend-legend { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.hours-trend-legend button { display: inline-flex; align-items: center; gap: .4rem; background: transparent; color: inherit; border: 1px solid hsl(var(--border)); padding: .4rem .6rem; border-radius: .3rem; font-size: .8rem; cursor: pointer; }
.hours-trend-legend button[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.hours-trend-swatch { width: .7rem; height: .7rem; border-radius: 50%; }
.hours-trend-details { min-height: 3rem; font-size: .8rem; margin: .75rem 0 1.25rem; }
.employee-table .employee-office { min-width: 7rem; max-width: 10rem; white-space: normal; font-size: .8rem; }
.employee-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: .75rem 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.employee-totals span, .employee-totals small { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.employee-totals strong { display: block; margin: .2rem 0; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.employee-totals strong > span { display: inline; font-size: inherit; color: inherit; }
.employee-totals strong > .total-percentage { font-size: .9rem; font-weight: 400; white-space: nowrap; }
#employees-totals-basis { font-size: .75rem; margin: .5rem 0 .75rem; }
@media (max-width: 600px) { .employee-totals { grid-template-columns: 1fr; gap: .5rem; } }
.employees-scrollbar { position: sticky; top: 0; z-index: 9; height: 24px; overflow-x: scroll; overflow-y: hidden; background: hsl(var(--card)); border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.employees-scrollbar > div { height: 1px; }
.employees-scrollbar:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.cost-settings { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.cost-settings .toolbar { align-items: end; }
.cost-settings .field input { width: 12rem; max-width: 100%; }
.employee-table .calculated { background: hsl(var(--accent)); }
.cost-details { min-width: 8rem; }
.cost-detail-body { width: 32rem; max-width: 80vw; white-space: normal; padding: .75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); margin-top: .5rem; }
.cost-detail-body p { font-size: .8125rem; }
.cost-matrix caption { text-align: left; margin-bottom: .5rem; }
.cost-matrix .selected-rate { background: hsl(var(--accent)); }
.cost-matrix .selected-scenario { font-weight: 700; box-shadow: inset 0 -2px hsl(var(--primary)); }
.cost-detail-body { overflow-x: auto; }
.employee-table .cost-matrix td, .employee-table .cost-matrix th { padding: .4rem; text-align: right; }
.employee-table .price-warning { color: hsl(var(--foreground)); font-size: .75rem; white-space: normal; }
.employee-table th, .employee-table td { padding: .625rem .75rem .625rem 0; vertical-align: middle; text-align: left; }
.employee-table td:last-child, .employee-table th:last-child { text-align: left; }
.employee-table .num { text-align: right; padding-right: 1.5rem; white-space: nowrap; }
.employee-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.employee-table th[scope="row"] { font-weight: 400; }
.employee-table > thead > tr:not(.employee-groups) > th:first-child,
.employee-table > .employee-block > tr > .employee-name {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 16rem;
  padding-left: .75rem;
  background: hsl(var(--card));
  box-shadow: 2px 0 0 hsl(var(--border));
}
.employee-table > thead > tr:not(.employee-groups) > th:first-child { z-index: 3; }
.employee-table > .employee-block > tr > th,
.employee-table > .employee-block > tr > td { font-variant-numeric: tabular-nums; }
.employee-table > .employee-block { border-bottom: 1px solid hsl(var(--border)); }
.employee-table > .employee-block:hover > tr > th,
.employee-table > .employee-block:hover > tr > td,
.employee-table > .employee-block:focus-within > tr > th,
.employee-table > .employee-block:focus-within > tr > td { background: hsl(var(--muted)); }
.employee-table .employee-name { font-weight: 400; }
.new-salary-input[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
.header-secondary, .stack-value { display: block; }
.employee-table thead .header-secondary { font-weight: 400; margin-top: .25rem; font-size: .7rem; text-transform: none; letter-spacing: 0; color: hsl(var(--muted-foreground)); }
.stack-value { line-height: 1.5; }
.stack-value.secondary { color: hsl(var(--muted-foreground)); font-size: .8rem; }
.margin-value { padding: .1rem .4rem; border-radius: .25rem; }
.margin-value[data-band="low"] { background: #fee2e2; color: #991b1b; }
.margin-value[data-band="medium"] { background: #fef3c7; color: #713f12; }
.margin-value[data-band="high"] { background: #dcfce7; color: #166534; }
.employee-table .employee-details { padding-right: .75rem; }
.calculation-trigger { width: 1.8rem; height: 1.8rem; padding: 0; border: 0; background: transparent; color: hsl(var(--primary)); font-size: 1.15rem; }
.calculation-popup { position: fixed; inset: auto; margin: 0; z-index: 50; width: min(34rem, calc(100vw - 16px)); max-height: min(75vh, 40rem); overflow: auto; padding: 1rem; color: hsl(var(--foreground)); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 8px 24px #0003; font-size: .8125rem; }
.calculation-popup .cost-detail-body { width: 100%; max-width: 100%; border: 0; padding: 0; }
.calculation-popup h3 { margin-top: 0; }
.calculation-popup table { width: 100%; }
.calculation-popup .cost-matrix td, .calculation-popup .cost-matrix th { padding: .4rem; text-align: right; }
@media (max-width: 600px) {
  .employee-table > .employee-block > tr > .employee-name,
  .employee-table > thead > tr:not(.employee-groups) > th:first-child { min-width: 10rem; max-width: 11rem; }
  .employee-identity { align-items: flex-start; }
  .employee-identity .person-photo { width: 1.75rem; height: 1.75rem; }
}
.person-name { display: block; font-weight: 700; }
.person-photo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; overflow: hidden; background: hsl(var(--accent)); color: hsl(var(--foreground)); font-size: .75rem; font-weight: 700; }
.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-photo.photo-trigger { padding: 0; border: 0; flex-shrink: 0; cursor: zoom-in; }
.person-photo.photo-trigger:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.employee-photo-dialog { width: min(44rem, calc(100vw - 2rem)); max-height: 90vh; overflow: auto; padding: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.employee-photo-dialog::backdrop { background: rgb(0 0 0 / .7); }
.employee-photo-dialog h2 { padding-right: 2.5rem; margin: 0 0 1rem; font-size: 1.1rem; }
.employee-photo-dialog > img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.employee-photo-close { position: absolute; right: .75rem; top: .75rem; width: 2rem; height: 2rem; padding: 0; font-size: 1.5rem; }
.employee-table .sales-price-edit { display: block; margin-left: auto; padding: 0; height: auto; min-height: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: 1.5; text-align: right; text-decoration: underline dotted; text-underline-offset: .2rem; }
.employee-table .sales-price-edit.secondary { font-size: .8rem; color: hsl(var(--muted-foreground)); }
.employee-table .sales-price-edit:disabled { opacity: 1; text-decoration: none; cursor: default; }
.sales-price-dialog { width: min(30rem, calc(100vw - 2rem)); max-height: 90vh; overflow: auto; padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.sales-price-dialog::backdrop { background: rgb(0 0 0 / .5); }
.sales-price-dialog h2 { margin-top: 0; font-size: 1.2rem; }
.sales-price-dialog .field { margin-bottom: .75rem; }
.sales-price-dialog input, .sales-price-dialog select { width: 100%; }
.sales-price-dialog input[readonly] { background: hsl(var(--muted)); }
.status-pill { display: inline-flex; align-items: center; gap: .375rem; margin-top: .125rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.status-pill::before { content: ''; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
.status-active::before { background: hsl(142 71% 40%); }
.status-future::before { background: hsl(217 91% 55%); }
.status-former::before { background: hsl(240 5% 60%); }
.status-other::before { background: hsl(38 92% 50%); }
td.empty { text-align: center; padding: 2rem 0; color: hsl(var(--muted-foreground)); }
#employees-count { margin: .5rem 0; }
#employees-scope { margin: 1rem 0 0; }
.footer { padding: 1.5rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: .75rem; }

@media (max-width: 1100px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
  .auth { grid-template-columns: 1fr; padding: 0; }
  .auth-brand { min-height: 30rem; padding: 2.5rem 2rem; border-radius: 0; }
  .auth-main { padding: 3rem 1.5rem; border-radius: 0; }
}
@media (max-width: 767px) {
  .sidebar { position: fixed; left: 0; top: 0; width: 18rem; transform: translateX(-100%); transition: transform .2s ease; z-index: 40; }
  .shell.mobile-open .sidebar { transform: none; }
  .sidebar-toggle { display: none; }
  .mobile-only { display: inline-flex; }
  .topbar { padding: .5rem 1rem; }
  .breadcrumbs { padding-left: .25rem; }
  .content { padding: 1rem; }
  .columns { grid-template-columns: 1fr; gap: 0; }
  .panel { padding: 1.25rem; }
  .table-scroll { margin: 0 -1.25rem; padding: 0 1.25rem; }
  .field, .field input, select { width: 100%; }
  .metric strong { font-size: 1.75rem; }
  .page-header { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.employee-table > thead .employee-groups th { text-align: left; padding: .8rem; background: hsl(var(--muted)); border-bottom: 2px solid hsl(var(--border)); }
.employee-table > thead .employee-groups th + th { border-left: 2px solid hsl(var(--border)); }
.employee-identity { display: flex; gap: .65rem; align-items: center; }
.person-client { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.new-salary-input { display: block; width: 9rem; height: 1.5rem; padding: .1rem .35rem; margin: .15rem 0 0 auto; text-align: right; font-size: .8rem; }