/*
 * Admin panel design system.
 * Reference: canvas board "Statussystem" (claude.ai/artifact/KQiqZ1GyDcWaW23GCdyvGD).
 * Pages rendered with the new layout get <body class="panel">; legacy Bootstrap pages only use the header (.ph).
 */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/admin.fonts/SchibstedGrotesk-Variable.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('/admin.fonts/AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #0A0A0A;
  --muted: #6E6E73;
  --paper: #FFFFFF;
  --surface: #F2F2F3;
  --control: #E6E9EB;
  --rule: rgba(0, 0, 0, 0.12);
  --red: #E30613;
  --yellow: #E8A800;
  --yellow-badge: #FFCC00;
  --green: #22A447;
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
}

html { scroll-padding-top: 80px; }
body.panel {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
}
body.panel a { color: var(--ink); text-decoration: none; }
body.panel main a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.panel button, body.panel input, body.panel textarea, body.panel select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.panel .mono { font-family: var(--mono); letter-spacing: 0; }
body.panel .muted { color: var(--muted); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.ph {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--ink);
}
.ph-inner { max-width: 1400px; margin: 0 auto; padding: 12px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.ph-brand { display: flex; flex-direction: column; line-height: 1.1; color: var(--ink); text-decoration: none; }
.ph-brand b { font-weight: 600; font-size: 15px; }
.ph-brand span { font-size: 13px; color: var(--muted); }
.ph-end { margin-left: auto; }
.ph a:hover { text-decoration: none; }
.ph-end { margin: 0 0 0 auto; }
/* Search: a field, not a pill (like every input), pushed to the right before "Abmelden". */
.ph-search { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 1 240px; min-width: 160px; padding: 0 12px; border-radius: 10px; background: var(--surface); color: var(--muted); }
.ph-search input { flex: 1; min-width: 0; min-height: 30px; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.ph-search:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.ph-search { position: relative; }
.ph-search input::-webkit-search-cancel-button { display: none; }
/* Suggestions: a plain list under the field; kind in small grey, name, then where/what. */
.ph-suggest { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: min(440px, 90vw); margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: #FFFFFF; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.ph-suggest li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.ph-suggest li[aria-selected="true"], .ph-suggest li:hover { background: rgba(10, 10, 10, 0.06); }
.ph-sg-kind { grid-row: span 2; font-size: 13px; color: var(--muted); padding-top: 1px; }
.ph-sg-label { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-sg-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-suggest li.is-similar .ph-sg-kind { color: var(--ink); }
.ph-logout {
  min-height: 28px; padding: 0 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px;
}
.ph-logout:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
.ph-logout-form { display: flex; align-items: center; gap: 4px; }
.ph-who { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Narrower desktops keep the header on one line: the name moves into the button's tooltip. */
@media (max-width: 1199px) { .ph-who { display: none; } body:has(.ph-menu[open]) .ph-who { display: inline; } }

/* ── Selection: grey track, translucent dark thumb (nav, filters, segmented choices).
   Same weight for every state: bold would widen the label and shift its neighbours. ── */
.seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface); border-radius: 999px; width: fit-content; max-width: 100%; box-sizing: border-box; }
.seg-item {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  min-height: 28px; padding: 0 11px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 15px; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.seg-item:hover { background: rgba(10, 10, 10, 0.04); color: var(--ink); text-decoration: none !important; }
.seg-item[aria-current="page"], .seg-item[aria-current="true"], .seg-item[aria-pressed="true"], .seg-item[aria-selected="true"], .seg-item[aria-checked="true"] {
  background: rgba(10, 10, 10, 0.08); color: var(--ink);
}
.seg-count { color: var(--muted); font-weight: 600; }
.seg-item.has-count { padding-right: 26px; }

/* Nav counter: superscript at the word, takes the highest level of its area. */
.count-at { position: relative; }
.count {
  position: absolute; top: -9px; left: calc(100% + 3px);
  min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 5px; border-radius: 999px;
  background: var(--yellow-badge); color: var(--ink);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.count--red { background: var(--red); color: #FFFFFF; }

/* ── Buttons: visible pill 28px, hit area 36px (transparent border) ─────── */
body.panel .btn {
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
  min-height: 36px; margin: -4px -5px; padding: 0 10px;
  border: 4px solid transparent; background-clip: padding-box; border-radius: 999px;
  font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none !important;
}
body.panel .btn-primary { background-color: var(--ink); color: #FFFFFF !important; font-weight: 600; }
body.panel .btn-primary:hover { background-color: #3A3A3C; }
body.panel .btn-secondary { background-color: var(--control); color: var(--ink) !important; }
body.panel .btn-secondary:hover { background-color: #D6DADD; }
body.panel .btn-small { min-height: 32px; padding: 0 9px; font-size: 13px; }
body.panel .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
body.panel .actions form { margin: 0; display: contents; }
@media (pointer: coarse) { body.panel .btn { min-height: 44px; } .seg-item { min-height: 40px; } }

/* Icons drawn from Schibsted glyphs (×, +, ↑ rotated) plus a check in the same stroke. */
body.panel [data-icon="check"]::before, body.panel [data-icon="x"]::before, body.panel [data-icon="plus"]::before, body.panel [data-icon="arrow"]::before {
  content: ""; width: 15px; height: 15px; flex: none; margin-left: -3px; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
body.panel [data-icon="check"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1600'%3E%3Cpath d='M330 830 L660 1160 L1290 480' fill='none' stroke='black' stroke-width='209' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
body.panel [data-icon="x"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1600'%3E%3Cpath transform='translate(800.0,800.0) rotate(0) scale(1,-1) translate(-650.5,-687.1)' d='M296.479736328125 180.016357421875 143.48046875 333.015625 497.3447265625 687.223876953125 143.48046875 1041.088134765625 296.479736328125 1194.08740234375 650.68798828125 840.22314453125 1004.55224609375 1194.08740234375 1157.551513671875 1041.088134765625 803.687255859375 687.223876953125 1157.551513671875 333.015625 1004.55224609375 180.016357421875 650.68798828125 533.880615234375Z'/%3E%3C/svg%3E"); }
body.panel [data-icon="plus"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1600'%3E%3Cpath transform='translate(800.0,800.0) rotate(0) scale(1,-1) translate(-650.0,-686.9)' d='M537.6005859375 159.68017578125V582.392333984375H122.80029296875V791.367431640625H537.6005859375V1214.07958984375H762.3994140625V791.367431640625H1177.19970703125V582.392333984375H762.3994140625V159.68017578125Z'/%3E%3C/svg%3E"); }
body.panel [data-icon="arrow"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1600'%3E%3Cpath transform='translate(800.0,800.0) rotate(90) scale(1,-1) translate(-669.1,-730.1)' d='M559.016357421875 0V1243.361083984375L662.663818359375 1166.921142578125L179.32763671875 683.5849609375L32.584228515625 825.42431640625L668.663818359375 1460.159912109375L1305.71142578125 824.1123046875L1157.656005859375 683.5849609375L674.31982421875 1166.921142578125L777.96728515625 1243.361083984375V0Z'/%3E%3C/svg%3E"); }

/* ── Status: dot + word. Colour = what to do, fill = is something here, motion = how urgent ── */
body.panel .badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
body.panel .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; box-sizing: border-box; border: 2px solid currentColor; background: currentColor; }
body.panel .dot--red { color: var(--red); }
body.panel .dot--yellow { color: var(--yellow); }
body.panel .dot--green { color: var(--green); }
body.panel .dot--ring { background: transparent; }
/* Missed deadline: fast ripple. Deadline today: slow fade. Both stop after < 5 s (WCAG 2.2.2). */
@keyframes urgent { 0% { box-shadow: 0 0 0 0 rgba(227, 6, 19, .55); } 80% { box-shadow: 0 0 0 9px rgba(227, 6, 19, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); } }
@keyframes fade-y { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
body.panel .urgent { animation: urgent 1.2s ease-out 4; }
body.panel .fade-y { animation: fade-y 2.4s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { body.panel .urgent, body.panel .fade-y { animation: none; } }

/* ── Page layout: 12-column grid, marginal headings ─────────────────────── */
body.panel .pm { max-width: 1400px; margin: 0 auto; padding: 56px 40px 120px; }
body.panel .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
body.panel .side { grid-column: 1 / 4; }
body.panel .main { grid-column: 4 / 13; min-width: 0; }
body.panel .wide { grid-column: 1 / 13; min-width: 0; }
body.panel .head { row-gap: 20px; align-items: end; }
body.panel .head-title { margin: 0; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
body.panel .head-sub { margin: 0; color: var(--muted); }
body.panel .head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
body.panel .sec { margin-top: 80px; row-gap: 16px; }
body.panel .sec-no { margin: 0; font-size: 13px; color: var(--muted); }
body.panel .sec-title { margin: 2px 0 0; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
body.panel .sec-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); max-width: 24ch; }
body.panel .ruled { border-top: 1px solid var(--ink); }
body.panel .empty { margin: 0; padding: 20px 0; font-size: 28px; letter-spacing: -0.02em; color: var(--muted); }

/* Figures: big numbers stay black, status lives in the label's dot. */
body.panel .figures { margin: 0; border-top: 1px solid var(--ink); }
body.panel .figures-day { padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
body.panel .figures-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 48px; }
body.panel .figure { padding-top: 12px; display: flex; flex-direction: column-reverse; }
body.panel .figure dt { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
/* Display sizes: Schibsted's side bearing (~0.04em) would indent them against the text above. */
body.panel .figure dd { margin: 0 0 0 -0.04em; font-weight: 400; font-size: 96px; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
body.panel .figure dd a:hover { text-decoration: none !important; }

/* Lists with large titles (to-dos, units, current loans). */
body.panel .rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
body.panel .row { padding: 20px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
body.panel .row-state { padding-top: 6px; }
body.panel .row-age { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
body.panel .row-title { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
body.panel .row-meta { margin: 6px 0 0; }
body.panel .row-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

/* Compact log list. */
body.panel .log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
body.panel .log li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); }

/* Day timeline: opening hours as a line with "now"; today's pickups and returns are listed below it. */
body.panel .timeline { position: relative; height: 48px; margin: 0 8px; }
body.panel .tl-track, body.panel .tl-past { position: absolute; left: 0; top: 12px; height: 1px; }
body.panel .tl-track { right: 0; background: rgba(0, 0, 0, 0.2); }
body.panel .tl-past { background: var(--ink); }
body.panel .tl-now { position: absolute; top: 0; width: 1px; height: 25px; background: var(--ink); }
body.panel .tl-hour { position: absolute; top: 28px; font-size: 13px; color: var(--muted); transform: translateX(-50%); }
body.panel .tl-hour:first-of-type { transform: none; }
body.panel .tl-hour--end { transform: translateX(-100%); }
body.panel .sec--near { margin-top: 40px; }
body.panel .sec-title--solo { margin: 0; }
body.panel .sec-note--solo { margin-top: 2px; }
body.panel .today-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
body.panel .today-item { display: grid; grid-template-columns: 160px 160px minmax(0, 1fr); gap: 0 24px; align-items: baseline; }
body.panel .today-item .badge { text-decoration: none; }
@media (max-width: 700px) { body.panel .today-item { grid-template-columns: 1fr; } }
body.panel .tl-closed { margin: 0; padding-top: 12px; color: var(--muted); }

/* Tables: head 13 grey, first column 20, all data 15. */
body.panel .filters { margin-top: 40px; }
body.panel .table-wrap { margin-top: 24px; }
body.panel .table { width: 100%; border-collapse: collapse; }
body.panel .table th { text-align: left; font-size: 13px; font-weight: 400; color: var(--muted); padding: 0 16px 10px 0; border-bottom: 1px solid var(--ink); }
body.panel .table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
body.panel .table td:last-child, body.panel .table th:last-child { padding-right: 0; }
body.panel .cell-main { font-size: 20px; letter-spacing: -0.01em; }
body.panel .cell-sub { display: block; font-size: 13px; color: var(--muted); }
body.panel .cell-actions { text-align: right; white-space: nowrap; padding-top: 10px !important; }
body.panel .cell-actions .actions { flex-wrap: nowrap; }
body.panel .col-no { width: 6%; }
body.panel .col-person { width: 15%; }
body.panel .col-date { width: 11%; }
body.panel .col-status { width: 10%; }
body.panel .table-foot { margin: 16px 0 0; font-size: 13px; }
body.panel .table-foot a { color: var(--muted); }

/* Inputs read as fields, never as buttons: rounded rectangle, not a pill. */
body.panel .field-input { box-sizing: border-box; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface); font-size: 15px; color: var(--ink); }
body.panel .field-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
body.panel .field-label { font-size: 13px; color: var(--muted); }
body.panel .seg-item:has(input:checked) { background: rgba(10, 10, 10, 0.08); color: var(--ink); }
body.panel .seg-item:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Inventory list */
body.panel .filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
body.panel .search { margin: 0 8px 0 0; }
body.panel .search .field-input { width: 220px; min-height: 28px; }
/* Many filter options stay on one line and scroll sideways instead of wrapping into a block. */
body.panel .seg--line { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.panel .seg--line::-webkit-scrollbar { display: none; }
body.panel .table th { white-space: nowrap; }
body.panel .col-thumb { width: 64px; }
body.panel .col-short { width: 11%; }
body.panel .nowrap { white-space: nowrap; }
body.panel .col-span { width: 28%; }
body.panel .thumb { display: block; width: 52px; height: 52px; border-radius: 10px; background: var(--surface); object-fit: cover; }
body.panel .th-sort { color: inherit; }

/* Device page */
body.panel .item-head { padding: 0 0 40px; row-gap: 24px; }
body.panel .item-side { display: flex; flex-direction: column; gap: 20px; }
body.panel .crumbs { font-size: 13px; color: var(--muted); }
body.panel .crumbs a { color: var(--muted); }
body.panel .item-photo { display: block; width: 100%; max-width: 260px; aspect-ratio: 1 / 1; border-radius: 18px; background: var(--surface); object-fit: cover; }
body.panel .item-main { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
body.panel .item-title { margin: 8px 0 0 -0.04em; font-weight: 400; font-size: 96px; line-height: 0.95; letter-spacing: -0.05em; overflow-wrap: anywhere; hyphens: auto; }
body.panel .head-actions--start { justify-content: flex-start; }
body.panel .hint { margin-top: 24px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 16px 20px 18px 16px; border-radius: 18px; background: var(--surface); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 12px; align-items: start; }
body.panel .hint svg { margin-top: 1px; color: var(--ink); }
body.panel .hint-label { margin: 0; font-size: 13px; line-height: 22px; color: var(--muted); }
body.panel .hint-label b { font-weight: 600; color: var(--ink); }
body.panel .hint-text { grid-column: 2; margin: 0; font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; }
body.panel .figure--m dd { font-size: 64px; line-height: 1.05; letter-spacing: -0.04em; }
body.panel .figures-list--start { justify-content: flex-start; gap: 0 96px; }
body.panel .tabs { margin-top: 64px; }
body.panel .sec--tab { margin-top: 40px; }
body.panel .specs { margin: 0; border-top: 1px solid var(--ink); }
body.panel .spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
body.panel .spec dt { color: var(--muted); }
body.panel .spec dd { margin: 0; }
body.panel .photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.panel .photo { display: block; height: 72px; border-radius: 10px; object-fit: cover; }
body.panel .confirm-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
body.panel .confirm-panel--left { left: 0; right: auto; }
body.panel .add-unit { margin-top: 16px; }

/* People */
body.panel .row--two { grid-template-columns: minmax(0, 1fr) auto; }
body.panel .table-gap { margin-top: 20px; }
body.panel .person-contact { margin: 16px 0 0; font-size: 20px; letter-spacing: -0.01em; }
/* Settings rows: label · current state · action */
body.panel .settings { border-top: 1px solid var(--ink); }
body.panel .setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 8px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: center; }
body.panel .setting-hint { display: block; font-size: 13px; color: var(--muted); }
body.panel .setting-state { display: flex; flex-direction: column; gap: 4px; }
body.panel .setting-state p { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Places: code-led rows */
body.panel .row--code { grid-template-columns: minmax(120px, max-content) minmax(0, 1fr) auto; align-items: start; }
/* Atkinson Mono has ~0.1em left side bearing; at 40px that is a visible indent against the rule and the text below. */
body.panel .code { font-family: var(--mono); font-size: 40px; line-height: 1; letter-spacing: 0; margin-left: -0.1em; }
body.panel .row-sub-title { margin: 6px 0 0; font-size: 20px; letter-spacing: -0.01em; }
body.panel .row--store .row-sub-title { margin: 0; }

/* Settings forms: one form per section, label left, control right, save at the end. */
body.panel .fields { margin: 0; border-top: 1px solid var(--ink); }
body.panel .field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: start; }
body.panel .field > label, body.panel .field > span:first-child { padding-top: 6px; }
body.panel .field > .field-input { width: 100%; }
body.panel .field > .seg { justify-self: start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.panel .field--stack { grid-template-columns: 1fr; }
body.panel .field-text { width: 100%; min-height: 180px; padding: 10px 12px; line-height: 1.5; resize: vertical; font: inherit; }
body.panel .field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
body.panel .field-pair .field-input { width: 100%; min-width: 0; }
body.panel .field-select { width: auto; }
body.panel .fields-save { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; }
body.panel .days { list-style: none; margin: 0; padding: 0; }
body.panel .day { display: grid; grid-template-columns: 140px auto minmax(0, 1fr); gap: 12px 24px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
body.panel .day-hours { display: flex; align-items: center; gap: 10px; }
body.panel .day-hours .field-input { width: 110px; }
body.panel .day:has(.switch:not(:checked)) .day-hours, body.panel .day:has(.switch:checked) .day-closed { display: none; }
/* Switch: real checkbox. On = green track (Apple), off = dark enough to read as a control (3:1). */
body.panel .switch { appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: rgba(0, 0, 0, .45); cursor: pointer; transition: background .15s; }
body.panel .switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
body.panel .switch:checked { background: var(--green); }
body.panel .switch:checked::before { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { body.panel .switch, body.panel .switch::before { transition: none; } }

/* Item form, categories, login */
body.panel .head-title--below { margin-top: 20px; }
body.panel .map-grid { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 260px); gap: 8px 16px; align-items: center; margin-bottom: 16px; }
body.panel .import-summary { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
body.panel .import-switch { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; font-size: 15px; cursor: pointer; }
body.panel .pdf-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.panel .file-input { padding: 6px 12px; min-height: 36px; max-width: 100%; }
body.panel .field > .field-number { width: 120px; }
body.panel select.field-input { height: 36px; }
body.panel .field > .field-select { width: auto; min-width: 280px; max-width: 100%; justify-self: start; }
body.panel .field-text--short { min-height: 88px; }
body.panel .field-value { margin: 0; padding-top: 6px; }
body.panel .spec-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.panel .spec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
body.panel .spec-row .field-input { width: 100%; min-width: 0; }
body.panel .image-field { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
body.panel .item-photo--s { max-width: 160px; }
body.panel .form-end { margin-top: 40px; }
body.panel .actions--start { justify-content: flex-start; }
body.panel .row-sub-title--first { margin: 0; }
body.panel .login { max-width: 360px; margin: 18vh auto 0; padding: 0 16px; }
body.panel .login-title { margin: 0; font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
body.panel .login .confirm-form { margin-top: 24px; }
body.panel .login .field-input { width: 100%; }
body.panel .login-error { margin: 16px 0 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* Action with consequences (<details>): grey trigger, panel names the effects, black button names the action. */
body.panel details.confirm { position: relative; display: inline-block; }
body.panel details.confirm > summary { list-style: none; }
body.panel details.confirm > summary::-webkit-details-marker { display: none; }
body.panel details.confirm[open] > summary { background-color: #D6DADD; }
body.panel .confirm-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: 340px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; padding: 16px 20px;
  border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  white-space: normal; text-align: left; font-size: 15px; font-weight: 400;
}
body.panel .confirm-title { margin: 0; font-weight: 600; }
body.panel .confirm-panel ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
body.panel .actions form.confirm-form { display: flex; }
body.panel .confirm-actions, body.panel .actions form.confirm-actions { display: flex; justify-content: flex-end; margin: 4px 0 0; }

/* Status message after a redirect (server-rendered flash). */
body.panel .flash {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: #FFFFFF; font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  max-width: calc(100vw - 32px); box-sizing: border-box;
}
body.panel .flash--error { background: var(--red); }
body.panel .flash--error { padding-right: 6px; }
body.panel .flash-close { min-width: 36px; justify-content: center; font-size: 18px; }
@keyframes flash-out { to { opacity: 0; visibility: hidden; } }
body.panel .flash[role="status"] { animation: flash-out .4s ease 6s forwards; }
/* The undo bar disappears exactly when the held-back decision runs. */
body.panel .flash--undo { padding: 6px 6px 6px 18px; }
body.panel .flash--undo form { margin: 0; }
@media (min-width: 600px) { body.panel .flash--undo span { white-space: nowrap; } }
/* Phones: a full-width rounded bar instead of a pill, so wrapped text stays inside the shape. */
@media (max-width: 599px) {
  body.panel .flash {
    left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); transform: none; max-width: none;
    bottom: calc(16px + env(safe-area-inset-bottom)); border-radius: 18px; padding: 12px 16px;
  }
  body.panel .flash--undo { justify-content: space-between; padding: 10px 10px 10px 16px; }
  body.panel .flash-note { display: block; font-size: 13px; color: rgba(255, 255, 255, .64); }
  body.panel :is(.flash--undo, .flash--error) .btn-on-dark { margin: 0; flex: none; }
  body.panel .flash--error { justify-content: space-between; padding: 10px 10px 10px 16px; }
}
body.panel .btn-on-dark { margin: -4px; background-color: rgba(255, 255, 255, .16); color: #FFFFFF !important; font-weight: 600; }
body.panel .btn-on-dark:hover { background-color: rgba(255, 255, 255, .28); }
@media (prefers-reduced-motion: reduce) { body.panel .flash[role="status"] { animation-duration: 0s; } }

@media (max-width: 900px) {
  /* viewport-fit=cover: on a phone held sideways the content stays clear of the notch. */
  .ph-inner, body.panel .pm { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  /* Only narrow screens scroll tables sideways; panels then flow inside the cell instead of floating. */
  body.panel .scroll { overflow-x: auto; }
  body.panel .table { min-width: 860px; }
  body.panel .confirm-panel { position: static; width: auto; margin-top: 8px; box-shadow: none; }
  body.panel .side, body.panel .main, body.panel .wide { grid-column: 1 / -1; }
  body.panel .row, body.panel .row--two, body.panel .row--code, body.panel .row--store, body.panel .setting, body.panel .field { grid-template-columns: 1fr; }
  body.panel .day { grid-template-columns: 1fr auto; }
  body.panel .day-hours, body.panel .day-closed { grid-column: 1 / -1; }
  body.panel .actions { justify-content: flex-start; }
  body.panel .figure dd { font-size: 64px; letter-spacing: -0.04em; }
  /* Actions wrap; an opened panel (check a return, reject …) takes the whole width under its buttons. */
  body.panel .cell-actions { white-space: normal; text-align: left; }
  body.panel .cell-actions .actions { flex-wrap: wrap; }
  body.panel .actions details.confirm[open] { flex-basis: 100%; }
}

/* ── Phones and tablets ──────────────────────────────────────────────────────
   Up to 900 (phones, tablets upright): like abcdinamo.com — brand, search and "Menü" on top, nothing else;
   the header scrolls away. The open menu shows the page's one navigation, search box and logout as a
   full-screen list. Phones (≤760): tables of loans, devices and people become lists; display sizes shrink.
   761–1100: table actions get their own line under the entry. */
.ph-m { display: none; }
.ph-menu > summary { list-style: none; }
.ph-menu > summary::-webkit-details-marker { display: none; }
.ph-menu-close { display: none; }

/* Phones and tablets in portrait: the calm header with search and "Menü". */
@media (max-width: 900px) {
  .ph { position: static; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
  .ph-inner { flex-wrap: nowrap; gap: 8px; padding-top: 20px; padding-bottom: 0; }
  .ph-inner > nav.seg, .ph-search, .ph-logout-form { display: none; }
  .ph-m { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .ph-m .btn { margin: 0; }
  .ph-m-search { width: 44px; padding: 0; justify-content: center; }
  .ph-menu > summary.has-count { padding-right: 26px; }
  body.panel .pm { padding-top: 32px; }

  /* Open menu: the header itself becomes a full-screen sheet that scrolls (phones held sideways
     are too low for the list). Brand and "Schließen" on top, then search, navigation, logout. */
  body:has(.ph-menu[open]) { overflow: hidden; }
  body:has(.ph-menu[open]) .ph { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain; }
  body:has(.ph-menu[open]) .ph-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "brand m" "search search" "nav nav" "logout logout";
    min-height: 100dvh; box-sizing: border-box; gap: 0; padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
  body:has(.ph-menu[open]) .ph-brand { grid-area: brand; align-self: center; }
  body:has(.ph-menu[open]) .ph-m { grid-area: m; }
  .ph-menu[open] .ph-menu-open { display: none; }
  .ph-menu[open] .ph-menu-close { display: inline; }
  .ph-menu[open] > summary.has-count { padding-right: 10px; }
  body:has(.ph-menu[open]) .ph-m-search { visibility: hidden; }
  body:has(.ph-menu[open]) .ph-search { grid-area: search; display: flex; margin: 24px 0 0; min-height: 44px; }
  body:has(.ph-menu[open]) .ph-suggest { left: 0; right: 0; width: auto; }
  body:has(.ph-menu[open]) .ph-inner > nav.seg {
    grid-area: nav; display: flex; margin-top: 24px;
    flex-direction: column; align-items: flex-start; gap: 0; padding: 0; border-radius: 0; background: none;
  }
  body:has(.ph-menu[open]) .ph-inner > nav.seg .seg-item {
    min-height: 0; padding: 2px 30px 2px 0; border-radius: 0; background: none;
    font-size: 40px; line-height: 1.12; letter-spacing: -0.03em; color: var(--muted);
  }
  body:has(.ph-menu[open]) .ph-inner > nav.seg .seg-item[aria-current="page"] { color: var(--ink); }
  body:has(.ph-menu[open]) .ph-inner > nav.seg .count { top: 2px; }
  body:has(.ph-menu[open]) .ph-logout-form { grid-area: logout; display: flex; gap: 12px; align-self: end; margin-top: 32px; }
  body:has(.ph-menu[open]) .ph-who { font-size: 15px; }
  body:has(.ph-menu[open]) .ph-logout { min-height: 44px; padding: 0 14px; background: var(--control); color: var(--ink); font-size: 15px; }
}

@media (max-width: 760px) {
  /* Display sizes for a phone. */
  body.panel .item-title { font-size: 40px; line-height: 1; letter-spacing: -0.03em; margin-left: -0.03em; }
  body.panel .figure dd, body.panel .figure--m dd { font-size: 48px; letter-spacing: -0.04em; }
  body.panel .figures-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  body.panel .row-title { font-size: 22px; letter-spacing: -0.01em; }
  body.panel .empty { font-size: 22px; }
  body.panel .item-photo { max-width: 140px; }
  body.panel .sec { margin-top: 56px; }
  /* A wrapping selection keeps its track, but as a box: a pill shape turns into a blob over several lines. */
  .seg { border-radius: 20px; }
  /* Filters stay one swipeable line (like the inventory); the right edge fades so "more" is visible. */
  body.panel .seg--line { border-radius: 999px; padding-right: 32px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }

  /* Tables that become lists: no sideways scrolling. */
  body.panel .table--loans, body.panel .table--items, body.panel .table--people { min-width: 0; }
  body.panel :is(.table--loans, .table--items, .table--people) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.panel :is(.table--loans, .table--items, .table--people) :is(tbody, tr, td) { display: block; }
  body.panel :is(.table--loans, .table--items, .table--people) tbody { border-top: 1px solid var(--ink); }
  body.panel :is(.table--loans, .table--items, .table--people) tr { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  body.panel :is(.table--loans, .table--items, .table--people) td { padding: 0; border: 0; width: auto; }
  body.panel :is(.table--loans, .table--items, .table--people) td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font); font-size: 13px; color: var(--muted); }
  body.panel :is(.table--loans, .table--items, .table--people) .cell-main { font-size: 20px; }

  body.panel .table--loans tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px;
    grid-template-areas: "status no" "item item" "person person" "pickup due" "act act";
  }
  body.panel .table--loans .c-status { grid-area: status; }
  body.panel .table--loans .c-no { grid-area: no; justify-self: end; font-size: 13px; }
  body.panel .table--loans .c-item { grid-area: item; }
  body.panel .table--loans .c-person { grid-area: person; }
  body.panel .table--loans .c-pickup { grid-area: pickup; }
  body.panel .table--loans .c-due { grid-area: due; }
  body.panel .table--loans .c-act { grid-area: act; padding-top: 4px; }

  /* Name next to the picture, the four small values in one row under it. */
  body.panel .table--items tr { display: grid; grid-template-columns: 52px repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
  body.panel .table--items .c-thumb { grid-column: 1; grid-row: 1 / 3; }
  body.panel .table--items .c-item { grid-column: 2 / -1; grid-row: 1; }
  body.panel .table--items td:nth-child(3) { grid-column: 2; grid-row: 2; }
  body.panel .table--items td:nth-child(4) { grid-column: 3; grid-row: 2; }
  body.panel .table--items td:nth-child(5) { grid-column: 4; grid-row: 2; }
  body.panel .table--items td:nth-child(6) { grid-column: 5; grid-row: 2; }

  body.panel .table--people tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
  body.panel .table--people .c-item { grid-column: 1 / -1; }
  body.panel .table--people td[data-label="Kontakt"] { grid-column: 1 / -1; overflow-wrap: anywhere; }
  /* Spec editor: label and value side by side, "Entfernen" on its own line. */
  body.panel .spec-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.panel .spec-row > :nth-child(n+3) { grid-column: 1 / -1; justify-self: start; }
}

/* Small phones: the four device values in two rows of two. */
@media (max-width: 400px) {
  body.panel .table--items tr { grid-template-columns: 52px repeat(2, minmax(0, 1fr)); }
  body.panel .table--items td:nth-child(3) { grid-column: 2; grid-row: 2; }
  body.panel .table--items td:nth-child(4) { grid-column: 3; grid-row: 2; }
  body.panel .table--items td:nth-child(5) { grid-column: 2; grid-row: 3; }
  body.panel .table--items td:nth-child(6) { grid-column: 3; grid-row: 3; }
  body.panel .table--items .c-thumb { grid-row: 1 / 4; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .ph-inner, body.panel .pm { padding-left: 24px; padding-right: 24px; }
  .ph-inner { gap: 12px 16px; }
  .ph-search { flex: 0 1 160px; min-width: 100px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  /* 96 px breaks long device names mid-word next to the side column; one step down the scale. */
  body.panel .item-title { font-size: 64px; letter-spacing: -0.04em; }
  /* Loans keep their columns; the actions get their own line under the entry. */
  body.panel .table--loans { min-width: 0; }
  body.panel .table--loans tr { display: grid; grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1.3fr) 88px 104px 120px; column-gap: 12px; }
  body.panel .table--loans :is(th, td) { padding-right: 0; }
  body.panel .table--loans th:last-child { display: none; }
  body.panel .table--loans tbody tr { border-bottom: 1px solid var(--rule); }
  body.panel .table--loans tbody td { border-bottom: 0; }
  /* One rule under the whole head row, not one per cell. */
  body.panel .table--loans thead tr { border-bottom: 1px solid var(--ink); }
  body.panel .table--loans thead th { border-bottom: 0; }
  body.panel .table--loans .c-act { grid-column: 2 / -1; padding-top: 0; }
  body.panel .table--loans .c-act .actions { justify-content: flex-start; }
  body.panel .table--items, body.panel .table--people { min-width: 0; }
}

/* ── Labels and signs: real millimetres, the screen shows the sheet as printed ── */
body.panel .sec--near { margin-top: 40px; }
body.panel .sheets { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; border-top: 1px solid var(--ink); border-radius: 0 0 18px 18px; background: var(--surface); overflow-x: auto; }
body.panel .sheet { flex: none; margin: 0 auto; box-sizing: border-box; background: #FFFFFF; color: #0A0A0A; outline: 1px solid var(--rule); }
body.panel .sheet--labels { width: 210mm; height: 297mm; padding: 18mm 12mm; display: grid; grid-template-columns: repeat(3, 62mm); grid-auto-rows: 29mm; align-content: start; }
body.panel .sheet--roll { width: 62mm; height: 29mm; }
body.panel .sheet--signs { width: 210mm; height: 297mm; display: grid; grid-template-columns: repeat(2, 105mm); grid-auto-rows: 148mm; }
/* Large mono codes are pulled left by their side bearing so they align with the text below. */
body.panel .lbl { box-sizing: border-box; width: 62mm; height: 29mm; padding: 2mm; display: grid; grid-template-columns: 25mm minmax(0, 1fr); column-gap: 3mm; align-items: center; overflow: hidden; outline: 1px dashed rgba(0, 0, 0, .18); outline-offset: -0.5px; }
body.panel .lbl svg { width: 25mm; height: 25mm; display: block; }
body.panel .lbl-text { min-width: 0; }
body.panel .lbl-code { margin: 0 0 0 -0.1em; font-family: var(--mono); font-size: 6.2mm; line-height: 1; white-space: nowrap; }
body.panel .lbl-name { margin: 1.2mm 0 0; font-size: 2.6mm; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.panel .lbl-org { margin: 0.8mm 0 0; font-size: 2.1mm; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.panel .sign { box-sizing: border-box; width: 105mm; height: 148mm; padding: 8mm; display: flex; flex-direction: column; overflow: hidden; outline: 1px dashed rgba(0, 0, 0, .18); outline-offset: -0.5px; }
body.panel .sign-code { margin: 0 0 0 -0.1em; font-family: var(--mono); font-size: 42mm; line-height: .9; }
body.panel .sign-name { margin: 5mm 0 0; font-size: 8mm; line-height: 1.1; letter-spacing: -0.02em; }
body.panel .sign-where { margin: 2mm 0 0; font-size: 4.5mm; line-height: 1.2; color: var(--muted); }
body.panel .sign-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 4mm; }
body.panel .sign-foot svg { width: 30mm; height: 30mm; flex: none; display: block; }
body.panel .sign-org { margin: 0; font-size: 3.5mm; line-height: 1.3; color: var(--muted); text-align: right; }

@media print {
  body.panel .ph, body.panel .flash, body.panel .no-print { display: none !important; }
  body.panel .pm { max-width: none; padding: 0; margin: 0; }
  body.panel .sec--near { margin: 0; display: block; }
  body.panel .sheets { display: block; padding: 0; border: 0; background: none; overflow: visible; }
  body.panel .sheet { outline: 0; break-after: page; }
  body.panel .lbl, body.panel .sign { outline: 0; }
  body.panel .lbl-org, body.panel .sign-where, body.panel .sign-org { color: #3A3A3C; }
}

/* A loan opened from elsewhere ("Zur Ausleihe") is scrolled to and marked. */
body.panel tr:target > td { background: var(--surface); }
body.panel tr:target { scroll-margin-top: 96px; }

/* AI provider choice: one row per provider, its key status underneath; without a key it is greyed out. */
body.panel .provider-list { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
body.panel .provider { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
body.panel .provider:hover { background: rgba(10, 10, 10, 0.04); }
body.panel .provider:has(input:checked) { background: rgba(10, 10, 10, 0.08); }
body.panel .provider input { margin: 3px 0 0; accent-color: var(--ink); }
body.panel .provider-name { display: block; font-size: 15px; }
body.panel .provider-key { display: block; font-size: 13px; color: var(--muted); }
body.panel .provider--off { cursor: default; }
body.panel .provider--off .provider-name { color: var(--muted); }