:root {
    --bg: #f4f5f7;
    --panel: #ffffff;
    --ink: #1d2430;
    --muted: #677285;
    --line: #d9dde4;
    --accent: #0b5cad;
    --accent-ink: #ffffff;
    --head: #1f2a37;
    --locked: #c62828;
    --hover: #e8f0fb;
    --zebra: #f8f9fb;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; font-weight: 600; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; font-weight: 600; }
h1:focus { outline: none; }

a { color: var(--accent); }

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

/* ---------- top bar ---------- */
.topbar {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--head); color: #fff; padding: 0 1.25rem; height: 3.25rem;
    position: sticky; top: 0; z-index: 10;
}
.topbar .brand { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.topbar nav { display: flex; gap: .25rem; flex: 1; overflow-x: auto; }
.topbar nav a {
    color: #cfd6e0; text-decoration: none; padding: .45rem .8rem; border-radius: 4px; white-space: nowrap;
}
.topbar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.topbar nav a.active { background: var(--accent); color: #fff; }
.topbar select { background: #2c3a4b; color: #fff; border: 1px solid #44546a; border-radius: 4px; padding: .3rem .4rem; }

.content { padding: 1.25rem; max-width: 1600px; margin: 0 auto; }

/* ---------- controls ---------- */
.btn {
    background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
    padding: .4rem .9rem; font: inherit; cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }

input, select { font: inherit; }
input:not([type=checkbox]) {
    border: 1px solid var(--line); border-radius: 4px; padding: .35rem .5rem; width: 12rem; background: #fff;
}
input.w-s { width: 6.5rem; }
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.filters {
    background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
    padding: .75rem 1rem; margin-bottom: 1rem;
}
.filters .checks { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.filters .checks:empty { display: none; }
.filters .checks label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.filters .checks label.disabled { color: var(--muted); cursor: default; }
.filters .fields { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.filters .fields label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }

/* ---------- tables ---------- */
.grid-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: auto; }
.grid { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.grid th, .grid td { padding: .4rem .65rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.grid thead th {
    background: #eef1f5; font-weight: 600; font-size: .85rem; position: sticky; top: 0; z-index: 1;
}
.grid tbody tr:nth-child(even) { background: var(--zebra); }
.grid tbody tr.clickable { cursor: pointer; }
.grid tbody tr.clickable:hover { background: var(--hover); }
.grid tfoot td { font-weight: 600; background: #eef1f5; border-bottom: 0; }
.grid .num { text-align: right; }
.grid .strong { font-weight: 600; }
.grid tr.locked td:first-child, .locked { color: var(--locked); font-weight: 700; }
.grid tr.hold td { color: #8a5a00; }

.muted { color: var(--muted); }
.error { color: var(--locked); }

.statusbar {
    display: flex; gap: 1rem; align-items: center; justify-content: flex-end;
    margin-top: 1rem; font-size: .85rem;
}

/* ---------- main menu ---------- */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; max-width: 980px; }
.menu-tile {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 5.5rem; padding: 1rem; border-radius: 6px; text-decoration: none; font-weight: 600;
    background: var(--panel); border: 1px solid var(--line); color: var(--ink);
}
a.menu-tile:hover { border-color: var(--accent); background: var(--hover); color: var(--accent); }
.menu-tile.disabled { color: #a8b0bc; background: #f0f1f4; cursor: default; }

/* ---------- cassette overview ---------- */
.cass-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: .35rem; }
.cass-tile {
    display: flex; align-items: center; justify-content: center; height: 2.4rem; border-radius: 4px;
    text-decoration: none; color: var(--ink); font-weight: 600; border: 2px solid transparent;
    font-variant-numeric: tabular-nums;
}
.cass-tile:hover { border-color: var(--accent); }
.cass-tile.st-0 { background: #e3e6ea; }   /* empty */
.cass-tile.st-1 { background: #bfd8f2; }   /* material */
.cass-tile.st-2 { background: #c9e7c4; }   /* cut parts */
.cass-tile.st-3 { background: #f3e2b3; }   /* micro jointed parts */
.cass-tile.st-4 { background: #e2cdea; }   /* bent parts */
.cass-tile.locked { color: var(--locked); border-color: var(--locked); }
.cass-tile.reserved { box-shadow: inset 0 -4px 0 #ef8f00; }
.cass-tile.small { display: inline-block; width: 1rem; height: 1rem; vertical-align: middle; margin: 0 .25rem 0 1rem; }
.legend { color: var(--muted); font-size: .85rem; }
.hint { font-size: .8rem; align-self: center; }

/* ---------- cassette data ---------- */
.facts-bar {
    display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: flex-end;
    background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .7rem 1rem;
}
.facts-bar .fact { display: flex; flex-direction: column; gap: .1rem; }
.facts-bar .fact span { color: var(--muted); font-size: .8rem; }
.facts-bar .fact.main b { font-size: 1.6rem; line-height: 1; }
.facts-bar .fact.locked, .facts-bar .fact.locked b { color: var(--locked); font-weight: 700; }
.grid tbody tr.selected, .grid tbody tr.selected:hover { background: #fff3c4; }
.cass-drawing { margin-top: 1.25rem; }
.cass-svg .stack { cursor: pointer; }
.cass-svg .stack.selected rect { stroke: #d97706; stroke-width: 16; }

.cass-page { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .cass-page { grid-template-columns: 1fr; } }

.facts {
    display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0;
    background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1rem;
}
.facts dt { color: var(--muted); font-size: .85rem; align-self: center; }
.facts dd { margin: 0; }
.facts dd.big { font-size: 1.6rem; font-weight: 700; line-height: 1; }

.cass-drawing { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .75rem; }
.cass-svg { width: 100%; height: auto; max-height: 42vh; display: block; }
.cass-svg .cass-floor { fill: #f1f3f6; stroke: #5b6573; stroke-width: 8; }
.cass-svg .pallet { fill: #e7d6b8; stroke: #b39363; stroke-width: 4; }
.cass-svg .sheet rect { fill: #b9c9da; fill-opacity: .85; stroke: #4f6b88; stroke-width: 5; }
.cass-svg .sheet text { fill: #23384d; font-weight: 600; }
.cass-svg .border-area { fill: #5b6573; fill-opacity: .08; stroke: #8a94a3; stroke-width: 3; stroke-dasharray: 20 14; }
.cass-svg .stack rect { stroke: #37414f; stroke-width: 4; fill-opacity: .9; }
.cass-svg .stack text { fill: #1d2430; pointer-events: none; }
.cass-svg .stack:hover rect { stroke: var(--accent); stroke-width: 10; }
.cass-svg .stack.outside rect { stroke: var(--locked); stroke-dasharray: 30 18; }
.cass-svg .stack.hold rect { stroke: #ef8f00; stroke-width: 10; }

.edit-panel {
    margin-top: .75rem; padding: .75rem 1rem; background: var(--panel);
    border: 1px solid var(--line); border-radius: 6px;
}
.edit-panel h3 { margin: 0 0 .5rem; font-size: 1rem; }
.edit-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .25rem 0 .5rem; }
.edit-row label { display: flex; align-items: center; gap: .4rem; }
.add-form .fields { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .6rem; }
.add-form .fields label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
.add-form .fields label.wide input { width: 22rem; }
.add-form select { border: 1px solid var(--line); border-radius: 4px; padding: .35rem .4rem; min-width: 6rem; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #094c8f; color: #fff; }
.btn.danger { background: var(--locked); border-color: var(--locked); color: #fff; }
.btn.danger-outline { color: var(--locked); border-color: #e7b3b3; }
.confirm { color: var(--locked); font-weight: 600; }
.msg { padding: .45rem .7rem; border-radius: 4px; margin-bottom: .5rem; }
.msg.ok { background: #e6f4ea; color: #1e6b34; }
.msg.error { background: #fdecea; color: var(--locked); }

.view-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: .5rem; font-size: .9rem; }
.view-tools label { display: flex; align-items: center; gap: .35rem; }
.view-tools select { border: 1px solid var(--line); border-radius: 4px; padding: .25rem .4rem; }

.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .45rem; vertical-align: -1px; border: 1px solid #37414f; }

/* ---------- framework ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }