/* Colour scheme derived from the logo (petrol #14868f → #0b5563, coral #ff7a5c; neutral tones slightly petrol-tinted).
   Colours checked against WCAG 2.1: text ≥ 4.5:1, borders of controls ≥ 3:1 (light and dark) */
:root {
  --bg: #eef4f6;
  --card: #ffffff;
  --text: #10202a;
  --muted: #455a64;
  --border: #d0dde2;        /* separator lines */
  --control: #7d9098;       /* borders of input fields and buttons */
  --accent: #0e6f7a;        /* text/lines in the accent colour */
  --accent-soft: #dcf0f1;
  --on-accent: #ffffff;
  --fill: linear-gradient(135deg, #13808a, #0b5563); /* filled accent surfaces (primary button, selection) – like the logo */
  --fill-solid: #0e6f7a;    /* the same as a single colour (where no gradient is possible) */
  --on-fill: #ffffff;       /* text on filled accent surfaces */
  /* highlight = the coral of the logo; only for markers/lines/backgrounds, never as text colour on light surfaces */
  --highlight: #ff7a5c;
  --highlight-soft: #ffe8e2;
  --brand-strip: linear-gradient(90deg, #13808a, #0b5563 70%, #ff7a5c); /* petrol → coral like the logo */
  --field: #dfeff1;        /* editable table cells (background only, no border) */
  --field-hover: #cbe6e9;
  --field-focus: #ffffff;
  --readonly: #f8fbfc;      /* display-only cells in tables */
  --danger: #b71c1c;
  --ok: #1f6b26;
  --warn: #8f4f00;
  --plan: #6d28d9;
  /* chart series (validated: lightness band, chroma, CVD separation, contrast ≥ 3:1 vs. card – light and dark) */
  --chart-cur: #008a9c;     /* current period (petrol) */
  --chart-prev: #e8664a;    /* previous year (coral) */
  --toast-link: #7fd6dc;    /* link in the toast at the bottom (the toast is dark) */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23455a64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --radius: 10px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color-scheme: light;
}
/* Theme: "system" follows the OS setting, "light"/"dark" set data-theme on <html> (user preferences) */
:root[data-theme="dark"] {
  --bg: #0a1418; --card: #111e24; --text: #e6f0f2; --muted: #a3b6bd;
  --border: #243840; --control: #62777f;
  --accent: #5ccbd2; --accent-soft: #133a40; --on-accent: #0a1418;
  --fill: linear-gradient(135deg, #13808a, #0b5563); --fill-solid: #13808a; --on-fill: #ffffff;
  --highlight-soft: #3d2219;
  --field: #18323a; --field-hover: #20414a; --field-focus: #111e24; --readonly: #0d191e;
  --danger: #ff8a8a; --ok: #74d483; --warn: #ffb951; --plan: #c4b5fd; --toast-link: #0e6f7a;
  --chart-cur: #1b9aa4; --chart-prev: #dc6248;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3b6bd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1418; --card: #111e24; --text: #e6f0f2; --muted: #a3b6bd;
    --border: #243840; --control: #62777f;
    --accent: #5ccbd2; --accent-soft: #133a40; --on-accent: #0a1418;
    --fill: linear-gradient(135deg, #13808a, #0b5563); --fill-solid: #13808a; --on-fill: #ffffff;
    --highlight-soft: #3d2219;
    --field: #18323a; --field-hover: #20414a; --field-focus: #111e24; --readonly: #0d191e;
    --danger: #ff8a8a; --ok: #74d483; --warn: #ffb951; --plan: #c4b5fd; --toast-link: #0e6f7a;
    --chart-cur: #1b9aa4; --chart-prev: #dc6248;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3b6bd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
::selection { background: #ffd2c6; color: #2a0f08; } /* text selection in the logo coral */
/* Hidden elements stay hidden even if a class sets display */
[hidden] { display: none !important; }
/* Window layout: fixed header, exactly one scroll area below */
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; overflow: hidden; }
h2 { font-size: 1.1rem; margin: 0 0 1rem; }

.topbar {
  flex: none; z-index: 5;
  display: flex; align-items: center; gap: 2rem;
  padding: 0 1.5rem; height: 56px;
  /* thin strip in the logo gradient along the top edge */
  background: var(--brand-strip) top / 100% 3px no-repeat, var(--card); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.brand .logo { width: 26px; height: 26px; flex: none; }
/* current firm next to the product name */
.brand-tenant { font-weight: 500; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.brand-tenant:not(:empty)::before { content: "·"; margin-right: .5rem; color: var(--border); }
/* text button (e.g. "Neue Firma registrieren") */
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-size: .9rem; }
.login-switch { text-align: center; margin: 1rem 0 0; }
/* Tabs scroll in narrow windows so that the user menu on the right stays reachable */
.tabs {
  display: flex; align-items: center; gap: .25rem; height: 100%; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
/* Tabs as rounded boxes; the width of the bold text is reserved in advance so nothing shifts */
.tab {
  flex: none; white-space: nowrap; display: inline-grid; place-items: center;
  border: 0; border-radius: 99px; background: none; color: var(--muted); font: inherit; cursor: pointer;
  padding: .45rem 1rem; transition: background-color .12s, color .12s;
}
.tab::after { content: attr(data-label); font-weight: 600; height: 0; visibility: hidden; overflow: hidden; }
.tab:hover { background: var(--bg); color: var(--text); }
/* active tab filled in the logo blue (like logo and avatar) */
.tab.active, .tab.active:hover {
  background: var(--fill); color: var(--on-fill); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 85, 99, .3);
}
.tab:focus-visible { outline-offset: 0; }

main { flex: 1; min-height: 0; overflow: auto; padding: 1.5rem; }
.view { display: none; max-width: 1400px; margin: 0 auto; }
.view.active { display: block; }
/* Time tracking & planning: the table fills the remaining height and is the only scrolling area */
.view.fill.active { display: flex; flex-direction: column; height: 100%; }
.view.fill > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view.fill .grid-wrap { flex: 1; min-height: 180px; }
/* no orders assigned (time tracking, planning, orders): only the notice – boxes only as high as needed */
.view.fill.no-orders > .card { flex: none; }
.view.no-orders .empty { padding: 1.25rem 0; }
.layout { display: grid; grid-template-columns: 380px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  main { padding: 1rem; }
  .topbar { gap: 1rem; padding: 0 1rem; }
}

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.form { position: sticky; top: 0; }
/* a form with further cards below it in the same column must not stick (it would cover them) */
.stack > .form:not(:only-child) { position: static; }
.form.editing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

label, fieldset { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 .9rem; font-size: .85rem; color: var(--muted); font-weight: 500; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: .35rem; }
label.inline { flex-direction: row; align-items: center; margin: 0; gap: .4rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--control); border-radius: 7px; padding: .55rem .65rem; width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[type="checkbox"] { width: auto; }
/* read-only fields (e.g. the invoice number): shown, but recognisably not editable */
input[readonly] { background: var(--bg); border-color: var(--border); color: var(--muted); cursor: default; }
input[readonly]:focus { outline: none; }

/* ---------- Select lists: arrow always visible (colour: --chevron above), list clearly separated ---------- */
/* Default: custom arrow instead of the browser arrow (which some renderings only show on hover) */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: var(--chevron); background-repeat: no-repeat;
  background-position: right .6rem center; background-size: 12px 8px;
  padding-right: 2rem;
}
select option { background-color: var(--card); color: var(--text); }
select option:disabled { color: var(--muted); }

/* Edge/Chrome from 2025: fully stylable select list */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { background-image: none; padding-right: .65rem; display: flex; align-items: center; gap: .5rem; }
  select::picker-icon { content: ""; width: 12px; height: 8px; margin-left: auto; flex: none; background: var(--chevron) no-repeat center / 12px 8px; transition: rotate .15s; }
  select:open::picker-icon { rotate: 180deg; }
  ::picker(select) {
    border: 1px solid var(--control); border-radius: 8px; background: var(--card); color: var(--text);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 0 1px var(--border); padding: 4px; margin-top: 4px;
    max-height: min(60vh, 420px); overflow-y: auto;
  }
  select option { padding: .45rem .65rem; border-radius: 5px; gap: .5rem; }
  select option:not(:disabled):hover, select option:focus-visible { background-color: var(--accent-soft); outline: none; }
  select option:checked { background-color: var(--fill-solid); color: var(--on-fill); font-weight: 600; }
  select option::checkmark { display: none; }
  select option:disabled { opacity: 1; font-style: italic; }
}

/* Fields with a suggestion list (custom list from combo.js): arrow always visible, rotates when opening */
.combo-wrap { position: relative; display: block; width: 100%; }
.combo-wrap:has(> input[hidden]) { display: none; } /* hidden field: hide the arrow too */
input[data-combo] { padding-right: 2rem; }
input[data-combo][type="number"] { -moz-appearance: textfield; }
input[data-combo][type="number"]::-webkit-inner-spin-button { display: none; }
.combo-icon {
  position: absolute; top: 50%; right: .6rem; width: 12px; height: 8px; margin-top: -4px;
  background: var(--chevron) no-repeat center / 12px 8px; cursor: pointer;
  transition: rotate .15s;
}
.combo-wrap.open .combo-icon { rotate: 180deg; }
.combo-pop {
  position: fixed; z-index: 50; overflow-y: auto; max-width: min(90vw, 520px);
  background: var(--card); color: var(--text); border: 1px solid var(--control); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 0 1px var(--border); padding: 4px;
}
.combo-opt { padding: .45rem .65rem; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt b { font-weight: 700; color: var(--accent); }
.combo-opt.active { background: var(--accent-soft); }
.combo-opt.selected { background: var(--fill); color: var(--on-fill); font-weight: 600; }
.combo-opt.selected b { color: inherit; }

.segmented { display: flex; border: 1px solid var(--control); border-radius: 7px; overflow: hidden; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  flex: 1; margin: 0; text-align: center; padding: .55rem 0; cursor: pointer;
  color: var(--text); font-size: .9rem; font-weight: 500; user-select: none;
}
.segmented label + input + label { border-left: 1px solid var(--border); }
.segmented input:checked + label { background: var(--fill); color: var(--on-fill); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -3px; }

button { font: inherit; cursor: pointer; border-radius: 7px; padding: .6rem 1rem; border: 1px solid var(--control); background: var(--card); color: var(--text); }
button.primary {
  background: var(--fill); border-color: transparent; color: var(--on-fill); font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 85, 99, .25);
}
button.primary:not(:disabled):hover { filter: brightness(1.08); }
/* Button design by position: transparent (ghost) in headers of cards/pages, coloured below forms –
   main action filled (primary), further actions such as preview/cancel lightly tinted (secondary) */
button.secondary { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
button.secondary:not(:disabled):hover { filter: brightness(.96); }
button:disabled { opacity: 1; cursor: not-allowed; background: var(--bg); color: var(--muted); border-color: var(--border); }
::placeholder { color: var(--muted); opacity: 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.ghost:hover { background: var(--accent-soft); }
button.small { padding: .35rem .7rem; font-size: .85rem; }
button.icon { border: 0; background: none; padding: .25rem .4rem; color: var(--muted); }
button.icon:hover { color: var(--accent); }
button.icon.del:hover { color: var(--danger); }
.actions { display: flex; gap: .5rem; }
.actions .primary { flex: 1; }

.hint { color: var(--muted); font-weight: 400; }
.hint.warn { color: var(--warn); }
.error { color: var(--danger); margin: 0 0 .8rem; font-size: .9rem; }
.calc { color: var(--muted); font-size: .85rem; margin: -.3rem 0 .8rem; }
.empty { color: var(--muted); text-align: center; padding: 2rem 0; margin: 0; }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.list-head h2 { margin: 0; }
.filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .filters { grid-template-columns: 1fr 1fr; } }

.stats { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat { background: var(--bg); border-radius: 8px; padding: .6rem .9rem; min-width: 120px; border-left: 3px solid var(--highlight); }
.stat b { display: block; font-size: 1.25rem; }
.stat span { color: var(--muted); font-size: .8rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: .8rem; padding: .5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .sub { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
td.actions-cell { white-space: nowrap; text-align: right; }
td.nowrap { white-space: nowrap; }
tr.editing td { background: var(--accent-soft); }

.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; white-space: nowrap; }
.badge.active { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.badge.expired { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.badge.upcoming { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

.order-cards { display: grid; gap: .9rem; }
.order { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.order.editing { border-color: var(--accent); background: var(--accent-soft); }
.order-top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.order-title { font-weight: 600; }
.order-meta { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.order-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin: .9rem 0 .6rem; }
.order-nums div span { display: block; color: var(--muted); font-size: .75rem; }
.order-nums div b { font-variant-numeric: tabular-nums; }
.bar { position: relative; height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.bar .used { position: absolute; inset: 0 auto 0 0; background: var(--ok); }
.bar.over .used { background: var(--danger); }
.bar-legend { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-top: .35rem; }
.bar-legend .over { color: var(--danger); font-weight: 600; }

/* ---------- Customers ---------- */
.list-head .search { width: 220px; padding: .4rem .6rem; }
.list-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.list-tools label.inline { margin: 0; }
.customer-addr { white-space: pre-line; color: var(--muted); font-size: .85rem; margin-top: .35rem; line-height: 1.45; }

/* ---------- Sign-in ---------- */
body.locked .topbar, body.locked main { display: none; }
.login {
  flex: 1; display: grid; place-items: center; padding: 1.5rem; overflow: auto;
  background: radial-gradient(ellipse at 50% 0%, var(--accent-soft), transparent 65%);
}
.login-card { width: min(100%, 420px); padding: 2rem; background: var(--brand-strip) top / 100% 4px no-repeat, var(--card); }
/* Sign-in: logo and name large and centred above the form */
.login-card .brand-login {
  flex-direction: column; justify-content: center; gap: .6rem; margin: .25rem 0 1.75rem;
  font-size: 2rem; font-weight: 700; letter-spacing: -.01em; color: var(--text);
}
.login-card .brand-login .logo { width: 84px; height: 84px; filter: drop-shadow(0 6px 14px rgba(11, 85, 99, .28)); }
.login-card .brand-login .brand-name { line-height: 1.1; }
.login-card .brand-login .brand-slogan {
  margin-top: -.35rem; font-size: .95rem; font-weight: 500; letter-spacing: .02em; color: var(--muted);
}
.login-card h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
.login-card .hint { display: block; margin: 0 0 1.25rem; line-height: 1.5; }
.login-card button.primary { width: 100%; margin-top: .25rem; }
.or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1.25rem 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.btn-ms {
  display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  padding: .6rem 1rem; border: 1px solid var(--control); border-radius: 7px;
  color: var(--text); text-decoration: none; font-weight: 600; background: var(--card);
}
.btn-ms:hover { background: var(--accent-soft); }

/* User menu top right */
.user { position: relative; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 290px; padding: 6px;
  display: flex; flex-direction: column; box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.user-menu-head { padding: .5rem .65rem .65rem; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-direction: column; }
.user-menu-head span { color: var(--muted); font-size: .8rem; }
.user-menu button { border: 0; background: none; text-align: left; padding: .5rem .65rem; border-radius: 5px; display: flex; align-items: center; gap: .55rem; }
/* Menu icons: all in the same colour */
.user-menu .mi {
  width: 16px; height: 16px; flex: none; color: var(--muted);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Menu groups: "Mein Konto" and "Verwaltung" (administrators only) */
.menu-group {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  padding: .6rem .65rem .25rem; display: flex; align-items: center; gap: .4rem;
}
.menu-group.admin { border-top: 1px solid var(--border); margin-top: 4px; padding-top: .7rem; }
.menu-sep { border-top: 1px solid var(--border); margin: 4px 0; }
/* Persons on the invoice */
.inv-persons { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; }
.inv-persons label.check { margin-bottom: 0; } /* compact list: only the gap between the persons */
.inv-persons .sub { color: var(--muted); font-size: .85rem; }
/* Invoice settings: two columns */
/* first column (letterhead, layout, numbers) 1/3, second column (texts) 2/3 */
.settings-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 2.25rem; }
.settings-page .full { grid-column: 1 / -1; }
/* header: title + note left, save status and preview buttons right */
.settings-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.settings-head h2 { margin: 0 0 .2rem; }
.settings-head .hint { margin: 0; font-size: .85rem; }
.settings-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.save-status { color: var(--muted); font-size: .9rem; margin-right: .25rem; }
.save-status.ok { color: var(--ok); font-weight: 600; }
/* sections with small headings */
.set-group { margin-bottom: 1.5rem; }
.set-group h3 {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .75rem; display: flex; align-items: center; gap: .45rem;
}
.set-group h3::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--highlight); }
.set-group label { margin-bottom: .75rem; }
.set-group .hint { display: block; font-size: .8rem; line-height: 1.45; margin: 0 0 .75rem; }
.set-group .quick { margin: 0 0 .6rem; align-items: stretch; }
.set-group .quick .filebtn { margin: 0; align-items: center; line-height: normal; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
/* invoice texts: German and English side by side, one row per text */
.text-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.text-col-head { font-weight: 600; padding-bottom: .4rem; margin-bottom: .75rem; border-bottom: 1px solid var(--border); }
.set-group .text-col-head .hint { display: inline; margin: 0; font-weight: 400; font-size: .8rem; }
.text-grid .span2 { grid-column: 1 / -1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .settings-page, .text-grid { grid-template-columns: 1fr; }
  .text-col-head { display: none; }
  .text-grid .sr-only { position: static; width: auto; height: auto; clip-path: none; } /* show "(Englisch)" when stacked */
}
.user-menu button:hover, .user-menu button:focus-visible { background: var(--accent-soft); outline: none; }

/* Dialog (change password) */
.dialog { border: 1px solid var(--control); border-radius: var(--radius); background: var(--card); color: var(--text); padding: 1.5rem; width: min(92vw, 400px); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.customer-name-row { grid-template-columns: 2fr 1fr; }
/* figures not shown to standard employees: blurred placeholders (contain no real values) */
.blurred { filter: blur(3.5px); user-select: none; pointer-events: none; color: var(--text); }
.persons tr.own td { font-weight: 600; }
.persons .warn { color: var(--warn); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.assign-row input.unknown-name { box-shadow: inset 0 0 0 2px var(--warn); }
/* employees see orders read-only: no form column */
body:not(.is-admin) #view-orders .layout { grid-template-columns: minmax(0, 1fr); }
/* customer number format: compact row above the customer list */
.cust-no-card { padding: 1rem 1.25rem; border-left: 3px solid var(--highlight); }
.cust-no-row { display: flex; align-items: flex-end; gap: 1rem 1.25rem; flex-wrap: wrap; }
.cust-no-title { flex: 1 1 220px; align-self: center; }
.cust-no-title h2 { margin: 0 0 .15rem; }
.cust-no-title .hint { font-size: .8rem; }
.cust-no-row label { margin: 0; width: 8rem; white-space: nowrap; }
.cust-no-row label:nth-of-type(2) { width: 11.5rem; }
.cust-no-next { display: flex; align-items: baseline; gap: .4rem; padding-bottom: .55rem; color: var(--muted); font-size: .9rem; }
.cust-no-next b { color: var(--text); font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cust-no-card .error { margin: .75rem 0 0; }
.dialog::backdrop { background: rgba(0, 0, 0, .45); }
/* firm master data: wider, scrollable on small screens */
.dialog.company-dialog { width: min(92vw, 520px); max-height: 92vh; overflow-y: auto; }
.company-dialog h3 { margin: 1.25rem 0 .25rem; font-size: 1rem; }
.company-dialog h3 + label { margin-top: .6rem; }
.req { color: var(--highlight); font-weight: 700; }
.company-dialog .req-hint { margin: .25rem 0 .75rem; }
.company-dialog .zip-row { grid-template-columns: 7rem 1fr; }
.saved-ok { color: var(--ok); font-weight: 600; margin: -.3rem 0 .6rem; font-size: .9rem; }

/* ---------- Invoices ---------- */
.stack { display: grid; gap: 1.5rem; align-content: start; }
.quick { display: flex; gap: .5rem; flex-wrap: wrap; margin: -.3rem 0 .9rem; }
label.check { margin-bottom: 1rem; color: var(--text); font-weight: 400; }
.hint.block { display: block; margin: -.5rem 0 .9rem; font-size: .8rem; }
/* standalone notes below forms/tables: same size as the other hints */
.hint.note { display: block; margin: .75rem 0 0; font-size: .8rem; line-height: 1.45; }
.settings summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; }
.settings summary::-webkit-details-marker { display: none; }
/* clearly visible expand arrow (same chevron as the select lists), rotates when opening */
.settings summary::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--chevron) no-repeat center / 14px 9px;
  rotate: -90deg; transition: rotate .15s;
}
.settings[open] summary::before { rotate: 0deg; }
/* vacation list: period in one line, note column 40 % of the width */
.vac-period { white-space: nowrap; }
.inv-list th.vac-note { width: 40%; }
.settings summary h2 { margin: 0; }
.settings[open] summary { margin-bottom: 1rem; }
.settings fieldset { margin-bottom: 1rem; }
.lh-status { color: var(--text); font-weight: 400; font-size: .9rem; margin-bottom: .5rem; }
.filebtn { display: inline-flex; flex-direction: row; margin: 0; cursor: pointer; border: 1px solid var(--control); border-radius: 7px; padding: .35rem .7rem; font-size: .85rem; color: var(--text); font-weight: 400; }
.filebtn:hover { background: var(--accent-soft); }
.inv-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); border-radius: 8px; padding: .6rem .8rem; margin: 0 0 .75rem; font-size: .9rem; }

/* ---------- Dashboard (start page) ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dash-head h1 { margin: 0; font-size: 1.5rem; }
.dash-head .sub { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.dash-card h2 { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 1rem; }
/* key figures as links */
button.stat-link { font: inherit; color: inherit; text-align: left; border: 0; border-left: 3px solid var(--highlight); cursor: pointer; transition: background .15s; }
button.stat-link:hover, button.stat-link:focus-visible { background: var(--accent-soft); outline: none; }
/* links between views (customer, order): look like text, underline on hover */
button.link.xlink { font: inherit; color: inherit; text-decoration: none; text-align: left; border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); }
button.link.xlink:hover, button.link.xlink:focus-visible { color: var(--accent); border-bottom-color: var(--accent); outline: none; }
.dash-notes .xlink { font-weight: 700; }
.dash-card h2 .sub, .dash-card h3 .sub { color: var(--muted); font-size: .85rem; font-weight: 500; }
.dash-card h3 { font-size: .95rem; margin: 1.25rem 0 .5rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.dash-card .stats { margin-bottom: .75rem; }
.dash-card .stat { flex: 1 1 110px; }
.dash-wide { grid-column: 1 / -1; }
.dash-line { margin: .35rem 0; font-size: .9rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; }
.dash-line > span:first-child { color: var(--muted); }
.dash-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.dash-notes li { position: relative; padding: .5rem .75rem .5rem 1.6rem; border-radius: 8px; background: var(--bg); font-size: .9rem; line-height: 1.45; }
.dash-notes li::before { content: ""; position: absolute; left: .65rem; top: .95rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dash-notes li.warn::before { background: var(--warn); }
.dash-notes li.danger::before { background: var(--danger); }
.dash-notes button.link { margin-left: .35rem; font-size: .85rem; }
.dash-ok { margin: 0; color: var(--ok); font-weight: 600; }
.dash-table td .bar { margin-top: .35rem; max-width: 360px; height: 6px; }
.dash-table td.over { color: var(--danger); font-weight: 600; }
.dash-table td.warn { color: var(--warn); font-weight: 600; }
.dash-card { min-width: 0; }
.dash-span2 { grid-column: span 2; }
.dash-table td.muted { color: var(--muted); }
/* utilisation of the coming months */
.dash-util { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.dash-util li { display: grid; grid-template-areas: "month val" "bar bar"; grid-template-columns: 1fr auto; gap: .25rem .75rem; font-size: .85rem; }
.dash-util .du-month { grid-area: month; }
.dash-util .du-val { grid-area: val; color: var(--muted); }
.dash-util .du-val.over { color: var(--danger); font-weight: 600; }
.dash-util .bar { grid-area: bar; }
/* revenue chart: one axis, thin columns with rounded tops, 2px gap, recessive grid */
.dc-legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--muted); margin: 0 0 1.5rem; }
.dc-legend span, .dc-tip span { display: inline-flex; align-items: center; gap: .35rem; }
.dc-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--chart-cur); }
.dc-key.prev { background: var(--chart-prev); }
.dash-chart { position: relative; padding-left: 4.2rem; }
.dc-plot { position: relative; height: 170px; margin-bottom: 1.6rem; }
.dc-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.dc-grid span { position: absolute; right: calc(100% + .5rem); top: -.55rem; font-size: .72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-cols { position: absolute; inset: 0; display: flex; }
.dc-col { flex: 1; position: relative; display: flex; justify-content: center; cursor: default; border-radius: 6px; outline: none; }
.dc-col.hover, .dc-col:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dc-bars { position: absolute; inset: 0 0 0 0; display: flex; justify-content: center; align-items: flex-end; gap: 2px; }
.dc-bar { width: min(14px, 30%); border-radius: 4px 4px 0 0; background: var(--chart-cur); min-height: 0; }
.dc-bar.prev { background: var(--chart-prev); }
.dc-x { position: absolute; top: calc(100% + .35rem); font-size: .72rem; color: var(--muted); white-space: nowrap; }
.dc-x small { font-size: .65rem; }
.dc-tip { position: absolute; top: -.25rem; transform: translate(-50%, -100%); background: var(--card); border: 1px solid var(--control);
  border-radius: 8px; padding: .45rem .65rem; font-size: .8rem; display: flex; flex-direction: column; gap: .15rem; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); z-index: 2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-tip[hidden] { display: none; }
.dc-tip span span { color: var(--muted); }
.dash .up { color: var(--ok); font-weight: 600; }
.dash .down { color: var(--danger); font-weight: 600; }@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } .dash-span2 { grid-column: auto; } .dc-x small { display: none; } }

/* ---------- Reports ---------- */
.rep-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rep-me { color: var(--muted); font-size: .9rem; }
.rep-me b { color: var(--text); }
/* selection as a dropdown panel */
.rep-pick { position: relative; }
.rep-pick > summary {
  list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: .35rem;
  border: 1px solid var(--control); border-radius: 7px; padding: .35rem 2rem .35rem .7rem; font-size: .9rem;
  background: var(--card) var(--chevron) no-repeat right .6rem center / 12px 8px;
}
.rep-pick > summary::-webkit-details-marker { display: none; }
.rep-pick[open] > summary { border-color: var(--accent); }
.rep-pick-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 260px; max-width: min(90vw, 460px);
  background: var(--card); border: 1px solid var(--control); border-radius: 8px; padding: .6rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.rep-pick-actions { display: flex; gap: .4rem; margin-bottom: .5rem; }
.rep-pick-list { display: flex; flex-direction: column; gap: .35rem; max-height: 320px; overflow-y: auto; }
.rep-pick-list label { color: var(--text); font-size: .9rem; margin: 0; padding: .15rem 0; }
.rep-pick-list .sub { color: var(--muted); }
/* table: years expandable, months indented */
.rep-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rep-table th, .rep-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.rep-table th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.rep-table .num { text-align: right; }
.rep-table .rep-sum { font-weight: 600; border-left: 1px solid var(--border); }
.rep-table th.rep-group { text-align: center; border-left: 1px solid var(--border); color: var(--text); }
.rep-table thead tr:last-child th { font-weight: 500; }
/* each person: hours | revenue – separator line before every hours column */
.rep-table td.num:not(.rep-rev), .rep-table thead tr:last-child th.num:not(.rep-rev) { border-left: 1px solid var(--border); }
.rep-table .rep-rev { color: var(--muted); }
.rep-year .rep-rev, .rep-table tfoot .rep-rev { color: var(--text); }
.rep-year, .rep-month { cursor: pointer; }
.rep-year { font-weight: 600; }
.rep-year:hover, .rep-year:focus-visible, .rep-month:hover, .rep-month:focus-visible { background: var(--accent-soft); outline: none; }
.rep-year.open, .rep-month.open { background: var(--bg); }
.rep-caret { display: inline-block; width: 1.1rem; }
.rep-caret::before { content: "▸"; color: var(--accent); display: inline-block; transition: rotate .15s; }
.rep-year.open .rep-caret::before, .rep-month.open .rep-caret::before { rotate: 90deg; }
.rep-month td:first-child { padding-left: 1.6rem; color: var(--muted); }
/* drilldown: orders of a month */
.rep-order td { font-size: .85rem; padding-top: .35rem; padding-bottom: .35rem; color: var(--muted); }
.rep-order td:first-child { padding-left: 3.8rem; white-space: normal; min-width: 14rem; }
.rep-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: 0; }
.rep-hint { margin: .75rem 0 0; font-size: .8rem; }

/* ---------- Planning ---------- */
.period-bar label.inline { color: var(--muted); font-size: .85rem; }
.period-bar label.inline input, .period-bar label.inline select { width: auto; padding: .35rem .5rem; }
.period-bar label.inline select { padding-right: 1.9rem; }
@supports (appearance: base-select) { .period-bar label.inline select { padding-right: .6rem; } }
.plan-grid { min-width: 0; width: max-content; }
/* separate borders: each cell carries its own lines, so the frozen columns (incl. their lines) fully cover the
   content scrolled underneath (with collapsed borders the lines belong to the table and let it shine through) */
.plan-grid { border-collapse: separate; border-spacing: 0; }
.plan-grid th, .plan-grid td { background-clip: border-box; }
.plan-grid .p-order { width: 260px; min-width: 260px; position: sticky; left: 0; z-index: 1; background: var(--card); padding: .45rem .6rem; }
.plan-grid thead .p-order { z-index: 3; }
.plan-grid .p-stat { width: 74px; padding: .45rem .5rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-grid .p-stat.free { font-weight: 700; border-right: 2px solid var(--border); }
.plan-grid .p-month { width: 78px; text-align: right; white-space: nowrap; }
.plan-grid th.p-month .wd { display: block; font-weight: 400; font-size: .7rem; }
.plan-grid .cur { background: var(--accent-soft); }
.plan-grid th.cur { color: var(--accent); box-shadow: inset 0 3px 0 var(--highlight); } /* current month: coral marker */
.plan-grid td.p-cell { position: relative; }
/* booked value (Ist) as a small filled badge in the top right corner of the field – the row stays as high as without it;
   the planned value is centred so the two do not touch; booked above plan = warning colour */
.plan-grid td.p-cell input { text-align: center; }
.plan-grid td.p-cell .p-actual {
  position: absolute; top: 1px; right: 2px; cursor: help; /* tooltip with month, booked and planned value */
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center;
  font-size: .68rem; line-height: 1; font-weight: 700; color: var(--on-fill); background: var(--fill-solid);
  box-shadow: 0 0 0 2px var(--card);
}
.plan-grid td.p-cell .p-actual.over { background: var(--danger); }
.plan-grid td.p-cell.off { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 60%, transparent) 6px 7px); }
.plan-grid td.p-cell.err { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.plan-grid td.p-cell.warn input { color: var(--warn); font-weight: 600; }
.plan-grid td.p-cell.saving input { color: var(--muted); }
.plan-grid td.p-cell.ok { box-shadow: inset 0 0 0 2px var(--ok); }
.plan-grid .over { color: var(--danger); }
/* customer group rows */
.plan-grid tbody tr.p-group td { background: var(--bg); padding: .5rem .6rem .3rem; font-weight: 700; font-size: .85rem; border-bottom: 1px solid var(--border); }
.plan-grid tbody tr.p-group td.p-fix { background-color: var(--bg); }
.plan-grid tbody td.p-indent { padding-left: 1.4rem; }
.plan-grid tfoot td { padding: .4rem .5rem; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); background: var(--bg); }
.plan-grid tfoot td.p-order { text-align: left; font-weight: 600; background: var(--bg); }
.plan-grid tfoot tr.sum td { font-weight: 700; border-top: 2px solid var(--border); }
.plan-grid tfoot td.cur { background: var(--accent-soft); }

/* ---------- Vacation ---------- */
.badge.taken { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.badge.ongoing { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.badge.planned { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
tr.editing td { background: var(--accent-soft); }
#holiday-rows tr.weekend td { color: var(--muted); }

/* Payment status in the invoice archive */
.inv-list td { vertical-align: middle; }
.inv-list .sub { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.badge.open { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.badge.overdue { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.badge.paid { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.stat.danger b { color: var(--danger); }
.stat.ok b { color: var(--ok); }
tr.pay-row td { background: var(--accent-soft); padding: .75rem; }
.pay-form { display: grid; grid-template-columns: 140px 90px 130px 1fr; gap: .5rem .75rem; align-items: end; }
.pay-form label { margin: 0; font-size: .75rem; }
.pay-form .actions { grid-column: 1 / -1; flex-wrap: wrap; }
.pay-form .actions .primary { flex: none; }
.pay-form .hint { grid-column: 1 / -1; margin: 0; font-size: .8rem; }
@media (max-width: 700px) { .pay-form { grid-template-columns: 1fr 1fr; } }

/* ---------- Persons & rates in the order ---------- */
.assign { margin-bottom: 1rem; }
.assign-head, .assign-row { display: grid; grid-template-columns: 1fr 64px 92px 28px; gap: .4rem; align-items: center; }
.assign-head { font-size: .75rem; margin-bottom: .3rem; }
.assign-row { margin-bottom: .4rem; }
.assign-row input { padding: .45rem .5rem; }
.assign-row input[type="number"] { text-align: right; }
.assign-row input[data-combo] { padding-right: 1.8rem; }
.assign-row .combo-icon { right: .5rem; }
.assign-sum { margin-top: .6rem; font-size: .85rem; color: var(--text); line-height: 1.6; font-weight: 400; }
.assign-sum .warn { color: var(--warn); }
.assign-sum .bad { color: var(--danger); font-weight: 600; }

.persons { width: 100%; font-size: .85rem; margin: .8rem 0 .2rem; }
.persons th { padding: .3rem .4rem; font-size: .75rem; }
.persons td { padding: .3rem .4rem; }
.persons tfoot td { font-weight: 600; border-top: 1px solid var(--border); border-bottom: 0; }
.persons .over { color: var(--danger); font-weight: 600; }

/* ---------- Time tracking grid ---------- */
.filters label { margin: 0; font-size: .75rem; gap: .2rem; }
.head-actions { display: flex; gap: .5rem; }
button.danger { color: var(--danger); }
button.attention { border-color: var(--warn); color: var(--warn); font-weight: 600; }

.bulkbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--accent-soft); border-radius: 8px; padding: .5rem .75rem; margin-bottom: .75rem;
}
.bulkbar span { font-weight: 600; margin-right: .5rem; }

/* User top right */
.user { margin-left: auto; display: flex; align-items: center; flex: none; }
.user-chip {
  display: flex; align-items: center; gap: .5rem; border: 1px solid var(--control);
  border-radius: 99px; padding: .25rem .75rem .25rem .3rem; font-weight: 500; cursor: pointer;
}
/* Arrow indicates that a menu opens; rotates when opening like the select lists */
.user-chip::after {
  content: ""; width: 12px; height: 8px; background: var(--chevron) no-repeat center / 12px 8px; transition: rotate .15s;
}
.user-chip[aria-expanded="true"]::after { rotate: 180deg; }
.user-chip:hover { background: var(--accent-soft); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--fill); color: var(--on-fill);
  display: grid; place-items: center; font-size: .75rem; font-weight: 700;
}
#user-input { width: 220px; }

/* Period bar */
.period-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.period-bar h2 { margin: 0; font-size: 1.15rem; min-width: 220px; }
.period-bar .head-actions { margin-left: auto; }
.mode-switch { width: 240px; }
.mode-switch label { padding: .4rem 0; }
.period-nav { display: flex; gap: .25rem; }
.period-nav button { min-width: 2.2rem; }

.grid-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: auto; }
.grid { min-width: 1180px; table-layout: fixed; }
.grid thead th { position: sticky; top: 0; z-index: 2; background: var(--card); padding: .5rem .5rem; }
.grid td { padding: 0; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: middle; }
.grid td:last-child, .grid td.c-state { border-right: 0; }
.grid input:not([type="checkbox"]), .grid select {
  border: 0; border-radius: 0; background-color: transparent; padding: .45rem .5rem; width: 100%; min-width: 0; font-size: .9rem;
}
.grid input:focus, .grid select:focus { outline: 2px solid var(--accent); outline-offset: -2px; background-color: var(--card); }
.grid input[data-combo] { padding-right: 1.7rem; }
.grid .combo-icon { right: .5rem; }
/* Select fields in the table recognisable as such: light surface + arrow */
.grid select { padding-right: 1.7rem; background-position: right .5rem center; }
@supports (appearance: base-select) { .grid select { padding-right: .5rem; } }
.grid input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.grid .c-sel { width: 34px; text-align: center; }
.grid .c-wd { width: 42px; padding: 0 0 0 .6rem; white-space: nowrap; }
.grid .c-date { width: 86px; padding: 0 .35rem 0 .2rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid tr.daystart .c-wd { font-weight: 600; }
.grid tr.weekend .c-wd { color: var(--muted); }
.grid tr.today .c-wd, .grid tr.today .c-date { color: var(--accent); }
.grid tr.today.daystart td.c-sel, .grid tr.today td.c-sel { box-shadow: inset 4px 0 0 var(--highlight); } /* today: coral marker */
.grid tr.holiday td { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.grid tr.holiday .c-wd, .grid tr.holiday .c-date { color: var(--warn); }
.grid tr.vacation td { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.grid tr.vacation .c-wd, .grid tr.vacation .c-date { color: var(--ok); }
.grid tr.holiday input::placeholder, .grid tr.vacation input::placeholder { font-style: italic; }
.grid tr.holiday [data-f="activity"]::placeholder { color: var(--warn); }
.grid tr.vacation [data-f="activity"]::placeholder { color: var(--ok); }
.grid .c-hours { width: 66px; }
.grid th.c-hours { padding-left: .2rem; padding-right: .45rem; }
.grid .c-location { width: 106px; }
.grid .c-order { width: 300px; }
.grid .c-activity { width: 250px; }
.grid .c-details { width: auto; }
.grid .c-sum { width: 56px; padding: 0 .45rem; font-weight: 600; border-left: 1px solid var(--border); }
.grid td.c-sum { vertical-align: middle; border-top: 2px solid var(--border); }
.grid td.c-sum.empty-sum { color: var(--muted); font-weight: 400; }
.grid .c-state { width: 10px; padding: 0; font-size: .75rem; text-align: center; font-weight: 700; }
/* 3 buttons à 24 px with 2 px gap; the same space before (status column 10 px + 2 px gap) and after (12 px padding);
   font-size 0 removes the gaps between the inline buttons */
.grid .c-act { width: 90px; text-align: right; white-space: nowrap; padding: 0 12px 0 0; font-size: 0; }
/* period navigation (back/forward) with line icons instead of ‹ › characters */
button.nav-btn { display: inline-grid; place-items: center; padding: .35rem .5rem; }
.nav-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* number fields everywhere without spin arrows (they cover the value; ↑/↓ keys still work) */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* row actions as small square buttons with line icons */
.row-btn {
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; margin-left: 2px; vertical-align: middle;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--muted);
}
.key-icon {
  display: inline-grid; place-items: center; width: 20px; height: 20px; vertical-align: -5px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--card); color: var(--muted);
}
.key-icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.row-btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--card)); border-color: var(--danger); color: var(--danger); }
.grid tr.extra [data-act="reset"], .grid tr:not(.extra) [data-act="del"] { display: none; }
.grid tr.draft:not(.touched) [data-act="reset"] { visibility: hidden; }
.grid option:disabled { color: var(--muted); }
.toast { display: flex; align-items: center; gap: 1rem; }
.toast button { background: none; border: 0; color: var(--accent); font-weight: 700; padding: 0; }
.toast button { color: var(--toast-link); }
.grid td.invalid { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.grid tr.selected td { background: var(--accent-soft); }
.grid tr.daystart td { border-top: 2px solid var(--border); }
.grid tr.daystart .c-date { font-weight: 600; }
.grid tr.weekend td { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.grid tr.weekend .c-date { color: var(--muted); }
.grid tr.draft:not(.touched) select, .grid tr.draft:not(.touched) input { color: var(--muted); }
.grid tr.draft:not(.touched) [data-act="dup"] { visibility: hidden; }
.grid tr.group td {
  position: sticky; top: 33px; z-index: 1; background: var(--accent-soft); color: var(--accent);
  padding: .4rem .6rem; font-weight: 600; font-size: .85rem; border-top: 2px solid var(--border);
}
.grid tr.group .gsum { float: right; }
.state-dirty { color: var(--warn); }
.state-saving { color: var(--muted); }
.state-ok { color: var(--ok); }
.state-error { color: var(--danger); cursor: help; }

/* ---------- Highlight editable cells clearly (time tracking & planning) ---------- */
/* Display cells: grey background */
.grid td { background-color: var(--readonly); }
/* Editable cells: small padding, containing the field with a light background */
.grid td:has(> [data-f], > .combo-wrap > [data-f]), .plan-grid td.p-cell:not(.off) { padding: 3px; }
/* background colour only, no border */
.grid [data-f], .plan-grid td.p-cell input {
  background-color: var(--field); border-radius: 4px; box-shadow: none;
  transition: background-color .12s;
}
.grid [data-f]:hover, .plan-grid td.p-cell input:hover { background-color: var(--field-hover); }
/* Focus: lighter background + focus ring (needed for keyboard use) */
.grid [data-f]:focus, .plan-grid td.p-cell input:focus {
  background-color: var(--field-focus); outline: 2px solid var(--accent); outline-offset: -2px;
}
/* Show states via the field's background colour */
.grid td.invalid [data-f], .plan-grid td.p-cell.err input { background-color: color-mix(in srgb, var(--danger) 18%, var(--field)); }
.plan-grid td.p-cell.ok input { background-color: color-mix(in srgb, var(--ok) 22%, var(--field)); }
.plan-grid td.p-cell.ok { box-shadow: none; }
.plan-grid td.p-cell { vertical-align: middle; }
/* Blank, untouched day rows: fields a bit more subdued but clearly recognisable */
.grid tr.draft:not(.touched) [data-f]:not(:hover):not(:focus) { background-color: color-mix(in srgb, var(--field) 70%, var(--readonly)); }
/* Weekend, public holiday, vacation: the tint stays visible on the display cells */
.grid tr.weekend td { background-color: color-mix(in srgb, var(--bg) 60%, var(--readonly)); }
.grid tr.holiday td { background-color: color-mix(in srgb, var(--warn) 12%, var(--readonly)); }
.grid tr.vacation td { background-color: color-mix(in srgb, var(--ok) 12%, var(--readonly)); }
.plan-grid th.cur { background-color: var(--accent-soft); }
/* current month: only a light tint behind editable cells, so the input keeps standing out with its field colour */
.plan-grid td.p-cell.cur { background-color: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.plan-grid tbody td.p-order { background-color: var(--readonly); }
/* Frozen columns (order + key figures) – position set by planning.js */
.plan-grid .p-fix { position: sticky; z-index: 1; }
.plan-grid thead .p-fix { z-index: 3; }
.plan-grid tbody .p-fix { background-color: var(--readonly); }
.plan-grid tfoot .p-fix { background-color: var(--bg); }

.keys { color: var(--muted); font-size: .8rem; margin: .75rem 0 0; line-height: 1.7; }
kbd {
  font-family: inherit; font-size: .75rem; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 .35rem; background: var(--bg); color: var(--text);
}

.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: .7rem 1.2rem; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.2); font-size: .9rem; z-index: 20;
}