:root {
    /* ModelbouwID theme: dark navy surfaces, orange accents, never plain white. */
    --navy: #222D44;          /* header, menu, footer, primary buttons */
    --navy-2: #303D5A;        /* hover on navy */
    --navy-line: #46536F;     /* borders on navy */
    --orange: #EDA453;        /* accent: active menu, tape, highlights */
    --orange-strong: #B8691F; /* orange where it must stand out on light grey (focus ring) */
    --orange-tint: #F8E3C8;   /* selected / in-force rows */
    --ink: #161A22;           /* text on light backgrounds (near black) */
    --ink-soft: #4D5566;      /* secondary text on light backgrounds */
    --on-navy: #FFFFFF;       /* text on navy */
    --page: #D9DDE3;          /* page background */
    --panel: #ECEEF1;         /* panels and cards */
    --field: #F5F6F8;         /* inputs and light buttons */
    --hover: #E0E3E8;         /* hover on light surfaces */
    --muted: #E3E6EA;         /* disabled fields, neutral boxes */
    --line: #C2C8D1;
    --ok: #1C7C45;
    --ok-bg: #DCEFE3;
    --err: #B3261E;
    --err-bg: #F6E0DE;
    --info: #245D96;
    --info-bg: #DFE8F3;
    --radius: 6px;
    --font: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
    color-scheme: light;
}

* { box-sizing: border-box; }

/* Elements with the hidden attribute stay hidden, even when a class gives them a display value. */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--page);
    /* Header, content, footer: the footer stays at the bottom on short pages. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main { flex: 1 0 auto; width: 100%; }

/* ---------- Footer (every page) ---------- */

.site-footer {
    padding: 1.25rem 1.25rem 1.25rem;
    background: var(--navy);
    border-top: 6px solid var(--orange);
    color: var(--on-navy);
    font-size: 0.95rem;
}
.footer-grid {
    display: grid;
    /* the hours table takes the width it needs; the other blocks share the rest */
    grid-template-columns: minmax(11rem, 1fr) max-content minmax(10rem, 1fr) minmax(11rem, 1fr);
    gap: 1.25rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.site-footer h2 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--orange); }
.site-footer p { margin: 0 0 0.5rem; }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--orange); text-decoration: underline; }
.site-footer .label, .footer-hours thead th { color: var(--orange); }
.footer-hours table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.footer-hours th, .footer-hours td { padding: 0.15rem 0.9rem 0.15rem 0; text-align: left; font-weight: 400; white-space: nowrap; }
.footer-hours thead th { color: var(--on-navy); font-weight: 600; font-size: 0.85rem; }
.footer-hours tbody th { color: var(--on-navy); }
.footer-closed ul { list-style: none; margin: 0; padding: 0; }
.footer-closed li.folded { display: none; }
.footer-toggle {
    min-height: 0;
    margin: 0.1rem 0 0.25rem;
    padding: 0.2rem 0;
    background: none;
    color: var(--orange);
    font-weight: 600;
    text-decoration: underline;
}
.footer-toggle:hover:not(:disabled) { background: none; color: var(--on-navy); }
.footer-closed li { margin-bottom: 0.15rem; }
/* the note shows when hovering (title); a dotted line marks that there is one */
.footer-closed li.has-note .closed-date { text-decoration: underline dotted var(--orange); text-underline-offset: 3px; cursor: help; }
.footer-closed li.past { opacity: 0.6; }
.footer-closed .closed-date { font-variant-numeric: tabular-nums; color: var(--on-navy); }
.footer-legal { list-style: none; margin: 0; padding: 0; }
.footer-legal li { margin-bottom: 0.15rem; }

/* Brand logo in the header */
.bar h1.brand { line-height: 0; align-self: center; }
.brand-logo { display: block; height: 40px; width: auto; }

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--orange-strong); outline-offset: 2px; }

.bar :focus-visible, .site-footer :focus-visible { outline-color: var(--orange); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Header ---------- */

.bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: var(--navy);
    color: var(--on-navy);
    border-bottom: 6px solid var(--orange);
}
.bar h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.01em; }
.bar .today { margin: 0 0 0 auto; color: var(--orange); }

.nav { display: flex; gap: 0.25rem; }

.lang select {
    width: auto;
    min-height: 2.2rem;
    margin: 0;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--navy-line);
    background: var(--navy-2);
    color: var(--on-navy);
}
.nav a {
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius);
    color: var(--on-navy);
    text-decoration: none;
}
.nav a:hover { background: var(--navy-2); }
.nav a[aria-current="page"] { background: var(--orange); color: var(--ink); font-weight: 700; }

/* Dropdown menu entry (works without JavaScript: <details>/<summary>) */
.menu { position: relative; }
.menu summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius);
    color: var(--on-navy);
    cursor: pointer;
    list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
