body[data-role="admin"] { --brand: #087953; --brand-dark: #056044; }
body[data-role="admin"] .admin-menu a.active { background: #e5f4ec; color: #07623f; }
body[data-role="admin"] .admin-sidebar, body[data-role="admin"] .admin-menu { min-width: 0; }
body[data-role="admin"] .page-title p { max-width: none; }
body[data-role="admin"] .main { max-width: 1700px; width: 100%; }
#app .a-section { padding: 24px 0; border-top: 1px solid #dfe5e1; margin-top: 20px; }
.a-section h2 { font-size: 19px; margin: 0 0 18px; }
.a-section h3 { font-size: 16px; margin: 0 0 12px; }
.a-connection, .a-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.a-connection { font-size: 12px; color: #6f7c74; }
.a-connection > span { flex: 1; }
.a-button, .a-icon { border: 1px solid #ccd7cf; background: white; color: #2b4434; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; min-height: 36px; padding: 7px 12px; }
.a-button.primary { background: #087953; border-color: #087953; color: white; }
.a-button.danger { color: #ba3d27; border-color: #edc8c0; }
.a-icon { width: 36px; height: 36px; padding: 0; flex-shrink: 0; }
.a-button:disabled, .a-icon:disabled { opacity: .45; cursor: not-allowed; }
.a-button:focus-visible, .a-icon:focus-visible, .a-switch:focus-visible { outline: 3px solid #328dc8; outline-offset: 2px; }
#app svg, .a-dialog svg { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
.a-toolbar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 20px 0; }
.a-search { display: flex; flex: 1 1 240px; align-items: center; gap: 8px; background: white; border: 1px solid #ccd6cd; border-radius: 5px; padding: 0 10px; height: 40px; }
.a-search input { width: 100%; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 14px; background: transparent; }
.a-search:focus-within { outline: 2px solid #168e62; }
.a-filter { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #758275; }
.a-filter select { padding: 8px; background: white; border: 1px solid #ccd6cd; border-radius: 5px; font: inherit; font-size: 13px; max-width: 230px; min-height: 40px; color: #263c2a; }
.a-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 20px 0; }
.a-metrics > div { padding: 18px 0; border-bottom: 2px solid #d8e7dd; }
.a-metrics span, .a-metrics small { display: block; color: #778376; font-size: 12px; }
.a-metrics strong { font-size: 26px; display: block; margin: 8px 0; color: #253d2b; }
.a-distribution { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.a-distribution a { display: flex; flex-direction: column; gap: 8px; color: #5b6b5f; text-decoration: none; padding: 10px 0; font-size: 12px; }
.a-distribution strong { font-size: 22px; color: #17734d; }
.a-audit { display: flex; gap: 18px; flex-wrap: wrap; }
.a-audit a, .a-heading a { font-size: 13px; color: #126f99; }
.a-order { border: 1px solid #dce3dc; border-radius: 8px; padding: 20px; background: white; margin-bottom: 14px; }
.a-order header, .a-order footer { display: flex; gap: 14px; justify-content: space-between; align-items: start; }
.a-order header > div:first-child { min-width: 0; }
.a-order header strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.a-order header span:not(.a-badge) { display: block; font-size: 12px; color: #788275; margin-top: 6px; }
.a-tags, .a-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a-tags { flex-shrink: 0; }
.a-badge { display: inline-flex; padding: 4px 8px; border-radius: 4px; background: #f0f3f0; color: #4f6153; font-size: 11px; white-space: nowrap; }
.a-badge.done, .a-badge.ready { background: #e3f5e9; color: #0a794a; }
.a-badge.cancelled { background: #fcebe7; color: #a84131; }
.a-badge.blue, .a-badge.delivering { background: #e9f3fa; color: #256d98; }
.a-order-lines { margin: 18px 0; }
.a-order-lines > div { display: flex; align-items: start; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 5px 0; font-size: 13px; }
.a-order-lines > div > span { flex: 1; }
.a-note { flex-basis: 100%; margin: 3px 0; color: #9c6723; overflow-wrap: anywhere; }
.a-order-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #7c877a; font-size: 12px; margin-bottom: 18px; }
.a-order-meta span { overflow-wrap: anywhere; }
.a-order footer { border-top: 1px solid #edf1ea; padding-top: 16px; align-items: center; }
.a-order footer small { display: block; color: #85907f; margin-top: 4px; font-size: 11px; }
.a-info { border-left: 3px solid #64a9cc; background: #edf6fb; padding: 14px 18px; font-size: 13px; line-height: 1.6; color: #427086; }
.a-muted { font-size: 12px; color: #7c887b; line-height: 1.7; }
.a-empty { padding: 28px !important; text-align: center; color: #7d897a; font-size: 13px; }
body[data-role="admin"] table { background: white; font-size: 13px; }
body[data-role="admin"] th { white-space: nowrap; font-size: 12px; }
body[data-role="admin"] td { max-width: 320px; overflow-wrap: anywhere; }
body[data-role="admin"] td small { display: block; font-size: 11px; margin-top: 5px; color: #85907f; }
.a-switch { width: 36px; height: 22px; background: #c0cbc2; border-radius: 14px; padding: 0; position: relative; flex-shrink: 0; }
.a-switch::after { content: ""; width: 16px; height: 16px; position: absolute; left: 3px; top: 3px; background: white; border-radius: 50%; }
.a-switch.on { background: #0a9e62; }
.a-switch.on::after { left: 17px; }
.a-dialog { border: 0; border-radius: 8px; width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 26px; color: #233d2a; }
.a-dialog::backdrop { background: #172d22a8; }
.a-dialog > .a-icon { float: right; }
.a-dialog h2 { font-size: 21px; margin: 4px 44px 24px 0; overflow-wrap: anywhere; }
.a-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.a-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; font-size: 12px; min-width: 0; }
.a-field input, .a-field select, .a-field textarea { width: 100%; border: 1px solid #d0dbd1; padding: 10px; border-radius: 5px; color: #263e2c; background: white; font: inherit; font-size: 14px; min-width: 0; }
.a-check { display: inline-flex; gap: 8px; align-items: center; margin: 8px 12px 18px 0; font-size: 13px; }
.a-check input { accent-color: #148455; width: 17px; height: 17px; }
.a-product { display: flex; gap: 12px; align-items: center; margin: 4px 0 10px; }
.a-thumbnail { width: 56px; height: 56px; object-fit: cover; border-radius: 5px; }
.a-product > span { min-width: 0; }
.a-definition { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 0 24px; font-size: 13px; }
.a-definition > * { border-bottom: 1px solid #e1e7df; padding: 16px 0; overflow-wrap: anywhere; }
@media (max-width: 780px) { .a-distribution { grid-template-columns: repeat(4, minmax(0, 1fr)); } .a-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-order { padding: 14px; } .a-order header, .a-order footer { flex-wrap: wrap; } .a-dialog { padding: 18px; } .a-form-grid { grid-template-columns: 1fr; gap: 0; } .a-filter { flex: 1 1 120px; } .a-filter select { max-width: 100%; } .a-definition { grid-template-columns: 1fr 1.5fr; gap: 0 14px; } }