/* shodesk identity: forest, ivory and quiet working surfaces. */
:root {
 --brand-primary:#205a40; --brand-secondary:#133425; --brand-focus:#2d805b;
 --brand-ink:#133425; --brand-white:#ffffff; --brand-border:#dedfd5;
 --brand-ivory:#f5f0e4; --brand-sand:#e7dbbf; --ink:#133425;
 --accent:var(--brand-primary); --line:#dedfd5; --muted:#647067;
 background:#faf9f6; color:var(--brand-ink);
}
body {background:#faf9f6}
button {letter-spacing:0}
button:hover {background:var(--brand-secondary)}
.quiet:hover {background:#f0f3ef; border-color:#bccbbf}
input,select,textarea {border-color:#ccd3ca}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible {outline:2px solid var(--brand-focus); outline-offset:3px}
::selection {background:var(--brand-sand); color:var(--brand-ink)}
#workspace>.app-header {background:#fff; border-bottom:1px solid var(--line)}
.app-brand {gap:0; text-decoration:none; color:inherit; border-radius:3px}
.app-brand:hover {text-decoration:none}
.app-brand:focus-visible {outline:2px solid var(--brand-focus); outline-offset:5px}
.app-brand .brand-mark {display:none}
.brand-wordmark {width:140px; height:31px; object-fit:contain; object-position:left center}
.app-brand #shop-label {font-size:10px; line-height:15px; letter-spacing:.15px; margin-top:4px; color:#667269}
#app-sidebar {background:var(--brand-secondary); border-color:var(--brand-secondary); color:var(--brand-ivory)}
#app-sidebar .sidebar-heading {background:var(--brand-secondary); color:#bdcfc1; letter-spacing:1.1px; padding-bottom:18px}
#app-sidebar #menu-collapse,#app-sidebar #menu-close {background:transparent; color:var(--brand-ivory); border-color:transparent}
#app-sidebar nav :is(button,:where(a[data-route-link])) {color:#e4ebe2; border:0; border-radius:4px; font-weight:450}
#app-sidebar nav :is(button,:where(a[data-route-link])):hover {background:#1c4834; color:#fff}
#app-sidebar nav :is(button,:where(a[data-route-link])).active,#app-sidebar nav .nav-parent>[data-tab].active,
#app-sidebar nav .nav-children :is(button,:where(a[data-route-link]))[aria-current=page] {background:var(--brand-primary); color:#fff; font-weight:600; box-shadow:inset 2px 0 var(--brand-sand)}
#app-sidebar nav .nav-children :is(button,:where(a[data-route-link])).active:not([aria-current=page]) {background:transparent; color:#e4ebe2; box-shadow:none}
#app-sidebar .nav-children {border-color:#426451}
#app-sidebar .sidebar-footnote {color:#b3c7b9}
#app-sidebar #logout {color:#e4ebe2; border-color:#355543}
#app-sidebar #logout:hover {background:#1c4834; color:#fff}
#workspace.sidebar-collapsed #app-sidebar .nav-children {background:var(--brand-secondary); border-color:#426451}
#workspace.sidebar-collapsed .nav-children::before {color:var(--brand-ivory)}
#nav-tooltip {background:var(--brand-secondary); color:var(--brand-ivory)}
.nav-location>span:first-child {color:#b5bbae}
#notifications-open {color:var(--brand-primary)}
#notifications-open:hover {background:#f0f3ef}
#menu-open {color:var(--brand-primary); border-color:var(--line)}
.dash-kpis {background:#fff; border-color:var(--line)}
.dash-kpi>span:first-child {color:#526358}
.dash-kpi>strong {color:var(--brand-ink); font-weight:600}
.dash-kpi.featured {background:#f5f0e4}
.dash-panel {border-top:1px solid #aebfb1}
.dash-panel-head h3 {color:var(--brand-ink)}
.dash-bar {fill:var(--brand-primary)}
.dash-bar:hover,.dash-bar:focus {fill:var(--brand-focus)}
.dash-legend i {background:var(--brand-primary)}
.dash-meter>span {background:var(--brand-primary)}
.dash-order-link,.ord-name,.dash-link,.product-title {color:var(--brand-primary)}
.dash-order-link:hover,.ord-name:hover,.dash-link:hover,.product-title:hover {color:var(--brand-secondary)}
.dash-attention-card:hover {background:#f4f5ef; border-bottom-color:var(--brand-primary)}
.dash-order-attention button {background:#fff}
.dash-tabs button.active {color:var(--brand-primary); border-bottom-color:var(--brand-primary)}
#product-table th[data-column=select],#product-table th[data-column=product],th {background:#f4f5f0}
#product-table tr:hover td,tbody tr:hover td {background:#f5f7f2}
#product-table [data-column=select],#product-table [data-column=product] {box-shadow:1px 0 0 var(--line)}
.filter-chip,.product-layout-switch [aria-pressed=true] {background:#ecf1e9; border-color:#cbd6c7; color:var(--brand-primary)}
.batch-bar {background:#f5f0e4; border-color:#d5ccb5}
.banner {background:#f5f0e4; border-color:#d5ccb5; color:var(--brand-ink)}
#pwa-install,#pwa-open-app {background:var(--brand-primary); border-color:var(--brand-primary); color:#fff}
#pwa-install:hover,#pwa-open-app:hover {background:var(--brand-secondary); border-color:var(--brand-secondary)}
.notification:not(.error) {border-left-color:var(--brand-primary)}
.footer-brand {display:block; width:92px; height:auto; opacity:.85}
#workspace>footer {border-color:var(--line); color:var(--muted); padding-top:22px; padding-bottom:22px}
.login {display:grid; grid-template-columns:1fr 1fr; width:calc(100% - 40px); max-width:840px; padding:0; border:1px solid #d7ddd2; border-radius:8px; overflow:hidden; margin:12vh auto; min-height:360px; background:#fff}
.login-identity {display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:46px; background:var(--brand-primary); color:var(--brand-ivory)}
.login-identity .login-brand {width:220px; max-width:100%; height:auto; filter:brightness(0) invert(1)}
.login-identity>p {font-size:12px; line-height:20px; letter-spacing:.4px; color:var(--brand-ivory); margin:22px 0 0}
.brand-signature {display:block; width:44px; height:3px; background:var(--brand-sand); margin-top:38px}
.login-access {padding:44px 38px; align-self:center}
.login-access h1 {font-size:25px; line-height:32px; margin:0 0 10px; letter-spacing:-.4px}
.login-access>.muted {font-size:13px; margin:0 0 28px}
.login-access label {font-size:13px}
.login-access input {width:100%; min-height:44px}
.login-access button {width:100%; min-height:44px; margin-top:6px}
@media(max-width:700px){
 .brand-wordmark {width:124px; height:28px}
 .app-brand #shop-label {font-size:10px}
 #app-sidebar {box-shadow:8px 0 40px #13342520}
 .login {grid-template-columns:1fr; max-width:440px; margin:5vh auto; width:calc(100% - 32px)}
 .login-identity {padding:32px}
 .login-identity .login-brand {width:182px}
 .login-identity>p {margin-top:14px}
 .brand-signature {margin-top:24px; width:32px}
 .login-access {padding:30px 28px 34px}
 .dash-controls {flex-wrap:wrap; gap:10px}
 .dash-controls label {flex:1 1 100%}
 .dash-controls select {width:100%}
 .dash-controls button {flex:1 1 100%; min-height:44px}
}
@media(prefers-reduced-motion:reduce){button {transition:none}}


#app-sidebar a[data-route-link] {font-family:inherit; text-decoration:none; cursor:pointer; letter-spacing:0}
#app-sidebar a[data-route-link]:focus-visible {outline:2px solid var(--brand-focus); outline-offset:2px}
a.ord-name {font:inherit; text-decoration:none; cursor:pointer}