/* =====================================================================
   SAND MAN - STOCK SECTIONS
   Loaded after the diesel app's own css/app.css and only adds what the
   stock screens need. It reuses the diesel variables, panels, cards,
   badges, buttons, tables, card lists, step bar and bottom sheets, so
   the stock sections look and behave like the rest on a phone.
   Every class here starts with sm- so nothing of diesel's is overridden.
   ===================================================================== */

/* a quiet heading in the sidebar, above the stock sections */
.sm-navsep{
  margin:14px 18px 4px;padding-top:12px;border-top:1px solid var(--line);
  font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--mut)
}
@media(max-width:820px){ .sm-navsep{margin:12px 20px 2px} }

.sm-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.sm-actions>button{width:auto}
.btn2.sm-sm,.btn.sm-sm,button.sm-sm{min-height:36px;padding:7px 12px;font-size:13px;width:auto}
.btn.sm-sm{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:820px){ .sm-actions>button{flex:1} }

/* numbers: tabular only where they line up in a column */
.sm-num{text-align:right;font-variant-numeric:tabular-nums}
.sm-strong{font-weight:700}
.sm-pos{color:var(--ok)}
.sm-neg{color:var(--bad)}
td.sm-wrap{white-space:normal;min-width:200px}
@media(max-width:820px){ td.sm-wrap{min-width:0} }
.toolbar>div:has(>button){min-width:0}

/* ---------------------------------------------------------------------
   FLOOR STOCK - a stat tile per material: name, tonnes, change, trend
   --------------------------------------------------------------------- */
.sm-floor{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:6px}
.sm-tile{display:block;color:var(--txt);border:1px solid #2f3340;border-radius:16px;
  padding:14px 14px 0;overflow:hidden;
  background:linear-gradient(170deg,#1c1e26 0%,var(--panel) 70%);
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:border-color .12s}
.sm-tile:hover{border-color:#3a3e4a}
.sm-tile-nm{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-tile-v{font-size:32px;font-weight:800;color:var(--acc);line-height:1.1;margin-top:6px;letter-spacing:-.6px}
.sm-tile-v small{font-size:14px;color:var(--mut);font-weight:600;margin-left:4px;letter-spacing:0}
.sm-tile-d{font-size:12px;color:var(--mut);margin:4px 0 6px}

/* The trend sits in the de-emphasis grey so the tonnes stay the loud
   thing on the tile; only the end of the run wears the accent. */
.sm-spark{display:block;width:calc(100% + 28px);height:48px;margin:0 -14px -1px}
.sm-spark-area{fill:#8a8f9e;opacity:.08}
.sm-spark-line{fill:none;stroke:#6f7484;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sm-spark-dot{fill:var(--acc);stroke:var(--panel);stroke-width:2}
.sm-spark-empty{height:48px}
.sm-tile:hover .sm-spark-line{stroke:#868c9c}

.sm-tip{position:absolute;display:none;z-index:60;pointer-events:none;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.sm-tip b{color:var(--acc);font-variant-numeric:tabular-nums}
.sm-tip span{display:block;color:var(--mut);margin-top:2px}

/* movement table */
.sm-move td,.sm-move th{white-space:nowrap}
.sm-move .sm-tot-row td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}

/* ---------------------------------------------------------------------
   NEW BOOKING - step 1 picks the kind of movement
   --------------------------------------------------------------------- */
.sm-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}
.sm-pick-b{display:block;width:100%;text-align:left;padding:16px 18px;min-height:96px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;color:var(--txt);
  font-size:17px;font-weight:700;transition:border-color .12s,background .12s}
.sm-pick-b:hover{background:var(--panel2);border-color:#3a3e4a}
.sm-pick-b span{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;margin-right:10px;font-size:19px;vertical-align:middle}
.sm-pick-b em{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--mut);margin-top:8px}
.sm-pick-in span{background:rgba(46,204,113,.16);color:var(--ok)}
.sm-pick-out span{background:rgba(52,152,219,.16);color:var(--info)}
.sm-pick-adj span{background:rgba(241,196,15,.16);color:var(--warn)}

.sm-crumb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.sm-recap{margin-top:10px}
.sm-done{text-align:center;padding:26px 16px}
.sm-done-t{color:var(--mut);font-size:13px}
.sm-done-v{font-size:38px;font-weight:800;color:var(--ok);line-height:1.15;margin:2px 0 4px}

/* ---------------------------------------------------------------------
   shared pieces: material chips and the line editor
   --------------------------------------------------------------------- */
.sm-chip{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:2px 8px;margin:2px 4px 2px 0;font-size:12.5px;white-space:nowrap}
.sm-chip b{color:var(--acc2);font-weight:700}
.sm-chips{margin-top:7px}
.sm-lines td{vertical-align:top}
.sm-after{font-size:11.5px;margin-top:3px}
.sm-tot{margin:8px 0 2px;font-size:13.5px;color:var(--mut)}
.sm-tot b{color:var(--txt)}
.sm-recipe{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:2px 10px 10px;margin-top:12px}
.sm-recipe select,.sm-recipe input{background:var(--panel)}
.modal.sm-wide{max-width:560px}
@media(max-width:820px){ .modal.sm-wide{max-width:none} }

/* ---------------------------------------------------------------------
   recipes
   --------------------------------------------------------------------- */
.sm-mix{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--panel2);margin:10px 0 6px;gap:2px}
.sm-mix i{display:block;min-width:3px}
.sm-mixkey{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--mut)}
.sm-mixkey em{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.sm-recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.sm-rec{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.sm-rec.off{opacity:.6}
.sm-rec-nm{font-weight:700}
.sm-rec .btnrow{margin-top:12px}
.sm-rec .btnrow>*{display:flex;align-items:center;justify-content:center}

@media(max-width:820px){
  .sm-floor{grid-template-columns:repeat(2,1fr);gap:9px}
  .sm-tile{padding:11px 11px 0}
  .sm-tile-v{font-size:25px}
  .sm-spark{width:calc(100% + 22px);margin:0 -11px -1px;height:40px}
  .sm-recipes{grid-template-columns:1fr}
  .sm-pick{grid-template-columns:1fr}
  .sm-done-v{font-size:32px}
}

/* ---------------------------------------------------------------------
   CLIENTS - managed on the Users page, below the staff table
   --------------------------------------------------------------------- */
.sm-clients-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px}
#sm_clients h2{color:var(--acc2);font-size:16px}
.sm-share{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;margin:12px 0 2px;font-size:13.5px;line-height:1.75;
  word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  -webkit-user-select:all;user-select:all}