html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.filter-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.filter-row .form-select, .filter-row .form-control { width:auto; }

/* Inventory row colors mirror the spreadsheet's conditional formatting. */
tr.row-offsite { background-color: #d4edda !important; }
tr.row-overdue { background-color: #f8d7da !important; }
tr.row-flight  { background-color: #fff3cd !important; }
tr.row-editing { background-color: #e7f1ff !important; }

.inventory-table .inventory-thumb { height:64px; width:64px; object-fit:cover; border-radius:6px; cursor:zoom-in; }
@media (max-width: 767px) {
    .inventory-thumb { width:48px !important; height:48px !important; }
}
.inventory-table td.row-actions { white-space:nowrap; }
.inventory-table td.row-actions .btn { padding:.15rem .4rem; }
.cell-price { width:90px; }

/* Sortable column headers — click to sort, click again to reverse. */
.inventory-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.inventory-table th.sortable:hover { background-color:#f1f3f5; }

/* Item zoom modal — full-screen overlay containing an iframe to /items/{id}?embed=1.
   The inventory page underneath keeps its scroll position because we never navigate away. */
.os-item-modal {
    position:fixed; inset:0; z-index:1050;
    display:flex; flex-direction:column;
    background:#fff;
}
/* Header is styled to match MainLayout's .top-row (3.5rem, light grey, bottom border)
   so visually it looks like the modal's controls live in the same rectangle as the
   version stamp / sign-out used to. */
.os-item-modal-header {
    flex:0 0 auto;
    height:3.5rem;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 1.5rem 0 2rem;
    border-bottom:1px solid #d6d5d5;
    background:#f7f7f7;
}
.os-item-modal-frame { flex:1 1 auto; width:100%; border:0; }
@media (max-width: 640.98px) {
    .os-item-modal-header { padding:0 .75rem; }
}

/* Capture page camera input. */
.capture-photo { width:100%; max-width:480px; border:1px solid #ccc; border-radius:8px; }
.capture-photo-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.capture-photo-row img { width:120px; height:120px; object-fit:cover; border-radius:6px; border:1px solid #ccc; }
.capture-photo-row .photo-wrap { position:relative; }
.capture-photo-row .photo-wrap .photo-remove { position:absolute; top:2px; right:2px; padding:0 .35rem; line-height:1.2; font-weight:700; }
.capture-photo-row .photo-empty { padding: 1rem 1.25rem; color:#888; border:1px dashed #ccc; border-radius:6px; flex:1; min-height:120px; display:flex; align-items:center; justify-content:center; font-style:italic; }
.photo-take-btn { padding: .75rem 1rem; font-size:1rem; flex:1; text-align:center; }
.photo-buttons { display:flex; gap:.5rem; flex-wrap:wrap; }
.sheet-original { width:100%; max-width:100%; border:1px solid #ccc; border-radius:6px; }
.cell-tag { width:80px; }
.cell-qty { width:60px; }
.table-sm input.form-control-sm { font-size: 11pt; padding: 2px 4px; }

/* ---- Layout (global fallback — scoped .razor.css may not load if content-root is off) ---- */
.page { position:relative; display:flex; flex-direction:column; }
main { flex:1; }
.sidebar { background-image: linear-gradient(180deg, rgb(5,39,103) 0%, #3a0647 70%); }

/* Hide hamburger toggle completely — we're a LAN app, always wide-screen */
input.navbar-toggler { display:none !important; }
/* Always show the nav (no collapse) */
.nav-scrollable { display:block !important; height:calc(100vh - 3.5rem); overflow-y:auto; }

.top-row { background-color:#f7f7f7; border-bottom:1px solid #d6d5d5; justify-content:flex-end; height:3.5rem; display:flex; align-items:center; }

@media (min-width: 641px) {
    .page { flex-direction:row; }
    .sidebar { width:250px; height:100vh; position:sticky; top:0; }
    .top-row { position:sticky; top:0; z-index:1; padding-left:2rem; padding-right:1.5rem; }
}

/* Nav link colours */
.nav-item .nav-link { color:#d7d7d7; border-radius:4px; height:3rem; display:flex; align-items:center; width:100%; padding:0 1rem; }
.nav-item a.active { background-color:rgba(255,255,255,0.37); color:#fff; }
.nav-item .nav-link:hover { background-color:rgba(255,255,255,0.1); color:#fff; }
.navbar-brand { font-size:1.1rem; color:#fff; }
.top-row.ps-3.navbar { min-height:3.5rem; background-color:rgba(0,0,0,0.4); }
/* ---- End layout ---- */

/* Login */
.login-shell { display:flex; min-height:100vh; align-items:center; justify-content:center; background:#f3f3f3; }
.login-card { background:white; padding: 2rem; border:1px solid #ddd; border-radius:10px; width: 320px; max-width:90vw; }

/* ---------- Print sheet ---------- */
.print-sheet { max-width: 8in; margin: 0 auto; padding: .25in; font-size: 10pt; }
.print-header { border-bottom: 2px solid #000; padding-bottom: .25rem; margin-bottom: .5rem; }
.print-header .title { font-size: 18pt; font-weight: 700; }
.print-header .meta { font-size: 9pt; color: #555; margin-top: .25rem; }
.print-header .meta .sep { margin: 0 .35rem; }
.print-table { width: 100%; border-collapse: collapse; }
.print-table th, .print-table td { padding: 3px 5px; border-bottom: 1px solid #ddd; vertical-align: top; text-align: left; }
.print-table th { background: #eee; font-size: 9pt; }
.print-table td { font-size: 9pt; }
.print-table .num { text-align: right; }
.print-table .tag { font-weight: 700; }
.print-footer { margin-top: .5rem; font-size: 8pt; color: #777; text-align: center; }

/* Dashboard cards */
.dashboard-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.dashboard-grid .card.stat { padding: .75rem 1rem; border:1px solid #ddd; border-radius:8px; background:#fff; }
.dashboard-grid .card.stat .label { font-size: 11pt; color:#666; text-transform: uppercase; letter-spacing: .5px; }
.dashboard-grid .card.stat .value { font-size: 28pt; font-weight: 700; line-height: 1.1; }
.dashboard-grid .card.stat .sub   { font-size: 10pt; color:#888; }
.num { text-align: right; }

@media print {
    @page {
        size: letter;
        margin: 0.5in;
        @bottom-center {
            content: "Page " counter(page) " of " counter(pages);
            font-size: 8pt;
            color: #777;
        }
    }
    body { background: white !important; }
    .sidebar, .top-row, .nav, .no-print, #blazor-error-ui { display: none !important; }
    main, .content, .page { margin: 0 !important; padding: 0 !important; }
    .print-sheet { max-width: none; padding: 0; }

    /* Repeat column headers on every printed page. */
    .print-table thead { display: table-header-group; }
    .print-table tfoot { display: table-footer-group; }
    .print-table tr { page-break-inside: avoid; }
}