:root {
  --ink: #151515;
  --red: #9c241c;
  --red-soft: #c54a3f;
  --grain: #c9a96e;
  --straw: #efe7d7;
  --warm: #f4f1ea;
  --white: #fff;
  --green: #2f6b50;
  --green-soft: #e6f0eb;
  --line: #ded8cd;
  --muted: #6e6a64;
  --shadow: 0 18px 55px rgba(31, 26, 20, .10);
  --radius: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; font-family: Roboto, Arial, sans-serif; color: var(--ink); background: var(--warm); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(156,36,28,.24); outline-offset: 2px; }
.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; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0,1fr); grid-template-rows: 76px 1fr; }
.topbar { position: sticky; top: 0; z-index: 30; grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; height: 76px; padding: 0 24px; color: #fff; background: #111; border-bottom: 1px solid #2d2d2d; }
.brand { appearance: none; display: flex; align-items: center; gap: 14px; min-width: 202px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.brand-mark { display: grid; place-items: center; width: 72px; height: 34px; padding: 6px 8px; background: #fff; border-radius: 7px; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-divider { width: 1px; height: 27px; background: #444; }
.brand-product { font-weight: 700; letter-spacing: .04em; }
.workspace-switch { display: flex; padding: 4px; border: 1px solid #3b3b3b; border-radius: 12px; background: #202020; }
.workspace-tab { border: 0; border-radius: 8px; background: transparent; color: #aaa; padding: 9px 16px; font-weight: 700; cursor: pointer; }
.workspace-tab.active { color: #fff; background: var(--red); }
.workspace-tab span { font-size: 10px; margin-left: 5px; font-weight: 500; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.global-search { display: flex; align-items: center; gap: 8px; width: 225px; padding: 10px 11px; color: #bcbcbc; background: #1f1f1f; border: 1px solid #383838; border-radius: 10px; cursor: pointer; text-align: left; }
.global-search span:nth-child(2) { flex: 1; font-size: 13px; }
kbd { padding: 2px 5px; border: 1px solid #505050; border-radius: 4px; color: #949494; font-size: 10px; box-shadow: none; }
.location-select { flex: 0 0 auto; }
.location-select select { width: 194px; max-width: none; padding: 11px 32px 11px 12px; color: #eee; background: #1f1f1f; border: 1px solid #383838; border-radius: 10px; cursor: pointer; }
.icon-button, .user-button, .mobile-menu { border: 0; background: transparent; color: #fff; cursor: pointer; }
.icon-button { position: relative; display: grid; place-items: center; padding: 9px; }
.icon-button .notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid #111; border-radius: 50%; background: var(--red-soft); }
.user-button { display: flex; align-items: center; gap: 8px; }
.user-button span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grain); color: #231d14; font-weight: 800; }
.user-button b { font-size: 12px; }
.mobile-menu { display: none; padding: 6px; }
.mobile-menu .ui-icon { width: 20px; height: 20px; }
.mobile-location { display: none; }

.sidebar { position: sticky; top: 76px; z-index: 20; display: flex; flex-direction: column; height: calc(100vh - 76px); padding: 24px 15px 18px; overflow-y: auto; background: #191919; color: #fff; border-right: 1px solid #262626; }
.nav-eyebrow { margin: 0 11px 14px; color: #777; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 4px; padding: 12px 13px; border: 0; border-radius: 10px; color: #bdbdbd; background: transparent; cursor: pointer; text-align: left; font-size: 14px; font-weight: 500; }
.nav-item > span { display: grid; width: 21px; place-items: center; font-size: 17px; color: #828282; }
.nav-item .ui-icon { width: 17px; height: 17px; }
.nav-item em { margin-left: auto; padding: 2px 7px; border-radius: 20px; background: #343434; color: #ccc; font-size: 10px; font-style: normal; }
.nav-item:hover { color: #fff; background: #252525; }
.nav-item.active { color: #fff; background: #302421; box-shadow: inset 3px 0 0 var(--red-soft); }
.nav-item.active > span { color: var(--red-soft); }
.sidebar-foot { margin-top: auto; padding: 13px 9px 0; border-top: 1px solid #303030; }
.sync-line { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 15px; }
.sync-line i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #56a77f; box-shadow: 0 0 0 4px rgba(86,167,127,.12); }
.sync-line strong, .sync-line small { display: block; }
.sync-line strong { font-size: 11px; }
.sync-line small { margin-top: 3px; color: #777; font-size: 9px; }
.demo-label { display: inline-block; color: #777; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }

main { min-width: 0; padding: 32px clamp(22px, 3vw, 48px) 70px; }
.page-shell { max-width: 1480px; margin: 0 auto; animation: page-in .24s ease; }
@keyframes page-in { from { opacity: .3; transform: translateY(5px); } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.page-head p { margin: 0; color: var(--muted); font-size: 14px; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; }
.button:hover { border-color: #aaa096; }
.button.primary { color: #fff; background: var(--red); border-color: var(--red); }
.button.primary:hover { background: #7f1d17; }
.button.dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.button.small { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.text-button { padding: 0; border: 0; color: var(--red); background: transparent; cursor: pointer; font-weight: 700; }
.surface { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.meta-note { color: var(--muted); font-size: 11px; }

.hero { position: relative; min-height: 310px; margin-bottom: 20px; overflow: hidden; border-radius: 20px; background: #2d241c; color: #fff; box-shadow: var(--shadow); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,12,.92) 0%, rgba(15,15,15,.63) 38%, rgba(20,20,20,.08) 75%), url('assets/mjm-wheat-hero.png') center / cover; }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 5px; background: linear-gradient(90deg,var(--red) 0 32%,var(--grain) 32% 65%,var(--green) 65%); }
.hero-content { position: relative; z-index: 1; width: min(630px, 70%); padding: 38px 42px 45px; }
.hero h1 { max-width: 560px; margin: 8px 0 14px; font-size: clamp(34px,4vw,58px); line-height: 1; letter-spacing: -.045em; }
.hero p { max-width: 520px; margin-bottom: 25px; color: #d7d4cf; line-height: 1.55; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #eadcc2; }
.hero-kicker i { width: 26px; height: 1px; background: var(--grain); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .button.secondary { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(20,20,20,.32); backdrop-filter: blur(5px); }
.hero-date { position: absolute; right: 24px; bottom: 20px; z-index: 1; font-size: 11px; color: #fff; text-shadow: 0 1px 3px #000; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { padding: 19px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.kpi-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.kpi-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.kpi.warning .kpi-top i { background: var(--red-soft); }
.kpi strong { display: block; margin: 12px 0 4px; font-size: 27px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: 10px; }
.overview-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(310px,.85fr); gap: 18px; }
.overview-stack { display: grid; gap: 18px; }
.panel { padding: 22px; }
.centres { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }
.centre { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; cursor: pointer; transition: .18s ease; }
.centre:hover { transform: translateY(-2px); border-color: #b5a99a; }
.centre.active { border-color: var(--red); background: #fff8f5; box-shadow: 0 0 0 2px rgba(156,36,28,.08); }
.centre:focus-visible { outline: 3px solid rgba(156,36,28,.22); outline-offset: 2px; }
.centre-head { display: flex; align-items: center; justify-content: space-between; }
.centre-head h3 { margin: 0; font-size: 15px; }
.centre-head span { color: var(--green); font-size: 10px; font-weight: 700; }
.centre-state { display: inline-flex; align-items: center; gap: 5px; }.centre-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.centre dl { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 18px 0 12px; }
.centre dt { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.centre dd { margin: 4px 0 0; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.progress { height: 6px; overflow: hidden; border-radius: 10px; background: #e5e0d8; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--red); }
.flow { display: grid; grid-template-columns: repeat(6,1fr); align-items: stretch; gap: 7px; }
.flow-step { position: relative; min-width: 0; padding: 14px 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.flow-step:not(:last-child)::after { content: ''; position: absolute; z-index: 2; right: -8px; top: 27px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
.flow-step:not(:last-child)::before { content: ''; position: absolute; z-index: 3; right: -2px; top: 32px; width: 4px; height: 4px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg); }
.flow-step b, .flow-step span { display: block; }
.flow-step b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-step span { margin-top: 8px; color: var(--red); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.flow-step small { color: var(--muted); font-size: 9px; }
.risk-list, .schedule-list, .integration-list { display: grid; gap: 9px; }
.risk-item, .schedule-item, .integration-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfaf7; }
.risk-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 9px; color: var(--red); background: #f7e9e6; font-weight: 800; }
.risk-icon .ui-icon { width: 17px; height: 17px; }
.risk-item div, .schedule-item div, .integration-item div { min-width: 0; flex: 1; }
.risk-item b, .risk-item small, .schedule-item b, .schedule-item small, .integration-item b, .integration-item small { display: block; }
.risk-item b, .schedule-item b, .integration-item b { font-size: 12px; }
.risk-item small, .schedule-item small, .integration-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.severity { font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--red); }
.schedule-time { flex: 0 0 42px; font-weight: 800; font-size: 11px; font-variant-numeric: tabular-nums; }
.integration-item { padding: 9px 11px; }
.integration-logo { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: #ededeb; font-size: 9px; font-weight: 900; }
.status-dot { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 9px; font-weight: 700; }
.status-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.integration-state { max-width: 110px; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.25; text-align: right; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 15px; }
.search-field { position: relative; flex: 1 1 240px; }
.search-field input, .field input, .field select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.search-field input { padding-left: 38px; }
.search-field > .ui-icon { position: absolute; z-index: 1; left: 12px; top: 12px; width: 17px; height: 17px; color: #777; pointer-events: none; }
.filter-select { min-height: 43px; padding: 9px 34px 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12px; }
.table-wrap { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 13px 15px; color: var(--muted); background: #f6f3ed; font-size: 9px; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px; border-top: 1px solid #ebe7df; vertical-align: middle; font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; transition: .12s; }
tbody tr:hover { background: #fbf7f3; }
.order-id { color: var(--red); font-weight: 800; }
.customer { min-width: 155px; }
.customer b, .customer small { display: block; }
.customer small { margin-top: 3px; color: var(--muted); }
.status-select { max-width: 155px; min-height: 34px; padding: 6px 26px 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 11px; font-weight: 700; }
.status-chip { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 20px; background: #eeeae2; font-size: 9px; font-weight: 800; white-space: nowrap; }
.status-chip.red { color: #8e211a; background: #f6e5e2; }
.status-chip.green { color: #245941; background: #e4f0e9; }
.status-chip.gold { color: #765719; background: #f3ead4; }
.empty-state { padding: 70px 20px; text-align: center; color: var(--muted); }

.production-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 18px; }
.day-tabs, .period-tabs, .role-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: #e9e4db; overflow-x: auto; }
.day-tab, .period-tab, .role-tab { flex: 1; min-width: max-content; padding: 8px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }
.day-tab.active, .period-tab.active, .role-tab.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(30,25,20,.08); }
.workstation { display: grid; grid-template-columns: 105px 1fr; min-height: 90px; border-top: 1px solid var(--line); }
.workstation:first-of-type { border-top: 0; }
.workstation-label { padding: 18px 13px 15px 0; }
.workstation-label b, .workstation-label small { display: block; }
.workstation-label small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.production-card { align-self: center; margin: 10px 0; padding: 12px 14px; border-left: 4px solid var(--red); border-radius: 8px; background: #f4e8e5; cursor: pointer; }
.production-card.gold { border-color: var(--grain); background: #f4eddc; }
.production-card.green { border-color: var(--green); background: #e8f0eb; }
.production-card b, .production-card small { display: block; }
.production-card small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.capacity-row { margin-bottom: 18px; }
.capacity-row div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 11px; font-weight: 700; }

.warehouse-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px; }
.stock-card { padding: 18px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.stock-card:hover,.stock-card:focus-visible { transform: translateY(-2px); border-color: #b8aa9c; box-shadow: var(--shadow); outline: none; }
.stock-card h3 { margin-bottom: 5px; font-size: 15px; }
.stock-card > small { color: var(--muted); }
.stock-number { margin: 19px 0 13px; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stock-number span { color: var(--muted); font-size: 11px; font-weight: 500; }
.stock-split { display: flex; gap: 4px; height: 8px; overflow: hidden; border-radius: 8px; }
.stock-split i { min-width: 3px; }
.stock-split i { background: var(--red); }.stock-split i:nth-child(2) { background: var(--grain); }.stock-split i:nth-child(3) { background: var(--green); }
.stock-meta { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font-size: 9px; }

.process-ribbon { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-bottom: 20px; overflow: hidden; border-radius: 14px; background: var(--line); }
.process-ribbon > div { position: relative; padding: 19px; background: #fff; }
.process-ribbon span { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 11px; border-radius: 50%; color: #fff; background: var(--ink); font-size: 12px; font-weight: 800; }
.process-ribbon b { display: block; font-size: 13px; }.process-ribbon small { color: var(--muted); font-size: 10px; }
.activity-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.movement-list { display: grid; gap: 2px; }.movement-row { display: grid; grid-template-columns: 52px 92px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 11px; }.movement-row:first-child { border-top: 0; }.movement-row > span,.movement-row small { color: var(--muted); }.movement-row small { display: block; margin-top: 3px; font-size: 9px; }.movement-row strong { font-variant-numeric: tabular-nums; }.modal-movements { margin: 22px 0; }

.mobile-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; margin-bottom: 20px; padding: 28px; color: #fff; background: var(--ink); border-radius: 18px; }
.mobile-intro h2 { margin-bottom: 9px; font-size: 27px; letter-spacing: -.03em; }.mobile-intro p { margin: 0; color: #b7b7b7; line-height: 1.55; font-size: 13px; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.principle { padding: 11px; border: 1px solid #3c3c3c; border-radius: 10px; }.principle b, .principle small { display: block; }.principle b { font-size: 11px; color: #f1dfbd; }.principle small { margin-top: 4px; color: #999; font-size: 9px; }
.role-tabs { margin-bottom: 20px; padding: 6px; background: #ddd7cc; }
.role-tab { min-height: 45px; }.role-tab.active { color: #fff; background: var(--red); }
.phone-stage { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,2vw,26px); align-items: start; margin-bottom: 28px; padding: clamp(18px,3vw,34px); background: #dfd8ca; border-radius: 18px; }
.phone-wrap > b { display: block; margin-bottom: 9px; text-align: center; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.phone { max-width: 270px; min-height: 485px; margin: 0 auto; padding: 9px; border: 4px solid #262626; border-radius: 30px; background: #161616; box-shadow: 0 16px 32px rgba(0,0,0,.2); }
.phone-screen { min-height: 460px; overflow: hidden; border-radius: 20px; background: #f8f5ee; }
.phone-top { display: flex; justify-content: space-between; padding: 15px 14px 11px; color: #fff; background: var(--red); font-size: 9px; }.phone-top strong { font-size: 11px; }
.phone-content { padding: 14px; }.phone-hello { margin-bottom: 14px; }.phone-hello span, .phone-hello b { display: block; }.phone-hello span { color: var(--muted); font-size: 9px; }.phone-hello b { margin-top: 4px; font-size: 16px; }
.phone-task { margin-bottom: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.phone-task small, .phone-task b { display: block; }.phone-task small { color: var(--red); font-size: 8px; font-weight: 800; text-transform: uppercase; }.phone-task b { margin: 5px 0; font-size: 11px; }.phone-task p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.phone-action { display:flex;align-items:center;justify-content:center;gap:6px;width: 100%; padding: 11px; border: 0; border-radius: 9px; color: #fff; background: var(--red); font-size: 10px; font-weight: 800; }
.scan-box { display: grid; min-height: 180px; place-items: center; padding: 18px; border: 2px dashed #bcb3a5; border-radius: 14px; background: #fff; text-align: center; }.scan-symbol { display: grid; width: 76px; height: 76px; place-items: center; margin: 0 auto 12px; border: 2px solid var(--ink); border-radius: 12px; font-size: 26px; }.scan-box b,.scan-box small { display:block; }.scan-box small { margin-top:5px;color:var(--muted);font-size:9px; }
.scan-symbol .ui-icon { width:30px;height:30px;stroke-width:1.6; }
.confirm-mark { display: grid; width: 68px; height: 68px; place-items: center; margin: 34px auto 15px; border-radius: 50%; color:#fff;background:var(--green);font-size:28px; }.confirm-copy { text-align:center; }.confirm-copy h3 { margin-bottom:7px;font-size:17px; }.confirm-copy p { color:var(--muted);font-size:10px;line-height:1.45; }.audit-line { margin-top:20px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:8px; }
.confirm-mark .ui-icon { width: 30px; height: 30px; stroke-width: 2.2; }
.phone-status { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: #fff; opacity: .8; }
.permission-table th:not(:first-child), .permission-table td:not(:first-child) { text-align: center; }
.permission-table td { padding: 11px 12px; }
.permission-badge { display: inline-flex; min-width: 52px; justify-content: center; padding: 4px 7px; border-radius: 20px; font-size: 8px; font-weight: 800; }
.permission-badge.full { color: var(--green); background: var(--green-soft); }.permission-badge.limited { color: #765719; background: #f3ead4; }.permission-badge.none { color: var(--muted); background: #eeebe5; }
.proposal-note { padding: 12px 15px; border-left: 4px solid var(--grain); background: #f3ead8; border-radius: 8px; color: #57482f; font-size: 11px; line-height: 1.5; }

.analytics-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }.chart-panel { padding: 22px; }
.bar-chart { display: flex; align-items: flex-end; gap: 18px; height: 235px; padding: 25px 10px 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 49px, #eee9e1 50px); }
.bar-group { display: flex; flex: 1; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; position: relative; }.bar-group i { display:block;width:min(24px,29%);border-radius:5px 5px 0 0; }.bar-group i.series-produced { background:var(--red); }.bar-group i.series-shipped { background:var(--grain); }.bar-group i.series-received { background:var(--green); }.bar-group b { position:absolute;bottom:-25px;font-size:9px; }.chart-legend { display:flex;flex-wrap:wrap;gap:18px;margin-top:33px;font-size:10px;color:var(--muted); }.chart-legend span::before { content:'';display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px; }.chart-legend .series-produced::before { background:var(--red); }.chart-legend .series-shipped::before { background:var(--grain); }.chart-legend .series-received::before { background:var(--green); }
.analytics-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 16px; padding: 12px; }
.donut-layout { display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center;min-height:225px; }.donut { display:grid;place-items:center;width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--green) 0 81%,var(--grain) 81% 92%,#ddd7ce 92%); }.donut::after { content:'81%';display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#fff;font-size:23px;font-weight:800; }.metric-list { display:grid;gap:12px; }.metric-row { display:flex;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid var(--line);font-size:11px; }.metric-row b { font-variant-numeric:tabular-nums; }

.future-hero { display:grid;grid-template-columns:1.15fr .85fr;min-height:280px;margin-bottom:22px;overflow:hidden;border-radius:20px;background:var(--ink);color:#fff; }.future-copy { padding:38px; }.future-copy .eyebrow { color:#e1c895; }.future-copy h1 { max-width:590px;font-size:clamp(34px,4vw,54px); }.future-copy p { max-width:600px;color:#bbb;line-height:1.55; }.future-map { position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(156,36,28,.35),transparent 50%),repeating-radial-gradient(circle at center,transparent 0 36px,rgba(255,255,255,.08) 37px 38px); }.future-map::before { content:'360°';display:grid;place-items:center;width:105px;height:105px;border:1px solid #7e6a46;border-radius:50%;font-size:25px;font-weight:800;color:#ead7b1;background:#211b18;box-shadow:0 0 0 20px rgba(201,169,110,.08); }.future-map span { position:absolute;padding:6px 9px;border-radius:20px;background:#fff;color:#222;font-size:8px;font-weight:800; }.future-map span:nth-child(1){top:18%;left:18%}.future-map span:nth-child(2){top:23%;right:13%}.future-map span:nth-child(3){bottom:18%;left:16%}.future-map span:nth-child(4){bottom:22%;right:13%}
.module-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:13px; }.module-card { position:relative;min-height:205px;padding:20px;border:1px solid var(--line);border-radius:15px;background:#fff;cursor:pointer;overflow:hidden;transition:.2s; }.module-card:hover { transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b6aa9b; }.module-card::after { content:'';position:absolute;right:-28px;bottom:-38px;width:105px;height:105px;border:1px solid #e7e0d5;border-radius:50%;box-shadow:0 0 0 15px #f5f1e9; }.module-number { position:relative;z-index:1;color:var(--red);font-size:10px;font-weight:800;letter-spacing:.12em; }.module-card h3 { position:relative;z-index:1;margin:28px 0 9px;max-width:190px;font-size:17px;line-height:1.2; }.module-card p { position:relative;z-index:1;color:var(--muted);font-size:10px;line-height:1.45; }.module-tags { position:absolute;z-index:2;left:20px;bottom:17px;display:flex;gap:5px; }.module-tags span { padding:5px 7px;border-radius:14px;background:#f0ece4;font-size:8px;font-weight:700; }.module-card.verified .module-tags span:first-child { color:var(--green);background:var(--green-soft); }

.detail-drawer { position:fixed;z-index:60;right:0;top:0;width:min(520px,100%);height:100%;padding:58px 32px 34px;background:#fff;box-shadow:-25px 0 55px rgba(0,0,0,.18);transform:translateX(105%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;overflow-y:auto; }.detail-drawer.open { transform:none;visibility:visible;transition-delay:0s; }.drawer-backdrop { position:fixed;z-index:50;inset:0;background:rgba(0,0,0,.36);backdrop-filter:blur(2px); }.drawer-close,.modal-close { position:absolute;right:20px;top:18px;width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:21px; }.drawer-title { padding-bottom:22px;border-bottom:1px solid var(--line); }.drawer-title h2 { margin:7px 0;font-size:27px;letter-spacing:-.03em; }.drawer-title p { margin:0;color:var(--muted);font-size:12px;line-height:1.5; }.detail-section { padding:22px 0;border-bottom:1px solid var(--line); }.detail-section h3 { margin-bottom:13px;font-size:13px; }.detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.detail-field span,.detail-field b { display:block; }.detail-field span { margin-bottom:4px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em; }.detail-field b { font-size:12px; }.timeline { display:grid;gap:11px; }.timeline div { position:relative;padding-left:22px;font-size:11px; }.timeline div::before { content:'';position:absolute;left:0;top:2px;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft); }.timeline div small { display:block;margin-top:3px;color:var(--muted);font-size:9px; }
.drawer-close,.modal-close { display: grid; place-items: center; }.drawer-close .ui-icon,.modal-close .ui-icon { width: 17px; height: 17px; }
.section-copy { margin: -5px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.inline-action { display: flex; align-items: center; gap: 9px; }.inline-action select { flex: 1; }
.modal-backdrop { position:fixed;z-index:70;inset:0;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.5);backdrop-filter:blur(3px); }.modal { position:relative;width:min(620px,100%);max-height:92vh;overflow-y:auto;padding:31px;border-radius:18px;background:#fff;box-shadow:0 25px 65px rgba(0,0,0,.3); }.modal h2 { margin-bottom:7px;font-size:25px; }.modal > div > p { color:var(--muted);font-size:12px;line-height:1.5; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:23px 0; }.field.full { grid-column:1/-1; }.field label { display:block;margin-bottom:6px;font-size:10px;font-weight:800; }.field .error { display:none;margin-top:4px;color:var(--red);font-size:9px; }.field.invalid input,.field.invalid select { border-color:var(--red); }.field.invalid .error { display:block; }.form-actions { display:flex;justify-content:flex-end;gap:9px; }.success-panel { padding:25px 0 5px;text-align:center; }.success-panel .confirm-mark { margin-top:0; }.success-panel h2 { margin-bottom:7px; }.success-panel p { max-width:390px;margin:0 auto 20px; }
.search-modal input { width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:11px;font-size:16px; }.search-results { display:grid;gap:7px;margin-top:14px; }.search-result { display:flex;align-items:center;gap:11px;width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;text-align:left; }.search-result:hover { background:#f8f4ed; }.search-result span { display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#eee8dd;color:var(--red);font-weight:800; }.search-result span .ui-icon { width:17px;height:17px; }.search-result b,.search-result small { display:block; }.search-result small { margin-top:3px;color:var(--muted);font-size:9px; }
.toast { position:fixed;z-index:90;right:26px;bottom:26px;max-width:360px;padding:13px 17px;border-radius:10px;color:#fff;background:var(--ink);box-shadow:var(--shadow);font-size:11px;font-weight:700;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s; }.toast.show { opacity:1;transform:none; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 210px minmax(0,1fr); }
  .topbar { gap: 12px; padding: 0 16px; }.brand { min-width: 180px; }.global-search { width: 44px; }.global-search span:nth-child(2),.global-search kbd,.user-button b { display:none; }
  .module-grid { grid-template-columns:repeat(3,1fr); }.warehouse-grid { grid-template-columns:repeat(2,1fr); }.centres { grid-template-columns:1fr; }.flow { grid-template-columns:repeat(3,1fr); }.flow-step:nth-child(3)::after,.flow-step:nth-child(3)::before { display:none; }
  .phone { min-height:440px; }.phone-screen { min-height:415px; }
}

@media (max-width: 820px) {
  .app-shell { display:block; }.topbar { height:66px; }.mobile-menu { display:block; }.brand { min-width:auto; }.brand-divider,.brand-product { display:none; }.brand-mark { width:64px; }.workspace-switch { margin-left:auto; }.workspace-tab { padding:8px 11px; }.workspace-tab span,.topbar-actions .location-select,.topbar-actions .user-button,.icon-button { display:none; }.topbar-actions { margin-left:0; }.global-search { width:38px;padding:9px; }
  .sidebar { position:fixed;top:66px;left:0;width:270px;height:calc(100vh - 66px);transform:translateX(-105%);transition:.25s;box-shadow:20px 0 40px rgba(0,0,0,.25); }.sidebar.open { transform:none; }
  .mobile-location { display: grid; gap: 6px; margin: 14px 10px 0; padding-top: 14px; border-top: 1px solid #303030; color: #aaa; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.mobile-location select { width: 100%; padding: 10px 30px 10px 11px; border: 1px solid #444; border-radius: 9px; color: #fff; background: #242424; font-size: 12px; text-transform: none; letter-spacing: 0; }
  main { padding:24px 18px 55px; }.page-head { align-items:flex-start; }.hero-content { width:78%;padding:30px; }.kpi-grid { grid-template-columns:repeat(2,1fr); }.overview-grid,.production-layout,.activity-layout,.mobile-intro,.analytics-grid { grid-template-columns:1fr; }.module-grid { grid-template-columns:repeat(2,1fr); }.future-hero { grid-template-columns:1fr; }.future-map { min-height:220px; }.phone-stage { grid-template-columns:repeat(2,1fr);gap:14px;padding:18px; }.phone-wrap:last-child { grid-column:1/-1; }.phone { border-width:3px;border-radius:24px;padding:6px; }.phone-screen { border-radius:16px; }.phone-content { padding:10px; }.phone-task { padding:8px; }.donut-layout { grid-template-columns:140px 1fr; }
  table.responsive-table { display:block;min-width:0;padding:0 12px;background:var(--warm); }
  .responsive-table thead { display:none; }.responsive-table tbody { display:grid;gap:10px; }.responsive-table tr { display:block;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff; }.responsive-table td { display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border:0;border-top:1px solid #eee9e1;font-size:11px; }.responsive-table td:first-child { border-top:0; }.responsive-table td::before { content:attr(data-label);color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }.responsive-table td[colspan] { display:block; }.responsive-table td[colspan]::before { display:none; }.responsive-table .customer { min-width:0; }.responsive-table .status-select { width:100%;max-width:none; }
}

@media (max-width: 560px) {
  .topbar { padding:0 10px;gap:7px; }.workspace-tab { font-size:11px;padding:8px; }.brand-mark { width:57px;height:30px; }.page-head { display:block; }.page-actions { margin-top:15px; }.hero { min-height:430px; }.hero::before { background:linear-gradient(180deg,rgba(10,10,10,.84) 0%,rgba(10,10,10,.67) 58%,rgba(10,10,10,.25)),url('assets/mjm-wheat-hero.png') 62% center/cover; }.hero-content { width:100%;padding:28px 23px; }.hero h1 { font-size:40px; }.hero-date { left:23px;right:auto; }.kpi-grid { grid-template-columns:1fr 1fr;gap:8px; }.kpi { padding:15px; }.kpi strong { font-size:22px; }.flow { grid-template-columns:1fr 1fr; }.flow-step:nth-child(3)::after,.flow-step:nth-child(3)::before { display:block; }.flow-step:nth-child(2)::after,.flow-step:nth-child(2)::before,.flow-step:nth-child(4)::after,.flow-step:nth-child(4)::before { display:none; }.module-grid,.warehouse-grid { grid-template-columns:1fr; }.module-card { min-height:185px; }.process-ribbon { grid-template-columns:1fr 1fr; }.role-tabs { display:grid;grid-template-columns:1fr 1fr; }.phone-stage { grid-template-columns:1fr;gap:22px;padding:22px; }.phone-wrap:last-child { grid-column:auto; }.phone { width:260px;min-height:470px; }.phone-screen { min-height:445px; }.phone-wrap:not(:first-child) .phone { min-height:390px; }.permission-table { min-width:0; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.modal { padding:28px 20px; }.detail-drawer { padding:55px 21px 30px; }.detail-grid { grid-template-columns:1fr 1fr; }.inline-action { align-items:stretch;flex-direction:column; }.future-copy { padding:29px 23px; }.future-copy h1 { font-size:39px; }.future-map { min-height:210px; }.bar-chart { gap:8px; }.donut-layout { grid-template-columns:1fr;text-align:center; }.donut { margin:0 auto; }.toolbar .button { flex:1; }.table-wrap { margin-left:-18px;margin-right:-18px;border-radius:0;border-left:0;border-right:0; } th,td { padding:12px 10px; }
  .order-toolbar .search-field { flex-basis: 100%; }.movement-row { grid-template-columns: 46px 74px minmax(0,1fr); gap: 8px; }.movement-row strong { grid-column: 3; }.stock-meta { font-size: 10px; }
  table.responsive-table { display:block;min-width:0;padding:0 18px;background:var(--warm); }
  .responsive-table thead { display:none; }.responsive-table tbody { display:grid;gap:10px; }.responsive-table tr { display:block;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff; }.responsive-table td { display:grid;grid-template-columns:94px minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border:0;border-top:1px solid #eee9e1;font-size:11px; }.responsive-table td:first-child { border-top:0; }.responsive-table td::before { content:attr(data-label);color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }.responsive-table td[colspan] { display:block; }.responsive-table td[colspan]::before { display:none; }.responsive-table .customer { min-width:0; }.responsive-table .status-select { width:100%;max-width:none; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }