/* =====================================================================
SECTION A. STYLE TOKENS (the only block to edit when restyling)
Tool Dash base colors and fonts. A company's own colors (client.tooldashco.com > White label) load after this from brand.php.
Dark is the brand default; the page follows the device setting (prefers-color-scheme).
Light values: warn = DeWalt Yellow pill fill with dark ink (9.2:1), bad = Stop Sign Red (5.9:1 on white).
Rule: never set body text in brand blue on dark. Charcoal cards on black carry a 1 px border. No shadows.
===================================================================== */
:root{
--ground:#000000; /* page background */
--surface:#282626; /* cards, label bars */
--ink:#ffffff; /* headings and strong text */
--body:#e0e2e2; /* running text */
--border:#7d8184; /* 1 px card and field edges */
--link:#7fb0f5; /* links on dark */
--primary-fill:#2a5db0; /* the one brand blue: primary buttons, bars */
--primary-ink:#ffffff;
--primary-hover:#005f99;
--primary-pressed:#004d7d;
--focus:#4da8e8; /* 2 px focus ring */
--status-info:#4da8e8; /* Submitted, On truck */
--status-warn:#f2b705; /* Awaiting approval, In pull, TEST banner edge */
--status-ok:#3fd0c9; /* Approved, Delivered (teal on purpose) */
--status-bad:#ff7a45; /* Declined, out of stock */
--status-warn-fill:transparent; --status-warn-pill-ink:#f2b705; --status-warn-pill-border:#f2b705;
--testbar-fill:transparent; --testbar-ink:#ffffff;
--label:#b4b8ba; /* small caps labels and part numbers (layout file) */
--font-display:'Bebas Neue','Arial Narrow',Arial,sans-serif; /* titles, label bars */
--font-body:'Montserrat',Arial,sans-serif; /* stand-in for licensed Proxima Nova */
}
@media (prefers-color-scheme: light){
:root{
--ground:#ffffff; --surface:#f8f9fa; --ink:#212529; --body:#212529; --border:#767b80; --link:#0075bb;
--focus:#0075bb; --status-info:#0075bb; --status-warn:#7a5c00; --status-ok:#0b7f79; --status-bad:#c8102e;
--status-warn-fill:#febd17; --status-warn-pill-ink:#212529; --status-warn-pill-border:#febd17;
--testbar-fill:#febd17; --testbar-ink:#212529; --label:#595f64;
}
}

/* =====================================================================
SECTION B. BASE LAYOUT AND TYPE
Mobile first. 16 px side gutter. Body text 18 px, field text 16 px (stops iOS zoom).
Digits that line up in columns use the .num class (tabular numerals).
===================================================================== */
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--body);font-family:var(--font-body);font-size:18px;line-height:1.45}
main{max-width:760px;margin:0 auto;padding:0 16px 48px}
a{color:var(--link)}
.hdr{padding:16px 0 8px} /* brand label and the page title */
.brand{font-family:var(--font-display);font-size:30px;letter-spacing:1px;color:var(--ink);line-height:1}
h1{font-family:var(--font-display);font-weight:400;font-size:40px;letter-spacing:1px;color:var(--ink);margin:4px 0 8px;text-transform:uppercase;line-height:1.05}
.td-lockup{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px} /* platform host: "Tool Dash by Rogue Pacific Solutions" */
.td-lockup-by{font-family:var(--font-body);font-size:14px;letter-spacing:0;text-transform:lowercase;opacity:.85}
.testbar{position:relative;border:2px solid var(--status-warn);background:var(--testbar-fill);color:var(--testbar-ink);padding:10px 14px;margin:24px 0 32px;text-align:center;font-weight:600} /* TEST banner with hazard stripes above and below */
.testbar::before,.testbar::after{content:"";position:absolute;left:-2px;right:-2px;height:8px;background:repeating-linear-gradient(-45deg,var(--hazard-yellow,#febd17) 0 8px,var(--hazard-black,#111111) 8px 16px)}
.testbar::before{top:-14px}
.testbar::after{bottom:-14px}
.idline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0} /* "Using link for ..." */
.bar{font-family:var(--font-display);font-size:24px;letter-spacing:1px;text-transform:uppercase;background:var(--surface);color:var(--ink);border-left:4px solid var(--primary-fill);padding:6px 12px;margin:20px 0 10px;clip-path:polygon(24px 100%,0 calc(100% - 24px),0 0,100% 0,100% 100%)} /* label bar, one cut corner */
.card{background:var(--surface);border:1px solid var(--border);padding:14px;margin:10px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{opacity:.85;font-size:16px}
.num{font-variant-numeric:tabular-nums}

/* =====================================================================
SECTION C. FORM CONTROLS (44 px minimum touch targets, 48 px for gloves)
===================================================================== */
label{display:block;font-weight:600;color:var(--ink);margin:14px 0 6px}
.help{font-size:16px;margin:-2px 0 6px}
input[type=text],input[type=search],input[type=number],select,textarea{width:100%;min-height:48px;font:inherit;font-size:16px;color:var(--ink);background:var(--ground);border:1px solid var(--border);border-radius:2px;padding:10px}
textarea{min-height:96px;padding:10px 12px}
input:focus,select:focus,textarea:focus,button:focus,a:focus{outline:2px solid var(--focus);outline-offset:2px} /* never remove the focus ring */
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:10px 22px;border-radius:40px;font:inherit;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;text-decoration:none;border:2px solid var(--primary-fill)}
.primary{background:var(--primary-fill);color:var(--primary-ink)}
.primary:hover{background:var(--primary-hover)}
.primary:active{background:var(--primary-pressed)}
.secondary{background:transparent;color:var(--ink);border-color:var(--border)}
.menu-on{border-color:var(--primary-fill)}
button[disabled]{opacity:.55;cursor:default}
.stepper{display:flex;align-items:center;gap:6px} /* - [qty] + */
.stepper input{width:80px;text-align:center}
.chk{display:flex;gap:14px;align-items:center;margin:16px 0 4px;min-height:56px;cursor:pointer;font-weight:600;color:var(--ink)} /* the replacement checkbox row */
.chk input{width:28px;height:28px;min-height:28px;flex:0 0 28px;margin:0}

/* =====================================================================
SECTION D. STATUS PILLS AND MESSAGES (color plus icon plus word, never color alone)
===================================================================== */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:40px;padding:4px 12px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px;border:2px solid currentColor;white-space:nowrap;line-height:normal}
.pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.s-info{color:var(--status-info)}
.s-warn{color:var(--status-warn)}
.pill.s-warn{background:var(--status-warn-fill);color:var(--status-warn-pill-ink);border-color:var(--status-warn-pill-border)}
.s-ok{color:var(--status-ok)}
.s-bad{color:var(--status-bad)}
.msg{border:2px solid var(--status-bad);color:var(--ink);padding:10px 14px;margin:12px 0;font-weight:600} /* error */
.okmsg{border:2px solid var(--status-ok);color:var(--ink);padding:10px 14px;margin:12px 0;font-weight:600} /* success or notice */
.hidden{display:none !important}
.tag{display:inline-block;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--status-warn);color:var(--status-warn-pill-ink);background:var(--status-warn-fill);border-radius:40px;padding:2px 10px;margin:6px 0} /* "Replacement: Theft" */

