/* =====================================================================
   SMV dashboard — ONE button colour system (prompt 17, 2026-10-06), used by index.html, floor.html and every page script.
   Every <button> carries exactly one of these meaning classes (tools/btn-check.js fails the deploy otherwise):
     btn-primary (alias .call)   solid green   save / confirm / approve / mark paid / mark done / import / create / log call
     btn-danger  (alias .danger) solid red     void / cancel a task / refuse / delete / scrap / logout  (always behind a confirm)
     btn-neutral (alias .ghost)  grey outline  close / back / cancel a form / dismiss / the X
     btn-info                    solid blue    open / view / print / download / export / refresh / edit
     btn-caution                 solid amber   hold / snooze / waiting / request approval / take over / undo
     btn-purple  (alias .purple) purple        "closed by others" / take over and close
     btn-teal                    teal          AI buttons
     btn-seg                     a toggle in a segmented control (status pickers, tabs, keypads): keeps the control's own look
     btn-nav                     header / navigation buttons (bell, Big screen, shop-floor tabs)
   Colours were checked for contrast ≥ 4.5:1 with white (or the dark text) — tools/btn-check.js recomputes them.
   Icons: a tick / cross / printer / arrow is drawn before the main actions (.noic switches it off when the label has its own).
   ===================================================================== */
