/* MovYn design layer. Loaded after erp-base.css and only restyles: navy shell, flat white surfaces,
   thin lines, small radii. Orange is an accent for marks only, because white text on it fails contrast. */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root,
body,
body.coal-mode,
body.fertilizer-mode,
body.container-mode {
    --mv-navy: #0B2545;
    --mv-navy-2: #13315C;
    --mv-navy-3: #1E3A60;
    --mv-orange: #F26B1D;
    --mv-bg: #F4F6FA;
    --mv-tint: #EEF1F6;
    --mv-line: #D5DCE6;
    --mv-line-soft: #E4E9F0;
    --mv-field: #98A5B8;
    --mv-ink: #15233A;
    --mv-ink-soft: #33445A;
    --mv-muted: #4A5A70;
    --mv-on-navy: #C9D3E3;
    --mv-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mv-display: "Poppins", "Inter", "Segoe UI", system-ui, sans-serif;
    --mv-radius: 8px;
    --mv-radius-sm: 6px;

    /* Existing names, so every older screen picks up the brand. */
    --bg: var(--mv-bg);
    --bg-soft: #FFFFFF;
    --surface: #FFFFFF;
    --surface-strong: #FFFFFF;
    --surface-tint: var(--mv-tint);
    --ink: var(--mv-ink);
    --ink-soft: var(--mv-ink-soft);
    --muted: var(--mv-muted);
    --line: var(--mv-line);
    --line-strong: #B8C3D3;
    --accent: var(--mv-navy);
    --accent-strong: var(--mv-navy-2);
    --accent-soft: rgba(11, 37, 69, .08);
    --accent-fog: rgba(11, 37, 69, .16);
    --success: #1B7A54;
    --warn: #8A5A0C;
    --danger: #B3372E;
    --shadow-sm: 0 1px 2px rgba(11, 37, 69, .06);
    --shadow: 0 1px 2px rgba(11, 37, 69, .06);
    --shadow-md: 0 8px 24px rgba(11, 37, 69, .14);
    --shadow-lg: 0 12px 32px rgba(11, 37, 69, .18);
    --radius-xs: 6px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --vf-accent: var(--mv-navy);
    --vf-radius: 6px;
    --vf-input-h: 34px;
    --vf-gap: 10px;
    --top-bar-height: 56px;
    --line-mark: var(--mv-orange);
}
body.fertilizer-mode { --line-mark: #2D6C57; }
body.coal-mode { --line-mark: #28506F; }
body.container-mode { --line-mark: #5A3D8A; }

html { scroll-behavior: auto; }
body,
body.coal-mode,
body.fertilizer-mode,
body.container-mode {
    background: var(--mv-bg);
    color: var(--mv-ink);
    font-family: var(--mv-body);
    font-size: 13px;
    line-height: 1.45;
}

/* ── Type ── */
.page-flow h1, .page-flow h2, .page-flow h3, .page-flow h4,
.sidebar-brand h1, .hero h2, .panel h3, .login-card h1, .topbar h1, .section-title, .choice-card h4,
.setup-admin-header h2, .setup-admin-register h3, .setup-admin-drawer h3 {
    font-family: var(--mv-display);
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.25;
    color: var(--mv-navy);
}
.panel h3, .coal-page-title h3, .fert-page-title h3, .section-title, .hero h2, .hero-card h2 { font-size: 18px; }
.setup-admin-header h2 { font-size: 20px; }
.setup-admin-register h3, .setup-admin-drawer h3, .choice-card h4, .permission-card h4 { font-size: 15px; }
.hero-card.accent h2, .hero-card.accent .stat-value { color: #FFFFFF; }
.section-label, .eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--mv-muted);
}
.meta, .subtle, .nav-copy, .coal-page-title p, .fert-page-title p, .setup-muted { font-size: 13px; color: var(--mv-muted); }
.coal-secondary, .fert-secondary, .coal-filter-meta { font-size: 12px; color: var(--mv-muted); }
.coal-kpi span, .coal-summary-pill span, .fert-summary-card span, .coal-context-item span, .fert-context-item span,
.coal-impact-card span, .setup-context-item span {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mv-muted);
}
code { border-radius: 4px; background: var(--mv-tint); }

/* ── Surfaces: flat white, one thin line ── */
.sidebar, .topbar, .panel, .stat, .hero-card, .login-card, .module-card, .metric-card,
.coal-surface, .fert-surface, .choice-card, .permission-card, .list-item, .mini-stat, .highlight-note,
.setup-admin-header, .setup-admin-register, .setup-admin-drawer,
.coal-filter-strip, .fert-filter-strip, .fert-selection-strip, .fert-impact-strip,
.coal-kpi, .coal-summary-pill, .fert-summary-card, .coal-context-strip, .fert-context-strip,
.coal-inline-preview, .coal-preview-card, .coal-selection-bar, .coal-impact-bar, .coal-impact-card, .fert-inline-preview,
.coal-report-link, .setup-register-toolbar, .setup-helper-box, .setup-feedback-item, .setup-context-item, .setup-rule-preview,
.setup-empty-state, .empty-state, .helper {
    background: #FFFFFF;
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-radius);
    box-shadow: none;
    backdrop-filter: none;
}
.coal-filter-strip, .fert-filter-strip, .fert-selection-strip, .fert-impact-strip, .coal-context-strip, .fert-context-strip,
.setup-register-toolbar, .setup-helper-box { background: #FAFBFD; }
.panel::before, .panel::after, .stat::before, .metric-card::before, .nav-card::after { content: none; }
.panel .panel { background: #FFFFFF; }
.panel, .hero-card, .login-card { padding: 14px 16px; }
.stat, .metric-card { min-height: 0; padding: 12px 14px; }
.stat-value { font-size: 24px; letter-spacing: -.01em; }
.metric-card strong { font-size: 20px; letter-spacing: -.01em; }
.mini-stat { padding: 10px 12px; }
.mini-stat strong { font-size: 18px; letter-spacing: -.01em; }
.coal-kpi, .coal-summary-pill, .fert-summary-card { min-width: 104px; padding: 7px 12px; border-radius: var(--mv-radius-sm); }
.coal-kpi strong, .coal-summary-pill strong, .fert-summary-card strong { font-size: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hero-card.accent { background: var(--mv-navy); border-color: var(--mv-navy); color: #FFFFFF; }
.hero-card.accent .eyebrow, .hero-card.accent p, .hero-card.accent .subtle { color: var(--mv-on-navy); }
.hero-card.accent .list-item { background: var(--mv-navy-2); border-color: var(--mv-navy-3); color: var(--mv-on-navy); }
.danger-zone { background: #FFF7F5; border-color: rgba(179, 55, 46, .3); }
.danger-zone .list-item { background: #FFFFFF; }
.danger-zone .panel-head h3, .danger-zone .workspace-title h3 { color: #8E2A22; }
.panel-head { padding-bottom: 8px; margin-bottom: 10px; border-bottom-color: var(--mv-line-soft); }
.empty-state strong { font-size: 14px; }

/* ── App frame: slim navy bar, full width ── */
.shell { max-width: none; padding: 0 var(--shell-gutter) var(--shell-gutter); }
.main-menu-bar {
    position: sticky;
    top: 0;
    z-index: 45;
    min-height: var(--top-bar-height);
    margin: 0 calc(var(--shell-gutter) * -1);
    padding: 0 var(--shell-gutter);
    gap: 2px;
    flex-wrap: nowrap;
    background: var(--mv-navy);
    border: 0;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(11, 37, 69, .25);
    backdrop-filter: none;
}
.app-shell { margin-top: 12px; gap: 12px; min-height: 0; }
.content-shell, .page-flow { gap: 12px; }
.main-menu-bar .top-nav-brand {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 9px;
    max-width: none;
    min-height: 0;
    padding: 0 14px 0 0;
    border: 0;
    color: #FFFFFF;
    overflow: visible;
}
.mv-wordmark { font-family: var(--mv-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: #FFFFFF; }
.mv-wordmark span { color: var(--mv-orange); }
.mv-company {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 200px;
    margin-right: 10px;
    padding-left: 12px;
    border-left: 1px solid var(--mv-navy-3);
    color: var(--mv-on-navy);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main-menu-bar .top-nav-link {
    flex: none;
    min-height: var(--top-bar-height);
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mv-on-navy);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition: color .12s ease, background .12s ease;
}
.main-menu-bar .top-nav-link:hover { background: var(--mv-navy-2); color: #FFFFFF; transform: none; box-shadow: none; }
.main-menu-bar .top-nav-link.active {
    background: transparent;
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--mv-orange);
}
.top-nav-user { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; padding-left: 10px; }
.top-nav-username { color: #FFFFFF; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.main-menu-bar .mv-logout, .main-menu-bar .mv-logout:hover {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #5B7090;
    border-radius: var(--mv-radius-sm);
    background: transparent;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
    filter: none;
    cursor: pointer;
}
.main-menu-bar .mv-logout:hover { background: var(--mv-navy-2); }
.field-tips-toggle, .field-tips-toggle:hover {
    width: 28px;
    height: 28px;
    min-height: 0;
    border: 1px solid #5B7090;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    font: italic 700 13px/1 Georgia, serif;
    box-shadow: none;
    filter: none;
}
.field-tips-toggle[aria-pressed="true"] { background: #FFFFFF; border-color: #FFFFFF; color: var(--mv-navy); }
body.tips-on .field-tips-toggle .ftt-dot { background: var(--mv-orange); border-color: var(--mv-navy); }
.footer-note { margin-top: 8px; color: var(--mv-muted); font-size: 12px; }

/* ── Sidebar ── */
.sidebar { padding: 8px; background: #FFFFFF; }
.sidebar .section-label { display: flex; align-items: center; gap: 7px; padding: 4px 8px; margin-bottom: 4px !important; }
.sidebar .section-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--line-mark); }
.nav-section { padding: 0; border: 0; background: transparent; }
.nav-stack { gap: 1px; margin-top: 0; }
.nav-card, .nav-group-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--mv-radius-sm);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--mv-ink-soft);
    font-size: 13px;
    font-weight: 500;
    filter: none;
    transition: background .12s ease;
}
.nav-card strong { margin: 0; font-size: 13px; font-weight: inherit; }
.nav-card:hover, .nav-group-toggle:hover { background: var(--mv-tint); border: 0; box-shadow: none; transform: none; filter: none; }
.nav-card.active, .nav-card.active:hover, .nav-group-toggle.active {
    background: var(--accent-soft);
    color: var(--mv-navy);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--mv-orange);
}
.nav-card.active .nav-copy, .nav-card.active .section-label { color: var(--mv-muted); }
.nav-group-children { margin: 2px 0 4px 14px; padding: 0 0 0 8px; border-left: 1px solid var(--mv-line); }
.nav-child { padding: 4px 8px; color: var(--mv-muted); font-size: 12.5px; border-radius: 4px; }
.nav-child:hover { background: var(--mv-tint); color: var(--mv-ink); }
.nav-child.active { background: var(--accent-soft); color: var(--mv-navy); font-weight: 600; }
.sidebar-toggle { background: var(--mv-navy); border-color: var(--mv-navy); border-radius: var(--mv-radius); box-shadow: var(--shadow-md); }
.sidebar-close { background: #FFFFFF; border-radius: var(--mv-radius-sm); }
@media (min-width: 1281px) {
    .app-shell.has-sidebar { grid-template-columns: 224px minmax(0, 1fr); }
    .sidebar { top: calc(var(--top-bar-height) + 12px); max-height: calc(100vh - var(--top-bar-height) - 24px); }
}
@media (min-width: 1081px) {
    /* Lets sticky save bars and form headers work inside a panel. */
    .panel { overflow: visible; }
}
/* Wide tables scroll inside their own box instead of stretching the page. */
.page-flow > *, .coal-shell > *, .fert-shell > *, .section-shell > *, .workspace-stack > *, .panel-stack > *, .panel { min-width: 0; }
@media (max-width: 960px) {
    .mv-company { display: none; }
}

/* ── Buttons: primary navy, secondary white ── */
.btn, button {
    min-height: 32px;
    padding: 6px 12px;
    border-radius: var(--mv-radius-sm);
    background: var(--mv-navy);
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .12s ease, border-color .12s ease;
}
.btn:hover, button:hover { transform: none; filter: none; box-shadow: none; }
.btn:not(.secondary):hover, button[type="submit"]:not(.secondary):hover { background: var(--mv-navy-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.secondary, button.secondary {
    background: #FFFFFF;
    border: 1px solid var(--line-strong);
    color: var(--mv-navy);
    box-shadow: none;
}
.btn.secondary:hover, button.secondary:hover { background: var(--mv-tint); border-color: var(--line-strong); box-shadow: none; }
.danger-button, .danger-zone .secondary, .danger-zone .btn { background: #FFFFFF; border: 1px solid rgba(179, 55, 46, .45); color: #8E2A22; }
.danger-button:hover, .danger-zone .secondary:hover { background: #FBEDEB; }
.btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--mv-orange);
    outline-offset: 2px;
}
.coal-row-actions .btn, .coal-row-actions button, .fert-row-actions .btn, .fert-row-actions button {
    min-height: 28px;
    padding: 3px 9px;
    border-radius: var(--mv-radius-sm);
    font-size: 12px;
}
.coal-sticky-actions button[type="submit"] { min-width: 132px; letter-spacing: 0; }

/* ── Fields ── */
label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mv-ink-soft); }
form .field > label { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--mv-ink-soft); }
input, select, textarea {
    padding: 6px 9px;
    border: 1px solid var(--mv-field);
    border-radius: var(--mv-radius-sm);
    background: #FFFFFF;
    color: var(--mv-ink);
    box-shadow: none;
    font-size: 13px;
}
input:hover, select:hover, textarea:hover { border-color: var(--mv-muted); }
input:focus, select:focus, textarea:focus,
form .field > input:focus, form .field > select:focus, form .field > textarea:focus {
    outline: none;
    border-color: var(--mv-navy);
    box-shadow: 0 0 0 2px rgba(11, 37, 69, .2);
    background: #FFFFFF;
}
input::placeholder, textarea::placeholder { color: #6B7A8F; }
form .field > input, form .field > select, form .field > textarea { border: 1px solid var(--mv-field); border-radius: var(--mv-radius-sm); }
form .field > input[required], form .field > select[required], form .field > textarea[required] { border-color: var(--mv-field); background: #FFFFFF; }
form .field > input[readonly], form .field > textarea[readonly], input[readonly] { background: var(--mv-tint); border-color: var(--mv-line); color: var(--mv-ink-soft); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--mv-navy); }
td input, td select { min-height: 30px; padding: 4px 8px; border-radius: var(--mv-radius-sm); }
td input[type="checkbox"], td input[type="radio"] { min-height: 0; padding: 0; vertical-align: middle; }

/* ── Tables ── */
table { background: #FFFFFF; border: 1px solid var(--mv-line); border-radius: var(--mv-radius-sm); }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--mv-line-soft); font-size: 13px; }
thead th,
.coal-table-shell thead th, .fert-table-shell thead th, .setup-table-wrap thead th, .coal-inline-preview thead th, .coal-preview-card thead th {
    background: var(--mv-tint);
    color: var(--mv-ink-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid var(--mv-line);
    box-shadow: none;
}
tfoot th, tfoot td { background: var(--mv-tint); color: var(--mv-ink); font-weight: 600; }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover, tbody tr:nth-child(even):hover { background: #F7F9FC; }
.setup-table-wrap tbody tr:nth-child(even) td { background: transparent; }
.setup-table-wrap th, .setup-table-wrap td { padding: 6px 10px; font-size: 13px; }
.coal-table-shell, .fert-table-shell, .setup-table-wrap { background: #FFFFFF; border: 1px solid var(--mv-line); border-radius: var(--mv-radius-sm); }
.coal-table-shell table, .fert-table-shell table { border: 0; }

/* ── Status tags ── */
.chip, .badge, .coal-status, .coal-badge, .status-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    backdrop-filter: none;
}
.chip { background: #FFFFFF; border: 1px solid var(--mv-line); color: var(--mv-ink-soft); }
.status-badge { min-width: 0; }
.badge { background: var(--accent-soft); color: var(--mv-navy); border: 1px solid transparent; }
.badge.ghost, .coal-badge.ghost, .coal-status.ghost { background: var(--mv-tint); color: var(--mv-ink-soft); border-color: transparent; }
.badge.warn { background: #FBF0DC; color: #7A4F08; border-color: transparent; }
.coal-badge.info, .coal-status.info { background: var(--accent-soft); color: var(--mv-navy); border-color: transparent; }
.coal-badge.success, .coal-status.success, .status-badge.done, .chip.success { background: #E4F3EC; color: #155F41; border-color: transparent; }
.coal-badge.warn, .coal-status.warn, .status-badge.warn { background: #FBF0DC; color: #7A4F08; border-color: transparent; }
.coal-badge.danger, .coal-status.danger { background: #FBE9E7; color: #8E2A22; border-color: transparent; }

/* ── Tabs and small navigation ── */
.workspace-tabs a, .segmented-control a, .segmented-control button, .coal-workflow-tab, .fertilizer-tab, .erp-nav-tab, .setup-chip, .choice-chip, .toolbar-links a {
    min-height: 30px;
    padding: 5px 11px;
    border-radius: var(--mv-radius-sm);
    border: 1px solid var(--mv-line);
    background: #FFFFFF;
    color: var(--mv-ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
}
.segmented-control { padding: 2px; border-radius: var(--mv-radius-sm); box-shadow: none; }
.segmented-control a, .segmented-control button { border: 0; }
.workspace-tabs a.active, .segmented-control .active, .coal-workflow-tab.active, .fertilizer-tab.active, .erp-nav-tab.active {
    background: var(--mv-navy);
    border-color: var(--mv-navy);
    color: #FFFFFF;
    box-shadow: none;
}
.coal-report-link.active { background: var(--mv-navy); border-color: var(--mv-navy); box-shadow: none; }

/* ── Messages, dialogs, save bars ── */
.flash, .errors, .entry-saved-banner { border-radius: var(--mv-radius-sm); box-shadow: none; }
.form-error-summary { border-radius: var(--mv-radius-sm); }
.coal-dialog { border-radius: 10px; box-shadow: var(--shadow-lg); }
.coal-dialog::backdrop { background: rgba(11, 37, 69, .45); backdrop-filter: none; }
.coal-dialog-shell { background: #FFFFFF; }
.coal-dialog-actions { background: #FAFBFD; border-top-color: var(--mv-line); }
.coal-sticky-actions, form .coal-sticky-actions, .fert-bottom-bar.sticky {
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-radius);
    background: #FFFFFF;
    box-shadow: 0 -2px 8px rgba(11, 37, 69, .08);
    backdrop-filter: none;
}
.sidebar-overlay { background: rgba(11, 37, 69, .45); backdrop-filter: none; }
.toolbar-panel { border-radius: var(--mv-radius); box-shadow: var(--shadow-md); backdrop-filter: none; }

/* ── Older screens with their own page styles ── */
body .fbr-hero { padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--mv-line); border-radius: var(--mv-radius); box-shadow: none; }
body .fbr-kpi { border-radius: var(--mv-radius-sm); }
body .fbr-kpi.is-accent { background: var(--mv-navy); border-color: var(--mv-navy); }
body .fbr-hero-title h2 { font-size: 18px; }

/* Labels and column headers stay in normal case on every screen. */
label, th, thead th { text-transform: none !important; letter-spacing: 0 !important; }

body .bilty-workspace, body .twopay-workspace, body .ts-workspace { border-color: var(--mv-line); border-radius: var(--mv-radius); }
body .bilty-titlegroup h2, body .twopay-titlegroup h2, body .ts-titlegroup h2 { font-family: var(--mv-display); font-size: 18px; font-weight: 600; letter-spacing: -.005em; color: var(--mv-navy); }
body .bilty-summary-item span, body .bilty-footer-item span, body .bilty-field label,
body .twopay-summary-item span, body .twopay-footer-item span, body .twopay-field label, body .twopay-section-caption,
body .ts-summary-item span, body .ts-footer-item span, body .ts-field label, body .ts-section-caption {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mv-ink-soft);
}
body .voucher-section-caption { margin: 14px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mv-navy); }
body .fbr-eyebrow, body .fbr-kpi span { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body .fbr-kpi.is-accent span { color: var(--mv-on-navy); }
body .setup-breadcrumb { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body .setup-global-search, body .setup-register-filter, body .setup-source-scope-search { padding: 6px 10px; border: 1px solid var(--mv-field); border-radius: var(--mv-radius-sm); background: #FFFFFF; }

/* Searchable dropdowns match the other fields. */
.erp-smart-select-trigger { min-height: 34px; padding: 5px 9px; border: 1px solid var(--mv-field); border-radius: var(--mv-radius-sm); background: #FFFFFF; box-shadow: none; }
.erp-smart-select-trigger:hover { border-color: var(--mv-muted); background: #FFFFFF; }
.erp-smart-select-popover, .erp-smart-select-sheet { border: 1px solid var(--mv-line); border-radius: var(--mv-radius); box-shadow: var(--shadow-md); backdrop-filter: none; }
.erp-smart-select-backdrop { background: rgba(11, 37, 69, .45); backdrop-filter: none; }
.erp-smart-select-trigger-placeholder { color: #5F6E83; }
.erp-crumb-sep { color: var(--mv-muted); }

/* Digits line up only where amounts stack; everywhere else hyphens in dates and codes keep normal spacing. */
.amount, td.amount, th.amount, tfoot td, tfoot th, input[type="number"],
td[style*="text-align:right"], td[style*="text-align: right"] { font-variant-numeric: tabular-nums; }

/* Form headers stay on screen under the top bar. Below this width their panel scrolls sideways, so they sit at its top. */
@media (min-width: 1081px) {
    body .bilty-workspace, body .twopay-workspace, body .ts-workspace { overflow: visible; }
}
@media (max-width: 1080px) {
    body .bilty-topbar, body .twopay-topbar, body .ts-topbar { top: 0; }
}

/* ── Register grid ── */
.coal-table-shell:has(> table[data-grid]), .fert-table-shell:has(> table[data-grid]), .table-shell:has(> table[data-grid]) {
    max-height: calc(100vh - var(--top-bar-height) - 24px);
    margin: 0;
    padding: 0;
    overflow: auto;
    overscroll-behavior-x: contain;
}
.coal-table-shell:has(> table[data-grid]) { border-radius: var(--mv-radius-sm); }
table[data-grid], .coal-table-shell.register-wide table[data-grid], .fert-table-shell.tight table[data-grid], .coal-table-shell.tight table[data-grid] {
    width: 100%;
    min-width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
table[data-grid] thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 7px 10px;
    white-space: nowrap;
    background: var(--mv-tint);
}
table[data-grid] tbody td {
    padding: 5px 10px;
    white-space: nowrap;
    vertical-align: middle;
}
table[data-grid] tbody td:not(:last-child) { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table[data-grid] .table-empty td { white-space: normal; max-width: none; }
table[data-grid] .coal-primary, table[data-grid] .fert-primary { font-weight: 600; }
table[data-grid] .coal-secondary, table[data-grid] .fert-secondary { margin-top: 0; line-height: 1.35; }
table[data-grid].erp-compact .coal-secondary, table[data-grid].erp-compact .fert-secondary { display: none; }
table[data-grid] .coal-row-actions, table[data-grid] .fert-row-actions { flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
table[data-grid] td:last-child form { display: inline-block; margin: 0; }
table[data-grid] td .btn, table[data-grid] td button { min-height: 26px; padding: 2px 9px; font-size: 12px; white-space: nowrap; }

.erp-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.erp-sort:hover { color: var(--mv-navy); text-decoration: underline; text-underline-offset: 2px; }
.erp-sort__mark { font-size: 10px; color: #5A6980; }
.erp-sort.is-active { color: var(--mv-navy); }
.erp-sort.is-active .erp-sort__mark { color: var(--mv-orange); }
th.amount .erp-sort { flex-direction: row-reverse; }

table.erp-frozen .erp-freeze-left, table.erp-frozen .erp-freeze-right { position: sticky; z-index: 2; background: #FFFFFF; }
table.erp-frozen thead .erp-freeze-left, table.erp-frozen thead .erp-freeze-right { z-index: 4; background: var(--mv-tint); }
table.erp-frozen tbody tr:hover .erp-freeze-left, table.erp-frozen tbody tr:hover .erp-freeze-right { background: #F7F9FC; }
table.erp-frozen .erp-freeze-right { right: 0; box-shadow: inset 1px 0 0 var(--mv-line); }
table.erp-frozen .erp-freeze-edge { box-shadow: inset -1px 0 0 var(--mv-line); }

table.erp-frozen td.erp-menu-open, td.erp-menu-open { z-index: 6; }
.erp-grid-bar { display: flex; justify-content: flex-end; gap: 8px; }
.erp-grid-bar--inline { display: inline-flex; }
.erp-menu { position: relative; display: inline-block; }
.erp-menu__button { min-width: 30px; }
td .erp-menu__button { padding: 2px 8px; font-size: 14px; font-weight: 700; line-height: 1; }
.erp-menu__panel {
    position: fixed;
    z-index: 60;
    display: grid;
    gap: 1px;
    min-width: 170px;
    max-height: min(420px, calc(100vh - 32px));
    padding: 4px;
    overflow: auto;
    background: #FFFFFF;
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-radius);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}
.erp-menu__panel[hidden] { display: none; }
table[data-grid] .erp-menu__panel .btn, table[data-grid] .erp-menu__panel button, table[data-grid] .erp-menu__panel form {
    display: block;
    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--mv-ink);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}
table[data-grid] .erp-menu__panel form { padding: 0; }
table[data-grid] .erp-menu__panel .btn:hover, table[data-grid] .erp-menu__panel button:hover { background: var(--mv-tint); }
.erp-menu__check { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--mv-ink); cursor: pointer; }
.erp-menu__check:hover { background: var(--mv-tint); }
.erp-menu__check input { flex: none; }
.erp-menu__check--split { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--mv-line-soft); border-radius: 0; }
.erp-menu__reset { margin-top: 4px; }

.erp-filter-more { display: none !important; }
.register-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.register-pager__count, .register-pager__page { color: var(--mv-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.register-pager__nav { display: flex; align-items: center; gap: 10px; }
.btn.is-disabled { opacity: .5; pointer-events: none; }
.coal-register-footer:has(.register-pager), .fert-register-footer:has(.register-pager) { flex-wrap: wrap; }

/* Descriptions sit behind the tips button on registers, so the rows start higher. */
body:not(.tips-on) .panel:has(table[data-grid]) .coal-page-title > p,
body:not(.tips-on) .panel:has(table[data-grid]) .fert-page-title > p { display: none; }
@media (min-width: 721px) {
    /* Title and figures share one line above the register. */
    .panel:has(table[data-grid]) .coal-page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
    .panel:has(table[data-grid]) .coal-page-title > .eyebrow { display: none; }
    .panel:has(table[data-grid]) .coal-kpi,
    .panel:has(table[data-grid]) .coal-summary-pill,
    .panel:has(table[data-grid]) .fert-summary-card { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; padding: 3px 10px; }
    .panel:has(table[data-grid]) .fert-summary-strip { gap: 6px; }
}

@media (max-width: 720px) {
    .coal-table-shell:has(> table[data-grid]), .fert-table-shell:has(> table[data-grid]), .table-shell:has(> table[data-grid]) { max-height: none; }
    table[data-grid] thead th { position: static; }
}
@media print {
    .coal-table-shell:has(> table[data-grid]), .fert-table-shell:has(> table[data-grid]), .table-shell:has(> table[data-grid]) { max-height: none; overflow: visible; }
    table[data-grid] th, table[data-grid] td { white-space: normal; position: static !important; }
    table[data-grid] .erp-sort__mark, .erp-grid-bar, .register-pager__nav, .erp-menu { display: none !important; }
    .erp-filter-more { display: none !important; }
}

/* ── Sidebar: icons, collapse, arrange ── */
.mv-nav-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--mv-muted); }
.nav-card, .nav-group-toggle { gap: 9px; justify-content: flex-start; }
.nav-card strong { flex: 1 1 auto; min-width: 0; }
.nav-card.active .mv-nav-icon, .nav-group-toggle.active .mv-nav-icon { color: var(--mv-navy); }
.nav-group-arrow { margin-left: auto; }
.sidebar .mv-side-head { justify-content: flex-start; }
.mv-side-title { flex: 1 1 auto; min-width: 0; }
.mv-side-btn, .mv-side-btn:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 3px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--mv-muted);
    font-size: 12px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
    filter: none;
}
.mv-side-btn:hover { background: var(--mv-tint); color: var(--mv-navy); }
.mv-side-btn .mv-nav-icon { color: inherit; }
.mv-side-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mv-line-soft); }
.mv-side-arrange { width: 100%; padding: 4px 10px; }
.mv-side-arrange[hidden] { display: none; }
.mv-side-tools { display: flex; gap: 6px; }
.mv-side-tools[hidden] { display: none; }
.mv-side-tools .btn { flex: 1 1 auto; min-height: 28px; padding: 3px 8px; font-size: 12px; }
.sidebar.is-arranging .nav-stack > a.nav-card, .sidebar.is-arranging .nav-group { cursor: grab; }
.sidebar.is-arranging .nav-card, .sidebar.is-arranging .nav-group-toggle { box-shadow: inset 0 0 0 1px var(--mv-line); margin-bottom: 2px; }
.sidebar.is-arranging .nav-group-arrow, .sidebar.is-arranging .nav-group-children { display: none; }
.sidebar .is-dragging { opacity: .45; }
.mv-move { display: inline-flex; flex: none; gap: 2px; margin-left: auto; }
.mv-move button, .mv-move button:hover {
    width: 22px;
    min-height: 22px;
    padding: 0;
    border: 1px solid var(--mv-line);
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--mv-ink-soft);
    font-size: 9px;
    line-height: 1;
    box-shadow: none;
    transform: none;
    filter: none;
}
.mv-move button:hover { background: var(--mv-tint); }
@media (min-width: 1281px) {
    html.mv-rail .app-shell.has-sidebar { grid-template-columns: 52px minmax(0, 1fr); }
    html.mv-rail .sidebar { z-index: 30; padding: 6px; overflow: visible; }
    html.mv-rail .sidebar .mv-side-head { justify-content: center; padding: 2px 0 6px; margin: 0 0 4px !important; border-bottom: 1px solid var(--mv-line-soft); }
    html.mv-rail .sidebar .mv-side-head::before, html.mv-rail .mv-side-title,
    html.mv-rail .nav-card strong, html.mv-rail .nav-group-arrow, html.mv-rail .mv-side-foot { display: none; }
    html.mv-rail .nav-card, html.mv-rail .nav-group-toggle { justify-content: center; padding: 7px 0; min-height: 34px; }
    html.mv-rail .nav-group > .nav-group-children, html.mv-rail .nav-group.open > .nav-group-children { display: none; }
    html.mv-rail .nav-group.is-flyout > .nav-group-children {
        position: fixed;
        z-index: 60;
        display: grid;
        gap: 1px;
        min-width: 210px;
        max-height: calc(100vh - 16px);
        margin: 0;
        padding: 6px;
        overflow: auto;
        background: #FFFFFF;
        border: 1px solid var(--mv-line);
        border-radius: var(--mv-radius);
        box-shadow: var(--shadow-md);
    }
}
@media (max-width: 1280px) {
    .mv-side-collapse { display: none; }
}

/* ── Forms: required marks, one save bar, busy state, keyboard ── */
.field:has(> :is([required], [aria-required="true"])) > label::after,
.bilty-field:has(> :is([required], [aria-required="true"])) > label::after,
.twopay-field:has(> :is([required], [aria-required="true"])) > label::after,
.ts-field:has(> :is([required], [aria-required="true"])) > label::after,
label.erp-req::after {
    content: " *";
    color: var(--danger);
    font-weight: 700;
}
.mv-save-bar, .fert-register-footer[style*="sticky"], .coal-sticky-actions, form .coal-sticky-actions, .fert-bottom-bar.sticky, .bilty-footer-bar, .twopay-footer-bar, .ts-footer-bar {
    position: sticky;
    bottom: 0;
    z-index: 7;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 0;
    border-top: 1px solid var(--mv-line);
    border-radius: 0;
    box-shadow: 0 -2px 8px rgba(11, 37, 69, .06);
}
.coal-sticky-actions > .coal-inline-actions, .fert-bottom-bar.sticky > .fert-inline-actions { margin-left: auto; }
.bilty-footer-bar, .twopay-footer-bar, .ts-footer-bar { justify-content: space-between; }
.bilty-footer-totals, .twopay-footer-totals, .ts-footer-totals { justify-content: flex-start; text-align: left; }
.mv-save-bar { margin-top: 12px; }
body .bilty-topbar, body .twopay-topbar, body .ts-topbar { position: static; }
button.is-busy, .btn.is-busy { opacity: .7; cursor: progress; }
button.is-busy::after, .btn.is-busy::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 7px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mv-spin .8s linear infinite;
}
@keyframes mv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.is-busy::after, .btn.is-busy::after { animation: none; } }
input:focus-visible, select:focus-visible, textarea:focus-visible, .erp-smart-select-trigger:focus-visible { outline: 2px solid var(--mv-navy); outline-offset: 1px; }
.mv-skip {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: var(--mv-radius-sm);
    background: #FFFFFF;
    color: var(--mv-navy);
    font-weight: 600;
    transform: translateY(-200%);
}
.mv-skip:focus { transform: none; }
.page-flow:focus { outline: none; }
.top-nav-help, .top-nav-help:hover {
    width: 28px;
    min-height: 0;
    height: 28px;
    padding: 0;
    border: 1px solid #5B7090;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    transform: none;
    filter: none;
}
.mv-help { width: min(440px, calc(100vw - 32px)); padding: 18px 20px; border: 1px solid var(--mv-line); border-radius: 10px; box-shadow: var(--shadow-lg); color: var(--mv-ink); }
.mv-help::backdrop { background: rgba(11, 37, 69, .45); }
.mv-help h3 { margin: 0 0 10px; font-family: var(--mv-display); font-size: 16px; font-weight: 600; color: var(--mv-navy); }
.mv-help dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0 0 14px; font-size: 13px; }
.mv-help dt, .mv-help dd { margin: 0; }
.mv-help kbd { padding: 2px 6px; border: 1px solid var(--mv-line); border-radius: 4px; background: var(--mv-tint); font: 600 11.5px var(--mv-body); white-space: nowrap; }
@media (max-width: 720px) {
    .mv-save-bar, .fert-register-footer[style*="sticky"], .coal-sticky-actions, form .coal-sticky-actions, .fert-bottom-bar.sticky, .bilty-footer-bar, .twopay-footer-bar, .ts-footer-bar { position: static; box-shadow: none; }
}
@media print {
    .mv-save-bar, .coal-sticky-actions, .fert-bottom-bar, .bilty-footer-bar .bilty-topbar-actions, .twopay-footer-bar .twopay-topbar-actions, .ts-footer-bar .ts-topbar-actions, .mv-skip, .top-nav-help, .mv-help { display: none !important; }
}

/* ── Printing a screen: just the content ── */
@media print {
    body, body.coal-mode, body.fertilizer-mode, body.container-mode { background: #FFFFFF; }
    .main-menu-bar, .sidebar, .sidebar-toggle, .footer-note, .coal-filter-strip, .fert-filter-strip { display: none !important; }
    .panel { overflow: visible; }
    .app-shell { margin-top: 0; }
}

/* A field's own display rule must not bring back a field marked hidden (Container bilty's SRF fields on ordinary orders). */
.field[hidden] { display: none; }

/* ── Top bar: search, user menu, phone menu ── */
.mv-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mv-nav-links { display: contents; }
.mv-nav-toggle { display: none; }
.mv-search { position: relative; flex: 0 1 230px; min-width: 120px; margin-left: auto; }
.mv-search__input, .mv-search__input:focus { width: 100%; height: 32px; min-height: 32px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; background: rgba(255, 255, 255, .1); color: #FFFFFF; font-size: 12.5px; }
.mv-search__input::placeholder { color: #D5DEEA; opacity: 1; }
.mv-search__input:focus { background: #FFFFFF; color: var(--mv-ink, #111827); }
.mv-search__input:focus::placeholder { color: #5B6778; }
.mv-search__list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: min(420px, 92vw); max-height: 70vh; margin: 0; padding: 4px 0; overflow-y: auto; border: 1px solid var(--mv-line-soft, #D9DEE6); border-radius: 8px; background: #FFFFFF; color: #111827; list-style: none; box-shadow: 0 12px 28px rgba(11, 37, 69, .22); }
.mv-search__list[hidden] { display: none; }
.mv-search-group { padding: 8px 12px 3px; color: #4B5563; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.mv-search-note { padding: 10px 12px; color: #4B5563; font-size: 12.5px; }
.mv-search-option { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.mv-search-option span { min-width: 0; overflow: hidden; color: #4B5563; text-overflow: ellipsis; white-space: nowrap; }
.mv-search-option:hover, .mv-search-option.is-active { background: #EEF2F7; }
.top-nav-user { position: relative; margin-left: 0; }
.mv-user-button, .mv-user-button:hover { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 8px 3px 4px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; background: transparent; color: #FFFFFF; font-size: 12.5px; box-shadow: none; transform: none; }
.mv-user-button:hover { background: var(--mv-navy-2); }
.mv-user-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; color: var(--mv-navy); font-size: 11px; font-weight: 700; }
.mv-user-caret { font-size: 10px; }
.mv-user-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 220px; padding: 4px 0; border: 1px solid var(--mv-line-soft, #D9DEE6); border-radius: 8px; background: #FFFFFF; color: #111827; box-shadow: 0 12px 28px rgba(11, 37, 69, .22); }
.mv-user-menu[hidden] { display: none; }
.mv-user-menu__who { display: grid; gap: 1px; padding: 8px 14px 9px; border-bottom: 1px solid var(--mv-line-soft, #D9DEE6); font-size: 12.5px; }
.mv-user-menu__who span { color: #4B5563; font-size: 11.5px; }
.main-menu-bar .mv-user-menu__item, .main-menu-bar .mv-user-menu__item:hover { display: flex; align-items: center; justify-content: space-between; width: 100%; height: auto; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 0; background: transparent; color: #111827; font-size: 12.5px; font-weight: 500; text-align: left; box-shadow: none; transform: none; }
.main-menu-bar .mv-user-menu__item:hover { background: #EEF2F7; }
.main-menu-bar .mv-user-menu__item[aria-pressed="true"] { font-weight: 700; }
.main-menu-bar .mv-user-menu__item kbd { padding: 0 5px; border: 1px solid #C7CCD4; border-radius: 3px; font-size: 10.5px; }
.main-menu-bar .mv-user-menu__item .ftt-dot { position: static; width: 8px; height: 8px; border: 0; border-radius: 50%; background: #C7CCD4; }
body.tips-on .main-menu-bar .mv-user-menu__item .ftt-dot { background: var(--mv-orange); }
@media (max-width: 1180px) {
    .mv-nav-toggle, .mv-nav-toggle:hover { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; background: transparent; box-shadow: none; transform: none; }
    .mv-nav-toggle span, .mv-nav-toggle span::before, .mv-nav-toggle span::after { display: block; width: 16px; height: 2px; background: #FFFFFF; }
    .mv-nav-toggle span { position: relative; }
    .mv-nav-toggle span::before, .mv-nav-toggle span::after { content: ""; position: absolute; left: 0; }
    .mv-nav-toggle span::before { top: -5px; }
    .mv-nav-toggle span::after { top: 5px; }
    .mv-nav-links { display: none; }
    .mv-nav-links.is-open { position: absolute; top: 100%; left: 0; z-index: 60; display: grid; width: min(280px, 90vw); padding: 6px; border-radius: 0 0 8px 0; background: var(--mv-navy); box-shadow: 0 12px 28px rgba(11, 37, 69, .3); }
    .main-menu-bar .mv-nav-links.is-open .top-nav-link { min-height: 40px; padding: 8px 12px; }
}
@media (max-width: 720px) {
    .mv-wordmark, .top-nav-username, .mv-user-caret { display: none; }
    .mv-search { flex: 1 1 auto; min-width: 0; }
    .mv-search__list { position: fixed; top: 58px; left: 4vw; right: 4vw; width: auto; }
    /* Summary tiles side by side, so the register itself starts on the first screen. */
    .coal-page-header .coal-kpi-row, .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
    .mv-search, .mv-nav-toggle { display: none !important; }
}
.main-menu-bar .mv-user-menu__item.field-tips-toggle { font-family: inherit; font-style: normal; }
.mv-ask { white-space: pre-line; }
.mv-ask p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--mv-ink, #111827); }
.mv-ask__actions { display: flex; justify-content: flex-end; gap: 8px; }
.mv-ask__actions [hidden] { display: none; }

/* ── Readable on every background (at least 4.5:1) ── */
.setup-badge-active { color: #166534 !important; }
.amount strong[style*="15803d"], .fin-balanced { color: #166534 !important; }

/* ── Phone and tablet: menus open over the page, tiles sit side by side ── */
@media (max-width: 1180px) {
    .main-menu-bar { overflow: visible; }
}
@media (max-width: 720px) {
    .mini-stats, .mini-stats.six-up, .mini-stats.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mini-stats .mini-stat strong { font-size: 17px; overflow-wrap: anywhere; }
    .coal-summary-strip, .coal-kpi-strip, .coal-kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Both phone menus live in the top bar, never over the page ── */
html { scroll-padding-top: calc(var(--top-bar-height, 56px) + 10px); }
.main-menu-bar .sidebar-toggle { position: static; flex: none; width: 36px; height: 36px; min-height: 36px; margin-left: 4px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; background: transparent; color: #FFFFFF; box-shadow: none; transform: none; }
.main-menu-bar .sidebar-toggle:hover { background: var(--mv-navy-2); }
.main-menu-bar .sidebar-toggle .mv-nav-icon { color: #FFFFFF; stroke: #FFFFFF; opacity: 1; }
@media (max-width: 720px) {
    /* A slim save bar: the button is enough, and the note under it hid what was being edited. */
    .ua-form-foot > :not(button) { display: none; }
}

/* ── Quality floor: motion, focus, high contrast, touch ──
   Checked against WCAG 2.2 AA and the Web Interface Guidelines. Visual only: nothing here changes a field, a
   value or a page's figures, and on an ordinary desktop screen only focus rings and heading line breaks differ. */

/* Less motion when the computer asks for it: toasts, fades and slides appear in their final state at once.
   Delays are kept, so the splash still clears itself on time. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Every control shows where the keyboard is. These hid their focus mark. */
.erp-smart-select-close:focus-visible { outline: 2px solid var(--mv-orange); outline-offset: 2px; }
.erp-smart-select-option:focus-visible,
body .salespoint-suggestions button:focus-visible { outline: 2px solid var(--mv-navy); outline-offset: -2px; }

/* The sticky top bar, register headers and save bars never cover the field being typed in. */
.coal-table-shell:has(> table[data-grid]), .fert-table-shell:has(> table[data-grid]), .table-shell:has(> table[data-grid]) { scroll-padding-top: 40px; }
@media (min-width: 721px) {
    html:has(:is(.mv-save-bar, .coal-sticky-actions, .fert-bottom-bar.sticky, .fert-register-footer[style*="sticky"], .bilty-footer-bar, .twopay-footer-bar, .ts-footer-bar)) { scroll-padding-bottom: 84px; }
}

/* Menus, lists and dialogs scroll on their own and do not drag the page behind them. */
.erp-menu__panel, .mv-search__list, .mv-user-menu, .erp-smart-select-popover, .erp-smart-select-sheet, .coal-dialog, .mv-help,
.toolbar-panel, .mv-nav-links.is-open, .sidebar.drawer-open, .nav-group.is-flyout > .nav-group-children, .salespoint-suggestions {
    overscroll-behavior: contain;
}

/* Headings break into even lines instead of leaving one word alone; paragraphs avoid a one-word last line. */
.page-flow :is(h1, h2, h3, h4), .section-title, .panel-head h3 { text-wrap: balance; }
.page-flow p, .empty-state p, .helper { text-wrap: pretty; }

/* Taps respond at once (no double-tap zoom wait) and show a soft navy flash. */
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(11, 37, 69, .14); }

/* Windows High Contrast: the system picks the colours, so shadows and fills that carried meaning are replaced
   by outlines and the system highlight. Inset outlines take no room, so nothing moves. */
@media (forced-colors: active) {
    :focus-visible, input:focus, select:focus, textarea:focus, .erp-smart-select-trigger:focus { outline: 2px solid Highlight !important; outline-offset: 2px !important; }
    .btn, button { outline: 1px solid ButtonText; outline-offset: -1px; }
    .chip, .badge, .coal-status, .coal-badge, .status-badge { outline: 1px solid CanvasText; outline-offset: -1px; }
    .main-menu-bar { outline: 1px solid CanvasText; outline-offset: -1px; }
    :is(.main-menu-bar .top-nav-link.active, .nav-card.active, .nav-group-toggle.active, .nav-child.active, .workspace-tabs a.active,
        .segmented-control .active, .coal-workflow-tab.active, .fertilizer-tab.active, .erp-nav-tab.active, .coal-report-link.active,
        .mv-search-option.is-active) {
        forced-color-adjust: none;
        background: Highlight !important;
        color: HighlightText !important;
    }
    :is(.nav-card.active, .nav-group-toggle.active, .nav-child.active, .coal-report-link.active) * { color: HighlightText !important; }
    .erp-sort.is-active { text-decoration: underline; text-underline-offset: 3px; }
    .mv-splash__bar, .mv-splash__track { forced-color-adjust: none; }
}

/* Phones and tablets: bigger targets for fingers. Column sort links get a taller invisible tap area that takes
   no room, so the header row does not move. */
@media (pointer: coarse) {
    .mv-move button, .mv-move button:hover { width: 32px; min-height: 32px; font-size: 11px; }
    .erp-sort { position: relative; }
    .erp-sort::after { content: ""; position: absolute; inset: -7px -4px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}
@media (max-width: 720px) and (pointer: coarse) {
    /* 16px text in fields stops iPhones zooming the whole page each time a field is tapped. It has to win over
       the smaller sizes some screens set inline, so it is marked important, on phones only. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .erp-smart-select-trigger { font-size: 16px !important; }
}