/* TapeScan — styles (base theme shared with iac-hdds) */

:root {
    --bg: #0f1115;
    --surface: #1a1d24;
    --surface-2: #222632;
    --border: #2f3443;
    --text: #e6e8ee;
    --muted: #9aa3b2;
    --accent: #4aa3ff;
    --accent-hover: #69b2ff;
    --ok: #3ecf8e;
    --warn: #f2b134;
    --err: #f2555a;
    --radius: 6px;
}

* { box-sizing: border-box; }
/* The hidden attribute must win over component display rules (.toolbar, .armed-bar are flex). */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar .brand {
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text);
}
.topbar nav { display: flex; gap: .25rem; margin-left: 1rem; flex: 1; flex-wrap: wrap; }
.topbar nav a {
    color: var(--muted);
    padding: .4rem .7rem;
    border-radius: var(--radius);
}
.topbar nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.topbar nav a.nav-key { background: var(--accent); color: #001; font-weight: 600; }
.topbar nav a.nav-key:hover { background: var(--accent-hover); color: #001; }
.user-menu { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.user-menu a { color: var(--muted); }

.container {
    max-width: 1200px;
    margin: 1.25rem auto;
    padding: 0 1.25rem;
}

h1, h2, h3 { margin: .5em 0; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; color: var(--muted); margin-top: 1.5rem; }
h3 { font-size: 1rem; }

.muted { color: var(--muted); }
.small { font-size: .85em; }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.inline { display: inline; }
.linklike {
    background: none;
    border: 0;
    color: var(--accent);
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.linklike:hover { color: var(--accent-hover); text-decoration: underline; }

.alert {
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.alert.ok  { background: rgba(62, 207, 142, .1);  border-color: rgba(62, 207, 142, .4); }
.alert.err { background: rgba(242, 85, 90, .1);   border-color: rgba(242, 85, 90, .4); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

form .row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
form label {
    display: flex;
    flex-direction: column;
    flex: 1 1 160px;
    font-size: .85rem;
    color: var(--muted);
    gap: .25rem;
}
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], select, textarea {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .5rem .65rem;
    border-radius: var(--radius);
    font: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(74, 163, 255, .25);
}
input.scan {
    font-size: 1.15rem;
    padding: .75rem 1rem;
}
input.scan:focus { background: #17212d; }

button, .btn {
    background: var(--accent);
    color: #001;
    border: 0;
    padding: .5rem 1rem;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
button:hover, .btn:hover { background: var(--accent-hover); text-decoration: none; }
button.secondary, .btn.secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: 500;
}
button.secondary:hover, .btn.secondary:hover { background: var(--surface); }
button.danger, .btn.danger { background: var(--err); color: #fff; }
button.danger:hover, .btn.danger:hover { background: #ff7a7f; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
th, td {
    padding: .55rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
th {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(74,163,255, .04); }

.badge {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--border);
}


.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }

.login-box {
    max-width: 22rem;
    margin: 6rem auto;
}
.login-box h1 { text-align: center; margin-bottom: 1.5rem; }

pre.log {
    background: #0a0d12;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    overflow-x: auto;
    color: #c0f0c8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.kv dt { color: var(--muted); }

details.raw { margin-top: 1rem; }
details.raw summary { cursor: pointer; color: var(--muted); }

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}
.stat .num { font-size: 2rem; font-weight: 700; color: var(--accent); }
.stat .lbl { color: var(--muted); font-size: .85rem; }

.scan-hint {
    color: var(--muted);
    font-size: .9rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
}

/* Sortable table headers */
th.sortable a, th.sort-active a {
    color: inherit;
    text-decoration: none;
    display: block;
}
th.sortable a:hover { color: var(--accent); text-decoration: none; }
th.sort-active { color: var(--accent); }
th.sort-active a { color: var(--accent); }

/* Pagination strip */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .6rem 0;
    margin: .5rem 0;
    color: var(--muted);
    font-size: .9rem;
}
.pager-summary { flex: 1 1 auto; }
.pager-per, .pager-nav { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.pager-per a, .pager-nav a {
    padding: .15rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    text-decoration: none;
    background: var(--surface);
}
.pager-per a:hover, .pager-nav a:hover { background: var(--surface-2); color: var(--text); }
.pager-per .pager-per-active { background: var(--accent); color: #001; border-color: var(--accent); font-weight: 600; }
.pager-page { padding: 0 .4rem; }

/* Report actions (export/print buttons row) */
.report-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: .75rem 0 1rem;
}

/* Print-friendly view — Browser's Print / Save-as-PDF produces a clean document */
@media print {
    .topbar, .pager, .report-actions, .actions, form, button, .linklike { display: none !important; }
    body { background: white; color: black; }
    .container { max-width: none; margin: 0; padding: 0; }
    .card { background: white; border: 0; padding: 0; }
    table { border-collapse: collapse; width: 100%; font-size: 10pt; }
    th { background: #eee !important; color: black !important; border-bottom: 1px solid #333; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    td { border-bottom: 1px solid #ddd; padding: 4px 6px; color: black; }
    tr:nth-child(odd) td { background: #f8f8f8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { color: black; text-decoration: none; }
    .badge { border: 1px solid #888; background: white !important; color: black !important; }
    h1, h2, h3 { color: black; page-break-after: avoid; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; page-break-after: auto; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    .muted { color: #555 !important; }
    .print-only { display: block !important; }
    @page { margin: 1.5cm; }
}
.print-only { display: none; }

/* =====================================================================
   TapeScan additions
   ===================================================================== */

/* Status badges (View::badge → .b-<value>) */
.badge.b-blank       { background: rgba(74,163,255,.14); border-color: rgba(74,163,255,.45); color:#bddcff; }
.badge.b-written     { background: rgba(62,207,142,.16); border-color: rgba(62,207,142,.5);  color:#bef2d6; }
.badge.b-faulty      { background: rgba(242,85,90,.14);  border-color: rgba(242,85,90,.45);  color:#ffb4b6; }
.badge.b-retired     { background: rgba(120,120,120,.18); border-color: rgba(120,120,120,.5); color:#bbbbbb; }
.badge.b-mixed       { background: rgba(242,177,52,.14); border-color: rgba(242,177,52,.45); color:#f7d58a; }
.badge.b-empty       { background: rgba(120,120,120,.10); border-color: rgba(120,120,120,.35); color:#9aa3b2; }
.badge.b-in_facility, .badge.b-in { background: rgba(62,207,142,.16); border-color: rgba(62,207,142,.5); color:#bef2d6; }
.badge.b-out         { background: rgba(242,177,52,.14); border-color: rgba(242,177,52,.45); color:#f7d58a; }
.badge.b-quoted      { background: rgba(120,120,120,.18); border-color: rgba(120,120,120,.5); color:#cccccc; }
.badge.b-ordered     { background: rgba(74,163,255,.14); border-color: rgba(74,163,255,.45); color:#bddcff; }
.badge.b-shipped     { background: rgba(162,74,255,.16); border-color: rgba(162,74,255,.5);  color:#d3b7ff; }
.badge.b-received    { background: rgba(62,207,142,.16); border-color: rgba(62,207,142,.5);  color:#bef2d6; }
.badge.b-cancelled   { background: rgba(242,85,90,.10);  border-color: rgba(242,85,90,.35);  color:#ffb4b6; }
.badge.b-library     { background: rgba(162,74,255,.16); border-color: rgba(162,74,255,.5);  color:#d3b7ff; }
.badge.b-loose       { background: rgba(242,177,52,.14); border-color: rgba(242,177,52,.45); color:#f7d58a; }
.badge.b-boxed       { background: rgba(120,120,120,.10); border-color: rgba(120,120,120,.35); color:#c8ccd4; }
.badge.b-undone      { background: rgba(120,120,120,.18); border-color: rgba(120,120,120,.5); color:#bbbbbb; text-decoration: line-through; }
.badge.b-admin, .badge.b-operator, .badge.b-viewer { background: var(--surface-2); }

/* Location breadcrumbs */
.path { display: inline-flex; flex-wrap: wrap; gap: .15rem .35rem; align-items: baseline; }
.path-sep { color: var(--muted); font-size: .8em; }

.num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.break { word-break: break-all; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.warn-text { color: var(--warn); }
.err-text { color: var(--err); }
.ok-text { color: var(--ok); }
.hint { color: var(--muted); font-size: .85rem; margin: .25rem 0 .5rem; }
.alert.warn { background: rgba(242,177,52,.10); border-color: rgba(242,177,52,.45); }
.alert ul { margin: .3rem 0 0 1.1rem; padding: 0; }
.notice-list { margin: .3rem 0 0; padding-left: 1.1rem; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .5rem 0 1rem; }
.filters label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: .2rem; }
.filters input[type=text] { min-width: 12rem; }
.meter { display: inline-block; width: 6rem; height: .5rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: .4rem; border: 1px solid var(--border); }
.meter > span { display: block; height: 100%; background: var(--accent); }
.meter.full > span { background: var(--ok); }
.meter.over > span { background: var(--warn); }
.stat a { color: inherit; }
.stat.attention .num { color: var(--warn); }
.empty-state { color: var(--muted); padding: 1rem 0; }
.code-big { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .03em; }
.qr-inline svg { width: 110px; height: 110px; background: #fff; border-radius: 4px; }
.inline-form { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.inline-form input[type=text] { padding: .35rem .5rem; }
button.small, .btn.small { padding: .3rem .65rem; font-size: .85rem; }
details.box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem 1rem; margin-bottom: 1rem; }
details.box > summary { cursor: pointer; font-weight: 600; }
.ev-type { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--muted); }
tr.undone td { opacity: .55; }
.diff-table td { vertical-align: top; font-size: .82rem; }
.diff-table .chg { background: rgba(242,177,52,.10); }

/* ---------------------------------------------------------------- scan page */
.scan-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .scan-grid { grid-template-columns: 1fr; } }
.scan-row { display: flex; gap: .5rem; align-items: stretch; }
.scan-row input.scan { flex: 1; min-width: 0; font-size: 1.35rem; letter-spacing: .03em; }
.scan-row button { min-width: 5.5rem; }

.status-banner {
    margin: .9rem 0 .4rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 6px solid var(--muted);
    background: var(--surface-2);
    font-size: 1.15rem;
    font-weight: 600;
    min-height: 3.3rem;
}
.status-banner .sub { display: block; font-size: .88rem; font-weight: 400; color: var(--muted); margin-top: .25rem; }
.status-banner.s-ok, .status-banner.s-undone { border-left-color: var(--ok); background: rgba(62,207,142,.10); }
.status-banner.s-selected, .status-banner.s-info, .status-banner.s-armed, .status-banner.s-disarmed { border-left-color: var(--accent); background: rgba(74,163,255,.09); }
.status-banner.s-confirm, .status-banner.s-comment { border-left-color: var(--warn); background: rgba(242,177,52,.12); }
.status-banner.s-error { border-left-color: var(--err); background: rgba(242,85,90,.12); }
.status-banner.s-noop, .status-banner.s-cleared { border-left-color: var(--muted); }

.armed-bar {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem .9rem; margin: .4rem 0;
    border-radius: var(--radius);
    background: repeating-linear-gradient(-45deg, rgba(162,74,255,.16), rgba(162,74,255,.16) 10px, rgba(162,74,255,.08) 10px, rgba(162,74,255,.08) 20px);
    border: 1px solid rgba(162,74,255,.55);
    font-weight: 600;
}
.armed-bar .grow { flex: 1; }

.confirm-box { border: 1px solid rgba(242,177,52,.55); background: rgba(242,177,52,.08); border-radius: var(--radius); padding: .8rem 1rem; margin: .5rem 0; }
.confirm-box ul { margin: .3rem 0 .6rem 1.1rem; padding: 0; }
.confirm-box .actions { margin-bottom: 0; }
.confirm-box input[type=text] { width: 100%; margin: .2rem 0 .5rem; font-size: 1.05rem; }

.sel-list { list-style: none; margin: .3rem 0 0; padding: 0; }
.sel-list li { display: flex; gap: .6rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.sel-list li:last-child { border-bottom: 0; }
.sel-list .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; min-width: 8.5rem; }
.sel-list .meta { flex: 1; color: var(--muted); font-size: .85rem; }
.sel-list .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 .3rem; }
.sel-list .x:hover { color: var(--err); }

.entity-card .code-big { font-size: 1.35rem; }
.entity-card .sub { color: var(--muted); margin: .1rem 0 .5rem; }
.entity-card dl.kv { margin: .5rem 0 0; }

.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li { padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; display: flex; gap: .5rem; align-items: baseline; }
.recent-list li:last-child { border-bottom: 0; }
.recent-list .when { color: var(--muted); font-size: .78rem; min-width: 3.6rem; }
.recent-list .what { flex: 1; }
.recent-list li.undone .what { text-decoration: line-through; color: var(--muted); }

.cheat { font-size: .85rem; }
.cheat table { font-size: .82rem; }
.cheat td, .cheat th { padding: .3rem .5rem; }
.toolbar { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .4rem 0; }
.toolbar select { padding: .35rem .5rem; }

body.flash-ok    .status-banner { animation: flash-ok .45s ease-out; }
body.flash-error .status-banner { animation: flash-err .6s ease-out; }
@keyframes flash-ok  { 0% { box-shadow: 0 0 0 6px rgba(62,207,142,.55); } 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); } }
@keyframes flash-err { 0%, 40% { box-shadow: 0 0 0 8px rgba(242,85,90,.6); } 100% { box-shadow: 0 0 0 0 rgba(242,85,90,0); } }
.sound-toggle { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-weight: 500; }
.topbar nav a.current { color: var(--text); background: var(--surface-2); }
.topbar nav a.nav-key.current { background: var(--accent-hover); color: #001; }