/* Inspired by verzatile.no: charcoal, silver and orange-red (#f2441f).
   Original supplied logo is kept unchanged. Darker orange ensures readable
   white button labels on the light inventory workspace. */
:root{--brand-dark:#191919;--brand-accent:#f2441f;--brand-ink:#242424;--brand-action:#b72c10}
body{background:#f5f4f2;color:var(--brand-ink)}
a{color:var(--brand-action)}
header{background:var(--brand-dark);border-bottom:3px solid var(--brand-accent);gap:28px;padding:16px 4vw}
.brand{display:flex;align-items:center;gap:18px;flex-shrink:0;color:#dbdbdb;letter-spacing:0}
.brand:hover{text-decoration:none}
.brand-logo{display:block;width:148px;height:auto}
.brand span{color:#dbdbdb;font-size:10px;letter-spacing:2px;max-width:105px;line-height:1.7;border-left:1px solid #555;padding-left:18px}
nav{gap:10px 18px}
nav a{color:#e3e3e3;padding:7px 0}
nav a:hover{color:#ff795d;text-decoration:underline;text-underline-offset:6px}
header .quiet{color:#e3e3e3;border:1px solid #666;background:transparent}
header .quiet:hover{background:#333;color:#fff}
h1,h2,h3{color:var(--brand-ink)}
h1{font-weight:850}
p,dd{color:#625e5a}
small{color:#706b65}
.eyebrow{color:var(--brand-action)}
.panel,.card{border-color:#e2ded8;border-radius:12px}
.metrics .panel{color:#625e5a;border-top:3px solid var(--brand-accent)}
.metrics strong{color:var(--brand-ink)}
.card img,.placeholder{background:#eeece8}
.placeholder{color:#706b65}
.tag{background:#f2ebe6;color:#734332}
input,select,textarea{border-color:#c9c3bc;color:var(--brand-ink);accent-color:var(--brand-action)}
button,.button{background:var(--brand-action);border-radius:6px}
button:hover,.button:hover{background:#92230d}
button.secondary,.button.secondary{background:#eee6e0;color:#80341f}
button.secondary:hover,.button.secondary:hover{background:#e3d6cb}
.quiet{background:transparent;color:#625e5a}
.quiet:hover{background:#eee6e0;color:#80341f}
input:focus,select:focus,button:focus,a:focus,textarea:focus{outline-color:#b72c10}
header a:focus,header button:focus{outline-color:#ff795d}
td,th,.stock{border-color:#e7e2dc}
footer{color:#706b65}footer span{padding:0 10px}footer a{color:#625e5a;text-decoration:underline}
.stock-search{background:#faf0e9;border-color:#e4cbbb}
.stock-search label,.stock-search small,.stock-combobox small{color:#734332}
.stock-options{border-color:#c9aa98;box-shadow:0 10px 25px #30201826}
.stock-option{border-color:#eee6e0}
.stock-option:hover,.stock-option[aria-selected=true]{background:#fbe9de;color:#80341f}
.note-panel{border:2px solid #d6af59}
.login.panel{padding:0;overflow:hidden;max-width:500px;margin:2vh auto;box-shadow:0 16px 45px #1919190d}
.login-brand{background:var(--brand-dark);border-bottom:4px solid var(--brand-accent);padding:26px;display:flex;flex-direction:column;align-items:center;gap:16px}
.login-brand img{width:230px;max-width:100%;height:auto}
.login-brand .eyebrow{color:#ff795d}
.login-content{padding:30px}
.login-content h1{font-size:clamp(28px,5vw,36px)}
.login-content button{width:100%}
@media(max-width:800px){header{gap:16px;padding:14px 18px}header nav{flex-basis:100%;order:3;gap:6px 18px}header>form{margin-left:auto}.brand-logo{width:126px}.brand span{padding-left:12px;max-width:100px}.brand{gap:12px}}
@media(max-width:480px){.brand-logo{width:112px}.brand span{font-size:9px;letter-spacing:1.2px;max-width:85px}header .quiet{padding:9px 11px}.login-content{padding:22px}.login-brand{padding:22px}.login-brand img{width:200px}}
@media print{body{background:white;color:black}.panel,.card{box-shadow:none}}

/* Personal display preference; light is the default, even without JavaScript. */
:root{color-scheme:light}
.theme-control{display:flex;align-items:center;gap:8px;margin:0;font-size:12px}
.theme-control select{width:auto;padding:8px 10px;font-size:13px;min-width:80px}
header{background:#fff}
.brand{background:var(--brand-dark);padding:8px 12px;border-radius:6px}
header nav a{color:#34312e}
header nav a:hover{color:var(--brand-action)}
header .quiet{color:#4e4944;border-color:#c9c3bc}
header .quiet:hover{background:#eee6e0;color:#242424}
header a:focus,header button:focus{outline-color:var(--brand-action)}
html[data-theme=dark]{color-scheme:dark;--brand-ink:#f0ede9}
html[data-theme=dark] body{background:#101010;color:#f0ede9}
html[data-theme=dark] header{background:#191919}
html[data-theme=dark] nav a,html[data-theme=dark] header .quiet{color:#e3e3e3}
html[data-theme=dark] nav a:hover{color:#ff947b}
html[data-theme=dark] header .quiet:hover{background:#333;color:white}
html[data-theme=dark] a{color:#ff947b}
html[data-theme=dark] .panel,html[data-theme=dark] .card{background:#202020;border-color:#444}
html[data-theme=dark] .card{color:#f0ede9}
html[data-theme=dark] p,html[data-theme=dark] dd,html[data-theme=dark] .metrics .panel{color:#c4beb7}
html[data-theme=dark] small,html[data-theme=dark] footer,html[data-theme=dark] footer a{color:#b9b2ab}
html[data-theme=dark] .eyebrow{color:#ff947b}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:#171717;color:#f0ede9;border-color:#777}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#aaa39c}
html[data-theme=dark] button,html[data-theme=dark] .button{color:white}
html[data-theme=dark] .secondary{background:#463027;color:#ffd2c5}
html[data-theme=dark] .secondary:hover{background:#5a392d}
html[data-theme=dark] .quiet{background:transparent;color:#ddd}
html[data-theme=dark] .quiet:hover{background:#333}
html[data-theme=dark] .tag{background:#423027;color:#ffd2c5}
html[data-theme=dark] .card img,html[data-theme=dark] .placeholder{background:#2c2a28}
html[data-theme=dark] .placeholder{color:#bbb4ad}
html[data-theme=dark] td,html[data-theme=dark] th,html[data-theme=dark] .stock{border-color:#444}
html[data-theme=dark] .stock-options{background:#242424;border-color:#777}
html[data-theme=dark] .stock-option{border-color:#444}
html[data-theme=dark] .stock-option:hover,html[data-theme=dark] .stock-option[aria-selected=true]{background:#493127;color:#ffd2c5}
html[data-theme=dark] .stock-combobox small,html[data-theme=dark] .stock-search small,html[data-theme=dark] .stock-search label{color:#ddd}
html[data-theme=dark] .stock-search{background:#302722;border-color:#73503c}
html[data-theme=dark] .note-panel{background:#30291c;border-color:#d6af59}
html[data-theme=dark] .note-panel .note-text{color:#ffe2a9}
html[data-theme=dark] .notice,html[data-theme=dark] .errorlist{background:#3d2e17;color:#ffdda0}
html[data-theme=dark] :is(input,select,button,a,textarea):focus{outline-color:#ff947b}
/* Keep labels and QR codes white for scanning and printing. */
html[data-theme=dark] .qr-label{background:white;color:#242424}
html[data-theme=dark] .qr-label :is(h2,p,small,strong){color:#242424}
@media(max-width:800px){.theme-control{margin-left:auto}header>form{margin-left:0}.brand{padding:6px 9px}}
@media(max-width:480px){.brand span{display:none}.theme-control{gap:5px}.theme-control>span{font-size:11px}.theme-control select{min-width:65px;padding:8px 6px}}
@media print{html[data-theme=dark]{color-scheme:light}html[data-theme=dark] body{background:white;color:black}html[data-theme=dark] .qr-label :is(h2,p,small,strong){color:black}}