/* What the application adds to the prototype's look (styles.css): sign-in, page images with evidence boxes, the
   message bell and the phase-B2 screens. */
body.signed-out #sidebar { display: none; }
body.signed-out #app { grid-template-columns: minmax(0, 1fr); }
.login { max-width: 680px; margin: 7vh auto; }
.login h1 { font-size: 22px; margin: 4px 0; }
.login h2 { font-size: 15px; color: var(--muted); margin: 0 0 10px; }
.login .langs { float: right; margin: 0; }
.userpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.userpick .btn { flex-direction: column; align-items: flex-start; white-space: normal; text-align: left; padding: 8px 10px; }
.form-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
.who .btn { margin-left: 6px; }
.seg { display: inline-flex; gap: 4px; }
.pimg-wrap { padding: 8px; background: #e9ecf0; }
.pimg { position: relative; }
.pimg img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.ebox { position: absolute; border: 2px solid #d9a800; background: rgba(255, 225, 0, .28); border-radius: 2px; }
.drop.over { border-color: var(--accent); background: var(--accent2); }
a.kpi { color: var(--ink); }
a.kpi:hover { text-decoration: none; border-color: var(--accent); }
a.bell { text-decoration: none; }
.bell .cnt.warn { background: #d29b00; }
.msg-wrap select, .msg-wrap input[type=text] { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; }
.msg-wrap input[type=text] { min-width: 220px; }
.pre { white-space: pre-wrap; max-height: 220px; overflow: auto; background: #fafbfd; border: 1px solid var(--line2); border-radius: 4px; padding: 6px 8px; }
.comps { margin: 4px 0 8px; padding-left: 18px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; }
details summary { cursor: pointer; color: var(--accent); }
.sd-reg { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 6px 8px; margin: 0 0 8px; background: #f7f9fc; border: 1px solid var(--line2); border-radius: 6px; }
.filters input[type=search] { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; min-width: 220px; }
.acts select { max-width: 280px; font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; }
.form-grid select { font: inherit; color: var(--ink); padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; }
.tbl input, .tbl select { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.btn-link:hover { text-decoration: underline; }

/* B3: the container label and its printing. Only the labels print; on screen #print stays hidden. */
.lp-p { font-size: 11px; margin-top: 4px; }
.lp-none { border: 2px solid #b3261e; color: #b3261e; font-weight: 700; padding: 6px 8px; margin: 8px 0; }
.lp-code { font-family: Consolas, monospace; border: 1px dashed #999; padding: 10px 14px; color: #555; }
.label-prev .barcode { height: 52px; width: 190px; }
form.scan input { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; min-width: 220px; }
#print { display: none; }
@media print {
  body.printing #app, body.printing #modal, body.printing #toast { display: none !important; }
  body.printing #print { display: block; }
  /* at least the size SEA Ek-1 Table 1.3 asks for the container's capacity (labels.label_size): --lw x --lh mm, and
     pictogram images of --pg mm (the square's side times the root of 2) */
  #print .label-prev { width: var(--lw, 105mm); min-height: var(--lh, 74mm); max-width: none; margin: 0 0 4mm;
    border-width: 2px; font-size: 8.5pt; box-sizing: border-box; break-inside: avoid; page-break-inside: avoid; }
  #print .lp-s1 { font-size: 7pt; padding: 2mm 2.5mm; }
  #print .lp-s1 .lp-top { flex-direction: column; gap: 1mm; }
  #print .lp-s3 { font-size: 10pt; }
  #print .lp-s4 { font-size: 12pt; }
  #print .barcode { height: 15mm; width: 52mm; }
  #print .lp-s1 .barcode { height: 11mm; width: 46mm; }
  #print .ghs { width: var(--pg, 33mm); height: var(--pg, 33mm); }
}
.ghs-code { display: inline-block; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: 11px; }

/* B3 part 2: storage and segregation, the audit count */
.mxrow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line2); }
.mxrow select, .mxrow input { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; }
.mxrow .checks { margin: 0; }
.tbl.mx th, .tbl.mx td { padding: 3px 4px; }
.tbl.mx td.c { text-align: center; }
.card.sub { box-shadow: none; border: 1px solid var(--line2); margin: 8px 0; padding: 8px 10px; }
.tree a.muted { opacity: .6; }
a.cchip { color: var(--ink); text-decoration: none; }
a.cchip:hover { border-color: var(--accent); }
.g-explosive { border-color: #f08a00; background: #fff1de; } .g-peroxide { border-color: #8a5a00; background: #f7efe0; }
.g-pyrophoric { border-color: #a1002a; background: #fbe7ec; } .g-flam_sol { border-color: #e35d6a; background: #fdeff1; }
.g-corrosive { border-color: #6b6b6b; background: repeating-linear-gradient(45deg, #fdf1e5, #fdf1e5 6px, #f2edfb 6px, #f2edfb 12px); }
.g-none { border-color: #b8c2cc; background: #fff; }
form.scan input[type=number] { min-width: 0; width: 190px; }
form[data-sg-pick] input { width: min(360px, 100%); }
.seg { white-space: nowrap; }
.filters select { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; max-width: 420px; }

/* one long word (the German product name) must not widen the sidebar */
.brand b { overflow-wrap: anywhere; }

/* B3 part 3: moves, the transport document's data (printed like the labels), use */
.checklist .ck label { display: inline-flex; gap: 4px; padding: 0 0 0 10px; border: 0; }
.checklist .ck { padding: 8px 0; }
form.scan select { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; }
form.scan input#us-note { min-width: 200px; }
#print .td-print { font-size: 10pt; }
#print .td-print h1 { font-size: 14pt; margin: 0 0 4mm; }
#print .td-print table { width: 100%; border-collapse: collapse; margin: 3mm 0; }
#print .td-print th, #print .td-print td { border: 1px solid #555; padding: 1.5mm 2mm; text-align: left; vertical-align: top; }

/* B3 part 4: the waste container's label, and the short number fields of the waste forms; a waste code never breaks */
.nw { white-space: nowrap; }
.lp-wtitle { font-size: 20px; font-weight: 800; letter-spacing: .03em; color: #b3261e; white-space: nowrap; margin-bottom: 4px; }
#print .lp-waste .ghs { width: 25mm; height: 25mm; }
form.scan input#us-ws-amt, form.scan input#ws-n-amt, form.scan input#ws-n-ph { min-width: 0; width: 110px; }
/* list versions compared: the words a new version adds and removes */
ins.dw { background: var(--ok-bg); color: var(--ok); text-decoration: none; }
del.dw { background: var(--bad-bg); color: var(--bad); }