/* LactisOne Enterprise UX — aligned with UI_REFERENCE/LactisOne_prototype.html */

:root {
    /* ============================================================
       LactisOne Design System v1.0 — Spruce & Butterfat
       Legacy --lactis-* names are kept as ALIASES so the entire
       component layer below reskins from these values alone.
       Canonical scales live in css/lactisone-theme.css (--lo-*).
       ============================================================ */
    --lactis-milk: #EEF2F1;            /* page background (slate tint) */
    --lactis-surface: #FFFFFF;
    --lactis-dairy-blue: #136150;      /* PRIMARY  — Spruce 600 */
    --lactis-dairy-blue-700: #0B3D33;  /* deep     — Spruce 800 (hover/rail) */
    --lactis-dairy-blue-50: #ECF5F2;   /* tint bg  — Spruce 50 */
    --lactis-dairy-blue-100: #D2E8E1;  /* tint     — Spruce 100 */
    --lactis-fresh-green: #2E9E5B;     /* SUCCESS */
    --lactis-green-50: #E6F4EC;
    --lactis-quality-gold: #B5842A;    /* ACCENT   — Butterfat 500 */
    --lactis-gold-50: #FBF4E4;
    --lactis-danger: #C8453B;          /* DANGER */
    --lactis-danger-50: #FBE7E5;
    --lactis-ink: #161D1B;             /* text     — Slate 900 */
    --lactis-muted: #515D5A;           /* text-2   — Slate 600 */
    --lactis-muted-2: #6E7B78;         /* text-3   — Slate 500 */
    --lactis-line: #DCE3E1;            /* border   — Slate 200 */
    --sidebar-width: 264px;
    --lactis-topbar-h: 60px;
    --lactis-r-sm: 6px;
    --lactis-r-md: 8px;
    --lactis-r-lg: 12px;
    --lactis-shadow-card: 0 1px 2px rgba(11, 40, 33, 0.05), 0 0 0 1px var(--lactis-line);
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    /* Metronic v9 semantic bridges */
    --primary: var(--lactis-dairy-blue);
    --primary-foreground: #ffffff;
    --ring: #71B5A3;                   /* Spruce 300 focus ring */
    --background: var(--lactis-milk);
    --foreground: var(--lactis-ink);
    --border: var(--lactis-line);
    --card: var(--lactis-surface);
    --secondary: #ECF0EF;              /* neutral btn/hover — Slate 100 */
    --secondary-foreground: #262E2C;
    --accent: #ECF0EF;
    --accent-foreground: #262E2C;
    --muted: var(--lactis-milk);
    --muted-foreground: var(--lactis-muted);
}

html {
    font-family: var(--font-sans);
}

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

html.lactis-sidebar-collapsed {
    --sidebar-width: 76px;
}

.dark {
    --lactis-milk: #0C1413;            /* dark page bg (spruce-tinted) */
    --lactis-surface: #121C1A;         /* dark surface/card */
    --lactis-ink: #E7EDEB;
    --lactis-muted: #9DAAA6;
    --lactis-muted-2: #7C8A86;
    --lactis-line: #283733;
    --lactis-dairy-blue: #3FA890;      /* primary lightened for dark text/links/active */
    --lactis-dairy-blue-700: #52BBA2;
    --lactis-dairy-blue-50: #13302A;
    --lactis-dairy-blue-100: #184037;
    --lactis-fresh-green: #62C089;
    --lactis-green-50: #10271B;
    --lactis-quality-gold: #DDB456;
    --lactis-gold-50: #2A2008;
    --lactis-danger: #E08178;
    --lactis-danger-50: #2C1311;
    --lactis-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--lactis-line);
    --primary: var(--lactis-dairy-blue);
    --primary-foreground: #06231D;     /* deep ink-green on light spruce */
    --ring: #3FA890;
    --background: var(--lactis-milk);
    --foreground: var(--lactis-ink);
    --border: var(--lactis-line);
    --card: var(--lactis-surface);
    --secondary: #18241F;
    --secondary-foreground: #E7EDEB;
    --accent: #18241F;
    --accent-foreground: #E7EDEB;
    --muted: #18241F;
    --muted-foreground: #9DAAA6;
}

/* ---------- Shell ---------- */
.lactis-shell {
    background: var(--lactis-milk);
    color: var(--lactis-ink);
}

.lactis-main {
    background: var(--lactis-milk);
    min-height: 100vh;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

.lactis-content {
    background: var(--lactis-milk);
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

.lactis-page {
    padding: 22px 24px 40px;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

.lactis-page-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 8px;
    width: 100%;
    min-width: 0;
}

.lactis-page-body > .kt-card {
    width: 100%;
}

.lactis-page-body > .kt-card.mb-5 {
    margin-bottom: 16px;
}

/* Desktop: user profile lives in topbar; keep sidebar foot for mobile drawer only */
@media (min-width: 1024px) {
    .lactis-side-foot {
        display: none;
    }
}

.lactis-tenant-strip {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--lactis-dairy-blue), var(--lactis-fresh-green));
    flex-shrink: 0;
}

/* ---------- Topbar ---------- */
.lactis-topbar {
    height: var(--lactis-topbar-h);
    background: var(--lactis-surface);
    border-bottom: 1px solid var(--lactis-line);
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.lactis-mobile-header {
    background: var(--lactis-surface);
    border-bottom: 1px solid var(--lactis-line);
}

.lactis-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--lactis-muted);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
}

.lactis-icon-btn:hover {
    background: var(--lactis-milk);
    color: var(--lactis-ink);
    border-color: var(--lactis-line);
}

.lactis-topbar-search {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--lactis-milk);
    border: 1px solid var(--lactis-line);
    border-radius: 9px;
    padding: 8px 12px;
    color: var(--lactis-muted-2);
}

.lactis-topbar-search input {
    border: 0;
    background: transparent;
    outline: 0;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--lactis-ink);
    width: 100%;
}

.lactis-kbd {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--lactis-muted);
    background: var(--lactis-surface);
    border: 1px solid var(--lactis-line);
    border-radius: 5px;
    padding: 1px 6px;
}