/* =====================================================================
SECTION E. TABLES AND LISTS
Tables are no longer used for tool lines (they ran off narrow screens). See SECTION G line cards.
===================================================================== */
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--ink)}
.linehead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} /* one cart line: part and Remove */
.linectl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px} /* quantity row in the cart */
.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0} /* Status and Foreman filters */
@media (max-width:480px){.filters{grid-template-columns:1fr}}
.filters label{margin:0 0 4px}

/* =====================================================================
SECTION F. STICKY BARS (Form: cart bar. LGF page: waiting count bar)
===================================================================== */
.cartbar,.sticky{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:3px solid var(--primary-fill);padding:8px 0;margin:8px 0 0;display:flex;gap:10px;align-items:center;justify-content:space-between}
.cartbar .sum,.sticky .sum{font-weight:700;color:var(--ink);line-height:1.2}
.cartbar .added{display:block;font-weight:600;font-size:14px;color:var(--status-ok);min-height:17px} /* "Added 2 x part number" flash */
.cartbar button{flex:0 0 auto}
.cover{border:2px solid var(--status-warn);padding:10px 14px;margin:12px 0;font-weight:600;color:var(--ink)} /* "You are covering for ..." */
.actrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} /* Approve | Decline */
.actrow button{width:100%}
.confirmbox{margin-top:12px;border-top:1px solid var(--border);padding-top:8px}