:root { --b-green: #12805c; --b-green-d: #0e6a4c; --b-red: #c81e1e; --b-red-d: #a51818; --b-blue: var(--blue); --b-blue-d: var(--blue-d);
  --b-amber: #b45309; --b-amber-d: #92400e; --b-purple: #7e22ce; --b-purple-d: #6b1fb0; --b-teal: #0f766e; --b-teal-d: #0b5f59;
  --b-grey: var(--n100); --b-grey-line: #98a2b3; --b-grey-ink: var(--n800); --b-dis: var(--n200); --b-dis-ink: var(--n600); }
button.btn-primary, button.call { background: var(--b-green); color: #fff; border: 1px solid var(--b-green); font-weight: 700; }
button.btn-primary:hover, button.call:hover { background: var(--b-green-d); }
button.btn-danger, button.danger { background: var(--b-red); color: #fff; border: 1px solid var(--b-red); font-weight: 700; }
button.btn-danger:hover, button.danger:hover { background: var(--b-red-d); }
button.btn-neutral, button.ghost { background: var(--b-grey); color: var(--b-grey-ink); border: 1px solid var(--b-grey-line); font-weight: 600; }
button.btn-neutral:hover, button.ghost:hover { background: var(--line); }
button.btn-info { background: var(--b-blue); color: #fff; border: 1px solid var(--b-blue); font-weight: 600; }
button.btn-info:hover { background: var(--b-blue-d); }
button.btn-caution { background: var(--b-amber); color: #fff; border: 1px solid var(--b-amber); font-weight: 600; }
button.btn-caution:hover { background: var(--b-amber-d); }
button.btn-purple, button.purple { background: var(--b-purple); color: #fff; border: 1px solid var(--b-purple); font-weight: 700; }
button.btn-purple:hover, button.purple:hover { background: var(--b-purple-d); }
button.btn-teal { background: var(--b-teal); color: #fff; border: 1px solid var(--b-teal); font-weight: 600; }
button.btn-teal:hover { background: var(--b-teal-d); }
button:disabled, button.btn-primary:disabled, button.btn-danger:disabled, button.btn-info:disabled, button.btn-caution:disabled, button.btn-teal:disabled, button.btn-purple:disabled,
button.call:disabled, button.danger:disabled, button.purple:disabled { background: var(--b-dis); color: var(--b-dis-ink); border-color: var(--b-dis); box-shadow: none; cursor: not-allowed; opacity: 1; }
button.btn-neutral:disabled, button.ghost:disabled { background: var(--b-dis); color: var(--b-dis-ink); border-color: var(--b-dis); }
/* the main actions get an icon on the left (not when the label already starts with one: .noic) */
button.btn-primary:not(.noic)::before, button.call:not(.noic)::before { content: "✓ "; }
button.btn-danger:not(.noic)::before, button.danger:not(.noic)::before { content: "✕ "; }
button.btn-info.ic-print:not(.noic)::before { content: "🖨 "; }
button.btn-info.ic-dl:not(.noic)::before { content: "⬇ "; }
button.btn-info.ic-open:not(.noic)::before { content: "↗ "; }
button.btn-caution:not(.noic)::before { content: "⏸ "; }
button.btn-teal:not(.noic)::before { content: "✨ "; }
/* file-input labels that look like buttons = information (upload) */
label.btnlike { background: var(--b-blue); color: #fff; border-color: var(--b-blue); font-weight: 600; }
label.btnlike::before { content: "⬆ "; }
/* the X on every dialog / pop-up / wizard sheet: 44 px tap target, top right */
#dlg .box, #pop .box, #tpop .box { position: relative; }
.dlgx { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; font-size: 22px; line-height: 44px; text-align: center; z-index: 2; }
.dlgx::before { content: none !important; }
#dlgbox h3:first-of-type, #dlgbox h2:first-of-type, #popbox h2:first-of-type { padding-right: 48px; }
.sh-top .sh-x { margin-left: auto; width: 48px; height: 48px; padding: 0; font-size: 22px; }
/* the colour legend inside the "?" help */
.ui-legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 10px; font-size: 15px; }
.ui-legend span.sw { display: inline-block; width: 60px; height: 26px; border-radius: 8px; }
/* Machine shop stock: item cards (2 per row on a tablet in portrait, 4 on a laptop), buttons ≥ 48 px */
.sh-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (min-width: 1000px) { .sh-items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sh-items { grid-template-columns: 1fr; } }
.sh-item { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; min-height: 48px; display: flex; gap: 10px; }
.sh-item.age-g { border-left-color: #12805c; } .sh-item.age-a { border-left-color: #eab308; } .sh-item.age-r { border-left-color: #dc2626; background: #fff7f7; }
.sh-item .sh-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.sh-item .body { flex: 1; min-width: 0; } .sh-item .n { font-size: 17px; font-weight: 700; } .sh-item .d { color: var(--muted); font-size: 16px; }
.sh-item .big { font-size: 32px; font-weight: 800; line-height: 1.1; margin-top: 4px; } .sh-item .sm { font-size: 16px; color: var(--muted); }
.sh-item:active { transform: scale(.99); }
.sh-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.sh-filters select { min-height: 48px; font-size: 16px; }
.sh-lots td, .sh-lots th { font-size: 16px; } .sh-lots .acts2 button { min-height: 48px; font-size: 15px; padding: 8px 10px; }
#p-shop button:not(.sm):not(.dlgx), #p-store button:not(.sm):not(.dlgx) { min-height: 48px; }
/* landing buttons and segmented toggles draw no icon */
.sh-big button::before, button.btn-seg::before, button.btn-nav::before, nav button::before { content: none !important; }
/* prompt 19: every SOLID button forces white text and white icons — whatever the element (button, <label> around a file input, <a>, <span>)
   and whatever page rule tried to colour it (e.g. #dlg label { color: var(--muted) } made "Add photo" unreadable in the lot dialog) */
.btn-primary, .btn-danger, .btn-info, .btn-caution, .btn-purple, .btn-teal, button.call, button.danger, button.purple, .btnlike,
#dlg .btn-primary, #dlg .btn-danger, #dlg .btn-info, #dlg .btn-caution, #dlg .btn-purple, #dlg .btn-teal, #dlg label.btnlike, #dlg button.call, #dlg button.danger, #dlg button.purple,
.sh-form .btnlike, #p-shop .btnlike, #p-store .btnlike { color: #fff !important; }
.btn-primary svg, .btn-danger svg, .btn-info svg, .btn-caution svg, .btn-purple svg, .btn-teal svg, button.call svg, button.danger svg, button.purple svg, .btnlike svg,
.btn-primary svg *, .btn-danger svg *, .btn-info svg *, .btn-caution svg *, .btn-purple svg *, .btn-teal svg *, .btnlike svg * { fill: currentColor; stroke: currentColor; }
.btn-primary::before, .btn-danger::before, .btn-info::before, .btn-caution::before, .btn-purple::before, .btn-teal::before, .btnlike::before { color: #fff; }
a.btn-primary, a.btn-danger, a.btn-info, a.btn-caution, a.btn-purple, a.btn-teal, span.btn-primary, span.btn-info, span.btn-caution { display: inline-block; padding: 7px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; }
a.btn-primary, span.btn-primary { background: var(--b-green); } a.btn-info, span.btn-info { background: var(--b-blue); } a.btn-caution, span.btn-caution { background: var(--b-amber); } a.btn-danger { background: var(--b-red); }
.btn-neutral, button.ghost, .btn-neutral::before { color: var(--b-grey-ink); }