.lactis-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.lactis-topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--lactis-dairy-blue-50);
    color: var(--lactis-dairy-blue);
    font-weight: 700;
    font-size: 12px;
    display: grid;
    place-items: center;
}

/* Tenant pill (topbar) */
.lactis-tenant-pill-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--lactis-line);
    border-radius: 9px;
    cursor: pointer;
    background: var(--lactis-surface);
}

.lactis-tenant-pill-trigger:hover {
    border-color: var(--lactis-dairy-blue-100);
    background: var(--lactis-dairy-blue-50);
}

.lactis-tenant-logo {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--lactis-dairy-blue);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12px;
    flex: none;
}

.lactis-tenant-copy b {
    font-size: 13.5px;
    font-weight: 600;
    display: block;
    line-height: 1.2;
    color: var(--lactis-ink);
}

.lactis-tenant-type {
    font-size: 10px;
    color: var(--lactis-fresh-green);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lactis-tenant-chevron {
    font-size: 12px;
    color: var(--lactis-muted-2);
}

/* ---------- Sidebar (dark navy gradient) ---------- */
.lactis-sidebar {
    background: linear-gradient(180deg, var(--lactis-dairy-blue) 0%, var(--lactis-dairy-blue-700) 100%);
    color: #fff;
    transition: width 0.2s ease;
    overflow: hidden;
    min-height: 0;
}

/* Metronic KTDrawer adds .kt-drawer with a white popover background — keep enterprise sidebar dark */
.lactis-shell .lactis-sidebar,
.lactis-shell #sidebar.lactis-sidebar,
.lactis-shell .kt-drawer.lactis-sidebar {
    background: linear-gradient(180deg, var(--lactis-dairy-blue) 0%, var(--lactis-dairy-blue-700) 100%);
    color: #fff;
    box-shadow: none;
    overflow: hidden;
}

.lactis-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 18px;
    height: var(--lactis-topbar-h);
    flex: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lactis-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
}

.lactis-brand-mark img {
    height: 22px;
    width: auto;
}

.lactis-brand-name {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: #fff;
}

.lactis-brand-sub {
    font-size: 10.5px;
    color: #9DB6E0;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.lactis-nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 10px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    -webkit-overflow-scrolling: touch;
}

.lactis-nav::-webkit-scrollbar {
    width: 6px;
}

.lactis-nav::-webkit-scrollbar-track {
    background: transparent;
}

.lactis-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
}

.lactis-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.lactis-nav-group-h {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #7E99CC;
    padding: 10px 10px 3px;
}

.lactis-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 8px;
    color: #C6D6F0;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
    position: relative;
    margin-bottom: 0;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
}

.lactis-nav-item i {
    font-size: 16px;
    flex: none;
}

.lactis-nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.lactis-nav-item.active {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

.lactis-nav-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #fff;
}

.lactis-nav-item--disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.lactis-nav-badge {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    background: var(--lactis-quality-gold);
    color: #3a2900;
    border-radius: 20px;
    padding: 1px 6px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lactis-side-foot {
    flex: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lactis-side-foot-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    color: var(--lactis-dairy-blue);
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 13px;
}

.lactis-side-foot-txt b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.lactis-side-foot-txt span {
    font-size: 11px;
    color: #9DB6E0;
}

html.lactis-sidebar-collapsed .lactis-sidebar-label,
html.lactis-sidebar-collapsed .lactis-sidebar-brand-text,
html.lactis-sidebar-collapsed .lactis-nav-group-h,
html.lactis-sidebar-collapsed .lactis-side-foot-txt,
html.lactis-sidebar-collapsed .lactis-nav-badge {
    display: none !important;
}

html.lactis-sidebar-collapsed .lactis-nav-item {
    justify-content: center;
    padding: 7px;
}

html.lactis-sidebar-collapsed .lactis-sidebar-brand {
    justify-content: center;
    padding-inline: 12px;
}

html.lactis-sidebar-collapsed .lactis-side-foot {
    justify-content: center;
}

/* ---------- Page head ---------- */
.lactis-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.lactis-page-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
}

.lactis-page-sub {
    color: var(--lactis-muted);
    font-size: 13px;
    margin-top: 2px;
}

.lactis-page-head-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.lactis-dashboard-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
}

/* ---------- Cards & Metronic overrides ---------- */
.lactis-shell .kt-card {
    background: var(--lactis-surface);
    border-radius: var(--lactis-r-md);
    box-shadow: var(--lactis-shadow-card);
    border: none;
}

.lactis-shell .kt-card-header {
    padding: 15px 18px;
    border-bottom: 1px solid var(--lactis-line);
}

.lactis-shell .kt-card-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-shell .kt-btn-primary,
.lactis-shell .kt-btn.kt-btn-primary {
    background: var(--lactis-dairy-blue);
    border-color: var(--lactis-dairy-blue);
    color: #fff;
    border-radius: 9px;
    font-weight: 600;
}

.lactis-shell .kt-btn-primary:hover,
.lactis-shell .kt-btn.kt-btn-primary:hover {
    background: var(--lactis-dairy-blue-700);
    border-color: var(--lactis-dairy-blue-700);
}

.lactis-shell .kt-btn-outline,
.lactis-shell .kt-btn-light {
    border-radius: 9px;
    font-weight: 600;
}

.lactis-shell .kt-card.mb-5 > .kt-card-content {
    padding: 16px;
}

.lactis-shell .kt-card-content.p-0 + .border-t,
.lactis-shell .kt-card > .kt-card-content.p-0 ~ .border-t {
    border-color: var(--lactis-line);
}

.lactis-shell .kt-input {
    border-radius: 9px;
    border-color: var(--lactis-line);
    background: var(--lactis-surface);
}

.lactis-shell .kt-input:focus-within {
    border-color: var(--lactis-dairy-blue-100);
}

.lactis-shell .kt-badge {
    border-radius: 20px;
    font-weight: 600;
    font-size: 11px;
}

.lactis-shell .kt-container-fixed {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ---------- KPI ---------- */
.lactis-kpi {
    background: var(--lactis-surface);
    border-radius: var(--lactis-r-md);
    box-shadow: var(--lactis-shadow-card);
    padding: 15px 16px;
    position: relative;
    overflow: hidden;
}

.lactis-kpi__lbl {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
}

.lactis-kpi__val {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 7px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--lactis-ink);
}

