/*
 * farm-theme.css
 * ~~~~~~~~~~~~~~
 * Semantic utility classes for the Marali Farm dashboard.
 *
 * Replaces all inline style="" attributes with meaningful class names
 * so templates stay declarative and themes can be changed in one place.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL TEXT OVERRIDES — readable muted text, consistent text-muted
   ═══════════════════════════════════════════════════════════════════════════ */

.text-muted { color: var(--text-muted) !important; }

.text-farm         { color: var(--text-primary); }
.text-farm-strong  { color: var(--text-primary); font-weight: 700; }
.text-farm-muted   { color: var(--text-secondary); }
.text-farm-soft    { color: var(--text-soft); }

.farm-page-description {
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.45;
}

.farm-section-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.farm-metric-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.farm-metric-value {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.farm-muted-link {
    color: var(--text-brand);
    font-weight: 650;
    text-decoration: none;
}
.farm-muted-link:hover,
.farm-muted-link:focus-visible {
    color: var(--brand-green-dark);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STAT CARDS — high-contrast white cards with colored top borders
   Optimized for outdoor / bright sunlight readability
   ═══════════════════════════════════════════════════════════════════════════ */

.stat-card-hc {
    background-color: var(--surface-card) !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    border-radius: 0.75rem !important;
}
.stat-card-hc .stat-value  { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--text-primary); }
.stat-card-hc .stat-label  { color: var(--text-muted) !important; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-card-hc .stat-sub    { color: var(--text-muted) !important; font-size: 0.72rem; }

/* Bootstrap's .card sets word-wrap:break-word, which the narrow mobile
   columns turn into mid-token splits ("OUTSTANDI/NG", "270,05/0").
   Wrap at spaces, hyphenate long words; never split grouped digits. */
.stat-card-hc .stat-label,
.stat-card-hc .stat-value,
.stat-card-hc .stat-sub {
    -webkit-hyphens: auto;
    hyphens: auto;
}
.stat-card-hc .stat-value,
.stat-card-hc .stat-sub {
    overflow-wrap: normal; /* figures wrap at spaces only, never mid-digit */
}
.stat-card-hc .stat-label {
    overflow-wrap: break-word; /* last resort when no hyphenation dictionary */
}

.stat-card-hc.border-top-purple,
.stat-card-hc.border-top-blue,
.stat-card-hc.border-top-healthy,
.stat-card-hc.border-top-danger,
.stat-card-hc.border-top-warning,
.stat-card-hc.border-top-feed,
.stat-card-hc.border-top-info,
.stat-card-hc.border-top-teal    { border-top: none !important; }

/* Compact stat cards for the read-only KPI pages (Inventory overview,
   Profit summary). These live in a plain .container, so they never get the
   .dashboard-surface mobile grid — without this they render tall with a big
   icon and generous padding, forcing needless scrolling on phones.
   Opt-in via .kpi-compact on the card row; .dashboard-surface keeps its own
   (more specific) tuning. */
@media (max-width: 767.98px) {
    .kpi-compact .stat-card-hc .card-body { padding: 0.6rem 0.5rem !important; }
    .kpi-compact .stat-card-hc .stat-icon {
        width: 2rem; height: 2rem;
        font-size: 0.85rem;
        margin-bottom: 0.3rem !important;
    }
    .kpi-compact .stat-card-hc .stat-label { margin-bottom: 0.1rem !important; font-size: 0.66rem; }
    .kpi-compact .stat-card-hc .stat-value { font-size: 1.15rem; }
    .kpi-compact .stat-card-hc .stat-sub   { font-size: 0.66rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATUS ICON BACKGROUNDS — circular icon backdrops inside stat cards
   ═══════════════════════════════════════════════════════════════════════════ */

.icon-bg-healthy     { background-color: #edf7f2 !important; }
.icon-bg-blue        { background-color: #eff5fb !important; }
.icon-bg-warning     { background-color: #fef5eb !important; }
.icon-bg-danger      { background-color: #fdf0f0 !important; }
.icon-bg-info        { background-color: #eff5fb !important; }
.icon-bg-feed        { background-color: #fdf8ed !important; }
.icon-bg-teal        { background-color: #ecf8f6 !important; }
.icon-bg-purple      { background-color: #f4f1f9 !important; }

/* Dark-mode tinted backgrounds — replace light pastels with rgba overlays
   derived from the semantic stat color so circular icon badges stay
   visible on dark surfaces without blowing out contrast. */
html[data-theme="dark"] .icon-bg-healthy { background-color: rgba(var(--bs-success-rgb), 0.18) !important; }
html[data-theme="dark"] .icon-bg-blue    { background-color: rgba(var(--bs-info-rgb),    0.18) !important; }
html[data-theme="dark"] .icon-bg-warning { background-color: rgba(var(--bs-warning-rgb), 0.18) !important; }
html[data-theme="dark"] .icon-bg-danger  { background-color: rgba(var(--bs-danger-rgb),  0.18) !important; }
html[data-theme="dark"] .icon-bg-info    { background-color: rgba(var(--bs-info-rgb),    0.18) !important; }
html[data-theme="dark"] .icon-bg-feed    { background-color: rgba(var(--stat-color-gold-rgb),   0.18) !important; }
html[data-theme="dark"] .icon-bg-teal    { background-color: rgba(var(--stat-color-teal-rgb),   0.18) !important; }
html[data-theme="dark"] .icon-bg-purple  { background-color: rgba(var(--stat-color-purple-rgb), 0.22) !important; }

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .icon-bg-healthy { background-color: rgba(var(--bs-success-rgb), 0.18) !important; }
    html[data-theme="auto"] .icon-bg-blue    { background-color: rgba(var(--bs-info-rgb),    0.18) !important; }
    html[data-theme="auto"] .icon-bg-warning { background-color: rgba(var(--bs-warning-rgb), 0.18) !important; }
    html[data-theme="auto"] .icon-bg-danger  { background-color: rgba(var(--bs-danger-rgb),  0.18) !important; }
    html[data-theme="auto"] .icon-bg-info    { background-color: rgba(var(--bs-info-rgb),    0.18) !important; }
    html[data-theme="auto"] .icon-bg-feed    { background-color: rgba(var(--stat-color-gold-rgb),   0.18) !important; }
    html[data-theme="auto"] .icon-bg-teal    { background-color: rgba(var(--stat-color-teal-rgb),   0.18) !important; }
    html[data-theme="auto"] .icon-bg-purple  { background-color: rgba(var(--stat-color-purple-rgb), 0.22) !important; }
}

/* Bootstrap's .bg-body-tertiary (card footers) resolves via --bs-tertiary-bg-RGB,
   which the base.css token swap doesn't remap — so it stays baked light-gray in
   dark mode. Remap it to --surface-muted, matching the light-mode intent
   (--bs-tertiary-bg = --surface-muted). Lives here, not in bootstrap4-compat.css,
   because that file is @import'd under a bare URL the dev browser caches stale;
   farm-theme.css is a direct versioned <link>, so a ?v bump always re-fetches. */
html[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--surface-muted) !important;
    color:            var(--text-primary) !important;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .bg-body-tertiary {
        background-color: var(--surface-muted) !important;
        color:            var(--text-primary) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATUS ICON & TEXT COLORS — icon foregrounds and accent text
   ═══════════════════════════════════════════════════════════════════════════ */

.text-status-healthy { color: var(--stat-color-green) !important; }
.text-status-blue    { color: var(--stat-color-blue) !important; }
.text-status-warning { color: var(--stat-color-orange) !important; }
.text-status-danger  { color: var(--stat-color-red) !important; }
.text-status-info    { color: var(--stat-color-blue) !important; }
.text-status-feed    { color: var(--stat-color-gold) !important; }
.text-status-teal    { color: var(--stat-color-teal) !important; }
.text-status-purple  { color: var(--stat-color-purple) !important; }

/* Dark / auto-theme pair for the only orphan in this block */
html[data-theme="dark"] .text-status-teal { color: var(--stat-color-teal) !important; }
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .text-status-teal { color: var(--stat-color-teal) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATUS CARD BACKGROUNDS — tinted backgrounds for environment stat cards
   ═══════════════════════════════════════════════════════════════════════════ */

.bg-status-danger  { background-color: var(--state-danger-bg) !important; }
.bg-status-warning { background-color: var(--state-warning-bg) !important; }
.bg-status-healthy { background-color: var(--state-success-bg) !important; }
.bg-status-info    { background-color: var(--state-info-bg) !important; }
.bg-status-feed    { background-color: rgba(var(--stat-color-gold-rgb), 0.12) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   CARD HEADERS — themed headers for dashboard sections
   ═══════════════════════════════════════════════════════════════════════════

   The canonical card-header palette lives in static/css/base.css under
   "Card headers (unified base)" — see the semantic color map there.
   The previous duplicates here (.card-header-feed → stat-color-gold and
   .card-header-supply → stat-color-blue) silently overrode base.css due
   to CSS load order, which is the Phase 4 inconsistency this block
   resolved.  Re-add color rules here only if a *different* color is
   required when farm-theme.css is loaded (currently none).            */


/* ═══════════════════════════════════════════════════════════════════════════
   QUICK-ACTIONS — section micro-labels (labels + spacing are the single
   grouping device; the old .qa-divider hairline was removed as redundant)
   ═══════════════════════════════════════════════════════════════════════════ */

.qa-section-label {
    font-size: 0.72rem; /* 11.5px micro-label floor */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FLOCK STATUS DOT — colored circles in the status breakdown chart
   ═══════════════════════════════════════════════════════════════════════════ */

.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.status-dot-active   { background-color: var(--stat-color-green); }
.status-dot-closed   { background-color: var(--text-soft); }
.status-dot-sold-out { background-color: var(--stat-color-blue); }
.status-dot-other    { background-color: var(--stat-color-orange); }


/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY — semantic font-weight helper
   ═══════════════════════════════════════════════════════════════════════════ */

.fw-600 { font-weight: 600 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD SECTION HEADERS — visible labels between KPI rows
   ═══════════════════════════════════════════════════════════════════════════ */

.dashboard-section-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-section-header i {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

/* Icon-only action buttons in dashboard table ROWS need a minimum hit area
   (WCAG 2.5.8). Scoped to cells — card-header buttons keep btn-sm height. */
.dashboard-table-stack td .btn-sm {
    min-width: 2.25rem;
    min-height: 2.25rem;
}

/* Card-header titles are h3s for the document outline; visually they must
   render exactly like the plain spans they replaced. */
.card-title-h {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    display: inline;
}

/* Performance chart shells */
.dashboard-chart-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-width: 0;
}

.dashboard-chart-panel__header {
    flex: 0 0 auto;
}

.dashboard-chart-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 18rem;
    height: clamp(18rem, 34vw, 24rem);
    overflow: hidden;
}

.dashboard-chart-stage--compact {
    height: clamp(18rem, 38vw, 24rem);
}

.dashboard-chart-stage > canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.dashboard-restock-qty {
    width: 6rem;
}

@media (max-width: 991.98px) {
    .dashboard-chart-stage,
    .dashboard-chart-stage--compact {
        height: 20rem;
    }
}

@media (max-width: 575.98px) {
    .dashboard-chart-stage,
    .dashboard-chart-stage--compact {
        min-height: 16rem;
        height: 16rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING CARD — getting-started checklist for new farms
   ═══════════════════════════════════════════════════════════════════════════ */

.onboarding-card {
    background: linear-gradient(120deg, #edf8f2 0%, #f0f6fc 55%, #f6f2fb 100%);
    border: 1px solid rgba(82, 160, 122, 0.2) !important;
    box-shadow: 0 2px 16px rgba(82, 160, 122, 0.08) !important;
}


/* Subtle dot texture */
.onboarding-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(82, 160, 122, 0.07) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    pointer-events: none;
    border-radius: inherit;
}
.onboarding-card .card-body { position: relative; z-index: 1; }

/* Divider between header and step grid */
.onboarding-card .card-body > p {
    border-bottom: 1px solid rgba(82,160,122,0.12);
    padding-bottom: 0.75rem;
}

/* ── Step cards ─────────────────────────────────────────────────────── */
.onboarding-step {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 0.7rem !important;
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    padding: 1.25rem 0.75rem !important;
    min-height: 7.5rem;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.onboarding-step:hover {
    background: var(--surface-card);
    border-color: var(--brand-green);
    text-decoration: none;
    color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(82, 160, 122, 0.14);
}

/* ── Step icon circle — sized up, white bg with soft shadow ─────────── */
.onboarding-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    font-size: 1.25rem;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: box-shadow 0.18s ease;
}
.onboarding-step:hover .onboarding-step-icon {
    box-shadow: 0 4px 14px rgba(82, 160, 122, 0.18);
}

/* ── Step number — styled as a small pill badge ─────────────────────── */
.onboarding-step small.fw-bold {
    display: inline-block !important;
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    margin-top: 0.15rem;
}

/* ── Step description text ──────────────────────────────────────────── */
.onboarding-step small.text-muted {
    font-size: 0.78rem !important;
    line-height: 1.3;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RECEIVABLES TOTAL BAR — summary line above invoice list
   ═══════════════════════════════════════════════════════════════════════════ */

.receivables-total {
    background: var(--bg-subtle);
}


/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.farm-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    width: calc(100vw - 2rem);
    max-width: 22rem;
}

/* ── Base toast ───────────────────────────────────────────────────── */
.farm-toast {
    background-color: var(--surface-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--stat-color-blue);
    border-radius: 0.75rem;
}
.farm-toast-header {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: calc(0.75rem - 1px);
    border-top-right-radius: calc(0.75rem - 1px);
}
.farm-toast .close {
    color: var(--text-secondary);
    opacity: 0.75;
    text-shadow: none;
}
.farm-toast .close:hover {
    opacity: 1;
}

/* ── Error toast ─────────────────────────────────────────────────── */
.farm-toast--error {
    border-color: rgba(var(--bs-danger-rgb), 0.28);
    border-left-color: var(--stat-color-red);
}
.farm-toast-header--error {
    background: rgba(var(--bs-danger-rgb), 0.08);
    border-bottom-color: rgba(var(--bs-danger-rgb), 0.28);
}

/* ── Success toast ───────────────────────────────────────────────── */
.farm-toast--success {
    border-color: rgba(var(--bs-success-rgb), 0.28);
    border-left-color: var(--brand-green);
}
.farm-toast-header--success {
    background: var(--brand-green-bg);
    border-bottom-color: rgba(var(--bs-success-rgb), 0.28);
}

/* ── Warning toast ───────────────────────────────────────────────── */
.farm-toast--warning {
    border-color: rgba(var(--bs-warning-rgb), 0.28);
    border-left-color: var(--stat-color-orange);
}
.farm-toast-header--warning {
    background: rgba(var(--bs-warning-rgb), 0.08);
    border-bottom-color: rgba(var(--bs-warning-rgb), 0.28);
}

/* ── Info toast ───────────────────────────────────────────────────── */
.farm-toast--info {
    border-color: rgba(var(--bs-info-rgb), 0.28);
    border-left-color: var(--stat-color-blue);
}
.farm-toast-header--info {
    background: rgba(var(--bs-info-rgb), 0.08);
    border-bottom-color: rgba(var(--bs-info-rgb), 0.28);
}

.form-error-summary {
    background: rgba(var(--bs-danger-rgb), 0.08);
    border: 1px solid rgba(var(--bs-danger-rgb), 0.28);
    border-left: 4px solid var(--stat-color-red);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}

.form-error-summary-title {
    color: var(--stat-color-red);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.form-error-summary-list {
    margin: 0.35rem 0 0;
    padding-left: 1rem;
    color: var(--stat-color-red);
}

.form-error-summary-list li + li {
    margin-top: 0.25rem;
}

.empty-state {
    background: var(--surface-sunken);
    border: 1px dashed var(--border-color);
    border-radius: 0.9rem;
    padding: 2.5rem 1.5rem;
    margin: 1rem;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--surface-card);
    box-shadow: 0 0.35rem 1rem rgba(31, 41, 55, 0.08);
}

.empty-state-icon i {
    color: var(--text-secondary);
    font-size: 1.8rem;
}

.empty-state-title {
    color: var(--text-primary);
    font-weight: 700;
}

.empty-state-description {
    color: var(--text-secondary);
    max-width: 32rem;
    margin: 0 auto;
}

/* Stock management shell */
.stock-page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.stock-page-heading {
    min-width: 0;
}

.stock-page-title {
    color: var(--text-primary);
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
}

.stock-page-description {
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.45;
    margin: 0.25rem 0 0;
    max-width: 48rem;
}

.stock-page-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Strain list page — tighten vertical rhythm */
.strain-list-page .stock-subnav { margin-bottom: 0.55rem; }
.strain-list-page .stock-page-header { margin-bottom: 0.55rem; }
.strain-list-page .farm-empty-state-compact .empty-state {
    margin: 0.35rem;
    padding: 1.25rem 1.25rem;
}
.strain-list-page .farm-empty-state-compact .empty-state-icon {
    margin-bottom: 0.5rem;
}
.strain-list-page .farm-empty-state-compact .empty-state-description {
    margin-bottom: 1rem;
}

.stock-subnav {
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(31, 41, 55, 0.05);
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.95rem;
    padding: 0.5rem;
}

.stock-subnav-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.stock-subnav-link,
.stock-subnav-pill {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.42rem;
    color: var(--text-muted);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 650;
    gap: 0.38rem;
    letter-spacing: 0;
    line-height: 1.2;
    min-height: 2rem;
    padding: 0.42rem 0.62rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.stock-subnav-link i,
.stock-subnav-pill i {
    flex: 0 0 1rem;
    font-size: 0.86rem;
    text-align: center;
}

.stock-subnav-link:hover,
.stock-subnav-pill:hover,
.stock-subnav-link:focus-visible,
.stock-subnav-pill:focus-visible {
    background: var(--surface-sunken, #fafbfc);
    border-color: var(--border-color, #e5e7eb);
    color: var(--text-primary);
}

.stock-subnav-link.active,
.stock-subnav-pill.active {
    background: var(--brand-green-light, #edf7f2);
    border-color: rgba(var(--bs-success-rgb), 0.25);
    color: var(--text-brand, #3d8a65);
}

.stock-subnav-secondary {
    border-top: 1px solid var(--divider-soft, #eef2f4);
    padding-top: 0.55rem;
}

.stock-subnav-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    margin-right: 0.15rem;
    text-transform: uppercase;
}

.stock-subnav-count {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-brand);
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.2rem 0.42rem;
}

.stock-empty-state .empty-state {
    margin: 0.85rem;
    padding: 2rem 1.25rem;
}

.stock-empty-state .empty-state-icon {
    height: 3.75rem;
    width: 3.75rem;
}

.stock-empty-state .empty-state-icon i {
    font-size: 1.45rem;
}

.farm-subnav {
    margin-bottom: 1.25rem;
}

.farm-page-header {
    margin-bottom: 1rem;
}

.farm-empty-state-compact .empty-state {
    margin: 0.75rem;
    padding: 1.75rem 1.25rem;
}

.farm-empty-state-compact .empty-state-icon {
    height: 3.5rem;
    width: 3.5rem;
}

.production-form-kicker {
    letter-spacing: 0.04em;
}

.farm-overview-stat {
    color: var(--text-primary);
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.2;
    margin-top: 0.25rem;
}

.farm-action-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.warehouse-subnav .stock-subnav-pill[aria-current="page"] {
    cursor: default;
}

.warehouse-empty-state-compact .empty-state {
    margin: 0;
    padding: 1.35rem 1rem;
}

.warehouse-empty-state-compact .empty-state-icon {
    height: 3rem;
    width: 3rem;
}

.warehouse-empty-state-compact .empty-state-icon i {
    font-size: 1.15rem;
}

.warehouse-empty-state-compact .empty-state-title {
    font-size: 1rem;
}

.warehouse-empty-state-compact .empty-state-description {
    margin-bottom: 0 !important;
}

.product-subnav .stock-subnav-pill[aria-current="page"] {
    cursor: default;
}

.product-empty-state-compact .empty-state {
    margin: 0;
    padding: 1.35rem 1rem;
}

.product-empty-state-compact .empty-state-icon {
    height: 3rem;
    width: 3rem;
}

.product-empty-state-compact .empty-state-icon i {
    font-size: 1.15rem;
}

.product-empty-state-compact .empty-state-title {
    font-size: 1rem;
}

.product-empty-state-compact .empty-state-description {
    margin-bottom: 0 !important;
}

.sales-subnav .stock-subnav-pill[aria-current="page"] {
    cursor: default;
}

.sales-empty-state-compact .empty-state {
    margin: 0;
    padding: 1.35rem 1rem;
}

.sales-empty-state-compact .empty-state-icon {
    height: 3rem;
    width: 3rem;
}

.sales-empty-state-compact .empty-state-icon i {
    font-size: 1.15rem;
}

.sales-empty-state-compact .empty-state-title {
    font-size: 1rem;
}

.sales-empty-state-compact .empty-state-description {
    margin-bottom: 0 !important;
}

.product-form-panel {
    background: var(--surface-sunken, #f8fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.65rem;
    padding: 1rem;
}

.product-detail-image {
    height: 5.5rem;
    object-fit: cover;
    width: 5.5rem;
}

.product-detail-placeholder {
    background: var(--surface-sunken, #f8fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-muted);
    height: 5.5rem;
    width: 5.5rem;
}

.product-meta-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.product-meta-label {
    color: var(--text-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.product-meta-value {
    color: var(--text-primary);
    font-weight: 650;
}

.product-stock-action-card .card-body {
    padding: 1rem;
}

@media (max-width: 767.98px) {
    .stock-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .stock-page-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .stock-subnav-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .stock-subnav-link,
    .stock-subnav-pill {
        flex: 0 0 auto;
        justify-content: center;
        white-space: nowrap;
    }
}

/* ── Egg collections card — dedicated empty-state well ───────────────────── */
/*    Used by _recent_egg_collections_card.html for the dashed inner box.     */
.recent-eggs-card {
    border-color: var(--border-color) !important;
}

.recent-eggs-card-header {
    border-bottom-color: var(--divider-soft) !important;
}

.recent-eggs-heading {
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.recent-eggs-heading-icon {
    color: var(--brand-green);
    font-size: 0.95rem;
}

.egg-empty-well {
    background: var(--surface-sunken);
    border: 2px dashed var(--border-color);
    border-radius: 1.15rem;
    padding: 3rem 1.5rem;
}

.egg-empty-copy {
    max-width: 32rem;
    line-height: 1.65;
}

/* Circular icon badge inside the well */
.egg-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--surface-card);
    box-shadow: 0 0.5rem 1.25rem rgba(31, 41, 55, 0.10);
    font-size: 1.35rem;
}

.recent-eggs-cta {
    background-color: var(--surface-card);
    border: 1px solid var(--brand-green-dark);
    color: var(--brand-green-dark);
}

.recent-eggs-cta:hover,
.recent-eggs-cta:focus-visible {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
    color: var(--surface-card);
}

@media (max-width: 575.98px) {
    .farm-toast-container {
        top: 0.75rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .empty-state     { padding: 2rem 1rem; }
    .egg-empty-well  { padding: 2rem 1rem; }
    .egg-empty-icon  { width: 4rem; height: 4rem; font-size: 1.2rem; }
}

/* Sales workflow surfaces */
.sales-sheet-card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--surface-card);
}

.sales-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-card);
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--border-color);
    padding: 0.9rem 1.25rem;
}

.sales-section-header i {
    color: var(--brand-green);
}

.sales-section-header--coral,
.sales-section-header--slate,
.sales-section-header--green,
.sales-section-header--blue {
    background: var(--surface-card);
}

.sales-section-header--coral i { color: var(--stat-color-orange); }
.sales-section-header--slate i { color: var(--text-secondary); }
.sales-section-header--green i { color: var(--brand-green); }
.sales-section-header--blue  i { color: var(--stat-color-blue); }

.sales-report-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem;
}

.sales-report-title {
    font-size: clamp(1.85rem, 2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.sales-select {
    background-color: var(--surface-card);
    background-image: none;
}

.sales-readonly-field {
    background: var(--bg-subtle);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.sales-form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.sales-meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.sales-meta-value {
    color: var(--text-primary);
    font-weight: 600;
}

.sales-meta-value--muted {
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.55;
}

.sales-meta-stack {
    display: grid;
    gap: 0.9rem;
}

.sales-order-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.sales-order-actions .btn,
.sales-filter-grid__actions .btn,
.sales-form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.sales-order-actions--row {
    gap: 0.5rem;
}

.sales-entry-grid,
.sales-filter-grid {
    display: grid;
    gap: 1rem;
}

.sales-entry-grid {
    grid-template-columns: minmax(15rem, 2.2fr) repeat(5, minmax(7rem, 1fr)) minmax(11rem, 1.2fr);
    align-items: end;
}

.sales-entry-grid__action,
.sales-filter-grid__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.sales-filter-grid {
    grid-template-columns: repeat(5, minmax(10rem, 1fr)) auto;
    align-items: end;
}

.sales-filter-grid__actions {
    justify-content: flex-start;
}

.sales-order-table td,
.sales-order-table th {
    vertical-align: middle;
}

.sales-order-table tfoot td {
    background: var(--bg-subtle);
}

.sales-input-cell {
    min-width: 8rem;
}

.sales-total-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--divider-soft);
    color: var(--text-primary);
}

.sales-total-row strong {
    color: var(--text-primary);
}

.sales-total-row--accent strong,
.sales-total-row--balance strong {
    font-size: 1.05rem;
}

.sales-total-row--balance {
    border-bottom: 0;
}

.sales-note-block + .sales-note-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--divider-soft);
}

/* Stage Actions panel — give every stacked section (Order No. / Status /
   action buttons / audit stamps) the same separator instead of relying on
   .sales-note-block adjacency, which the action-button group used to break.
   This keeps the vertical rhythm even no matter which sections render. */
.sales-stage-body > * + * {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--divider-soft);
}

/* Stacked stage-action buttons: grouped tighter than the section rhythm
   above, but with enough room to keep a primary + destructive pair from
   feeling cramped (was an 8px Bootstrap gap-2). */
.sales-stage-actions {
    display: grid;
    gap: 0.75rem;
}

html[data-theme="dark"] .sales-queue-count-active {
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .sales-queue-count-active {
        background-color: rgba(255, 255, 255, 0.16) !important;
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.24) !important;
    }
}

@media (max-width: 1199.98px) {
    .sales-entry-grid,
    .sales-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-filter-grid__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .sales-report-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-entry-grid,
    .sales-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-order-actions {
        justify-content: flex-start;
    }
}

/* ── Order Desk: status tabs + toolbar ─────────────────────────────────── */
.order-desk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.25rem;
}

.order-desk-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem 0.5rem 0 0;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.order-desk-tab:hover {
    color: var(--text-primary);
    background: var(--bg-subtle);
}

.order-desk-tab.active {
    color: var(--brand-green);
    border-bottom-color: var(--brand-green);
}

.order-desk-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.order-desk-tab.active .order-desk-tab-count {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}

.order-desk-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.order-desk-toolbar-search,
.composer-search,
.order-desk-toolbar .form-select,
.order-desk-toolbar .form-control {
    min-height: 2.5rem;
}

.order-desk-toolbar-search,
.composer-search {
    position: relative;
    flex: 1 1 16rem;
}

.order-desk-toolbar-search > i,
.composer-search > i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.order-desk-toolbar-search .form-control,
.composer-search .form-control {
    padding-left: 2.3rem;
}

.order-desk-toolbar .form-select,
.order-desk-toolbar input[type="date"] {
    flex: 0 1 12rem;
}

/* ── Order detail: Order / Fulfillment tabs ────────────────────────────── */
.order-detail-tabs {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.order-detail-tab {
    padding: 0.6rem 1.1rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.order-detail-tab:hover { color: var(--text-primary); }

.order-detail-tab.active {
    color: var(--brand-green);
    border-bottom-color: var(--brand-green);
}

/* ── Order composer (POS-like workspace) ───────────────────────────────── */
.composer-catalogue-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.composer-category { flex: 0 1 14rem; }

.composer-catalogue-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.composer-catalogue-table th,
.composer-catalogue-table td { vertical-align: middle; }

.composer-col-qty,
.composer-col-price { width: 6.5rem; }

.composer-col-add { width: 5rem; text-align: end; }

.composer-qty-input,
.composer-price-input { max-width: 6rem; }

.composer-cat-row--disabled { opacity: 0.55; }

/* Sticky order summary on desktop */
.composer-summary { position: static; }

@media (min-width: 992px) {
    .composer-summary {
        position: sticky;
        top: 1rem;
    }
}

.composer-divider {
    margin: 1rem 0;
    border-color: var(--divider-soft);
    opacity: 1;
}

.composer-lines-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.composer-lines { display: grid; gap: 0.5rem; }

/* Flex + wrap rather than a fixed grid: this panel is a narrow column on a wide
   viewport, so viewport media queries cannot tell when it is cramped. Wrapping
   lets the fields drop below the product name instead of crushing it. */
.composer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: var(--surface-card);
    animation: composer-line-in 0.18s ease;
}

@keyframes composer-line-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Grow to fill, but wrap to its own row below ~9rem instead of shrinking to a
   sliver (which made long names break one character per line). */
.composer-line-main { flex: 1 1 9rem; min-width: 0; }
.composer-line-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Truncate the category too: without this it was the element that wrapped
   mid-word when the column was squeezed. */
.composer-line-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-line-fields {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}
/* Wide enough for five-digit quantities and thousands-separated prices. */
.composer-line-qty { width: 5.5rem; }
.composer-line-price { width: 6.5rem; }
.composer-line-x { color: var(--text-secondary); font-size: 0.8rem; }

.composer-line-total {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 4.5rem;
    text-align: end;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.composer-line-remove {
    border: 0;
    background: transparent;
    color: var(--stat-color-orange, #b4531f);
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 0.15s ease;
}
.composer-line-remove:hover { background: var(--bg-subtle); }

.composer-empty-lines {
    padding: 0.85rem;
    border: 1px dashed var(--border-color);
    border-radius: 0.55rem;
    text-align: center;
    margin-bottom: 0;
}
.composer-empty-lines--flash {
    border-color: var(--stat-color-orange, #b4531f);
    color: var(--stat-color-orange, #b4531f);
}

.composer-collapse-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    padding: 0.6rem 0.15rem;
    border: 0;
    border-top: 1px solid var(--divider-soft);
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
}
.composer-collapse-caret { transition: transform 0.2s ease; }
.composer-collapse-toggle[aria-expanded="true"] .composer-collapse-caret { transform: rotate(180deg); }

.composer-commercial-body { padding-top: 0.5rem; }

.composer-actions {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.25rem;
}
.composer-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .order-desk-tab,
    .order-detail-tab,
    .composer-collapse-caret,
    .composer-line-remove { transition: none; }
    .composer-line { animation: none; }
}

/* Shared Sales/Product module shell */
.module-page {
    padding-top: 0.45rem;
    padding-bottom: 2rem;
}

.module-page > .row.my-4 {
    margin-top: 0.85rem !important;
    margin-bottom: 1.5rem !important;
}

.module-page .breadcrumb-bar {
    padding: 0.25rem 0 0.5rem;
}

.module-page .stock-page-header {
    align-items: center;
    margin-bottom: 0.9rem;
}

.module-page .stock-page-title {
    font-size: 1.35rem;
    letter-spacing: 0;
}

.module-page .stock-page-description {
    font-size: 0.9rem;
    max-width: 54rem;
}

.module-page .stock-page-actions .btn,
.module-page .btn {
    align-items: center;
    border-radius: 0.45rem;
    display: inline-flex;
    font-weight: 600;
    gap: 0.35rem;
    justify-content: center;
    letter-spacing: 0;
}

.module-page .btn-sm {
    font-size: 0.78rem;
    min-height: 1.95rem;
    padding: 0.32rem 0.58rem;
}

.module-page .card,
.module-card,
.module-page .sales-sheet-card {
    border-color: var(--border-color);
    border-radius: 0.5rem;
}

.module-page .shadow-sm {
    box-shadow: 0 1px 3px rgba(31, 41, 55, 0.06) !important;
}

.module-page .card-header,
.module-card-header,
.module-page .sales-section-header {
    align-items: center;
    border-bottom-color: var(--divider-soft);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    font-weight: 650;
    gap: 0.55rem;
    letter-spacing: 0;
    min-height: 2.85rem;
    padding: 0.72rem 1rem;
}

.module-page .card-header > span,
.module-page .sales-section-header > span {
    align-items: center;
    display: inline-flex;
    gap: 0.2rem;
    min-width: 0;
}

.module-page .card-header:not(.card-header-danger):not(.card-header-warning):not(.card-header-supply):not(.card-header-info):not(.card-header-healthy):not(.sales-section-header) i {
    color: var(--brand-green);
}

.module-card-action {
    color: var(--text-primary);
}

.module-dashboard .stat-card-hc {
    display: flex;
    flex-direction: column;
    min-height: 8.25rem;
    overflow: hidden;
}

.module-dashboard .stat-card-hc .card-body {
    min-height: 5.75rem;
}

.module-dashboard .stat-card-hc .card-footer {
    background: var(--surface-card);
    border-top: 1px solid var(--divider-soft);
    color: var(--text-brand);
    font-weight: 650;
    line-height: 1.2;
    margin-top: auto;
    padding: 0.52rem 0.75rem;
}

.module-dashboard .stat-card-hc .card-footer:hover,
.module-dashboard .stat-card-hc .card-footer:focus-visible {
    background: var(--brand-green-bg);
    color: var(--text-brand);
}

.module-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.module-status-pill {
    align-items: center;
    background: var(--surface-sunken);
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    color: var(--text-primary);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 650;
    justify-content: center;
    line-height: 1.2;
    min-height: 2rem;
    padding: 0.42rem 0.65rem;
    text-decoration: none;
}

a.module-status-pill:hover,
a.module-status-pill:focus-visible {
    background: var(--surface-card);
    border-color: rgba(var(--bs-success-rgb), 0.32);
    color: var(--text-brand);
    text-decoration: none;
}

.module-status-pill-static {
    color: var(--text-secondary);
}

.module-page .table {
    color: var(--text-primary);
    font-size: 0.86rem;
}

.module-page .table thead th {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Align every body cell to its first text line. The browser default is
   vertical-align: middle, which straddles cells that stack a name over a
   subtitle (e.g. product name + kind badge): the two lines sit above/below the
   row centre while single-line sibling cells sit on the centre, so nothing
   lines up. Top alignment keeps the primary line of every cell on one row and
   lets the subtitle hang beneath it. Single-line tables are unaffected
   (top == middle when a cell holds one line). Covers both app table surfaces
   (module pages and dashboards). A table that genuinely needs centred cells
   opts back in with Bootstrap's `.align-middle`. */
.module-page .table td,
.module-page .table th,
.dashboard-surface .table td,
.dashboard-surface .table th {
    vertical-align: top;
}

/* Header labels read better centred against their single-line height. */
.module-page .table thead th,
.dashboard-surface .table thead th {
    vertical-align: middle;
}

.module-page .table-responsive {
    border-radius: 0;
}

.module-dashboard .table-responsive {
    overflow-x: visible;
}

/* Home dashboard tables: same treatment as module dashboards. overflow-x:auto
   computes overflow-y to auto too, so each table became a wheel-trapping
   scroll container at desktop widths. Rows are capped server-side (5-10),
   so the wrapper only needs to scroll on small screens. */
.dashboard-surface .table-responsive {
    overflow-x: visible;
}

.module-dashboard .product-recent-table {
    min-width: 0;
}

.module-page .badge {
    border-radius: 0.38rem;
    font-weight: 650;
    letter-spacing: 0;
}

.module-page .stock-empty-state .empty-state {
    border-radius: 0.5rem;
}

.module-page .sales-empty-state-compact .empty-state,
.module-page .product-empty-state-compact .empty-state {
    padding: 1.45rem 1rem;
}

.module-page .sales-empty-state-compact .empty-state-title,
.module-page .product-empty-state-compact .empty-state-title {
    font-size: 1rem;
}

.module-page .sales-empty-state-compact .empty-state-description,
.module-page .product-empty-state-compact .empty-state-description {
    margin-bottom: 0.9rem !important;
}

.module-page .sales-empty-state-compact .empty-state-description:last-child,
.module-page .product-empty-state-compact .empty-state-description:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
    .module-page .stock-page-header {
        align-items: stretch;
    }

    .module-page .stock-page-actions {
        justify-content: flex-start;
    }

    .module-dashboard .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .module-dashboard .table {
        min-width: 34rem;
    }

    .dashboard-surface .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-surface .dashboard-table-stack .table {
        min-width: 34rem;
    }
}

@media (max-width: 575.98px) {
    .module-page > .row.my-4 {
        margin-top: 0.65rem !important;
    }

    .module-page .stock-page-title {
        font-size: 1.22rem;
    }

    .module-page .stock-page-actions .btn {
        width: 100%;
    }

    .module-status-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .module-status-pill {
        width: 100%;
    }
}

@media print {
    .sidebar,
    .sidebar-overlay,
    .mobile-topbar,
    .print-hide,
    .farm-toast-container,
    .breadcrumb-bar {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .sales-sheet-card,
    .stat-card-hc {
        box-shadow: none !important;
        border-color: #d3d9e0 !important;
        break-inside: avoid;
    }

    .sales-section-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 7 — Onboarding card dark override
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .onboarding-card {
    background: linear-gradient(120deg, #172720 0%, #16202b 55%, #1f1a2c 100%);
    border-color: rgba(107, 191, 148, 0.25) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .onboarding-card::before {
    background-image: radial-gradient(rgba(107, 191, 148, 0.08) 1.5px, transparent 1.5px);
}
html[data-theme="dark"] .onboarding-card .card-body > p {
    border-bottom-color: rgba(107, 191, 148, 0.18);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .onboarding-card {
        background: linear-gradient(120deg, #172720 0%, #16202b 55%, #1f1a2c 100%);
        border-color: rgba(107, 191, 148, 0.25) !important;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
    }
    html[data-theme="auto"] .onboarding-card::before {
        background-image: radial-gradient(rgba(107, 191, 148, 0.08) 1.5px, transparent 1.5px);
    }
    html[data-theme="auto"] .onboarding-card .card-body > p {
        border-bottom-color: rgba(107, 191, 148, 0.18);
    }
}

/* Dashboard refresh: clean operational surface */
.icon-bg-green,
.icon-bg-secondary {
    background-color: var(--surface-sunken) !important;
}

.text-status-green,
.text-status-secondary {
    color: var(--text-secondary) !important;
}

.stat-card-hc.border-top-green,
.stat-card-hc.border-top-secondary {
    border-top: none !important;
}

.dashboard-surface {
    padding-top: 0.75rem;
    padding-bottom: 2rem;
}

/* Dashboard lower section. Big data tables render full-width, stacked. Quick
   Actions renders as a full-width action bar (--wide), so it is no longer a
   tall column that unbalances the layout. The remaining compact summary cards
   fill a paired flex grid: each row grows to fill the full width (no ragged
   blank on the right) and cards align to the top at their natural height, so a
   sparse card (e.g. an empty state) never stretches into a tall blank void. */
.dashboard-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.dashboard-summary-grid > .card {
    flex: 1 1 20rem;
    margin-bottom: 0 !important;
}

/* Left column of the approvals row: the Egg + Stock status cards stacked
   vertically. It sits beside Today's Attendance as an equal-basis flex column
   and, like a plain card, collapses to full width on a narrow (wrapped) row. */
.dashboard-summary-grid > .summary-stack {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-stack > .card {
    margin-bottom: 0 !important;
}

/* Growers hero: a full-width panel — 4 lifecycle count tiles + the
   pending-approval queue. Full width keeps it prominent and avoids pairing it
   against a taller/shorter neighbour (which is what left the earlier void). */
.grower-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.grower-stat {
    background: var(--surface-sunken);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.55rem 0.35rem;
    text-align: center;
}

.grower-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.grower-stat-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.grower-queue {
    margin-top: 1rem;
}

.grower-queue-head {
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.grower-queue-row {
    padding: 0.5rem 0;
    border-top: 1px solid var(--divider-soft);
}

.grower-queue-row:first-child {
    border-top: none;
}

.welcome-banner {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm) !important;
}

.welcome-banner::before,
.welcome-banner::after {
    display: none;
}

.welcome-banner-body {
    min-height: 6.25rem;
    padding: 1.1rem 12rem 1.1rem 1.25rem !important;
}

.welcome-banner-copy {
    padding-right: 1.5rem;
}

.welcome-banner h5 {
    font-size: 1.05rem;
}

.welcome-banner-pill,
.welcome-banner-date {
    background: var(--surface-sunken) !important;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: none;
    color: var(--text-primary) !important;
    font-size: 0.76rem;
    padding: 0.35rem 0.65rem;
}

.welcome-banner-art {
    right: 0.75rem;
    bottom: -1rem;
    width: 11rem;
    opacity: 0.62;
}

.welcome-banner-art img {
    filter: none;
}

/* Dim the hero illustration in dark mode — its light ground strip otherwise
   glows against the dark banner. */
html[data-theme="dark"] .welcome-banner-art img {
    filter: brightness(0.82) saturate(0.9);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .welcome-banner-art img {
        filter: brightness(0.82) saturate(0.9);
    }
}

.dashboard-surface .card {
    border-color: var(--border-color);
    border-radius: 0.65rem;
}

.dashboard-surface .shadow-sm {
    box-shadow: 0 1px 3px rgba(31, 41, 55, 0.06) !important;
}

.dashboard-surface .card-header {
    align-items: center;
    border-bottom-color: var(--divider-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.78rem 1rem;
}

.dashboard-surface .card-header > span {
    align-items: center;
    display: inline-flex;
    gap: 0.15rem;
    min-width: 0;
}

.dashboard-surface .card-header .btn-sm {
    border-radius: 0.45rem;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.32rem 0.55rem;
}

.dashboard-surface .dashboard-section-header {
    align-items: center;
    border-bottom: 1px solid var(--divider-soft);
    color: var(--text-primary);
    display: flex;
    font-size: 0.75rem;
    gap: 0.45rem;
    letter-spacing: 0.06em;
    margin: 1.2rem 0 0.65rem;
    padding-bottom: 0.45rem;
}

.dashboard-surface .dashboard-section-header i {
    color: var(--text-secondary);
}

.dashboard-surface > .dashboard-section-header:first-of-type {
    margin-top: 0.2rem;
}

.dashboard-surface .stat-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-surface .stat-card:hover {
    border-color: rgba(var(--bs-success-rgb), 0.28) !important;
    box-shadow: 0 6px 16px rgba(31, 41, 55, 0.08) !important;
    transform: none;
}

.dashboard-surface .stat-card-hc .card-body {
    align-items: center;
    align-content: center;
    column-gap: 0.75rem;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding: 0.95rem 1rem !important;
    row-gap: 0.05rem;
    text-align: left;
}

.dashboard-surface .stat-card-hc .stat-icon {
    border: 1px solid var(--border-color);
    box-shadow: none;
    font-size: 1rem;
    grid-column: 1;
    grid-row: 1 / 4;
    height: 2.5rem;
    margin: 0 !important;
    width: 2.5rem;
}

.dashboard-surface .stat-card-hc .stat-label,
.dashboard-surface .stat-card-hc .stat-value,
.dashboard-surface .stat-card-hc .stat-sub {
    grid-column: 2;
}

.dashboard-surface .stat-card-hc .stat-label {
    font-size: 0.72rem; /* 11.5px — 0.66rem (10.6px) sat below the legibility floor */
    letter-spacing: 0.055em;
    margin-bottom: 0 !important;
}

.dashboard-surface .stat-card-hc .stat-value {
    color: var(--text-primary) !important;
    font-size: 1.35rem;
}

.dashboard-surface .stat-card-hc .stat-sub {
    line-height: 1.3;
}

.dashboard-low-stock-card .card-body {
    padding: 1rem !important;
}

.dashboard-low-stock-card .small.text-uppercase {
    font-size: 0.72rem;
    letter-spacing: 0.055em;
}

.dashboard-surface .table {
    font-size: 0.87rem;
}

.dashboard-surface .table thead th {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Body-cell vertical-align for .dashboard-surface tables is set once, together
   with .module-page, near the top of this file (first-line/top alignment). The
   old middle rule that used to live here overrode it and reintroduced the
   name-over-subtitle straddle, so it was removed. */

.dashboard-surface .list-group-item {
    font-size: 0.86rem;
}

.dashboard-performance-trends .bg-light,
.dashboard-chart-panel {
    background: var(--surface-sunken) !important;
    border-color: var(--border-color) !important;
    border-radius: 0.6rem !important;
}

.dashboard-quick-actions-body {
    padding: 1rem; /* 8pt scale */
}

.dashboard-quick-actions .qa-section-label {
    color: var(--text-secondary);
    font-size: 0.72rem; /* 11.5px micro-label floor */
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.dashboard-quick-actions .qa-action {
    align-items: center;
    background-color: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    color: var(--text-primary);
    display: flex !important;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.75rem;
    justify-content: flex-start;
    margin-bottom: 0.5rem !important;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    text-align: left;
    transition: transform 0.15s ease, border-color 0.15s ease,
                background-color 0.15s ease, box-shadow 0.15s ease;
    white-space: normal;
}

.dashboard-quick-actions .qa-action:hover,
.dashboard-quick-actions .qa-action:focus-visible {
    background-color: var(--surface-muted);
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Focus must be distinguishable from hover (WCAG 2.4.7) — elevation alone
   is not a focus indicator. Same ring idiom as .farm-dropdown-trigger. */
.dashboard-quick-actions .qa-action:focus-visible {
    outline: 2px solid rgba(82, 160, 122, 0.4);
    outline-offset: 2px;
}

.dashboard-quick-actions .qa-action:active {
    transform: translateY(0);
    box-shadow: none !important;
}

/* Card anatomy: title + trailing chevron affordance */
.qa-action-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
    min-width: 0;
}

.dashboard-quick-actions .qa-action i.qa-action-chevron {
    margin-left: auto !important;
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.dashboard-quick-actions .qa-action:hover .qa-action-chevron {
    transform: translateX(2px);
}

/* Icon chip — a fixed, tinted square that holds the glyph. The accent tint is
   keyed off the existing Bootstrap outline variant, so the template markup is
   left untouched. Chevron is excluded — it is an affordance, not a chip. */
.dashboard-quick-actions .qa-action i:not(.qa-action-chevron) {
    align-items: center;
    background-color: var(--surface-muted);
    border-radius: var(--radius-sm);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.875rem;
    height: 2rem;
    justify-content: center;
    margin-right: 0 !important;
    width: 2rem;
}

/* Feed — amber */
.dashboard-quick-actions .qa-action.btn-outline-warning i:not(.qa-action-chevron) {
    background-color: rgba(var(--bs-warning-rgb), 0.14);
    color: rgb(var(--bs-warning-rgb));
}
.dashboard-quick-actions .qa-action.btn-outline-warning:hover,
.dashboard-quick-actions .qa-action.btn-outline-warning:focus-visible {
    border-color: rgba(var(--bs-warning-rgb), 0.5);
}

/* Mortality — red */
.dashboard-quick-actions .qa-action.btn-outline-danger i:not(.qa-action-chevron) {
    background-color: rgba(var(--bs-danger-rgb), 0.14);
    color: rgb(var(--bs-danger-rgb));
}
.dashboard-quick-actions .qa-action.btn-outline-danger:hover,
.dashboard-quick-actions .qa-action.btn-outline-danger:focus-visible {
    border-color: rgba(var(--bs-danger-rgb), 0.5);
}

/* Egg / positive — green */
.dashboard-quick-actions .qa-action.btn-outline-success i:not(.qa-action-chevron) {
    background-color: rgba(var(--bs-success-rgb), 0.14);
    color: rgb(var(--bs-success-rgb));
}
.dashboard-quick-actions .qa-action.btn-outline-success:hover,
.dashboard-quick-actions .qa-action.btn-outline-success:focus-visible {
    border-color: rgba(var(--bs-success-rgb), 0.5);
}

/* Manage — neutral */
.dashboard-quick-actions .qa-action.btn-outline-dark i:not(.qa-action-chevron),
.dashboard-quick-actions .qa-action.btn-outline-secondary i:not(.qa-action-chevron) {
    background-color: var(--surface-muted);
    /* !important: the .btn-outline-dark cascade otherwise pins the icon to the
       tile's text colour, so the two Manage glyphs would render different greys. */
    color: var(--text-secondary) !important;
}
.dashboard-quick-actions .qa-action.btn-outline-dark:hover,
.dashboard-quick-actions .qa-action.btn-outline-dark:focus-visible,
.dashboard-quick-actions .qa-action.btn-outline-secondary:hover,
.dashboard-quick-actions .qa-action.btn-outline-secondary:focus-visible {
    border-color: var(--text-muted);
}

/* Primary ("New Sales Order") — primacy through border weight + resting
   elevation + first position, not a saturated fill. All tokens are
   theme-swapped, so no dark-mode special case is needed (the old solid fill
   required a dark-ink override). !important on box-shadow beats the
   box-shadow:none !important on the base .qa-action rule. */
.dashboard-quick-actions .qa-action.btn-success {
    background-color: var(--surface-card);
    border: 2px solid rgba(var(--bs-success-rgb), 0.55);
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary);
}
.dashboard-quick-actions .qa-action.btn-success:hover,
.dashboard-quick-actions .qa-action.btn-success:focus-visible {
    background-color: var(--surface-muted);
    border-color: rgba(var(--bs-success-rgb), 0.75);
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary);
}
.dashboard-quick-actions .qa-action.btn-success:active {
    box-shadow: var(--shadow-sm) !important;
}
.dashboard-quick-actions .qa-action.btn-success i:not(.qa-action-chevron) {
    background-color: rgba(var(--bs-success-rgb), 0.14);
    color: var(--action-green);
}

/* Full-width action bar (--wide): the card spans the whole content width and
   its buttons flow into rows that grow to fill the width, so a section's
   buttons share the row evenly with no dead trailing columns. Section labels
   sit on their own full-width rows; labels + spacing are the single
   separation device (hairline dividers removed as redundant). */
.dashboard-quick-actions--wide .dashboard-quick-actions-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.dashboard-quick-actions--wide .qa-section-label {
    flex: 0 0 100%;
    margin-bottom: 0;
}

/* 16px between sections (8px row gap + 8px) vs 8px within a section */
.dashboard-quick-actions--wide .qa-section-label:not(:first-child) {
    margin-top: 0.5rem;
}

.dashboard-quick-actions--wide .qa-action {
    flex: 1 1 14rem;
    width: auto !important;
    margin-bottom: 0 !important;
}

.onboarding-card {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
}

.onboarding-card::before {
    display: none;
}

.onboarding-card .card-body {
    padding: 1rem !important;
}

.onboarding-card-header {
    border-bottom: 1px solid var(--divider-soft);
    margin-bottom: 0.9rem;
    padding-bottom: 0.85rem;
}

.onboarding-card .card-body > p {
    border-bottom: 0;
    padding-bottom: 0;
}

.onboarding-steps {
    margin: 0;
}

.onboarding-step {
    align-items: center;
    background: var(--surface-sunken);
    border: 1px solid var(--border-color);
    border-radius: 0.6rem !important;
    box-shadow: none;
    color: var(--text-primary);
    display: flex !important;
    flex-direction: row;
    gap: 0.7rem;
    justify-content: flex-start;
    min-height: 4.35rem;
    padding: 0.72rem !important;
    text-align: left !important;
    text-decoration: none;
}

.onboarding-step:hover,
.onboarding-step:focus-visible {
    background: var(--surface-card);
    border-color: rgba(var(--bs-success-rgb), 0.38);
    box-shadow: none;
    color: var(--text-primary);
    outline: none;
    text-decoration: none;
    transform: none;
}

.onboarding-step--disabled {
    opacity: 0.68;
}

.onboarding-step-icon {
    border: 1px solid var(--border-color);
    box-shadow: none;
    flex: 0 0 2.35rem;
    font-size: 0.95rem;
    height: 2.35rem;
    margin: 0;
    width: 2.35rem;
}

.onboarding-step:hover .onboarding-step-icon {
    box-shadow: none;
}

.onboarding-step-copy {
    min-width: 0;
}

.onboarding-step small.fw-bold {
    background: transparent;
    border-radius: 0;
    color: var(--text-primary);
    font-size: 0.66rem !important;
    letter-spacing: 0.055em;
    margin: 0 0 0.1rem;
    padding: 0;
    text-transform: uppercase;
}

.onboarding-step small.text-muted {
    display: block;
    font-size: 0.78rem !important;
    line-height: 1.25;
}

html[data-theme="dark"] .welcome-banner,
html[data-theme="dark"] .onboarding-card {
    background: var(--surface-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

html[data-theme="dark"] .welcome-banner-date,
html[data-theme="dark"] .welcome-banner-pill {
    background: var(--surface-sunken) !important;
    border-color: var(--border-color);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .welcome-banner,
    html[data-theme="auto"] .onboarding-card {
        background: var(--surface-card) !important;
        border-color: var(--border-color) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    html[data-theme="auto"] .welcome-banner-date,
    html[data-theme="auto"] .welcome-banner-pill {
        background: var(--surface-sunken) !important;
        border-color: var(--border-color);
    }
}

@media (max-width: 767.98px) {
    .welcome-banner-body {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        padding: 1rem !important;
    }

    .welcome-banner-copy {
        padding-right: 0;
    }

    .welcome-banner-meta {
        justify-content: flex-start;
        margin-left: 0;
    }

    .welcome-banner-art {
        display: none;
    }

    .dashboard-surface .card-header {
        align-items: flex-start;
    }

    .dashboard-surface .card-header > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .dashboard-surface .card-header .btn-sm {
        margin-right: 0 !important;
    }
}

/* Six-up Daily Performance cards (col-xl-2) are narrow at every width:
   label gets the full card width, icon seats beside the value */
.dashboard-surface .col-xl-2 .stat-card-hc .stat-label {
    grid-column: 1 / -1;
}

.dashboard-surface .col-xl-2 .stat-card-hc .stat-icon {
    grid-row: 2 / 4;
}

@media (max-width: 1199.98px) {
    /* col-6 / col-md-3 stat cards get narrow (fixed sidebar squeeze included):
       same treatment so long labels like OUTSTANDING never split mid-word */
    .dashboard-surface .stat-card-hc .stat-label {
        grid-column: 1 / -1;
    }

    .dashboard-surface .stat-card-hc .stat-icon {
        grid-row: 2 / 4;
    }
}

@media (max-width: 575.98px) {
    .dashboard-surface {
        padding-top: 0.5rem;
        overflow-x: hidden;
    }

    .dashboard-surface .stat-card-hc .card-body {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        column-gap: 0.6rem;
        padding: 0.8rem 0.75rem !important;
    }

    .dashboard-surface .stat-card-hc .stat-icon {
        height: 2.25rem;
        width: 2.25rem;
    }

    .dashboard-surface .stat-card-hc .stat-icon i {
        font-size: 0.95rem;
    }

    .dashboard-surface .stat-card-hc .stat-label {
        font-size: 0.74rem;
        letter-spacing: 0.04em;
    }

    .dashboard-surface .stat-card-hc .stat-value {
        font-size: 1.15rem;
    }

    .dashboard-surface .stat-card-hc .stat-sub {
        font-size: 0.78rem;
    }

    .dashboard-surface .dashboard-section-header {
        font-size: 0.8rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .dashboard-surface .dashboard-section-header i {
        font-size: 0.76rem;
    }

    .dashboard-surface > .dashboard-section-header:first-of-type {
        margin-top: 0.5rem;
    }

    .dashboard-low-stock-card .small.text-uppercase {
        font-size: 0.74rem;
    }

    .dashboard-low-stock-card .card-body .small {
        font-size: 0.84rem;
    }

    .dashboard-surface .card-header {
        font-size: 0.86rem;
        padding: 0.72rem 0.85rem;
    }

    .dashboard-surface .card-header .btn-sm {
        font-size: 0.74rem;
        padding: 0.3rem 0.5rem;
    }

    .dashboard-surface .table {
        font-size: 0.82rem;
    }

    .dashboard-performance-trends .border.rounded.p-3 {
        padding: 0.75rem !important;
    }

    .dashboard-performance-trends .fw-bold.fs-5 {
        font-size: 1.05rem !important;
    }

    .onboarding-card .card-body {
        padding: 0.85rem !important;
    }

    .onboarding-step {
        min-height: 4.15rem;
        padding: 0.68rem !important;
    }
}

.module-page.module-dashboard .card {
    border-radius: 0.5rem;
}

.module-page.module-dashboard .shadow-sm {
    box-shadow: 0 1px 3px rgba(31, 41, 55, 0.06) !important;
}

.module-page.module-dashboard .card-header,
.module-page.module-dashboard .sales-section-header {
    font-size: 0.9rem;
    letter-spacing: 0;
    min-height: 2.85rem;
    padding: 0.72rem 1rem;
}

.module-page.module-dashboard .table thead th {
    font-size: 0.72rem;
    letter-spacing: 0;
}

/* Workforce Management shell */
.module-workforce .workforce-subnav {
    margin-bottom: 1rem;
}

.module-workforce .workforce-page-header {
    margin-bottom: 1rem;
}

.module-workforce .workforce-page-actions {
    align-items: center;
}

.module-workforce .workforce-empty-state .empty-state {
    padding: 1.2rem 1rem;
}

.module-workforce .workforce-empty-state .empty-state-icon {
    height: 2.5rem;
    margin-bottom: 0.7rem !important;
    width: 2.5rem;
}

.module-workforce .workforce-empty-state .empty-state-icon i {
    font-size: 1.25rem;
}

.module-workforce .workforce-empty-state .empty-state-title {
    font-size: 1rem;
}

.module-workforce .workforce-empty-state .empty-state-description {
    font-size: 0.86rem;
    margin-bottom: 0 !important;
}

.workforce-prewrap {
    white-space: pre-wrap;
}

/* Profile page */
.profile-page {
    padding: 1.5rem 1.25rem 2.5rem;
}

.profile-shell {
    margin: 0 auto;
    max-width: 980px;
}

.profile-breadcrumb {
    margin-bottom: 0.65rem;
}

.profile-breadcrumb .breadcrumb {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.profile-breadcrumb .breadcrumb-item a {
    color: var(--text-brand);
    font-weight: 700;
    text-decoration: none;
}

.profile-breadcrumb .breadcrumb-item a:hover,
.profile-breadcrumb .breadcrumb-item a:focus-visible {
    color: var(--brand-green-dark);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.profile-breadcrumb .breadcrumb-item.active,
.profile-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary);
}

.profile-page-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.profile-page-title {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0;
}

.profile-page .btn-edit-action {
    align-items: center;
    border-radius: 0.45rem;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 0.45rem;
    min-height: 2.55rem;
    padding: 0.55rem 1rem;
}

.profile-hero,
.profile-info-panel {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
}

.profile-hero {
    align-items: center;
    display: flex;
    gap: 2rem;
    margin-bottom: 0.9rem;
    min-height: 12rem;
    padding: 1.35rem 1.8rem;
}

.profile-avatar-frame {
    flex: 0 0 auto;
}

.profile-avatar {
    border: 1px solid var(--border-color);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(37, 70, 54, 0.08);
    display: block;
    height: 7.25rem;
    object-fit: cover;
    width: 7.25rem;
}

.profile-avatar-placeholder {
    align-items: center;
    background: var(--brand-green-bg);
    color: var(--text-brand);
    display: flex;
    font-size: 3rem;
    justify-content: center;
}

.profile-identity {
    min-width: 0;
}

.profile-name-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.profile-name {
    color: var(--text-primary);
    font-size: 1.85rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.18;
    margin: 0;
}

.profile-name-row .badge {
    background: var(--brand-green-light) !important;
    border-radius: 0.45rem;
    border: 1px solid rgba(var(--bs-success-rgb), 0.25);
    color: var(--brand-green-dark) !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.65rem;
}

.profile-meta-list {
    display: grid;
    gap: 0.58rem;
}

.profile-meta-item {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    font-size: 0.98rem;
    gap: 0.72rem;
    line-height: 1.35;
    min-width: 0;
}

.profile-meta-item i {
    color: var(--text-secondary);
    flex: 0 0 1.1rem;
    font-size: 1rem;
    text-align: center;
}

.profile-meta-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-meta-item--farm {
    color: var(--text-brand);
    font-size: 1.05rem;
    font-weight: 700;
}

.profile-meta-item--farm i {
    color: var(--text-brand);
}

.profile-section-stack {
    display: grid;
    gap: 0.9rem;
}

.profile-info-panel {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 15rem minmax(0, 1fr);
    padding: 1rem;
}

.profile-section-heading {
    align-items: flex-start;
    border-right: 1px solid var(--divider-soft);
    display: flex;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.35rem 1rem 0.35rem 0;
}

.profile-section-heading h2 {
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
}

.profile-section-icon {
    align-items: center;
    background: var(--brand-green-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-brand);
    display: inline-flex;
    flex: 0 0 2.7rem;
    font-size: 1.15rem;
    height: 2.7rem;
    justify-content: center;
    width: 2.7rem;
}

.profile-detail-list {
    display: grid;
    margin: 0;
}

.profile-detail-row {
    align-items: center;
    border-top: 1px solid var(--divider-soft);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr);
    min-height: 2.65rem;
    padding: 0.55rem 0;
}

.profile-detail-row:first-child {
    border-top: 0;
}

.profile-detail-row dt,
.profile-detail-row dd {
    font-size: 0.92rem;
    line-height: 1.35;
    margin: 0;
    min-width: 0;
}

.profile-detail-row dt {
    color: var(--text-primary);
    font-weight: 700;
}

.profile-detail-row dd {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.profile-detail-row dd:empty::after {
    color: var(--text-secondary);
    content: "Not set";
}

.profile-permission-badge {
    align-items: center;
    background: rgba(201, 138, 58, 0.1);
    border: 1px solid rgba(201, 138, 58, 0.48);
    border-radius: 0.45rem;
    color: #936020;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.35rem;
    line-height: 1.2;
    padding: 0.35rem 0.55rem;
    white-space: nowrap;
}

.profile-permission-badge i {
    font-size: 0.85rem;
}

html[data-theme="dark"] .profile-avatar {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .profile-permission-badge {
    background: rgba(224, 171, 95, 0.14);
    border-color: rgba(224, 171, 95, 0.42);
    color: #e6c074;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .profile-avatar {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    }

    html[data-theme="auto"] .profile-permission-badge {
        background: rgba(224, 171, 95, 0.14);
        border-color: rgba(224, 171, 95, 0.42);
        color: #e6c074;
    }
}

@media (max-width: 767.98px) {
    .profile-page {
        padding: 1rem 0.9rem 2rem;
    }

    .profile-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-page-title {
        font-size: 1.65rem;
    }

    .profile-page .btn-edit-action {
        justify-content: center;
        width: 100%;
    }

    .profile-hero {
        align-items: center;
        flex-direction: column;
        gap: 1rem;
        min-height: 0;
        padding: 1rem;
        text-align: center;
    }

    .profile-avatar {
        height: 5.6rem;
        width: 5.6rem;
    }

    .profile-avatar-placeholder {
        font-size: 2.35rem;
    }

    .profile-name-row,
    .profile-meta-item {
        justify-content: center;
    }

    .profile-name {
        font-size: 1.35rem;
    }

    .profile-meta-item {
        font-size: 0.9rem;
    }

    .profile-info-panel {
        gap: 0.6rem;
        grid-template-columns: 1fr;
        padding: 0.85rem;
    }

    .profile-section-heading {
        align-items: center;
        border-bottom: 1px solid var(--divider-soft);
        border-right: 0;
        padding: 0 0 0.75rem;
    }

    .profile-section-heading h2 {
        font-size: 1rem;
    }

    .profile-section-icon {
        flex-basis: 2.35rem;
        font-size: 1rem;
        height: 2.35rem;
        width: 2.35rem;
    }

    .profile-detail-row {
        grid-template-columns: minmax(6.75rem, 42%) minmax(0, 1fr);
        min-height: 2.35rem;
    }

    .profile-detail-row dt,
    .profile-detail-row dd {
        font-size: 0.84rem;
    }
}

@media (max-width: 420px) {
    .profile-detail-row {
        align-items: start;
        gap: 0.25rem;
        grid-template-columns: 1fr;
    }

    .profile-permission-badge {
        white-space: normal;
    }
}