.menu[open] summary::after { margin-top: 0.2rem; transform: rotate(-135deg); }
.menu summary:hover { background: var(--navy-2); }
.menu.current summary { background: var(--orange); color: var(--ink); font-weight: 700; }
.menu-list {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 10;
    display: grid;
    min-width: 12rem;
    padding: 0.35rem;
    border-radius: var(--radius);
    background: var(--navy);
    border: 1px solid var(--navy-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.menu-list a { padding: 0.55rem 0.8rem; }

/* Account (right end of the header) */
.account summary::after { display: none; }
.account.signed-in summary { padding: 0.15rem; border-radius: 50%; }
.account.signed-in summary:has(.account-name) { padding: 0.3rem 0.8rem; border-radius: var(--radius); }
.avatar { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--field); }
.account-name { display: inline-block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.account-login { padding: 0.3rem 0.8rem; border-radius: var(--radius); color: var(--on-navy); text-decoration: none; }
.account-login:hover { background: var(--navy-2); }
.menu-list.right { left: auto; right: 0; }
.account .menu-list a { border-radius: var(--radius); color: var(--on-navy); text-decoration: none; }
.account .menu-list a:hover { background: var(--navy-2); }
.menu-list a, .menu-list .account-who { white-space: nowrap; }
.account-who { margin: 0; padding: 0.55rem 0.8rem; color: var(--on-navy); }
.account-who span { display: block; color: var(--orange); font-size: 0.9rem; }
.account .menu-list form { margin: 0; padding: 0.35rem 0.8rem 0.5rem; }
.account .menu-list button { width: 100%; background: var(--orange); color: var(--ink); }
.login-panel { max-width: 30rem; }
.login-buttons { display: grid; gap: 0.6rem; }
.login-buttons a {
    display: block;
    padding: 0.8rem 1rem;
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}
.login-buttons a:hover { background: var(--hover); }
.layout.narrow { grid-template-columns: 1fr; max-width: 34rem; }
.bar h1 a { color: inherit; text-decoration: none; }
.users-panel { grid-column: 1 / -1; }
.users-table .user-cell { display: flex; align-items: center; gap: 0.6rem; }
.users-table .sub { display: block; color: var(--ink-soft); font-size: 0.9rem; }
.users-table select { min-height: 2.4rem; margin: 0; width: auto; }
.users-table form { margin: 0; }
.avatar.initial {
    display: inline-grid;
    place-items: center;
    flex: none;
    background: var(--navy);
    color: var(--orange);
    font-weight: 700;
}

/* ---------- Layout ---------- */

.layout {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) 3fr;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem;
    align-items: start;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    min-width: 0;
}

.panel h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 1.25rem;
}
.step {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--navy);
    color: var(--orange);
    font-size: 1rem;
}

label { display: block; font-weight: 600; font-size: 0.95rem; }

select, input {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    min-height: 2.9rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--field);
    font-weight: 400;
}
select:disabled, input:disabled { background: var(--muted); color: #8A959E; }

button {
    min-height: 2.9rem;
    padding: 0.5rem 1.2rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--on-navy);
    font-weight: 700;
    cursor: pointer;
}
button:hover:not(:disabled) { background: var(--orange); color: var(--ink); }
button:disabled { background: #A9B0BC; cursor: not-allowed; }

.selects { display: grid; gap: 0.8rem; }

.hint, .note { margin: 0.5rem 0; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Location tree ---------- */

#tree-wrap { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul {
    margin-left: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--line);
}

.node-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.8rem;
    margin: 0.2rem 0;
    padding: 0.4rem 0.6rem;
    background: transparent;
    color: var(--ink);
    font-weight: 400;
    text-align: left;
    border: 2px solid transparent;
}
.node-btn:hover:not(:disabled) { background: var(--hover); }
.node-btn.selected { border-color: var(--ink); background: var(--orange-tint); }

.kind {
    flex: none;
    min-width: 3.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    background: #DDE3E8;
}
.kind-room   { background: var(--navy); color: var(--on-navy); }
.kind-area   { background: #F3D9B8; }
.kind-rack   { background: #CBD6DF; }
.kind-shelve { background: #D9E6D3; }
.kind-box    { background: #EBDDC5; }
.kind-bin    { background: #E5D7E8; }

.code { font-weight: 700; white-space: nowrap; }
.descr { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.caret {
    margin-left: auto;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s;
}
[aria-expanded="true"] > .node-btn .caret { transform: rotate(45deg); }

.tree .none { padding: 0.4rem 0.6rem; color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Scan panel ---------- */

.target {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    background: var(--muted);
    border-left: 10px solid var(--line);
}
/* Floor-marking tape once a countable location is chosen. */
.target.ready {
    border-left: 0;
    padding-left: calc(1rem + 10px);
    background:
        repeating-linear-gradient(-45deg, var(--orange) 0 7px, var(--navy) 7px 14px) left / 10px 100% no-repeat,
        var(--orange-tint);
}
.target-label { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.target strong { font-size: 1.15rem; overflow-wrap: anywhere; }

.scan-form { margin-bottom: 0.75rem; }
.ean-label { margin-bottom: 0.3rem; }
.scan-row { display: flex; gap: 0.6rem; align-items: flex-end; }
.scan-row #ean {
    flex: 1;
    margin: 0;
    min-height: 3.6rem;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    border: 2px solid var(--navy);
}
.scan-row #ean:disabled { border-color: var(--line); }
.scan-row .qty { width: 5.5rem; flex: none; }
.scan-row .qty input { min-height: 3.6rem; font-size: 1.2rem; }
.scan-row button { min-height: 3.6rem; }

/* Camera scanning (shown only where the browser can read barcodes) */
.scan-row .camera-btn {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 3.6rem;
    padding: 0;
    background: var(--field);
    color: var(--ink);
    border: 2px solid var(--navy);
}
.scan-row .camera-btn:hover:not(:disabled) { background: var(--hover); }
.scan-row .camera-btn:disabled { border-color: var(--line); color: #A9B3BB; background: var(--muted); }
.camera-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: #000;
}
.camera-overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-frame {
    position: relative;
    width: min(80vw, 28rem);
    height: min(30vw, 10rem);
    border: 3px solid var(--orange);
    border-radius: 8px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
}
.camera-hint {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.6);
    color: var(--on-navy);
    text-align: center;
    font-weight: 600;
}
.camera-hint.error { background: var(--err); }
.camera-close {
    position: absolute;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    min-width: 10rem;
    min-height: 3.2rem;
    background: var(--field);
    color: var(--ink);
    font-size: 1.1rem;
}
.camera-close:hover:not(:disabled) { background: var(--hover); }

.message {
    min-height: 1.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    border-radius: var(--radius);
}
.message:not(:empty) { padding: 0.7rem 0.9rem; font-weight: 600; }
.message:empty { background: none; }
.message.ok    { background: var(--ok-bg);   color: var(--ok); }
.message.error { background: var(--err-bg);  color: var(--err); }
.message.info  { background: var(--info-bg); color: var(--info); }

.choices { margin-bottom: 1rem; }
.choices p { margin: 0 0 0.5rem; }
#choice-list { display: grid; gap: 0.5rem; }
.choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--field);
    color: var(--ink);
    border: 2px solid var(--navy);
    text-align: left;
}
.choice:hover:not(:disabled) { background: var(--orange-tint); }
.choice span { font-weight: 400; color: var(--ink-soft); }

.manual {
    margin-bottom: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.manual summary { padding: 0.8rem 1rem; cursor: pointer; font-weight: 600; }
.manual[open] summary { border-bottom: 1px solid var(--line); }
.manual form { padding: 1rem; display: grid; gap: 0.75rem; }
.manual-grid { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 0.6rem; }
.manual button { justify-self: start; }
#manual-ean-note { margin: 0; color: var(--err); }

/* ---------- Counted today ---------- */

.counted-title { margin: 0 0 0.5rem; font-size: 1.05rem; }
.table-wrap { overflow-x: auto; position: relative; }   /* keeps hidden screen-reader texts inside the scroll area */
.counted { width: 100%; border-collapse: collapse; }
.counted th, .counted td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}
.counted th { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.counted .num { text-align: right; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.counted .time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.counted .sub { display: block; color: var(--ink-soft); font-size: 0.9rem; }
.counted .empty { color: var(--ink-soft); text-align: center; padding: 1.25rem; }
.adjust { white-space: nowrap; text-align: right; }
.adj {
    min-height: 2.4rem;
    min-width: 2.8rem;
    padding: 0.2rem 0.5rem;
    margin-left: 0.3rem;
    background: var(--field);
    color: var(--ink);
    border: 1px solid var(--navy);
}
.adj:hover:not(:disabled) { background: var(--hover); }
.adj.bin { display: inline-grid; place-items: center; vertical-align: middle; }
.adj.bin svg { display: block; }
.message .undo { min-height: 2rem; margin-left: 0.5rem; font-weight: 700; }

/* ---------- Locations page ---------- */

.manage { grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); }

.toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
#asof-note { margin-top: 0.4rem; }

button.secondary {
    background: var(--field);
    color: var(--ink);
    border: 2px solid var(--navy);
}
button.secondary:hover:not(:disabled) { background: var(--hover); }

#add-address { margin: 0.25rem 0 0.75rem; }

.node-row { display: flex; align-items: center; gap: 0.2rem; }
.node-row .node-btn { flex: 1; min-width: 0; }

.twisty, .twisty-space { flex: none; width: 2.2rem; height: 2.2rem; }
.twisty {
    position: relative;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
}
.twisty:hover:not(:disabled) { background: var(--hover); }
.twisty::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.55rem;
    height: 0.55rem;
    margin: -0.35rem 0 0 -0.35rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s;
}
.twisty[aria-expanded="true"]::before { transform: rotate(45deg); }

.flag {
    margin-left: auto;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    background: var(--err-bg);
    color: var(--err);
    font-size: 0.8rem;
    font-weight: 700;
}

.attention {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem;
    border: 2px solid var(--err);
    border-radius: var(--radius);
    background: var(--err-bg);
}
.attention h3 { margin: 0; font-size: 1rem; color: var(--err); }

.detail-head { display: flex; align-items: center; gap: 0.6rem; }
.detail-head h2 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.d-descr { margin: 0.4rem 0 0; font-size: 1.1rem; }
.path { margin: 0.3rem 0; font-weight: 600; overflow-wrap: anywhere; }
#detail .manual { margin: 0.75rem 0 0; }

/* Barcode label preview: shown at about 1.5× its printed size. */
.label-preview { margin: 0.5rem 0 0.75rem; }
.label-preview img {
    display: block;
    width: 306px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--field);
}
.label-preview figcaption { margin-top: 0.35rem; }
.label-preview .note { margin: 0; }
.label-warn { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.label-warn.poor { color: #8A5A00; }
.label-warn.unprintable, .label-warn.invalid { color: var(--err); }
#detail .counted-title { margin-top: 1.25rem; }

.stack { display: grid; gap: 0.75rem; }
.stack .note { margin: -0.4rem 0 0; }
.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

select[size] { padding: 0.3rem; }
select[size] option { padding: 0.35rem 0.4rem; }

.history .in-force td { background: var(--orange-tint); }
.history td { font-size: 0.95rem; }
.adj.danger { border-color: var(--err); color: var(--err); }
.adj.danger:hover:not(:disabled) { background: var(--err-bg); }

/* ---------- Sales page ---------- */

.sales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

a.button {
    display: inline-flex;
    align-items: center;
    min-height: 2.9rem;
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--on-navy);
    font-weight: 700;
    text-decoration: none;
}
a.button:hover { background: var(--orange); color: var(--ink); }
a.button.secondary { background: var(--field); color: var(--ink); border: 2px solid var(--navy); }
a.button.secondary:hover { background: var(--hover); }
a.button.small { min-height: 2.4rem; padding: 0.2rem 0.8rem; }

.sale-key { grid-template-columns: 1fr 1fr 1.4fr; }

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sale-lines .num, .results .num { font-size: 1rem; }
.paid-cell span { display: block; font-size: 0.9rem; white-space: nowrap; }
.paid-cell form { margin: 0; }
.paid-cell select { min-height: 2.4rem; margin: 0 0 0.2rem; padding: 0.25rem 0.5rem; min-width: 7rem; }
.totals td { font-weight: 700; border-top: 2px solid var(--navy); border-bottom: 0; }


.pick {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    background: var(--orange-tint);
}
.pick-name { font-size: 1.15rem; }
.pick .sub { display: block; color: var(--ink-soft); }

fieldset {
    margin: 0;
    padding: 0.6rem 0.8rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
legend { padding: 0 0.3rem; font-weight: 600; font-size: 0.95rem; }
.paid-by { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.radio { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; min-height: 2.4rem; }
.radio input { width: 1.2rem; min-height: 0; height: 1.2rem; margin: 0; }
.split .note { margin: 0 0 0.5rem; }

.search-form { margin-bottom: 1rem; }
.search-form label { margin-bottom: 0.3rem; }
.search-form .scan-row input { font-size: 1.1rem; letter-spacing: 0; min-height: 2.9rem; }
.search-form .scan-row button { min-height: 2.9rem; }

/* Day/month/year date fields (see dateInput() in layout.php) */
.date-input { font-variant-numeric: tabular-nums; }
.date-input-date     { max-width: 11rem; }
.date-input-month    { max-width: 9rem; }
.date-input-datetime { max-width: 15rem; }
.date-input:invalid:not(:placeholder-shown) { border-color: var(--err); }

/* ---------- Receiving page ---------- */

.manual-grid.two { grid-template-columns: 1fr 1fr; }
.recv-grid { grid-template-columns: 9rem 1fr; }
#receive-form fieldset { display: grid; gap: 0.75rem; }
#receive-form fieldset .note { margin: 0; }
.open-lines td, .open-lines th { white-space: nowrap; }
.open-lines .sub { display: block; color: var(--ink-soft); font-size: 0.9rem; }
.open-lines input.alloc { width: 6rem; min-height: 2.4rem; margin: 0 0 0 auto; text-align: right; }
.alloc-note { margin: 0.5rem 0 0; color: var(--ink-soft); }
.alloc-note.warn { color: var(--err); font-weight: 600; }
#link-box { border-color: var(--info); background: var(--info-bg); }
#link-box .note { margin: 0; }
#l-latest.warn { color: var(--err); font-weight: 600; }

/* ---------- Report page ---------- */

.report { grid-template-columns: 1fr; max-width: 1000px; }
.report-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.report-filter label { min-width: 10rem; }
.report-table td, .report-table th { white-space: nowrap; }
.report-table td a { color: var(--navy); text-decoration-color: var(--orange); text-decoration-thickness: 2px; font-weight: 600; }
.report-table .num { font-size: 1rem; }

/* Day cells: weekday in a fixed width so the dates below each other line up. */
td.day { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.day .dow { display: inline-block; min-width: 10ch; }

/* ---------- Small screens (handheld scanners, phones) ---------- */

@media (max-width: 820px) {
    .layout, .manage, .sales { grid-template-columns: 1fr; padding: 0.75rem; gap: 0.75rem; }
    .sale-key { grid-template-columns: 1fr 1fr; }
    .recv-grid, .manual-grid.two { grid-template-columns: 1fr; }
    .sale-key label:last-child { grid-column: 1 / -1; }
    .bar { flex-wrap: wrap; }
    .nav { flex-wrap: wrap; order: 3; flex-basis: 100%; }
    .panel { padding: 1rem; }
    .manual-grid { grid-template-columns: 1fr 1fr; }
    .manual-grid label:first-child { grid-column: 1 / -1; }
}

/* Narrow screens. Company always comes last: at the very right on horizontal
   (landscape) screens, at the very bottom on vertical (portrait) ones. */
@media (max-width: 900px), (orientation: portrait) {
    .footer-grid { align-items: start; }
    .footer-shop    { grid-area: shop; }
    .footer-company { grid-area: company; }
    .footer-hours   { grid-area: hours; }
    .footer-closed  { grid-area: closed; }
}
/* Horizontal but narrow: shop details above closing days, then opening hours, Company on the right. */
@media (max-width: 900px) and (orientation: landscape) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
        grid-template-areas: "shop hours company" "closed hours company";
    }
}
/* Vertical: ModelbouwID beside the opening hours, closing days below those, Company across the bottom. */
@media (orientation: portrait) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "shop hours" "shop closed" "company company";
    }
}
/* Phones: one column (below 680px the hours table no longer fits half the width), Company last. */
@media (max-width: 680px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "shop" "hours" "closed" "company";
    }
}

@media (max-width: 480px) {
    .scan-row { flex-wrap: wrap; }
    .scan-row #ean { flex-basis: 100%; }
    .scan-row:has(.camera-btn) #ean { flex-basis: calc(100% - 4.2rem); }
    .scan-row .qty { flex: 1; }
    .toolbar { grid-template-columns: 1fr; }
    .bar .today { display: none; }
    .bar { gap: 0.5rem 0.6rem; padding: 0.7rem 0.9rem; }
    .brand-logo { height: 32px; }
}

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

/* ---------- Calendar widget (common/calendar_widget.php) ---------- */

.home { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.25fr); max-width: 1100px; align-content: start; }
.home.home-solo { grid-template-columns: minmax(0, 34rem); }
.events-page { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr); }
.cal-panel { padding: 1rem; }
.cal { --cal-open: #DCE0E6; --cal-shut: #9CA3AF; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.cal-title { margin: 0; font-size: 1.15rem; text-transform: capitalize; }
.cal-nav {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--on-navy);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
}
.cal-nav:hover { background: var(--orange); color: var(--ink); }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-grid th { padding: 0.2rem 0; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); text-align: center; }
.cal-grid td { padding: 0; }
.cal-day {
    position: relative;
    height: 3.1rem;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
}
/* Hover area: the whole day. The texts sit on top but let the mouse through. */
.cal-fill { position: absolute; inset: 0; }
.cal-fill.open { background: var(--cal-open); }
.cal-fill.shut, .cal-day.closed .cal-fill { background: var(--cal-shut); }
.cal-day.event .cal-fill { background: var(--orange); }
.cal-num, .cal-cat { position: relative; display: block; pointer-events: none; }
.cal-num { padding-top: 0.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal-cat {
    padding: 0 2px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-day.today::after {          /* on top of the coloured halves */
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--navy);
    border-radius: 4px;
    pointer-events: none;
}
.cal-day [title]:not(button) { cursor: help; }
/* Every day is a button: click for a window with its details */
button.cal-fill {
    color: inherit;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--orange);
    cursor: pointer;
}
.cal-day.event button.cal-fill { background: var(--orange); }
button.cal-fill.open { background: var(--cal-open); }
button.cal-fill.shut, .cal-day.closed button.cal-fill { background: var(--cal-shut); }
button.cal-fill.open:hover:not(:disabled)  { background: #CDD2DA; }
button.cal-fill.shut:hover:not(:disabled),
.cal-day.closed button.cal-fill:hover:not(:disabled) { background: #8B93A0; }
.cal-day.event button.cal-fill:hover:not(:disabled) { background: #F2B978; }
.cal-day-text { margin: 0 0 0.4rem; }
button.cal-fill:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.cal-dialog {
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-top: 6px solid var(--orange);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.cal-dialog::backdrop { background: rgba(22, 26, 34, 0.55); }
.cal-dialog-body { padding: 1.1rem 1.25rem 0.25rem; overflow-y: auto; }
.cal-dialog article + article { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cal-dialog h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.cal-event-when { margin: 0 0 0.75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cal-event-cat {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    background: var(--orange);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
}
.cal-event-long { overflow-wrap: anywhere; }
.cal-event-long a { color: var(--navy); font-weight: 600; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.cal-dialog-actions { display: flex; justify-content: flex-end; margin: 0; padding: 0.75rem 1.25rem 1rem; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; }
.cal-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.swatch { display: inline-block; width: 0.95rem; height: 0.95rem; border-radius: 3px; }
.swatch.open  { background: var(--cal-open); }
.swatch.shut  { background: var(--cal-shut); }
.swatch.event { background: var(--orange); }
.cal-hint { margin: 0.4rem 0 0; font-size: 0.82rem; }
textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--field);
    font: inherit;
    font-weight: 400;
    resize: vertical;
}
.cat-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin-top: 1rem; }
.cat-add label { flex: 1 1 12rem; }
.closing-table .sub { display: block; color: var(--ink-soft); font-size: 0.9rem; }
@media (max-width: 820px) {
    .home, .events-page { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Event registrations ---------- */

.cal-register { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.cal-register .note { margin: 0.4rem 0 0; }
.reg-state { margin: 0 0 0.6rem; }
.reg-state.ok { padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.reg-closed {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--on-navy);
    font-weight: 700;
}
.reg-message:empty { display: none; }
.reg-deadline { margin: 0 0 0.6rem; color: var(--ink-soft); }
.reg-message { margin: 0.6rem 0 0; }
.reg-fields { display: grid; gap: 0.6rem; }
.reg-fields .note { margin: 0; }
.reg-cell { white-space: nowrap; }
.reg-cell .sub { display: block; }
.reg-badge { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 3px; font-size: 0.8rem; font-weight: 700; background: var(--muted); }
.reg-badge.state-open   { background: var(--ok-bg); color: var(--ok); }
.reg-badge.state-closed { background: var(--navy); color: var(--on-navy); }
.reg-badge.state-next   { background: var(--orange); color: var(--ink); }
.reg-table td { font-size: 0.92rem; }
.reg-fee { margin: 0; font-weight: 600; }
.reg-total { margin: 0; font-size: 1.1rem; }
.money-input { max-width: 9rem; }
.payref { font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }

/* ---------- Closing days page ---------- */

.closing { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
.stack-panels { display: grid; gap: 1.25rem; min-width: 0; }
.stack-panels > .message { margin: 0; }
form.inline { display: inline; margin: 0; }
a.adj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-weight: 700;
    text-decoration: none;
    vertical-align: middle;
}
.closing-table td { vertical-align: middle; }
.closing-table tr.past td { opacity: 0.55; }
.closing-table tr.editing td { background: var(--orange-tint); }
.status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; font-size: 0.85rem; font-weight: 700; }
.status.closed { background: var(--navy); color: var(--on-navy); }
.status.open   { background: var(--orange); color: var(--ink); }
@media (max-width: 820px) {
    .closing { grid-template-columns: minmax(0, 1fr); }
}
.reg-panel { grid-column: 1 / -1; }
.reg-table .adjust { white-space: nowrap; }

/* ---------- My details: addresses ---------- */

.address-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.address-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
}
.address-list li.editing { background: var(--orange-tint); padding-left: 0.5rem; padding-right: 0.5rem; }
.address-actions { white-space: nowrap; }
.address-grid {
    display: grid;
    grid-template-columns: 7rem 1fr 6rem 6rem;
    grid-template-areas: "street street number box" "postal city city city" "country country country country";
    gap: 0.6rem;
}
.address-grid .street   { grid-area: street; }
.address-grid .number   { grid-area: number; }
.address-grid .box      { grid-area: box; }
.address-grid .postal   { grid-area: postal; }
.address-grid .city     { grid-area: city; }
.address-grid .country  { grid-area: country; }
@media (max-width: 480px) {
    .address-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "street street" "number box" "postal city" "country country";
    }
}

/* ---------- My details: phone numbers ---------- */

.phone-grid { display: grid; grid-template-columns: 11rem 8rem 1fr; gap: 0.6rem; }
.phone-number { font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-type { margin-left: 0.5rem; color: var(--ink-soft); font-size: 0.92rem; }
@media (max-width: 480px) {
    .phone-grid { grid-template-columns: 1fr 1fr; }
    .phone-grid label:last-child { grid-column: 1 / -1; }
}

/* ---------- Header: profile link; details page head ---------- */

.account-link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius);
    color: var(--on-navy);
    text-decoration: none;
}
.account-link.has-avatar { padding: 0.15rem; border-radius: 50%; }
.account-link:hover, .account-link[aria-current="page"] { background: var(--navy-2); }
.account-link.has-avatar[aria-current="page"] { box-shadow: 0 0 0 3px var(--orange); background: none; }
.profile-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.5rem; }
.profile-head h2 { margin: 0; }
.profile-head .note { margin: 0.2rem 0 0; }
.profile-head > div { flex: 1; min-width: 0; }
.profile-logout { margin: 0; }
.avatar.large { width: 56px; height: 56px; font-size: 1.4rem; flex: none; }
@media (max-width: 480px) {
    .profile-head { flex-wrap: wrap; }
}
.address-uses { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.use-badge { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 3px; font-size: 0.78rem; font-weight: 700; background: var(--muted); }
.use-badge.default { background: var(--orange); color: var(--ink); }
.use-badge.invoice { background: var(--navy); color: var(--on-navy); }
.address-use { display: grid; gap: 0.4rem; }
.address-use .note { margin: 0; }
.address-use #vat-field { max-width: 16rem; }
.address-list li > span:first-child { display: flex; flex-direction: column; }
.cal-event-fee { margin: -0.4rem 0 0.75rem; color: var(--ink-soft); }
.cal-event-place { margin: -0.4rem 0 0.75rem; color: var(--ink-soft); }
.cal-event-place a { color: var(--navy); font-weight: 600; text-decoration-color: var(--orange); }   /* same as the date line */

/* ---------- Brand gallery (common/brand_gallery.php) ---------- */

.brand-panel h2 { margin-top: 0; }
/* Collapsible panels (brandPanel()): the heading is the button, ▲ open / ▼ folded */
.collapsible > h2 { margin: 0; }
.panel-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.panel-toggle:hover:not(:disabled) { background: none; color: var(--ink); }
.panel-toggle:hover .panel-tri { color: var(--orange-strong, var(--orange)); }
.panel-tri::before { content: "\25B2"; }                       /* ▲ */
.collapsed .panel-tri::before { content: "\25BC"; }            /* ▼ */
.panel-tri { color: var(--navy); font-size: 0.9em; line-height: 1; }
.collapsible > .panel-body { margin-top: 0.75rem; }
.brand-panel > .panel-body { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.brand-panel.collapsed > .panel-body { display: none; }
.brand-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--brand-tile, 120px), 100%), 1fr));
    gap: 0.75rem;
    align-content: start;
}
.brand-gallery li { min-width: 0; }
/* Scrolling: tiles move up and down inside the widget, the page stays put. */
.brand-gallery.scroll {
    max-height: var(--brand-max-height, 24rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3px 8px 3px 3px;               /* room for the hover ring and the scroll bar */
    scrollbar-width: auto;                  /* a normal, always visible scroll bar on PCs */
    scrollbar-color: var(--navy-line, #9CA3AF) var(--field);
}
/* "fill": as high as the panel it is in (which takes its height from its neighbours) */
.brand-panel { display: flex; flex-direction: column; min-height: 0; }
.brand-gallery.more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent); }
.brand-gallery.more-above { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 2.5rem), transparent); }
.brand-gallery.more-above.more-below {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.brand-gallery.fill { flex: 1 1 0; min-height: 0; max-height: none; }
/* On the home page the brand panel takes the calendar's height: it adds nothing to the
   row height itself (height 0) and is stretched to the row (min-height 100%). */
.home > .brand-panel { align-self: stretch; height: 0; min-height: 100%; }
.home > .brand-panel.collapsed { align-self: start; height: auto; min-height: 0; }   /* folded: just the heading */
@media (max-width: 820px) {            /* one column: nothing beside it to take the height from */
    .home > .brand-panel { height: auto; min-height: 0; }
    .brand-panel > .panel-body { flex: none; }
    .brand-gallery.fill { flex: none; max-height: 24rem; }
}
.brand-gallery a, .brand-gallery span {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    padding: 0.6rem;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.brand-gallery img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.brand-gallery a:hover, .brand-gallery a:focus-visible {
    border-color: var(--orange);
    box-shadow: 0 0 0 2px var(--orange-tint);
    transform: translateY(-1px);
}

/* ---------- Brands page (inventory/brands.php) ---------- */

.brands-page { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr); }
.brand-search { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.brand-search input { flex: 1; min-width: 0; }
.brand-table .brand-thumb { width: 6.5rem; }
.brand-table .brand-thumb img {
    display: block;
    width: 6rem;
    height: 2.6rem;
    object-fit: contain;
    padding: 0.2rem;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.brand-logo-current {
    display: grid;
    place-items: center;
    height: 6rem;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.brand-logo-current img { width: 100%; height: 4.8rem; object-fit: contain; }
@media (max-width: 820px) {
    .brands-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .brand-table .col-items { display: none; }
    .brand-table .brand-thumb { width: 3.8rem; }
    .brand-table .brand-thumb img { width: 3.5rem; height: 1.8rem; }
    .brand-table td.adjust { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .brand-table td.adjust form, .brand-table td.adjust .adj { width: 100%; margin: 0; text-align: center; }
    .brand-table th, .brand-table td { padding-left: 0.2rem; padding-right: 0.2rem; }
    .brand-table .adj { padding: 0.2rem 0.35rem; }
    .brand-table .num { font-size: 1rem; }
    .brand-table .brand-thumb .sub { font-size: 0.75rem; }
    .brand-table .brand-url { display: none; }
}

/* ---------- Items page (inventory/items.php) ---------- */

.item-search select { width: auto; max-width: 12rem; margin: 0; }
.item-table .ean { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.item-table .show-narrow { display: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; }
.pager .adj { margin: 0; display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 560px) {
    .item-search { flex-wrap: wrap; }
    .item-search input { flex-basis: 100%; }
    .item-search select { flex: 1; max-width: none; }
    .item-table .col-ean { display: none; }
    .item-table .show-narrow { display: block; }
    .item-table th, .item-table td { padding-left: 0.2rem; padding-right: 0.2rem; }
    .item-table .num { font-size: 1rem; }
    .item-table td.adjust { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .item-table td.adjust form, .item-table td.adjust .adj { width: 100%; margin: 0; text-align: center; }
    .item-table .adj { padding: 0.2rem 0.35rem; }
}

/* ---------- Suppliers page (sales/suppliers.php) ---------- */

.suppliers-page { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.supplier-table .sup-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.supplier-table .sup-link:hover { color: var(--orange-strong, var(--orange)); text-decoration: underline; }
.article-form { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.article-form h3 { margin: 0; font-size: 1rem; }
.article-table .money, .article-history .money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.article-history summary { cursor: pointer; color: var(--ink-soft); }
.article-history table { margin-top: 0.5rem; }
@media (max-width: 820px) {
    .suppliers-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .supplier-table td.adjust, .article-table td.adjust { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .supplier-table td.adjust form, .supplier-table td.adjust .adj,
    .article-table td.adjust form, .article-table td.adjust .adj { width: 100%; margin: 0; text-align: center; }
    .supplier-table th, .supplier-table td, .article-table th, .article-table td { padding-left: 0.2rem; padding-right: 0.2rem; }
    .article-table .num, .supplier-table .num { font-size: 1rem; }
}
.manual-grid.three { grid-template-columns: 1fr 1fr minmax(5rem, 0.6fr); }
@media (max-width: 560px) {
    .manual-grid.three { grid-template-columns: 1fr 1fr; }
    .manual-grid.three label:last-child { grid-column: auto; }
}

/* Panel title with a round + button (opens a popup form) */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.panel-head h2 { margin: 0; }
.add-btn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--orange);
    color: var(--ink);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.add-btn:hover, .add-btn:focus-visible { background: var(--navy); color: var(--orange); }
.brand-search .button { display: inline-flex; align-items: center; text-decoration: none; }

/* Popup forms (<dialog class="cal-dialog form-dialog">) */
.form-dialog { width: min(34rem, calc(100vw - 2rem)); }
.form-dialog.wide { width: min(44rem, calc(100vw - 2rem)); }
.form-dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 2.5rem); gap: 0; }
.form-dialog .cal-dialog-body { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 0.5rem; }
.form-dialog .cal-dialog-body h2 { margin-bottom: 0.25rem; }
.form-dialog .cal-dialog-actions { gap: 0.6rem; border-top: 1px solid var(--line); }

/* ---------- Invoices page (sales/invoices.php) ---------- */

.invoices-page { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
.invoice-filter select { width: auto; max-width: 16rem; margin: 0; }
.invoice-scroll { max-height: 65vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.invoice-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); box-shadow: inset 0 -1px 0 var(--line); }
.invoice-table th a { color: inherit; text-decoration: none; white-space: nowrap; }
.invoice-table th a:hover { color: var(--ink); text-decoration: underline; }
.invoice-table .nowrap, .invoice-lines .money { white-space: nowrap; }
.invoice-table .right, .invoice-lines .right { text-align: right; }
.invoice-table .money { font-variant-numeric: tabular-nums; }
.head-actions { display: flex; align-items: center; gap: 0.5rem; }
.head-actions .button { display: inline-flex; align-items: center; text-decoration: none; }
.invoice-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem 1.25rem; margin: 0; }
.invoice-fields dt { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.invoice-fields dd { margin: 0.15rem 0 0; }
.invoice-fields input { margin: 0; width: 100%; }
.invoice-fields .sub-inline { color: var(--ink-soft); }
.invoice-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1.5rem; margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.invoice-totals strong { font-variant-numeric: tabular-nums; }
.invoice-lines input.money-input { width: 7.5rem; max-width: 100%; margin: 0; text-align: right; }
.invoice-lines .line-doc { display: block; width: 100%; margin: 0.35rem 0 0; font-size: 0.85rem; min-height: 2rem; padding: 0.2rem 0.5rem; }
@media (max-width: 680px) {
    .invoice-table .col-lines, .invoice-lines .col-received { display: none; }
    .invoice-lines input.money-input { width: 5.5rem; }
    .invoice-filter { flex-wrap: wrap; }
    .invoice-filter select, .invoice-filter input { flex: 1 1 100%; max-width: none; }
    .head-actions .button { padding: 0.4rem 0.7rem; }
}
/* Phones: each invoice line as a small card, the article on top and the numbers below */
@media (max-width: 680px) {
    .invoice-lines thead { display: none; }
    .invoice-lines tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.35rem 0.5rem; align-items: center;
                              padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
    .invoice-lines tbody td { border: 0; padding: 0; }
    .invoice-lines tbody td:first-child { grid-column: 1 / -1; }
    .invoice-lines tbody td.empty { grid-column: 1 / -1; }
    .invoice-lines tbody td.right::before { display: block; font-size: 0.75rem; color: var(--ink-soft); text-align: left; }
    .invoice-lines tbody td:nth-child(2)::before { content: attr(data-label); }
    .invoice-lines tbody td:nth-child(3)::before { content: attr(data-label); }
    .invoice-lines tbody td:nth-child(4)::before { content: attr(data-label); }
    .invoice-lines input.money-input { width: 100%; }
    .invoice-lines .adj { margin: 0; }
}
.invoice-table .show-narrow { display: none; }
@media (max-width: 680px) {
    .invoice-table .col-supplier { display: none; }
    .invoice-table .show-narrow { display: block; }
    .invoice-table .nowrap { white-space: normal; }
    .invoice-table td, .invoice-table th { padding-left: 0.35rem; padding-right: 0.35rem; }
}
.invoice-table .sup-link { font-weight: 600; color: var(--navy); text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.invoice-table .sup-link:hover { color: var(--orange-strong, var(--orange)); }
input[data-drop-filename].drop-target { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-tint); background: var(--orange-tint); }
.items-page { grid-template-columns: minmax(0, 1fr); max-width: 980px; }

/* ---------- Item properties (inventory/items.php) and categories (inventory/categories.php) ---------- */

.item-cell { display: flex; align-items: flex-start; gap: 0.4rem; }
.row-toggle, .row-toggle-space { flex: none; width: 1.6rem; height: 1.6rem; }
.row-toggle {
    display: inline-grid; place-items: center; min-height: 0; padding: 0; margin-top: 0.1rem;
    background: none; border: 0; border-radius: 4px; color: var(--navy); font-size: 0.85rem; cursor: pointer;
}
.row-toggle::before { content: "\25B6"; }                         /* ▶ */
.row-toggle[aria-expanded="true"]::before { content: "\25BC"; }   /* ▼ */
.row-toggle:hover:not(:disabled) { background: var(--hover); color: var(--orange-strong, var(--orange)); }
.props-link { color: inherit; font-weight: 600; text-decoration: underline dotted var(--orange); text-underline-offset: 3px; }
.props-link:hover { color: var(--navy); text-decoration-style: solid; }
.prop-cats { color: var(--navy); }
.prop-row > td { background: var(--field); padding-top: 0.5rem; padding-bottom: 0.75rem; }
.prop-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem; padding-left: 2rem; }
.prop-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.prop-card h4 { margin: 0 0 0.35rem; font-size: 0.9rem; }
.prop-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; margin: 0; font-size: 0.9rem; }
.prop-card dl div { display: contents; }
.prop-card dt { color: var(--ink-soft); }
.prop-card dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.prop-cat { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem 0.75rem; margin: 0; }
.prop-cat legend { padding: 0 0.25rem; font-weight: 700; }
.prop-grid { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) minmax(7rem, auto) auto; gap: 0.4rem 0.6rem; align-items: center; }
.prop-grid input, .prop-grid select { margin: 0; }
.prop-grid .req { color: var(--err); font-weight: 700; }
.prop-since { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.cat-list { display: grid; gap: 1rem; }
.cat-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.75rem; background: var(--panel); }
.cat-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.cat-head h3 { margin: 0; font-size: 1.05rem; }
.cat-head .adj { margin-left: auto; text-decoration: none; display: inline-flex; align-items: center; }
.toggle-mandatory.on { background: var(--orange-tint); border-color: var(--orange); font-weight: 700; }
@media (max-width: 560px) {
    .prop-grid { grid-template-columns: 1fr 1fr; }
    .prop-grid .prop-name { grid-column: 1 / -1; margin-top: 0.3rem; }
    .prop-since { grid-column: 1 / -1; }
    .prop-view { padding-left: 0; }
    .cat-table .col-used { display: none; }
}
.prop-grid { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto auto; }
.prop-type { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; padding: 0.15rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; background: var(--field); }
.type-select { width: auto; min-height: 2.2rem; margin: 0; padding: 0.15rem 0.4rem; }
@media (max-width: 560px) {
    .prop-grid { grid-template-columns: 1fr auto; }
    .prop-grid .prop-name, .prop-since { grid-column: 1 / -1; }
}
/* itsme® button: their orange (#FF4612) with white text, as in itsme's brand guidelines */
.login-buttons a.login-itsme, .menu-list a.login-itsme { background: #FF4612; border-color: #FF4612; color: #fff; }
.login-buttons a.login-itsme:hover, .menu-list a.login-itsme:hover { background: #E03A08; border-color: #E03A08; color: #fff; }

/* New invoice: fields filled in from a dropped e-invoice */
.form-dialog .autofilled { background: var(--orange-tint); border-color: var(--orange); }
.form-dialog .import-hint { margin-top: -.4rem; font-size: .85em; }
.form-dialog .import-note { display: grid; gap: .2rem; padding: .5rem .7rem; border-radius: 6px; border-left: 4px solid var(--orange); background: var(--orange-tint); }
.form-dialog .import-note[hidden] { display: none; }
.form-dialog .import-note.ok { border-left-color: #2e7d32; background: #edf7ee; }
.import-pending { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 .8rem; padding: .6rem .8rem;
    border-left: 4px solid var(--orange); background: var(--orange-tint); border-radius: 6px; }
.import-pending p { margin: 0; flex: 1 1 16rem; }

/* Location picker (common/location_picker.js): a field button and a popup with a scrolling tree */
.field { display: grid; gap: .3rem; align-content: start; }
.field-label { font-weight: 600; }
.picker-field { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; min-height: 2.9rem;
    padding: .45rem .8rem; text-align: left; font: inherit; color: var(--ink); background: var(--field);
    border: 1px solid var(--line, #c9c9c9); border-radius: 6px; cursor: pointer; }
.picker-field:hover { border-color: var(--ink); }
.picker-field::after { content: ''; }
.picker-field .lp-code { font-weight: 700; }
.picker-field .lp-path { font-size: .85em; color: var(--ink-soft); overflow-wrap: anywhere; }
.picker-field .lp-placeholder { color: var(--ink-soft); }
.loc-picker { width: min(40rem, calc(100vw - 2rem)); }
.loc-picker .cal-dialog-body { display: flex; flex-direction: column; gap: .6rem; }
.loc-picker .lp-search { width: 100%; }
.loc-picker .lp-scroll { max-height: min(60vh, 32rem); overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line, #ddd); border-radius: 6px; padding: .3rem; }
.loc-picker .node-btn.not-pickable { opacity: .85; }
.loc-picker .node-btn.not-pickable .code { font-weight: 400; }
.loc-picker .node-btn:disabled { opacity: .55; cursor: default; }
@media (max-width: 40rem) { .loc-picker .lp-scroll { max-height: 65vh; } }
.loc-picker .node-btn .code { flex: none; }
.loc-picker .node-btn .descr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 40rem) {
    .loc-picker .tree ul { margin-left: .55rem; padding-left: .25rem; }
    .loc-picker .twisty, .loc-picker .twisty-space { width: 1.8rem; }
    .loc-picker .node-btn { gap: .35rem; padding: .35rem .4rem; }
    .loc-picker .node-btn .kind { display: none; }
}

/* Stock popup (common/stock_popup.js) */
.stock-link { padding: .1rem .45rem; min-height: 0; font: inherit; font-weight: 700; color: var(--ink); background: transparent;
    border: 1px solid transparent; border-radius: 4px; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.stock-link:hover, .stock-link:focus-visible { background: var(--orange-tint); border-color: var(--orange); }
.stock-popup { width: min(46rem, calc(100vw - 2rem)); }
.stock-popup .sp-scroll { max-height: min(55vh, 30rem); overflow-y: auto; overscroll-behavior: contain; }
.stock-popup .stock-table td .sub { display: block; }
.stock-popup .sp-total { margin: .2rem 0 0; text-align: right; }
.stock-move { width: min(34rem, calc(100vw - 2rem)); }