.lactis-kpi__unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-muted);
    margin-left: 2px;
}

.lactis-kpi__empty {
    font-size: 18px;
    font-weight: 500;
    color: var(--lactis-muted);
    margin-top: 7px;
}

.lactis-kpi--primary::before,
.lactis-kpi--success::before,
.lactis-kpi--warning::before,
.lactis-kpi--danger::before,
.lactis-kpi--gold::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.lactis-kpi--primary::before { background: var(--lactis-dairy-blue); }
.lactis-kpi--success::before { background: var(--lactis-fresh-green); }
.lactis-kpi--warning::before { background: var(--lactis-quality-gold); }
.lactis-kpi--danger::before { background: var(--lactis-danger); }
.lactis-kpi--gold::before { background: var(--lactis-quality-gold); }

.lactis-kpi__ico {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 15px;
}

.lactis-kpi--primary .lactis-kpi__ico { background: var(--lactis-dairy-blue-50); color: var(--lactis-dairy-blue); }
.lactis-kpi--success .lactis-kpi__ico { background: var(--lactis-green-50); color: #15803D; }
.lactis-kpi--warning .lactis-kpi__ico { background: var(--lactis-gold-50); color: #B45309; }
.lactis-kpi--danger .lactis-kpi__ico { background: var(--lactis-danger-50); color: #B91C1C; }
.lactis-kpi--gold .lactis-kpi__ico { background: var(--lactis-gold-50); color: #B45309; }

.lactis-kpi__ft {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.lactis-kpi__trend-lbl {
    font-size: 11px;
    color: var(--lactis-muted-2);
}

.lactis-delta {
    font-size: 12px;
    font-weight: 700;
}

.lactis-delta.up { color: #15803D; }
.lactis-delta.down { color: var(--lactis-danger); }

.lactis-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 1024px) {
    .lactis-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1536px) {
    .lactis-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lactis-kpi-grid--secondary {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .lactis-kpi-grid--secondary {
        max-width: 520px;
    }
}

/* ---------- Dashboard layout ---------- */
.lactis-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 24px;
}

@media (min-width: 1280px) {
    .lactis-dashboard {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }
}

.lactis-dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.lactis-dashboard-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.lactis-dash-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-muted);
    padding: 6px 10px;
    border: 1px solid var(--lactis-line);
    border-radius: 9px;
    background: var(--lactis-surface);
}

.lactis-widget-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .lactis-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lactis-dash-widget .kt-card-content {
    padding: 0;
}

.lactis-dash-table tbody tr {
    cursor: pointer;
}

/* ---------- Charts ---------- */
.lactis-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .lactis-chart-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lactis-chart-card {
    background: var(--lactis-surface);
    border-radius: var(--lactis-r-md);
    box-shadow: var(--lactis-shadow-card);
    overflow: hidden;
}

.lactis-chart-card__head {
    padding: 15px 18px;
    border-bottom: 1px solid var(--lactis-line);
}

.lactis-chart-card__head h3 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-chart-card__sub {
    display: block;
    font-size: 12px;
    color: var(--lactis-muted-2);
    margin-top: 2px;
}

.lactis-chart-card__body {
    padding: 12px 14px 8px;
    height: 220px;
    position: relative;
}

.lactis-chart-card__body canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ---------- Right rail ---------- */
.lactis-rail-card {
    background: var(--lactis-surface);
    border-radius: var(--lactis-r-md);
    box-shadow: var(--lactis-shadow-card);
    overflow: hidden;
}

.lactis-rail-card__head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--lactis-line);
}

.lactis-rail-card__head h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-rail-card__body {
    padding: 12px;
    min-width: 0;
}

.lactis-rail-card__body .lactis-qa-grid--compact {
    min-width: 0;
}

.lactis-status-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lactis-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

.lactis-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.lactis-status-dot--ok { background: var(--lactis-fresh-green); }
.lactis-status-dot--warn { background: var(--lactis-quality-gold); }
.lactis-status-dot--bad { background: var(--lactis-danger); }

.lactis-status-label {
    color: var(--lactis-muted);
    flex: 1;
}

.lactis-status-value {
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-rail-alerts {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lactis-rail-alert {
    display: flex;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--lactis-line);
}

.lactis-rail-alert:last-child {
    border-bottom: none;
}

.lactis-rail-alert__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lactis-quality-gold);
    margin-top: 5px;
    flex: none;
}

.lactis-rail-alert__title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lactis-ink);
    text-decoration: none;
}

.lactis-rail-alert__title:hover {
    color: var(--lactis-dairy-blue);
}

.lactis-rail-alert__sub {
    font-size: 11px;
    color: var(--lactis-muted-2);
    margin-top: 2px;
}

.lactis-widget-empty--sm {
    padding: 1rem;
    font-size: 12px;
}

/* ---------- Topbar user ---------- */
.lactis-topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 4px;
}

.lactis-topbar-user-meta b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lactis-ink);
}

.lactis-topbar-user-meta span {
    font-size: 11px;
    color: var(--lactis-muted);
}

.lactis-topbar-user-trigger {
    cursor: pointer;
    border-radius: 10px;
    padding: 4px 8px 4px 4px;
    transition: background 0.12s;
}

.lactis-topbar-user-trigger:hover {
    background: var(--lactis-milk);
}

.lactis-topbar-user-chevron {
    font-size: 11px;
    color: var(--lactis-muted);
    margin-left: 2px;
}

.lactis-user-menu-header {
    line-height: 1.35;
}

/* ---------- Sidebar collapse (below brand, above nav) ---------- */
.lactis-sidebar-collapse {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #9DB6E0;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    flex: none;
}

.lactis-sidebar-collapse:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

html.lactis-sidebar-collapsed .lactis-sidebar-collapse {
    justify-content: center;
    padding-inline: 10px;
}

html.lactis-sidebar-collapsed .lactis-sidebar-collapse span {
    display: none;
}

.lactis-sidebar-deco {
    height: 72px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.12)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cellipse cx='60' cy='48' rx='38' ry='10' fill='%23ffffff' opacity='.08'/%3E%3Cpath d='M44 38c8-14 24-14 32 0' stroke='%23ffffff' stroke-opacity='.12' fill='none' stroke-width='2'/%3E%3C/svg%3E") center bottom / 80% no-repeat;
    opacity: 0.9;
    flex: none;
}

