/* StockFlow application styles.
*
* Extracted from design/stockflow-mockup.html, which remains the design of
* record. Keep them in step: if a screen changes here, change it there, or the
* mockup stops being worth reviewing.
*
* The mockup-only rules (.loginwrap role switcher chrome, .note banners) are
* kept because the login and note styles are genuinely used; the SCAFFOLDING
* they styled is not rendered by the app.
*/
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#f1f2f4;color:#303030;
font:14px/1.5 -apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit}
.note{max-width:1180px;margin:0 auto;padding:18px 20px 0}
.note p{margin:0 0 10px;padding:12px 14px;border-radius:10px;background:#fff6e5;
border:1px solid #f0d18a;color:#6b4c05;font-size:13px}
/* Full bleed. This used to be a 1180px rounded card floating in the middle
of the page — a window inside the browser window, which wastes the width
a wide table needs and looks like a mockup rather than an application.
The mockup does it deliberately to frame the design; the real app should
simply BE the page. */
.app{background:#fff;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#1a1a1a;color:#fff}
.topbar .logo{font-weight:700;letter-spacing:.02em}
.topbar .store{font-size:12px;color:#b5b5b5}
.topbar .spacer{flex:1}
.body{display:grid;grid-template-columns:212px minmax(0,1fr);flex:1}
.body > *{min-width:0}
nav.side{background:#fafafa;border-right:1px solid #e3e3e3;padding:10px 8px}
nav.side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8a8a8a;padding:12px 10px 6px}
nav.side button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;
background:transparent;font:inherit;padding:7px 10px;border-radius:8px;cursor:pointer;color:#303030}
nav.side button:hover{background:#f0f0f0}
nav.side button.on{background:#e6e6e6;font-weight:600}
nav.side .ico{width:16px;text-align:center;opacity:.7}
nav.side .badge{margin-left:auto;background:#8e0b21;color:#fff;border-radius:20px;font-size:11px;padding:0 6px;font-weight:600}
main{padding:18px 20px 28px;min-height:640px;background:#f1f2f4;min-width:0;
transition:opacity .16s ease}
main.fading{opacity:0}
.backbar{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.backbtn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;
background:#fff;border:1px solid #babfc3;border-radius:8px;padding:7px 13px;
cursor:pointer;color:#303030;font-weight:500}
.backbtn:hover{background:#f4f4f4;border-color:#8c9196}
.req{color:#8e0b21;font-weight:700}
.subtabs{display:flex;gap:4px;background:#e9eaec;padding:4px;border-radius:10px;margin:0 0 14px;width:fit-content;flex-wrap:wrap}
.subtabs button{font:inherit;font-size:13px;font-weight:500;border:0;background:transparent;
padding:7px 15px;border-radius:7px;cursor:pointer;color:#4a4a4a}
.subtabs button:hover{background:#dfe1e3}
.subtabs button.on{background:#fff;color:#303030;box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}
.subpane{display:none}
.subpane.on{display:block}
.pdfbox{display:flex;align-items:center;gap:14px;padding:16px}
.pdficon{width:42px;height:52px;border:1px solid #c9cccf;border-radius:5px;background:#fff;
display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
font-size:9px;font-weight:700;color:#8e0b21;letter-spacing:.04em;flex:none;
box-shadow:0 1px 3px rgba(0,0,0,.1)}
.rowact{display:flex;gap:6px;justify-content:flex-end}
.metastrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;
border-top:1px solid #ececec}
.metastrip > div{padding:11px 14px;border-right:1px solid #ececec}
.metastrip > div:last-child{border-right:0}
.metastrip dt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6d7175;font-weight:600;margin:0 0 2px}
.metastrip dd{margin:0;font-size:13.5px;overflow-wrap:anywhere}
.pagehead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.pagehead .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
h1{font-size:19px;margin:0 0 2px}
.sub{color:#616161;font-size:13px;margin:0 0 16px}
.card{background:#fff;border:1px solid #e3e3e3;border-radius:12px;margin:0 0 14px;overflow:visible;min-width:0}
/* a table must scroll inside its card rather than force the page wider */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card h2{font-size:14px;margin:0;padding:12px 14px;border-bottom:1px solid #ececec;
display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card h2 .rt{margin-left:auto;font-weight:400;font-size:12px;color:#616161;
display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pad{padding:14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6d7175;
padding:9px 14px;border-bottom:1px solid #ececec;background:#fbfbfb;font-weight:600}
td{padding:10px 14px;border-bottom:1px solid #f2f2f2;vertical-align:middle}
tr:last-child td{border-bottom:0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#4a4a4a;white-space:nowrap}
/* nowrap: a bin address broken across three lines is unreadable, and it is
the first thing to go when a column gets tight */
.bin{display:inline-block;background:#eef2f7;border:1px solid #d6dee8;border-radius:6px;
padding:1px 7px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
white-space:nowrap}
/* a stock LOCATION — the warehouse or the truck. Deliberately unlike .bin, because
confusing the two is the single easiest mistake to make on these screens. */
.loc{display:inline-block;border-radius:6px;padding:1px 8px;font-size:12px;white-space:nowrap;
background:#e9f1ec;border:1px solid #c8ddd0;color:#0c5132}
.loc.truck{background:#fdf1e3;border-color:#efd8b4;color:#6b4c05}
.loc.dot::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
background:currentColor;margin-right:6px;vertical-align:middle;opacity:.75}
.tag{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:600}
.t-crit{background:#fee9ec;color:#8e0b21}
.t-warn{background:#ffefd3;color:#5e4200}
.t-ok{background:#e3f3e9;color:#0c5132}
.t-info{background:#e8eefc;color:#123f8f}
.t-mut{background:#eee;color:#5c5c5c}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px;margin-bottom:14px}
.stat{background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:13px 14px}
.stat b{display:block;font-size:24px;line-height:1.15}
.stat span{font-size:12px;color:#616161}
.stat.alert b{color:#8e0b21}
.stat .bd{font-size:11.5px;color:#6d7175;margin-top:5px;display:flex;gap:8px;flex-wrap:wrap}
/* per-location quantity breakdown inside a cell */
.qsplit{font-size:11.5px;color:#6d7175;white-space:nowrap}
.qsplit b{color:#303030;font-variant-numeric:tabular-nums}
/* form controls */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6d7175;font-weight:600}
select,input[type=text],input[type=number],textarea{
font:inherit;font-size:13.5px;color:#303030;background:#fff;
border:1px solid #c9cccf;border-radius:8px;padding:8px 11px;width:100%;
box-shadow:0 1px 0 rgba(0,0,0,.04)}
select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center}
select:hover,input:hover{border-color:#8c9196}
select:focus,input:focus,textarea:focus{outline:0;border-color:#005bd3;box-shadow:0 0 0 2px rgba(0,91,211,.2)}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;padding:14px}
.checks{display:flex;gap:18px;flex-wrap:wrap;padding:0 14px 14px;font-size:13px;align-items:center}
.checks label{display:flex;align-items:center;gap:7px;cursor:pointer}
input[type=checkbox]{width:16px;height:16px;accent-color:#303030;margin:0}
.search{position:relative}
.search input{padding-left:34px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.55}
/* multi-select */
.ms{position:relative}
.ms-btn{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:13.5px;
background:#fff;border:1px solid #c9cccf;border-radius:8px;padding:8px 11px;cursor:pointer;
text-align:left;color:#303030;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.ms-btn:hover{border-color:#8c9196}
.ms.open .ms-btn{border-color:#005bd3;box-shadow:0 0 0 2px rgba(0,91,211,.2)}
.ms-btn .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-btn .n{background:#303030;color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;font-weight:600}
.ms-btn .cv{opacity:.55;font-size:11px}
.ms-menu{display:none;position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;
background:#fff;border:1px solid #d6d6d6;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);
padding:6px;max-height:236px;overflow:auto}
.ms.open .ms-menu{display:block}
.ms-menu label{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;font-size:13.5px;cursor:pointer}
.ms-menu label:hover{background:#f4f4f4}
.ms-menu .msall{border-bottom:1px solid #ececec;margin-bottom:4px;padding-bottom:6px;font-weight:600}
button.btn{font:inherit;font-size:13px;border-radius:8px;padding:7px 13px;cursor:pointer;
border:1px solid #303030;background:#303030;color:#fff;font-weight:500}
button.btn.sec{background:#fff;color:#303030;border-color:#babfc3}
button.btn.sm{padding:3px 10px;font-size:12px}
button.btn.pos{background:#0c5132;border-color:#0c5132}
.qty{display:inline-flex;align-items:center;border:1px solid #c9cccf;border-radius:8px;overflow:hidden}
.qty span{padding:5px 12px;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.qty i{padding:5px 11px;background:#f6f6f7;cursor:pointer;font-style:normal;color:#5c5c5c}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
.split > *{min-width:0}
.kv{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px 12px;font-size:13px;align-items:center}
.kv dt{color:#6d7175}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.feed{list-style:none;margin:0;padding:0;font-size:13px}
.feed li{padding:9px 14px;border-bottom:1px solid #f2f2f2;display:flex;gap:10px}
.feed li:last-child{border-bottom:0}
.feed .who{color:#6d7175;font-size:12px;white-space:nowrap;margin-left:auto}
.drop{border:2px dashed #babfc3;border-radius:12px;padding:26px;text-align:center;color:#6d7175;background:#fbfbfb}
.diff-add{color:#0c5132;font-weight:600}
.diff-sub{color:#8e0b21;font-weight:600}
.bar{display:flex;gap:10px;align-items:center;padding:11px 14px;background:#f6f6f7;
border-top:1px solid #ececec;flex-wrap:wrap;justify-content:flex-end}
.bar .grow{flex:1;font-size:13px;color:#4a4a4a;min-width:180px}
.screen{display:none}
.screen.on{display:block}
.prog{height:6px;background:#ececec;border-radius:4px;overflow:hidden;width:120px;display:inline-block;vertical-align:middle}
.prog i{display:block;height:100%;background:#0c5132}
.empty{padding:44px 20px;text-align:center;color:#6d7175}
.empty b{display:block;color:#303030;font-size:15px;margin-bottom:5px}
/* pagination — every list that can outgrow a screenful gets one */
.pager{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#fbfbfb;
border-top:1px solid #ececec;flex-wrap:wrap;font-size:12.5px;color:#4a4a4a}
.pager .pinfo{flex:1;min-width:160px}
.pbtns{display:flex;gap:4px}
.pbtn{font:inherit;font-size:12.5px;min-width:31px;padding:4px 8px;border:1px solid #c9cccf;
background:#fff;border-radius:7px;cursor:pointer;color:#303030;font-variant-numeric:tabular-nums}
.pbtn:hover:not(:disabled){border-color:#8c9196;background:#f4f4f4}
.pbtn.on{background:#303030;color:#fff;border-color:#303030;font-weight:600}
.pbtn:disabled{opacity:.38;cursor:default}
.pager select{width:auto;padding:4px 27px 4px 9px;font-size:12.5px;background-position:right 8px center}
/* add-to-order — a part goes onto a NAMED purchase order, not "an order" */
.addpo{position:relative;display:inline-block}
.addpo-menu{display:none;position:absolute;z-index:30;right:0;top:calc(100% + 4px);min-width:250px;
background:#fff;border:1px solid #d6d6d6;border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,.14);padding:6px;text-align:left}
.addpo.open .addpo-menu{display:block}
.addpo-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6d7175;
font-weight:600;padding:6px 8px 4px}
.addpo-menu button{display:block;width:100%;text-align:left;font:inherit;font-size:13px;
border:0;background:transparent;padding:7px 8px;border-radius:6px;
cursor:pointer;color:#303030}
.addpo-menu button:hover{background:#f4f4f4}
.addpo-menu .sep{height:1px;background:#ececec;margin:5px 0}
.addpo-menu .newpo{font-weight:600}
.addpo-menu .po-sub{display:block;font-size:11.5px;color:#6d7175}
/* login — sits over everything until you sign in */
.loginwrap{position:fixed;inset:0;z-index:100;background:#1a1a1a;
display:flex;align-items:center;justify-content:center;padding:20px}
.loginbox{background:#fff;border-radius:14px;width:100%;max-width:378px;padding:28px 26px;
box-shadow:0 18px 48px rgba(0,0,0,.4)}
.loginbox .lgo{font-weight:700;letter-spacing:.02em;font-size:19px}
.loginbox .lsub{color:#616161;font-size:12.5px;margin:2px 0 20px}
.loginbox .field{margin-bottom:13px}
.loginbox button{width:100%;margin-top:6px;padding:9px}
.lnote{font-size:12px;color:#6d7175;margin:16px 0 0;padding-top:14px;border-top:1px solid #ececec}
.pkprompt{text-align:center;padding:10px 0 18px}
.pkprompt .pkicon{font-size:34px;line-height:1;margin-bottom:10px}
.pkprompt b{display:block;font-size:15px;margin-bottom:3px}
.pkprompt span{font-size:12.5px;color:#6d7175}
/* role badge in the top bar, and the demo role switcher */
.rolepick{display:flex;align-items:center;gap:7px;font-size:12px;color:#b5b5b5}
.rolepick select{width:auto;padding:3px 26px 3px 9px;font-size:12px;background-color:#2e2e2e;
color:#fff;border-color:#3d3d3d;background-position:right 8px center;
background-image:url("data:image/svg+xml;utf8,")}
.clockchip{display:inline-flex;align-items:center;gap:7px;font-size:12px;
background:#2e2e2e;border:1px solid #3d3d3d;border-radius:20px;padding:2px 11px;color:#e6e6e6}
.clockchip .dotlive{width:7px;height:7px;border-radius:50%;background:#4a4a4a}
.clockchip.on .dotlive{background:#2fa16a}
.linkbtn{font:inherit;font-size:12px;background:none;border:0;color:#b5b5b5;
cursor:pointer;padding:0;text-decoration:underline}
.linkbtn:hover{color:#fff}
/* capability ticks on the person screen */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 18px;padding:14px}
.caps label{display:flex;align-items:center;gap:9px;font-size:13px;padding:3px 0}
.caps .src{margin-left:auto;font-size:11px;color:#6d7175}
.caps .inherited input{accent-color:#8c9196}
/* placeholder rows shown before anything is selected */
.blank td{padding-top:13px;padding-bottom:13px}
.blank .ph{display:block;height:9px;border-radius:3px;background:#f0f1f3;max-width:190px}
.blank .ph.s{max-width:74px}
.perm{display:flex;align-items:center;gap:9px;padding:10px 14px;background:#e8eefc;
border-bottom:1px solid #d3e0f7;font-size:12.5px;color:#123f8f}
/* a note about something Shopify owns, not StockFlow */
.shop{display:flex;align-items:center;gap:9px;padding:10px 14px;background:#f4f0fb;
border-bottom:1px solid #e0d6f2;font-size:12.5px;color:#4a2f7a}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;padding:14px}
.transfer-arrow{display:flex;align-items:center;justify-content:center;font-size:20px;color:#6d7175;padding-top:18px}
/* count sheet */
.sheet{background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:22px 24px;margin:0 0 14px;overflow-x:auto}
.sheet-head{display:flex;align-items:flex-start;gap:16px;border-bottom:2px solid #303030;padding-bottom:10px;margin-bottom:14px}
.sheet-head h3{margin:0;font-size:17px}
.sheet-head .meta{margin-left:auto;text-align:right;font-size:12px;color:#4a4a4a;line-height:1.8}
.sheet-head .rule{display:inline-block;border-bottom:1px solid #767676;min-width:120px}
.loc-group{margin:0 0 18px}
.loc-group h4{margin:0 0 6px;font-size:13px;background:#f1f2f4;border-left:3px solid #303030;
padding:5px 9px;letter-spacing:.03em;text-transform:uppercase}
.sheet table{font-size:12.5px}
.sheet th{background:#fff;border-bottom:1px solid #303030;padding:5px 8px;font-size:10.5px}
.sheet td{padding:5px 8px;border-bottom:1px solid #e8e8e8}
.writein{display:inline-block;border:1px solid #767676;border-radius:3px;width:58px;height:22px;background:#fff}
.writeline{display:inline-block;border-bottom:1px solid #bcbcbc;width:100%;height:15px}
.cnt{width:80px;text-align:right;padding:5px 8px}
/* Two different things can be printed — the stock check list and a job sheet.
Which one is decided by data-print on , set by whichever button was
pressed. Without that, printing a job sheet would emit the stock check. */
@media print{
@page{margin:14mm}
body{background:#fff}
.note,.topbar,nav.side,.no-print,.loginwrap{display:none!important}
.app{border:0;box-shadow:none;margin:0;max-width:none;border-radius:0}
.body{display:block}
main{padding:0;background:#fff;min-height:0}
.sheet{border:0;border-radius:0;padding:0;margin:0;overflow:visible;display:block!important}
.loc-group{page-break-inside:avoid}
.sheet tr{page-break-inside:avoid}
/* stock check — also the fallback if nothing set data-print */
body:not([data-print="job"]) .screen:not(#manage){display:none!important}
body:not([data-print="job"]) .subpane:not(#sp-check){display:none!important}
body:not([data-print="job"]) #manage,
body:not([data-print="job"]) #sp-check,
body:not([data-print="job"]) #sheetWrap{display:block!important}
/* job sheet — everything on the screen hidden except the sheet itself */
body[data-print="job"] .screen:not(#jobdetail){display:none!important}
body[data-print="job"] #jobdetail{display:block!important}
body[data-print="job"] #jobdetail .card,
body[data-print="job"] #jobdetail .split,
body[data-print="job"] #jobdetail .backbar,
body[data-print="job"] #jobdetail .pagehead{display:none!important}
}
/* the hamburger only exists below 900px, where the sidebar becomes a drawer */
.menubtn{display:none;font:inherit;font-size:18px;line-height:1;background:none;border:0;
color:#fff;cursor:pointer;padding:2px 8px 2px 0}
.navscrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:55}
@media (max-width:1080px){ .split{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
.body{grid-template-columns:minmax(0,1fr)}
.menubtn{display:inline-flex}
/* The sidebar used to be display:none here, which left a phone with no way
to reach any other screen at all. It is a drawer now. */
nav.side{position:fixed;top:0;bottom:0;left:0;width:262px;z-index:60;display:block;
overflow-y:auto;transform:translateX(-100%);transition:transform .2s ease;
box-shadow:0 0 40px rgba(0,0,0,.28);padding-top:14px}
body.navopen nav.side{transform:none}
body.navopen .navscrim{display:block}
body.navopen{overflow:hidden}
/* the shop name and clock chip push the top bar to three lines on a phone */
.topbar .store,.topbar .clockchip{display:none}
.stats{grid-template-columns:repeat(2,1fr)}
main{padding:14px 13px 24px}
.card h2{font-size:13.5px}
.card h2 .rt{margin-left:0;width:100%}
.card h2 .rt select,.card h2 .rt .search{width:100%;min-width:0}
}
@media (max-width:560px){
.stats{grid-template-columns:1fr}
.subtabs{width:100%}
.subtabs button{flex:1 1 auto}
.pagehead .acts{width:100%}
.pagehead .acts .btn{flex:1}
.metastrip{grid-template-columns:repeat(2,1fr)}
.bar{gap:8px}
.bar .grow{min-width:100%}
.kv{grid-template-columns:92px minmax(0,1fr)}
h1{font-size:17.5px}
}
/* Fine-grained pointers only: a touch screen has no hover, so a table that
scrolls sideways needs to look scrollable rather than merely be scrollable. */
@media (hover:none){
.tablewrap{scrollbar-width:thin}
.tablewrap::-webkit-scrollbar{height:8px}
.tablewrap::-webkit-scrollbar-thumb{background:#c9cccf;border-radius:4px}
}
/* Setting a part's shelf address, one small form per location row on the
part record. Inline so the select and its button stay on one line at
desktop width; it wraps rather than pushing the table wider on a phone. */
.binform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.binform select{min-width:120px}
/* Recovery codes, shown exactly once. Big and monospaced because somebody is
copying them onto paper, which is the whole point of them. */
.codes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.codes .code{background:#f6f8fa;border:1px solid #d6dee8;border-radius:6px;
padding:8px 12px;font-size:15px;letter-spacing:.04em}
/* The sign-in and second-factor screens have no sidebar, so centre them and
stop the cards running the full width of a desktop monitor. */
.loginwrap{max-width:520px;margin:0 auto}
/* Part photographs. The image is Shopify's, served from its CDN — we store
the URL and never the file, so nothing here is the only copy of anything.
Fixed box with object-fit:contain so a tall product and a wide one line up
in a table instead of making every row a different height. */
.thumb{width:44px;height:44px;border-radius:6px;border:1px solid #e3e8ee;
background:#f6f8fa;object-fit:contain;display:block}
.thumb.big{width:180px;height:180px;border-radius:10px}
.nothumb{width:44px;height:44px;border-radius:6px;border:1px dashed #d6dee8;
background:#fafbfc;display:flex;align-items:center;justify-content:center;
color:#8b9099;font-size:11px}
.nothumb.big{width:180px;height:180px;border-radius:10px;font-size:13px}
/* Part record heading: photo beside the title on a desktop, stacked on a
phone. The image must not push the title off the screen at 375px. */
.parthead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
.parthead h1{margin-top:0}
@media (max-width:560px){
.thumb.big,.nothumb.big{width:120px;height:120px}
}
/* ---------------------------------------------------------------------
Signing in: a dark full-page screen with the form centred, and none of
the application chrome. A signed-out person has no sidebar to use — it
was offering Dashboard, Stock query and Audit log, every one of which
bounced straight back here.
--------------------------------------------------------------------- */
body.authpage{background:#1a1a1a;color:#e9e9e9;min-height:100vh;
display:flex;align-items:center;justify-content:center;padding:24px}
.authwrap{width:100%;max-width:400px}
.authbrand{text-align:center;margin-bottom:22px}
.authbrand .logo{display:block;font-weight:700;letter-spacing:.04em;font-size:22px;color:#fff}
.authbrand .store{display:block;font-size:12.5px;color:#9a9a9a;margin-top:4px}
.authpage .card{background:#fff;color:#303030;border:0;border-radius:14px;
box-shadow:0 10px 40px rgba(0,0,0,.45);overflow:hidden}
.authpage .card h1{font-size:19px;margin:0;padding:18px 20px 0}
.authpage .card .sub{padding:2px 20px 0;margin:0}
.authpage .field{padding:14px 20px 0}
.authpage .cardfoot,.authpage .bar{padding:16px 20px;background:#fafafa;
border-top:1px solid #ececec;margin-top:16px}
.authnote{background:#243b55;border:1px solid #35506e;color:#dce8f7;
padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px}
.authnote.bad{background:#4a1f22;border-color:#6d2f33;color:#f6d9db}
.authfoot{text-align:center;font-size:12px;color:#6f6f6f;margin:18px 0 0}
/* The card foot lays its note and its button on one line, and stacks them on
a narrow phone rather than squeezing the button off the edge. */
.authpage .cardfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.authpage .cardfoot .note{flex:1;min-width:180px;font-size:12.5px;color:#6d7175}
.authpage .field input[type=text],.authpage .field input[type=password],
.authpage .field input[type=email]{width:100%;box-sizing:border-box}
.authpage .field label{display:block;font-size:11.5px;letter-spacing:.04em;
text-transform:uppercase;color:#6d7175;margin-bottom:5px}