/* ==========================================================================
   MeatZDymkom — shell & design tokens (2026-09 redesign)
   Loaded after style.css. Everything visual that the new layout needs lives
   here, so the redesign can be reviewed (or rolled back) as one file.
   ========================================================================== */

:root {
    --mz-ink:        #24313a;
    --mz-sub:        #5d6b73;
    --mz-paper:      #fffdf8;
    --mz-ground:     #f4f2ec;
    --mz-line:       #dcdfd6;
    --mz-line-soft:  #e7e8e1;
    --mz-forest:     #263b3c;
    --mz-forest-2:   #2f4746;
    --mz-meat:       #9b3e35;
    --mz-meat-deep:  #7d2f28;
    --mz-meat-soft:  #f6dfd8;
    --mz-sage:       #2d6c5c;
    --mz-sage-deep:  #1f4d41;
    --mz-sage-soft:  #dcece4;
    --mz-amber:      #a96a17;
    --mz-amber-soft: #f4e5c8;
    --mz-amber-ink:  #6e440c;
    --mz-blue:       #1f5a73;
    --mz-blue-soft:  #dcebf2;
    --mz-mist:       #eef2eb;

    --mz-font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mz-display: "Unbounded", "Manrope", "Segoe UI", system-ui, sans-serif;

    --sidebar-w: 248px;
    --bs-heading-color: inherit;
    --bs-body-color: var(--mz-ink);
    --bs-body-font-family: var(--mz-font);

    /* Re-point the legacy tokens so older pages pick up the new palette. */
    --primary:      var(--mz-forest);
    --primary-mid:  var(--mz-forest-2);
    --accent:       var(--mz-sage);
    --accent-dark:  var(--mz-sage-deep);
    --bg:           var(--mz-ground);
    --border:       var(--mz-line);
    --muted:        var(--mz-sub);
    --primary-color:   var(--mz-forest);
    --secondary-color: var(--mz-sage);
}

body {
    font-family: var(--mz-font);
    background-color: var(--mz-ground);
    color: var(--mz-ink);
}

/* ---------- Bootstrap harmonisation (all pages) ---------- */
a { color: var(--mz-sage); }
a:hover { color: var(--mz-sage-deep); }