html.lactis-sidebar-collapsed .lactis-sidebar-deco {
    display: none;
}

/* ---------- Sidebar footer ---------- */

/* ---------- Login (mockup) ---------- */
.lactis-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    padding: 24px;
}

.lactis-login-backdrop {
    position: fixed;
    inset: 0;
    background: url('../metronic-v9/media/images/2600x1600/2.png') center / cover no-repeat;
    z-index: 0;
}

.lactis-login-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 61, 145, 0.55), rgba(8, 47, 110, 0.75));
}

.dark .lactis-login-backdrop {
    background-image: url('../metronic-v9/media/images/2600x1600/2-dark.png');
}

.lactis-login-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
}

.lactis-login-card {
    background: var(--lactis-surface);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.lactis-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 28px 28px;
}

.lactis-login-brand {
    text-align: center;
    margin-bottom: 4px;
}

.lactis-login-mark {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--lactis-dairy-blue-50);
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
}

.lactis-login-mark img {
    height: 28px;
    width: auto;
}

.lactis-login-brand h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
}

.lactis-login-brand p {
    font-size: 13px;
    color: var(--lactis-muted);
    margin-top: 4px;
}

.lactis-login-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--lactis-ink);
}

.lactis-login-field-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.lactis-login-muted {
    font-size: 12px;
    color: var(--lactis-muted-2);
}

.lactis-login-input {
    width: 100%;
    border: 1px solid var(--lactis-line);
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 14px;
    background: var(--lactis-surface);
    color: var(--lactis-ink);
}

.lactis-login-input:focus {
    outline: 2px solid var(--lactis-dairy-blue-100);
    border-color: var(--lactis-dairy-blue);
}

.lactis-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-login-submit {
    width: 100%;
    border: 0;
    border-radius: 9px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--lactis-fresh-green);
    color: #062b14;
    margin-top: 4px;
}

.lactis-login-submit:hover {
    filter: brightness(0.96);
}

.lactis-login-alert {
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--lactis-gold-50);
    color: #92400e;
    font-size: 13px;
}

.lactis-error-card {
    max-width: 440px;
    text-align: center;
}

.lactis-error-brand p {
    margin-top: 8px;
    color: var(--lactis-muted);
    font-size: 14px;
    line-height: 1.5;
}

.lactis-error-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.lactis-error-back {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border-radius: 9px;
    border: 1px solid var(--lactis-line);
    background: transparent;
    color: var(--lactis-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.lactis-error-back:hover {
    background: var(--lactis-milk);
    border-color: var(--lactis-dairy-blue-200);
}

.lactis-tenant-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--lactis-line);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, border-color 0.12s;
}

.lactis-tenant-pick:hover {
    background: var(--lactis-dairy-blue-50);
    border-color: var(--lactis-dairy-blue-100);
}

.lactis-tenant-pick-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lactis-tenant-pick-copy b {
    font-size: 14px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-tenant-pick-copy span {
    font-size: 12px;
    color: var(--lactis-muted);
}

/* ---------- Quick actions ---------- */
.lactis-qa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 640px) {
    .lactis-qa-grid:not(.lactis-qa-grid--compact) {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .lactis-qa-grid:not(.lactis-qa-grid--compact) {
        grid-template-columns: repeat(6, 1fr);
    }
}

.lactis-quick-action {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--lactis-line);
    border-radius: var(--lactis-r-md);
    background: var(--lactis-surface);
    cursor: pointer;
    transition: 0.12s;
    text-decoration: none;
    color: inherit;
    height: 100%;
    box-shadow: var(--lactis-shadow-card);
}

.lactis-quick-action:hover {
    border-color: var(--lactis-dairy-blue-100);
    background: var(--lactis-dairy-blue-50);
    transform: translateY(-1px);
}

.lactis-quick-action__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--lactis-dairy-blue-50);
    color: var(--lactis-dairy-blue);
    font-size: 16px;
}

.lactis-quick-action b,
.lactis-quick-action span {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--lactis-ink);
}

/* Dashboard rail — vertical list, icon + label in a row */
.lactis-qa-grid.lactis-qa-grid--compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lactis-qa-grid.lactis-qa-grid--compact .lactis-quick-action {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    min-height: 0;
    height: auto;
    width: 100%;
}

.lactis-qa-grid.lactis-qa-grid--compact .lactis-quick-action:hover {
    transform: none;
}

.lactis-qa-grid.lactis-qa-grid--compact .lactis-quick-action__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 15px;
    flex-shrink: 0;
}

.lactis-qa-grid.lactis-qa-grid--compact .lactis-quick-action b,
.lactis-qa-grid.lactis-qa-grid--compact .lactis-quick-action span {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
    white-space: normal;
}

/* ---------- Status chips ---------- */
.lactis-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1.5;
    white-space: nowrap;
}