/* =====================================================================
SECTION G. SHARED PAGE LAYOUT (from the shared page layout design, 2026-10-16)
Identical in every screen. Two parts:
 1. Top bar: square 48 px menu button, then the page title. The menu lists the screens for this
    role and always ends with Help.
 2. Line cards: one card per tool line, name and part number on the left, labeled values on the
    right. Replaces every table of tool lines. Two columns above 560 px, one column below, so
    nothing runs off the edge of any screen.
===================================================================== */
.card,.line,.menupanel,.cover,.msg,.okmsg{overflow-wrap:anywhere}
.top{display:flex;align-items:center;gap:16px;padding:12px 0;margin:0 0 16px;border-bottom:1px solid var(--border)} /* layout file header: 12 px / 16 px, 1 px rule */
.top h1{margin:0;flex:1 1 auto;min-width:0;font-size:clamp(26px,8vw,38px);line-height:1.16;letter-spacing:2px;overflow-wrap:anywhere}
.icon-btn{width:48px;height:48px;min-width:48px;padding:0;border:1px solid var(--border);border-radius:0;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;text-transform:none;letter-spacing:0}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.icon-btn[aria-expanded="true"]{border-color:var(--primary-fill)}
.menupanel{background:var(--surface);border:1px solid var(--border);padding:16px;margin:0 0 16px;display:flex;flex-direction:column;gap:12px}
.menupanel .btn,.menupanel button{width:100%;justify-content:flex-start}
.menupanel .helptext{margin:0;font-size:15px;line-height:22px;font-weight:300;letter-spacing:.8px}
.lines{display:grid;gap:16px;margin:16px 0}
.line{background:var(--surface);border:1px solid var(--border);padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px}
@media (max-width:560px){.line{grid-template-columns:minmax(0,1fr)}}
.line .name{margin:0;font-weight:500;color:var(--ink);font-size:20px;line-height:26px}
.line .pn,.pn{display:block;margin-top:8px;font-size:14.4px;letter-spacing:.8px;color:var(--label);font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px 16px;align-content:start}
.kv .lbl,.lbl{display:block;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--label);font-weight:500}
.kv .val,.val{display:block;font-size:18px;font-weight:500;color:var(--ink)}
.kv .val.big{font-size:28px}
.desc{font-size:15px;line-height:22px;font-weight:300;letter-spacing:.8px;margin:0}
.req{color:var(--status-bad)}
.cardhead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.cardhead .reqno{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:2px;color:var(--ink);font-size:clamp(28px,7vw,40px);line-height:1.2;text-align:left}

/* =====================================================================
SECTION H. EMPTY STATES
===================================================================== */
main{position:relative;z-index:1}
.empty{text-align:center}
@media (max-width:560px){.actrow{grid-template-columns:minmax(0,1fr)}}
.pill.wrap{white-space:normal;max-width:100%;line-height:1.2}

/* =====================================================================
SECTION I. REQUEST FORM ONLY (search results, paging, cart lines, trash)
===================================================================== */
.cols{display:block}
.cols[data-view=tools] #view-cart{display:none}.cols[data-view=cart] #view-tools{display:none}
.resgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px;align-items:start}
.resgrid>div{min-width:0}
@media(max-width:560px){.resgrid{grid-template-columns:minmax(0,1fr)}}
.result .name,.cartline .name{margin:0;font-weight:500;color:var(--ink);font-size:20px;line-height:26px}
.addrow{gap:12px;margin-top:12px}
.step{padding:0;width:48px;min-width:48px;font-size:22px;font-weight:500;letter-spacing:0}
.step svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step.trash{color:var(--status-bad);border-color:var(--status-bad)}
.stepper input{width:72px}
.incart{font-weight:500;color:var(--status-ok);min-height:0}
.small{font-size:14px;margin-top:6px}
.pager{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:16px 0}
.pager select{width:auto;min-width:96px}
.pgbtns{display:flex;gap:12px}
.cartline{margin:0 0 16px}
.cartline.leaving{transition:opacity .25s ease,transform .3s ease,max-height .3s ease .05s,margin .3s ease .05s,padding .3s ease .05s,border-width .3s ease .05s;opacity:0;transform:translateX(-32px);max-height:0 !important;margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important;padding-bottom:0 !important;overflow:hidden;border-width:0}
@media (prefers-reduced-motion: reduce){.cartline.leaving{transition:none}}
.chk.sm{min-height:44px;margin:8px 0 0;font-weight:500;font-size:16px}
.chainline{font-weight:500;color:var(--ink);margin:8px 0 0}
.notice{font-size:11px;line-height:16px;color:var(--label);margin:8px 0 0}
.sr{position:absolute;left:-9999px}

/* Queue-only additions */
.sigbox{display:block;width:320px;max-width:100%;height:120px;background:#ffffff;border:1px solid var(--border);touch-action:none;cursor:crosshair}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}


/* =====================================================================
SECTION J. SCREENS THAT HAVE NO DESIGN PAGE (sign-in, change password, People, Report To tree,
aliases, stock reports). Built from the tokens above only.
===================================================================== */
.stack{display:flex;flex-direction:column;gap:4px}
.narrow{max-width:420px}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
input[type=email],input[type=password]{width:100%;min-height:48px;font:inherit;font-size:16px;color:var(--ink);background:var(--ground);border:1px solid var(--border);border-radius:2px;padding:10px}
.card h2,.card h3{font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.who-line{font-weight:700;color:var(--ink);font-size:20px}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.acts form{margin:0}
.acts button{min-height:44px;padding:0 16px;font-size:14px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;color:var(--ink)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:8px 0;border-bottom:1px solid var(--border)}
@media (max-width:600px){th.hide-sm,td.hide-sm{display:none}}
button.link{background:none;border:0;color:var(--link);text-decoration:underline;font:inherit;font-weight:500;text-transform:none;letter-spacing:0;min-height:44px;padding:0 8px}

.itemphoto{display:block;width:160px;max-width:100%;height:120px;object-fit:contain;margin:12px 0 0;border-radius:8px;background:#fff}