.btn-primary {
    --bs-btn-bg: var(--mz-meat); --bs-btn-border-color: var(--mz-meat);
    --bs-btn-hover-bg: var(--mz-meat-deep); --bs-btn-hover-border-color: var(--mz-meat-deep);
    --bs-btn-active-bg: var(--mz-meat-deep); --bs-btn-active-border-color: var(--mz-meat-deep);
    --bs-btn-disabled-bg: var(--mz-meat); --bs-btn-disabled-border-color: var(--mz-meat);
}
.btn-outline-primary {
    --bs-btn-color: var(--mz-meat); --bs-btn-border-color: var(--mz-meat);
    --bs-btn-hover-bg: var(--mz-meat); --bs-btn-hover-border-color: var(--mz-meat);
    --bs-btn-active-bg: var(--mz-meat-deep); --bs-btn-active-border-color: var(--mz-meat-deep);
}
.btn-success {
    --bs-btn-bg: var(--mz-sage); --bs-btn-border-color: var(--mz-sage);
    --bs-btn-hover-bg: var(--mz-sage-deep); --bs-btn-hover-border-color: var(--mz-sage-deep);
    --bs-btn-active-bg: var(--mz-sage-deep); --bs-btn-active-border-color: var(--mz-sage-deep);
}
.btn-outline-success {
    --bs-btn-color: var(--mz-sage); --bs-btn-border-color: var(--mz-sage);
    --bs-btn-hover-bg: var(--mz-sage); --bs-btn-hover-border-color: var(--mz-sage);
}
.btn { border-radius: 10px; font-weight: 600; }
.text-primary { color: var(--mz-meat) !important; }
.bg-primary { background-color: var(--mz-forest) !important; }
.card { border-color: var(--mz-line); border-radius: 14px; background: var(--mz-paper); }
.card-header { background: transparent; border-bottom-color: var(--mz-line-soft); font-weight: 700; }
.table { --bs-table-bg: transparent; }
.form-control, .form-select { border-color: #cfd5cc; border-radius: 10px; }
.form-control:focus, .form-select:focus {
    border-color: var(--mz-sage);
    box-shadow: 0 0 0 .2rem rgba(45, 108, 92, .18);
}
.main-content h1, .main-content h2 { font-weight: 800; letter-spacing: -0.01em; }

/* ---------- Top navbar (mobile, worker, store) ---------- */
.app-navbar { background: var(--mz-forest); box-shadow: none; }
.brand-mark {
    width: 28px; height: 28px; border-radius: 8px; background: var(--mz-meat);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mz-display); font-weight: 700; font-size: 14px; color: #fff;
}
.app-brand .brand-text { font-family: var(--mz-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }

/* ---------- Shell icons (inline SVG, no icon-font dependency) ---------- */
.mz-ico { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none;
          stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Management sidebar ---------- */
.shell-mgmt .sidebar {
    background: var(--mz-forest);
    border-right: 0;
    color: #fff;
    padding: 20px 14px 16px;
    gap: 18px;
}
.shell-mgmt .sidebar-header { display: none !important; }
.sidebar-brand {
    display: flex; align-items: center; gap: 10px; padding: 2px 8px;
    color: #fff; text-decoration: none;
    font-family: var(--mz-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.sidebar-brand:hover { color: #fff; }
.sidebar-close-x {
    margin-left: auto; background: rgba(255,255,255,.12); border: 0; color: #fff;
    width: 36px; height: 36px; border-radius: 10px; display: none; align-items: center; justify-content: center;
}
.sidebar-search { position: relative; flex: 0 0 auto; max-width: none; }
.sidebar-search .search-pill-wrap {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.09); border-radius: 10px; padding: 0 12px; height: 42px;
    color: #b8c9c1; width: 100%;
}
.sidebar-search .search-pill-input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff;
    font: 500 14px var(--mz-font); padding: 0; height: 100%;
}
.sidebar-search .search-pill-input::placeholder { color: #b8c9c1; }
.sidebar-search .search-results-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; width: 340px; z-index: 1200;
}
.mz-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mz-nav a {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px;
    border-radius: 10px; color: #d6e2dc; text-decoration: none; font-weight: 600; font-size: 15px;
}
.mz-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.mz-nav a.active { background: var(--mz-paper); color: var(--mz-forest); }
.mz-nav-sep { border-top: 1px solid rgba(255,255,255,.14); margin: 6px 0; }
.sidebar-spacer { flex: 1; }
.sidebar-user {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #d6e2dc; font-size: 14px;
}
.sidebar-user .avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--mz-meat); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
}
.sidebar-user b { color: #fff; display: block; line-height: 1.2; }
.sidebar-user small { font-size: 12px; }
.sidebar-user form { margin-left: auto; }
.sidebar-user .logout {
    background: transparent; border: 1px solid rgba(255,255,255,.25); color: #d6e2dc;
    border-radius: 9px; height: 34px; padding: 0 10px; font: 600 12px var(--mz-font);
}
.sidebar-user .logout:hover { color: #fff; border-color: #fff; }

@media (min-width: 992px) {
    .shell-mgmt .app-navbar { display: none; }
    .shell-mgmt .sidebar { top: 0; }
    .shell-mgmt .main-content {
        margin-top: 0;
        padding: 32px 40px 48px;
        min-height: 100vh;
    }
    .shell-mgmt .toast-stack { top: 16px; }
}
@media (max-width: 991px) {
    .shell-mgmt .sidebar { padding-top: 16px; }
    .sidebar-close-x { display: flex; }
    .sidebar-search { display: none; }
}

/* Bottom nav (mobile) */
.mobile-bottom-nav { background: var(--mz-paper) !important; border-top-color: var(--mz-line) !important; }
.bottom-nav-item.active { color: var(--mz-meat) !important; }
.bottom-nav-item .mz-ico { width: 23px; height: 23px; }

/* ---------- Page header + zone tabs ---------- */
.mz-page-head {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.mz-page-title {
    margin: 0; font-family: var(--mz-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em;
    color: var(--mz-ink);
}
/* The row that holds the tab strip (and the optional «more» button). It must
   never be wider than the page: the strip scrolls inside it, the page stays put. */
.mz-tabs-row { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.mz-tabs-row .mz-tabs { flex: 0 1 auto; min-width: 0; }
.mz-tabs {
    display: flex; gap: 4px; background: var(--mz-line-soft); padding: 4px; border-radius: 12px;
    overflow-x: auto; max-width: 100%; scrollbar-width: none; position: relative;
    -webkit-overflow-scrolling: touch;
    /* a swipe on the strip moves only the strip - never the page or the browser's back gesture */
    overscroll-behavior-x: contain; touch-action: pan-x;
    scroll-padding-inline: 16px;
    /* soft edges where more tabs are hidden; the script sets the widths */
    --mz-tabs-fade-l: 0px; --mz-tabs-fade-r: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mz-tabs-fade-l), #000 calc(100% - var(--mz-tabs-fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--mz-tabs-fade-l), #000 calc(100% - var(--mz-tabs-fade-r)), transparent 100%);
}
.mz-tabs::-webkit-scrollbar { display: none; }
.mz-tabs a { flex: 0 0 auto; -webkit-tap-highlight-color: transparent; }
.mz-tabs a {
    display: flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 9px;
    color: #3d4b53; font-weight: 700; font-size: 14.5px; text-decoration: none; white-space: nowrap;
}
.mz-tabs a:hover { background: rgba(255,255,255,.65); color: var(--mz-ink); }
.mz-tabs a.active { background: var(--mz-forest); color: #fff; }
.mz-page-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 767px) {
    .mz-page-title { font-size: 21px; }
    .mz-page-head { gap: 10px; }
    .mz-tabs-row { flex: 1 1 100%; }
    .mz-tabs a { min-height: 44px; padding: 0 15px; }
    .mz-page-actions { margin-left: 0; width: 100%; }
}

/* ---------- Buttons ---------- */
.mz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 22px; border-radius: 12px; font-weight: 800; font-size: 15.5px;
    text-decoration: none; border: 2px solid transparent; cursor: pointer; white-space: nowrap;
    font-family: var(--mz-font);
}
.mz-btn .mz-ico { width: 22px; height: 22px; }
.mz-btn-primary { background: var(--mz-meat); color: #fff; }
.mz-btn-primary:hover { background: var(--mz-meat-deep); color: #fff; }
.mz-btn-secondary { background: #fff; color: var(--mz-sage); border-color: var(--mz-sage); }
.mz-btn-secondary:hover { background: var(--mz-mist); color: var(--mz-sage-deep); }
.mz-btn-sm {
    min-height: 40px; padding: 0 14px; border-radius: 9px; font-weight: 700; font-size: 14px;
    background: #fff; border: 1px solid #cfd5cc; color: var(--mz-ink);
}
.mz-btn-sm:hover { border-color: var(--mz-ink); color: var(--mz-ink); }

/* ---------- Home ---------- */
.mz-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.mz-home-date { font-size: 14px; font-weight: 600; color: var(--mz-sub); }
.mz-home-greet { margin: 4px 0 0; font-family: var(--mz-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.mz-home-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mz-home-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; }
@media (max-width: 1199px) { .mz-home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
    .mz-home-greet { font-size: 23px; }
    .mz-home-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .mz-home-actions .mz-btn { white-space: normal; line-height: 1.2; min-height: 64px; padding: 0 12px; font-size: 14.5px; }
}

.mz-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mz-section-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.mz-section-head .more { margin-left: auto; font-size: 14px; font-weight: 700; text-decoration: none; }
.mz-count {
    font-size: 13px; font-weight: 800; color: #fff; background: var(--mz-meat);
    border-radius: 20px; padding: 2px 9px; line-height: 1.4;
}
.mz-panel { background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: 14px; }

.mz-attn { display: flex; flex-direction: column; }
.mz-attn-row { display: flex; align-items: center; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--mz-line-soft); }
.mz-attn-row:last-child { border-bottom: 0; }
.mz-attn-ico {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mz-attn-ico.red   { background: var(--mz-meat-soft); color: var(--mz-meat); }
.mz-attn-ico.amber { background: var(--mz-amber-soft); color: var(--mz-amber-ink); }
.mz-attn-ico.blue  { background: #e1ebf0; color: var(--mz-blue); }
.mz-attn-ico.green { background: var(--mz-mist); color: var(--mz-sage); }
.mz-attn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mz-attn-text b { font-size: 15px; }
.mz-attn-text span { font-size: 13px; color: var(--mz-sub); }
.mz-attn-row form { margin: 0; }
.mz-attn-empty {
    display: flex; align-items: center; gap: 14px; padding: 22px; color: var(--mz-sage-deep); font-weight: 700;
}
@media (max-width: 575px) {
    .mz-attn-row { flex-wrap: wrap; padding: 14px 16px; }
    .mz-attn-row .mz-attn-actions { width: 100%; padding-left: 56px; }
}
.mz-attn-actions { display: flex; gap: 8px; align-items: center; }

.mz-batch-card {
    display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-bottom: 12px;
    background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: 14px;
    text-decoration: none; color: var(--mz-ink);
}
.mz-batch-card:hover { border-color: #b9c2b8; color: var(--mz-ink); }
.mz-batch-card .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mz-batch-card b { font-size: 16px; }
.mz-batch-card .meta { font-size: 13px; color: var(--mz-sub); }
.mz-progress { height: 8px; border-radius: 4px; background: var(--mz-line-soft); overflow: hidden; }
.mz-progress > div { height: 100%; border-radius: 4px; background: var(--mz-blue); }
.mz-dashed-link {
    display: flex; justify-content: space-between; align-items: center; padding: 15px 18px;
    border: 1px dashed #bfc8bf; border-radius: 14px; text-decoration: none; color: var(--mz-ink); font-weight: 700;
}
.mz-dashed-link:hover { background: var(--mz-paper); color: var(--mz-ink); }

/* ---------- Status chips ---------- */
.mz-chip { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 3px 8px; white-space: nowrap; display: inline-block; }
.mz-chip.planned     { background: #eceee8; color: #3d4b53; }
.mz-chip.in_progress { background: var(--mz-blue-soft); color: var(--mz-blue); }
.mz-chip.completed   { background: var(--mz-sage-soft); color: #235849; }
.mz-chip.canceled    { background: #eceee8; color: var(--mz-sub); }
.mz-chip.warn        { background: var(--mz-amber-soft); color: var(--mz-amber-ink); }
.mz-chip.alert       { background: var(--mz-meat-soft); color: #7d2a23; }

/* ---------- "Усе інше" hub ---------- */
.mz-hub-group { margin-bottom: 26px; }
.mz-hub-group h2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--mz-sub); margin: 0 0 10px; }
.mz-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.mz-hub-grid a {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px;
    background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: 12px;
    text-decoration: none; color: var(--mz-ink); font-weight: 700; font-size: 14.5px;
}
.mz-hub-grid a:hover { border-color: #b9c2b8; color: var(--mz-ink); }
.mz-hub-grid a i { font-size: 1.15rem; color: var(--mz-sage); width: 22px; text-align: center; }

/* ---------- Mobile header: brand left, no overlap with buttons ---------- */
@media (max-width: 991px) {
    .app-navbar .app-brand { position: static; transform: none; margin-right: auto; min-width: 0; overflow: hidden; }
    .app-navbar .app-brand .brand-text { overflow: hidden; text-overflow: ellipsis; }
    .app-navbar .nav-right { margin-left: 0; flex-shrink: 0; }
    .app-navbar .user-chip .chevron { display: none; }
    /* Old Android app builds injected a settings button here; it lives in the menus instead. */
    .app-navbar .nav-right > .nav-logout-btn { display: none !important; }
}
@media (max-width: 359px) {
    .app-navbar .app-brand .brand-text { display: none; }
}
@media (max-width: 400px) {
    .mz-home-actions { grid-template-columns: 1fr; }
    .mz-home-actions .mz-btn { min-height: 56px; }
}
.mz-btn { overflow-wrap: normal; word-break: normal; }

/* ---------- Older pages: bring tabs/breadcrumbs in line with the new shell ---------- */
.section-tabs {
    display: flex; gap: 4px; background: var(--mz-line-soft); padding: 4px; border-radius: 12px;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; border-bottom: 0; margin-bottom: 18px;
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tabs .section-tab {
    display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 9px;
    color: #3d4b53; font-weight: 700; font-size: 14px; white-space: nowrap; border: 0; background: transparent;
    text-decoration: none; margin: 0; flex-shrink: 0;
}
.section-tabs .section-tab.active { background: var(--mz-forest); color: #fff; border: 0; }
@media (max-width: 991px) {
    .crumb-bar { display: none; }
}
/* The closed phone search bar is invisible but used to sit over the top of the
   page and swallow taps there (the Back button among them). */
.mobile-search-bar:not(.open) { pointer-events: none; }
@media (min-width: 992px) { .mobile-search-bar { display: none; } }

/* The page shell's Back: shown on every inner screen without its own back arrow. */
.mz-shell-back-bar { margin: -4px 0 12px; }
.mz-shell-back {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; max-width: 100%; padding: 0 16px 0 12px;
    border: 1px solid var(--mz-line); border-radius: 21px; background: var(--mz-paper); color: var(--mz-ink);
    font-weight: 700; font-size: 14.5px; text-decoration: none;
}
.mz-shell-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-shell-back:hover { border-color: var(--mz-ink); color: var(--mz-ink); background: #fff; }
.mz-shell-back i { font-size: 1.05rem; }
/* Inside the Android app the phone's Back button does this job. */
.mz-android [data-app-back-bar] { display: none !important; }

/* ---------- Side menu: never scroll sideways ---------- */
.shell-mgmt .sidebar { overflow-x: hidden; }
.sidebar-user { min-width: 0; }
.sidebar-user > div { min-width: 0; flex: 1; }
.sidebar-user > div b, .sidebar-user > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user form { flex-shrink: 0; }
/* The first Android build squeezed a settings button into this row; the menu
   under the avatar (top right) has it instead. */
.sidebar-user > button.logout { display: none !important; }

/* Returning to a page jumps straight to where you were — no smooth-scroll animation. */
html, body { scroll-behavior: auto !important; }


/* ==========================================================================
   Lists on a phone: one compact row per record (see mzMobileRows in base.html)
   line 1: name ........ key figure  ●
   line 2: small «label value» pairs, empty ones dropped ........ [actions]
   ========================================================================== */
.mz-list-filter { margin: 0 0 10px; max-width: 420px; }
.mz-list-none { padding: 18px 4px; color: var(--mz-sub); font-weight: 600; }
tr.mz-filtered-out { display: none !important; }
tr[data-href] { cursor: pointer; }
@media (max-width: 991px) {
    .mz-list-filter { max-width: none; }
    .table-mobile-cards tbody tr {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px;
        position: relative;
        padding: 11px 13px; margin-bottom: 8px;
        background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: 12px;
        box-shadow: none;
    }
    .table-mobile-cards tbody tr::before { content: ""; flex: 0 0 100%; height: 0; order: 2; }
    .table-mobile-cards tbody tr.table-secondary,
    .table-mobile-cards tbody tr.table-light { background: var(--mz-mist); }
    .table-mobile-cards tbody tr.table-warning { background: #fbf3e1; border-color: #ecd9a8; }
    .table-mobile-cards tbody tr.table-danger { background: #fbeae6; border-color: #ecc4bb; }
    .table-mobile-cards tbody td,
    .table-mobile-cards tbody td:last-child {
        display: inline-flex; flex: 0 1 auto; align-items: baseline; justify-content: flex-start; gap: 5px;
        order: 3; padding: 0; border: 0; min-height: 0;
        font-size: 13.5px; line-height: 1.35; text-align: left; color: var(--mz-ink);
        background: transparent !important; box-shadow: none !important;
        min-width: 0 !important; max-width: 100%; overflow-wrap: anywhere;
    }
    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-size: 12px; font-weight: 600; color: var(--mz-sub);
        text-transform: none; letter-spacing: 0; min-width: 0; flex-shrink: 0; white-space: nowrap;
    }
    .table-mobile-cards tbody td[data-label=""]::before { display: none; }
    .table-mobile-cards tbody td.m-empty,
    .table-mobile-cards tbody td.m-hide { display: none; }
    .table-mobile-cards tbody td.m-title {
        order: 0; flex: 1 1 0; min-width: 50% !important;
        display: block; font-size: 15px; font-weight: 700; line-height: 1.3;
    }
    .table-mobile-cards tbody td.m-title::before,
    .table-mobile-cards tbody td.m-main::before,
    .table-mobile-cards tbody td.m-lead::before,
    .table-mobile-cards tbody td.m-actions::before { display: none; }
    .table-mobile-cards tbody td.m-title a { color: inherit; text-decoration: none; }
    .table-mobile-cards tbody td.m-title small,
    .table-mobile-cards tbody td.m-title .small { display: block; font-weight: 500; color: var(--mz-sub); font-size: 12.5px; }
    .table-mobile-cards tbody td.m-main {
        order: 1; flex: 0 0 auto; margin-left: auto; font-size: 15px; font-weight: 800; white-space: nowrap; text-align: right;
    }
    .table-mobile-cards tbody td.m-lead { order: 1; flex: 0 0 auto; align-self: center; }
    .table-mobile-cards tbody td.m-actions {
        order: 4; margin-left: auto; flex: 0 1 auto; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center;
    }
    .table-mobile-cards tbody td.m-actions .btn,
    .table-mobile-cards tbody td[data-label=""] .btn {
        min-height: 40px; min-width: 40px; padding: 0 12px; font-size: 13.5px;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    }
    .table-mobile-cards tbody td.m-actions form { display: inline-flex; margin: 0; }
    .table-mobile-cards tbody td[colspan] { display: block; flex: 1 1 100%; text-align: center; color: var(--mz-sub); }
    .table-mobile-cards tbody td .badge { font-size: 11.5px; }
    .table-mobile-cards tfoot { display: block; }
    .table-mobile-cards tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 13px; font-weight: 800; }
    .table-mobile-cards tfoot td, .table-mobile-cards tfoot th { display: inline-block; border: 0; padding: 0; }
    .table-mobile-cards tfoot td:empty, .table-mobile-cards tfoot th:empty { display: none; }
}


/* ==========================================================================
   Row lists: the main lists of the app (stock, ingredients, lots, batches,
   products, recipes). One short row per record, the same on every screen.
   ========================================================================== */
.mz-subhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.mz-subhead h2 { margin: 0; font-size: 18px; font-weight: 800; }
.mz-subhead .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mz-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mz-toolbar > .form-control, .mz-toolbar > .grow { flex: 1 1 220px; min-width: 0; }
.mz-fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mz-fchips button, .mz-fchips a {
    min-height: 38px; padding: 0 13px; border-radius: 20px; border: 1px solid #cfd5cc; background: var(--mz-paper);
    color: var(--mz-ink); font: 700 13.5px var(--mz-font); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; white-space: nowrap;
}
.mz-fchips .on { background: var(--mz-forest); border-color: var(--mz-forest); color: #fff; }
.mz-fchips i { font-style: normal; font-weight: 800; font-size: 12px; opacity: .75; }
.mz-rows { background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.mz-rows-group {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 9px 14px 7px; background: var(--mz-mist); border-bottom: 1px solid var(--mz-line-soft);
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mz-sub);
}
.mz-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 56px;
    border-bottom: 1px solid var(--mz-line-soft); text-decoration: none; color: var(--mz-ink);
}
.mz-rows > .mz-row:last-child, .mz-rows > .mz-row.is-last { border-bottom: 0; }
a.mz-row:hover, .mz-row[data-href]:hover { background: #faf8f0; color: var(--mz-ink); }
.mz-row[data-href] { cursor: pointer; }
.mz-row[hidden], .mz-rows-group[hidden] { display: none; }
.mz-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mz-row-body > b, .mz-row-body > a { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; color: var(--mz-ink); text-decoration: none; }
.mz-row-body small { font-size: 12.5px; color: var(--mz-sub); line-height: 1.4; overflow-wrap: anywhere; }
.mz-row-body small .bad { color: var(--mz-meat); font-weight: 700; }
.mz-row-body small .warn { color: var(--mz-amber-ink); font-weight: 700; }
.mz-row-num { flex-shrink: 0; font-weight: 800; font-size: 15px; white-space: nowrap; text-align: right; line-height: 1.3; }
.mz-row-num small { font-weight: 600; font-size: 12px; color: var(--mz-sub); }
.mz-row-num small.under { display: block; }
.mz-row-num.muted { color: #a5ada5; }
.mz-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: #c9cfc7; }
.mz-dot.ok { background: #4e9a7c; } .mz-dot.low { background: #d59a2c; } .mz-dot.out { background: var(--mz-meat); }
.mz-row-thumb { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; object-fit: cover; background: var(--mz-mist);
                display: flex; align-items: center; justify-content: center; color: #9aa59c; font-weight: 800; font-size: 15px; }
.mz-row-go { flex-shrink: 0; color: #b6beb5; width: 18px; height: 18px; }
.mz-row-btn {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; border: 1px solid #cfd5cc; background: #fff; color: var(--mz-ink);
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; padding: 0;
}
.mz-row-btn:hover { border-color: var(--mz-ink); color: var(--mz-ink); }
.mz-row-btn .mz-ico { width: 19px; height: 19px; }
.mz-rows-empty { padding: 22px 16px; color: var(--mz-sub); font-weight: 600; text-align: center; }
.mz-rows-count { font-size: 13px; color: var(--mz-sub); font-weight: 600; margin-left: auto; }
.mz-fold { background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.mz-fold > summary {
    list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 54px; cursor: pointer;
    font-weight: 800; font-size: 15px;
}
.mz-fold > summary::-webkit-details-marker { display: none; }
.mz-fold > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #9aa59c; border-bottom: 2px solid #9aa59c;
                            transform: rotate(45deg); margin-left: auto; flex-shrink: 0; transition: transform .15s; }
.mz-fold[open] > summary::after { transform: rotate(-135deg); }
.mz-fold > summary small { font-weight: 600; color: var(--mz-sub); font-size: 13px; }
.mz-fold > summary .num { margin-left: auto; font-weight: 800; white-space: nowrap; }
.mz-fold > summary .num + * { margin-left: 0; }
.mz-fold > summary:has(.num)::after { margin-left: 0; }
.mz-fold-body { padding: 4px 14px 14px; border-top: 1px solid var(--mz-line-soft); }
.mz-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--mz-line-soft); font-size: 14px; }
.mz-kv:last-child { border-bottom: 0; }
.mz-kv > span:first-child { color: var(--mz-sub); min-width: 0; }
.mz-kv > span:last-child, .mz-kv > b { text-align: right; white-space: nowrap; }
.mz-note { font-size: 13px; color: var(--mz-sub); line-height: 1.45; }

/* ---------- Older page headers: same look as the new page head ----------
   <div class="d-flex justify-content-between align-items-center"> [back] <h2>Title</h2> [buttons] </div> */
.main-content .d-flex.justify-content-between.align-items-center > h2,
.main-content .d-flex.justify-content-between.align-items-center > h1,
.main-content .d-flex.justify-content-between.align-items-center > div > h2:first-child {
    font-family: var(--mz-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em;
    margin: 0; flex: 1 1 auto; min-width: 0; color: var(--mz-ink); overflow-wrap: anywhere;
}
.main-content .d-flex.justify-content-between.align-items-center > h2 > .bi:first-child,
.main-content .d-flex.justify-content-between.align-items-center > h1 > .bi:first-child { display: none; }
.btn-back, .mz-back {
    width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mz-paper); border: 1px solid #cfd5cc; color: var(--mz-ink); box-shadow: none; text-decoration: none;
}
.btn-back:hover, .mz-back:hover { border-color: var(--mz-ink); color: var(--mz-ink); background: #fff; transform: none; }
.card > .card-header h5, .card > .card-header h6 { font-size: 15.5px; font-weight: 800; }
.card > .card-header > .bi:first-child, .card > .card-header h5 > .bi:first-child { color: var(--mz-sage); }
.alert { border-radius: 12px; }
@media (max-width: 767px) {
    .main-content .d-flex.justify-content-between.align-items-center > h2,
    .main-content .d-flex.justify-content-between.align-items-center > h1,
    .main-content .d-flex.justify-content-between.align-items-center > div > h2:first-child { font-size: 20px; }
    /* long forms and detail cards use the full width of the phone */
    .main-content .card-body { padding: 14px; }
}
.mz-hub-rare { margin-top: 6px; }
.mz-hub-rare > summary { color: var(--mz-sub); }
.mz-hub-rare .mz-fold-body { padding-top: 12px; }
.mz-hub-rare .mz-hub-grid a { background: #fff; }

/* ---------- Summary tiles + action row on detail pages ---------- */
.mz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mz-stat { background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.mz-stat span { display: block; font-size: 12px; font-weight: 700; color: var(--mz-sub); text-transform: uppercase; letter-spacing: .05em; }
.mz-stat b { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.mz-stat b small { font-size: 13px; font-weight: 700; color: var(--mz-sub); }
.mz-stat.bad b { color: var(--mz-meat); } .mz-stat.good b { color: var(--mz-sage-deep); }
.mz-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mz-actions .mz-btn { min-height: 46px; padding: 0 12px; font-size: 14.5px; flex: 1 1 0; min-width: 0; }
.mz-actions .mz-btn .mz-ico { width: 19px; height: 19px; }
.mz-section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--mz-sub); margin: 18px 0 8px; }
.mz-btn-danger { background: #fff; color: var(--mz-meat); border-color: #e2bdb6; }
.mz-btn-danger:hover { background: var(--mz-meat-soft); color: var(--mz-meat-deep); }

/* ---------- Action button groups on older pages: two compact columns on a phone ---------- */
@media (max-width: 575px) {
    .document-actions, .prep-detail-actions, .prep-list-actions, .supplier-order-actions,
    .scanner-page-actions, .prep-edit-actions {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
        flex-direction: row; align-items: stretch;
    }
    .document-actions > *, .prep-detail-actions > *, .prep-list-actions > *, .supplier-order-actions > *,
    .scanner-page-actions > *, .prep-edit-actions > * { width: auto !important; min-width: 0; margin: 0 !important; }
    .document-actions .btn, .prep-detail-actions .btn, .prep-list-actions .btn, .supplier-order-actions .btn,
    .scanner-page-actions .btn, .prep-edit-actions .btn {
        width: 100% !important; min-height: 44px; padding: 0 8px; font-size: 14px;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    }
    .document-actions form, .prep-detail-actions form, .prep-list-actions form,
    .supplier-order-actions form, .prep-edit-actions form { display: flex; width: auto !important; }
    .rcv-ways .mz-row-thumb { font-size: 18px; color: var(--mz-sage); }
}
.rcv-ways .mz-row-thumb { font-size: 18px; color: var(--mz-sage); }

/* Older headers: the title stays on the line with the back arrow and wraps inside itself */
.main-content .d-flex.justify-content-between.align-items-center > .btn-back ~ h2,
.main-content .d-flex.justify-content-between.align-items-center > .btn-back ~ h1 { flex: 1 1 0%; min-width: 55%; }
/* …and a second, textual «← Back» button next to the arrow is not needed */
.main-content .d-flex.justify-content-between.align-items-center:has(> .btn-back) > a.btn:has(> .bi-arrow-left:first-child):not(.btn-back) { display: none; }

/* ---------- Preparations list: tidy filters ---------- */
.prep-more-filters > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--mz-sage); list-style: none; padding: 4px 0; }
.prep-more-filters > summary::-webkit-details-marker { display: none; }
.prep-more-filters > summary::before { content: "+ "; }
.prep-more-filters[open] > summary::before { content: "− "; }
.prep-status-toolbar .btn { border-radius: 20px; min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; }
@media (max-width: 767px) {
    .prep-status-toolbar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .prep-status-toolbar::-webkit-scrollbar { display: none; }
    .prep-status-toolbar > * { flex: 0 0 auto; }
}

/* ---------- Tables of form rows (receiving positions): one stacked card per row on a phone ---------- */
.mz-form-rows tr[hidden] { display: none !important; }
@media (max-width: 767px) {
    .mz-form-rows, .mz-form-rows tbody { display: block; width: 100%; }
    .mz-form-rows thead { display: none; }
    .mz-form-rows tbody tr { display: block; padding: 12px 14px; border-bottom: 6px solid var(--mz-ground); }
    .mz-form-rows tbody tr:last-child { border-bottom: 0; }
    .mz-form-rows tbody td { display: block; padding: 0 0 8px !important; border: 0; min-width: 0 !important; width: 100% !important; }
    .mz-form-rows tbody td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--mz-sub); margin-bottom: 3px; }
    .mz-form-rows .form-control-sm, .mz-form-rows .form-select-sm { min-height: 44px; font-size: 16px; }
}