.lactis-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.lactis-chip--green { background: var(--lactis-green-50); color: #15803D; }
.lactis-chip--gold { background: var(--lactis-gold-50); color: #B45309; }
.lactis-chip--red { background: var(--lactis-danger-50); color: #B91C1C; }
.lactis-chip--blue { background: var(--lactis-dairy-blue-50); color: var(--lactis-dairy-blue); }
.lactis-chip--slate { background: #F1F5F9; color: #475569; }

.dark .lactis-chip--slate { background: #334155; color: #cbd5e1; }
.dark .lactis-chip--gold { background: rgba(180, 83, 9, 0.2); color: #FCD34D; }
.dark .lactis-chip--green { background: rgba(21, 128, 61, 0.2); color: #86EFAC; }
.dark .lactis-chip--red { background: rgba(185, 28, 28, 0.2); color: #FCA5A5; }

/* ---------- Mobile collection UX ---------- */
.lactis-callout-note {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--lactis-border, #E2E8F0);
    background: var(--lactis-surface-muted, #F8FAFC);
    color: var(--lactis-muted, #64748B);
}

.dark .lactis-callout-note {
    background: rgba(30, 41, 59, 0.5);
    border-color: #334155;
    color: #94a3b8;
}

.lactis-mobile-summary-kpi {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--lactis-gold-50, #FFFBEB);
    border: 1px solid rgba(180, 83, 9, 0.15);
}

.dark .lactis-mobile-summary-kpi {
    background: rgba(180, 83, 9, 0.12);
    border-color: rgba(252, 211, 77, 0.2);
}

.lactis-mobile-summary-kpi__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lactis-muted, #64748B);
}

.lactis-mobile-summary-kpi__value {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--lactis-text, #0F172A);
    line-height: 1.2;
    margin-top: 0.25rem;
}

.lactis-mobile-summary-kpi__value span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--lactis-muted, #64748B);
}

.lactis-mobile-summary-kpi__meta {
    font-size: 0.8125rem;
    color: var(--lactis-muted, #64748B);
    margin-top: 0.25rem;
}

.dark .lactis-mobile-summary-kpi__value { color: #f1f5f9; }

.lactis-mobile-summary-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

@media (min-width: 640px) {
    .lactis-mobile-summary-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }
}

.lactis-mobile-summary-row__label {
    color: var(--lactis-muted, #64748B);
    flex-shrink: 0;
}

.lactis-mobile-summary-row__value {
    font-weight: 600;
    font-family: var(--font-mono, ui-monospace, monospace);
    text-align: start;
    word-break: break-word;
}

@media (min-width: 640px) {
    .lactis-mobile-summary-row__value { text-align: end; }
}

.lactis-variance-metric {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--lactis-border, #E2E8F0);
    background: var(--lactis-surface-muted, #F8FAFC);
}

.dark .lactis-variance-metric {
    background: rgba(30, 41, 59, 0.4);
    border-color: #334155;
}

.lactis-variance-metric--expected { border-left: 3px solid #B45309; }
.lactis-variance-metric--actual { border-left: 3px solid #15803D; }

.lactis-variance-metric__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lactis-muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lactis-variance-metric__value {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, monospace);
    margin-top: 0.25rem;
}

.lactis-variance-metric__hint {
    display: block;
    font-size: 0.75rem;
    color: var(--lactis-muted, #64748B);
    margin-top: 0.25rem;
}

.lactis-variance-diff--matched { color: #15803D; }
.lactis-variance-diff--minor { color: #B45309; }
.lactis-variance-diff--major { color: #B91C1C; }

.dark .lactis-variance-diff--matched { color: #86EFAC; }
.dark .lactis-variance-diff--minor { color: #FCD34D; }
.dark .lactis-variance-diff--major { color: #FCA5A5; }

.lactis-mobile-ops-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .lactis-mobile-ops-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lactis-mobile-ops-kpi {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--lactis-surface-muted, #F8FAFC);
    border: 1px solid var(--lactis-border, #E2E8F0);
}

.dark .lactis-mobile-ops-kpi {
    background: rgba(30, 41, 59, 0.4);
    border-color: #334155;
}

.lactis-mobile-ops-kpi__lbl {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lactis-muted, #64748B);
    line-height: 1.35;
}

.lactis-mobile-ops-kpi__val {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, monospace);
    margin-top: 0.35rem;
    color: var(--lactis-text, #0F172A);
}

.dark .lactis-mobile-ops-kpi__val { color: #f1f5f9; }

.lactis-mobile-ops-kpi__val--warn { color: #B45309; }
.dark .lactis-mobile-ops-kpi__val--warn { color: #FCD34D; }

/* ---------- Flow widget ---------- */
.lactis-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    flex: 1;
}

.lactis-flow-step__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lactis-dairy-blue-50);
    color: var(--lactis-dairy-blue);
    margin-bottom: 0.5rem;
}

.lactis-flow-step__arrow {
    color: var(--lactis-muted-2);
    flex-shrink: 0;
    padding-top: 0.75rem;
}

/* ---------- Widgets ---------- */
.lactis-widget-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--lactis-muted);
    font-size: 0.875rem;
}

.lactis-alert-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--lactis-line);
}

.lactis-alert-row:last-child {
    border-bottom: none;
}

.lactis-nav-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.lactis-tenant-switcher-meta {
    font-size: 0.7rem;
    color: var(--lactis-muted);
}

.lactis-brand-mark--compact {
    height: 30px;
    width: auto;
}

/* ---------- Unified data tables (list, report, dashboard) ---------- */
.lactis-reg-table,
.lactis-dash-table,
.lactis-shell table.w-full,
.lactis-shell .kt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.35;
}

.lactis-reg-table thead th,
.lactis-dash-table thead th,
.lactis-shell table.w-full thead th,
.lactis-shell .kt-table thead th {
    text-align: start;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--lactis-line);
    white-space: nowrap;
    background: var(--lactis-milk);
}

.lactis-reg-table tbody td,
.lactis-dash-table tbody td,
.lactis-shell table.w-full tbody td,
.lactis-shell .kt-table tbody td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--lactis-line);
    color: var(--lactis-ink);
    vertical-align: middle;
}

.lactis-reg-table tbody tr:last-child td,
.lactis-dash-table tbody tr:last-child td,
.lactis-shell table.w-full tbody tr:last-child td,
.lactis-shell .kt-table tbody tr:last-child td {
    border-bottom: none;
}

.lactis-reg-table tbody tr:hover,
.lactis-dash-table tbody tr:hover,
.lactis-shell table.w-full tbody tr:hover,
.lactis-shell .kt-table tbody tr:hover {
    background: var(--lactis-dairy-blue-50);
}

.dark .lactis-reg-table tbody tr:hover,
.dark .lactis-dash-table tbody tr:hover,
.dark .lactis-shell table.w-full tbody tr:hover,
.dark .lactis-shell .kt-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.lactis-shell table.w-full thead tr,
.lactis-shell table.w-full tbody tr {
    border-color: var(--lactis-line);
}

.lactis-reg-table .r,
.lactis-dash-table .r,
.lactis-shell table.w-full .text-end,
.lactis-shell table.w-full th.text-end,
.lactis-shell table.w-full td.text-end {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.dark .lactis-reg-table thead th,
.dark .lactis-dash-table thead th,
.dark .lactis-shell table.w-full thead th,
.dark .lactis-shell .kt-table thead th {
    background: #1e293b;
}

.lactis-shell .kt-container-fixed .kt-container-fixed {
    padding-left: inherit;
    padding-right: inherit;
}

/* ---------- Tenant switcher in sidebar header ---------- */
.lactis-sidebar-tenant {
    flex: none;
    padding: 8px 10px 4px;
}

.lactis-sidebar-tenant .lactis-tenant-sidebar,
.lactis-sidebar-tenant .lactis-tenant-sidebar > .kt-menu-item {
    width: 100%;
    display: block;
}

.lactis-tenant-sidebar-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.lactis-tenant-sidebar-trigger:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}

.lactis-tenant-sidebar-trigger .lactis-tenant-logo {
    background: #fff;
    color: var(--lactis-dairy-blue);
}

.lactis-tenant-sidebar-trigger .lactis-tenant-copy {
    flex: 1;
    min-width: 0;
}

.lactis-tenant-sidebar-trigger .lactis-tenant-copy b {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lactis-tenant-sidebar-trigger .lactis-tenant-type {
    color: #9DB6E0;
    text-transform: none;
    letter-spacing: 0.02em;
}

.lactis-tenant-sidebar-trigger .lactis-tenant-chevron {
    color: #9DB6E0;
    margin-left: auto;
}

html.lactis-sidebar-collapsed .lactis-sidebar-tenant {
    padding-inline: 12px;
}

html.lactis-sidebar-collapsed .lactis-tenant-sidebar-trigger {
    justify-content: center;
    gap: 0;
    padding: 8px;
}

/* ============================================================
   Registry utilities (sort, actions, tags)
   ============================================================ */
.lactis-reg-table { white-space: nowrap; }

.lactis-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lactis-shell .kt-card > .kt-card-content.p-0 {
    min-width: 0;
    overflow: hidden;
}

.lactis-reg-table--wide {
    min-width: 1120px;
}

.lactis-reg-table td.lactis-reg-table__wrap,
.lactis-reg-table th.lactis-reg-table__wrap {
    white-space: normal;
}

.lactis-reg-table .lactis-reg-table__clip {
    display: inline-block;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.lactis-reg-table th.lactis-reg-table__sticky-end,
.lactis-reg-table td.lactis-reg-table__sticky-end {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--lactis-surface);
    box-shadow: -8px 0 10px -8px rgb(15 23 42 / 0.12);
}

.lactis-reg-table thead th.lactis-reg-table__sticky-end {
    z-index: 3;
    background: var(--lactis-milk);
}

.lactis-reg-table tbody tr:hover td.lactis-reg-table__sticky-end {
    background: var(--lactis-dairy-blue-50);
}

.dark .lactis-reg-table thead th.lactis-reg-table__sticky-end {
    background: #1e293b;
}

.dark .lactis-reg-table tbody tr:hover td.lactis-reg-table__sticky-end {
    background: rgba(255, 255, 255, 0.04);
}

.lactis-pager-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--lactis-line);
}

@media (min-width: 640px) {
    .lactis-pager-bar {
        flex-direction: row;
        align-items: center;
    }
}

.lactis-pager-bar__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.lactis-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 600;
}
.lactis-sort-btn:hover { color: var(--lactis-dairy-blue); }
.lactis-sort-ic { font-size: 12px; color: var(--lactis-muted-2); opacity: 0.45; }
.lactis-sort-ic--active { color: var(--lactis-dairy-blue); opacity: 1; }

.lactis-code-link { color: var(--lactis-dairy-blue); font-weight: 600; text-decoration: none; }
.lactis-code-link:hover { text-decoration: underline; }

.lactis-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--lactis-dairy-blue-50);
    color: var(--lactis-dairy-blue);
    white-space: nowrap;
}
.dark .lactis-tag { background: rgba(59, 111, 212, 0.18); color: #9DB6E0; }

.lactis-reg-table .lactis-chip {
    font-size: 10.5px;
    padding: 2px 8px;
    line-height: 1.35;
}

.lactis-cell-ic { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lactis-cell-ic i { font-size: 13px; color: var(--lactis-muted-2); }

.lactis-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    position: relative;
}

.lactis-act {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--lactis-muted);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}
.lactis-act:hover { background: var(--lactis-milk); color: var(--lactis-dairy-blue); border-color: var(--lactis-line); }
.lactis-act i { font-size: 14px; }

.lactis-act--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.lactis-row-menu {
    position: absolute;
    right: 0;
    top: 32px;
    z-index: 40;
    min-width: 168px;
    background: var(--lactis-surface);
    border: 1px solid var(--lactis-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    padding: 6px;
}
.lactis-row-menu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--lactis-ink);
    text-decoration: none;
    white-space: nowrap;
}
.lactis-row-menu__item:hover { background: var(--lactis-milk); }
.lactis-row-menu__item i { font-size: 15px; color: var(--lactis-muted); }
.lactis-menu-backdrop { position: fixed; inset: 0; z-index: 30; }

.lactis-selbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--lactis-dairy-blue-50);
    border-bottom: 1px solid var(--lactis-line);
    font-size: 13px;
    color: var(--lactis-dairy-blue);
    font-weight: 600;
}
.dark .lactis-selbar { background: rgba(59, 111, 212, 0.16); }

.lactis-pager { display: flex; align-items: center; gap: 4px; }
.lactis-pager-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--lactis-line);
    background: var(--lactis-surface);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
    cursor: pointer;
}
.lactis-pager-btn:hover:not(:disabled):not(.lactis-pager-btn--active) { background: var(--lactis-milk); }
.lactis-pager-btn--active { background: var(--lactis-dairy-blue); border-color: var(--lactis-dairy-blue); color: #fff; }
.lactis-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lactis-pager-ellipsis { padding: 0 4px; color: var(--lactis-muted-2); }

.lactis-check { width: 14px; height: 14px; accent-color: var(--lactis-dairy-blue); cursor: pointer; }

.lactis-confirm-dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1200;
}

.lactis-confirm-dialog__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgb(15 23 42 / 0.45);
    backdrop-filter: blur(2px);
}

.lactis-confirm-dialog__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    max-height: min(90vh, 640px);
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgb(15 23 42 / 0.12), 0 8px 10px -6px rgb(15 23 42 / 0.08);
}

.lactis-confirm-dialog__panel .kt-modal-body {
    overflow-y: auto;
}

.lactis-confirm-dialog-summary {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--lactis-line);
    background: var(--lactis-milk);
    font-size: 13px;
}

.lactis-confirm-dialog-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.lactis-confirm-dialog-summary__label {
    color: var(--lactis-muted);
}

.lactis-confirm-dialog-summary__value {
    font-weight: 600;
    color: var(--lactis-ink);
    text-align: end;
}

html.lactis-modal-open,
html.lactis-modal-open body {
    overflow: hidden;
}

/* ---------- Tabs ---------- */
.lactis-tabs {
    margin-bottom: 20px;
}

.lactis-tabs__nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--lactis-line);
    margin-bottom: 20px;
    padding-bottom: 0;
    scrollbar-width: thin;
}

.lactis-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    min-height: 44px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--lactis-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.lactis-tabs__btn:hover {
    color: var(--lactis-ink);
    background: var(--lactis-surface-2, var(--lactis-surface));
}

.lactis-tabs__btn.active {
    color: var(--lactis-dairy-blue);
    border-bottom-color: var(--lactis-dairy-blue);
}

.lactis-tabs__btn i {
    font-size: 15px;
}

.lactis-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--lactis-dairy-blue-50);
    color: var(--lactis-dairy-blue);
    font-size: 10px;
    font-weight: 700;
}

.lactis-tabs__panel[hidden] {
    display: none !important;
}

/* ---------- Farmer detail hero ---------- */
.lactis-farmer-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 18px 20px !important;
}

