/* Force a light appearance regardless of OS dark mode or the vendored
   Bootstrap 5.1 (whose .bg-body utility is dark-broken). */
html { font-size: 15px; color-scheme: light; }
body { background: #f4f6f8 !important; color: #1b1f23 !important; }
.card { background: #ffffff; color: #1b1f23; }
.modal-content { background: #ffffff; color: #1b1f23; }
.table { color: #1b1f23; }

/* --- Scale panes --- */
.scale-grid {
    display: grid;
    /* At most two scale cards across; they share the (70%-wide) scales column evenly. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.scale-grid.single { grid-template-columns: 1fr; }
@media (max-width: 800px) { .scale-grid { grid-template-columns: 1fr; } }

/* Dashboard split: scales take 70% of the row, Open Loads 30% (lg screens and up).
   Below lg the col-12 base makes them stack full-width. */
@media (min-width: 992px) {
    .col-scales { flex: 0 0 auto; width: 70%; }
    .col-loads  { flex: 0 0 auto; width: 30%; }
}

.scale-pane {
    border: 1px solid #d4dae0;
    border-radius: .75rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(13,59,102,.08);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, border-color .15s;
}
.scale-pane.single-pane { min-height: 70vh; }

.scale-pane .scale-title { font-size: 1.1rem; font-weight: 600; color: #0d3b66; }
.scale-pane .scale-status {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
    padding: .15rem .5rem; border-radius: .35rem; font-weight: 600;
}
.status-live    { background: #d1e7dd; color: #0f5132; }
.status-motion  { background: #fff3cd; color: #664d03; }
.status-error   { background: #f8d7da; color: #842029; }

.weight-readout {
    font-family: "Consolas","DejaVu Sans Mono",monospace;
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 700;
    text-align: center;
    line-height: 1;
    margin: .5rem 0;
    color: #146c43;
}
.single-pane .weight-readout { font-size: clamp(4rem, 18vw, 12rem); }
.weight-readout.motion { color: #b8860b; }
.weight-readout.error  { color: #b02a37; }
.weight-unit { font-size: .35em; color: #6c757d; }

/* Visual confirmation flash when a tote is captured */
@keyframes toteFlash {
    0%   { box-shadow: 0 0 0 0 rgba(40,200,110,.0); border-color: var(--bs-border-color); }
    15%  { box-shadow: 0 0 0 6px rgba(40,200,110,.55); border-color: #28c86e; }
    100% { box-shadow: 0 0 0 0 rgba(40,200,110,0); border-color: var(--bs-border-color); }
}
.scale-pane.flash { animation: toteFlash 1s ease-out; }
.tote-confirm {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    background: rgba(20,140,70,.92); color: #fff; border-radius: .75rem;
    font-size: 2rem; font-weight: 700; z-index: 5;
}
.tote-confirm.show { display: flex; }

.tote-alert {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center; text-align: center; padding: 1rem;
    background: rgba(200,40,40,.94); color: #fff; border-radius: .75rem;
    font-size: 1.7rem; font-weight: 700; z-index: 6;
}
.tote-alert.show { display: flex; }

/* "Add From Storage" fiber-tote checklist: larger checkboxes + text for at-a-glance picking. */
.af-fiber-row { font-size: 1.25rem; padding: .35rem .1rem; margin: 0; cursor: pointer; }
.af-fiber-row .af-fibertote-cb { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; cursor: pointer; }

.assigned-box { background:#f1f4f7; border:1px solid #e2e7ec; border-radius:.5rem; padding:.5rem .75rem; }

/* Gross / Tare / Temp / Grade detail line under the readout: bumped 50% larger
   (Bootstrap .small is .875rem → ~1.3rem) for readability across the room. */
.scale-pane .js-grosstare { font-size: 1.3rem; line-height: 1.3; }

/* Assigned-load box: all of its text enlarged ~40% (labels, load name, tote
   count and the assign dropdown) for at-a-glance readability. The base
   font-size lifts the "Assigned load"/"Totes" .small labels (em-based) and the
   load name; the tote count (.fs-5) and dropdown (.form-select-sm) are absolute
   so they get explicit 40% bumps. */
.scale-pane .assigned-box { font-size: 1.4rem; }
.scale-pane .assigned-box .js-tote-count { font-size: 1.75rem !important; }
.scale-pane .assigned-box .js-assign { font-size: 1.225rem; }

/* Tare / Fiber / Temp / Grade action buttons: 25% larger than Bootstrap btn-sm
   (font .875rem → 1.094rem, padding scaled to match). */
.scale-pane .js-tare,
.scale-pane .js-fiber-print,
.scale-pane .js-temp,
.scale-pane .js-grade {
    font-size: 1.094rem;
    padding: .3125rem .625rem;
}

/* Demo simulator bar: always a single row of compact per-scale controls at
   the top; scrolls horizontally rather than wrapping on narrow screens. */
.sim-bar {
    display: flex; align-items: center; gap: .9rem; flex-wrap: nowrap; overflow-x: auto;
    background: #fff3cd; border: 1px solid #ffe69c; border-radius: .5rem;
    padding: .5rem .9rem;
}
.sim-bar .sim-title {
    font-weight: 700; color: #664d03; font-size: .72rem; letter-spacing: .05em;
    white-space: nowrap; flex-shrink: 0;
}
.sim-cell { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.sim-cell .sim-name { font-weight: 600; font-size: .82rem; white-space: nowrap; }
.sim-cell .sim-weight { width: 92px; }
.sim-cell .sim-val { font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; font-weight: 600; }
.sim-motion-label,
.sim-error-label { font-size: .78rem; white-space: nowrap; margin: 0; display: flex; align-items: center; gap: .25rem; }
.sim-error-label { color: #b02a37; font-weight: 600; }
.btn-weigh { font-size: 1.25rem; font-weight: 700; padding: .6rem; }
.pane-wrap { position: relative; }

/* Confirm dialog: keep footer buttons a consistent width so a short label
   (e.g. "Yes") is the same size as Cancel / the finalize button. */
#confirmModal .modal-footer .btn { min-width: 6rem; }

/* Totes-in-storage list: double the text size (Bootstrap .small .875rem → 1.75rem)
   for at-a-glance reading across the room; scale the row buttons/select up to match. */
#storage-totes,
#storage-totes .small { font-size: 1.75rem; }
#storage-totes .btn,
#storage-totes .form-select { font-size: 1.5rem; }

/* Open-loads card: double the tote-count / weight line (.small .875rem → 1.75rem). */
#open-loads .ol-totes { font-size: 1.75rem; font-weight: 600; }