:root {
  --bg: #f4f6f8; --card: #fff; --text: #1d2733; --muted: #6b7785; --line: #dde2e8;
  --accent: #1f5fbf; --accent-text: #fff; --danger: #b3261e; --ok: #1b7a43; --warn: #9a6a00;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14181d; --card: #1c2229; --text: #e6eaee; --muted: #93a0ad; --line: #2c353f;
    --accent: #5b9bf0; --accent-text: #0b1420; --danger: #f2877f; --ok: #5fcf8d; --warn: #e0b24a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.muted { color: var(--muted); } .small { font-size: .85em; } .bad { color: var(--danger); font-weight: 600; }
.nowrap { white-space: nowrap; } .num { text-align: right; font-variant-numeric: tabular-nums; }
.mono, code, .code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.code { font-size: .6em; background: var(--line); padding: .1em .45em; border-radius: 4px; vertical-align: middle; }
.pre { white-space: pre-wrap; }
[hidden] { display: none !important; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding: .5rem 1rem;
  background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--text); }
.topbar nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.scanbox { margin-left: auto; } .scanbox input { width: 14rem; }
.usermenu { display: flex; align-items: center; gap: .6rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.narrow { max-width: 30rem; } .card.login { margin: 12vh auto 0; }
.center { text-align: center; }
.center .inline { display: inline-block; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1rem; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem; }
.head h1, .head h2 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }
.head .actions { margin: 0; }
.crumbs { color: var(--muted); font-size: .9em; margin-bottom: .4rem; }
.inline { display: inline; margin: 0; }