.lactis-farmer-hero__avatar {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lactis-dairy-blue) 0%, var(--lactis-dairy-blue-700) 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: grid;
    place-items: center;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.lactis-farmer-hero__main {
    min-width: 0;
}

.lactis-farmer-hero__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lactis-farmer-hero__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
    margin: 0;
}

.lactis-farmer-hero__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-farmer-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-farmer-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-farmer-hero__facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lactis-farmer-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-farmer-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-farmer-hero__link {
    color: var(--lactis-dairy-blue);
    text-decoration: none;
}

.lactis-farmer-hero__link:hover {
    text-decoration: underline;
}

.lactis-farmer-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 639px) {
    .lactis-farmer-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-farmer-hero__avatar {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .lactis-farmer-hero__facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- Breadcrumb ---------- */
.lactis-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.lactis-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lactis-muted);
}

.lactis-breadcrumb__item--current .lactis-breadcrumb__text {
    color: var(--lactis-ink);
    font-weight: 600;
}

.lactis-breadcrumb__link {
    color: var(--lactis-dairy-blue);
    text-decoration: none;
    font-weight: 500;
}

.lactis-breadcrumb__link:hover {
    text-decoration: underline;
}

.lactis-breadcrumb__sep {
    color: var(--lactis-muted-2);
    font-size: 12px;
}

/* ---------- Collection session hero ---------- */
.lactis-session-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 18px 20px !important;
}

.lactis-session-hero__icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lactis-quality-gold) 0%, #946A23 100%);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lactis-session-hero__main {
    min-width: 0;
}

.lactis-session-hero__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lactis-session-hero__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
    margin: 0;
}

.lactis-session-hero__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-session-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-session-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-session-hero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lactis-session-hero__facts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.lactis-session-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-session-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-session-hero__link {
    color: var(--lactis-dairy-blue);
    text-decoration: none;
}

.lactis-session-hero__link:hover {
    text-decoration: underline;
}

.lactis-session-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767px) {
    .lactis-map-container {
        height: 280px !important;
    }
}

@media (max-width: 639px) {
    .lactis-session-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-session-hero__icon {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .lactis-session-hero__facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- Reconciliation hero ---------- */
.lactis-reconciliation-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 18px 20px !important;
}

.lactis-reconciliation-hero__icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--spruce-500) 0%, var(--spruce-800) 100%);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lactis-reconciliation-hero__main {
    min-width: 0;
}

.lactis-reconciliation-hero__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lactis-reconciliation-hero__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
    margin: 0;
}

.lactis-reconciliation-hero__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-reconciliation-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-reconciliation-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-reconciliation-hero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lactis-reconciliation-hero__facts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.lactis-reconciliation-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-reconciliation-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-reconciliation-hero__link {
    color: var(--lactis-dairy-blue);
    text-decoration: none;
}

.lactis-reconciliation-hero__link:hover {
    text-decoration: underline;
}

.lactis-reconciliation-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 639px) {
    .lactis-reconciliation-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-reconciliation-hero__icon {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .lactis-reconciliation-hero__facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- Settlement run hero ---------- */
.lactis-settlement-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 18px 20px !important;
}

.lactis-settlement-hero__icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lactis-quality-gold) 0%, #7A5520 100%);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lactis-settlement-hero__main {
    min-width: 0;
}

.lactis-settlement-hero__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lactis-settlement-hero__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
    margin: 0;
}

.lactis-settlement-hero__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-settlement-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-settlement-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-settlement-hero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lactis-settlement-hero__facts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.lactis-settlement-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-settlement-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-settlement-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lactis-settlement-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--lactis-milk);
    border: 1px solid var(--lactis-line);
    overflow: hidden;
}

.lactis-settlement-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--spruce-500) 0%, var(--spruce-400) 100%);
    transition: width 0.3s ease;
}

@media (max-width: 639px) {
    .lactis-settlement-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-settlement-hero__icon {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .lactis-settlement-hero__facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- Dairy receiving hero ---------- */
.lactis-receiving-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 18px 20px !important;
}

.lactis-receiving-hero__icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lactis-dairy-blue) 0%, var(--lactis-dairy-blue-700) 100%);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lactis-receiving-hero__main {
    min-width: 0;
}

.lactis-receiving-hero__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lactis-receiving-hero__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
    margin: 0;
}

.lactis-receiving-hero__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-receiving-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-receiving-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-receiving-hero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lactis-receiving-hero__facts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.lactis-receiving-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-receiving-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-receiving-hero__link {
    color: var(--lactis-dairy-blue);
    text-decoration: none;
}

