
:root{--ink:#26312c;--muted:#738077;--line:#e3e8e1;--cream:#f8f8f3;--green:#2f6b4d;--green-dark:#20513a;--orange:#a55e2b}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.5 Manrope,Arial,sans-serif}.wrap{width:min(1100px,calc(100% - 40px));margin:auto}.topbar{background:#fff;border-bottom:1px solid var(--line)}.topbar-inner{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{color:var(--green-dark);font-size:22px;font-weight:800;text-decoration:none;letter-spacing:-.05em}.brand span{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:0;margin-left:8px}.link-button{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit}.link-button:hover{color:var(--green)}main{padding:40px 0 80px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(30px,4vw,43px);letter-spacing:-.055em;line-height:1.18;margin-bottom:12px}h2{font-size:22px;letter-spacing:-.035em;margin-bottom:7px}.eyebrow{color:var(--green);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:9px}.muted{color:var(--muted)}.small{font-size:13px}.page-head,.section-head,.state-panel,.order-footer,.actions{display:flex;align-items:center;justify-content:space-between;gap:20px}.page-head{margin-bottom:30px;align-items:flex-start}.date-pill{background:#e7efe5;border-radius:999px;color:var(--green-dark);padding:12px 18px;white-space:nowrap}.date-pill strong{margin-left:6px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(38,49,44,.035)}.section-head{margin:36px 0 18px}.section-head p{margin:0}.cutoff{font-size:13px;color:var(--orange);font-weight:700}.state-panel{padding:28px}.state-panel p{color:var(--muted);margin:0}.status{display:inline-block;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;white-space:nowrap}.status.accepted{color:#246744;background:#e7f3eb}.status.cancelled,.status.closed{color:#9b5a2e;background:#fff1df}.state-panel .status{margin-bottom:10px}.product-list{padding:0 26px}.product-row{padding:17px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center}.product-row:last-child{border-bottom:0}.product-row strong,.product-row span{display:block}.price{color:var(--green);font-size:13px;font-weight:700;margin-top:3px}.unavailable{color:var(--orange);font-size:13px;margin-top:3px}.quantity-label input{width:86px;text-align:center;padding:11px 8px;font-size:17px;font-weight:700}.order-footer{background:#f3f7f1;border-radius:0 0 18px 18px;padding:22px 26px}.order-footer span,.order-footer strong{display:block}.order-footer strong{font-size:24px;letter-spacing:-.04em}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:12px 20px;border:1px solid transparent;border-radius:10px;font:700 14px Manrope,Arial,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap}.button.primary{background:var(--green);color:#fff}.button.primary:hover{background:var(--green-dark)}.button.secondary{background:#fff;color:var(--green-dark);border-color:#cad8cc}.button.danger{background:#fff;color:#a44736;border-color:#e7c7c0}.button.wide{width:100%}.history-head{margin-top:42px}.history-list{padding:8px 22px}.history-row{display:grid;grid-template-columns:1fr auto 100px;align-items:center;gap:20px;padding:15px 3px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}.history-row:last-child{border-bottom:0}.history-row strong{text-align:right}.notice{border-radius:12px;padding:14px 18px;margin-bottom:22px}.notice.error{background:#fff1e9;border:1px solid #e9c6ad;color:#753e20}.notice.success{background:#eaf5eb;border:1px solid #bfdcc5;color:#275c38}.notice ul{margin:5px 0 0}.confirm-panel{padding:26px}.confirm-meta{display:flex;justify-content:space-between;gap:30px;padding-bottom:20px}.confirm-meta>div{display:flex;flex-direction:column}.confirm-meta strong{font-size:18px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse}th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}th,td{padding:12px;border-bottom:1px solid var(--line)}td:last-child,th:last-child{text-align:right}.grand-total{display:flex;justify-content:flex-end;align-items:center;gap:22px;padding-top:20px}.grand-total strong{font-size:26px}.actions{justify-content:flex-end;margin-top:22px}.login-shell{min-height:calc(100vh - 190px);display:grid;grid-template-columns:1fr 420px;align-items:center;gap:8vw}.login-intro h1{font-size:clamp(40px,5vw,68px)}.login-intro p:last-child{color:var(--muted);font-size:18px}.login-panel{padding:32px}.login-panel h2{margin-bottom:24px}label{display:block;font-weight:700;font-size:13px}label input,select{display:block;width:100%;padding:12px 14px;margin-top:7px;margin-bottom:18px;border:1px solid #cfd8ce;border-radius:9px;background:#fff;color:var(--ink);font:inherit}input:focus,select:focus{outline:2px solid #a4c5ad;outline-offset:1px}.login-panel .small{margin:18px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.admin-nav{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 28px}.admin-nav a{color:var(--green-dark);text-decoration:none;padding:9px 14px;border-radius:9px;background:#e8efe8;font-weight:700}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.form-grid label input,.form-grid label select{margin-bottom:0}.form-grid .button{align-self:end}.data-panel{padding:22px;margin-bottom:20px}.summary-scroll{overflow:auto;max-width:100%}.summary-table th:first-child,.summary-table td:first-child{position:sticky;left:0;background:#fff;min-width:170px;z-index:1}.summary-table th{white-space:nowrap}.summary-table td{text-align:center;min-width:90px}.summary-table td:last-child{font-weight:800;background:#f3f7f1}.summary-list{columns:2}.invoice{border:1px solid #ccc;padding:14px;margin:0 0 10px;break-inside:avoid;page-break-inside:avoid}.invoice h2{font-size:17px;margin:0 0 6px}.invoice p{margin:0 0 8px}.invoice th,.invoice td{padding:4px 6px;font-size:11px}.invoice-footer{text-align:right;font-weight:800;margin-top:8px}@media(max-width:700px){.wrap{width:min(100% - 24px,1100px)}main{padding:25px 0 60px}.topbar-inner{height:62px}.page-head{display:block}.date-pill{display:inline-block;margin-top:10px}.state-panel,.order-footer{align-items:stretch;flex-direction:column}.product-list{padding:0 17px}.product-row{padding:14px 0}.order-footer{padding:18px}.order-footer .button{width:100%}.history-row{grid-template-columns:1fr auto}.history-row strong{grid-column:1/-1;text-align:left}.login-shell{display:block;min-height:0}.login-intro{margin:20px 0 34px}.login-intro h1{font-size:39px}.login-panel{padding:24px}.confirm-meta{display:block}.confirm-meta>div{margin-bottom:14px}.actions{flex-wrap:wrap}.actions .button,.actions form{width:100%}.actions form .button{width:100%}.summary-list{columns:1}}@media print{body{background:#fff;color:#000;font:11px/1.25 Arial,sans-serif}.topbar,.no-print{display:none!important}.wrap{width:100%;margin:0}main{padding:0}.invoice{box-shadow:none;border:1px solid #888;border-radius:0;margin:0 0 7mm;padding:4mm;break-inside:avoid;page-break-inside:avoid}.invoice{margin:0;break-after:page;page-break-after:always}.invoice:last-of-type{break-after:auto;page-break-after:auto}.invoice th,.invoice td{font-size:9px;padding:2px 4px}.invoice h2{font-size:13px}.invoice p{font-size:10px}@page{size:A4;margin:9mm}}

.order-comment{padding:16px 26px 22px}.order-comment textarea{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1px solid #cfd8ce;border-radius:9px;background:#fff;color:var(--ink);font:inherit;resize:vertical}.comment-text,.invoice-comment{white-space:pre-wrap;overflow-wrap:anywhere}.comment-text{margin:8px 0 0}
.admin-nav{position:sticky;top:0;z-index:5;flex-wrap:nowrap;overflow-x:auto;padding:10px 0;background:var(--cream)}.admin-nav a{flex:none;white-space:nowrap}.admin-nav a[aria-current=page]{background:var(--green);color:#fff}.admin-nav a:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}
.pager{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}.pager a{display:inline-flex;min-width:38px;height:38px;align-items:center;justify-content:center;border:1px solid #cad8cc;border-radius:9px;background:#fff;color:var(--green-dark);font-weight:700;text-decoration:none}.pager a[aria-current=page]{background:var(--green);border-color:var(--green);color:#fff}
label textarea{display:block;width:100%;padding:12px 14px;margin-top:7px;margin-bottom:18px;border:1px solid #cfd8ce;border-radius:9px;background:#fff;color:var(--ink);font:inherit;resize:vertical}.form-grid label textarea{margin-bottom:0}
.history-row{grid-template-columns:minmax(0,1fr) auto auto auto}.history-row>a:first-child{color:var(--green-dark)}.history-row .button{padding:8px 12px}
@media(max-width:700px){.history-row{grid-template-columns:1fr auto}.history-row strong{text-align:left}.history-row .button{justify-self:end}}
details summary{cursor:pointer;color:var(--green-dark);font-weight:700;font-size:13px;margin-top:8px}details[open] select{min-width:280px;margin-top:10px}
.store-choices{max-height:220px;overflow-y:auto;min-width:220px;margin:0;padding:8px 12px;border:1px solid #cfd8ce;border-radius:9px}.store-choices legend{font-size:13px;font-weight:700}.store-choices label{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-weight:500}.store-choices input[type=checkbox]{width:auto;margin:3px 0 0;flex:none}details .store-choices{margin-top:10px}.other-stores{margin-top:12px!important}.other-stores a{display:inline-block;margin:3px 10px 3px 0;color:var(--green-dark);font-weight:700}

/* Shared visual language for the store and admin screens. */
:root {
    --font-ui: "Segoe UI", Arial, sans-serif;
    --ink: #24352b;
    --muted: #5d6d62;
    --line: #cbd7ca;
    --cream: #f5f7f0;
    --field-line: #aebfaf;
}

body {
    font-family: var(--font-ui);
    background-color: var(--cream);
    background-image:
        radial-gradient(circle at 1px 1px, #dce5d7 1px, transparent 1.2px),
        linear-gradient(135deg, #f8f9f3, #f1f5ed);
    background-size: 24px 24px, 100% 100%;
}

.topbar { border-color: var(--line); }
.panel {
    background: #fff;
    border-color: var(--line);
    box-shadow: 0 10px 30px rgba(35, 61, 42, .055);
}
.section-head { border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.history-row, .product-row, th, td { border-color: var(--line); }
th { color: #4c6353; background: #f5f8f3; }
.summary-table th:first-child { background: #f5f8f3; }

button, input, select, textarea { font-family: var(--font-ui); }
.button { font-family: var(--font-ui); }
input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
select,
textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 13px;
    border: 1px solid var(--field-line);
    border-radius: 10px;
    background-color: #fff;
    color: var(--ink);
    font: 400 15px/1.4 var(--font-ui);
    box-shadow: 0 1px 2px rgba(35, 61, 42, .04);
}
label > input:not([type=checkbox]):not([type=radio]),
label > select,
label > textarea { margin-top: 8px; }
input::placeholder, textarea::placeholder { color: #69776d; opacity: 1; }
select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%233f634a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):hover,
select:hover, textarea:hover { border-color: #799780; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.button:focus-visible, a:focus-visible, .link-button:focus-visible {
    outline: 3px solid #91bd9b;
    outline-offset: 2px;
}
input[type=checkbox], input[type=radio] { accent-color: var(--green); }
input:disabled, select:disabled, textarea:disabled { background-color: #eef1eb; color: var(--muted); }
.login-panel label { margin-bottom: 18px; }
.quantity-label input { width: 86px !important; text-align: center; font-weight: 700 !important; }
.order-comment textarea { resize: vertical; }
.store-choices { border-color: var(--line); background: #fbfcf9; }
.store-choices input[type=checkbox] { margin: 3px 0 0; }
.account-create-form { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; }
.account-store-choices {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 12px 16px;
    margin-bottom: 4px;
}
.account-store-choices legend { padding: 0 6px; color: var(--green-dark); }
.account-store-choices .muted { display: block; padding: 3px 0; }

.impersonation-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    background: #eef5ec;
    border: 1px solid var(--line);
    color: var(--green-dark);
}
.impersonation-notice strong { overflow-wrap: anywhere; }
.impersonation-notice form { margin: 0; }

.accounts-table { min-width: 900px; }
.accounts-table th, .accounts-table td { text-align: left; vertical-align: middle; }
.accounts-table th:nth-child(1) { min-width: 205px; }
.accounts-table th:nth-child(2) { min-width: 205px; }
.accounts-table th:nth-child(3) { min-width: 105px; }
.accounts-table th:nth-child(4) { min-width: 175px; }
.accounts-table th:nth-child(5) { min-width: 188px; }
.accounts-table td select { min-width: 82px; }
.account-actions { display: grid; gap: 8px; }
.account-actions form { margin: 0; }
.account-actions .button { width: 100%; padding: 10px 12px; white-space: normal; line-height: 1.3; }
.print-actions { gap: 12px; margin: 0 0 24px; }
.toolbar-form {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 5px;
}
.toolbar-date { display: inline-flex; align-items: center; flex: none; gap: 8px; white-space: nowrap; }
.toolbar-form .toolbar-date input[type=date] { width: 160px; height: 44px; min-height: 44px; margin: 0; }
.toolbar-form .button { flex: none; min-height: 44px; }
.toolbar-form + p { margin: 10px 0 0; }
.recipe-picker { align-items: flex-end; }
.recipe-picker .button { align-self: flex-end; }
.recipe-ingredients td { vertical-align: middle; }
.recipe-dough-row td > span:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; }
.recipe-dough-row [hidden] { display: none; }
.ingredient-create { grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) auto; align-items: end; }
.ingredient-create .button { min-height: 44px; }
.ingredient-catalog-table td { vertical-align: middle; }
.ingredient-catalog-table td:last-child { min-width: 200px; }
.ingredient-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ingredient-actions form { margin: 0; }
@media (max-width: 700px) { .ingredient-create { grid-template-columns: 1fr; } .ingredient-actions { flex-wrap: wrap; } }

/* Keep the screen layout aligned while moving between pages. */
.app-html { scrollbar-gutter: stable; }
.app-page .wrap { width: min(1100px, calc(100% - 40px)); }
.app-page .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
}
.app-page .admin-nav {
    position: sticky;
    top: 72px;
    z-index: 29;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
}
.admin-nav-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 56px;
    overflow-x: auto;
}
.admin-nav-inner a { flex: none; }
.catalog-nav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin: 0 0 28px;
    padding-bottom: 5px;
}
.catalog-nav a {
    flex: none;
    padding: 9px 14px;
    border-radius: 9px;
    background: #e8efe8;
    color: var(--green-dark);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.catalog-nav a[aria-current=page] { background: var(--green); color: #fff; }
.catalog-nav a:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.app-page .page-head { min-height: 112px; }
.app-page .panel, .app-page .notice, .app-page .section-head { width: 100%; max-width: 100%; min-width: 0; }
.app-page .table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.app-page .table-scroll > table, .app-page .summary-scroll > table { width: 100%; min-width: 100%; }

@media (max-width: 700px) {
    .app-page .wrap { width: min(1100px, calc(100% - 24px)); }
    .app-page .admin-nav { top: 62px; }
    .app-page .page-head { min-height: 0; }
    .account-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .impersonation-notice form, .impersonation-notice .button { width: 100%; }
    .accounts-table { min-width: 900px; }
}
@media (max-width: 460px) {
    .account-create-form { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    body { font-family: var(--font-ui); background: #fff; }
    th { background: #fff; }
}
