/* ===== Brigade design system. clean, modern SaaS ===== */
:root {
    --brigade-primary: #1f6f5c;
    --brigade-primary-600: #1b6151;
    --brigade-primary-700: #195a4b;
    --brigade-sidebar-bg: #0f172a;
    --brigade-sidebar-fg: #cbd5e1;
    --brigade-bg: #f6f7f9;
    --brigade-card: #ffffff;
    --brigade-border: #e6e8eb;
    --brigade-text: #1f2933;
    --brigade-muted: #64748b;

    /* Re-brand Radzen Standard theme to Brigade green */
    --rz-primary: #1f6f5c;
    --rz-primary-light: #2c8a72;
    --rz-primary-dark: #195a4b;
    --rz-primary-darker: #14463b;
    --rz-text-color: #1f2933;
}

html, body {
    font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body {
    margin: 0;
    background: var(--brigade-bg);
    color: var(--brigade-text);
}
a { color: var(--brigade-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Loading splash ----- */
.brigade-splash {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: #0f172a; color: #fff;
    font-family: 'Source Sans 3', system-ui, sans-serif;
}
.brigade-splash__mark { font-size: 1.9rem; font-weight: 700; letter-spacing: .3px; }
.brigade-splash__sub { color: #94a3b8; font-size: .9rem; }

/* ----- App shell ----- */
.brigade-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.brigade-sidebar {
    background: var(--brigade-sidebar-bg); color: var(--brigade-sidebar-fg);
    display: flex; flex-direction: column; padding: 18px 14px;
}
.brigade-main { display: flex; flex-direction: column; min-width: 0; }
.brigade-topbar {
    height: 60px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; background: #fff; border-bottom: 1px solid var(--brigade-border);
}
.brigade-topbar__company {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 1rem; color: var(--brigade-text);
}
.brigade-topbar__company .rz-icon, .brigade-topbar__company i { color: var(--brigade-primary, #1f6f5c); font-size: 1.1rem; }
.brigade-topbar__right { display: flex; align-items: center; gap: 14px; }
.brigade-user { font-weight: 600; font-size: .88rem; color: var(--brigade-text); text-decoration: none; text-align: right; }
a.brigade-user:hover { color: var(--brigade-primary, #1f6f5c); }
.brigade-user small { display: block; font-weight: 400; color: var(--brigade-muted); }
.brigade-emoji-pick {
    font-size: 1.1rem; line-height: 1; padding: 3px 6px; margin: 2px 3px 0 0;
    border: 1px solid var(--brigade-border); border-radius: 6px; background: #fff; cursor: pointer;
}
.brigade-emoji-pick:hover { border-color: var(--brigade-primary, #1f6f5c); background: #f0faf7; }
.brigade-content { padding: 24px; flex: 1; min-width: 0; }

/* ----- Brand ----- */
.brigade-brand {
    font-weight: 700; font-size: 1.25rem; color: #fff;
    display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px;
}
.brigade-brand__dot {
    width: 11px; height: 11px; border-radius: 3px; background: var(--brigade-primary);
    box-shadow: 0 0 0 3px rgba(31,111,92,.3);
}
/* Platform (provider) back-office accent. distinct from tenant teal */
.brigade-brand__dot--platform { background: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.3); }
.brigade-brand small { font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #a5b4fc; }
.brigade-platform .brigade-nav a.active { background: #6366f1; }
.brigade-platform-auth .brigade-auth-brand small { font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; }
.brigade-topbar__title { font-weight: 600; color: var(--brigade-text); }
.brigade-back { display: inline-block; font-size: .82rem; color: var(--brigade-muted); margin-bottom: 4px; text-decoration: none; }
.brigade-back:hover { color: #6366f1; }
.brigade-readonly-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #94a3b8; display: block; margin-bottom: 2px; }
.brigade-impersonation { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: #4338ca; color: #fff; font-size: .85rem; }
.brigade-impersonation strong { color: #fff; }
.brigade-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.brigade-tenant-banner { padding: 8px 16px; font-size: .85rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.brigade-tenant-banner strong { font-weight: 700; }
.brigade-tenant-banner--info { background: #eff6ff; color: #1e40af; }
.brigade-tenant-banner--warning { background: #fffbeb; color: #92400e; }
.brigade-tenant-banner--critical { background: #fef2f2; color: #991b1b; }

/* ----- Sidebar nav ----- */
.brigade-nav { display: flex; flex-direction: column; gap: 2px; }
.brigade-nav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
    color: var(--brigade-sidebar-fg); font-size: .9rem; font-weight: 500;
}
.brigade-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.brigade-nav a.active { background: var(--brigade-primary); color: #fff; }
.brigade-nav__label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    color: #64748b; padding: 16px 12px 6px;
}
/* collapsible group header */
.brigade-nav__group {
    display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 8px; cursor: pointer;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: #94a3b8; user-select: none;
}
.brigade-nav__group:hover { background: rgba(255,255,255,.05); color: #fff; }
.brigade-nav__group.open { color: var(--brigade-sidebar-fg); }
.brigade-nav__group .rz-icon { font-size: 1rem; }
.brigade-nav__items { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.brigade-nav__items a { padding-left: 22px; font-size: .86rem; }   /* slight indent under the header */
.brigade-nav__top { margin-bottom: 2px; }
.brigade-nav .rz-icon, .brigade-nav i { font-size: 1.1rem; }
.brigade-sidebar__foot { margin-top: auto; font-size: .78rem; color: #64748b; padding: 12px 8px; }

/* ----- Auth pages ----- */
.brigade-auth {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #14463b 60%, #1f6f5c 100%); padding: 20px;
}
.brigade-auth-card {
    background: #fff; width: 100%; max-width: 430px; border-radius: 16px; padding: 38px;
    box-shadow: 0 24px 70px rgba(2,6,23,.4);
}
.brigade-auth-brand {
    font-weight: 700; font-size: 1.4rem; color: #0f172a;
    display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.brigade-auth-card h1 { font-size: 1.4rem; margin: 0 0 4px; }
.brigade-auth-sub { color: var(--brigade-muted); margin: 0 0 22px; font-size: .92rem; }
.brigade-auth-foot { margin: 20px 0 0; font-size: .88rem; color: var(--brigade-muted); text-align: center; }

/* ----- Form fields ----- */
.brigade-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.brigade-field label { font-size: .82rem; font-weight: 600; color: #475569; }
.brigade-field .rz-textbox, .brigade-field .rz-password { width: 100%; }
.brigade-readonly { padding: 8px 10px; background: #f1f5f9; border-radius: 6px; color: #475569; font-size: .9rem; }

/* ----- Recipe lines editor ----- */
.brigade-lines { width: 100%; border-collapse: collapse; margin-top: 10px; }
.brigade-lines th { text-align: left; font-size: .78rem; font-weight: 600; color: #64748b; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; }
.brigade-lines th.num, .brigade-lines td.num { text-align: right; }
.brigade-lines td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
/* What a recipe costs, broken into cells you can actually read. It used to be a row of plain
   text with no boxes, so the figures ran into each other and into the heading below. */
.brigade-recipe-totals {
    display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 4px;
    border: 1px solid var(--brigade-border); border-radius: 9px; overflow: hidden;
}
.brigade-recipe-totals > div {
    flex: 1 1 130px; padding: 12px 15px; background: #f8fafc;
    border-right: 1px solid var(--brigade-border);
}
.brigade-recipe-totals > div:last-child { border-right: 0; }
.brigade-recipe-totals span {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--brigade-muted); margin-bottom: 6px;
}
.brigade-recipe-totals strong {
    font-size: 1.2rem; font-weight: 700; color: var(--brigade-text);
    font-variant-numeric: tabular-nums;
}
/* The one figure anybody came for. */
.brigade-recipe-totals .rt-each { background: #eef6f3; }
.brigade-recipe-totals .rt-each strong { color: var(--brigade-primary); font-size: 1.4rem; }
.brigade-recipe-totals .muted {
    flex: 1 1 100%; background: #fff; border-right: 0; border-top: 1px solid var(--brigade-border);
    color: var(--brigade-muted); font-size: .82rem; padding: 9px 15px;
}

/* ----- Dashboard ----- */
.brigade-stat__hint { font-size: .78rem; color: #94a3b8; margin-top: 2px; }
.brigade-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .brigade-dash-grid { grid-template-columns: 1fr; } }
.brigade-dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.brigade-dash-head h3 { margin: 0; font-size: 1rem; }
.brigade-dash-head a { font-size: .8rem; color: var(--brigade-primary, #1f6f5c); text-decoration: none; }
.brigade-dash-empty { color: #94a3b8; font-size: .88rem; margin: 8px 0; }
.brigade-dash-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.brigade-dash-row:last-child { border-bottom: none; }
.brigade-dash-row:hover { background: #f8fafc; }
.brigade-dash-row > div:first-child { display: flex; flex-direction: column; }
.brigade-dash-row > div:first-child span { font-size: .8rem; color: #64748b; }
.brigade-dash-row__right { display: flex; align-items: center; gap: 10px; }

/* ----- Allergen editor ----- */
.brigade-allergen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 8px; }
@media (max-width: 760px) { .brigade-allergen-grid { grid-template-columns: 1fr; } }
.brigade-allergen-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; }
.brigade-allergen-row > span { font-size: .9rem; }

/* ----- Reports ----- */
.brigade-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.brigade-report-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; cursor: pointer; background: #fff; transition: box-shadow .12s, border-color .12s; }
.brigade-report-card:hover { border-color: var(--brigade-primary, #1f6f5c); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.brigade-report-card__title { font-weight: 600; margin-bottom: 4px; }
.brigade-report-card__tag { font-size: .68rem; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.brigade-report-card__desc { font-size: .82rem; color: var(--brigade-muted); }
.brigade-report-table th, .brigade-report-table td { white-space: nowrap; }
.brigade-report-total td { border-top: 2px solid #e2e8f0; background: #f8fafc; }
.brigade-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brigade-btn-block { width: 100%; margin-top: 6px; }

/* ----- Page header + cards ----- */
.brigade-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.brigade-empty {
    background: var(--brigade-card); border: 1px dashed #cbd5e1; border-radius: 12px;
    padding: 40px; text-align: center; color: var(--brigade-muted);
}
.brigade-empty h3 { color: var(--brigade-text); margin: 0 0 6px; }
.brigade-page-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.brigade-page-sub { color: var(--brigade-muted); margin: 0 0 22px; }
.brigade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.brigade-stat {
    background: var(--brigade-card); border: 1px solid var(--brigade-border); border-radius: 12px; padding: 18px 20px;
}
.brigade-stat__label { color: var(--brigade-muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.brigade-stat__value { font-size: 1.7rem; font-weight: 700; margin-top: 6px; }

/* ----- Toolbar (search + filters) ----- */
.brigade-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.brigade-toolbar .grow { flex: 1; min-width: 220px; }

/* ----- Sectioned forms ----- */
.brigade-form { max-width: 1440px; }
.brigade-form-section {
    background: var(--brigade-card); border: 1px solid var(--brigade-border);
    border-radius: 12px; padding: 20px 22px; margin-bottom: 18px;
}
.brigade-form-section h3 { margin: 0 0 16px; font-size: 1rem; font-weight: 700; }

/* 12-column form grid. Column COUNT is responsive (1 / 2 / 3), and a field's WIDTH
   signals how much input is expected: a 3-digit box should not span the screen.
   Size a field with f-num (2-4 digits), f-sm (short text), f-lg (long), full (whole row). */
.brigade-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.brigade-form-grid .brigade-field { grid-column: span 12; }
.brigade-form-grid .rz-textbox, .brigade-form-grid .rz-textarea,
.brigade-form-grid .rz-dropdown, .brigade-form-grid .rz-numeric { width: 100%; }

@media (min-width: 700px) {
    .brigade-form-grid .brigade-field { grid-column: span 6; }        /* 2 across */
    .brigade-form-grid .brigade-field.f-num { grid-column: span 3; }
    .brigade-form-grid .brigade-field.f-sm { grid-column: span 3; }
    .brigade-form-grid .brigade-field.f-md { grid-column: span 6; }
    .brigade-form-grid .brigade-field.f-lg { grid-column: span 12; }
}
@media (min-width: 1200px) {
    .brigade-form-grid .brigade-field { grid-column: span 4; }        /* 3 across */
    .brigade-form-grid .brigade-field.f-num { grid-column: span 2; }
    .brigade-form-grid .brigade-field.f-sm { grid-column: span 2; }
    .brigade-form-grid .brigade-field.f-md { grid-column: span 4; }
    .brigade-form-grid .brigade-field.f-lg { grid-column: span 6; }
}
/* full always wins, whatever the breakpoint */
.brigade-form-grid .brigade-field.full, .brigade-form-grid .full { grid-column: 1 / -1; }

.brigade-form-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Role flags: a compact inline row of checkboxes, not one per grid cell. */
.brigade-roles { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.brigade-roles__item { display: flex; align-items: center; gap: 8px; }

/* ----- Quick-pick chips (e.g. lead-time presets) ----- */
.brigade-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brigade-chip {
    border: 1px solid var(--brigade-border); background: #fff; color: var(--brigade-text, #1f2937);
    border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.brigade-chip:hover { background: var(--brigade-primary, #1f6f5c); border-color: var(--brigade-primary, #1f6f5c); color: #fff; }
.brigade-chip--clear { color: var(--brigade-muted); }
.brigade-chip--clear:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

/* ----- Customer portal accent (amber). distinct from tenant teal & platform indigo ----- */
.brigade-brand__dot--portal { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.3); }
.brigade-portal .brigade-nav a.active { background: #d97706; }
.brigade-portal-auth .brigade-auth-brand small { font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #d97706; }
.brigade-portal-balance { font-size: 1.9rem; font-weight: 800; }
.brigade-portal-balance--owed { color: #b45309; }
.brigade-portal-balance--credit { color: #1f6f5c; }

/* ----- Small status badges + allergen tags (portal catalogue) ----- */
.brigade-badge {
    display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
    background: #f1f5f9; color: #64748b; text-transform: uppercase; letter-spacing: .03em;
}
.brigade-badge--ok { background: rgba(31,111,92,.12); color: #1f6f5c; }
.brigade-badge--bad { background: rgba(239,68,68,.12); color: #b91c1c; }
.brigade-badge--warn { background: rgba(217,119,6,.12); color: #b45309; }
.brigade-short { color: #b91c1c; font-weight: 700; }
.brigade-allergen-tag {
    display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 6px;
    margin: 1px 3px 1px 0; border: 1px solid transparent;
}
.brigade-allergen-tag--contains { background: rgba(239,68,68,.12); color: #b91c1c; border-color: rgba(239,68,68,.25); }
.brigade-allergen-tag--may { background: rgba(217,119,6,.12); color: #b45309; border-color: rgba(217,119,6,.25); }

/* ===== Entity 360 detail (customer / supplier). clean card + metric + tab layout ===== */
.ent-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    background: var(--brigade-card); border: 1px solid var(--brigade-border);
    border-radius: 14px; padding: 20px 22px; margin-bottom: 16px;
}
.ent-id { display: flex; gap: 16px; align-items: center; }
.ent-avatar {
    width: 54px; height: 54px; border-radius: 50%; flex: 0 0 54px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brigade-primary); color: #fff; font-weight: 700; font-size: 1.25rem; letter-spacing: .02em;
}
.ent-id__name { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ent-id__code { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--brigade-muted); background: var(--brigade-bg); padding: 2px 8px; border-radius: 6px; }
.ent-id__sub { margin: 6px 0 0; color: var(--brigade-muted); font-size: .9rem; }
.ent-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ent-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ent-metric { background: var(--brigade-card); border: 1px solid var(--brigade-border); border-radius: 12px; padding: 14px 16px; }
.ent-metric__label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--brigade-muted); }
.ent-metric__value { font-size: 1.4rem; font-weight: 700; margin-top: 5px; line-height: 1.1; }
.ent-metric__sub { font-size: .75rem; color: var(--brigade-muted); margin-top: 3px; }
.ent-metric--danger .ent-metric__value { color: #dc2626; }
.ent-metric--good .ent-metric__value { color: var(--brigade-primary); }

.ent-alert {
    display: flex; gap: 10px; align-items: flex-start; background: #fef2f2; border: 1px solid #fecaca;
    color: #991b1b; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: .88rem;
}
.ent-note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 10px; padding: 10px 14px; font-size: .82rem; margin-bottom: 14px; }

.ent-card { background: var(--brigade-card); border: 1px solid var(--brigade-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.ent-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ent-card__title { margin: 0; font-size: .98rem; font-weight: 700; }
.ent-card__count { color: var(--brigade-muted); font-weight: 600; }

.ent-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ent-two-col { grid-template-columns: 1fr; } }

.ent-kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; }
.ent-kv__label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--brigade-muted); margin-bottom: 3px; }
.ent-kv__value { font-size: .92rem; color: var(--brigade-text); word-break: break-word; }
.ent-empty { color: #aab2bf; font-style: italic; }

.ent-aging { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ent-aging__cell { flex: 1 1 90px; background: var(--brigade-bg); border: 1px solid var(--brigade-border); border-radius: 8px; padding: 8px 10px; }
.ent-aging__cell--bad { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.3); }
.ent-aging__label { font-size: .68rem; font-weight: 600; text-transform: uppercase; color: var(--brigade-muted); }
.ent-aging__value { font-size: 1rem; font-weight: 700; margin-top: 2px; }

/* ===== Material form ===== */
.mf-hint { font-size: .8rem; color: var(--brigade-muted); margin-top: 6px; }

/* A calculated value the user cannot type into. Sized like an input so it lines up beside one. */
.mf-readonly {
    display: flex; align-items: center; min-height: 36px; padding: 0 10px;
    border: 1px dashed var(--brigade-border); border-radius: 6px;
    background: rgba(0, 0, 0, .02); font-variant-numeric: tabular-nums;
}
.mf-opt { font-size: .7rem; font-weight: 500; color: #aab2bf; text-transform: none; letter-spacing: 0; }
.mf-sub { font-size: .78rem; color: var(--brigade-muted); }
.mf-sup { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .88rem; }
.mf-sup thead th { text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--brigade-muted); padding: 6px 10px; border-bottom: 1px solid var(--brigade-border); }
.mf-sup tbody td { padding: 9px 10px; border-bottom: 1px solid var(--brigade-border); vertical-align: top; }
.mf-sup tbody tr:last-child td { border-bottom: none; }
.mf-sup .num { text-align: right; }
.mf-sup thead th.num { text-align: right; }
.mf-sup__name { font-weight: 600; }
.mf-diet { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 6px; }
.mf-diet__item { display: flex; align-items: center; gap: 8px; }

/* ===== Supplier-material dialog ===== */
.smd-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 14px; }
.smd-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .smd-grid { grid-template-columns: 1fr 1fr; } }
.smd-hint { font-size: .76rem; color: var(--brigade-muted); margin: 2px 0 0; }
.smd-empty { color: #aab2bf; font-style: italic; font-size: .85rem; }
.smd-section { margin-top: 16px; border-top: 1px solid var(--brigade-border); padding-top: 14px; }
.smd-section__head { display: flex; align-items: center; justify-content: space-between; }
.smd-section__title { font-weight: 700; font-size: .92rem; }
.smd-bc { width: 100%; border-collapse: collapse; margin-top: 8px; }
.smd-bc th { text-align: left; font-size: .68rem; font-weight: 600; text-transform: uppercase; color: var(--brigade-muted); padding: 4px 6px; }
.smd-bc td { padding: 4px 6px; vertical-align: middle; }
.smd-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ===== Supplier-material dialog (clean sectioned layout) ===== */
.smd3 { display: flex; flex-direction: column; max-height: 76vh; }
.smd3-body { overflow-y: auto; overflow-x: hidden; padding-right: 6px; display: flex; flex-direction: column; gap: 14px; }
.smd3-sec { border: 1px solid var(--brigade-border); border-radius: 10px; padding: 14px 16px; background: var(--brigade-bg); }
.smd3-sec__title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brigade-muted); margin: 0 0 12px; }
.smd3-sec__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.smd3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; }
.smd3-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .smd3-grid { grid-template-columns: 1fr; } }
.smd3-f { display: flex; flex-direction: column; min-width: 0; }
.smd3-f > label { font-size: .78rem; font-weight: 600; margin-bottom: 5px; color: var(--brigade-text); }
.smd3-hint { font-size: .7rem; color: var(--brigade-muted); margin-top: 5px; line-height: 1.3; }
.smd3-check { flex-direction: row; align-items: flex-start; gap: 9px; }
.smd3-check .smd3-hint { margin-top: 2px; }
.smd3-bc { width: 100%; border-collapse: collapse; }
.smd3-bc th { text-align: left; font-size: .64rem; font-weight: 600; text-transform: uppercase; color: var(--brigade-muted); padding: 4px 6px; }
.smd3-bc td { padding: 4px 6px; vertical-align: middle; }
.smd3-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--brigade-border); }


/* ---------- Food label tab: the form on the left, the pack as it will read on the right ---------- */
.lbl-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .lbl-split { grid-template-columns: 1fr; } }

.lbl-side { position: sticky; top: 12px; }
.lbl-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lbl-preview-head h3 { margin: 0; font-size: .95rem; }

/* The card deliberately apes a printed label: white, boxed, small tight type. */
.lbl-card {
    background: #fff; border: 1px solid #c9ced6; border-radius: 3px; padding: 12px 14px;
    font-family: Arial, Helvetica, sans-serif; font-size: .78rem; line-height: 1.45; color: #111;
}
.lbl-name { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.lbl-block { margin-bottom: 7px; }
.lbl-h { font-weight: 700; letter-spacing: .02em; }

/* This is the legal bit. Natasha's Law wants the allergen to stand out inside the list. */
.lbl-allergen { font-weight: 700; }

.lbl-nut { width: 100%; border-collapse: collapse; margin: 9px 0; font-size: .74rem; }
.lbl-nut th, .lbl-nut td { border: 1px solid #c9ced6; padding: 3px 6px; text-align: left; }
.lbl-nut th:last-child, .lbl-nut td:last-child { text-align: right; white-space: nowrap; }
.lbl-nut thead th { background: #f2f4f7; font-weight: 700; }
.lbl-indent { padding-left: 16px !important; }

.lbl-foot { border-top: 1px solid #c9ced6; margin-top: 9px; padding-top: 7px; }
.lbl-foot > div { margin-bottom: 2px; }
.lbl-net { font-weight: 700; font-size: .9rem; }
.lbl-biz { color: #333; }

.lbl-ok {
    margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: .8rem;
    background: #eaf7ee; color: #1d6b33; border: 1px solid #bfe3c9;
}
.lbl-warns { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.lbl-warn { display: flex; gap: 7px; align-items: flex-start; font-size: .78rem; padding: 7px 9px; border-radius: 6px; }
.lbl-warn .rz-icon, .lbl-warn .rzi { font-size: 1rem; line-height: 1.2; }
/* Red is for the things that break the law. Grey is for the things that merely look unfinished. */
.lbl-warn.is-legal { background: #fdecec; color: #8c2020; border: 1px solid #f3c9c9; }
.lbl-warn.is-tidy  { background: #f4f6f8; color: #4b5563; border: 1px solid #e0e5ea; }


/* ============================================================================
   ITEM PAGES REDESIGN
   The four ticks decide everything, so they are pinned above the tabs instead of
   buried inside one. Each tab carries a dot saying whether it is finished.
   ============================================================================ */

/* ---- the role strip: "what do you do with it?" ---- */
.it-roles {
    background: var(--brigade-card); border: 1px solid var(--brigade-border);
    border-radius: 12px;
    padding: 14px 16px; margin-bottom: 14px;
}
.it-roles__q { font-size: .85rem; font-weight: 700; margin: 0 0 10px; }
.it-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.it-verdict { margin: 10px 0 0; font-size: .8rem; color: var(--brigade-muted); }
.it-verdict strong { color: var(--brigade-primary); }

/* A tick box that reads as a chip. Bigger target, and you can see the four
   answers together instead of scanning down a column of small squares. */
.it-chip {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid #cfd6dd; background: #fff; border-radius: 999px;
    padding: 8px 15px 8px 11px; font-size: .84rem; font-weight: 600; color: #4b5a68;
    cursor: pointer; transition: border-color .12s, background .12s, color .12s;
    user-select: none;
}
.it-chip:hover { border-color: #aab6c2; }
.it-chip.is-on { border-color: var(--brigade-primary); background: #eaf3f0; color: #175647; }
.it-chip.is-locked { cursor: default; opacity: .75; }
.it-chip.is-locked:hover { border-color: #cfd6dd; }
.it-chip__bx {
    width: 15px; height: 15px; border: 1.5px solid #b3bec8; border-radius: 4px;
    display: block; flex: none; position: relative; background: #fff;
}
.it-chip.is-on .it-chip__bx { background: var(--brigade-primary); border-color: var(--brigade-primary); }
.it-chip.is-on .it-chip__bx::after {
    content: ''; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(42deg);
}

/* ---- tab status dots ---- */
.it-tab { display: inline-flex; align-items: center; gap: 7px; }
.it-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.it-dot--ok { background: #2f9e5a; }
.it-dot--warn { background: #d69417; }
.it-dot--bad { background: #c0392b; }
.it-count {
    font-size: .64rem; font-weight: 700; padding: 1px 6px; border-radius: 5px;
    background: #eef2f5; color: #64748b; line-height: 1.5;
}

/* ---- the form header: name, code, what it is, on hand ---- */
.it-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.it-head__name { font-size: 1.5rem; font-weight: 700; margin: 0 0 3px; }
.it-head__meta { color: var(--brigade-muted); margin: 0; font-size: .86rem; }
.it-head__meta b { color: var(--brigade-text); font-weight: 600; }

/* ---- "what is it" first screen ---- */
.it-ask { max-width: 900px; }
.it-ask .it-chips { gap: 10px; }
.it-ask__means { font-size: .82rem; color: var(--brigade-muted); line-height: 1.75; margin: 0; }
.it-ask__means b { color: var(--brigade-text); }
.it-ask__verdict {
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 11px 13px; font-weight: 700; color: #175647; font-size: .95rem;
}
.it-ask__tabs { font-size: .82rem; color: var(--brigade-muted); line-height: 1.7; margin: 9px 0 0; }
.it-ask__tabs b { color: var(--brigade-text); }

/* ---- items list: filter chips + role letters ---- */
.it-filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.bg-fchip {
    font-size: .79rem; font-weight: 600; padding: 6px 13px; border-radius: 999px;
    border: 1px solid var(--brigade-border); background: #fff; color: #64748b;
    cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.bg-fchip:hover { border-color: #aab6c2; }
.bg-fchip.is-on { background: var(--brigade-primary); border-color: var(--brigade-primary); color: #fff; }
.bg-fchip.is-alert { color: #8c2020; border-color: #f0cccc; background: #fdf4f4; }
.bg-fchip.is-alert.is-on { background: #b03a3a; border-color: #b03a3a; color: #fff; }
.bg-fchip__n { opacity: .72; font-weight: 700; margin-left: 4px; }
.it-search { margin-left: auto; min-width: 210px; }

/* B M S K, the four ticks as four letters you can read down a column */
.it-rk { display: inline-flex; gap: 3px; }
.it-rk i {
    width: 17px; height: 17px; border-radius: 4px; font-size: .58rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    background: #eef2f5; color: #aab6c2; font-style: normal; line-height: 1;
}
.it-rk i.is-on { background: #e3efec; color: var(--brigade-primary); }

.it-alert { color: #c0392b; font-size: 1rem; vertical-align: middle; margin-left: 5px; cursor: help; }
.it-name { font-weight: 600; }
.it-sub { color: #94a3b8; font-size: .7rem; display: block; margin-top: 1px; }

/* ---- the More drawer's own hint block, so it does not read as a dumping ground ---- */
.it-more-lead { font-size: .82rem; color: var(--brigade-muted); margin: 0 0 14px; }

/* A true half, at every width. The default span changes with the breakpoint, which is right for
   a dense form but wrong for two side-by-side blocks of prose. */
.brigade-form-grid .brigade-field.f-half { grid-column: span 12; }
@media (min-width: 700px) { .brigade-form-grid .brigade-field.f-half { grid-column: span 6; } }


/* ============================================================================
   GETTING STARTED
   A new company's dashboard is a wall of zeros. This sits above it and turns
   an empty system into a short list of next steps.
   ============================================================================ */
.gs {
    background: var(--brigade-card); border: 1px solid var(--brigade-border);
    border-radius: 12px;
    padding: 18px 20px; margin-bottom: 18px;
}
.gs__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.gs__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 2px; }
.gs__sub { color: var(--brigade-muted); font-size: .84rem; margin: 0; }

.gs__bar { height: 5px; border-radius: 3px; background: #eef2f5; margin: 14px 0 4px; overflow: hidden; }
.gs__bar span { display: block; height: 100%; background: var(--brigade-primary); transition: width .25s; }

.gs__list { list-style: none; margin: 0; padding: 0; }
.gs__step {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 2px; border-bottom: 1px solid #f1f4f6;
}
.gs__step:last-child { border-bottom: 0; }

/* The tick is a circle so a finished step reads as finished at a glance, not as
   a slightly different shade of text. */
.gs__tick {
    width: 21px; height: 21px; border-radius: 50%; flex: none;
    border: 1.5px solid #cfd6dd; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; color: #fff; line-height: 1;
}
.gs__step.is-done .gs__tick { background: var(--brigade-primary); border-color: var(--brigade-primary); }

.gs__body { flex: 1 1 auto; min-width: 0; }
.gs__label { font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gs__why { font-size: .79rem; color: var(--brigade-muted); margin-top: 2px; }
.gs__step.is-done .gs__label { color: var(--brigade-muted); }
.gs__step.is-done .gs__why { opacity: .8; }

/* Only on the step that is not optional: no business address, no legal food label. */
.gs__flag {
    font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: #fdecec; color: #8c2020; border: 1px solid #f3c9c9;
    border-radius: 4px; padding: 1px 6px;
}


/* A purchase order below the supplier's minimum. A warning, never a block: suppliers do take a
   small urgent order, usually with a surcharge, so refusing would be Brigade inventing a rule
   the supplier never made. */
.po-under {
    display: flex; gap: 9px; align-items: flex-start; margin-top: 12px;
    background: #fdf4e2; border: 1px solid #ecd9a8; color: #7a5600;
    border-radius: 8px; padding: 10px 12px; font-size: .82rem; line-height: 1.5;
}
.po-under .rz-icon, .po-under .rzi { font-size: 1.05rem; line-height: 1.3; }


/* A supplier on hold. Amber, not red: nothing is broken and no money is at risk. It is a
   deliberate stop on new orders, and the banner's job is to say why and since when. */
.sup-hold {
    display: flex; gap: 11px; align-items: flex-start;
    background: #fdf4e2; border: 1px solid #ecd9a8; color: #7a5600;
    border-radius: 10px; padding: 13px 15px; margin-bottom: 16px; font-size: .86rem; line-height: 1.55;
}
.sup-hold .rz-icon, .sup-hold .rzi { font-size: 1.2rem; line-height: 1.3; }
.sup-hold__sub { color: #8a6a2e; font-size: .8rem; margin-top: 3px; }


/* ---------- supplier prices: the unit, the real cost, and whether the price is in date ---------- */
/* "per kg" sits small next to the figure, because the figure is what you read and the unit is
   what stops you misreading it. */
.sp-per { font-size: .66rem; color: var(--brigade-muted); margin-left: 4px; white-space: nowrap; }

/* An out-of-date price is still SHOWN, greyed, because you cannot fix a price you cannot see.
   It is simply never offered to a purchase order. */
.sp-stale { color: #94a3b8; text-decoration: line-through; }

.sp-pill { font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 5px; white-space: nowrap; }
.sp-pill--expired { background: #fdecec; color: #8c2020; }
.sp-pill--future { background: #eef2f5; color: #64748b; }
.sp-pill--best { background: #eaf7ee; color: #1d6b33; }

/* The stock unit shown beside a number, so "16" reads as "16 kg" without a second field. */
.smd3-unit { font-size: .8rem; font-weight: 600; color: var(--brigade-muted); white-space: nowrap; }

/* The same barcode pointing at a different item. Amber: nothing is broken yet, but a scan would
   pick whichever row comes back first, so the operator could book in the wrong ingredient. */
.smd3-clash {
    display: flex; gap: 7px; align-items: flex-start; margin-top: 6px;
    background: #fdf4e2; border: 1px solid #ecd9a8; color: #7a5600;
    border-radius: 6px; padding: 7px 9px; font-size: .74rem; line-height: 1.45;
}
.smd3-clash .rz-icon, .smd3-clash .rzi { font-size: .95rem; line-height: 1.3; }

/* The same code twice on one item. Red, not amber: unlike a clash with another item, this can
   never be legitimate, so the save refuses it. */
.smd3-clash--error { background: #fdecec; border-color: #f3c9c9; color: #8c2020; }

/* A purchase order line below this supplier's smallest quantity. Amber and quiet: the same
   warn-never-block rule as the minimum order value, because a supplier will take a small urgent
   order and Brigade must not invent a rule they never made. */
.po-minqty { display: flex; gap: 5px; align-items: center; margin-top: 4px; font-size: .68rem;
    color: #7a5600; line-height: 1.3; }
.po-minqty .rz-icon, .po-minqty .rzi { font-size: .85rem; }

/* ★ What the number in the box is IN.
   Quiet, because it is a label rather than a warning: it sits under the Qty and the price on
   every line, all the time. It is quiet and it is always there, which is the whole point.
   Before it existed the Qty box asked for SACKS and said so nowhere, so somebody after 200 kg
   typed 200 and ordered 4,000 kg. */
.po-unit { margin-top: 3px; font-size: .68rem; line-height: 1.3; color: var(--brigade-muted); }

/* Buying something this supplier does not list. Allowed on purpose, so amber and never red:
   a one-off buy is normal. It only says whose price you are looking at. */
.po-offlist { display: flex; gap: 5px; align-items: center; margin-top: 4px; font-size: .68rem;
    color: #7a5600; line-height: 1.3; }
.po-offlist .rz-icon, .po-offlist .rzi { font-size: .85rem; }


/* ---------- the three-way match on a supplier bill ---------- */
/* Amber, not red: the bill may well be right, and the user chose warn-never-block. Red would
   say "this is wrong", and Brigade does not know that. It knows the numbers differ. */
.bm { border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: .86rem; line-height: 1.55; }
.bm--differs { background: #fdf4e2; border: 1px solid #ecd9a8; color: #7a5600; }
.bm--matched { background: #eaf7ee; border: 1px solid #bfe3c9; color: #1d6b33; }
.bm__head { display: flex; gap: 11px; align-items: flex-start; }
.bm__head .rz-icon, .bm__head .rzi { font-size: 1.25rem; line-height: 1.3; }
.bm__sub { margin-top: 2px; }
.bm__list { margin: 11px 0 0; padding-left: 30px; }
.bm__list li { margin-bottom: 4px; }
/* The money at stake, right-aligned in the eye, because it is what decides whether you care. */
.bm__amt { font-weight: 700; margin-left: 8px; font-variant-numeric: tabular-nums; }
.bm__foot { margin: 10px 0 0 30px; font-size: .78rem; opacity: .85; }


/* ---------- a bill's history ---------- */
/* A plain vertical list with a dot per event. Not a fancy timeline: the point is that every line
   answers what, when and who, and reads top to bottom like a story. */
.bh { list-style: none; margin: 0; padding: 0; }
.bh__row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f4f6; }
.bh__row:last-child { border-bottom: 0; }
.bh__dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: none; margin-top: 6px; }
.bh__row--drafted .bh__dot { background: #94a3b8; }
.bh__row--approved .bh__dot { background: var(--brigade-primary); }
.bh__row--paid .bh__dot { background: #2f9e5a; }
.bh__row--reversed .bh__dot { background: #d69417; }
.bh__row--voided .bh__dot { background: #c0392b; }
.bh__what { font-size: .88rem; }
.bh__amt { margin-left: 7px; font-variant-numeric: tabular-nums; }
.bh__meta { font-size: .76rem; color: var(--brigade-muted); margin-top: 2px; }
/* A reversed payment stays visible, struck through. Hiding it would make the history lie. */
.bh__row.is-cancelled .bh__what { color: #94a3b8; text-decoration: line-through; }
.bh__tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: #fdf4e2; color: #7a5600; border-radius: 4px; padding: 1px 6px; margin-left: 7px;
    text-decoration: none; display: inline-block; }
.bh__actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--brigade-border); }


/* =====================================================================
   SUPPLIER PAGES
   The list, the supplier's own page and its six tabs. Written for the
   redesign; sd-approval and sd-pill were being used with no rules at all
   before this, so the approval line rendered as plain running text.
   ===================================================================== */

/* ---- a filter bar's search box, next to the chips ---- */
.bg-fsearch { margin-left: auto; min-width: 240px; }

/* ---- grid cells: a sub-line, a money figure, a figure that is a problem ---- */
.sg-sub { display: block; font-size: .76rem; color: var(--brigade-muted); margin-top: 1px; }
.sg-num { font-variant-numeric: tabular-nums; }
.sg-bad { color: #8c2020; font-weight: 700; }
.sg-sub.sg-bad { font-weight: 600; }
.sg-none { color: #94a3b8; }

/* ---- rows that need a decision, visible without reading a word ---- */
.sg-row--attention td { background: #fdf9f0; }
.sg-row--retired td { opacity: .6; }

/* ---- the certificate banner at the top of a supplier's page ---- */
.sd-banner {
    display: flex; gap: 11px; align-items: flex-start;
    border: 1px solid #e6cf9a; background: #fdf7e8; color: #7a5600;
    border-radius: 9px; padding: 12px 14px; margin-bottom: 16px; font-size: .86rem; line-height: 1.55;
}
.sd-banner .rz-icon, .sd-banner .rzi { font-size: 1.2rem; line-height: 1.3; flex: none; }
.sd-banner strong { display: block; color: #5f4300; }
.sd-banner__sub { font-size: .78rem; opacity: .85; margin-top: 3px; }
.sd-banner--expired, .sd-banner--none { border-color: #ecc3c3; background: #fdf4f4; color: #8c2020; }
.sd-banner--expired strong, .sd-banner--none strong { color: #6d1919; }

/* ---- a word rather than a number in a tile ---- */
.ent-metric__value--word { font-size: .95rem; padding-top: 6px; }

/* ---- the approval line inside the Documents tab ---- */
.sd-approval {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    border: 1px solid var(--brigade-border); background: #f8fafc;
    border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
    font-size: .85rem; color: var(--brigade-text);
}
.sd-approval__badge {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    border-radius: 999px; padding: 3px 9px; background: #eef2f5; color: #64748b; flex: none;
}
.sd-approval--approved { border-color: #bfe3c9; background: #f3faf5; }
.sd-approval--approved .sd-approval__badge { background: #d9f0e1; color: #1d6b33; }
.sd-approval--expiring { border-color: #e6cf9a; background: #fdf7e8; }
.sd-approval--expiring .sd-approval__badge { background: #fbedd0; color: #7a5600; }
.sd-approval--expired, .sd-approval--none { border-color: #ecc3c3; background: #fdf4f4; }
.sd-approval--expired .sd-approval__badge,
.sd-approval--none .sd-approval__badge { background: #fadada; color: #8c2020; }

/* ---- how long a document has left, beside its expiry date ---- */
.sd-pill {
    font-size: .62rem; font-weight: 700; border-radius: 999px;
    padding: 1px 7px; margin-left: 6px; white-space: nowrap;
}
.sd-pill--valid { background: #eaf7ee; color: #1d6b33; }
.sd-pill--expiring { background: #fbedd0; color: #7a5600; }
.sd-pill--expired { background: #fdecec; color: #8c2020; }
.sd-pill--none { background: #eef2f5; color: #64748b; }

/* ---- "are they putting prices up?", answered above the table ---- */
.sd-trend {
    display: flex; gap: 10px; align-items: center;
    border-radius: 8px; padding: 10px 13px; margin-bottom: 12px;
    font-size: .86rem; line-height: 1.5;
    border: 1px solid #e6cf9a; background: #fdf7e8; color: #7a5600;
}
.sd-trend .rz-icon, .sd-trend .rzi { font-size: 1.15rem; flex: none; }
.sd-trend--down { border-color: #bfe3c9; background: #eaf7ee; color: #1d6b33; }
.sd-trend--flat { border-color: var(--brigade-border); background: #f8fafc; color: var(--brigade-muted); }

/* ---- a price move: the arrow and the percentage carry the direction ---- */
.sd-move { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-move--bigup { color: #8c2020; }
.sd-move--up { color: #7a5600; }
.sd-move--down { color: #1d6b33; }
.sd-move--flat { color: var(--brigade-muted); }


/* =====================================================================
   RECIPE METHOD
   Steps, in order. The number sits in its own column so the eye runs
   down 1, 2, 3 the way a baker reads a spec sheet.
   ===================================================================== */
.rs { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: flex-start;
      padding: 14px 0; }
.rs__n {
    font-weight: 700; font-size: .85rem; color: var(--brigade-primary);
    background: #eef6f3; border: 1px solid var(--brigade-primary); border-radius: 7px;
    display: grid; place-items: center; height: 34px;
}
.rs__body { min-width: 0; }

/* ---- a step you are not editing shuts to ONE LINE ----
   Eight boxes and three headings is about 400px; six steps was three screens of boxes to read the
   word "Bake". Nothing is hidden: the whole step is written out as a sentence instead. */
.rs--shut {
    cursor: pointer; align-items: center;
    border: 1px solid var(--brigade-border); border-radius: 9px; background: #f8fafc;
    padding: 11px 13px; margin-bottom: 8px;
}
.rs--shut:hover { background: #eef6f3; border-color: var(--brigade-primary); }

/* A step that is not finished says so where you can see it, instead of waiting for Save. */
.rs--shut.rs--wrong { border-color: #d97706; background: #fffbeb; }
.rs--shut.rs--wrong:hover { background: #fef3c7; border-color: #b45309; }
.rs--shut.rs--wrong .rs__n { background: #fef3c7; border-color: #d97706; color: #b45309; }
.rs__sum--wrong { color: #b45309; font-weight: 600; }
.rs--shut:last-of-type { margin-bottom: 0; }
.rs--shut .rs__n { height: 28px; font-size: .8rem; }
.rs__what { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.rs__empty { color: var(--brigade-muted); font-style: italic; font-weight: 400; }
.rs__sum { font-size: .82rem; color: var(--brigade-muted); margin-top: 2px; line-height: 1.4; }
.rs--shut .rs__acts { flex-direction: row; gap: 2px; }

/* The one that is open is marked, so it is obvious which you are typing into. */
/* Where the staff and machine time came from. These sat right on top of the figures with no
   gap at all, which is what made the section look broken. */
.rt-where { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--brigade-border); }
.rt-where h3 { margin: 0 0 2px; }

.rs--open {
    border: 1px solid var(--brigade-primary); border-radius: 9px; background: #fff;
    padding: 14px; margin: 10px 0; border-bottom: 1px solid var(--brigade-primary);
}

/* A step asks three questions, so its boxes sit in three labelled rows. They used to be eight
   boxes in one flat line, with temperature between "who does it" and "which machine". */
.rs__row {
    font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--brigade-muted); margin: 14px 0 8px; padding-top: 10px;
    border-top: 1px dashed var(--brigade-border);
}
.rs__body > .rs__row:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Production: what needs a person, and what went wrong. */
.po-need { color: #b45309; font-weight: 600; }
.po-ok { color: var(--brigade-primary); }
.po-scrap { color: #b45309; font-weight: 600; }

/* Who is on a step: a grade, how many, and a way to take them off. */
.rs-who { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.rs-who > :first-child { flex: 1 1 auto; min-width: 0; }
.rs-who .rz-numeric { flex: 0 0 74px; }

/* An old version, opened underneath the history. Plainly history: no inputs, nothing to press. */
.rv-old {
    margin-top: 14px; padding: 14px 16px; border: 1px solid var(--brigade-border);
    border-radius: 9px; background: #f8fafc;
}
.rv-old__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.rv-old__head span { font-size: .82rem; color: var(--brigade-muted); }

/* The reference, beside the heading where a reference belongs, not as a field in the form. */
.rf-num {
    font-size: .72em; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--brigade-muted); background: #f1f5f9; border: 1px solid var(--brigade-border);
    border-radius: 6px; padding: 3px 9px; margin-left: 10px; vertical-align: middle;
}

/* A number Brigade gives you, not a box you type in. */
.rf-given {
    font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brigade-text);
    background: #f8fafc; border: 1px dashed var(--brigade-border); border-radius: 7px;
    padding: 9px 12px; min-height: 38px; display: flex; align-items: center;
}

/* "One batch makes [4] [cakes]" reads as one sentence, so it is one control. */
.rf-joined { display: flex; align-items: stretch; }
.rf-joined > :first-child { flex: 0 0 96px; }
.rf-joined > :last-child { flex: 1 1 auto; min-width: 0; }
.rf-joined .rz-numeric { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rf-joined .rz-dropdown { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.rs__acts { display: flex; flex-direction: column; gap: 4px; }
.rs__tot {
    display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
    border-top: 2px solid var(--brigade-text); font-size: .88rem; color: var(--brigade-muted);
}
.rs__tot strong { color: var(--brigade-text); }


/* ---- the scaled recipe sheet a baker takes to the bench ---- */
.sc__ask {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    background: #eef6f3; border: 1px solid var(--brigade-primary); border-radius: 8px;
    padding: 11px 14px; margin-bottom: 16px; font-weight: 600;
}
.sc__or { color: var(--brigade-muted); font-weight: 400; margin-left: 8px; }
.sc__head { border-bottom: 2px solid var(--brigade-text); padding-bottom: 10px; margin-bottom: 14px; }
.sc__head h3 { margin: 0 0 3px; font-size: 1.25rem; font-weight: 700; }
.sc__meta { color: var(--brigade-muted); font-size: .88rem; }
.sc__tot {
    display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px;
    border-top: 2px solid var(--brigade-text); font-size: .9rem; color: var(--brigade-muted);
}
.sc__tot strong { color: var(--brigade-text); }
.sc__h4 { margin: 22px 0 8px; font-size: 1rem; font-weight: 700; }
.sc__step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--brigade-border); }
.sc__step:last-child { border-bottom: 0; }
.sc__stepn { font-weight: 700; font-size: .8rem; color: var(--brigade-primary);
    background: #eef6f3; border: 1px solid var(--brigade-primary); border-radius: 6px;
    display: grid; place-items: center; height: 26px; }
.sc__stepw { font-weight: 600; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc__stepnum { font-weight: 400; color: var(--brigade-primary); font-size: .85rem; }
.sc__stepi { font-size: .85rem; color: var(--brigade-text); margin-top: 3px; }
.sc__stepnote { font-size: .85rem; color: var(--brigade-muted); margin-top: 3px; }


/* ---- what may be used instead of an ingredient ---- */
.rsub {
    border: 1px solid var(--brigade-primary); border-radius: 9px; background: #eef6f3;
    padding: 14px 16px; margin: 10px 0 14px;
}
.rsub__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rsub table { background: #fff; border-radius: 7px; }


/* ---- signing a recipe off: one click, and your name goes on it ---- */
.rso {
    border: 1px solid #e6cf9a; background: #fdf7e8; border-radius: 9px;
    padding: 15px 17px; margin: 0 0 14px;
}
.rso__t { font-weight: 700; font-size: 1.02rem; color: #7a5600; margin-bottom: 5px; }
.rso__p { margin: 0 0 11px; font-size: .93rem; }
.rso__tbl { background: #fff; border-radius: 7px; }
.rso__by { color: var(--brigade-primary); font-weight: 600; }
.rso__none { color: #8c2020; font-weight: 600; }


/* ---- a change written now that takes over on a future day ---- */
.rsch {
    border: 1px solid var(--brigade-primary); background: #eef6f3; border-radius: 9px;
    padding: 14px 16px; margin: 0 0 14px;
}
.rsch__t { font-weight: 700; font-size: 1rem; color: #14503f; margin-bottom: 5px; }
.rsch__days {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    background: var(--brigade-primary); color: #fff; border-radius: 999px;
    padding: 2px 9px; margin-left: 9px; vertical-align: 2px;
}
.rsch__p { margin: 0 0 11px; font-size: .93rem; }

/* ==========================================================================
   The station screen.

   ★ Brigade's OWN theme, just bigger. It used to be a dark screen on purpose, and the user
   overruled that: "why you used black theme. remove it. use same theme." So every colour below
   comes from the same tokens as the office screens; only the sizes change, because this is read
   at arm's length with floury hands.

   What did NOT change: no money anywhere, plus and minus rather than a keyboard, and targets
   big enough to hit first time.
   ========================================================================== */
.bn {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--brigade-bg); color: var(--brigade-text);
    display: flex; flex-direction: column;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bn__top {
    flex: 0 0 auto; display: flex; gap: 16px; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    padding: 12px 22px; background: var(--brigade-sidebar-bg); color: var(--brigade-sidebar-fg);
    font-size: .82rem;
}
.bn__who { font-size: .82rem; color: var(--brigade-sidebar-fg); }
.bn__top b, .bn__name { color: #fff; font-weight: 600; }
.bn__name { font-size: 1rem; }
.bn__body { flex: 1 1 auto; overflow-y: auto; padding: 22px 24px 44px; }
.bn__quiet { color: var(--brigade-muted); font-size: 1rem; margin: 0; }
.bn__err {
    color: #8c2f2f; background: #faefef; border: 1px solid #e6c9c9; border-radius: 8px;
    padding: 12px 15px; font-size: 1rem; font-weight: 600; margin: 0 0 14px;
}
.bn__lab {
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--brigade-muted); margin-bottom: 10px;
}
.bn__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bn__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.bn__title { font-size: 1.35rem; font-weight: 700; margin: 0; line-height: 1.2; }
.bn__sub { color: var(--brigade-muted); font-size: .85rem; margin: 3px 0 0; }

/* Buttons: the app's own, scaled up. Nothing smaller than a thumb. */
.bn__btn {
    appearance: none; cursor: pointer; font-family: inherit; line-height: 1.2;
    background: #fff; color: var(--brigade-text); border: 1px solid #cfd4da;
    border-radius: 7px; padding: 10px 17px; font-size: .95rem; font-weight: 600;
}
.bn__btn:active { background: #eef1f4; }
.bn__btn:disabled { opacity: .5; cursor: default; }
.bn__btn--big { padding: 15px 24px; font-size: 1.02rem; border-radius: 9px; }
.bn__btn--huge { padding: 21px 30px; font-size: 1.18rem; border-radius: 11px; }
.bn__btn--go { background: var(--brigade-primary); border-color: var(--brigade-primary); color: #fff; }
.bn__btn--go:active { background: var(--brigade-primary-700); }

/* A job in the list. */
.bn__job {
    display: flex; gap: 15px; align-items: center;
    padding: 15px 0; border-bottom: 1px solid var(--brigade-border);
}
.bn__job:last-child { border-bottom: 0; }
.bn__job-n {
    flex: 0 0 36px; height: 36px; border-radius: 50%;
    background: #eef1f4; color: var(--brigade-muted);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .88rem;
}
.bn__job.is-now .bn__job-n { background: var(--brigade-primary); color: #fff; }
.bn__job-m { flex: 1 1 auto; min-width: 0; }
.bn__job-t { font-size: 1.07rem; font-weight: 600; }
.bn__job-s { font-size: .84rem; color: var(--brigade-muted); margin-top: 2px; }
.bn__flag { color: #7a5600; font-weight: 600; }
.bn__for { color: var(--brigade-text); font-weight: 600; }
.bn__gone { color: #b45309; font-weight: 600; }

/* ----- Sell: standing orders ----- */
.so-grid td .rz-numeric { min-width: 64px; }

/* ----- Purchasing: What to buy ----- */
.wtb-late td { background: #fdf3f3; }

/* ----- Production: the Planner ----- */
.pl-seg { display: inline-flex; border: 1px solid #cfd4da; border-radius: 7px; overflow: hidden; background: #fff; }
.pl-seg button { background: none; border: 0; padding: 7px 13px; font: inherit; font-size: .85rem; font-weight: 600;
                 color: var(--brigade-muted); cursor: pointer; }
.pl-seg button.on { background: var(--brigade-primary); color: #fff; }
.pl-scroll { overflow-x: auto; }
.pl-grid { display: grid; grid-template-columns: 130px repeat(7, 1fr); gap: 6px; min-width: 980px; }
.pl-h { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brigade-muted);
        padding: 6px 8px; border-bottom: 1px solid var(--brigade-border, #e6e8eb); }
.pl-h.today { color: #195a4b; border-bottom: 2px solid var(--brigade-primary); }
.pl-st { font-weight: 700; font-size: .85rem; padding: 10px 8px; }
.pl-st small { display: block; font-weight: 400; color: var(--brigade-muted); font-size: .72rem; }
.pl-cell { background: #fff; border: 1px solid var(--brigade-border, #e6e8eb); border-radius: 7px; min-height: 78px;
           padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.pl-cell.today { border-color: var(--brigade-primary); background: #fbfefd; }
.pl-cell.out { background: #f8fafc; min-height: 56px; }
.pl-tile { background: #f0f4f8; border-left: 3px solid #94a3b8; border-radius: 5px; padding: 5px 7px; font-size: .8rem;
           line-height: 1.3; cursor: pointer; }
.pl-tile b { display: block; font-size: .82rem; }
.pl-tile small { color: var(--brigade-muted); font-size: .72rem; }
.pl-tile.cust { border-left-color: var(--brigade-primary); background: #e7f4ef; }
.pl-tile.go { border-left-color: #2563eb; background: #e8effb; cursor: default; }
.pl-tile.done { border-left-color: #cbd5e1; background: #f8fafc; color: var(--brigade-muted); cursor: default; }
.pl-tile.need { border: 1px dashed #d9a441; border-left: 3px solid #d9a441; background: #fdf4e2; color: #7a5600; }
.pl-tile.out { border-left-color: #cbd5e1; background: #fff; color: var(--brigade-muted); }
.pl-tile.out b { font-weight: 600; color: var(--brigade-text); }
.pl-tile[draggable="true"] { cursor: grab; }
.pl-cell.over { border-color: #c0392b; }
.pl-load { margin-top: auto; font-size: .72rem; color: var(--brigade-muted); font-variant-numeric: tabular-nums; }
.pl-load .bar { height: 6px; background: #eef1f4; border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.pl-load .bar i { display: block; height: 100%; background: var(--brigade-primary); border-radius: 3px; }
.pl-load.warn { color: #7a5600; font-weight: 600; }
.pl-load.warn .bar i { background: #d9a441; }
.pl-load.stop { color: #8c2f2f; font-weight: 600; }
.pl-load.stop .bar i { background: #c0392b; }
.pl-fills { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.pl-fills .pl-load { margin-top: 0; font-size: .8rem; }
.pl-fills .pl-load strong { display: block; color: var(--brigade-text); margin-bottom: 3px; }
.pl-tot { display: grid; grid-template-columns: 130px repeat(7, 1fr); gap: 6px; min-width: 980px; margin-top: 8px; }
.pl-tot div { font-size: .76rem; color: var(--brigade-muted); padding: 0 8px; }
.pl-tot div strong { color: var(--brigade-text); }
.pl-tot div.warn strong { color: #b45309; }
.pl-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--brigade-muted); margin-top: 12px; }
.pl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.pl-tiles { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-tiles .pl-tile { min-width: 180px; }
.pl-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; min-width: 700px; }
.pl-day { background: #fff; border: 1px solid var(--brigade-border, #e6e8eb); border-radius: 6px; padding: 7px 8px;
          min-height: 64px; font-size: .78rem; cursor: pointer; }
.pl-day b { display: block; font-size: .76rem; color: var(--brigade-muted); margin-bottom: 3px; }
.pl-day.today { border-color: var(--brigade-primary); }
.pl-day.warn { background: #fdf4e2; }
.pl-day.off { background: #f8fafc; color: #cbd5e1; }
.pl-day.off b { color: #cbd5e1; }

/* ----- Production: the All runs / To make tabs ----- */
.po-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--brigade-border, #e6e8eb); margin: 0 0 14px; }
.po-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font: inherit;
          font-size: .92rem; font-weight: 600; color: var(--brigade-muted, #64748b); cursor: pointer; }
.po-tab.on { color: #195a4b; border-bottom-color: #1f6f5c; }
.po-tab:focus-visible { outline: 2px solid #1f6f5c; outline-offset: 2px; }
.po-tab__n { display: inline-block; background: rgba(217,119,6,.12); color: #b45309; border-radius: 999px;
             font-size: .72rem; padding: 1px 7px; margin-left: 6px; }

/* What to weigh. The number is what you read, so it is the biggest thing on the line. */
.bn__weigh {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--brigade-border); font-size: 1.02rem;
}
.bn__weigh:last-child { border-bottom: 0; }
.bn__weigh b { font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.bn__lot { display: block; font-size: .78rem; color: var(--brigade-muted); font-weight: 400; }

/* A step. Tapping strikes it through: a place-keeper, not a saved state. */
.bn__step {
    display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
    padding: 13px 0; border-bottom: 1px solid var(--brigade-border);
}
.bn__step:last-child { border-bottom: 0; }
.bn__step-n {
    flex: 0 0 30px; height: 30px; border-radius: 50%;
    background: #eef1f4; color: var(--brigade-muted);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem;
}
.bn__step-t { font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.bn__step-s { font-size: .84rem; color: var(--brigade-muted); margin-top: 2px; }
.bn__step.is-done .bn__step-t { color: var(--brigade-muted); text-decoration: line-through; }
.bn__step.is-done .bn__step-n { background: var(--brigade-primary); color: #fff; }

/* Plus and minus, never a keyboard. */
.bn__counts { display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-start; }
.bn__num {
    background: #fff; border: 2px solid #cfd4da; border-radius: 10px;
    padding: 14px 20px; font-size: 1.9rem; font-weight: 700; line-height: 1;
    display: inline-block; min-width: 100px; text-align: center; font-variant-numeric: tabular-nums;
}
.bn__num--good { border-color: var(--brigade-primary); color: var(--brigade-primary-700); }
.bn__num--bad { border-color: #d9a441; color: #7a5600; }

/* Notes on the job. Amber warns, green is the office talking to you. */
.bn__warn {
    margin-top: 16px; padding: 13px 16px; border-radius: 9px;
    background: #fdf4e2; border: 1px solid #ecd9a8; color: #7a5600; font-size: .95rem;
}
.bn__note {
    margin-top: 16px; padding: 13px 16px; border-radius: 9px; background: #fff;
    border: 1px solid var(--brigade-border);
    font-size: .95rem;
}
.bn__note-h {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brigade-muted); margin-bottom: 5px;
}
/* The PIN box. */
.bn__pin {
    background: #fff; border: 2px solid #cfd4da; border-radius: 10px; padding: 14px 20px;
    font-size: 1.7rem; font-weight: 700; letter-spacing: .35em; min-width: 150px;
    text-align: center; line-height: 1; font-family: inherit;
}

/* ======================= CUSTOMER PAGES (2026-10-01, from the approved mockup) ======================= */
.cu-sum { font-size: .85rem; color: var(--brigade-muted); margin: 10px 0 12px; }
.cu-sum strong { color: var(--brigade-text); }
.cu-bad { color: #b91c1c !important; font-weight: 600; }
.cu-warn { color: #b45309; font-weight: 600; }
.cu-ok { color: var(--brigade-primary, #1f6f5c); font-size: .85rem; }
.cu-muted, .cu-muted a, tr.cu-muted td { color: var(--brigade-muted); }
.cu-bar__head { display: flex; justify-content: space-between; font-size: .78rem; gap: 6px; }
.cu-bar { height: 6px; border-radius: 999px; background: #eef1f4; margin-top: 4px; overflow: hidden; }
.cu-bar__fill { height: 6px; border-radius: 999px; background: var(--brigade-primary, #1f6f5c); }
.cu-bar__fill.is-warn { background: #e0a100; }
.cu-bar__fill.is-over { background: #c0392b; }
.cu-foot { font-size: .82rem; color: var(--brigade-muted); line-height: 1.5; margin: 12px 0 0; }
.cu-foot strong { color: var(--brigade-text); }
.cu-stop { display: flex; gap: 12px; align-items: flex-start; }
.cu-stop__note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--brigade-border); font-size: .82rem; color: var(--brigade-muted); }
.cu-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #eef1f4; font-size: .9rem; }
.cu-rows > div:first-child { border-top: 0; }
.cu-aging .ent-metric__value { font-size: 1.25rem; }
.cu-delivery { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
@media (max-width: 900px) { .cu-delivery { grid-template-columns: 1fr; } }
.cu-addr { border: 1px solid var(--brigade-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.cu-addr.is-usual { border-color: var(--brigade-primary, #1f6f5c); background: #f3f9f6; }
.cu-ticks { display: flex; flex-direction: column; gap: 12px; }
.cu-tick { display: flex; gap: 10px; align-items: flex-start; }
.cu-tick .mf-hint { display: block; margin-top: 2px; }

/* New order, taken in the office */
.no-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 1000px) { .no-top { grid-template-columns: 1fr; } }
.no-label { display: block; font-size: .78rem; font-weight: 600; color: var(--brigade-muted); margin-bottom: 6px; }
.no-sub { font-size: .85rem; color: var(--brigade-muted); margin-top: 8px; line-height: 1.6; }
.no-sub strong { color: var(--brigade-text); }
.no-types { display: flex; gap: 8px; margin-top: 10px; }
.no-type { font-size: .82rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--brigade-border); background: #fff; color: var(--brigade-muted); cursor: pointer; }
.no-type.is-on { background: var(--brigade-primary, #1f6f5c); border-color: var(--brigade-primary, #1f6f5c); color: #fff; }
.no-type.is-off { color: #9aa3af; text-decoration: line-through; }
.no-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
.no-totals { text-align: right; line-height: 1.7; color: var(--brigade-muted); font-size: .9rem; }
.no-totals strong { display: block; font-size: 1.15rem; color: var(--brigade-text); }
.no-stop { background: #fdf2f2; border: 1px solid #e0b4b4; border-radius: 10px; padding: 12px 14px; margin: 10px 0; color: #8c2f2f; font-size: .9rem; }
.no-warn { background: #fdf2f2; border: 1px solid #e0b4b4; border-radius: 10px; padding: 12px 14px; margin: 10px 0; font-size: .9rem; line-height: 1.5; }
.no-warn strong { color: #8c2f2f; }
.no-note { background: #fff8e6; border: 1px solid #f0d9a6; border-radius: 10px; padding: 10px 14px; margin: 10px 0; color: #8c5a12; font-size: .88rem; }
.no-why { font-size: .78rem; padding: 3px 8px; border-radius: 999px; background: #eef1f4; color: var(--brigade-text); }
.no-why--agreed { background: #e6f2ec; color: #1e6b4b; }
.no-why--standard { background: transparent; color: var(--brigade-muted); padding-left: 0; }
.no-why--typed { background: #fff3d6; color: #8c5a12; }
.no-why--none { background: #fdf2f2; color: #8c2f2f; }
.no-typed input { border-color: #e0a100 !important; background: #fffbea !important; }

.brigade-auth-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; color: var(--brigade-muted); font-size: .8rem; }
.brigade-auth-or::before, .brigade-auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--brigade-border); }

/* The customer's details edited on the page itself (2026-10-02). One column: two columns squeezed
   every label and box (their screenshots). A band per group, its dot, then the sections. */
.cu-edit { display: flex; flex-direction: column; gap: 12px; }
.cu-edit__band { display: flex; align-items: baseline; gap: 14px; font-weight: 700; font-size: 1rem; padding: 10px 22px 4px; border-bottom: 2px solid var(--brigade-primary, #1f6f5c); margin-top: 6px; }
.cu-edit__band:first-child { margin-top: 0; }
.cu-edit__sub { font-weight: 400; font-size: .82rem; color: var(--brigade-muted); }
.cu-edit .brigade-form-section { margin: 0; }
.cu-edit .brigade-field label { white-space: nowrap; }
.cu-edit .brigade-field .mf-hint { white-space: normal; }
.cu-ticks--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
@media (max-width: 1000px) { .cu-ticks--row { grid-template-columns: 1fr; } }


/* ===== THE PORTAL AS AN ORDER PAD (their option B, 2026-10-02, built from the approved mockup) ===== */
.pp-nav-count { display: inline-block; margin-left: 6px; background: #1f6f5c; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .74rem; font-weight: 700; }
.pp-hold { background: #fef2f2; color: #991b1b; border: 1px solid rgba(239,68,68,.25); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: .92rem; }
.pp-hold--grey { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.pp-hero {
    background: #1f6f5c; color: #fff; border-radius: 12px; padding: 18px 22px; margin-bottom: 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pp-hero__label { font-size: .7rem; letter-spacing: .08em; opacity: .85; font-weight: 600; }
.pp-hero__day { font-size: 1.4rem; font-weight: 700; margin-top: 2px; }
.pp-hero__sub { font-size: .86rem; opacity: .92; margin-top: 2px; }
.pp-hero__link { color: #fff; text-decoration: underline; }
.pp-hero__btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 8px; font: inherit; font-size: .9rem;
    font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; line-height: 1.2;
}
.pp-btn:hover { text-decoration: none; filter: brightness(.97); }
.pp-btn:disabled { opacity: .55; cursor: default; }
.pp-btn--white { background: #fff; color: #1f6f5c; }
.pp-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); font-weight: 500; }
.pp-btn--green { background: #1f6f5c; color: #fff; }
.pp-btn--plain { background: #fff; color: var(--brigade-text); border-color: var(--brigade-border); font-weight: 500; }
.pp-btn--danger { background: #fff; color: #b91c1c; border-color: rgba(239,68,68,.35); font-weight: 500; }
.pp-grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 14px; }
.pp-grid2--order { grid-template-columns: 1.5fr 1fr; }
.pp-grid2b { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; margin-bottom: 14px; }
.pp-box { background: var(--brigade-card); border: 1px solid var(--brigade-border); border-radius: 12px; padding: 16px; min-width: 0; }
.pp-box h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.pp-box__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-box__hint { font-size: .8rem; color: var(--brigade-muted); }
.pp-box__hint a { color: #1f6f5c; }
.pp-usual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pp-usual__item { display: flex; gap: 10px; align-items: center; border: 1px solid #eef1f4; border-radius: 10px; padding: 8px; min-width: 0; }
.pp-usual__name { font-weight: 600; font-size: .88rem; }
.pp-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex: 0 0 48px; background: #eef1f4; display: flex; align-items: center; justify-content: center; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb--empty span { font-weight: 700; color: #9aa3af; font-size: 1.1rem; }
.pp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: .8rem; margin-top: 10px; }
.pp-week__day { color: var(--brigade-muted); }
.pp-week__cell { background: #eef1f4; border-radius: 6px; padding: 6px 0; color: #9aa3af; }
.pp-week__cell--on { background: #e6f2ec; color: var(--brigade-text); font-weight: 700; }
.pp-money { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-money--owed { color: #b45309; }
.pp-money--credit { color: #1f6f5c; }
.pp-owed { color: #b45309; font-weight: 600; }
.pp-owed--over { color: #b91c1c; font-weight: 600; }
.pp-inv { font-size: .86rem; }
.pp-inv__head, .pp-inv__row { display: grid; grid-template-columns: 1.3fr 1.2fr .8fr .8fr 60px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef1f4; }
.pp-inv__head { font-size: .76rem; color: var(--brigade-muted); border-bottom-color: var(--brigade-border); padding-top: 10px; padding-bottom: 4px; }
.pp-inv__row:last-child { border-bottom: 0; }
.pp-inv__row--paid { color: var(--brigade-muted); }
.pp-inv .r, .pp-lines .r { text-align: right; }
.pp-pdf { display: inline-block; font-size: .76rem; border: 1px solid #d6dbe2; border-radius: 6px; padding: 3px 8px; color: var(--brigade-text); text-decoration: none; }
.pp-pdf:hover { border-color: #1f6f5c; text-decoration: none; }
.pp-title__sub { font-size: .9rem; color: var(--brigade-muted); font-weight: 500; margin-left: 8px; }

/* the shop */
.pp-shop-head { align-items: center; }
.pp-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pp-search { padding: 9px 12px; border: 1px solid #d6dbe2; border-radius: 8px; font: inherit; font-size: .92rem; background: #fff; width: 260px; max-width: 100%; }
.pp-search:focus { outline: 2px solid #1f6f5c; outline-offset: 1px; border-color: #1f6f5c; }
.pp-chip {
    font: inherit; font-size: .84rem; padding: 7px 12px; border-radius: 999px; border: 1px solid #d6dbe2; background: #fff; color: #5b6676; cursor: pointer;
}
.pp-chip:hover { border-color: #1f6f5c; color: #1f6f5c; }
.pp-chip--on { background: #1f6f5c; border-color: #1f6f5c; color: #fff; font-weight: 600; }
.pp-chip--star { margin-left: auto; }
.pp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pp-card { background: #fff; border: 1px solid var(--brigade-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.pp-card--poa { opacity: .8; }
.pp-card__img { position: relative; height: 150px; background: #eef1f4; }
.pp-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-card__img--empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f1efe9, #e6e2d8); }
.pp-card__nophoto { font-weight: 700; color: #8a8378; font-size: 1.05rem; padding: 0 14px; text-align: center; }
.pp-card__cat { position: absolute; left: 8px; bottom: 8px; font-size: .7rem; background: #fff; border-radius: 999px; padding: 3px 8px; color: #5b6676; }
.pp-card__star { position: absolute; right: 8px; top: 8px; font-size: .8rem; background: #fff; border-radius: 999px; padding: 2px 7px; color: #b45309; }
.pp-card__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pp-card__name { font-weight: 700; font-size: .98rem; }
.pp-card__desc { font-size: .78rem; color: var(--brigade-muted); line-height: 1.4; }
.pp-allergen--contains { color: #8c2f2f; }
.pp-allergen--may { color: #8c5a12; }
.pp-card__price { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.pp-card__amount { font-size: 1.15rem; font-weight: 700; }
.pp-card__why { font-size: .7rem; color: #1f6f5c; text-align: right; }
.pp-card__why--std { color: var(--brigade-muted); }
.pp-card__ask { font-size: .95rem; font-weight: 600; color: var(--brigade-muted); }
.pp-card__rule { font-size: .76rem; color: var(--brigade-muted); }
.pp-card__rule--made { color: #8c5a12; }
.pp-card__order { display: flex; gap: 6px; align-items: center; }
.pp-stepper { display: inline-flex; border: 1px solid #d6dbe2; border-radius: 8px; overflow: hidden; background: #fff; }
.pp-stepper button { font: inherit; font-weight: 700; padding: 7px 11px; background: none; border: 0; cursor: pointer; color: var(--brigade-text); min-width: 36px; }
.pp-stepper button:hover { background: #f1f5f9; }
.pp-stepper > span { padding: 7px 10px; min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-add {
    flex: 1; text-align: center; padding: 8px 10px; border-radius: 8px; background: #1f6f5c; color: #fff; text-decoration: none;
    font: inherit; font-size: .84rem; font-weight: 600; border: 1px solid #1f6f5c; cursor: pointer; white-space: nowrap;
}
.pp-add:hover { text-decoration: none; filter: brightness(.95); }
.pp-add--in { background: #fff; color: #1f6f5c; }
.pp-add--ask { background: #fff; color: var(--brigade-muted); border-color: #d6dbe2; font-weight: 500; }
.pp-card__history { font-size: .74rem; color: var(--brigade-muted); }
.pp-cartbar { display: none; }

/* your order */
.pp-cart { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.pp-side { display: flex; flex-direction: column; gap: 12px; }
.pp-side__label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: var(--brigade-muted); margin-bottom: 6px; }
.pp-lines { font-size: .9rem; }
.pp-lines__head, .pp-lines__row { display: grid; grid-template-columns: 56px 1fr 130px 90px 90px 30px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef1f4; }
.pp-lines--view .pp-lines__head, .pp-lines--view .pp-lines__row { grid-template-columns: 56px 1fr 90px 90px 90px; }
.pp-lines--inv .pp-lines__head, .pp-lines--inv .pp-lines__row { grid-template-columns: 1fr 90px 90px 70px 90px; }
.pp-lines__head { font-size: .76rem; color: var(--brigade-muted); padding: 0 0 6px; border-bottom-color: var(--brigade-border); }
.pp-lines__row--gone { opacity: .75; }
.pp-break { color: #1f6f5c; }
.pp-x { font: inherit; font-size: 1.1rem; background: none; border: 0; color: #9aa3af; cursor: pointer; padding: 4px 6px; }
.pp-x:hover { color: #b91c1c; }
.pp-totals { display: flex; justify-content: flex-end; align-items: baseline; gap: 20px; padding-top: 12px; border-top: 1px solid var(--brigade-border); margin-top: 4px; }
.pp-totals strong { font-size: 1.15rem; }
.pp-days { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-ticks { font-size: .88rem; line-height: 1.9; }
.pp-tick--ok span { color: #1f6f5c; font-weight: 700; margin-right: 4px; }
.pp-tick--no { color: #991b1b; }
.pp-tick--no span { font-weight: 700; margin-right: 4px; }
.pp-send {
    display: block; width: 100%; margin-top: 12px; padding: 12px; border-radius: 8px; background: #1f6f5c; color: #fff; border: 0;
    font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.pp-send:hover { filter: brightness(.95); }
.pp-send:disabled { background: #cbd5e1; cursor: default; }

/* one order */
.pp-stepsbox { margin-bottom: 14px; padding: 18px; }
.pp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: start; text-align: center; }
.pp-step__dot { width: 28px; height: 28px; border-radius: 999px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: .85rem; box-sizing: border-box; border: 2px solid #d6dbe2; color: #fff; }
.pp-step--done .pp-step__dot { background: #1f6f5c; border-color: #1f6f5c; }
.pp-step--now .pp-step__dot { background: #d97706; border-color: #d97706; }
.pp-step__name { font-size: .84rem; font-weight: 600; margin-top: 6px; }
.pp-step__when { font-size: .72rem; color: var(--brigade-muted); }
.pp-step--todo .pp-step__name, .pp-step--todo .pp-step__when { color: #9aa3af; }
.pp-steps__words { text-align: center; margin-top: 14px; font-size: .86rem; }
.pp-invoice__status { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.pp-invoice__png { width: 100%; max-width: 820px; border: 1px solid var(--brigade-border); border-radius: 6px; display: block; margin-top: 6px; }

/* the office: the photo box on the item page */
.it-photo { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.it-photo__pic { width: 200px; height: 150px; border-radius: 10px; background: #eef1f4; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #9aa3af; font-size: .8rem; }
.it-photo__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.it-photo__btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .it-photo { grid-template-columns: 1fr; } }

/* the portal on a phone: the sidebar becomes a top strip, one column, two cards across, the order one tap away */
@media (max-width: 860px) {
    .brigade-portal.brigade-shell { grid-template-columns: 1fr; }
    .brigade-portal .brigade-sidebar { flex-direction: row; align-items: center; gap: 6px; padding: 10px 12px; overflow-x: auto; }
    .brigade-portal .brigade-brand { padding: 0 8px 0 0; font-size: 1rem; white-space: nowrap; }
    .brigade-portal .brigade-nav { flex-direction: row; gap: 2px; }
    .brigade-portal .brigade-nav a { padding: 8px 10px; font-size: .82rem; white-space: nowrap; }
    .brigade-portal .brigade-sidebar__foot { display: none; }
    .brigade-portal .brigade-topbar { height: auto; padding: 8px 14px; }
    .brigade-portal .brigade-content { padding: 14px 14px 90px; }
    .pp-grid2, .pp-grid2b, .pp-grid2--order, .pp-cart { grid-template-columns: 1fr; }
    .pp-usual { grid-template-columns: 1fr; }
    .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pp-card__img { height: 110px; }
    .pp-lines__head, .pp-lines__row { grid-template-columns: 48px 1fr 110px 30px; }
    .pp-lines__head .r, .pp-lines__row .r { display: none; }
    .pp-lines--view .pp-lines__head, .pp-lines--view .pp-lines__row { grid-template-columns: 48px 1fr 70px; }
    .pp-lines--view .r:nth-last-child(2), .pp-lines--view .pp-lines__head .r:nth-last-child(2) { display: none; }
    .pp-inv__head, .pp-inv__row { grid-template-columns: 1.2fr 1fr .8fr; }
    .pp-inv__head > div:nth-child(2), .pp-inv__row > div:nth-child(2), .pp-inv__head > div:nth-child(5), .pp-inv__row > div:nth-child(5) { display: none; }
    .pp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
    .pp-step__name { font-size: .7rem; }
    .pp-step__when { display: none; }
    .pp-shop-head .pp-btn--green { display: none; }
    .pp-cartbar {
        position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20;
        display: flex; justify-content: space-between; padding: 14px; border-radius: 10px; background: #1f6f5c; color: #fff;
        font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(2,6,23,.25);
    }
    .pp-cartbar:hover { text-decoration: none; }
}


/* ============================================================================
   THE ITEM PAGE AS DRAWN (2026-10-05): the i next to a label, plain cards, no strips,
   the three-dot menu, tags, tiles. The i (.bg-info) is shared by every screen.
   ============================================================================ */
.bg-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 2px; cursor: pointer; outline: none; }
.bg-info__i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #9aa3ad; color: #64748b; font-size: 10px; font-weight: 700;
    font-style: normal; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.bg-info:hover .bg-info__i, .bg-info.is-open .bg-info__i, .bg-info:focus .bg-info__i { border-color: var(--brigade-primary); color: var(--brigade-primary); }
/* ★ 2026-10-10, their report. The tip used to be position:absolute, 300px wide, left-aligned to the
   icon. An i near the right-hand edge therefore made the DOCUMENT wider: a horizontal scrollbar
   appeared, the page reflowed, the icon slid out from under the pointer, the tip hid, the bar went
   away, and the whole thing blinked. The far side of the words could not be read at all.
   It is now fixed to the WINDOW and placed by brigade.js, clamped inside it, so it can never change
   the page's width; it flips above the icon when there is no room below, and the arrow follows. */
.bg-info__tip { display: none; position: fixed; left: 0; top: 0; z-index: 9999;
    width: max-content; max-width: min(320px, calc(100vw - 20px));
    background: #1f2933; color: #fff; pointer-events: none; /* words only: a click on the field under it must reach the field (spec 80, 2026-10-06) */
    font-weight: 400; font-size: .82rem; line-height: 1.45; padding: 9px 12px; border-radius: 6px; box-shadow: 0 6px 20px rgba(15,23,42,.18); text-transform: none; letter-spacing: 0;
    white-space: normal; overflow-wrap: anywhere; }
.bg-info__tip::before { content: ''; position: absolute; top: -5px; left: var(--tip-arrow, 6px); width: 10px; height: 10px; background: #1f2933; transform: rotate(45deg); }
.bg-info__tip.is-above::before { top: auto; bottom: -5px; }
.bg-info:hover .bg-info__tip, .bg-info.is-open .bg-info__tip, .bg-info:focus .bg-info__tip { display: block; }

.it-page .brigade-form-section { border-radius: 8px; }
.it-page .brigade-form-section h3 { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; }
.it-crumb { font-size: .86rem; color: var(--brigade-muted); margin: 0 0 6px; }
.it-crumb a { color: var(--brigade-muted); text-decoration: none; }
.it-page .it-head { align-items: center; gap: 14px; margin-bottom: 14px; justify-content: flex-start; }
.it-page .it-head__name { font-size: 1.7rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.it-head__spacer { flex: 1 1 auto; }
.it-pill { font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: 4px; background: #e6f2ee; color: var(--brigade-primary); }
.it-pill.is-off { background: #eef0f2; color: #64748b; }
.it-page .it-chips { gap: 10px; margin-bottom: 18px; align-items: center; }
.it-page .it-chip { border-radius: 6px; padding: 8px 14px; font-size: .86rem; }
.it-page .it-chip__bx { border-radius: 3px; }
.it-note { font-size: .84rem; color: var(--brigade-muted); margin: 10px 0 0; display: block; }
.it-muted { color: var(--brigade-muted); }
.it-h3sub { font-weight: 400; font-size: .82rem; }
.it-toggles { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.it-toggles--col { flex-direction: column; gap: 14px; }
.it-toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.it-unitbox { display: flex; align-items: center; gap: 8px; }
.it-table th { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.it-table td { padding: 9px 8px; border-bottom: 1px solid #eef0f2; vertical-align: top; font-size: .9rem; }
.it-table a { color: var(--brigade-primary); font-weight: 600; text-decoration: none; }
.it-tag { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: #eef0f2; color: #3b4652; white-space: nowrap; }
.it-tag.ok { background: #e6f2ee; color: var(--brigade-primary); }
.it-tag.bad { background: #fde8e8; color: #b42318; }
.it-tag.hold { background: #fff1d6; color: #9a5b00; }
.it-kpis { display: flex; flex-wrap: wrap; gap: 14px; }
.it-kpi { flex: 1 1 180px; border: 1px solid var(--brigade-border); border-radius: 8px; padding: 14px 16px; background: #fff; min-width: 0; }
.it-kpi__k { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.it-kpi__v { font-size: 1.6rem; font-weight: 600; margin-top: 4px; }
.it-kpi__v--input .rz-numeric { max-width: 150px; }
.it-kpi__s { font-size: .82rem; color: var(--brigade-muted); }
.it-stocktop { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.it-stocktop .it-kpis { flex: 1; }
.it-dots { position: relative; flex: none; }
.it-dots__b { width: 38px; height: 38px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; font-size: 20px; color: #3b4652; cursor: pointer; }
.it-menu { position: absolute; right: 0; top: 44px; background: #fff; border: 1px solid var(--brigade-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.14); min-width: 240px; z-index: 20; padding: 6px 0; }
.it-menu > div { padding: 10px 14px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.it-menu > div span { display: block; font-weight: 400; color: var(--brigade-muted); font-size: .8rem; }
.it-menu > div:hover { background: #f6f7f9; }
.it-allg { display: flex; flex-wrap: wrap; gap: 8px; }
.it-allg__a { padding: 6px 12px; border: 1px solid #cfd4da; border-radius: 6px; font-size: .88rem; background: #fff; cursor: pointer; user-select: none; }
.it-allg__a.is-on { border-color: var(--brigade-primary); background: #e6f2ee; color: var(--brigade-primary); font-weight: 600; }
.it-allg__a.is-may { border-color: #d9a441; background: #fff1d6; color: #9a5b00; font-weight: 600; }
.it-photo { display: flex; gap: 18px; align-items: center; }
.it-photo__pic { width: 120px; height: 120px; border-radius: 8px; background: #e6e8eb; display: flex; align-items: center; justify-content: center; color: var(--brigade-muted); font-size: .84rem; overflow: hidden; flex: none; }
.it-photo__pic img { width: 100%; height: 100%; object-fit: cover; }
.it-photo__btns { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* the tabs: plain text, an underline on the one you are on */
/* Tabs look the same on every page (2026-10-05, the item page's look, their rule "same across project"):
   plain words with an underline on the open one, no boxes, no dots, no counts. */
.rz-tabview-nav { border-bottom: 1px solid var(--brigade-border); background: transparent; gap: 0; }
.rz-tabview-nav li, .rz-tabview-nav li.rz-tabview-selected, .rz-tabview-nav li:hover { background: transparent; border: 0; margin: 0; box-shadow: none; }
.rz-tabview-nav li button, .rz-tabview-nav li button:hover, .rz-tabview-nav li a, .rz-tabview-nav li a:hover { font-weight: 600; color: var(--brigade-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; padding: 10px 16px; box-shadow: none; }
.rz-tabview-nav li.rz-tabview-selected button, .rz-tabview-nav li.rz-tabview-selected a { color: var(--brigade-text); border-bottom-color: var(--brigade-primary); }
.rz-tabview-panel { border: 0; background: transparent; padding: 22px 0 0; }
/* The "Build from recipe" row above the ingredients editor on a made item (2026-10-12). */
.it-build { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.it-warn { background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 6px; padding: 6px 10px; margin: 0 0 8px; font-size: .84rem; }
/* How much of a text box is used, drawn under it by js/brigade.js for every box with a maxlength. */
.bg-count { display: block; text-align: right; font-size: .72rem; color: var(--brigade-muted); margin-top: 2px; line-height: 1; }

.it-lab { font-size: .8rem; font-weight: 600; color: #3b4652; display: flex; gap: 6px; align-items: center; }
.it-page .lbl-side { flex: 0 0 600px; max-width: 100%; }
.it-page .lbl-edit { flex: 1 1 560px; min-width: 0; }
.it-page .lbl-split { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }

/* The price history that opens under an item row on the supplier page (2026-10-05, the Prices tab folded in). */
.sp-hist { padding: 6px 12px 10px 44px; }
.sp-hist__t { border-collapse: collapse; font-size: .84rem; min-width: 520px; }
.sp-grid .sp-hist__t th, .sp-hist__t th { text-align: left; width: auto; background: transparent; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 600; padding: 4px 28px 4px 0; border-bottom: 1px solid var(--brigade-border); white-space: nowrap; }
.sp-grid .sp-hist__t td, .sp-hist__t td { width: auto; background: transparent; padding: 5px 28px 5px 0; border-bottom: 1px solid var(--brigade-border); white-space: nowrap; }
.sp-grid .sp-hist__t .r, .sp-hist__t .r { text-align: right; }
.sp-hist__link { font-size: .82rem; margin-right: 10px; cursor: pointer; }
.sp-grid .rz-datatable-detail > td { background: #fafbfc; }
.sp-grid .rz-datatable-data > tbody > tr.rz-expanded-row-content > td { background: #fafbfc; }

/* The purchase order page in the item page's pattern (2026-10-05, mockup approved). */
.it-pill.part { background: #fff1d6; color: #9a5b00; }
.po-kpis { margin-bottom: 16px; }
.po-page .brigade-form { max-width: none; }
.po-page .brigade-form-section h3 { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; }
.po-lines td { vertical-align: top; }
.po-lines .po-lt { padding-top: 16px; font-weight: 600; }
.po-del { border: 0; background: transparent; color: #b42318; font-size: 15px; cursor: pointer; margin-top: 8px; }
.po-add { display: inline-block; margin: 10px 0 0; font-weight: 600; color: var(--brigade-primary); text-decoration: none; font-size: .9rem; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit; }
.po-danger { color: #b42318; }
.po-page .it-head__meta { font-size: .86rem; }
.po-page .mf-readonly { min-height: 20px; }
/* On the purchase order page the totals stack on the right, as drawn, under the lines. */
.po-page .brigade-recipe-totals { flex-direction: column; align-items: flex-end; border: 0; border-radius: 0; overflow: visible; margin-top: 12px; gap: 4px; }
.po-page .brigade-recipe-totals > div { flex: none; width: 320px; display: flex; justify-content: space-between; align-items: center; background: transparent; border: 0; padding: 3px 0; }
.po-page .brigade-recipe-totals > div:last-child { border-top: 1px solid var(--brigade-border); padding-top: 8px; margin-top: 2px; }
.po-page .brigade-recipe-totals span { display: inline; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 400; color: var(--brigade-muted); margin: 0; }
.po-page .brigade-recipe-totals strong { font-size: 1rem; }
.po-page .brigade-recipe-totals > div:last-child strong { font-size: 1.2rem; }
.po-page .po-under { margin-top: 12px; }
.po-bill { margin-left: 10px; font-size: .82rem; font-weight: 600; color: var(--brigade-primary); text-decoration: none; white-space: nowrap; }
.it-menu > div.it-muted b { color: var(--brigade-muted); }
.bill-covered { text-align: center; padding: 40px 24px; }
.bill-covered h2 { margin: 0 0 8px; font-size: 1.5rem; }
.bill-covered p { margin: 0 auto 18px; max-width: 520px; color: var(--brigade-muted); }
.bill-covered__links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.grn-bills a, .brigade-page-sub a { color: var(--brigade-primary); font-weight: 600; text-decoration: none; }
.grn-bill { margin: 0 10px 0 6px; }
.grn-bill .it-tag { margin-left: 4px; }

/* The goods receipts list as redrawn (2026-10-06): the item page's pattern, filters that find a delivery, a row that reads. */
.gr-page .it-filters { margin: 14px 0 12px; row-gap: 10px; }
.gr-page .it-filters .it-search { flex: 1 1 320px; }
.gr-page .it-tag { max-width: 110px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.gr-page .it-filters .rz-dropdown, .gr-page .it-filters .rz-datepicker { min-width: 150px; }
.gr-sub { display: block; color: var(--brigade-muted); font-size: .8rem; margin-top: 2px; }
.gr-page .rz-datatable-data td { vertical-align: top; }
.wtb-page .it-tag { max-width: none; white-space: nowrap; }
.wtb-page .brigade-form-section h3 { display: flex; align-items: center; gap: 6px; }
/* What to buy: six calm columns, the sum folded under the material, the day by day under "why". */
.wtb-table th { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brigade-muted); }
.wtb-table td { vertical-align: top; padding: 11px 10px; }
.wtb-table td.num { white-space: nowrap; }
.wtb-table .gr-sub a { color: var(--brigade-primary); font-weight: 600; text-decoration: none; }
.wtb-table .wtb-why td { background: #fafbfc; padding-top: 4px; }
.wtb-table .wtb-why table { margin: 4px 0 8px; }
.wtb-page .brigade-lines tbody tr.wtb-late td { background: transparent; }

/* What to buy as baskets, one a supplier (their A, 2026-10-06). */
.wtb-h { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; margin: 4px 0 12px; }
.wtb-baskets { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.bk { background: #fff; border: 1px solid var(--brigade-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.bk--none { border-style: dashed; }
.bk__h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--brigade-border); }
.bk__h b { font-size: 1rem; }
.bk__l { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid #f0f2f4; }
.bk__l:first-of-type { border-top: 0; }
.bk__n { flex: 1; min-width: 0; }
.bk__n b { display: block; }
.bk__n span { color: var(--brigade-muted); font-size: .82rem; }
.bk__n a { color: var(--brigade-primary); font-weight: 600; text-decoration: none; }
.bk__q { text-align: right; white-space: nowrap; }
.bk__q b { display: block; }
.bk__q span { color: var(--brigade-muted); font-size: .82rem; }
.bk__why { padding: 0 16px 10px 44px; background: #fafbfc; }
.bk__why table { margin: 6px 0 4px; }
.bk__f { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fafbfc; border-top: 1px solid var(--brigade-border); margin-top: auto; }
.wtb-chase td { vertical-align: top; }
/* the link editor and the document form, hosted on a page instead of a dialog */
.po-page .smd3 { max-height: none; }
.po-page .smd3-body { overflow: visible; padding-right: 0; }
/* on a page the link editor's sections are plain white, like every other page (their ask 2026-10-06) */
.po-page .smd3-sec { background: #fff; }
/* the recipes list: allergen names wrap instead of being cut */
.rc-page .rz-data-grid td:nth-child(4) { white-space: normal; line-height: 1.3; }
.rc-page .rz-data-grid td:nth-child(4) .rz-cell-data { white-space: normal; }
/* the row menu on a list: a grid cell clips what overflows it, so the menu was drawn and never seen */
.rc-page .rz-data-grid, .rc-page .rz-data-grid-data, .rc-page .rz-datatable-data, .rc-page .rz-data-grid td, .rc-page .rz-data-grid td .rz-cell-data, .rc-page .rz-data-grid tr { overflow: visible !important; }
.rc-page .it-menu { right: 0; top: 40px; }
/* the recipe page in the item page's pattern (2026-10-06) */
.rf-page .brigade-form { max-width: none; }
.rf-page .brigade-form-section h3 { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; }
.rf-page .rs__row { display: none; }
.rf-kpis { margin-bottom: 18px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rf-kpis .it-kpi { flex: none; min-width: 0; }
@media (max-width: 1100px) { .rf-kpis { grid-template-columns: repeat(3, 1fr); } }
.rf-kpis .it-kpi__v { font-size: 1.3rem; }
.rf-kpi--one { background: #e6f2ee; border-color: #cfe3d9; }
.rf-kpi--one .it-kpi__v { color: var(--brigade-primary); }

/* the recipe step as drawn 2026-10-06: people and machine blocks, the cost written out */
.rs-block { margin-top: 12px; }
.rs-block__l { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; margin-bottom: 6px; }
.rs-who { display: grid; grid-template-columns: minmax(180px, 320px) 90px 110px 36px; gap: 8px; align-items: center; margin-bottom: 6px; }
.rs-who > :first-child { min-width: 0; }
.rs-who .rz-numeric { width: 100%; }
.rs-who--h { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 600; margin-bottom: 2px; }
.rs-who--m { grid-template-columns: minmax(180px, 320px) 110px auto; }
.rs-calc { margin-top: 12px; background: #f4f6f8; border-radius: 6px; padding: 9px 12px; font-size: .84rem; color: #3b4652; line-height: 1.6; }
.rs-calc b { display: block; color: var(--brigade-text); }
.rs-calc span { display: block; }
.rf-page .rs--open { align-items: flex-start; }

/* Version history, what changed: one line per change (2026-10-06) */
.rv-what { display: flex; flex-direction: column; gap: 2px; }
.rv-what span { white-space: normal; }

/* The mark (2026-10-06): the toque tile beside the word, in the sidebar, on the sign-in card and the splash */
.brigade-brand__mark { flex: none; display: block; }
.brigade-splash__logo { margin-bottom: 4px; }

/* Cost variance (2026-10-06): the list pattern; the row menu must not be clipped */
.cv-page .rz-data-grid, .cv-page .rz-data-grid-data, .cv-page .rz-datatable-data, .cv-page .rz-data-grid td, .cv-page .rz-data-grid td .rz-cell-data, .cv-page .rz-data-grid tr { overflow: visible !important; }
.cv-page .it-menu { right: 0; top: 40px; }
.cv-page .rz-data-grid td:nth-child(2), .cv-page .rz-data-grid td:nth-child(2) .rz-cell-data { white-space: normal; line-height: 1.3; }
.cv-split { display: block; font-size: .78rem; color: var(--brigade-muted); white-space: normal; }
.cv-page .rz-data-grid td:nth-child(5), .cv-page .rz-data-grid td:nth-child(5) .rz-cell-data { white-space: normal; line-height: 1.3; }
.cv-why { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; }

/* Production list (2026-10-06): the list pattern; the row menu must not be clipped; the To make chip is a button */
.pr-page .rz-data-grid, .pr-page .rz-data-grid-data, .pr-page .rz-datatable-data, .pr-page .rz-data-grid td, .pr-page .rz-data-grid td .rz-cell-data, .pr-page .rz-data-grid tr { overflow: visible !important; }
.pr-page .it-menu { right: 0; top: 40px; }
.pr-page .rz-data-grid td, .pr-page .rz-data-grid td .rz-cell-data { white-space: normal; line-height: 1.3; }
.pr-page button.bg-fchip { font: inherit; cursor: pointer; }
.pr-sep { width: 1px; background: var(--brigade-border, #e6e8eb); margin: 0 4px; align-self: stretch; }

/* New run (2026-10-06): the form sections sit in the pattern page */
.nr-page .brigade-form { max-width: none; }
.nr-page .brigade-form-section h3 { display: flex; align-items: center; gap: 8px; }

/* New run: the warnings at the top, plain (2026-10-06) */
.nr-warn { background: #fff7e6; border: 1px solid #f1d59b; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; color: #6b4500; font-size: .95rem; }
.nr-warn b { color: #5a3a00; }
.nr-warn--stop { background: #fdeeee; border-color: #f0c2c2; color: #7a1f1f; } .nr-warn--stop b { color: #7a1f1f; }
.nr-warn--ok { background: #eef6f2; border-color: #c9e2d6; color: #1f4d3d; } .nr-warn--ok b { color: #1f4d3d; }

/* The run page (2026-10-07): the head's menu must not be clipped; strips hold small buttons */
.run-page .it-head { overflow: visible; }
.run-page .it-head .it-dots { margin-left: 4px; }
.run-page .nr-warn .rz-button { vertical-align: middle; }

/* New runs (2026-10-07): one row per run */
.nr-rows td, .nr-rows td .rz-cell-data { white-space: normal; vertical-align: top; }
.nr-for { display: flex; flex-direction: column; gap: 4px; }
.nr-for__l { display: flex; align-items: center; gap: 8px; }
.nr-for__l.is-off { color: var(--brigade-muted); }
.nr-total { display: flex; gap: 24px; align-items: center; border-top: 2px solid #1d2730; padding-top: 10px; margin-top: 12px; font-size: .92rem; flex-wrap: wrap; }
.nr-total b { margin-left: 4px; }
.nr-rows .it-tag { white-space: normal; display: inline-block; line-height: 1.3; }
.nr-rows tr.nr-notes td { background: #fafbfc; padding-top: 6px; }

/* New runs: one card per run (2026-10-07, "sab separate dikhain") */
.nr-run { position: relative; display: grid; grid-template-columns: 24px 22% 11% 1fr 15% 36px; gap: 10px 16px; align-items: start; border: 1px solid var(--brigade-border, #e6e8eb); border-radius: 10px; padding: 14px 14px 14px 12px; margin-bottom: 12px; background: #fff; }
.nr-run__n { width: 24px; height: 24px; border-radius: 6px; background: #e6f2ec; color: var(--brigade-primary); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .85rem; margin-top: 22px; }
.nr-run__l { display: block; font-size: .78rem; font-weight: 600; color: var(--brigade-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em; }
.nr-run__x { margin-top: 22px; }
.nr-run__notes { grid-column: 2 / 6; }
.nr-run .gr-sub { margin-top: 4px; }
.nr-run .it-tag { white-space: normal; display: inline-block; line-height: 1.3; }
@media (max-width: 1000px) { .nr-run { grid-template-columns: 24px 1fr 36px; } .nr-run__q, .nr-run__f, .nr-run__b, .nr-run__notes { grid-column: 2 / 3; } }

/* The board (2026-10-07): one card a bench */
.bd-bench__h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.bd-bench__h h3 { margin: 0; font-size: 1.05rem; }
.bd-page .brigade-lines td { vertical-align: top; }
.bd-page .brigade-lines, .bd-page .brigade-lines td { overflow: visible; }
.bd-page .it-menu { right: 0; top: 34px; }
.bd-move td { background: #fafbfc; }

/* Planner + board, one page (2026-10-07) */
.pl-h.sel { color: #fff; background: var(--brigade-primary); border-radius: 5px; cursor: pointer; }
.pl-h { cursor: pointer; }
.pl-cell.sel { border-color: var(--brigade-primary); box-shadow: inset 0 0 0 1px var(--brigade-primary); }
.pl-day.sel { border-color: var(--brigade-primary); box-shadow: inset 0 0 0 1px var(--brigade-primary); }
.pl-dayline { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.pl-dayline h2 { font-size: 1.15rem; margin: 0; }
.pl-page .brigade-lines, .pl-page .brigade-lines td { overflow: visible; }
.pl-page .it-menu { right: 0; top: 34px; }

/* Planner colours (2026-10-07, mockup approved): green = we make, blue = coming in, amber = going out, red = a problem */
:root { --pl-make: #1f6f5c; --pl-make-bg: #e6f2ec; --pl-make-soft: #cfe6dc; --pl-in: #1d4ed8; --pl-in-bg: #e8eefc; --pl-in-soft: #c9d7fa; --pl-out: #b45309; --pl-out-bg: #fff4e0; --pl-out-soft: #f6dca8; }
.pl-key { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.pl-key__k { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--brigade-border, #e6e8eb); }
.pl-key__k b { margin-right: 4px; }
.pl-key__k.make b { color: var(--pl-make); } .pl-key__k.in b { color: var(--pl-in); } .pl-key__k.out b { color: var(--pl-out); }
.pl-key .pl-tile { cursor: default; }
.pl-st.make { background: var(--pl-make-bg); color: var(--pl-make); border-left: 4px solid var(--pl-make); }
.pl-st.in { background: var(--pl-in-bg); color: var(--pl-in); border-left: 4px solid var(--pl-in); }
.pl-st.out { background: var(--pl-out-bg); color: var(--pl-out); border-left: 4px solid var(--pl-out); }
.pl-cell.make { background: #fbfdfc; } .pl-cell.in { background: #fbfcff; } .pl-cell.out { background: #fffdf9; }
.pl-sep { grid-column: 1 / -1; height: 4px; }
.pl-tile { border: 1px solid transparent; }
.pl-tile.m-plan { background: var(--pl-make-bg); color: var(--pl-make); border-color: var(--pl-make-soft); }
.pl-tile.m-live { background: var(--pl-make); color: #fff; }
.pl-tile.m-done { background: #f1f4f3; color: #8a9490; border-color: #e3e8e6; text-decoration: line-through; }
.pl-tile.i-exp { background: var(--pl-in-bg); color: var(--pl-in); border-color: var(--pl-in-soft); }
.pl-tile.i-got { background: var(--pl-in); color: #fff; }
.pl-tile.i-late { border-color: #b42318; }
.pl-tile.o-ok { background: var(--pl-out-bg); color: var(--pl-out); border-color: var(--pl-out-soft); }
.pl-tile.o-need { background: var(--pl-out); color: #fff; }
.pl-tile small.pl-bad { color: #b42318; font-weight: 700; display: block; }
.pl-tile.m-live small.pl-bad, .pl-tile.o-need small.pl-bad, .pl-tile.i-got small.pl-bad { color: #ffd9d6; }
.bd-bench--make { border-left: 4px solid var(--pl-make); } .bd-bench--in { border-left: 4px solid var(--pl-in); } .bd-bench--out { border-left: 4px solid var(--pl-out); }
.it-tag.in-ok { background: var(--pl-in-bg); color: var(--pl-in); } .it-tag.out-ok { background: var(--pl-out-bg); color: var(--pl-out); } .it-tag.out-need { background: var(--pl-out); color: #fff; }
.pl-tile.m-plan, .pl-tile.m-live, .pl-tile.m-done, .pl-tile.i-exp, .pl-tile.i-got, .pl-tile.o-ok, .pl-tile.o-need { border-left-width: 1px; }
.pl-tile.i-late { border-left-width: 3px; border-left-color: #b42318; }
.pl-tile.m-plan small, .pl-tile.i-exp small, .pl-tile.o-ok small { color: inherit; opacity: .85; }
.pl-tile.m-live small, .pl-tile.i-got small, .pl-tile.o-need small { color: rgba(255,255,255,.88); }
.pl-tile.m-live b, .pl-tile.i-got b, .pl-tile.o-need b { color: #fff; }
.pl-tile.m-done small { color: #8a9490; }

/* Station screen, person first (2026-10-07): the keypad and the benches */
/* The join and PIN screens sit in the middle of the tablet, both ways (their ask 2026-10-08). */
.bn__body--center { display: flex; align-items: center; justify-content: center; padding: 24px; }
.bn__card { width: 100%; max-width: 340px; text-align: center; }
.bn__card .bn__lab { font-size: .8rem; }
.bn__card .bn__quiet { font-size: .92rem; margin: 0 0 16px; }
.bn__card .bn__err { text-align: left; }
.bn__card .bn__pin { width: 100%; box-sizing: border-box; font-size: 1.9rem; padding: 16px 18px; }
.bn__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.bn__pad .bn__btn { height: 68px; font-size: 1.5rem; padding: 0; }
.bn__card-go { width: 100%; margin-top: 14px; padding: 18px; font-size: 1.1rem; }
.bn__bench { margin: 0 0 22px; padding-left: 12px; border-left: 5px solid var(--brigade-primary); }

/* ---- Cost changes (2026-10-08) ---- */
.cc-warn .cc-warn__table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; margin-top: 8px; font-size: .92rem; }
.cc-warn .cc-warn__table th { text-align: left; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #e2e6ea; }
.cc-warn .cc-warn__table td { padding: 7px 8px; border-bottom: 1px solid #eef1f4; vertical-align: top; color: #1d2730; }
.cc-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-strip .rz-button { vertical-align: middle; }
.cc-day { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 700; margin: 16px 0 6px; }
.cc-card { background: #fff; border: 1px solid #e2e6ea; border-radius: 10px; padding: 6px 14px 4px; }
.cc-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cc-table th { text-align: left; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 600; padding: 8px 8px; border-bottom: 1px solid #e2e6ea; }
.cc-table td { padding: 10px 8px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.cc-table tr:last-child td { border-bottom: 0; }
.cc-table .gr-sub { display: block; }
.cc-table .it-tag { margin-left: 4px; max-width: none; }
.cc-recipe { margin: 0 0 4px; }
.cc-link { color: var(--brigade-primary); font-weight: 600; text-decoration: none; }
.cc-link:hover { text-decoration: underline; }
.rf-lastchange { margin: -8px 0 16px; }
.rf-lastchange a { color: var(--brigade-primary); font-weight: 600; text-decoration: none; margin-left: 4px; }

/* ---- Opening balances (2026-10-08) ---- */
.ob-date { font-weight: 600; }
.ob-card { background: #fff; border: 1px solid #e2e6ea; border-radius: 10px; padding: 14px 18px 12px; margin-top: 4px; }
.ob-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-card__head h3 { margin: 0; font-size: 1rem; }
.ob-card__head .it-search { min-width: 180px; flex: 0 1 240px; margin-left: 0; }
.ob-table tr.is-blank td { opacity: .78; }
.ob-table .gr-sub { display: block; }
.ob-saved { color: var(--brigade-primary); }
.ob-table .ob-needed .rz-inputtext { border-color: #f1d59b; }
.ob-table .ob-late .rz-inputtext { color: #b42318; }
.ob-tot { display: flex; gap: 28px; align-items: center; border-top: 2px solid #1d2730; padding-top: 10px; margin-top: 10px; font-size: .9rem; flex-wrap: wrap; }
.ob-tot b { margin-left: 4px; }
.ob-x { border: 0; background: none; color: #8a94a0; cursor: pointer; font-size: 1rem; padding: 4px 6px; }
.ob-x:hover { color: #b42318; }
.ob-page .rz-tabview-panel { padding-top: 14px; }

/* ---- Price changes, one card per bill (2026-10-08, their "A") ---- */
.it-tag.same { background: #eef1f4; color: var(--brigade-muted); }
.pc-kpi--bad .it-kpi__v { color: #b42318; }
.pc-bill { background: #fff; border: 1px solid #e2e6ea; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.pc-bill__head { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid #e2e6ea; flex-wrap: wrap; }
.pc-bill__head b { font-size: 1rem; }
.pc-bill__body { display: grid; grid-template-columns: 1.15fr 1.25fr; }
.pc-col { padding: 10px 18px 12px; min-width: 0; }
.pc-col + .pc-col { border-left: 1px solid #e2e6ea; }
.pc-col h4 { margin: 0 0 6px; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 600; }
.pc-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0f2f4; flex-wrap: wrap; }
.pc-row:last-child { border-bottom: 0; }
.pc-row__name { flex: 1 1 160px; font-weight: 600; }
.pc-row__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-arrow { color: var(--brigade-muted); }
.pc-row__price .gr-sub { display: inline; }
.pc-row__act { font-size: .82rem; color: var(--brigade-muted); white-space: nowrap; }
.pc-page .it-tag { max-width: none; }
@media (max-width: 900px) { .pc-bill__body { grid-template-columns: 1fr; } .pc-col + .pc-col { border-left: 0; border-top: 1px solid #e2e6ea; } }

/* The tag's tip must not be clipped: the sweep's tags hide overflow for ellipsis, and the card hides it for its corners. */
.it-tag.pc-landed { margin: 0 2px; font-weight: 600; overflow: visible; text-overflow: clip; max-width: none; }
.pc-landed .bg-info { margin-left: 2px; }
.pc-landed .bg-info__tip { font-size: .84rem; }
.pc-bill { overflow: visible; }
.cc-warn .cc-warn__table td { overflow: visible; }

.rl-moved { margin-left: 6px; vertical-align: middle; }

/* ---- The bench job screen as drawn (2026-10-08) ---- */
.bn__spacer { flex: 1 1 auto; }
.bn__head .bn__title { font-size: 1.55rem; }
.bn__head .bn__sub { font-size: .95rem; }
.bn__pill { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 14px; background: #eef1f4; color: var(--brigade-muted); align-self: center; }
.bn__pill.is-on { background: #e6f2ec; color: var(--brigade-primary); }
.bn__allg { background: #fde8e8; border: 1px solid #f0c2c2; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; color: #7a1f1f; font-size: 1.02rem; }
.bn__allg b { letter-spacing: .06em; font-size: .78rem; margin-right: 10px; }
.bn__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 820px) { .bn__grid { grid-template-columns: 1fr; } }
.bn__card2 { background: #fff; border: 1px solid var(--brigade-border); border-radius: 12px; padding: 14px 16px; }
.bn__card2 h3 { margin: 0 0 6px; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 700; }
.bn__ing { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eef1f4; }
.bn__ing:last-child { border-bottom: 0; }
.bn__ing-n { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 1.05rem; }
.bn__ing-q { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bn__lot { display: block; font-weight: 400; font-size: .84rem; color: var(--brigade-muted); margin-top: 2px; }
.bn__chip { display: inline-block; font-size: .8rem; font-weight: 600; padding: 1px 8px; border-radius: 5px; background: #eef1f4; color: #3b4652; margin-right: 6px; }
.bn__step { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid var(--brigade-border); border-radius: 10px; margin: 0 0 10px; background: #fff; cursor: pointer; }
.bn__step:last-child { margin-bottom: 4px; }
.bn__step-n { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #eef1f4; color: var(--brigade-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; }
.bn__step-t { flex: 1 1 auto; min-width: 0; }
.bn__step-t b { display: block; font-size: 1.1rem; }
.bn__step-t span { display: block; color: var(--brigade-muted); font-size: .88rem; }
.bn__step.is-next { border-color: var(--brigade-primary); border-width: 2px; }
.bn__step.is-done { background: #e6f2ec; border-color: #c9e2d6; }
.bn__step.is-done .bn__step-n { background: var(--brigade-primary); color: #fff; }
.bn__step.is-done .bn__step-t b { color: var(--brigade-primary-700); text-decoration: line-through; }
.bn__tap { color: var(--brigade-muted); font-size: .88rem; white-space: nowrap; }
.bn__note { border-left: 5px solid var(--brigade-primary); }
.bn__note b { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brigade-muted); margin-bottom: 4px; }
.bn__note--flag { border-left-color: #d9a441; background: #fdf4e2; border-color: #ecd9a8; margin: 0 0 14px; }
.bn__note--flag a { margin-left: 8px; font-weight: 600; color: #7a5600; }
.bn__bar { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; padding: 14px 22px; background: #fff; border-top: 1px solid var(--brigade-border); }
.bn__bar-go { flex: 2 1 auto; padding: 20px; font-size: 1.15rem; border-radius: 11px; }
.bn__bar-btn { flex: 0 0 auto; padding: 20px 24px; font-size: 1.05rem; border-radius: 11px; }
/* The record screen's plus and minus, and the chosen reason. */
.bn__pm { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bn__pm b { min-width: 90px; text-align: center; font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.bn__pm .bn__btn { width: 68px; height: 64px; font-size: 1.6rem; padding: 0; }
.bn__btn--dark { background: var(--brigade-sidebar-bg); border-color: var(--brigade-sidebar-bg); color: #fff; }

/* Step title + the words (2026-10-08) */
.rs__words { color: var(--brigade-muted); font-weight: 400; }
.bn__step-t .bn__step-w { color: var(--brigade-text) !important; font-size: .98rem !important; margin: 2px 0 3px; white-space: pre-line; }
#mo-sheet .js-step .words { font-size: 11.5px; color: #333; margin: 2px 0 1px; white-space: pre-line; }

/* Portal sign-in: which bakery? (2026-10-08) */
.pl-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pl-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: #fff; border: 1px solid #cfd4da; border-radius: 9px; padding: 12px 16px; cursor: pointer; font-family: inherit; font-size: 1rem; }
.pl-choice:hover { border-color: var(--brigade-primary); }
.pl-choice span { font-size: .85rem; color: var(--brigade-muted); }
.pp-code { margin: 10px 0 12px; }
.pp-code label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brigade-muted); margin-bottom: 6px; }

/* The customers list after the sweep (2026-10-08) */
.cu-bar__sub { display: block; font-size: .78rem; color: var(--brigade-muted); }
.brigade-grid .it-dots__b { width: 34px; height: 34px; font-size: 18px; }
.cu-page .rz-data-grid, .cu-page .rz-data-grid-data, .cu-page .rz-datatable-data,
.cu-page .rz-data-grid td, .cu-page .rz-data-grid td .rz-cell-data, .cu-page .rz-data-grid tr { overflow: visible !important; }
.cu-page .it-menu { min-width: 250px; }

/* The page's gutter grows with the screen (2026-10-08, "no margin and padding"): 24px is right on a
   laptop and far too tight on a 27-inch monitor, where the content is over 2,000px wide. */
@media (min-width: 1200px) { .brigade-content { padding: 24px 40px; } }
@media (min-width: 1500px) { .brigade-content { padding: 26px 56px; } }
@media (min-width: 1900px) { .brigade-content { padding: 28px 80px; } }
@media (min-width: 2300px) { .brigade-content { padding: 30px 112px; } }

/* A tab's cards sit inside the tab, not on its edges: the pair used to touch left and right
   (2026-10-08, their screenshot of Stop / Ordering rules). */
.rz-tabview-panel { padding: 22px 10px 10px; }

/* The access code shown once, straight after a new customer was saved (2026-10-08) */
.cu-newcode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cu-newcode__words { flex: 1 1 420px; }
.cu-newcode__code { font-family: ui-monospace, Menlo, monospace; background: #fff; border: 1px solid #c9e2d6; border-radius: 6px; padding: 3px 10px; font-size: 1.15rem; letter-spacing: .1em; }

/* Customer orders list, rebuilt (2026-10-08) */
.so-kpi--bad .it-kpi__v { color: #b42318; }
.so-kpi--warn .it-kpi__v { color: #8a5a00; }
.so-day--late { color: #b42318; }
.so-card { background: #fff; border: 1px solid #e2e6ea; border-radius: 10px; padding: 4px 14px 2px; }
.so-table td { vertical-align: top; }
.so-table .num { text-align: right; }
.so-table .gr-sub { display: block; }
.so-page .rz-datatable, .so-page table { overflow: visible; }

/* The customer order page, rebuilt (2026-10-09) */
.sv-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
@media (max-width: 1100px) { .sv-two { grid-template-columns: 1fr; } }
.sv-card { background: #fff; border: 1px solid var(--brigade-border); border-radius: 10px; padding: 6px 16px 10px; }
.sv-card h3, .sv-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 700; }
.sv-checks td { padding: 9px 6px; border-bottom: 1px solid #f0f2f4; vertical-align: top; }
.sv-checks tr:last-child td { border-bottom: 0; }
.sv-checks__m { width: 34px; }
.sv-checks .gr-sub { display: block; }
.sv-kv td { padding: 9px 6px; border-bottom: 1px solid #f0f2f4; vertical-align: top; }
.sv-kv tr:last-child td { border-bottom: 0; }
.sv-kv td:first-child { color: var(--brigade-muted); }
.sv-kv .gr-sub { display: block; }
.sv-two--one { grid-template-columns: minmax(0, 620px); }
.sv-bar { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.sv-page .it-head { flex-wrap: wrap; }

/* ---------------------------------------------------------------- standing orders list (2026-10-09) */
.sd-table td { vertical-align: top; }
.sd-row--ended td { color: var(--brigade-muted); }
.sd-row--ended .cc-link { color: var(--brigade-muted); }
/* The week as seven little boxes: the days with a quantity filled in. */
.sd-days { display: inline-flex; gap: 3px; }
.sd-d { width: 22px; height: 22px; border-radius: 4px; background: #eef1f4; color: var(--brigade-muted);
        font-size: .66rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sd-d.is-on { background: var(--brigade-primary); color: #fff; }
/* Each reason the engine gave for raising nothing, on its own line in the strip at the top. */
.sd-why { display: block; margin-top: 4px; }
/* Pause, skip and end are asked on the row, not in a box over the page. */
.sd-ask > td { background: #fbfcfd; border-top: 1px solid #e2e6ea; padding: 14px 10px 16px; }
.sd-ask__t { line-height: 1.5; margin-bottom: 10px; max-width: 760px; }
.sd-ask__f { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; max-width: 760px; }
.sd-ask__f > div { display: flex; flex-direction: column; gap: 4px; }
.sd-ask__w { flex: 1 1 260px; }
.sd-ask__f label { font-size: .78rem; font-weight: 600; color: var(--brigade-muted); }
.sd-ask__b { display: flex; gap: 8px; }
/* A day somebody took out, on the Next order cell: a note, not an alarm. */
.sd-skip { color: #8a5a00; }

/* ------------------------------------------------- discount and VAT on an order (2026-10-09) */
/* The Discount cell: a number and its unit, side by side. */
.no-disc { display: flex; gap: 4px; }
.no-disc .rz-numeric { width: 72px; min-width: 0; }
.no-disc .rz-dropdown { width: 58px; min-width: 0; }
.no-disc--foot { justify-content: flex-end; }
/* The totals under the lines: net, the order's discount, the net at each VAT rate, VAT, total. */
.no-sum { display: flex; justify-content: flex-end; margin-top: 6px; }
.no-sum table { width: 430px; border-collapse: collapse; }
.no-sum td { padding: 5px 8px; vertical-align: middle; }
.no-sum td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.no-sum tr.rule td { border-top: 1px solid #e2e6ea; padding-top: 9px; }
.no-sum tr.big td { border-top: 1px solid #e2e6ea; padding-top: 9px; font-size: 1.02rem; }
/* The tax switch at the top right of the lines card (2026-10-09). */
.no-lines-top { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0 0 10px; }
.no-types--sm .no-type { padding: 5px 12px; font-size: .82rem; }
/* ------------------------------------------------- sending an order out, in loads (2026-10-09) */
.sn-table td { vertical-align: middle; }
.sn-close { margin-top: 12px; }
.sn-check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; cursor: pointer; }
.sn-check input { margin-top: 3px; }
.sn-why { margin: 10px 0 0 26px; max-width: 520px; }
.sn-why label { display: block; font-size: .78rem; font-weight: 600; color: var(--brigade-muted); margin-bottom: 4px; }
.sn-sum { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.sn-sum__b { margin-left: auto; display: flex; gap: 8px; }
/* The money a whole-order discount came to, beside its box. */
.no-disc__off { align-self: center; margin-left: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------- a note the customer must not miss (2026-10-09) */
.pp-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px;
           border-radius: 12px; padding: 14px 16px; font-size: .92rem; line-height: 1.55; }
.pp-note b { flex: 0 0 auto; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
             padding: 3px 9px; border-radius: 20px; white-space: nowrap; margin-top: 1px; }
.pp-note--watch { background: #fff7e6; color: #6b4500; border: 1px solid #f1d59b; }
.pp-note--watch b { background: #f1d59b; color: #5a3a00; }
@media (max-width: 640px) { .pp-note { flex-direction: column; gap: 8px; } }

/* ------------------------------------------------- recording a payment, as a page (2026-10-09) */
.pay-card { padding: 18px 20px; }
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.pay-f { display: flex; flex-direction: column; gap: 5px; }
.pay-f--wide { grid-column: 1 / -1; max-width: 520px; }
.pay-f label { font-size: .8rem; font-weight: 600; color: var(--brigade-muted); }
.pay-opt { font-weight: 400; }
.pay-b { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 900px) { .pay-grid { grid-template-columns: 1fr; } }
/* The company's own payment methods (2026-10-09). */
.pm-add { display: flex; gap: 12px; align-items: flex-end; padding: 16px 18px; margin-bottom: 12px; }
.pm-add__f { flex: 1 1 320px; max-width: 420px; display: flex; flex-direction: column; gap: 5px; }
.pm-add__f label { font-size: .8rem; font-weight: 600; color: var(--brigade-muted); }
.pm-edit { display: flex; gap: 6px; }
/* The lots that would go, on the Send it out page (2026-10-09). */
.sn-lot { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 4px; }
.sn-lot .gr-sub { font-weight: 400; }

/* ------------------------------------------------- credit notes, rebuilt (2026-10-09) */
.cn-top { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; padding: 16px 18px; margin-bottom: 12px; }
.cn-f { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; min-width: 0; }
.cn-f--wide { flex: 1 1 100%; }
.cn-f label { font-size: .8rem; font-weight: 600; color: var(--brigade-muted); }
.cn-seg { display: inline-flex; border: 1px solid #cfd4da; border-radius: 7px; overflow: hidden; }
.cn-seg__b { border: 0; background: #fff; padding: 5px 11px; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--brigade-muted); }
.cn-seg__b.is-on { background: var(--brigade-primary); color: #fff; }
.cn-seg__b.is-bad { background: #b42318; color: #fff; }
/* The customer's credit notes (2026-10-09). */
.pp-sub2 { display: block; font-size: .78rem; color: var(--brigade-muted); }
.pp-left { font-weight: 600; }
.pp-left--some { color: #8a5a00; }
.pp-lines--view .pp-lines__head, .pp-lines--view .pp-lines__row { align-items: start; }
/* The customer's credit notes table (2026-10-09). */
.pcn { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pcn th { text-align: left; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
          color: var(--brigade-muted); font-weight: 600; padding: 8px 8px; border-bottom: 1px solid #e2e6ea; }
.pcn td { padding: 12px 8px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.pcn tr:last-child td { border-bottom: 0; }
.pcn .r { text-align: right; white-space: nowrap; }
/* When a credit line came back from more than one lot (2026-10-09). */
.cn-lot { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: .86rem; }
.cn-bad { color: #b42318; }
/* Why a credit note was made (2026-10-09). */
.cn-why { display: flex; gap: 28px; flex-wrap: wrap; padding: 14px 18px; }
.cn-why > div { display: flex; flex-direction: column; gap: 2px; }
.cn-why--note { flex: 1 1 100%; }
.cn-why__k { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 600; }
.cn-why__v { font-weight: 600; }
.cn-why--note .cn-why__v { font-weight: 400; }

/* ── Price lists (2026-10-09): the list's own page, the close screen, sharing ── */
.pl-page .it-head { overflow: visible; }
.pl-warn { display: flex; gap: 10px; align-items: flex-start; background: #fff7e8; border: 1px solid #efd7a4;
           border-radius: 10px; padding: 12px 16px; color: #4a3507; margin: 14px 0 2px; font-size: .9rem; }
.pl-warn b { color: #2d2006; }
.pl-who { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 14px; }
.pl-who__names { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-weight: 600; }
.pl-missing { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 14px; }
.pl-table td, .pl-table th { padding: 9px 8px; }
.pl-table tr.is-off td { color: var(--brigade-muted); }
.pl-table tr.is-off td b { font-weight: 600; color: var(--brigade-muted); }
.pl-foot { display: flex; gap: 8px; align-items: flex-start; padding: 2px 8px 12px; font-size: .82rem; }
.pl-make { padding: 16px; }
.pl-make__f { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pl-make__f .brigade-field label { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; }
.pl-make__b { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pl-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.pl-pill { border: 1px solid #cfd6dc; background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit;
           font-weight: 600; cursor: pointer; color: var(--brigade-text); }
.pl-pill.on { background: #e6f2ee; border-color: #bcdccf; color: var(--brigade-primary); }
.pl-linkbox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #f7f9f8;
              border: 1px solid #bcdccf; border-radius: 9px; padding: 12px 14px; margin-top: 16px; }
.pl-linkbox code { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; }
.pl-showclosed { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: var(--brigade-muted); }
.pl-edit td { padding: 7px 6px; }
.pl-edit .rz-dropdown, .pl-edit .rz-numeric, .pl-edit .rz-datepicker { width: 100%; }
.pl-step { padding: 18px; margin-top: 12px; }
.pl-step__h { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 1rem; }
.pl-step__n { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--brigade-primary);
              color: #fff; font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; }
.pl-step__b { display: flex; flex-direction: column; gap: 10px; }
.pl-file { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #cfd4da; border-radius: 8px;
           padding: 10px 16px; cursor: pointer; font-weight: 600; background: #fff; width: fit-content; }
.pl-file:hover { background: #f6f7f9; }
.pl-step__b { align-items: flex-start; }
.pl-step__b > .rz-button { flex: none; }
/* an i-icon sitting in a column heading: keep it on the same line, and on the right for a number column */
.pl-table th .bg-info { margin-left: 5px; vertical-align: middle; }
.pl-table th.num { white-space: nowrap; }

/* A heading inside a nav group, so a long list reads as a few short ones (2026-10-10) */
.brigade-nav__head { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #64748b; padding: 14px 0 5px 44px; }
.brigade-nav__items > .brigade-nav__head:first-child { padding-top: 6px; }

/* ── Administration, grouped (2026-10-10) ───────────────────────────────── */
.ad-hero { display: flex; gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap;
    background: #fff; border: 1px solid #bcdccf; border-radius: 10px; padding: 20px; margin-bottom: 18px; }
.ad-hero b { font-size: 1rem; }
.ad-hero p { margin: 4px 0 0; color: var(--brigade-muted); max-width: 66ch; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 16px; }
.ad-group { padding: 20px; }
.ad-group h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 700; }
.ad-group > p { margin: 0 0 14px; color: var(--brigade-muted); font-size: .82rem; }
.ad-links { display: flex; flex-direction: column; }
.ad-lk { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0;
    border-top: 1px solid #eef1f3; text-decoration: none; color: var(--brigade-text); font-weight: 600; cursor: pointer; }
.ad-lk:first-child { border-top: 0; }
.ad-lk:hover { color: var(--brigade-primary); }
.ad-lk span { font-weight: 400; color: var(--brigade-muted); font-size: .82rem; text-align: right; }
.pe-pin { display: flex; gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap;
    background: #e7f3ee; border: 1px solid #bcdccf; border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.pe-pin__k { font-size: .82rem; color: #0d5540; font-weight: 600; }
.pe-pin__v { font-family: ui-monospace, Consolas, monospace; font-size: 2rem; font-weight: 700; letter-spacing: .14em;
    color: #0d5540; margin: 4px 0 6px; }
.pe-add { padding: 20px; margin-bottom: 16px; }
.pe-add h3 { margin: 0 0 3px; font-size: 1rem; }
.pe-add > p { margin: 0 0 14px; }
.pe-add__f { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.pe-add__f label { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; }
.tb-addr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #f7f9f8;
    border: 1px solid #bcdccf; border-radius: 9px; padding: 12px 14px; }
.tb-addr code { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; font-weight: 600; word-break: break-all; }
.tb-code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .08em; }

/* ── Set up a bench: the five steps (2026-10-10) ────────────────────────── */
.sb-cols { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.sb-left { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sb-right { flex: 1 1 290px; }
.sb-step { display: flex; gap: 16px; background: #fff; border: 1px solid var(--brigade-border); border-radius: 10px; padding: 18px 20px; }
.sb-step.now { border-color: #bcdccf; box-shadow: 0 2px 10px rgba(19,108,82,.09); }
.sb-step.later { opacity: .5; }
.sb-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem; background: #eef1f3; color: var(--brigade-muted); border: 1px solid var(--brigade-border); }
.sb-n.done { background: var(--brigade-primary); border-color: var(--brigade-primary); color: #fff; }
.sb-n.at { background: #fff; border: 2px solid var(--brigade-primary); color: var(--brigade-primary); }
.sb-body { flex: 1 1 auto; min-width: 0; }
.sb-t { font-weight: 700; font-size: .95rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.sb-ans { color: var(--brigade-muted); margin-top: 3px; }
.sb-ans b { color: var(--brigade-text); }
.sb-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sb-chip { border: 1px solid #cfd6dc; background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit;
    font-weight: 600; font-size: .86rem; cursor: pointer; color: var(--brigade-text); }
.sb-chip.on { background: #e7f3ee; border-color: #bcdccf; color: #0d5540; cursor: default; }
.sb-new { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.sb-lab { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brigade-muted); margin-top: 14px; margin-bottom: 7px; }
.sb-wait { display: flex; gap: 10px; align-items: center; background: #fff7e8; border: 1px solid #efd7a4;
    border-radius: 9px; padding: 11px 14px; margin-top: 12px; color: #4a3507; }
.sb-spin { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #e3c68c; border-top-color: #8a5200; }
.sb-ok { background: #e7f3ee; border: 1px solid #bcdccf; border-radius: 9px; padding: 13px 16px; margin-top: 12px; color: #0d5540; }
.sb-pad { background: #0e2636; color: #fff; border-radius: 10px; padding: 18px; text-align: center; margin-top: 10px; }
.sb-pad__q { font-size: .8rem; opacity: .75; }
.sb-pad__t { font-size: 1.4rem; font-weight: 700; margin: 6px 0 12px; }
.sb-pad__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sb-key { background: #1b3d53; border-radius: 8px; padding: 11px 0; font-size: 1rem; font-weight: 600; }

/* ── Users, one page, two tick boxes (2026-10-10) ───────────────────────── */
.us-form { padding: 22px; border-color: #bcdccf; margin-bottom: 16px; }
.us-form h3 { margin: 0 0 3px; font-size: 1rem; }
.us-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.us-row2 label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.us-block { border: 1px solid var(--brigade-border); border-radius: 10px; padding: 16px 18px; margin-top: 16px; }
.us-block.on { border-color: #bcdccf; background: #fbfdfc; }
.us-tick { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.us-tick b { font-size: .95rem; }
.us-tick p { margin: 2px 0 0; color: var(--brigade-muted); font-size: .82rem; }
.us-inner { margin: 14px 0 0 29px; }
.us-inner label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.st-who { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 0; }

/* ===== TRACEABILITY, rebuilt 2026-10-11 ===============================================
   Four questions in the order the recall day asks them, the mass balance beside the lot,
   and the saved record underneath. Shares the item page's .it-* furniture; these are only
   the pieces that page does not already have. */

.tr-find { padding: 20px 22px; }
.tr-find__lab { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 7px; }
.tr-find__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tr-find__box {
    flex: 999 1 420px; min-width: 0; font: inherit; font-size: 1.05rem;
    padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 6px; color: var(--brigade-text);
}
.tr-find__box:focus { outline: 2px solid var(--brigade-primary); outline-offset: 1px; border-color: var(--brigade-primary); }
.tr-find__hint { margin: 10px 0 0; }

.tr-hits { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.tr-hit { border: 1px solid var(--brigade-border); border-radius: 8px; padding: 15px 17px; }
.tr-hit__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tr-hit__name { font-size: 1.05rem; }
.tr-hit__sub { margin: 2px 0 11px; font-size: .9rem; }
.tr-hit__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tr-hit__nums span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.tr-hit__nums strong { font-size: .98rem; }

/* identity + the sum, side by side; they stack on a narrow screen */
.tr-top { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; margin-bottom: 16px; }
.tr-ident { flex: 999 1 540px; min-width: 0; }
.tr-bal { flex: 1 1 330px; min-width: 300px; }

.tr-ident__top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
.tr-ident__code { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-ident__item { font-size: 1.05rem; }

.tr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.tr-fact__k { font-size: .75rem; font-weight: 600; color: var(--brigade-muted); text-transform: uppercase; letter-spacing: .06em; }
.tr-fact__v { font-size: .98rem; font-weight: 600; }
.tr-fact__s { font-size: .85rem; color: var(--brigade-muted); }

.tr-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tr-acts__note { margin: 10px 0 0; font-size: .88rem; }

.tr-bal__row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid #eef0f2; font-size: .95rem;
}
.tr-bal__row strong { font-variant-numeric: tabular-nums; }
.tr-bal__end {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; border-radius: 8px; padding: 11px 14px;
}
.tr-bal__end.is-ok { background: #e8f1ee; color: #14463b; }
.tr-bal__end.is-bad { background: #fef3f2; color: #8c1d16; }
.tr-bal__end strong { font-variant-numeric: tabular-nums; }
.tr-bal__scrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f2; }
.tr-bal__scrap p { margin: 0 0 9px; font-size: .88rem; }

/* numbered section heads */
.tr-sec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-sec__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: none; border-radius: 50%;
    background: var(--brigade-primary); color: #fff; font-size: .82rem; font-weight: 700;
}
.tr-sec__n.is-red { background: #b42318; }
.tr-sec__r { font-size: .9rem; }

/* the phone list's quantity is the number people act on: make it the biggest thing on the row */
.tr-qty { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.tr-save { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.tr-save__note { flex: 999 1 400px; min-width: 0; }
.tr-save__note label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.tr-save__box { flex: 1 1 310px; min-width: 285px; border: 1px solid var(--brigade-border); border-radius: 8px; padding: 15px 17px; }
.tr-save__row { display: flex; justify-content: space-between; font-size: .92rem; padding: 4px 0; }
.tr-save__prac { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f2; font-size: .92rem; cursor: pointer; }

/* ★ The quiet second line has to be its own line here. .mf-sub is an inline span, so in a
   table cell "PO-000000003" and "5 Oct 2026" ran together as "PO-0000000035 Oct 2026" and the
   column clipped it. Found on a screenshot, not by a test. */
.tr-page .mf-sub, .tr-hit .mf-sub { display: block; }

.tr-money { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef0f2; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: .92rem; }

@media print {
    .brigade-sidebar, .brigade-topbar, .tr-acts, .tr-save, .rz-button { display: none !important; }
    .it-card { break-inside: avoid; box-shadow: none; }
}

/* Rework tick on the record-production page (2026-10-11) */
.nr-rw { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.nr-rw .gr-sub { display: block; margin-top: 2px; }

/* The three numbers a recall is closed off with (2026-10-11) */
.tr-rec { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.tr-rec__n {
    flex: 1 1 150px; border: 1px solid var(--brigade-border); border-radius: 8px;
    padding: 10px 14px; background: var(--brigade-bg);
}
.tr-rec__n span { display: block; font-size: .75rem; font-weight: 600; color: var(--brigade-muted);
    text-transform: uppercase; letter-spacing: .06em; }
.tr-rec__n strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tr-rec__n.is-bad { background: #fef3f2; border-color: #f3c4bf; }
.tr-rec__n.is-bad strong { color: #b42318; }
.it-ok { color: var(--brigade-primary); }

/* A saved recall, opened again (2026-10-11) */
.tr-clickable .rz-data-row { cursor: pointer; }
.tr-clickable .rz-data-row:hover { background: var(--brigade-bg); }
.tr-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef0f2; }
.tr-note p { margin: 3px 0 0; font-size: .95rem; }
.tr-file { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
    padding: 9px 0; border-bottom: 1px solid #eef0f2; font-size: .93rem; }
.tr-file:last-child { border-bottom: none; }

/* ★ .it-card . the section box the traceability pages are built from (2026-10-11).
   It was used on 18 blocks and NEVER DEFINED, so every section rendered flat on the page with no
   edge and no white behind it. The user's words: "bohot rookha rookha sa page hai". Same shape as
   .brigade-form-section, which is what the rest of Brigade uses. */
.it-card {
    background: var(--brigade-card); border: 1px solid var(--brigade-border);
    border-radius: 12px; padding: 20px 22px; margin-bottom: 16px;
}
.it-card:last-child { margin-bottom: 0; }

/* a section heading inside one */
.it-sec__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.it-sec__name { margin: 0; font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }

/* ===== The item page as one screen (2026-10-12, mockup Rttz4hx8LxP2rzVTadUj4V): the important boxes open at the top,
   the rest closed under a one-line summary, a click on the heading opens one. ===== */
.ip-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ip-top__name { font-size: 1.7rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.ip-top__meta { color: var(--brigade-muted); font-size: .86rem; }
.ip-card { background: #fff; border: 1px solid var(--brigade-border); border-radius: 10px; padding: 20px 24px 24px; margin-bottom: 16px; }
.ip-card__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ip-card__h h2 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 38px; display: flex; align-items: center; gap: 6px; }
.ip-card__t { flex: 1 1 auto; min-width: 0; }
.ip-sub { font-size: .88rem; color: var(--brigade-muted); margin: -8px 0 0; }
.ip-sum { font-size: .88rem; color: var(--brigade-muted); margin: -8px 0 0; display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-fold .ip-card__t { cursor: pointer; user-select: none; }
.ip-fold .ip-card__h { margin-bottom: 0; }
.ip-fold.is-open .ip-card__h { margin-bottom: 16px; }
.ip-fold:not(.is-open) > :not(.ip-card__h) { display: none !important; }
.ip-fold:not(.is-open) .ip-sum { display: block; }
.ip-fold:not(.is-open) .ip-sub, .ip-fold:not(.is-open) .it-dots { display: none; }
.ip-fold:not(.is-open):hover { border-color: #b9c3cc; }
.ip-tools { display: inline-flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.ip-chev { width: 38px; height: 38px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s; padding: 0; }
.ip-fold.is-open .ip-chev { transform: rotate(180deg); }
.ip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; align-items: start; }
.ip-grid .span2 { grid-column: span 2; }
.ip-grid .full { grid-column: 1 / -1; }
.ip-grid .brigade-field { margin-bottom: 0; }
.ip-grid .rz-textbox, .ip-grid .rz-dropdown, .ip-grid .rz-numeric, .ip-grid .rz-textarea { width: 100%; }
.ip-grid .mf-readonly { min-height: 38px; display: flex; align-items: center; }
.ip-head { display: flex; gap: 24px; align-items: flex-start; }
.ip-head .ip-grid { flex: 1 1 auto; }
.ip-photo { display: flex; flex-direction: column; gap: 8px; align-items: center; flex: 0 0 120px; }
.ip-photo__pic { width: 120px; height: 120px; border-radius: 8px; border: 1px dashed #c5ced6; background: #f6f7f9; display: flex; align-items: center; justify-content: center; color: var(--brigade-muted); font-size: .82rem; overflow: hidden; }
.ip-photo__pic img { width: 100%; height: 100%; object-fit: cover; }
.ip-photo__hint { font-size: .76rem; color: var(--brigade-muted); text-align: center; line-height: 1.3; }
.ip-sw { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 16px; }
.ip-sw .it-toggle { font-weight: 500; }
.ip-sw .it-toggle .it-muted { font-weight: 400; }
.ip-menu__h { padding: 8px 14px 2px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 600; }
.ip-menu__hr { border-top: 1px solid var(--brigade-border); margin: 4px 0; }
.ip-add td { background: transparent; }
.ip-x { border: 0; background: #eef0f2; color: #64748b; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px; }
.ip-x:hover { background: #fde8e8; color: #b42318; }
.ip-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 24px; }
.ip-page .it-kpi__v { font-size: 1.45rem; }
.ip-page .it-kpis { margin-bottom: 16px; }
.ip-page .it-warn { margin-bottom: 10px; }
.ip-page .it-note { margin-top: 10px; }
@media (max-width: 960px) { .ip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ip-head { flex-direction: column; } }
.ip-photo .rz-button { width: 120px; white-space: nowrap; padding: 0 8px; font-size: .84rem; justify-content: center; }
.ip-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; padding: 16px 24px; }
.ip-roles .it-toggle { font-weight: 600; }
.ip-roles__what { margin-left: auto; font-size: .88rem; }
.it-unitbox .it-muted, .ip-add .it-muted { white-space: nowrap; }
.it-kpi__v--input .it-muted { font-size: .9rem; font-weight: 400; }

/* Sticker templates (2026-10-13): the editor, code left, the values right. */
.lt-edit { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.lt-vars { border: 1px solid var(--brigade-border); border-radius: 8px; padding: 12px 14px; background: #fafbfc; }
.lt-vars h3 { margin: 0 0 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--brigade-muted); }
.lt-vars div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #eef0f2; font-size: .84rem; }
.lt-vars code { font-family: Consolas, "Courier New", monospace; color: var(--brigade-primary); font-weight: 700; cursor: pointer; white-space: nowrap; }
.lt-vars span { color: var(--brigade-muted); font-size: .78rem; text-align: right; }
.lt-code { font-family: Consolas, "Courier New", monospace; font-size: .82rem; background: #fbfcfd; border: 1px solid var(--brigade-border); border-radius: 6px; padding: 12px 14px; white-space: pre; overflow: auto; margin: 0; }
@media (max-width: 960px) { .lt-edit { grid-template-columns: 1fr; } }

/* ---- the Label box, two columns: the words on the left, the label itself on the right (2026-10-14) ---- */
.lb-two { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; align-items: start; }
.lb-words { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; align-items: start; }
.lb-grid2 .brigade-field { margin-bottom: 0; }
.lb-grid2 .rz-textbox, .lb-grid2 .rz-dropdown, .lb-grid2 .rz-numeric { width: 100%; }
.lb-cap { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brigade-muted); }
.lb-rule { height: 1px; background: #eef0f2; }
.lb-pane { position: sticky; top: 16px; background: #f8fafb; border: 1px solid #eef0f2; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lb-pane img { width: 100%; background: #fff; border: 1px solid var(--brigade-line); border-radius: 4px; }
.lb-empty { border: 1px dashed var(--brigade-line); border-radius: 6px; padding: 26px 12px; text-align: center; font-size: .84rem; color: var(--brigade-muted); }
.lb-ok { font-size: .84rem; color: #14503f; margin: 0; }
@media (max-width: 1180px) { .lb-two { grid-template-columns: minmax(0, 1fr); } .lb-pane { position: static; } }


/* ===== TRACEABILITY, FIVE STEPS (2026-10-19 night, their approved mockup v3 JtbWgppa7mMaA6hcpc4f7N).
   Their words: "ye tree wala structure pasand nhi aya. ye aik aam bandy k liye hard hai" then "B. or tree
   hata do" then "search oper or steps neechay". So: the search box on top of every step, one page, five
   steps (What it is · Stop it · Tell them · Trace it back · Write it down), one question and one table
   each, Back and Next. The record page keeps .tr-log. ===== */
.ts-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.ts-step { flex: 1 1 150px; font: inherit; text-align: left; border: 1px solid var(--brigade-border); background: #fff; border-radius: 7px; padding: 8px 11px; font-size: .86rem; color: var(--brigade-muted); cursor: pointer; }
.ts-step b { display: block; color: var(--brigade-ink); font-size: .92rem; }
.ts-step.is-on { border-color: var(--brigade-ink); color: var(--brigade-ink); }
.ts-step.is-on b { text-decoration: underline; text-underline-offset: 4px; }
.ts-step.is-done b::after { content: " \2713"; color: var(--brigade-muted); }
.ts-step:focus-visible { outline: 2px solid var(--brigade-primary); outline-offset: 1px; }
.ts-q { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 2px; }
.ts-q small { display: block; font-size: .95rem; font-weight: 400; color: var(--brigade-muted); margin-top: 4px; }
.ts-title { font-size: 1.25rem; font-weight: 700; margin: 4px 0 0; }
.ts-subline { color: var(--brigade-muted); font-size: .92rem; margin: 2px 0 14px; display: block; font-weight: 400; }
.ts-plain { margin: 12px 0 0; font-size: .98rem; line-height: 1.6; }
.ts-check { margin: 12px 0 0; font-size: .92rem; color: var(--brigade-muted); }
.ts-check b { color: var(--brigade-ink); }
.ts-check a, .ts-plain a { color: var(--brigade-ink); text-decoration: underline; text-underline-offset: 3px; }
.ts-red, .ts-check b.ts-red { color: #a4262c; }
.ts-dim { color: var(--brigade-muted); font-size: .9rem; }
.ts-sc { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ts-sc th { text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 700; padding: 0 12px 6px 0; border-bottom: 1px solid var(--brigade-border); }
.ts-sc th.r, .ts-sc td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 110px; font-weight: 600; }
.ts-sc td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--brigade-border); vertical-align: top; }
.ts-sc tr.total td { border-bottom: 0; border-top: 2px solid var(--brigade-ink); font-weight: 700; }
.ts-sc.ts-log td { font-size: .93rem; }
.ts-tag { color: var(--brigade-muted); font-size: .84rem; margin-left: 6px; }
.ts-crumb { margin: 0 0 12px; font-size: .9rem; color: var(--brigade-muted); }
.ts-crumb b { color: var(--brigade-ink); }
.ts-crumb a { color: var(--brigade-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ts-ing { font-size: 1rem; }
.ts-ing td { padding: 13px 12px 13px 0; vertical-align: middle; }
.ts-ing td.name b { font-size: 1.05rem; }
.ts-ing td.name .code { display: block; color: var(--brigade-muted); font-size: .84rem; margin-top: 1px; }
.ts-ing td.n { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; width: 120px; font-weight: 600; }
.ts-ing td.act { width: 200px; text-align: right; }
.ts-btn--go { border-color: var(--brigade-ink); padding: 7px 12px; font-size: .9rem; }
.ts-tag::before { content: "("; } .ts-tag::after { content: ")"; }
.ts-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ts-why { margin-top: 12px; }
.ts-why .rz-textarea { width: 100%; }
.ts-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .95rem; }
.ts-table th { text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 700; padding: 0 10px 6px 0; border-bottom: 1px solid var(--brigade-border); white-space: nowrap; }
.ts-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid #eef0f2; vertical-align: top; }
.ts-table tr:last-child td { border-bottom: 0; }
.ts-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-table tr.ts-sub td { font-size: .9rem; padding-left: 28px; color: var(--brigade-ink); }
.ts-table tr.ts-sub td:first-child { position: relative; }
.ts-table tr.ts-sub td:first-child::before { content: "\2514"; position: absolute; left: 10px; color: var(--brigade-muted); }
.ts-table tr.ts-sub.is-bad td { color: #a4262c; }
.ts-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-btn { font: inherit; font-size: .84rem; font-weight: 700; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--brigade-border); background: #fff; color: var(--brigade-ink); cursor: pointer; white-space: nowrap; }
.ts-btn--red { background: var(--brigade-ink); border-color: var(--brigade-ink); color: #fff; }
.ts-btn--grey { background: #f0f2f4; color: var(--brigade-muted); }
.ts-btn:disabled { opacity: .55; cursor: default; }
.ts-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--brigade-border); }
.ts-log { margin-top: 8px; }
.ts-note { margin-top: 10px; border: 1px solid var(--brigade-border); border-radius: 6px; padding: 9px 12px; color: var(--brigade-muted); font-size: .92rem; background: #f8fafb; }
.ts-prac { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: .95rem; }
.ts-scroll { overflow-x: auto; }
.ts-email { display: grid; gap: 10px; min-width: 560px; }
.ts-email__row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; }
.ts-email__row label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brigade-muted); font-weight: 700; }
.ts-email .rz-textbox, .ts-email .rz-textarea { width: 100%; }
.ts-email__hint { font-size: .86rem; color: var(--brigade-muted); }
.ts-email__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.ts-email__foot .sp { flex: 1; }
.tr-log { display: grid; grid-template-columns: 100px 1fr; gap: 6px 14px; font-size: .93rem; }
.tr-log__t { color: var(--brigade-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ts-email { min-width: 0; } }
@media print { .ts-nav, .ts-btn, .tr-find, .it-head .rz-button { display: none !important; } }

/* =====================================================================================================================
   THE NEW LOOK (approved 26 Oct 2026, Items mockup v2: https://claude.ai/artifact/9uA1trdFDz3wZgQ2cb1pzf)
   Their rule: the look changes, nothing else. The shell (.bx) is every office page's; the page look (.nx) is switched
   on page by page, so a page not moved yet looks exactly as it did.
   ===================================================================================================================== */
.bx { min-height: 100vh; background: #F1F2F4; }
.bx-top { height: 52px; background: #1C1F23; display: flex; align-items: center; gap: 16px; padding: 0 16px 0 18px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.bx-logo { display: flex; align-items: center; gap: 10px; color: #FFFFFF; font-weight: 600; font-size: 15px; flex: 0 0 206px; text-decoration: none; }
.bx-logo:hover { color: #FFFFFF; text-decoration: none; }
.bx-top__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.bx-company { color: #E6E8EB; font-size: 13px; font-weight: 600; padding-right: 14px; border-right: 1px solid #3B4148; line-height: 30px; }
.bx-user { color: #FFFFFF; font-size: 13px; font-weight: 600; text-decoration: none; text-align: right; line-height: 1.25; }
.bx-user small { display: block; color: #AEB4BC; font-weight: 400; font-size: 11.5px; }
a.bx-user:hover { color: #FFFFFF; text-decoration: underline; }
.bx-topbtn { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid #3B4148; background: #2B3036; color: #E6E8EB;
    font: 600 12.5px 'Inter', system-ui, sans-serif; cursor: pointer; }
.bx-topbtn:hover { background: #353B42; color: #FFFFFF; }
.bx-body { display: flex; min-height: calc(100vh - 52px); }
.bx-side { flex: 0 0 240px; width: 240px; background: #EBECEF; border-right: 1px solid #DDE0E4; padding: 12px 10px 24px; box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.bx-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bx .brigade-content { padding: 20px 28px 40px; }
.bx-nav { display: flex; flex-direction: column; gap: 1px; }
.bx-nav__top, .bx-nav__group { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
    background: transparent; color: #30353B; font: 500 13.5px 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.bx-nav__top:hover, .bx-nav__group:hover { background: #E0E2E6; color: #1C1F23; text-decoration: none; }
.bx-nav__top.active { background: #FFFFFF; color: #1C1F23; font-weight: 600; box-shadow: 0 1px 1px rgba(16,24,40,.06); }
.bx-nav__group.open { color: #1C1F23; font-weight: 600; }
.bx-nav .rz-icon { font-size: 19px; color: #4A4F57; }
.bx-nav__group.open .rz-icon, .bx-nav__top.active .rz-icon { color: #1C1F23; }
.bx-nav .bx-nav__chev { margin-left: auto; font-size: 16px; color: #8A9098; }
.bx-nav__items { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; }
.bx-nav__items a { display: flex; align-items: center; min-height: 30px; padding: 4px 10px 4px 39px; border-radius: 8px; color: #4A4F57;
    font-size: 13px; font-weight: 500; text-decoration: none; box-sizing: border-box; line-height: 1.3; }
.bx-nav__items a:hover { background: #E0E2E6; color: #1C1F23; text-decoration: none; }
.bx-nav__items a.active { background: #FFFFFF; color: #1C1F23; font-weight: 600; box-shadow: 0 1px 1px rgba(16,24,40,.06); }
.bx-nav__head { padding: 8px 10px 2px 39px; font-size: 11px; font-weight: 600; color: #7A8089; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 900px) {
    .bx-body { flex-direction: column; }
    .bx-side { width: auto; flex: none; }
    .bx-logo { flex: none; }
    .bx-company, .bx-user small { display: none; }
}
@media print {
    .bx-top, .bx-side { display: none !important; }
    .bx, .bx-body { display: block; background: #FFFFFF; min-height: 0; }
    .bx .brigade-content { padding: 0; }
}

/* ---------- the page look, switched on by class="nx" on a page's own root ---------- */
.nx { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1C1F23; font-size: 14px; }
.nx a { color: #2B5FA8; }
.nx .rz-button, .nx .rz-textbox, .nx .rz-dropdown, .nx .rz-numeric input, .nx .rz-textarea, .nx .rz-dropdown-label { font-family: 'Inter', system-ui, sans-serif; }
.nx .rz-button { border-radius: 8px; font-weight: 600; box-shadow: 0 1px 0 rgba(16,24,40,.05); }
.nx .rz-button.rz-primary { background: #1C1F23; border-color: #1C1F23; color: #FFFFFF; }
.nx .rz-button.rz-primary:not(.rz-state-disabled):hover { background: #30353B; }
.nx .rz-button.rz-light { background: #FFFFFF; border: 1px solid #D2D5DA; color: #1C1F23; }
.nx .rz-textbox, .nx .rz-dropdown, .nx .rz-numeric, .nx .rz-textarea { border-radius: 8px; border-color: #D2D5DA; }
.nx .brigade-page-head { align-items: center; margin-bottom: 16px; }
.nx .brigade-page-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.nx .brigade-page-sub { margin: 2px 0 0; font-size: 13px; color: #5C636B; }
.nx .rz-badge { border-radius: 999px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 3px 9px; }
.nx .rz-badge-success { background: #E3F1EA; color: #1D6B47; }
.nx .rz-badge-light { background: #ECEDEF; color: #4A4F57; }
.nx .rz-badge-warning { background: #FFF1D6; color: #8A5300; }
.nx .it-tag { border-radius: 999px; font-weight: 500; }
.nx .it-tag.ok { background: #E3F1EA; color: #1D6B47; }

/* a list: the views, the search and the table in ONE card */
.nx-card { background: #FFFFFF; border: 1px solid #E1E3E6; border-radius: 10px; overflow: hidden; }
.nx-views { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 0; margin: 0; border-bottom: 1px solid #E7E9EC; }
.nx-views .bg-fchip { height: 36px; display: inline-flex; align-items: center; padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; background: transparent; color: #4A4F57; font-size: 13px; font-weight: 500; cursor: pointer; }
.nx-views .bg-fchip:hover { color: #1C1F23; background: transparent; border-color: transparent; border-bottom-color: #C9CDD3; }
.nx-views .bg-fchip.is-on { background: transparent; color: #1C1F23; font-weight: 600; border-bottom-color: #1C1F23; }
.nx-views .bg-fchip.is-alert { color: #8A5300; background: transparent; }
.nx-views .bg-fchip.is-alert.is-on { color: #8A5300; border-bottom-color: #8A5300; background: transparent; }
.nx-views .bg-fchip__n { opacity: 1; color: #7A8089; font-weight: 500; margin-left: 6px; }
.nx-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #E7E9EC; }
.nx-tools .it-search { margin-left: 0; flex: 1 1 280px; }
.nx-card .brigade-empty { border: 0; border-radius: 0; }
.nx-foot { padding: 10px 16px; font-size: 13px; color: #5C636B; border-top: 1px solid #E7E9EC; margin: 0; }
.nx-foot strong { color: #1C1F23; }
.nx .rz-data-grid, .nx-card .rz-data-grid { border: 0; border-radius: 0; box-shadow: none; }
.nx .rz-grid-table thead th { background: #F7F8F9; border-bottom: 1px solid #E7E9EC; }
.nx .rz-grid-table thead th .rz-column-title, .nx .rz-grid-table thead th .rz-column-title-content { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #5C636B; text-transform: none; letter-spacing: 0; }
.nx .rz-grid-table tbody td { border-bottom: 1px solid #EEF0F2; font-size: 13.5px; }
.nx .rz-grid-table tbody tr:hover > td { background: #F7F8F9; }
.nx .rz-pager, .nx .rz-paginator { border-top: 1px solid #E7E9EC; background: #FFFFFF; font-family: 'Inter', system-ui, sans-serif; }
.nx .it-name { font-weight: 600; color: #1C1F23; }
.nx .it-sub { font-size: 12px; color: #7A8089; }

/* an item page: the header, then two columns (the work left, the facts right), no tabs */
.nx .ip-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.nx-back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #D2D5DA; background: #FFFFFF; }
.nx-back:hover { background: #F6F7F8; }
.nx-titles { min-width: 0; }
.nx-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nx .ip-top__name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.nx .ip-top__meta { display: block; margin-top: 2px; font-size: 13px; color: #5C636B; }
.nx .it-pill { border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 3px 9px; background: #E3F1EA; color: #1D6B47; }
.nx .it-pill.is-off { background: #ECEDEF; color: #4A4F57; }
.nx .it-dots__b.nx-more { width: auto; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px 'Inter', system-ui, sans-serif;
    color: #1C1F23; border: 1px solid #D2D5DA; border-radius: 8px; box-shadow: 0 1px 0 rgba(16,24,40,.05); }
.nx .it-dots__b.nx-more:hover { background: #F6F7F8; }
.nx .it-menu { border-radius: 10px; border-color: #E1E3E6; font-family: 'Inter', system-ui, sans-serif; }
.nx-lay { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.nx-main { flex: 999 1 620px; min-width: 0; }
.nx-aside { flex: 1 1 300px; max-width: 360px; min-width: 0; }
@media (max-width: 1000px) { .nx-aside { max-width: none; } }
.nx .ip-card { border: 1px solid #E1E3E6; border-radius: 10px; padding: 14px 18px 18px; margin-bottom: 16px; }
.nx .ip-card__h { margin-bottom: 12px; }
.nx .ip-card__h h2 { font-size: 14px; font-weight: 600; line-height: 32px; }
.nx .ip-fold .ip-card__h { margin-bottom: 0; }
.nx .ip-fold.is-open .ip-card__h { margin-bottom: 12px; }
.nx .ip-sum { font-size: 13px; color: #5C636B; margin: -4px 0 0; }
.nx .ip-sub { font-size: 13px; color: #5C636B; margin: -4px 0 0; }
.nx .ip-chev { width: 32px; height: 32px; border-color: #D2D5DA; border-radius: 8px; }
.nx .nx-main .ip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 960px) { .nx .nx-main .ip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nx .brigade-field label { font-size: 12.5px; font-weight: 500; color: #30353B; }
.nx .it-table th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: #5C636B; background: #F7F8F9; padding: 8px 10px; border-bottom: 1px solid #E7E9EC; }
.nx .it-table td { font-size: 13.5px; padding: 9px 10px; border-bottom: 1px solid #EEF0F2; }
.nx .it-table a { color: #2B5FA8; }
.nx .it-lab { font-size: 12.5px; font-weight: 600; color: #30353B; }
.nx .it-toggle { font-size: 13.5px; }
/* the right column: the stock figures as a short list, the product's three switches stacked */
.nx-aside .it-kpis { flex-direction: column; gap: 0; margin: 0; }
.nx-aside .it-kpi { flex: none; border: 0; border-top: 1px solid #EEF0F2; border-radius: 0; padding: 10px 0; background: transparent; }
.nx-aside .it-kpi:first-child { border-top: 0; padding-top: 0; }
.nx-aside .it-kpi__k { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: #5C636B; font-weight: 500; }
.nx-aside .it-kpi__v { font-size: 18px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.nx-aside .it-kpi:first-child .it-kpi__v { font-size: 26px; }
.nx-aside .it-kpi__s { font-size: 12px; color: #7A8089; }
.nx-aside .ip-roles { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.nx-aside .ip-roles__what { margin-left: 0; }
.nx .ip-foot { margin: 0 0 24px; }

.nx .rz-pager-page.rz-state-active, .nx .rz-paginator-page.rz-state-active { background: #1C1F23; color: #FFFFFF; border-color: #1C1F23; }
.nx .it-kpi { border-color: #E1E3E6; }
.nx .it-kpi__k { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: #5C636B; }

/* ---------- the new look, shared by every page that switches it on (26 Oct, Catalogue) ---------- */
.nx { --brigade-primary: #1C1F23; }   /* the theme's one dark accent: a page's own "primary" bits (selected pills, avatars, inline links) follow it */
.nx .it-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; }
.nx .it-head__name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.nx .it-head__meta { font-size: 13px; color: #5C636B; }
.nx > .it-kpis { gap: 12px; margin: 0 0 16px; }
.nx > .it-kpis .it-kpi { border: 1px solid #E1E3E6; border-radius: 10px; padding: 14px 16px; background: #FFFFFF; }
.nx > .it-kpis .it-kpi__v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx .gr-sub { font-size: 12px; color: #7A8089; }
.nx-filterbar { margin-bottom: 16px; }
.nx-filterbar .nx-tools { border-bottom: 0; }
.nx .nx-tools .rz-dropdown { min-width: 170px; }
.nx .brigade-form-section { background: #FFFFFF; border: 1px solid #E1E3E6; border-radius: 10px; padding: 14px 18px 18px; margin-bottom: 16px; box-shadow: none; }
.nx .brigade-form-section h3 { font-size: 14px; font-weight: 600; }
.nx .nx-aside .rf-kpis { display: flex; flex-direction: column; gap: 0; margin: 0; }
.nx .nx-aside .it-kpi { flex: none; border: 0; border-top: 1px solid #EEF0F2; border-radius: 0; padding: 10px 0; background: transparent; }
.nx .nx-aside .it-kpi:first-child { border-top: 0; padding-top: 0; }
.nx .nx-aside .it-kpi__v { font-size: 18px; }
.nx .nx-aside .rf-kpi--one .it-kpi__v { font-size: 26px; }
.nx .cc-day { font-size: 12.5px; font-weight: 600; color: #5C636B; }
.nx .pc-bill { border-color: #E1E3E6; }
.nx .pc-col h4 { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* the new font is wider than the old one: columns size to their content, and text wraps inside its own cell */
.nx .rz-grid-table { table-layout: auto; }
.nx .rz-grid-table td .rz-cell-data { white-space: normal; overflow: hidden; overflow-wrap: break-word; }

/* ---------- the new look, Setup (26 Oct): tabs inside a card, info tags, a toolbar inside a card ---------- */
.nx .rz-tabview { border: 0; background: transparent; box-shadow: none; }
.nx-card .rz-tabview-nav { background: #FFFFFF; border: 0; border-bottom: 1px solid #E7E9EC; padding: 6px 8px 0; margin: 0; }
.nx-card .rz-tabview-nav li { border: 0; background: transparent; margin: 0 2px -1px 0; border-bottom: 2px solid transparent; border-radius: 0; }
.nx-card .rz-tabview-nav li a { font: 500 13px 'Inter', system-ui, sans-serif; color: #4A4F57; padding: 0 12px; height: 36px; display: flex; align-items: center; }
.nx-card .rz-tabview-nav li:hover a { color: #1C1F23; }
.nx-card .rz-tabview-nav li.rz-tabview-selected { border-bottom-color: #1C1F23; background: transparent; }
.nx-card .rz-tabview-nav li.rz-tabview-selected a { color: #1C1F23; font-weight: 600; }
.nx-card .rz-tabview-panels { padding: 12px; border: 0; background: #FFFFFF; }
.nx .rz-badge-info { background: #E8EEFB; color: #2B4F8F; }
.nx-card .brigade-toolbar.nx-tools { margin: 0; justify-content: flex-end; }
.nx-card > .brigade-empty { margin: 0; }
.nx .brigade-page-head + .brigade-form-section { margin-bottom: 16px; }

.nx-card .rz-tabview-nav li a, .nx-card .rz-tabview-nav li.rz-tabview-selected a { box-shadow: none; border: 0; }
.nx-card .rz-tabview-nav li::after, .nx-card .rz-tabview-nav li::before, .nx-card .rz-tabview-nav li a::after { display: none; }
.nx .rz-tabview-nav { --rz-tabs-tab-selected-border-color: #1C1F23; --rz-tabs-tab-selected-color: #1C1F23; }
/* row buttons in a table: white with a dark icon; delete keeps its red, a warning icon its amber */
.nx .rz-grid-table .rz-button.rz-info, .nx .rz-grid-table .rz-button.rz-secondary { background: #FFFFFF; border: 1px solid #D2D5DA; color: #30353B; box-shadow: 0 1px 0 rgba(16,24,40,.05); }
.nx .rz-grid-table .rz-button.rz-info .rz-button-icon-left, .nx .rz-grid-table .rz-button.rz-secondary .rz-button-icon-left { color: #30353B; }
.nx .rz-grid-table .rz-button.rz-variant-text.rz-warning { color: #8A5300; }

.nx { --rz-tabs-tab-selected-top-border-color: transparent; --rz-tabs-tab-focus-background-color: transparent; --rz-tabs-tab-focus-color: #1C1F23;
      --rz-tabs-tab-selected-color: #1C1F23; --rz-tabs-tab-selected-background-color: transparent; }
.nx-card .rz-tabview-top > .rz-tabview-nav li.rz-tabview-selected { border-bottom: 2px solid #1C1F23; }

.nx-card .rz-tabview-nav li button { font: 500 13px 'Inter', system-ui, sans-serif; color: #4A4F57; padding: 0 12px; height: 36px; display: flex; align-items: center;
    background: transparent; border: 0; box-shadow: none; outline: 0; }
.nx-card .rz-tabview-nav li button::after, .nx-card .rz-tabview-nav li button::before { display: none; }
.nx-card .rz-tabview-nav li.rz-tabview-selected button { color: #1C1F23; font-weight: 600; }
.nx-card .rz-tabview-nav li button:focus-visible { outline: 2px solid #1C1F23; outline-offset: -2px; }

/* Setup, their call (26 Oct): no pop-ups; Add and Edit open at the top of the page, full width, in three columns */
.nx .nx-inline { max-width: none; }
.nx .nx-inline .brigade-dialog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; align-items: start; }
.nx .nx-inline .brigade-dialog > .rz-alert, .nx .nx-inline .brigade-dialog > .rz-message, .nx .nx-inline .brigade-dialog > p,
.nx .nx-inline .brigade-dialog > .brigade-field.full, .nx .nx-inline .brigade-dialog > :last-child { grid-column: 1 / -1; }
.nx .nx-inline .brigade-dialog > :last-child { justify-content: flex-start !important; margin-top: 6px; }
.nx .nx-inline .brigade-form-grid .brigade-field { grid-column: span 4; }
@media (max-width: 900px) { .nx .nx-inline .brigade-dialog { grid-template-columns: 1fr; } }

.nx .nx-inline .brigade-form-actions.nx-actions { justify-content: flex-start; gap: 10px; }

/* ---------- the new look, Buy (26 Oct): a page wrapped in .nx whose own root is an it-page; tabs outside a card ---------- */
.nx > .it-page > .it-kpis { gap: 12px; margin: 0 0 16px; }
.nx > .it-page > .it-kpis .it-kpi { border: 1px solid #E1E3E6; border-radius: 10px; padding: 14px 16px; background: #FFFFFF; }
.nx > .it-page > .it-kpis .it-kpi__v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx .rz-tabview-nav { background: transparent; border: 0; border-bottom: 1px solid #E1E3E6; margin-bottom: 16px; }
.nx .rz-tabview-nav li { border: 0; background: transparent; margin: 0 2px -1px 0; border-bottom: 2px solid transparent; border-radius: 0; }
.nx .rz-tabview-nav li button, .nx .rz-tabview-nav li a { font: 500 13.5px 'Inter', system-ui, sans-serif; color: #4A4F57; padding: 0 12px; height: 38px;
    display: flex; align-items: center; background: transparent; border: 0; box-shadow: none; outline: 0; }
.nx .rz-tabview-nav li.rz-tabview-selected { border-bottom: 2px solid #1C1F23; background: transparent; }
.nx .rz-tabview-nav li.rz-tabview-selected button, .nx .rz-tabview-nav li.rz-tabview-selected a { color: #1C1F23; font-weight: 600; }
.nx .rz-tabview-panels { padding: 0; border: 0; background: transparent; }
.nx-card .rz-tabview-nav { margin-bottom: 0; background: #FFFFFF; padding: 6px 8px 0; }
.nx-card .rz-tabview-panels { padding: 12px; background: #FFFFFF; }
.nx-card > .brigade-toolbar.nx-tools { margin: 0; }
.nx .brigade-toolbar .grow { flex: 1 1 280px; }

/* ---------- their Buy notes (26 Oct) ---------- */
.sd-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 14px; margin: 0 0 16px; border-radius: 8px;
    border: 1px solid #F1DDB0; background: #FFF8E8; color: #7A4A00; font-size: 13px; }
.sd-note b { font-weight: 600; }
.sd-note a { margin-left: auto; font-weight: 600; color: inherit; text-decoration: underline; }
.sd-note--none, .sd-note--expired { border-color: #F1CBC6; background: #FDF2F0; color: #9F2A1C; }
.sp-acts { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.nx .sp-views { padding: 0; margin: 0 0 4px; }
.nx .sp-views .it-search { margin-left: auto; margin-bottom: 6px; }
.nx .nx-titles .it-head__meta { display: block; margin-top: 2px; }
.nx .wtb-fine { margin-top: 16px; }
.nx-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nx .it-head .nx-titles { flex: 1 1 320px; min-width: 0; }
.nx .sp-grid .sp-acts .rz-button { margin: 0; }

/* ---------- the supplier's price history, their A (26 Oct): now · the price over time · every change ---------- */
.ph { display: grid; grid-template-columns: 230px minmax(0, 1fr) 360px; background: #FBFBFC; border-top: 1px solid #EEF0F2; }
.ph > div { padding: 14px 18px; min-width: 0; }
.ph > div + div { border-left: 1px solid #EEF0F2; }
.ph-k, .ph-h { font-size: 12px; font-weight: 600; color: #5C636B; margin: 0 0 6px; }
.ph-big { font-size: 24px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ph-sub { font-size: 12px; color: #7A8089; }
.ph-facts { list-style: none; margin: 12px 0 0; padding: 0; }
.ph-facts li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #EEF0F2; font-size: 12.5px; color: #5C636B; }
.ph-facts b { color: #1C1F23; font-variant-numeric: tabular-nums; }
.ph-none { grid-column: 2 / -1; display: flex; align-items: center; color: #5C636B; font-size: 13px; }
.ph-lbl { font: 12.5px 'Inter', system-ui, sans-serif; fill: #5C636B; }
.ph-svg { display: block; width: 100%; height: auto; max-height: 220px; overflow: visible; }
.ph, .ph * { white-space: normal; }
.ph-list ul { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow-y: auto; }
.ph-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 64px; gap: 2px 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid #EEF0F2; font-size: 12.5px; }
.ph-list li:first-child { border-top: 0; }
.ph-when { color: #7A8089; }
.ph-pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-pct.up { color: #A12B1D; }
.ph-pct.down { color: #1D6B47; }
.ph-who { grid-column: 1 / -1; font-size: 11.5px; color: #7A8089; margin-top: -2px; }
@media (max-width: 1100px) { .ph { grid-template-columns: 1fr; } .ph > div + div { border-left: 0; border-top: 1px solid #EEF0F2; } .ph-none { grid-column: auto; } }

/* ---------- the new look, Stock (26 Oct): a titled card per table, empty notes inside the card ---------- */
.nx-sec + .nx-sec { margin-top: 16px; }
.nx-sec__h { padding: 12px 16px; border-bottom: 1px solid #E7E9EC; }
.nx-sec__h h2 { margin: 0; font-size: 14px; font-weight: 600; color: #1C1F23; }
.nx-card > .mf-hint, .nx-card > .it-note { margin: 0; padding: 14px 16px; }
.nx-card > .rz-progressbar-circular { margin: 16px; }
.nx-card > .it-table { margin: 0; border: 0; border-radius: 0; }
.nx > .brigade-page-head + .brigade-form-section { margin-top: 0; }
.nx .it-crumb a { color: #2B5FA8; }
.nx-card > .it-filters.nx-views { margin: 0; }
.nx .sc-col > .brigade-form-section { margin-bottom: 0; }
.nx .sc-hold > div > span:last-child { white-space: nowrap; flex: none; }
/* Traceability in the new look: labels in plain case like every other page, the practice note quiet */
.nx .tr-fact__k, .nx .tr-rec__n span, .nx .tr-hit__nums span, .nx .ts-sc th, .nx .ts-table th, .nx .ts-email__row label {
    text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: #5C636B; }
.nx .tr-rec__n { border-color: #E1E3E6; border-radius: 10px; }
.nx .rz-alert.rz-info { background: #F7F8F9; border: 1px solid #E1E3E6; border-radius: 8px; color: #30353B; }
.nx .rz-alert.rz-info .rz-alert-icon, .nx .rz-alert.rz-info .rz-alert-title { color: #30353B; }

/* Their note (26 Oct): in every table of the new look the first and last column breathe: 16px in from the left and the right.
   A row that opens across the whole table (colspan) keeps its own padding. */
.nx .rz-grid-table > thead > tr > th:first-child, .nx .rz-grid-table > tbody > tr > td:first-child:not([colspan]),
.nx .it-table > thead > tr > th:first-child, .nx .it-table > tbody > tr > td:first-child:not([colspan]),
.nx .brigade-lines > thead > tr > th:first-child, .nx .brigade-lines > tbody > tr > td:first-child:not([colspan]) { padding-left: 16px; }
.nx .rz-grid-table > thead > tr > th:last-child, .nx .rz-grid-table > tbody > tr > td:last-child:not([colspan]),
.nx .it-table > thead > tr > th:last-child, .nx .it-table > tbody > tr > td:last-child:not([colspan]),
.nx .brigade-lines > thead > tr > th:last-child, .nx .brigade-lines > tbody > tr > td:last-child:not([colspan]) { padding-right: 16px; }
/* a Radzen heading already sits 8px inside its own title box: 8 more lines it up with the 16px of the rows below */
.nx .rz-grid-table > thead > tr > th:first-child { padding-left: 8px; }

/* ---------- the new look, 3 · Make (26 Oct) ---------- */
.nx-card.pr-card { overflow: visible; }   /* a run's row menu opens below its row and must not be cut off by the card */
.nx .pr-card .nx-views .pr-sep { align-self: center; height: 18px; margin: 0 6px; }
.nx .pr-card button.bg-fchip { font-family: inherit; }
.pr-mkall { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.nx-card > .pr-mkall { margin: 0; padding: 10px 16px; border-bottom: 1px solid #E7E9EC; }
.pr-tomake-note { margin: 10px 0 0; }
.nx-card > .pr-tomake-note { margin: 0; padding: 10px 16px 12px; border-top: 1px solid #E7E9EC; }
.nx .nr-run__l, .nx .pl-h { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: #5C636B; }
.nx .rz-button .rz-button-text { white-space: nowrap; }   /* a button's words never break onto two lines */

/* ---------- the new look, 4 · Sell (26 Oct) ---------- */
.nx .cu-page .nx-card { overflow: visible; }   /* a customer's row menu must not be cut off by the card */
.nx .cc-table > thead > tr > th:first-child, .nx .cc-table > tbody > tr > td:first-child:not([colspan]) { padding-left: 16px; }
.nx .cc-table > thead > tr > th:last-child, .nx .cc-table > tbody > tr > td:last-child:not([colspan]) { padding-right: 16px; }
.nx .it-card.so-card { border-color: #E1E3E6; border-radius: 10px; }
.nx .brigade-cards .brigade-stat { border: 1px solid #E1E3E6; border-radius: 10px; box-shadow: none; }
.nx-card > .cu-sum { margin: 0; padding: 10px 16px; border-bottom: 1px solid #E7E9EC; }
.nx .brigade-cards { gap: 12px; }
.nx .brigade-cards .brigade-stat { padding: 14px 16px; background: #FFFFFF; }
.nx .brigade-stat__label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: #5C636B; }
.nx .brigade-stat__value { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
/* a Sell list card: the table runs edge to edge like every other list, headings in plain case on the grey band */
.nx .so-card:has(> table:only-child) { padding: 0; }
.nx .so-card:has(> table:only-child) > table > thead > tr > th { background: #F7F8F9; border-bottom: 1px solid #E7E9EC; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: #5C636B; padding-top: 9px; padding-bottom: 9px; }
.nx .so-card:has(> table:only-child) > table > thead > tr > th:first-child { border-top-left-radius: 10px; }
.nx .so-card:has(> table:only-child) > table > thead > tr > th:last-child { border-top-right-radius: 10px; }
.nx .cc-table th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: #5C636B; }
.nx .dr-done, .nx .nx-card + .nx-card { margin-top: 16px; }
/* Sell pages: every small label in plain case, like the rest of the new look */
.nx .ent-metric__label, .nx .brigade-recipe-totals span, .nx .cn-why__k { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: #5C636B; }
.nx .sv-card h3, .nx .sv-h { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: #1C1F23; }
/* a Radzen heading's title box has 8px on the left only: give it 8px on the right too, so a right-aligned heading sits over
   its numbers instead of 8px past them; the last column's 16px then counts that 8 */
.nx .rz-grid-table > thead > tr > th .rz-column-title { padding-right: 8px; }
.nx .rz-grid-table > thead > tr > th:last-child { padding-right: 8px; }
/* the unsorted sort arrow is invisible but still takes 16px, which pushed a right-aligned heading 20px off its numbers:
   it takes no room until the column is really sorted */
.nx .rz-sortable-column-icon.rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { display: none; }

/* ---------- the new look, Administration (26 Oct) ---------- */
/* a field you are typing in shows the theme's blue, not the old green */
.nx .rz-textbox:focus, .nx .rz-textarea:focus, .nx .rz-numeric.rz-state-focused, .nx .rz-numeric:focus-within,
.nx .rz-dropdown.rz-state-focused, .nx .rz-datepicker:focus-within .rz-inputtext, .nx input.rz-inputtext:focus {
    border-color: #2B5FA8 !important; box-shadow: 0 0 0 3px rgba(43, 95, 168, .14) !important; outline: 0; }
.nx .rz-textbox:hover:not(:focus), .nx .rz-dropdown:hover:not(.rz-state-focused) { border-color: #9AA1AB; }

/* ---------- THE HOME PAGE, their approved mockup version 4 (27 Oct): alerts, the money, one table at a time ---------- */
.hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.hm-date{font-size:13px;color:#5C636B;margin-top:2px}
.hm-seg{display:inline-flex;border:1px solid #D2D5DA;border-radius:8px;overflow:hidden;background:#FFFFFF}
.hm-seg button{height:34px;padding:0 14px;border:0;border-left:1px solid #D2D5DA;background:#FFFFFF;font:500 13px 'Inter',system-ui,sans-serif;color:#4A4F57;cursor:pointer}
.hm-seg button:first-child{border-left:0}
.hm-seg button.on{background:#1C1F23;color:#FFFFFF}
.hm .cc-strip, .hm .gs{margin-bottom:16px}
.hm-alerts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#FFFFFF;border:1px solid #E1E3E6;border-radius:10px;margin-bottom:20px}
.hm-acol{min-width:0}
.hm-acol + .hm-acol{border-left:1px solid #E7E9EC}
.hm-ah{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #E7E9EC}
.hm-ah h2{margin:0;font-size:14px;font-weight:600}
.hm-c{min-width:22px;height:22px;border-radius:999px;background:#F1F2F4;color:#4A4F57;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;box-sizing:border-box}
.hm-c.red{background:#FDE7E4;color:#A12B1D}
.hm-c.amber{background:#FFF1D6;color:#8A5300}
.hm-acol ul{list-style:none;margin:0;padding:0}
.hm-acol li{border-top:1px solid #F1F2F4}
.hm-acol li:first-child{border-top:0}
.hm-acol li a{display:grid;grid-template-columns:minmax(0,1fr) auto 10px;align-items:baseline;gap:12px;padding:11px 18px;color:#1C1F23;text-decoration:none}
.hm-acol li a:hover{background:#F7F8F9}
.hm-acol li a::after{content:"\203A";color:#9AA1AB;font-size:16px;line-height:1}
.hm-acol li b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-acol li span{font-size:12.5px;color:#5C636B;white-space:nowrap;text-align:right}
.hm-none{margin:0;padding:14px 18px;font-size:13px;color:#7A8089}
.hm-more{display:block;width:100%;text-align:left;padding:10px 18px;border:0;border-top:1px solid #F1F2F4;background:transparent;font:500 12.5px 'Inter',system-ui,sans-serif;color:#2B5FA8;cursor:pointer}
.hm-more:hover{text-decoration:underline}
.hm-stmt{display:flex;align-items:stretch;background:#FFFFFF;border:1px solid #E1E3E6;border-radius:10px;margin-bottom:20px}
.hm-stmt > div{padding:18px 20px;min-width:0}
.hm-stmt > div:not(.hm-op):not(.hm-gap){flex:1 1 0}
.hm-stmt span{display:block;font-size:12.5px;color:#5C636B;font-weight:500}
.hm-stmt b{display:block;font-size:24px;font-weight:600;margin:3px 0 1px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hm-stmt em{display:block;font-style:normal;font-size:12px;color:#7A8089}
.hm-stmt > .hm-op{padding:20px 2px 0;font-size:20px;color:#9AA1AB;font-weight:300}
.hm-stmt > .hm-gap{flex:0 0 1px;padding:0;background:#E7E9EC;margin:14px 8px}
.hm-tabbar{display:flex;gap:4px;padding:6px 10px 0;border-bottom:1px solid #E7E9EC;flex-wrap:wrap}
.hm-tabbar button{height:40px;padding:0 14px;border:0;background:transparent;font:500 13.5px 'Inter',system-ui,sans-serif;color:#4A4F57;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.hm-tabbar button.on{color:#1C1F23;font-weight:600;border-bottom-color:#1C1F23}
.hm-t{width:100%;border-collapse:collapse}
.hm-t th{background:#F7F8F9;font-size:12px;font-weight:600;color:#5C636B;padding:8px 10px;border-bottom:1px solid #E7E9EC;text-align:left;white-space:nowrap}
.hm-t td{padding:12px 10px;font-size:13.5px;border-bottom:1px solid #F1F2F4;vertical-align:middle}
.hm-t th:first-child,.hm-t td:first-child{padding-left:20px}
.hm-t th:last-child,.hm-t td:last-child{padding-right:20px}
.hm-t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-t tbody tr:last-child td{border-bottom:0}
.hm-t tfoot td{border-top:1px solid #E1E3E6;border-bottom:0;font-weight:600;background:#FBFBFC}
.hm-t td b{font-weight:600;color:#1C1F23}
.hm-t td small{display:block;font-size:11.5px;color:#7A8089;margin-top:1px}
.hm-t tr.flag td small{color:#8A5300;font-weight:500}
.hm-t td.up{color:#A12B1D;font-weight:600}
.hm-t td.down{color:#1D6B47;font-weight:600}
.hm-bar{display:flex;align-items:center;gap:8px;min-width:110px}
.hm-bar i{display:block;height:6px;border-radius:3px;background:#1C1F23;flex:none}
.hm-bar span{font-size:12.5px;color:#30353B;font-variant-numeric:tabular-nums}
.hm-bar.low i{background:#C77700}
.hm-bar.low span{color:#8A5300;font-weight:600}
.hm-fine{margin:0;padding:12px 20px 16px;font-size:12.5px;color:#5C636B;border-top:1px solid #F1F2F4}
.hm-empty{margin:0;padding:22px 20px;font-size:13.5px;color:#7A8089}
@media (max-width: 1100px){.hm-alerts{grid-template-columns:1fr}.hm-acol + .hm-acol{border-left:0;border-top:1px solid #E7E9EC}.hm-stmt{flex-wrap:wrap}.hm-stmt > .hm-op,.hm-stmt > .hm-gap{display:none}}
.hm-credit{font-size:12px;color:#7A8089}
/* their A (27 Oct): the products with no price wait behind one line under a customer's prices */
.cu-noprice{display:block;margin:12px 0 0;padding:0;border:0;background:transparent;font:500 13px 'Inter',system-ui,sans-serif;color:#2B5FA8;cursor:pointer}
.cu-noprice:hover{text-decoration:underline}
.cu-noprice + .brigade-lines{margin-top:10px}