:root{--brand-green:#254536;--brand-green-dark:#193226;--brand-orange:#f78b1f;--brand-orange-light:#fff0df;--brand-cream:#faf8f3;--text-muted:#3f5146;--text-success:#3f6438;--text-warning:#87500b}
/* Readable secondary text on white, cream, and tinted panels. */
.text-muted{color:var(--text-muted)}
.text-success{color:var(--text-success)}
.text-warning{color:var(--text-warning)}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}
body{background-color:var(--brand-cream);color:#1c3528;font-size:15px;line-height:1.6}
.brand-logo{width:56px;height:56px;object-fit:contain}
.mobile-brand-logo{display:none}
.btn-primary,.brand-sign-in{background:var(--brand-green);color:#fff}
.btn-primary:hover,.brand-sign-in:hover{background:var(--brand-green-dark)}
.btn-secondary:hover{border-color:var(--brand-orange);background:var(--brand-orange-light)}
.nav-link.active{background:var(--brand-orange-light);color:var(--brand-green);box-shadow:inset 3px 0 var(--brand-orange)}
.nav-link.active>span{color:#98500c}
.nav-link:hover{background:var(--brand-orange-light)}
.summary-cards>.panel{border-top:3px solid var(--brand-orange)}
.summary-cards>.panel:nth-child(odd){border-top-color:var(--brand-green)}
.summary-cards .rounded-lg{background:var(--brand-orange-light);color:#98500c}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-orange);outline-offset:2px}
button:focus-visible,a:focus-visible{outline:2px solid var(--brand-orange);outline-offset:3px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:28px}
.login-brand img{width:144px;height:144px;object-fit:contain}
.login-brand p{color:var(--brand-green);font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.login-page main>div.bg-white{border-top:3px solid var(--brand-orange)}
.login-page input{font-size:14px;min-height:44px}
.brand-sign-in{min-height:48px}
@media(max-width:767px){
  .mobile-brand-logo{display:block;flex-shrink:0;border-radius:50%}
  header .workspace-label{display:none}
  .mobile-nav{border-top:2px solid var(--brand-green)}
  .mobile-nav-link.active{background:var(--brand-orange-light);color:var(--brand-green);box-shadow:inset 0 3px var(--brand-orange)}
  .mobile-nav-link.active>span{color:#98500c}
  .mobile-nav-link:hover{background:var(--brand-orange-light)}
  .login-page main{padding:12px 0!important}
}

/* Keep table values consistent across every module and screen size. */
body table td{font-size:14px}

.btn.btn-create{font-size:14px}
.table-actions{display:flex;align-items:center;gap:8px}
.table-actions .action-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border:1px solid #e3e7df;border-radius:8px;color:var(--brand-green);background:#fff}
.table-actions .action-button:hover{background:var(--brand-orange-light);border-color:var(--brand-orange)}
.table-actions .action-delete{color:#a35543}
.table-actions .action-delete:hover{background:#fef2f2;border-color:#e6b5ac}
.record-page{width:75%;margin-inline:auto;min-width:0}
.record-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:12px;align-items:start}
.record-content{min-width:0;container-type:inline-size}
.record-content>form,.record-content>section{max-width:none}
.record-columns>.change-history{min-width:0;margin-top:0;overflow:hidden}
.history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid #edf0eb}
.history-heading h2{font-size:14px;font-weight:600}.history-heading>span{font-size:14px;color:var(--text-muted)}
.history-entry{border-bottom:1px solid #edf0eb}.history-entry:last-child{border-bottom:0}
.history-entry summary{cursor:pointer;padding:16px 20px;font-size:14px;overflow-wrap:anywhere}
.history-entry summary time{display:block;margin-top:6px;font-size:14px;color:var(--text-muted)}
.history-entry th{background:#faf8f3}.history-entry td{min-width:130px;max-width:300px;vertical-align:top;overflow-wrap:anywhere;white-space:normal}
.history-empty{padding:24px 20px;color:var(--text-muted);font-size:14px}
.history-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:16px;padding:16px}
@container(max-width:550px){.record-content .grid{grid-template-columns:minmax(0,1fr)}.record-content .page-heading{flex-wrap:wrap;gap:12px}}
@media(max-width:1100px){.record-page{width:100%}.record-columns{grid-template-columns:minmax(0,1fr);gap:24px}}

.record-columns-single{grid-template-columns:minmax(0,1fr)}

.choice-chips{min-width:0;grid-column:1 / -1}
.choice-chips[hidden]{display:none}
.choice-chip-heading{float:left;width:108px;padding-top:8px;font-size:14px;font-weight:500}
.choice-chip-options{display:flex;flex-wrap:wrap;gap:8px;margin-left:108px}
.choice-chips>.errorlist{margin-left:108px}
.choice-chip{position:relative;cursor:pointer}
body .choice-chip input[type=radio]{appearance:none;position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;clip-path:inset(50%);overflow:hidden}
.choice-chip span{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 14px;border:1px solid #9eada3;border-radius:3px;background:#fff;color:var(--brand-green);font-size:14px;font-weight:500}
.choice-chip:hover span{border-color:var(--brand-green);background:var(--brand-cream)}
.choice-chip input:checked+span{background:var(--brand-green);border-color:var(--brand-green);color:#fff}
.choice-chip input:focus-visible+span{outline:2px solid var(--brand-orange);outline-offset:2px}

/* Shared readable type sizes, including compact template utilities. */
body .text-xs,body .text-sm,
body [class~="text-[8px]"],body [class~="text-[9px]"],
body [class~="text-[10px]"],body [class~="text-[11px]"],
body [class~="text-[12px]"],body [class~="text-[13px]"]{font-size:14px;line-height:1.5}
body th{font-size:14px;letter-spacing:.035em}
body .btn,body .helptext,body .errorlist{font-size:14px}
body .nav-link{font-size:15px;font-weight:500;color:var(--text-muted)}
body .nav-link.active{color:var(--brand-green);font-weight:600}
body input:not([type=checkbox]):not([type=file]),body select,body textarea{font-size:14px}
body input[type=file]{font-size:14px}
body .mobile-nav-link{font-size:12px}

/* Product details: name/category/unit, then category-specific fields and image. */
@media(min-width:1024px){
  body .product-fields{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .product-fields>div,.product-fields>.choice-chips{grid-column:auto;min-width:0}
  .product-fields .choice-chip-heading{float:none;width:auto;padding-top:0;margin-bottom:8px}
  .product-fields .choice-chip-options,.product-fields .choice-chips>.errorlist{margin-left:0}
  .product-fields .choice-chip span{padding:6px 10px}
  body .product-fields:has(#chips-category input[value="finished"]:checked){grid-template-columns:repeat(4,minmax(0,1fr))}
  body .product-fields:has(#chips-category input[value="raw"]:checked){grid-template-columns:repeat(4,minmax(0,1fr))}
  .product-fields:has(#chips-category input[value="finished"]:checked)>div:has(input[name="price"]){grid-column:4;grid-row:1}
  .product-fields:has(#chips-category input[value="finished"]:checked)>#chips-subcategory{grid-column:1 / span 3;grid-row:2}
  .product-fields:has(#chips-category input[value="finished"]:checked)>div:has(input[name="image"]){grid-column:4;grid-row:2}
}

/* Customer forms: contact, personal information, then address and notes. */
body .customer-fields{gap:12px 16px;align-items:start}
.customer-fields>div{min-width:0}
.customer-fields label{margin-bottom:5px}
body .customer-fields input:not([type=radio]),body .customer-fields textarea{box-sizing:border-box;min-height:44px;height:44px}
body .customer-fields textarea{resize:vertical}
@container(min-width:650px){
  body .record-content .customer-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.customer-fields>.choice-chips{grid-column:auto;min-width:0}
.customer-fields .choice-chip-heading{float:none;width:auto;padding-top:0;margin-bottom:5px;line-height:21px}
.customer-fields .choice-chip-options,.customer-fields .choice-chips>.errorlist{margin-left:0}
.customer-fields .choice-chip span{min-height:44px;padding:8px 16px}

.record-columns:has(.customer-fields){grid-template-columns:minmax(0,1fr)}