.lactis-receiving-hero__link:hover {
    text-decoration: underline;
}

.lactis-receiving-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 639px) {
    .lactis-receiving-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-receiving-hero__icon {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .lactis-receiving-hero__facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- Aggregator hero ---------- */
.lactis-aggregator-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 18px 20px !important;
}

.lactis-aggregator-hero__icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lactis-dairy-blue) 0%, var(--lactis-quality-gold) 100%);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lactis-aggregator-hero__main {
    min-width: 0;
}

.lactis-aggregator-hero__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lactis-aggregator-hero__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
    margin: 0;
}

.lactis-aggregator-hero__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-aggregator-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-aggregator-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-aggregator-hero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lactis-aggregator-hero__facts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.lactis-aggregator-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-aggregator-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-aggregator-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 639px) {
    .lactis-aggregator-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-aggregator-hero__icon {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .lactis-aggregator-hero__facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- Route hero ---------- */
.lactis-route-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 18px 20px !important;
}

.lactis-route-hero__icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lactis-dairy-blue) 0%, var(--lactis-dairy-blue-700) 100%);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lactis-route-hero__main {
    min-width: 0;
}

.lactis-route-hero__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lactis-route-hero__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
    margin: 0;
}

.lactis-route-hero__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-route-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-route-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-route-hero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lactis-route-hero__facts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.lactis-route-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-route-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-route-hero__link {
    color: var(--lactis-dairy-blue);
    text-decoration: none;
}

.lactis-route-hero__link:hover {
    text-decoration: underline;
}

.lactis-route-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 639px) {
    .lactis-route-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-route-hero__icon {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .lactis-route-hero__facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- Milk collection hero ---------- */
.lactis-milk-collection-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 18px 20px !important;
}

.lactis-milk-collection-hero__icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lactis-quality-gold) 0%, var(--lactis-dairy-blue) 100%);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.lactis-milk-collection-hero__main {
    min-width: 0;
}

.lactis-milk-collection-hero__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lactis-milk-collection-hero__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lactis-ink);
    margin: 0;
}

.lactis-milk-collection-hero__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-milk-collection-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-milk-collection-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-milk-collection-hero__facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lactis-milk-collection-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-milk-collection-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-milk-collection-hero__link {
    color: var(--lactis-dairy-blue);
    text-decoration: none;
}

.lactis-milk-collection-hero__link:hover {
    text-decoration: underline;
}

.lactis-milk-collection-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lactis-milk-collection-map .lactis-map-container {
    height: 380px;
}

@media (max-width: 639px) {
    .lactis-milk-collection-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-milk-collection-hero__icon {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .lactis-milk-collection-hero__facts {
        grid-template-columns: 1fr;
    }

    .lactis-milk-collection-map .lactis-map-container {
        height: 280px;
    }
}

/* Statement hero + print */
.lactis-statement-hero__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 20px;
    padding: 20px 24px;
}

.lactis-statement-hero__icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--lactis-dairy-gold) 14%, transparent);
    color: var(--lactis-dairy-gold);
    font-size: 22px;
}

.lactis-statement-hero__main {
    min-width: 0;
}

.lactis-statement-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.lactis-statement-hero__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lactis-ink);
}

.lactis-statement-hero__meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--lactis-muted);
}

.lactis-statement-hero__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.lactis-statement-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .lactis-statement-hero__facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lactis-statement-hero__fact-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 2px;
}

.lactis-statement-hero__fact-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--lactis-ink);
}

.lactis-statement-hero__chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lactis-statement-print-header {
    display: none;
}

.lactis-statement-print-only {
    display: none;
}

.lactis-statement-signature {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
    padding-top: 16px;
}

.lactis-statement-signature__line {
    height: 1px;
    background: var(--lactis-border);
    margin-bottom: 8px;
}

.lactis-statement-signature__block {
    font-size: 12px;
    color: var(--lactis-muted);
}

@media (max-width: 639px) {
    .lactis-statement-hero__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .lactis-statement-hero__icon {
        grid-row: auto;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .lactis-statement-hero__facts {
        grid-template-columns: 1fr;
    }
}

/* Reports hub + period selector */
.lactis-report-hub-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.lactis-report-hub-card:hover {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--lactis-dairy-blue) 12%, transparent);
    border-color: color-mix(in srgb, var(--lactis-dairy-gold) 35%, var(--lactis-border));
    transform: translateY(-1px);
}

.lactis-report-hub-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--lactis-dairy-gold) 14%, transparent);
    color: var(--lactis-dairy-gold);
    font-size: 18px;
}

.lactis-report-period {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .lactis-report-period {
        grid-template-columns: minmax(180px, 220px) repeat(2, minmax(140px, 180px)) auto;
        align-items: end;
    }
}

.lactis-report-period__label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lactis-muted-2);
    margin-bottom: 4px;
}

.lactis-report-period__extra {
    display: contents;
}

@media (max-width: 767px) {
    .lactis-report-period__extra {
        display: block;
    }
}

@media print {
    .lactis-mobile-header,
    .lactis-sidebar,
    .lactis-topbar,
    .lactis-tenant-strip,
    .lactis-no-print,
    .lactis-page-head,
    .lactis-tabs,
    #blazor-error-ui {
        display: none !important;
    }

    .lactis-main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .lactis-page,
    .lactis-page-body,
    .lactis-content {
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .lactis-statement-print-header {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 2px solid #111;
    }

    .lactis-statement-print-header__brand {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .lactis-statement-print-header__logo {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        border: 1px solid #111;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
    }

    .lactis-statement-print-header__tenant {
        font-size: 16px;
        font-weight: 700;
        color: #111;
    }

    .lactis-statement-print-header__doc {
        font-size: 12px;
        color: #444;
        margin-top: 2px;
    }

    .lactis-statement-print-header__period {
        text-align: right;
        font-size: 12px;
        color: #444;
    }

    .lactis-statement-print-header__period strong {
        display: block;
        font-size: 14px;
        color: #111;
        margin-top: 4px;
    }

    .lactis-statement-print-only {
        display: block !important;
    }

    .kt-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 16px !important;
    }

    .lactis-reg-table th,
    .lactis-reg-table td {
        color: #111 !important;
    }
}