input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: .4rem .55rem; max-width: 100%; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .75rem; }
.field > span, .field > label > span { font-size: .85em; color: var(--muted); } .field small { color: var(--muted); }
.check { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.form { max-width: 46rem; } fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 1rem; padding: .75rem; }
legend { padding: 0 .4rem; color: var(--muted); font-size: .85em; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
.filters .field { margin: 0; } .filters input[type=search] { min-width: 18rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.inline-form .field { margin: 0; }
.scan-big { width: 100%; font-size: 1.4rem; padding: .7rem; margin: .5rem 0 1rem; }

.btn { display: inline-block; font: inherit; cursor: pointer; padding: .4rem .85rem; border-radius: 6px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); }
.btn:hover { text-decoration: none; border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }

table { width: 100%; border-collapse: collapse; }
td, th { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .8em; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.grid { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
dl { display: grid; grid-template-columns: 11rem 1fr; gap: .35rem .75rem; margin: 0; }
dt { color: var(--muted); } dd { margin: 0; }
.tree, .tree ul { list-style: none; margin: 0; padding-left: 1.2rem; } .tree { padding-left: 0; }
.tree li { padding: .15rem 0; } .tree ul { border-left: 1px solid var(--line); margin-left: .3rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; color: var(--text); }
.tile b { display: block; font-size: 1.8rem; line-height: 1.1; } .tile span { color: var(--muted); }
.badge { display: inline-block; font-size: .75em; padding: .05em .55em; border-radius: 99px; border: 1px solid var(--line); }
.st-in_use { color: var(--ok); border-color: var(--ok); } .st-repair { color: var(--warn); border-color: var(--warn); }
.st-retired { color: var(--muted); } .role-admin { color: var(--danger); border-color: var(--danger); }
.pager { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }

.flash { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-radius: 6px;
  margin-bottom: 1rem; border: 1px solid var(--line); background: var(--card); }
.flash-success { border-color: var(--ok); } .flash-error { border-color: var(--danger); color: var(--danger); }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal-box { background: var(--card); border-radius: 8px; padding: 1.25rem; max-width: 26rem; width: calc(100% - 2rem); }

.label-page { padding: 1rem; } .label-toolbar { max-width: 40rem; margin-bottom: 1rem; }
.sheet-scroll { overflow-x: auto; }
.sheet-custom { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; width: 100%; }
.sheet-custom legend { grid-column: 1 / -1; }

.scanbox { display: flex; gap: .4rem; }
.navtoggle { display: none; margin-left: auto; }
.camera-box { max-width: 32rem; text-align: center; }
.camera-view { position: relative; overflow: hidden; border-radius: 6px; background: #000; }
.camera-view video { display: block; width: 100%; height: min(60vh, 26rem); object-fit: cover; }
/* aiming frame: the ZXing fallback decodes only this part of the picture (see scan.js GUIDE) */
.camera-guide { position: absolute; left: 8%; right: 8%; top: 30%; bottom: 30%; border: 2px solid rgba(255,255,255,.9);
  border-radius: 6px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.camera-guide::after { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; border-top: 2px solid rgba(255,60,60,.8); }
.camera-tools { display: flex; gap: .75rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.camera-tools label { display: flex; gap: .4rem; align-items: center; }
.camera-tools input[type=range] { width: 9rem; }
.camera-tools [aria-pressed=true] { background: #ffe58a; }
.camera-box .actions { justify-content: center; }

/* tablets and phones */
@media (max-width: 800px) {
  main { padding: .75rem; }
  .topbar { padding: .5rem .75rem; gap: .5rem; }
  .navtoggle { display: inline-block; }
  .scanbox { order: 3; margin-left: 0; width: 100%; } .scanbox input { flex: 1; width: auto; min-width: 0; }
  .topbar nav, .topbar .usermenu { display: none; order: 4; width: 100%; }
  .topbar.open nav { display: flex; flex-direction: column; gap: 0; }
  .topbar.open nav a { padding: .6rem .25rem; border-bottom: 1px solid var(--line); }
  .topbar.open .usermenu { display: flex; flex-wrap: wrap; }
  .cols { grid-template-columns: 1fr; }
  .filters input[type=search], .head .actions input[type=search] { min-width: 0; width: 100%; }
  .filters .field { flex: 1 1 8rem; }
  table { display: block; overflow-x: auto; }
  .label-toolbar { max-width: none; }
}
@media (max-width: 640px) {
  dl { grid-template-columns: 1fr; } td, th { padding: .35rem .3rem; }
  .card.login { margin-top: 4vh; }
  .modal-box { max-height: 90vh; overflow-y: auto; }
}
/* touch screens: finger-sized targets, and 16px text so iOS does not zoom into fields */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; min-height: 2.6rem; }
  input[type=checkbox], input[type=radio] { min-height: 0; width: 1.3rem; height: 1.3rem; }
  .btn { min-height: 2.6rem; padding: .5rem 1rem; }
  .topbar nav a, .tree summary, .tree .leaf { padding-top: .4rem; padding-bottom: .4rem; }
  td, th { padding-top: .55rem; padding-bottom: .55rem; }
}

/* overview tree */
.tree details > summary { cursor: pointer; padding: .15rem 0; }
.tree .leaf { display: block; padding: .15rem 0 .15rem 1.05rem; }
.tree-location { font-weight: 600; } .tree-company { font-weight: 700; font-size: 1.05em; }
.count { display: inline-block; min-width: 1.5em; padding: 0 .4em; border-radius: 99px; background: var(--line);
  color: var(--muted); font-size: .75em; text-align: center; }
.code-sm { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; color: var(--muted); }
.section-title { margin: 1.5rem 0 .75rem; font-size: 1rem; color: var(--muted); }
.head .actions input[type=search] { min-width: 14rem; }

/* asset form: additional data rows and "inside asset" type-ahead */
.cd-row { display: flex; gap: .5rem; margin-bottom: .5rem; } .cd-row input { flex: 1; min-width: 0; }
.suggest-wrap { position: relative; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; max-height: 18rem; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.suggest-item { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); background: none;
  border: 0; border-bottom: 1px solid var(--line); padding: .45rem .6rem; cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--bg); }

.login-language { text-align: center; margin-top: -.25rem; }

/* inventory counts */
.progress { height: .6rem; background: var(--line); border-radius: 99px; overflow: hidden; margin: .4rem 0; }
.progress span { display: block; height: 100%; background: var(--ok); }
.btn.big { display: block; width: 100%; font-size: 1.15rem; padding: .9rem; margin: .5rem 0; text-align: center; }
.scan-form { display: flex; gap: .5rem; align-items: center; }
.scan-form .scan-big { margin: .5rem 0; }
.scan-result { padding: .8rem 1rem; border-radius: 8px; border: 2px solid var(--line); margin: .5rem 0 1rem; font-weight: 600; }
.scan-result .btn { display: block; width: 100%; margin-top: .5rem; text-align: left; font-weight: normal; }
.scan-result.found { border-color: var(--ok); color: var(--ok); }
.scan-result.again { border-color: var(--accent); }
.scan-result.extra, .scan-result.choose { border-color: var(--warn); color: var(--warn); }
.scan-result.error { border-color: var(--danger); color: var(--danger); }
.scan-log { list-style: none; padding: 0; margin: 0; }
.scan-log li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.scan-log li.extra { color: var(--warn); }
label.check { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0; }