@layer usability {
    .app-body .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px auto !important;
        gap: 12px !important;
        min-height: 76px !important;
        padding: 12px 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #dfe7e3 !important;
    }
    .app-body .topbar > .title-group { min-width: 0 !important; }
    .app-body .topbar .title-group > p { margin: 6px 0 0 !important; color: #61716a !important; }
    .app-body .workspace-refresh {
        display: grid !important; place-items: center !important;
        width: 40px !important; height: 40px !important; min-height: 40px !important;
        padding: 0 !important; background: #fff !important; color: #426253 !important;
        border: 1px solid #d6e1da !important; border-radius: 6px !important; box-shadow: none !important;
    }
    .app-body .workspace-refresh svg { width: 18px !important; height: 18px !important; }
    .app-body .sidebar { width: 232px !important; padding: 14px 12px !important; box-shadow: none !important; }
    .app-body { grid-template-columns: 232px minmax(0, 1fr) !important; }
    .app-body .brand { padding: 8px 4px 14px !important; margin: 0 !important; }
    .app-body .brand-logo-wide { max-width: 164px !important; height: 64px !important; object-fit: contain !important; }
    .app-body .admin-nav { gap: 6px !important; padding: 8px 0 !important; }
    .app-body .nav-section { padding: 0 !important; border: 0 !important; }
    .app-body .nav-section-toggle { min-height: 32px !important; padding: 6px 10px !important; letter-spacing: 0 !important; text-transform: none !important; }
    .app-body .nav-section-items { gap: 2px !important; padding: 0 0 6px !important; border: 0 !important; margin: 0 !important; }
    .app-body .nav {
        display: flex !important; align-items: center !important; justify-content: flex-start !important;
        gap: 10px !important; width: 100% !important; min-height: 42px !important;
        padding: 6px 10px !important; margin: 0 !important; border-radius: 6px !important; box-shadow: none !important;
    }
    .app-body .nav-icon { display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important; flex: 0 0 28px !important; border-radius: 6px !important; }
    .app-body .nav-icon svg { width: 18px !important; height: 18px !important; margin: 0 !important; }
    .app-body .nav-text { min-width: 0 !important; white-space: normal !important; overflow-wrap: normal !important; text-align: left !important; }
    .app-body .nav.active { background: #e7f5ec !important; }
    .app-body .nav.active::before { content: none !important; }
    .app-body .panel-head { flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; }
    .app-body .panel-head h2 { min-width: 0 !important; overflow-wrap: normal !important; word-break: normal !important; max-width: 100% !important; }
    .app-body .nav[hidden], .app-body .nav-section[hidden] { display: none !important; }
    .app-body .panel[hidden] { display: none !important; }
    .app-body .bulk-bar[hidden] { display: none !important; }
    .app-body .account { margin-top: 12px !important; padding: 12px 8px !important; border-radius: 6px !important; background: #f5f8f6 !important; }
    .app-body[data-current-view="my-account"] .global-filter-bar,
    .app-body[data-current-view="integrations"] .global-filter-bar,
    .app-body[data-current-view="deployment"] .global-filter-bar,
    .app-body[data-current-view="privileges"] .global-filter-bar,
    .app-body[data-current-view="qa-checklist"] .global-filter-bar { display: none !important; }
    .app-body[data-current-view="site-management"] .global-filter-bar { display: none !important; }
    .app-body #dashboard .ops-hero { display: none !important; }
    .app-body #dashboard .feed-stack { gap: 20px !important; }
    .app-body #dashboard .kpi-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
    .app-body #dashboard .kpi { min-height: 96px !important; padding: 14px !important; gap: 6px !important; }
    .app-body #role-dashboard.role-dashboard-grid {
        display: block !important; padding: 0 !important; border: 0 !important;
        border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    }
    .workspace-task-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .workspace-task-head h2 { margin: 0 !important; }
    .app-body .workspace-task-head button { min-height: 42px !important; border-radius: 6px !important; box-shadow: none !important; padding: 9px 14px !important; background: #087b48 !important; }
    .workspace-task-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; border-top: 1px solid #dce6df; }
    .app-body .workspace-task {
        display: grid !important; grid-template-columns: 20px minmax(0,1fr) auto 18px !important;
        align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 60px !important;
        padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid #e1e8e3 !important;
        border-radius: 0 !important; background: transparent !important; color: #354e40 !important;
        box-shadow: none !important; text-align: left !important;
    }
    .app-body .workspace-task svg { width: 18px !important; height: 18px !important; }
    .workspace-task.needs-action > strong { color: #975300; }
    .app-body #dashboard .panel { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 14px 0 !important; }
    .app-body #dashboard .panel-grid { gap: 24px !important; }
    .page-load-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; color: #5d7165; }
    .page-load-status.error { color: #9c2929; }
    .page-load-status button { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: 6px; background: #fff; color: #9c2929; border: 1px solid #e0bcbc; box-shadow: none; }
    .page-load-status[hidden], .page-load-status button[hidden] { display: none !important; }
    :is(.app-body,.store-body) .form-feedback { grid-column: 1 / -1; margin: 12px 0 0 !important; padding: 10px 12px !important; color: #17623b !important; background: #eef8f1 !important; border: 1px solid #c4dfce !important; border-radius: 6px !important; overflow-wrap: anywhere; }
    :is(.app-body,.store-body) .form-feedback.error { color: #942626 !important; background: #fff4f3 !important; border-color: #ecc6c3 !important; }
    :is(.app-body,.store-body) .form-feedback[hidden] { display: none !important; }
    :is(.app-body,.store-body) form[aria-busy="true"] button:disabled { opacity: .6; cursor: wait; }
    :is(.app-body,.store-body) button:focus-visible { outline: 2px solid #087b48 !important; outline-offset: 3px; }
    .store-body .address-coordinates { padding: 8px 0; border: 0; }
    .store-body .address-coordinates summary { cursor: pointer; color: #61746a; font-size: 13px; }
    .store-body .address-coordinates .two { margin-top: 10px; }
    .store-body .checkout-pane { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; }
    .store-body .checkout-pane[hidden] { display: none !important; }
    .store-body #checkout-continue { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 6px !important; box-shadow: none !important; }
    .store-body #checkout-back { display: flex; align-items: center; gap: 8px; justify-self: start; border: 0 !important; padding: 8px 0 !important; color: #086b3f !important; background: transparent !important; box-shadow: none !important; }
    .store-body .checkout-summary-card { padding: 12px !important; border-radius: 6px !important; box-shadow: none !important; }
    .store-body .checkout-summary-card > div:not(.checkout-summary-total) { grid-template-columns: 34px minmax(0,1fr) !important; gap: 4px 10px !important; }
    .store-body .checkout-summary-card > div:not(.checkout-summary-total) > span { grid-column: 1; grid-row: 1 / span 2; }
    .store-body .checkout-summary-card > div:not(.checkout-summary-total) > :is(strong,small) { grid-column: 2; width: auto !important; max-width: 100% !important; overflow-wrap: break-word !important; word-break: normal !important; }
    .app-body #toast { max-width: min(440px,calc(100vw - 32px)) !important; border-radius: 6px !important; padding: 12px 16px !important; }
    .workspace-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 10px; border-bottom: 1px solid #dce6df; min-width: 0; }
    .app-body .workspace-tabs button { flex: 0 0 auto; min-height: 42px !important; padding: 8px 12px !important; border: 0 !important; border-radius: 6px !important; color: #556b5e !important; background: transparent !important; box-shadow: none !important; }
    .app-body .workspace-tabs button[aria-selected="true"] { background: #e6f5ec !important; color: #086b3f !important; }
    .app-body #vendor-supply-summary { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 12px !important; }
    .app-body #vendor-supply-summary > article { min-height: 98px !important; padding: 14px !important; border-radius: 8px !important; background: #fff !important; border-color: #dfe7e3 !important; box-shadow: none !important; }
    .app-body #vendor-supply:not([data-supply-active="payments"]) #vendor-supply-summary > article[data-supply-finance],
    .app-body #vendor-supply[data-supply-active="payments"] #vendor-supply-summary > article:not([data-supply-finance]) { display: none !important; }
    .app-body #vendor-supply[data-supply-active="payments"] #vendor-supply-summary { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .workspace-tabpanel { display: grid; gap: 20px; min-width: 0; }
    .app-body .workspace-tabpanel[hidden] { display: none !important; }
    .app-body #vendor-supply .workspace-tabpanel > .panel { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    .app-body #vendor-supply > .vendor-supply-actions { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
    .app-body #vendor-supply > .vendor-supply-actions[hidden] { display: none !important; }
    .app-body #vendor-supply > .vendor-supply-actions > .panel-head { display: none !important; }
    .app-body #vendor-supply .supply-action-buttons { display: flex !important; gap: 8px !important; flex-wrap: wrap; }
    .app-body #vendor-supply .supply-action-buttons button { min-height: 42px !important; padding: 10px 14px !important; border-radius: 6px !important; box-shadow: none !important; }
    .app-body #vendor-supply .supply-action-buttons button { background: #087b48 !important; color: #fff !important; border: 1px solid #087b48 !important; }
    .app-body #vendor-supply .supply-action-buttons button svg { width: 18px !important; height: 18px !important; padding: 0 !important; background: transparent !important; }
    .app-body #vendor-supply .supply-action-buttons button[hidden] { display: none !important; }
    .app-body .order-adjustments { margin-top: 8px; }
    .app-body .order-adjustments summary { cursor: pointer; color: #176b43; padding: 5px 0; font-size: 13px; }
    .app-body .order-adjustments[open] { display: grid; gap: 8px; }
    .app-body .order-adjustments label { display: grid; gap: 6px; margin-top: 8px; }
    @media (max-width: 1024px) {
        .app-body { grid-template-columns: minmax(0,1fr) !important; }
        .app-body .sidebar { width: min(280px,calc(100vw - 40px)) !important; }
        .app-body .topbar { grid-template-columns: 40px minmax(0,1fr) auto !important; padding: 8px !important; min-height: 60px !important; }
        .app-body .topbar > .menu { display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; }
        .app-body .topbar > .workspace-refresh { display: none !important; }
        .app-body #dashboard .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
        .app-body #vendor-supply-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
        .app-body #vendor-supply[data-supply-active="payments"] #vendor-supply-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
        .app-body .topbar .title-group > p { display: none !important; }
        .app-body .global-filter-bar { display: grid !important; grid-template-columns: minmax(0,1fr) 44px 44px !important; gap: 6px !important; padding: 8px !important; border-radius: 6px !important; }
        .app-body .global-search-pill { min-width: 0 !important; min-height: 44px !important; padding: 0 10px !important; grid-column: auto !important; }
        .app-body .global-search-pill input { min-width: 0 !important; width: 100% !important; }
        .app-body :is(#global-search-apply,#date-filter-open) { display: grid !important; place-items: center !important; grid-column: auto !important; min-width: 0 !important; max-width: 44px !important; width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 6px !important; box-shadow: none !important; }
        .app-body :is(#global-search-apply,#date-filter-open) > span,.app-body #date-filter-open > svg:last-child { display: none !important; }
        .app-body :is(#global-search-apply,#date-filter-open) > svg { width: 18px !important; height: 18px !important; }
    }
    @media (min-width: 1025px) {
        .app-body .topbar > .menu { display: none !important; }
    }
    @media (max-width: 600px) {
        .app-body .panel-head { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
        .app-body .panel-head > :is(h2,span,small,div) { width: auto !important; max-width: 100% !important; flex: none !important; min-width: 0 !important; text-align: left !important; }
        .workspace-task-head { align-items: flex-start; flex-direction: column; }
        .workspace-task-list { grid-template-columns: minmax(0,1fr); }
        .app-body .workspace-task { min-height: 62px !important; }
        .app-body #dashboard .panel-grid { grid-template-columns: minmax(0,1fr) !important; }
        .app-body #dashboard .kpi { min-height: 90px !important; padding: 12px !important; }
    }
}