/* Field module — mobile-first. Reps use this on their phones. */

/* Store tiles (now anchor links — reset link styling so they look like cards) */
.tiles { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }

a.tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    text-decoration: none;          /* kill underline */
    color: inherit;                 /* kill link blue */
    transition: box-shadow .15s, transform .05s;
}
a.tile:hover { box-shadow: 0 4px 14px rgba(31,56,100,.12); }
a.tile:active { transform: scale(.995); }
a.tile,
a.tile:link,
a.tile:visited,
a.tile:hover,
a.tile:focus { text-decoration: none; }         /* belt-and-braces */

.tile-name { font-weight: 700; font-size: 17px; color: #1F3864; }
.tile-sub  { color: #6b7280; font-size: 13px; }

/* Health badge */
.badge {
    align-self: flex-start;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    text-decoration: none;
}
.badge.lg { font-size: 14px; padding: 6px 14px; }

/* Visit page */
.scorebar { margin: 8px 0 16px; }
.back { display: inline-block; margin-bottom: 8px; color: #1F3864; text-decoration: none; font-size: 14px; }
.back:hover { text-decoration: underline; }

.panel { background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 12px; color: var(--nexus-accent, #EE7326); }

.stack { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .stack { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.stack input, .stack select { padding: 12px; border: 1px solid #cbd2dd; border-radius: 8px; font-size: 16px; flex: 1; }

button.primary { padding: 12px 18px; background: var(--nexus-accent, #EE7326); color: #fff; border: 0; border-radius: 8px; font-size: 16px; cursor: pointer; }
button.primary:disabled { background: #f0b489; cursor: not-allowed; }

.hint { color: #999; font-size: 13px; margin-top: 6px; }

/* Issue log */
.issues { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.issue { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #eef0f4; border-radius: 8px; background: #fafbfc; }
.issue.done { opacity: .55; }
.issue .title { flex: 1; }
.issue .status { font-size: 12px; color: #666; }
.sev { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px; }
.sev-low { background: #7f8c8d; }
.sev-medium { background: #d9902b; }
.sev-high { background: #c0392b; }
button.link { background: none; border: 0; color: #1F3864; font-weight: 600; cursor: pointer; }

/* Order pad */
.grid.order td, .grid.order th { font-size: 14px; }
.grid.order .code { font-weight: 700; color: #1F3864; }
.grid.order .right { text-align: right; }
input.qty { width: 80px; padding: 8px; border: 1px solid #cbd2dd; border-radius: 6px; font-size: 16px; }

.notice { padding: 12px 14px; border-radius: 8px; margin: 12px 0; }
.notice.ok  { background: #e7f6ec; border: 1px solid #b9e2c6; color: #1e6b3a; }
.notice.err { background: #fdecea; border: 1px solid #f5c6c2; color: #a12a20; }

.order-cta { margin: 12px 0; }
.order-cta a { display: inline-block; padding: 12px 18px; background: #1F3864; color: #fff; border-radius: 8px; text-decoration: none; font-size: 16px; }
.order-cta a:hover { background: #182c50; }

/* Account timeline */
.timeline { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.tl-item { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid #eef0f4; border-radius: 8px; background: #fafbfc; }
.tl-type { flex: 0 0 auto; align-self: flex-start; font-size: 11px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 999px; background: #6b7280; }
.tl-visit { background: #2e9e5b; }
.tl-issue { background: #d9902b; }
.tl-order { background: #1F3864; }
.tl-note  { background: #6b7280; }
.tl-body { flex: 1; }
.tl-summary { font-weight: 600; color: #1F3864; }
.tl-detail { font-size: 13px; color: #444; margin-top: 2px; }
.tl-meta { font-size: 12px; color: #888; margin-top: 4px; }

/* Clickable dashboard cards — kill default link styling */
a.card-link,
a.card-link:link,
a.card-link:visited,
a.card-link:hover,
a.card-link:active {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .05s;
}
a.card-link * { text-decoration: none; }          /* no underline on children */
a.card-link h3 { color: var(--nexus-accent, #EE7326); margin: 0 0 6px; } /* keep the orange title */
a.card-link p  { color: #333; }                     /* body text, not purple */
a.card-link:hover { box-shadow: 0 4px 14px rgba(31,56,100,.12); }
a.card-link:active { transform: scale(.995); }
.card-go { margin-top: 10px; font-weight: 700; color: var(--nexus-accent, #EE7326); font-size: 14px; }
.card-disabled { opacity: .7; }
.card-disabled .card-go.muted { color: #999; font-weight: 600; }

/* ==== Append this to src/Nexus.Web/wwwroot/app.css ==== */

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f6f7f9; }
.login-card { width: 340px; background: #fff; border: 1px solid #e3e7ee; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 30px rgba(31,56,100,.08); }
.login-brand { font-size: 24px; font-weight: 800; color: #1F3864; }
.login-card input { padding: 12px; border: 1px solid #cbd2dd; border-radius: 8px; font-size: 16px; }
.login-card button.primary { padding: 12px; background: var(--nexus-accent, #EE7326); color: #fff; border: 0; border-radius: 8px; font-size: 16px; cursor: pointer; }
.login-demo { font-size: 12px; color: #666; margin-top: 8px; }
.login-demo ul { margin: 6px 0 0; padding-left: 16px; }
.login-demo code { background: #f0f2f5; padding: 1px 5px; border-radius: 4px; }

/* Sidebar user + logout */
.who { font-size: 13px; color: #fff; font-weight: 600; }
.who-role { font-size: 11px; color: #9fb0d0; margin-bottom: 8px; }
.logout { background: rgba(255,255,255,.12); color: #fff; border: 0; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; width: 100%; }
.logout:hover { background: rgba(255,255,255,.2); }

/* ==== Append to src/Nexus.Web/wwwroot/field.css (photo upload) ==== */
.photo-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #555; }
.photo-field span { font-weight: 600; color: #1F3864; }
.photo-thumbs { display: flex; gap: 10px; margin: 8px 0 12px; flex-wrap: wrap; }
.thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid #e3e7ee; }
.thumb.sm { width: 44px; height: 44px; border-radius: 8px; }
.issue .thumb.sm { flex: 0 0 auto; }

/* ==== Append to src/Nexus.Web/wwwroot/field.css (visit history) ==== */
.history { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.hist-item { border: 1px solid #eef0f4; border-radius: 10px; background: #fafbfc; padding: 12px; }
.hist-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-date { font-weight: 700; color: #1F3864; }
.hist-rep { color: #555; font-size: 13px; }
.hist-meta { color: #888; font-size: 12px; margin-top: 4px; }
.hist-item .photo-thumbs { margin-top: 8px; }

/* ============================================================
   Field mobile UX — append to src/Nexus.Web/wwwroot/field.css
   Single-screen rep experience: sticky header, tab switcher,
   big tap targets, inline order pad. Designed for iOS/Android
   phones + tablets (touch-first).
   ============================================================ */

/* Give the content area breathing room on phones and stop the
   desktop sidebar from squashing it (sidebar wraps on narrow). */
@media (max-width: 720px) {
    .shell { flex-direction: column; }
    .sidebar { width: auto; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
    .sidebar .brand { font-size: 16px; }
    .sidebar .tenant { margin: 0 8px 0 0; }
    .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .sidebar .role { margin: 0 0 0 auto; }
    .content { padding: 12px; }
}

/* Sticky store header */
.fx-head {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    background: #1F3864; color: #fff;
    margin: -12px -12px 12px; padding: 12px 14px;
}
.fx-back { color: #fff; text-decoration: none; font-size: 22px; line-height: 1; padding: 4px 6px; }
.fx-head-main { flex: 1; min-width: 0; }
.fx-head-name { font-weight: 800; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-head-sub { font-size: 12px; color: #b9c4dc; }
.fx-health { min-width: 40px; text-align: center; font-weight: 800; color: #fff; padding: 6px 10px; border-radius: 999px; font-size: 15px; }

/* Tab switcher (no page navigation) */
.fx-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.fx-tabs button {
    border: 1px solid #d7deea; background: #fff; color: #1F3864;
    padding: 12px 6px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.fx-tabs button.on { background: #1F3864; color: #fff; border-color: #1F3864; }

/* Cards */
.fx-card { background: #fff; border: 1px solid #e3e7ee; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.fx-card h3 { margin: 0 0 12px; color: var(--nexus-accent, #EE7326); font-size: 16px; }
.fx-muted { color: #6b7280; font-size: 14px; }
.fx-hint { color: #9aa3b2; font-size: 13px; margin-top: 8px; }
.fx-loading { padding: 24px; text-align: center; color: #6b7280; }

/* Inputs + buttons — 16px font stops iOS zoom-on-focus */
.fx-in { width: 100%; padding: 14px; border: 1px solid #cbd2dd; border-radius: 10px; font-size: 16px; margin-bottom: 10px; }
.fx-btn { border: 0; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; }
.fx-btn.primary { background: var(--nexus-accent, #EE7326); color: #fff; }
.fx-btn.primary:disabled { background: #f0b489; }
.fx-btn.big { width: 100%; padding: 16px; margin-top: 6px; }

/* Photo capture rows */
.fx-photo { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px dashed #cbd2dd; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; font-size: 15px; color: #1F3864; }
.fx-photo input { max-width: 46%; }
.fx-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.fx-thumbs img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; border: 1px solid #e3e7ee; }
img.mini { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }

/* Severity segmented control */
.fx-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.fx-seg button { border: 1px solid #cbd2dd; background: #fff; color: #333; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
.fx-seg button.on { color: #fff; border-color: transparent; }
.fx-seg button.on.sev-low { background: #7f8c8d; }
.fx-seg button.on.sev-medium { background: #d9902b; }
.fx-seg button.on.sev-high { background: #c0392b; }

/* Issues list */
.fx-issues { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-issues li { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #eef0f4; border-radius: 12px; background: #fafbfc; }
.fx-issues li.done {
    opacity: 1;
    background: #f8fafc;
    border-color: #d8e1eb;
}
.fx-issues li.done .ti strong { color: #40516b; }
.fx-issues li.done .ti small { color: #68768a; }
.fx-issues li.done .mini { opacity: 1; }
.fx-issues li.done .st {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    color: #1e6b3a;
    background: #e7f6ec;
    border-radius: 999px;
}
.fx-issues .ti { flex: 1; font-size: 15px; }
.fx-issues .st { color: #2e9e5b; font-weight: 800; }
.sev { font-size: 11px; font-weight: 800; color: #fff; padding: 3px 9px; border-radius: 999px; }
.sev-low { background: #7f8c8d; } .sev-medium { background: #d9902b; } .sev-high { background: #c0392b; }
.fx-resolve { border: 0; background: #eef4ff; color: #1F3864; font-weight: 700; padding: 8px 12px; border-radius: 8px; cursor: pointer; }

/* Inline order pad — stacked line cards (mobile friendly, no wide table) */
.fx-order { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.fx-order li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #eef0f4; border-radius: 12px; background: #fafbfc; }
.ol-info { flex: 1; min-width: 0; }
.ol-code { font-weight: 800; color: #1F3864; font-size: 13px; }
.ol-desc { font-size: 14px; }
.ol-meta { font-size: 12px; color: #888; }
.ol-qty { display: flex; align-items: center; gap: 6px; }
.ol-qty button { width: 38px; height: 38px; border: 1px solid #cbd2dd; background: #fff; border-radius: 10px; font-size: 20px; font-weight: 700; cursor: pointer; }
.ol-qty input { width: 56px; text-align: center; padding: 10px 4px; border: 1px solid #cbd2dd; border-radius: 10px; font-size: 16px; }
.fx-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 0; font-size: 16px; }

/* Health quick strip */
.fx-quick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px; }
.fx-band { color: #fff; font-weight: 800; padding: 6px 12px; border-radius: 999px; font-size: 14px; }
.fx-band.sm { font-size: 12px; padding: 3px 9px; }

/* Visit history */
.fx-hist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-hist li { border: 1px solid #eef0f4; border-radius: 12px; background: #fafbfc; padding: 12px; }
.fx-hist .hh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fx-hist .hd { font-weight: 700; color: #1F3864; }
.fx-hist .hm { color: #888; font-size: 12px; margin-top: 4px; }

/* Toast + inline errors */
.fx-toast { padding: 12px 14px; border-radius: 10px; margin: 0 0 12px; font-weight: 600; cursor: pointer; }
.fx-toast.ok { background: #e7f6ec; border: 1px solid #b9e2c6; color: #1e6b3a; }
.fx-toast.err { background: #fdecea; border: 1px solid #f5c6c2; color: #a12a20; }
.fx-inline-err { color: #a12a20; font-size: 14px; margin-top: 8px; }

/* ============================================================
   Store list (Field.razor) — mobile, append to field.css
   Touch-first cards, live search, health-band filter, and
   at-risk-first ordering so reps see problem stores first.
   ============================================================ */

.fxl-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.fxl-title { font-size: 22px; font-weight: 800; color: #1F3864; }
.fxl-sub { font-size: 13px; color: #6b7280; }

/* Search */
.fxl-search { position: relative; margin-bottom: 10px; }
.fxl-search .fx-in { margin: 0; padding-right: 40px; }
.fxl-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: 0; background: #eef0f4; color: #555; width: 30px; height: 30px; border-radius: 50%;
    font-size: 14px; cursor: pointer; }

/* Band filter chips */
.fxl-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.fxl-filters button { flex: 0 0 auto; border: 1px solid #d7deea; background: #fff; color: #1F3864;
    padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fxl-filters button.on { background: #1F3864; color: #fff; border-color: #1F3864; }

/* Store cards */
.fxl-list { display: flex; flex-direction: column; gap: 10px; }
.fxl-card { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid #e3e7ee;
    border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
    transition: box-shadow .12s, transform .05s; }
.fxl-card:active { transform: scale(.995); }
.fxl-card:hover { box-shadow: 0 4px 14px rgba(31,56,100,.10); }
.fxl-bar { width: 6px; flex: 0 0 6px; }
.fxl-body { flex: 1; min-width: 0; padding: 14px; }
.fxl-name { font-weight: 800; font-size: 17px; color: #1F3864; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxl-meta { font-size: 13px; color: #6b7280; margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.fxl-issues { background: #fdecea; color: #a12a20; font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.fxl-right { display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.fxl-score { min-width: 40px; text-align: center; color: #fff; font-weight: 800; font-size: 15px; padding: 6px 8px; border-radius: 999px; }
.fxl-chev { color: #c3cbd8; font-size: 24px; line-height: 1; }

.fxl-empty { text-align: center; padding: 40px 16px; }
.fxl-none { text-align: center; padding: 24px; }

/* FIELD CONSOLE WIDE WORKSPACE - AUTHORITATIVE */

/*
 * Visit, Issues, Order and History must fill the same application
 * content area. The Field store directory remains independently sized.
 */
body .content .fx-head,
body .content .fx-tabs,
body .content .fx-card,
body .content .fx-quick,
body .content .fx-toast,
body .content .oc-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body .content .fx-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body .content .fx-tabs > button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body .content .oc-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Store Department health breakdown */
.fx-department-health{display:grid;gap:14px}
.fx-department-health-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.fx-department-health-heading h3{margin:0;color:#1f3864}
.fx-department-health-heading p{margin:4px 0 0}
.fx-department-health-heading>span{padding:6px 9px;color:#64748b;background:#f1f5f9;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.fx-department-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.fx-department-health-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid #e1e7f0;border-radius:11px;background:#f8fafc}
.fx-department-health-row strong,.fx-department-health-row small{display:block}
.fx-department-health-row strong{color:#1f3864}
.fx-department-health-row small{margin-top:3px;color:#64748b}
@media(max-width:700px){.fx-department-health-grid{grid-template-columns:1fr}.fx-department-health-heading,.fx-department-health-row{align-items:flex-start}.fx-department-health-row{display:grid}}

/* Explainable health scores */
.fx-health-explain{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid #dce4ee;border-radius:10px;background:#fff}
.fx-health-explain.overall{margin:0 0 14px}
.fx-health-explain.compact{grid-column:1/-1;margin-top:2px}
.fx-health-explain summary{color:#1f3864;cursor:pointer;font-weight:800}
.fx-health-explain p{margin:9px 0 0;color:#64748b}
.fx-health-factor-list{display:grid;gap:7px;margin-top:10px}
.fx-health-factor{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid #edf1f5}
.fx-health-factor span,.fx-health-factor small{display:block}
.fx-health-factor small{margin-top:2px;color:#64748b;font-weight:400}
.fx-health-factor>strong{white-space:nowrap;color:#1f3864}
.fx-health-factor>strong.negative{color:#b42318}
.fx-health-factor>strong.neutral{color:#64748b}
.fx-health-factor.baseline,.fx-health-factor.total{font-weight:800}
.fx-health-factor.total{border-top:2px solid #dce4ee}

/* One visit, multiple on-site activities */
.sc-visit-required{display:grid;gap:4px;margin:14px 0;padding:13px 15px;border:1px solid #efcf8c;border-radius:11px;background:#fff7df}
.sc-visit-required strong{color:#8a5b00}
.sc-visit-required span{color:#6b7280;font-size:13px}

/* Customer Visit Schedule */
.vs-card{display:grid;gap:14px;margin-bottom:14px;padding:17px;background:#fff;border:1px solid #dce4ee;border-radius:14px}.vs-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.vs-heading h3{margin:0;color:#1f3864}.vs-heading p{margin:4px 0 0;color:#68768a}.vs-status{padding:6px 9px;border-radius:999px;background:#edf1f5;color:#5c6675;font-size:12px;font-weight:800;white-space:nowrap}.vs-status.overdue{background:#fdecea;color:#a12a20}.vs-status.grace,.vs-status.duetoday,.vs-status.duesoon{background:#fff4d8;color:#8a5b00}.vs-status.upcoming{background:#e7f6ec;color:#1e6b3a}.vs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.vs-grid label{display:grid;gap:5px}.vs-grid label>span{color:#40516b;font-size:12px;font-weight:800}.vs-grid select,.vs-grid input{box-sizing:border-box;width:100%;min-height:42px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;font:inherit}.vs-facts{display:flex;flex-wrap:wrap;gap:10px}.vs-facts span{padding:7px 10px;border-radius:9px;background:#f5f8fb;color:#64748b}.vs-facts strong{color:#1f3864}.vs-save{justify-self:start;padding:10px 14px;border:0;border-radius:9px;background:var(--nexus-accent, #EE7326);color:#fff;font-weight:800}.vs-message{margin:0;padding:9px 11px;border-radius:9px}.vs-message.ok{background:#e7f6ec;color:#1e6b3a}.vs-message.err{background:#fdecea;color:#a12a20}@media(max-width:800px){.vs-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.vs-heading,.vs-grid{display:grid}.vs-grid{grid-template-columns:1fr}}

/* Historical Packaging Health snapshots */
.fx-health-trend{display:grid;gap:14px}
.fx-health-trend-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.fx-health-trend-heading h3{margin:0;color:#f26a21}
.fx-health-trend-heading p{margin:4px 0 0}
.fx-trend-change{padding:6px 9px;border-radius:999px;font-size:.75rem;font-weight:800;white-space:nowrap}
.fx-trend-change.improved{color:#1e6b3a;background:#e7f6ec}
.fx-trend-change.declined{color:#a12a20;background:#fdecea}
.fx-trend-change.unchanged{color:#5f6b7a;background:#edf1f5}
.fx-health-trend-list{display:grid;gap:9px}
.fx-health-trend-point{display:grid;grid-template-columns:58px minmax(0,1fr) 34px;align-items:center;gap:10px}
.fx-health-trend-date{color:#64748b;font-size:.78rem;font-weight:750}
.fx-health-trend-track{height:11px;overflow:hidden;background:#edf1f5;border-radius:999px}
.fx-health-trend-track>span{display:block;height:100%;min-width:2px;border-radius:inherit}
.fx-health-trend-point>strong{color:#243f70;text-align:right}
.fx-health-trend-summary{display:flex;flex-wrap:wrap;gap:8px}
.fx-health-trend-summary span{padding:7px 10px;color:#64748b;background:#f5f8fb;border-radius:8px}
.fx-health-trend-summary strong{color:#243f70}
@media(max-width:520px){.fx-health-trend-heading{display:grid}.fx-trend-change{justify-self:start}}

/* Initial Count catalogue product selection */
.sc-initial-range{display:grid;justify-items:start;gap:7px}.sc-initial-range span{color:#64748b}.sc-add-products,.sc-product-picker button{padding:9px 12px;border:0;border-radius:9px;background:var(--nexus-accent, #EE7326);color:#fff;font-weight:800;cursor:pointer}.sc-line-tools{display:flex;justify-content:flex-end;margin-bottom:10px}.sc-product-picker{display:grid;gap:13px}.sc-picker-close{background:#64748b!important}.sc-product-search{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.sc-product-search input{padding:10px 12px;border:1px solid #cbd5e1;border-radius:9px}.sc-product-search span{color:#64748b}.sc-product-results{display:grid;gap:8px}.sc-product-results article{display:grid;grid-template-columns:minmax(0,1fr) 145px auto;align-items:end;gap:11px;padding:11px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}.sc-product-results strong,.sc-product-results small,.sc-product-results label,.sc-product-results label span{display:block}.sc-product-results small{margin-top:4px;color:#64748b}.sc-product-results label span{margin-bottom:4px;color:#40516b;font-size:.75rem;font-weight:800}.sc-product-results input{box-sizing:border-box;width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:8px}@media(max-width:700px){.sc-product-results article{grid-template-columns:1fr}.sc-product-search{grid-template-columns:1fr}}

/* Stock Count weekly matrix */
.sc-health-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.sc-health-summary button{display:grid;gap:2px;padding:11px;border:1px solid #dbe3ea;border-radius:11px;background:#fff;cursor:pointer}.sc-health-summary strong{font-size:1.45rem}.sc-health-summary span{text-transform:uppercase;font-size:.68rem;font-weight:800;letter-spacing:.05em}.sc-health-summary .good{color:#24764b}.sc-health-summary .low{color:#996b12}.sc-health-summary .insufficient{color:#ad3a32}.sc-health-summary .initial{color:#50647d}.sc-health-summary button.on{box-shadow:0 0 0 2px currentColor inset}.sc-matrix-tools{display:grid;grid-template-columns:minmax(240px,1fr) 190px auto;align-items:end;gap:10px;margin-top:12px}.sc-matrix-tools label{display:grid;gap:5px}.sc-matrix-tools label>span{font-size:.75rem;font-weight:800;color:#40516b}.sc-matrix-tools input,.sc-matrix-tools select{box-sizing:border-box;width:100%;min-height:42px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:9px}.sc-matrix-tools button{min-height:42px;padding:9px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#243f70;font-weight:800}.sc-matrix-tools button.on{background:#243f70;color:#fff}.sc-matrix-shell{display:grid;gap:10px}.sc-matrix-help{padding:10px 12px;border:1px solid #ecd7ad;border-radius:10px;background:#fff5df;color:#70551c;font-size:.82rem}.sc-matrix{overflow-x:auto;border:1px solid #d7e1e8;border-radius:12px}.sc-matrix-row{display:grid;grid-template-columns:minmax(240px,2fr) 110px 110px minmax(195px,1.35fr) 90px 100px 110px;min-width:980px;border-top:1px solid #e2e8f0}.sc-matrix-row:first-child{border-top:0}.sc-matrix-row>div,.sc-matrix-row>span{display:grid;align-content:center;gap:3px;padding:11px;border-left:1px solid #e2e8f0}.sc-matrix-row>:first-child{border-left:0}.sc-matrix-head{background:#eaf3ef;color:#294b43;font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.sc-matrix-head>span:nth-child(3){background:#edf4fa}.sc-matrix-head>span:nth-child(4){background:#dceeff}.sc-matrix-row>div:nth-child(3){background:#f6f9fc}.sc-matrix-row>div:nth-child(4){background:#eef7ff}.sc-product small,.sc-matrix-row small{color:#718096}.sc-current-count{grid-template-columns:1fr 1fr}.sc-current-count>small{grid-column:1/-1}.sc-current-count label{display:grid;gap:3px}.sc-current-count label span{font-size:.68rem;color:#52657a}.sc-current-count input{box-sizing:border-box;width:100%;padding:8px;border:1px solid #bdcedc;border-radius:8px;background:#fff}.sc-stock-status{justify-self:start;padding:5px 8px;border-radius:999px;font-size:.72rem;font-weight:850}.sc-stock-status.good{background:#e7f6ec;color:#1e6b3a}.sc-stock-status.low{background:#fff4d8;color:#8a5b00}.sc-stock-status.insufficient{background:#fdecea;color:#a12a20}.sc-stock-status.initial-range{background:#edf1f5;color:#50647d}@media(max-width:760px){.sc-health-summary{grid-template-columns:repeat(2,1fr)}.sc-matrix-tools{grid-template-columns:1fr}.sc-matrix{overflow:visible;border:0}.sc-matrix-head{display:none}.sc-matrix-row{display:grid;grid-template-columns:1fr 1fr;min-width:0;margin-bottom:10px;overflow:hidden;border:1px solid #d7e1e8!important;border-radius:12px;background:#fff}.sc-matrix-row>div{border-left:0;border-top:1px solid #edf1f5}.sc-matrix-row>.sc-product{grid-column:1/-1;border-top:0;background:#f8fafc}.sc-matrix-row>div::before{content:attr(data-label);color:#718096;font-size:.67rem;font-weight:800;text-transform:uppercase}.sc-current-count{grid-column:1/-1;grid-template-columns:1fr 1fr}.sc-current-count::before{grid-column:1/-1}}

/* An untouched Count input is unknown, not zero stock. */
.sc-health-summary{grid-template-columns:repeat(5,minmax(0,1fr))}
.sc-health-summary .not-counted{color:#52657a}
.sc-stock-status.not-counted{background:#edf1f5;color:#52657a}
@media(max-width:900px){.sc-health-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.sc-health-summary{grid-template-columns:repeat(2,1fr)}}

/* Four client-facing DC fulfilment states. */
.sc-health-summary{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Previous and current ordered comparison columns */
.sc-matrix-row{grid-template-columns:minmax(230px,1.8fr) 105px 125px 115px minmax(190px,1.3fr) 115px 85px 95px 105px;min-width:1240px}
.sc-matrix-head>span:nth-child(4),.sc-matrix-row>div:nth-child(4){background:#f4f7fb}
.sc-matrix-head>span:nth-child(5),.sc-matrix-row>div:nth-child(5){background:#eef7ff}
.sc-matrix-head>span:nth-child(6),.sc-matrix-row>div:nth-child(6){background:#e7f1fb}
@media(max-width:760px){.sc-matrix-row{grid-template-columns:1fr 1fr;min-width:0}.sc-matrix-row>.sc-product{grid-column:1/-1}.sc-current-count{grid-column:1/-1}}

/* Explicit current Stock Count cycle lifecycle */
.sc-cycle-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:11px 13px;border-radius:11px}.sc-cycle-banner>div{display:grid;gap:3px}.sc-cycle-banner span{color:#64748b;font-size:.78rem}.sc-cycle-banner.draft{background:#eef7ff;border:1px solid #c9dff2}.sc-cycle-banner.locked{background:#e7f6ec;border:1px solid #c8e7d2}.sc-cycle-banner button{padding:9px 12px;border:0;border-radius:9px;background:var(--nexus-accent, #EE7326);color:#fff;font-weight:800;cursor:pointer}.sc-current-count input:disabled{background:#edf1f5;color:#52657a;cursor:not-allowed}@media(max-width:650px){.sc-cycle-banner{display:grid}.sc-cycle-banner button{width:100%}}
.sc-cycle-banner button.secondary{background:#fff;color:#243f70;border:1px solid #b8c7d9}

/* Previous and current delivered invoice columns */
.sc-matrix-row{grid-template-columns:minmax(220px,1.7fr) 95px 115px 105px 110px minmax(180px,1.25fr) 105px 110px 80px 90px 100px;min-width:1460px}
.sc-matrix-head>span:nth-child(5),.sc-matrix-row>div:nth-child(5){background:#eef5f1}
.sc-matrix-head>span:nth-child(6),.sc-matrix-row>div:nth-child(6){background:#eef7ff}
.sc-matrix-head>span:nth-child(7),.sc-matrix-row>div:nth-child(7){background:#e7f1fb}
.sc-matrix-head>span:nth-child(8),.sc-matrix-row>div:nth-child(8){background:#e7f4ed}
@media(max-width:760px){.sc-matrix-row{grid-template-columns:1fr 1fr;min-width:0}.sc-matrix-row>.sc-product{grid-column:1/-1}.sc-current-count{grid-column:1/-1}}

/* STOCK COUNT STICKY HEADER V3 - authoritative desktop override */
@media (min-width: 761px) {
    body .content .sc-matrix {
        display: block !important;
        position: relative !important;
        height: auto !important;
        max-height: min(68vh, 720px) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        border: 1px solid #d7e1e8;
        border-radius: 12px;
        background: #fff;
    }

    body .content .sc-matrix > .sc-matrix-sticky-head {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        margin: 0 !important;
        background: #eaf3ef !important;
        box-shadow: 0 2px 0 rgba(24,52,93,.2), 0 5px 12px rgba(24,52,93,.12) !important;
    }

    body .content .sc-matrix > .sc-matrix-sticky-head > span {
        position: relative;
        z-index: 101;
        background: #eaf3ef;
    }

    body .content .sc-matrix > .sc-matrix-sticky-head > span:nth-child(4) { background:#f4f7fb; }
    body .content .sc-matrix > .sc-matrix-sticky-head > span:nth-child(5) { background:#eef5f1; }
    body .content .sc-matrix > .sc-matrix-sticky-head > span:nth-child(6) { background:#eef7ff; }
    body .content .sc-matrix > .sc-matrix-sticky-head > span:nth-child(7) { background:#e7f1fb; }
    body .content .sc-matrix > .sc-matrix-sticky-head > span:nth-child(8) { background:#e7f4ed; }
}

/* STOCK COUNT LAYOUT V4 - department first, pinned Product and Status columns */
.sc-department select { font-weight: 400; }
.sc-department { margin-top: 14px; }
.sc-cycle-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 650px) {
    .sc-cycle-actions { display: grid; }
}
@media (min-width: 761px) {
    .sc-matrix-row {
        grid-template-columns: minmax(210px,1.6fr) 88px 110px 100px 104px minmax(160px,1.15fr) 100px 104px 76px 84px 112px;
        min-width: 1240px;
    }

    /* Keep the product and its status in view while the comparison columns scroll sideways. */
    body .content .sc-matrix .sc-matrix-row > :first-child,
    body .content .sc-matrix .sc-matrix-row > :last-child {
        position: sticky;
        z-index: 2;
        background: #fff;
    }
    body .content .sc-matrix .sc-matrix-row > :first-child {
        left: 0;
        box-shadow: 1px 0 0 #d7e1e8, 6px 0 8px -6px rgba(24,52,93,.25);
    }
    body .content .sc-matrix .sc-matrix-row > :last-child {
        right: 0;
        box-shadow: -1px 0 0 #d7e1e8, -6px 0 8px -6px rgba(24,52,93,.25);
    }
    body .content .sc-matrix > .sc-matrix-sticky-head > span:first-child,
    body .content .sc-matrix > .sc-matrix-sticky-head > span:last-child {
        position: sticky;
        z-index: 102;
        background: #eaf3ef;
    }
}

/* Order suggestion working on the count screen and the settings page */
.sc-matrix-row small.sc-working { font-size: .68rem; line-height: 1.25; }
.sc-rules { display: block; margin-top: 4px; font-weight: 700; }
.order-suggestion-page .os-add { display: grid; gap: 8px; max-width: 520px; margin-bottom: 14px; }
.order-suggestion-page .os-add label { display: grid; gap: 5px; }
.order-suggestion-page .os-add input { box-sizing: border-box; width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; }
.order-suggestion-page .os-matches { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.order-suggestion-page .os-matches button { width: 100%; padding: 8px 10px; text-align: left; border: 1px solid #dbe3ea; border-radius: 8px; background: #fff; cursor: pointer; }
.order-suggestion-page .os-matches small { color: #64748b; }
.order-suggestion-page .os-table select, .order-suggestion-page .os-table input { min-width: 0; padding: 7px 8px; border: 1px solid #cbd5e1; border-radius: 8px; }
.order-suggestion-page .os-table input { width: 90px; }
.order-suggestion-page .os-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }