/* Fruit Forever website palette and locally hosted Archivo typeface.
   Asset sources are recorded in brand/SOURCES.md. */
@font-face {
  font-family: Archivo;
  src: url('/static/brand/archivo-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  font-family: Archivo, 'Segoe UI', Arial, sans-serif;
  --brand-orange: #cf4700;
  --brand-lime: #a3cc3f;
  --brand-olive: #627c22;
  --brand-green: #3f691a;
  --brand-pale: #eef0e9;
  --green: var(--brand-green);
  --muted: #65705f;
  --line: #e0e5d8;
  color: #2b3526;
  background: #f7f8f4;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  letter-spacing: normal;
  min-width: 0;
}
.brand-image {display: block; width: 100%; height: auto; object-fit: contain;}
.brand .brand-small {font-size: 8px; letter-spacing: 1.8px; font-weight: 500; margin: 0; color: white;}
.sidebar-brand {background: var(--brand-orange); border-radius: 7px; padding: 16px 12px; flex-shrink: 0;}
.sidebar-brand .brand-image {max-width: 174px;}
.sidebar .nav-label {margin-top: 32px; color: var(--muted);}
.nav.active {background: var(--brand-pale); color: var(--brand-green); box-shadow: inset 3px 0 var(--brand-olive);}
.nav-count {background: #dfe9c8; color: #3a581e;}
.avatar {background: var(--brand-pale); color: var(--brand-green);}
.dot {background: var(--brand-olive);}
.topbar {background: white;}
.topbar strong {color: #334429;}
.topbar-brand {display: none; flex: 0 0 auto; width: 132px; padding: 7px 10px; border-radius: 5px; background: var(--brand-orange);}
.topbar-brand img {display: block; width: 100%; height: auto;}
body.menu-hidden .topbar-brand, body.grid-expanded .topbar-brand {display: block;}
body.grid-expanded .topbar {background: white;}
.eyebrow {color: var(--brand-olive);}
h1, h2 {color: var(--brand-green);}
button.primary {background: var(--brand-orange); border-color: var(--brand-orange); color: white;}
button.primary:hover {background: #b53e00; border-color: #b53e00; filter: none;}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: 2px solid var(--brand-olive); outline-offset: 3px;}
input, select, textarea {border-color: #cad3c0; color: #2b3526;}
input:focus, select:focus, textarea:focus {border-color: var(--brand-olive);}
.search, th, .grid th:first-child {background: #f7f8f3;}
.order-row:hover td, .grid .product-cell:hover {background: var(--brand-pale);}
.workflow b {background: var(--brand-pale);}
.tabs button.active {border-bottom-color: var(--brand-orange); color: var(--brand-green);}
.notice.info {background: var(--brand-pale); color: #40572d;}
.badge.green {background: var(--brand-pale); color: var(--brand-green);}
.toast {background: var(--brand-green);}
.auth {min-height: 100vh; min-height: 100dvh;}
.auth-art {
  position: relative;
  overflow: hidden;
  background: var(--brand-green);
  background-image: radial-gradient(ellipse at 5% 105%, #a3cc3f30, transparent 65%);
  padding: clamp(35px, 4.5vw, 65px);
  border-bottom: 8px solid var(--brand-orange);
}
.auth-brand {width: min(285px, 100%);}
.auth-brand .brand-small {margin-top: 6px; font-size: 10px; letter-spacing: 2.5px;}
.auth-intro {padding: 50px 0;}
.auth-art .eyebrow {color: #d6eca6;}
.auth-art h1 {color: white; font-size: clamp(40px, 4.2vw, 66px); font-weight: 600; letter-spacing: -1.6px;}
.auth-art p {color: #eef0e9; font-size: 15px; line-height: 1.8;}
.auth-art .auth-footnote {color: #e5edda; letter-spacing: .4px;}
.auth-form form {width: min(340px, 100%);}
.auth-form .auth-eyebrow {color: var(--brand-orange);}
.auth-form button {min-height: 45px;}
.mobile-auth-brand {display: none;}
@media (max-width: 1100px) {
  .sidebar-brand {padding: 14px 10px;}
  .brand .brand-small {font-size: 7px; letter-spacing: 1.4px;}
  .auth-brand .brand-small {font-size: 9px; letter-spacing: 2px;}
}
@media (max-width: 750px) {
  .sidebar {gap: 6px; padding: 12px;}
  .sidebar-brand {width: 120px; padding: 9px; border-radius: 5px;}
  .sidebar .brand-small {display: none;}
  .sidebar .nav {padding: 11px 8px; gap: 6px; white-space: nowrap; font-size: 12px;}
  .auth-form {padding: 30px 24px;}
  .mobile-auth-brand {display: flex; background: var(--brand-orange); width: min(250px, 100%); padding: 20px; margin-bottom: 38px; border-radius: 7px;}
  .mobile-auth-brand .brand-small {display: block; font-size: 8px; letter-spacing: 1.7px;}
  .auth-form .auth-eyebrow {display: none;}
  .topbar-brand {width: 108px; padding: 6px 8px;}
  body.menu-hidden #breadcrumb, body.grid-expanded #breadcrumb {display: none;}
}
@media (max-width: 360px) {
  .sidebar {gap: 4px; padding: 10px 8px;}
  .sidebar-brand {width: 106px; padding: 8px;}
  .sidebar .nav {padding: 10px 6px; font-size: 11px;}
}