/* ========================================================================== */
/* DESIGN TOKENS */
/* ========================================================================== */

:root {
    --eo-font: 'Noto Sans Bengali', 'Segoe UI', Arial, sans-serif;

    /* sized for Bangla readers who are not tech people: 16px body text, nothing under 12px (raised 4 Nov 2026 from a 14px base) */
    --eo-fs-xs: 0.75rem;
    --eo-fs-sm: 0.8125rem;
    --eo-fs-sm-plus: 0.875rem;
    --eo-fs-md: 0.9375rem;
    --eo-fs-base: 1rem;
    --eo-fs-lg: 1.125rem;
    --eo-fs-xl: 1.25rem;
    --eo-fs-2xl: 1.375rem;
    --eo-fs-3xl: 1.625rem;
    --eo-fs-4xl: 1.875rem;
    --eo-fs-display: clamp(1.75rem, 2.4vw, 2.5rem);

    --eo-fw-normal: 400;
    --eo-fw-medium: 500;
    --eo-fw-semibold: 600;
    --eo-fw-bold: 700;

    --eo-lh-tight: 1.25;
    --eo-lh-normal: 1.6;

    /* brand approved 29 Oct 2026: emerald with a deep blue accent; never used for status, where green means done */
    --eo-brand: #047857;
    --eo-brand-strong: #065F46;
    --eo-brand-deep: #022C22;
    --eo-brand-10: color-mix(in srgb, var(--eo-brand) 10%, transparent);
    --eo-brand-20: color-mix(in srgb, var(--eo-brand) 20%, transparent);
    --eo-accent: #0369A1;
    --eo-accent-10: color-mix(in srgb, var(--eo-accent) 10%, transparent);
    --eo-on-brand: #FFFFFF;

    /* TimoDesk look: a light grey canvas, white flat panels, cool greys for text and lines */
    --eo-bg: #F5F6F8;
    --eo-surface: #FFFFFF;
    --eo-surface-2: #F9FAFB;
    --eo-bg-hover: #F3F4F6;
    --eo-border: #E5E7EB;
    --eo-border-strong: #D1D5DB;
    --eo-text: #111827;
    --eo-text-2: #374151;
    --eo-text-muted: #6B7280;
    --eo-text-subtle: #9CA3AF;
    --eo-overlay: rgba(15, 23, 42, 0.55);

    /* the dark navy sidebar; its active pill is an emerald tint with a lighter emerald icon so it reads on navy */
    --eo-side-bg: #0F172A;
    --eo-side-line: rgba(255, 255, 255, 0.08);
    --eo-side-line-strong: rgba(255, 255, 255, 0.14);
    --eo-side-hover: rgba(255, 255, 255, 0.06);
    --eo-side-text: #A3AEC2;
    --eo-side-text-strong: #F8FAFC;
    --eo-side-icon: #7C879B;
    --eo-side-muted: #64748B;
    --eo-side-active: color-mix(in srgb, #10B981 18%, transparent);
    --eo-side-active-weak: color-mix(in srgb, #10B981 10%, transparent);
    --eo-side-active-icon: #34D399;

    /* success, warning, danger and info exactly as Kothay (--kx-*): the base shade for dots and fills, -strong for text and icons; green = delivered/done, warning = pending, danger = returned/lost/failed, neutral = cancelled (CLAUDE.md section 7) */
    --eo-success: #10B981;
    --eo-success-strong: #047857;
    --eo-success-10: color-mix(in srgb, var(--eo-success) 10%, transparent);
    --eo-success-25: color-mix(in srgb, var(--eo-success) 25%, transparent);
    --eo-danger: #DC2626;
    --eo-danger-strong: #B91C1C;
    --eo-danger-10: color-mix(in srgb, var(--eo-danger) 10%, transparent);
    --eo-danger-25: color-mix(in srgb, var(--eo-danger) 25%, transparent);
    /* the danger word on a dark surface (the bulk bar) */
    --eo-danger-on-dark: #FCA5A5;
    --eo-warning: #F59E0B;
    --eo-warning-strong: #B45309;
    --eo-warning-10: color-mix(in srgb, var(--eo-warning) 10%, transparent);
    --eo-warning-25: color-mix(in srgb, var(--eo-warning) 25%, transparent);
    --eo-info: #0EA5E9;
    --eo-info-strong: #0369A1;
    --eo-info-10: color-mix(in srgb, var(--eo-info) 10%, transparent);
    --eo-info-25: color-mix(in srgb, var(--eo-info) 25%, transparent);
    --eo-neutral: #71717A;
    --eo-neutral-10: color-mix(in srgb, var(--eo-neutral) 10%, transparent);

    --eo-space-2xs: 2px;
    --eo-space-xs: 4px;
    --eo-space-sm: 8px;
    --eo-space-md: 12px;
    --eo-space-base: 16px;
    --eo-space-lg: 20px;
    --eo-space-xl: 24px;
    --eo-space-2xl: 32px;
    --eo-space-3xl: 48px;

    --eo-radius-sm: 4px;
    --eo-radius: 6px;
    --eo-radius-lg: 8px;
    --eo-radius-xl: 10px;
    --eo-radius-pill: 999px;

    /* Bootstrap's own parts follow the same corners */
    --bs-border-radius: var(--eo-radius);
    --bs-border-radius-sm: var(--eo-radius-sm);
    --bs-border-radius-lg: var(--eo-radius-lg);
    --bs-border-radius-xl: var(--eo-radius-xl);
    --bs-border-radius-xxl: var(--eo-radius-xl);

    --eo-control-h: 40px;
    --eo-control-h-sm: 36px;
    --eo-control-h-lg: 44px;
    --eo-control-h-xl: 52px;
    --eo-row-h: 44px;
    --eo-icon-box: 40px;

    --eo-sidebar-w: 260px;
    --eo-topbar-h: 60px;
    --eo-pagehead-h: 50px;
    --eo-content-max: 1600px;

    --eo-shadow-float: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 8px 20px -4px rgba(0, 0, 0, 0.1);
    --eo-shadow-label: 0 16px 32px -12px rgba(0, 0, 0, 0.5);
    --eo-shadow-button: 0 8px 16px -8px rgba(4, 120, 87, 0.6);
    --eo-focus: 0 0 0 3px var(--eo-brand-20);

    --eo-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --eo-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --eo-dur: 150ms;
    --eo-dur-slow: 250ms;

    --eo-z-formbar: 10;
    --eo-z-sidebar: 1030;
    --eo-z-topbar: 1020;
    --eo-z-bulkbar: 1040;
    --eo-z-popover: 1080;
    --eo-z-toast: 1090;

    --eo-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* phones keep larger tap targets */
@media (max-width: 767.98px) {
    :root {
        --eo-control-h: 44px;
        --eo-control-h-sm: 40px;
        --eo-control-h-lg: 48px;
    }
}

/* ========================================================================== */
/* BASE AND TYPOGRAPHY */
/* ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--eo-font);
    font-size: var(--eo-fs-base);
    line-height: var(--eo-lh-normal);
    color: var(--eo-text);
    background: var(--eo-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--eo-font);
    font-weight: var(--eo-fw-semibold);
    line-height: var(--eo-lh-tight);
    color: var(--eo-text);
}

p {
    margin: 0;
}

a {
    color: var(--eo-brand);
    text-decoration: none;
}

a:hover {
    color: var(--eo-brand-strong);
}

:focus-visible {
    outline: 2px solid var(--eo-brand);
    outline-offset: 1px;
}

::selection {
    background: var(--eo-brand-20);
}

.svg-icon {
    width: 1.125em;
    height: 1.125em;
    flex-shrink: 0;
    vertical-align: -0.2em;
}

.eo-h1 { font-size: var(--eo-fs-2xl); }
.eo-h2 { font-size: var(--eo-fs-xl); }
.eo-h3 { font-size: var(--eo-fs-lg); }
.eo-text-sm { font-size: var(--eo-fs-md); }
.eo-text-xs { font-size: var(--eo-fs-sm); }
.eo-muted { color: var(--eo-text-muted); }
.eo-subtle { color: var(--eo-text-subtle); }
.eo-strong { font-weight: var(--eo-fw-semibold); }
.eo-money { font-variant-numeric: tabular-nums; }
.eo-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eo-nowrap { white-space: nowrap; }
.eo-truncate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eo-break { overflow-wrap: anywhere; }
.eo-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.eo-code { font-family: Consolas, 'Courier New', monospace; font-size: var(--eo-fs-sm); }

.eo-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--eo-space-xs);
    font-family: Consolas, 'Courier New', monospace;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--eo-radius-sm);
}

.eo-tone-success { color: var(--eo-success-strong); }
.eo-tone-warning { color: var(--eo-warning-strong); }
.eo-tone-danger { color: var(--eo-danger-strong); }
.eo-tone-neutral { color: var(--eo-neutral); }

/* ========================================================================== */
/* LAYOUT HELPERS */
/* ========================================================================== */

.eo-stack { display: flex; flex-direction: column; gap: var(--eo-space-base); }
.eo-stack--sm { gap: var(--eo-space-sm); }
.eo-stack--lg { gap: var(--eo-space-base); }
.eo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eo-space-sm); }
.eo-row--between { justify-content: space-between; }
.eo-row--end { justify-content: flex-end; }
.eo-row--bottom { align-items: flex-end; }
.eo-grow { flex: 1 1 auto; min-width: 0; }

.eo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--eo-space-base);
}

@media (min-width: 768px) {
    .eo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .eo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eo-span-2 { grid-column: span 2; }
}

@media (min-width: 1200px) {
    .eo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.eo-divider {
    height: 1px;
    margin: var(--eo-space-base) 0;
    background: var(--eo-border);
    border: 0;
}

/* ========================================================================== */
/* APP SHELL */
/* ========================================================================== */

.eo-shell {
    display: flex;
    min-height: 100vh;
}

.eo-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--eo-bg);
}

/* the page body is a column: every top-level block (page head, toolbar, cards, grids, tables) gets the same gap */
.eo-content {
    --eo-content-pad-y: var(--eo-space-xl);
    --eo-content-pad-x: var(--eo-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
    flex: 1 0 auto;
    width: 100%;
    padding: var(--eo-content-pad-y) var(--eo-content-pad-x);
}

/* the gap replaces the blocks' own vertical margins; min-width lets wide tables scroll instead of stretching the page */
main.eo-content > *,
main .eo-setpage > * {
    flex: 0 0 auto;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .eo-content {
        --eo-content-pad-y: var(--eo-space-base);
        --eo-content-pad-x: var(--eo-space-md);
    }
}

/* ========================================================================== */
/* SIDEBAR */
/* ========================================================================== */

/* a dark navy rail, as in TimoDesk: the menu reads as chrome and the white work area stays calm */
.eo-sidebar {
    position: sticky;
    top: 0;
    z-index: var(--eo-z-sidebar);
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--eo-sidebar-w);
    width: var(--eo-sidebar-w);
    height: 100vh;
    height: 100dvh;
    color: var(--eo-side-text);
    background: var(--eo-side-bg);
    border-right: 1px solid var(--eo-side-line);
    transition: width var(--eo-dur-slow) var(--eo-ease), flex-basis var(--eo-dur-slow) var(--eo-ease), transform var(--eo-dur-slow) var(--eo-ease);
}

.eo-sidebar__head {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    height: var(--eo-topbar-h);
    padding: 0 var(--eo-space-md) 0 var(--eo-space-lg);
    flex-shrink: 0;
    border-bottom: 1px solid var(--eo-side-line);
}

.eo-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-bold);
    letter-spacing: -0.01em;
    color: var(--eo-side-text-strong);
    white-space: nowrap;
}

.eo-sidebar__brand:hover {
    color: var(--eo-side-text-strong);
    text-decoration: none;
}

.eo-sidebar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--eo-on-brand);
    background: var(--eo-brand);
    border-radius: var(--eo-radius-lg);
}

.eo-sidebar__logo .svg-icon {
    width: 16px;
    height: 16px;
}

/* logo and favicon from super admin settings */
.eo-sidebar__mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--eo-radius-lg);
}

.eo-brand-logo {
    display: block;
    width: auto;
    max-width: 170px;
    height: auto;
    max-height: 30px;
}

.eo-sidebar .eo-sidebar__close {
    display: none;
    margin-left: auto;
    color: var(--eo-side-text);
}

/* the light-page rule greys a ghost button's icon; on navy the icon follows the button's own colour */
.eo-sidebar .eo-btn--ghost .svg-icon {
    color: inherit;
}

.eo-sidebar .eo-sidebar__close:hover {
    color: var(--eo-side-text-strong);
    background: var(--eo-side-hover);
}

/* the shop being worked on: one small row under the brand */
.eo-store-switch {
    display: flex;
    align-items: center;
    gap: var(--eo-space-2xs);
    padding: var(--eo-space-sm) var(--eo-space-md);
    flex-shrink: 0;
    border-bottom: 1px solid var(--eo-side-line);
}

.eo-store-switch > .dropdown,
.eo-store-switch > .eo-store-switch__btn {
    flex: 1 1 auto;
    min-width: 0;
}

.eo-store-switch__btn {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    width: 100%;
    height: 40px;
    padding: 0 var(--eo-space-sm) 0 6px;
    color: var(--eo-side-text-strong);
    text-align: left;
    background: var(--eo-side-hover);
    border: 1px solid transparent;
    border-radius: var(--eo-radius);
    transition: background var(--eo-dur) var(--eo-ease), border-color var(--eo-dur) var(--eo-ease);
}

.eo-store-switch__btn.is-static {
    background: transparent;
    border-color: transparent;
}

button.eo-store-switch__btn:hover,
.eo-store-switch__btn[aria-expanded="true"] {
    background: var(--eo-side-active-weak);
    border-color: var(--eo-side-line-strong);
}

.eo-store-switch .eo-store-switch__config {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--eo-side-text);
}

.eo-store-switch .eo-store-switch__config:hover {
    color: var(--eo-side-text-strong);
    background: var(--eo-side-hover);
}

.eo-store-switch__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    color: #fff;
    background: var(--eo-brand);
    border-radius: var(--eo-radius-sm);
}

/* inside the white dropdown the tile goes back to the light brand tint */
.dropdown-menu .eo-store-switch__mark {
    color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-store-switch__mark--sm {
    width: 26px;
    height: 26px;
    font-size: var(--eo-fs-md);
}

.eo-store-switch__mark .svg-icon {
    width: 14px;
    height: 14px;
}

.dropdown-item .eo-store-switch__mark .svg-icon {
    color: var(--eo-brand);
}

.eo-store-switch__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-store-switch__caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--eo-side-muted);
}

/* the shop list: a small label, every shop as the same tile and name, a tick on the one in use, settings at the foot */
.eo-store-switch__menu {
    width: 100%;
    min-width: 220px;
    max-width: calc(100vw - 2 * var(--eo-space-base));
    margin-top: 6px !important;
    padding: var(--eo-space-xs);
}

.eo-store-switch__label {
    margin: 0;
    padding: 4px 8px 6px;
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-subtle);
}

.eo-store-switch__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.eo-store-switch__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 38px;
    padding: 0 8px 0 6px;
    font-family: inherit;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--eo-radius);
    cursor: pointer;
}

.eo-store-switch__row:hover {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

.eo-store-switch__row.is-active {
    background: var(--eo-bg-hover);
}

/* one tile for every shop: grey letter, green when it is the shop in use */
.eo-store-switch__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
    background: var(--eo-bg-hover);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-sm);
}

.eo-store-switch__tile .svg-icon {
    width: 15px;
    height: 15px;
}

.eo-store-switch__row.is-active .eo-store-switch__tile {
    color: #fff;
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

.eo-store-switch__tile.is-plain {
    background: none;
    border-color: transparent;
}

.eo-store-switch__item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-store-switch__row .eo-store-switch__check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--eo-brand);
    visibility: hidden;
}

.eo-store-switch__row.is-active .eo-store-switch__check {
    visibility: visible;
}

.eo-store-switch__foot {
    margin-top: var(--eo-space-xs);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
    border-top: 1px solid var(--eo-border);
    border-radius: 0 0 var(--eo-radius) var(--eo-radius);
}

.eo-sidebar__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--eo-space-sm) var(--eo-space-md) var(--eo-space-base);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.eo-sidebar__body:hover {
    scrollbar-color: var(--eo-side-line-strong) transparent;
}

/* settings and help close the list and scroll with it */
.eo-sidebar__foot {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    margin-top: var(--eo-space-base);
    padding-top: var(--eo-space-sm);
    border-top: 1px solid var(--eo-side-line);
}

.eo-nav__group + .eo-nav__group {
    margin-top: var(--eo-space-xs);
}

.eo-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* small, quiet section names: they group the menu without competing with it */
.eo-nav__heading {
    margin: 0;
    padding: var(--eo-space-base) var(--eo-space-md) var(--eo-space-xs);
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-semibold);
    letter-spacing: 0.02em;
    color: var(--eo-side-muted);
    white-space: nowrap;
}

.eo-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: var(--eo-space-xs) var(--eo-space-md);
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-side-text);
    text-align: left;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: var(--eo-radius);
    transition: background var(--eo-dur) var(--eo-ease), color var(--eo-dur) var(--eo-ease);
}

.eo-nav__link .svg-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--eo-side-icon);
    transition: color var(--eo-dur) var(--eo-ease);
}

.eo-nav__link:hover {
    color: var(--eo-side-text-strong);
    text-decoration: none;
    background: var(--eo-side-hover);
}

.eo-nav__link:hover .svg-icon {
    color: var(--eo-side-text-strong);
}

.eo-nav__link:focus-visible {
    outline: 2px solid var(--eo-side-active-icon);
    outline-offset: -2px;
    box-shadow: none;
}

/* the page you are on: an emerald-tinted pill with a thin bar on the left edge */
.eo-nav__link.is-active {
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-side-text-strong);
    background: var(--eo-side-active);
}

.eo-nav__link.is-active .svg-icon {
    color: var(--eo-side-active-icon);
}

a.eo-nav__link.is-active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: calc(-1 * var(--eo-space-md));
    width: 3px;
    background: var(--eo-side-active-icon);
    border-radius: var(--eo-radius-pill);
}

/* an open group's own row stays quiet; the highlight sits on the page inside it */
button.eo-nav__link.is-active {
    color: var(--eo-side-text-strong);
    background: transparent;
}

button.eo-nav__link.is-active:hover {
    background: var(--eo-side-hover);
}

.eo-nav__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eo-nav__count {
    min-width: 20px;
    padding: 0 6px;
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-semibold);
    line-height: 18px;
    text-align: center;
    color: var(--eo-side-text-strong);
    background: var(--eo-side-line-strong);
    border: 0;
    border-radius: var(--eo-radius-pill);
}

.eo-nav__caret {
    width: 14px;
    height: 14px;
    color: var(--eo-side-muted);
    transition: transform var(--eo-dur) var(--eo-ease);
}

.eo-nav__link .eo-nav__caret {
    width: 14px;
    height: 14px;
    color: var(--eo-side-muted);
}

.eo-nav__link[aria-expanded="true"] .eo-nav__caret {
    transform: rotate(180deg);
}

.eo-nav__sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 var(--eo-space-xs) 20px;
    padding-left: var(--eo-space-sm);
    border-left: 1px solid var(--eo-side-line);
}

.eo-nav__sub .eo-nav__link {
    min-height: 32px;
    padding: var(--eo-space-2xs) var(--eo-space-sm);
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-normal);
}

.eo-nav__sub a.eo-nav__link.is-active {
    font-weight: var(--eo-fw-medium);
}

/* a child row sits beside the group's line, so its bar would float in the gap */
.eo-nav__sub a.eo-nav__link.is-active::before {
    display: none;
}

.eo-nav__heading--toggle {
    width: 100%;
    min-height: 0;
    padding: var(--eo-space-base) var(--eo-space-md) var(--eo-space-xs);
    background: none;
    border: 0;
}

.eo-nav__heading--toggle:hover {
    color: var(--eo-side-text);
    background: none;
}

.eo-nav__heading--toggle > span {
    flex: 1;
    text-align: left;
}

.eo-nav__more {
    width: 100%;
    color: var(--eo-side-muted);
    background: none;
    border: 0;
}

.eo-nav__more-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.eo-nav__more-list.collapse:not(.show) {
    display: none;
}

/* the signed-in person at the bottom of the rail, as in TimoDesk */
.eo-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--eo-space-2xs);
    flex-shrink: 0;
    padding: var(--eo-space-sm) var(--eo-space-md);
    border-top: 1px solid var(--eo-side-line);
}

.eo-sidebar__user-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px;
    color: var(--eo-side-text-strong);
    border-radius: var(--eo-radius-lg);
    transition: background var(--eo-dur) var(--eo-ease);
}

.eo-sidebar__user-link:hover {
    color: var(--eo-side-text-strong);
    text-decoration: none;
    background: var(--eo-side-hover);
}

.eo-sidebar__user .eo-avatar {
    width: 32px;
    height: 32px;
    color: var(--eo-side-active-icon);
    background: var(--eo-side-active);
    border-color: transparent;
}

.eo-sidebar__user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.eo-sidebar__user-name {
    overflow: hidden;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-sidebar__user-role {
    overflow: hidden;
    font-size: var(--eo-fs-xs);
    color: var(--eo-side-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-sidebar__user form {
    flex-shrink: 0;
}

.eo-sidebar .eo-sidebar__logout {
    color: var(--eo-side-text);
}

.eo-sidebar .eo-sidebar__logout:hover {
    color: var(--eo-danger-on-dark);
    background: var(--eo-danger-25);
}

.eo-sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .eo-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(300px, 86vw);
        transform: translateX(-100%);
        box-shadow: none;
    }

    .eo-shell.is-nav-open .eo-sidebar {
        transform: translateX(0);
        box-shadow: var(--eo-shadow-float);
    }

    .eo-shell.is-nav-open .eo-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--eo-z-sidebar) - 1);
        display: block;
        background: var(--eo-overlay);
    }

    .eo-sidebar .eo-sidebar__close {
        display: inline-flex;
    }

    .eo-nav__link {
        min-height: var(--eo-control-h-lg);
    }
}

/* ========================================================================== */
/* TOP BAR */
/* ========================================================================== */

/* thin and white: the page name on the left, only the essentials on the right */
.eo-topbar {
    position: sticky;
    top: 0;
    z-index: var(--eo-z-topbar);
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    height: var(--eo-topbar-h);
    padding: 0 var(--eo-space-xl);
    background: var(--eo-surface);
    border-bottom: 1px solid var(--eo-border);
}

@media (min-width: 992px) {
    .eo-topbar .eo-topbar__toggle {
        display: none;
    }
}

.eo-topbar__toggle {
    margin-left: calc(-1 * var(--eo-space-sm));
    color: var(--eo-text-muted);
}

.eo-topbar__title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--eo-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the admin bar keeps its wide search box */
.eo-topbar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 420px;
    min-width: 0;
}

.eo-topbar__search > .svg-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--eo-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.eo-topbar__search .eo-control {
    height: var(--eo-control-h);
    padding-left: 38px;
    font-size: var(--eo-fs-md);
    text-overflow: ellipsis;
    background-color: var(--eo-surface-2);
    border-color: var(--eo-border);
    border-radius: var(--eo-radius);
    transition: border-color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.eo-topbar__search .eo-control::placeholder {
    color: var(--eo-text-subtle);
}

.eo-topbar__search .eo-control:hover {
    background-color: var(--eo-surface);
    border-color: var(--eo-border-strong);
}

.eo-topbar__search .eo-control:focus {
    background-color: var(--eo-surface);
    border-color: var(--eo-brand);
}

.eo-topbar .eo-topbar__search-close,
.eo-topbar .eo-topbar__search-open {
    display: none;
}

.eo-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
    flex-shrink: 0;
    margin-left: auto;
}

/* every quiet top bar button is the same grey square; only the main action is filled */
.eo-topbar__actions > .eo-btn--ghost,
.eo-topbar__actions > .dropdown > .eo-btn--ghost,
.eo-topbar__actions .eo-topbar__icon {
    color: var(--eo-text-muted);
}

.eo-topbar__actions > .eo-btn--ghost:hover,
.eo-topbar__actions > .dropdown > .eo-btn--ghost:hover,
.eo-topbar__actions > .dropdown > .eo-btn--ghost[aria-expanded="true"] {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

.eo-topbar__actions .eo-btn--ghost .svg-icon {
    width: 18px;
    height: 18px;
}

.eo-topbar__new {
    margin-right: var(--eo-space-xs);
}

/* SMS and call credit as one icon; a red dot says a balance is under the owner's alert */
.eo-topbar__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--eo-danger);
    border: 2px solid var(--eo-surface);
    border-radius: 50%;
}

/* the shop name keeps its room, so labels give way on a narrow screen */
@media (max-width: 1199.98px) {
    .eo-topbar__kbd,
    .eo-topbar__label {
        display: none;
    }
}

/* top bar quick actions: a short list, one icon colour, one plain line each */
.eo-quick {
    --bs-dropdown-min-width: 0;
    width: 300px;
    max-width: calc(100vw - 2 * var(--eo-space-base));
    padding: var(--eo-space-xs);
}

.eo-quick__title {
    margin: 0;
    padding: var(--eo-space-sm) var(--eo-space-sm) var(--eo-space-xs);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
}

.eo-quick__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}

.eo-quick__item {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    min-width: 0;
    padding: var(--eo-space-sm);
    color: var(--eo-text);
    border-radius: var(--eo-radius);
}

.eo-quick__item:hover,
.eo-quick__item:focus-visible {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-bg-hover);
}

.eo-quick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-radius: var(--eo-radius-lg);
}

.eo-quick__icon .svg-icon {
    width: 16px;
    height: 16px;
}

.eo-quick__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eo-quick__name {
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-medium);
    line-height: 1.35;
}

.eo-quick__hint {
    overflow: hidden;
    font-size: var(--eo-fs-sm);
    line-height: 1.35;
    color: var(--eo-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-topbar__divider {
    width: 1px;
    height: 24px;
    margin: 0 var(--eo-space-xs);
    background: var(--eo-border);
}

.eo-topbar__user {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    height: var(--eo-control-h-lg);
    padding: var(--eo-space-xs) var(--eo-space-sm) var(--eo-space-xs) var(--eo-space-xs);
    color: var(--eo-text);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--eo-radius-pill);
    transition: background var(--eo-dur) var(--eo-ease);
}

.eo-topbar__user:hover,
.eo-topbar__user[aria-expanded="true"] {
    background: var(--eo-bg-hover);
}

.eo-topbar__user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 140px;
    line-height: var(--eo-lh-tight);
}

.eo-topbar__user-name {
    overflow: hidden;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-topbar__user-role {
    overflow: hidden;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-subtle);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-topbar__user .eo-avatar {
    width: 32px;
    height: 32px;
}

.eo-topbar__user-caret,
.eo-topbar__user > .svg-icon:last-child {
    width: 14px;
    height: 14px;
    color: var(--eo-text-subtle);
    transition: transform var(--eo-dur) var(--eo-ease);
}

.eo-topbar__user[aria-expanded="true"] .eo-topbar__user-caret {
    transform: rotate(180deg);
}

.eo-user-menu {
    min-width: 240px;
}

.eo-user-menu__head {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-sm) var(--eo-space-md) var(--eo-space-md);
    margin-bottom: var(--eo-space-xs);
    border-bottom: 1px solid var(--eo-border);
}

.eo-user-menu__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--eo-lh-tight);
    gap: 2px;
}

.eo-user-menu__text strong {
    font-size: var(--eo-fs-base);
}

.eo-user-menu__text .eo-muted {
    font-size: var(--eo-fs-sm);
}

.eo-bell {
    position: relative;
}

/* scoped to .eo-bell so the general .eo-count rule further down cannot turn it back into a grey pill over the icon */
.eo-bell .eo-bell__count {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 10px;
    font-weight: var(--eo-fw-semibold);
    line-height: 1;
    box-shadow: 0 0 0 2px var(--eo-surface);
    color: var(--eo-on-brand);
    background: var(--eo-danger-strong);
}

.eo-bell__menu {
    width: 360px;
    max-width: calc(100vw - 2 * var(--eo-space-base));
    padding: 0;
    overflow: hidden;
}

.eo-bell__head {
    padding: var(--eo-space-md) var(--eo-space-base);
    border-bottom: 1px solid var(--eo-border);
}

/* each row is a button (it marks the notice read), and buttons centre their text unless told otherwise;
   scoped to the menu so the dropdown-item rules further down cannot centre it again */
.eo-bell__menu .eo-bell__item {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    gap: 2px;
    padding: var(--eo-space-md) var(--eo-space-base);
    white-space: normal;
    border-bottom: 1px solid var(--eo-border);
}

.eo-bell__item .eo-cell-wrap {
    min-width: 0;
    max-width: none;
}

.eo-bell__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-2xl) var(--eo-space-base);
    text-align: center;
}

.eo-bell__empty .svg-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-radius: 50%;
}

.eo-bell__all {
    justify-content: center;
    padding: var(--eo-space-md);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-brand);
    background: var(--eo-surface-2);
}

.eo-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-bold);
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border: 1px solid var(--eo-brand-20);
    border-radius: 50%;
}

.eo-avatar--lg {
    width: 42px;
    height: 42px;
    font-size: var(--eo-fs-lg);
}

@media (max-width: 991.98px) {
    .eo-topbar__user-text,
    .eo-topbar__user-caret,
    .eo-topbar__user > .svg-icon:last-child {
        display: none;
    }

    .eo-topbar__user {
        padding: var(--eo-space-2xs);
    }
}

@media (max-width: 767.98px) {
    .eo-topbar {
        gap: var(--eo-space-xs);
        padding: 0 var(--eo-space-sm);
    }

    .eo-topbar__toggle {
        margin-left: 0;
    }

    .eo-topbar__title {
        flex: 1 1 auto;
        font-size: var(--eo-fs-lg);
    }

    .eo-topbar__actions {
        gap: var(--eo-space-2xs);
    }

    .eo-topbar__search {
        display: none;
    }

    .eo-topbar .eo-topbar__search-open {
        display: inline-flex;
    }

    /* phone: the search opens over the whole bar */
    .eo-topbar.is-searching .eo-topbar__search {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        gap: var(--eo-space-xs);
        padding: 0 var(--eo-space-sm);
        background: var(--eo-surface);
    }

    .eo-topbar.is-searching .eo-topbar__search > .svg-icon {
        left: calc(var(--eo-space-sm) + 12px);
    }

    .eo-topbar.is-searching .eo-topbar__search .eo-topbar__search-close {
        display: inline-flex;
    }

    .eo-topbar__label,
    .eo-topbar__divider {
        display: none;
    }

    /* phone: every top bar action is one square tap target, its name is in the title */
    .eo-topbar .eo-topbar__action {
        width: var(--eo-control-h);
        height: var(--eo-control-h);
        padding: 0;
        flex-shrink: 0;
    }

    .eo-topbar__new {
        margin-right: 0;
    }
}

/* a phone keeps search, the main action, AI, the bell and the account; quick actions and credit are in the sidebar menu */
@media (max-width: 575.98px) {
    .eo-topbar .eo-topbar__extra {
        display: none;
    }
}

/* ========================================================================== */
/* PAGE HEAD AND BREADCRUMB */
/* ========================================================================== */

.eo-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-lg);
    min-height: var(--eo-pagehead-h);
    margin-bottom: var(--eo-space-lg);
}

/* the top bar already shows the page name (TimoDesk): the head keeps only its one plain line and the main action */
.eo-pagehead--echo {
    min-height: var(--eo-control-h);
}

.eo-pagehead--echo .eo-pagehead__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.eo-pagehead--echo .eo-pagehead__help {
    margin: 0;
}

/* nothing left to show: the head steps out of the page's gap but stays for screen readers */
.eo-pagehead--echo.is-bare {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.eo-pagehead__text {
    flex: 1 1 auto;
    min-width: 0;
}

.eo-pagehead__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-pagehead__meta {
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
}

/* on its own, meta is often a full sentence, so it reads as plain help text */
.eo-pagehead__meta:only-child {
    font-weight: var(--eo-fw-normal);
    color: inherit;
}

.eo-pagehead__help > span + .eo-pagehead__meta::before {
    content: "\00B7";
    margin: 0 var(--eo-space-xs);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-subtle);
}

.eo-pagehead__help {
    min-height: 21px;
    margin: 2px 0 0;
    overflow: hidden;
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-pagehead__help:empty {
    display: none;
}

.eo-pagehead__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--eo-space-sm);
}

/* one height for every control in the page head: a small dropdown beside the main button looked out of line */
.eo-pagehead__actions .eo-btn {
    height: var(--eo-control-h);
    font-size: var(--eo-fs-base);
}

.eo-pagehead__actions .eo-btn--icon {
    width: var(--eo-control-h);
}

/* a risky action (cancel, mark lost) wears the same frame as its neighbours; only its red words set it apart */
.eo-pagehead__actions .eo-btn--danger-ghost {
    background: var(--eo-surface);
    border-color: var(--eo-border);
}

.eo-pagehead__actions .eo-btn--danger-ghost:hover {
    background: var(--eo-danger-10);
    border-color: var(--eo-danger-strong);
}

.eo-pagehead__back {
    max-width: 200px;
}

/* two classes, so it beats the plain .eo-btn gap declared further down */
.eo-btn.eo-pagehead__back {
    gap: 2px;
}

/* Bangla text sits high on its headline, so the arrow is lifted to match it and drawn in the text colour */
.eo-pagehead__back .svg-icon {
    margin-left: -4px;
    color: currentColor;
    stroke-width: 2.5;
    transform: translateY(-3px);
}

/* a status beside page buttons: the button is the frame, the badge inside it stays plain */
.eo-status-btn .eo-badge {
    padding: 0;
    font-size: inherit;
    background: none;
    border: 0;
}

/* a long name ends in …; the line box is tall enough that Bangla signs above and below (শি, ু) are not cut by the clip */
.eo-pagehead__back span {
    overflow: hidden;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .eo-pagehead { align-items: stretch; flex-direction: column; gap: var(--eo-space-sm); }
    .eo-pagehead__actions { flex-wrap: wrap; }
    .eo-pagehead__actions .eo-btn--primary { flex: 1 1 auto; }
    .eo-pagehead__title,
    .eo-pagehead__help { white-space: normal; }
}

/* ========================================================================== */
/* BUTTONS */
/* ========================================================================== */

.eo-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--eo-space-sm);
    height: var(--eo-control-h);
    padding: 0 var(--eo-space-md);
    font-family: inherit;
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-medium);
    line-height: 1;
    color: var(--eo-text);
    white-space: nowrap;
    cursor: pointer;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    transition: background-color var(--eo-dur) var(--eo-ease), border-color var(--eo-dur) var(--eo-ease), color var(--eo-dur) var(--eo-ease);
    user-select: none;
}

.eo-btn:hover {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-bg-hover);
}

.eo-btn:focus-visible {
    outline: none;
    border-color: var(--eo-brand);
    box-shadow: var(--eo-focus);
}

.eo-btn .svg-icon {
    width: 16px;
    height: 16px;
}

/* Bangla ink sits about 0.15em above the line box middle (tall head line, short tail), so an icon beside words
   is lifted by the same amount to look level with them; an icon-only button keeps it centred */
.eo-btn:not(.eo-btn--icon) > .svg-icon,
.dropdown-item > .svg-icon,
.eo-tab > .svg-icon {
    transform: translateY(-0.15em);
}

/* a plain button is quiet: dark grey words, a muted icon; only the main action is filled.
   :where keeps these at one class, so any module rule still wins */
.eo-btn:where(:not([class*="eo-btn--"])),
.eo-btn--sm:where(:not(.eo-btn--primary, .eo-btn--accent, .eo-btn--danger, .eo-btn--ghost, .eo-btn--danger-ghost)) {
    color: var(--eo-text-2);
}

.eo-btn:where(:not([class*="eo-btn--"])) :where(.svg-icon),
.eo-btn--ghost :where(.svg-icon) {
    color: var(--eo-text-muted);
}

.eo-btn:where(:not([class*="eo-btn--"])):hover :where(.svg-icon),
.eo-btn--ghost:hover :where(.svg-icon) {
    color: var(--eo-text);
}

.eo-btn:disabled,
.eo-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.eo-btn--primary {
    color: var(--eo-on-brand);
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

.eo-btn--primary:hover {
    color: var(--eo-on-brand);
    background: var(--eo-brand-strong);
    border-color: var(--eo-brand-strong);
}

.eo-btn--accent {
    color: var(--eo-on-brand);
    background: var(--eo-accent);
    border-color: var(--eo-accent);
}

.eo-btn--accent:hover {
    color: var(--eo-on-brand);
    background: color-mix(in srgb, var(--eo-accent) 85%, #000);
}

.eo-btn--ghost {
    background: transparent;
    border-color: transparent;
}

.eo-btn--ghost:hover {
    background: var(--eo-bg-hover);
}

.eo-btn--danger {
    color: var(--eo-on-brand);
    background: var(--eo-danger-strong);
    border-color: var(--eo-danger-strong);
}

.eo-btn--danger:hover {
    color: var(--eo-on-brand);
    background: color-mix(in srgb, var(--eo-danger-strong) 85%, #000);
}

.eo-btn--danger-ghost {
    color: var(--eo-danger-strong);
    background: transparent;
    border-color: transparent;
}

.eo-btn--danger-ghost:hover {
    color: var(--eo-danger-strong);
    background: var(--eo-danger-10);
}

.eo-btn--sm {
    height: var(--eo-control-h-sm);
    gap: 6px;
    padding: 0 10px;
    font-size: var(--eo-fs-md);
}

.eo-btn--lg {
    height: var(--eo-control-h-lg);
    padding: 0 var(--eo-space-base);
}

.eo-btn--icon {
    width: var(--eo-control-h);
    padding: 0;
}

.eo-btn--icon.eo-btn--sm {
    width: var(--eo-control-h-sm);
}

.eo-btn--block {
    width: 100%;
}

.eo-btn.is-loading {
    color: transparent;
    pointer-events: none;
}

.eo-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--eo-text-muted);
    border-right-color: transparent;
    border-radius: 50%;
    animation: eo-spin 0.7s linear infinite;
}

.eo-btn--primary.is-loading::after,
.eo-btn--danger.is-loading::after,
.eo-btn--accent.is-loading::after {
    border-color: var(--eo-on-brand);
    border-right-color: transparent;
}

.eo-btn-group {
    display: inline-flex;
}

.eo-btn-group > .eo-btn:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.eo-btn-group > .eo-btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.eo-link-btn {
    padding: 0;
    font: inherit;
    color: var(--eo-brand);
    background: none;
    border: 0;
    cursor: pointer;
}

.eo-link-btn:hover {
    color: var(--eo-brand-strong);
}

@media (max-width: 767.98px) {
    .eo-btn { height: var(--eo-control-h-lg); }
    .eo-btn--sm { height: var(--eo-control-h); }
    .eo-btn--icon { width: var(--eo-control-h-lg); }
    .eo-btn--icon.eo-btn--sm { width: var(--eo-control-h); }
}

/* ========================================================================== */
/* FORMS */
/* ========================================================================== */

.eo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.eo-label {
    margin: 0;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
}

.eo-label__req {
    margin-left: 2px;
    color: var(--eo-danger-strong);
}

.eo-label__opt {
    margin-left: var(--eo-space-xs);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-subtle);
}

.eo-control {
    display: block;
    width: 100%;
    height: var(--eo-control-h);
    padding: 0 var(--eo-space-md);
    font-family: inherit;
    font-size: var(--eo-fs-base);
    line-height: var(--eo-lh-normal);
    color: var(--eo-text);
    background-color: var(--eo-surface);
    border: 1px solid var(--eo-border-strong);
    border-radius: var(--eo-radius);
    transition: border-color var(--eo-dur) var(--eo-ease), box-shadow var(--eo-dur) var(--eo-ease);
    appearance: none;
}

.eo-control::placeholder {
    color: var(--eo-text-subtle);
}

.eo-control:hover {
    border-color: var(--eo-text-subtle);
}

.eo-control:focus {
    outline: none;
    border-color: var(--eo-brand);
    box-shadow: var(--eo-focus);
}

.eo-control:disabled,
.eo-control[readonly] {
    color: var(--eo-text-muted);
    background-color: var(--eo-bg);
    cursor: not-allowed;
}

.eo-control--sm {
    height: var(--eo-control-h-sm);
    padding: 0 10px;
    font-size: var(--eo-fs-md);
}

select.eo-control {
    padding-right: 30px;
    background-image: var(--eo-caret);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    cursor: pointer;
}

select.eo-control[multiple] {
    height: auto;
    min-height: 96px;
    padding: var(--eo-space-xs);
    background-image: none;
}

textarea.eo-control {
    height: auto;
    min-height: 84px;
    padding: var(--eo-space-sm) var(--eo-space-md);
    resize: vertical;
}

.eo-control--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.eo-help {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-error {
    display: none;
    font-size: var(--eo-fs-sm);
    color: var(--eo-danger-strong);
}

.eo-field.is-invalid .eo-error,
.eo-error.is-shown {
    display: block;
}

.eo-field.is-invalid .eo-control,
.eo-control.is-invalid {
    border-color: var(--eo-danger-strong);
}

.eo-field.is-invalid .eo-control:focus,
.eo-control.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--eo-danger-10);
}

.eo-field.is-invalid .eo-help {
    display: none;
}

.eo-field.is-valid .eo-control {
    border-color: var(--eo-success-strong);
}

.eo-field__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--eo-space-sm);
}

.eo-counter {
    margin-left: auto;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-subtle);
    white-space: nowrap;
}

.eo-field__foot {
    display: flex;
    align-items: flex-start;
    gap: var(--eo-space-md);
}

.eo-field__foot .eo-help {
    margin: 0;
}

.eo-counter.is-over {
    color: var(--eo-danger-strong);
}

.eo-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.eo-input-group > .eo-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* a picked line's quantity with its unit in one box (stock in) */
.eo-line-qty {
    display: inline-flex;
    width: 150px;
}

.eo-line-qty > .eo-input-group__addon {
    font-size: var(--eo-fs-sm);
    height: var(--eo-control-h-sm);
}

.eo-input-group__addon {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: var(--eo-fs-base);
    color: var(--eo-text-muted);
    white-space: nowrap;
    background: var(--eo-bg);
    border: 1px solid var(--eo-border-strong);
}

.eo-input-group > :first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.eo-input-group > :last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.eo-input-group > :not(:first-child):not(:last-child) {
    border-radius: 0;
}

.eo-input-group > .eo-input-group__addon:first-child {
    border-right: 0;
    border-radius: var(--eo-radius) 0 0 var(--eo-radius);
}

.eo-input-group > .eo-input-group__addon:last-child {
    border-left: 0;
    border-radius: 0 var(--eo-radius) var(--eo-radius) 0;
}

.eo-input-group > .eo-btn {
    height: auto;
}

.eo-input-group > .eo-btn:first-child {
    margin-right: -1px;
}

.eo-input-group > .eo-btn:last-child {
    margin-left: -1px;
}

.eo-field.is-invalid .eo-input-group__addon {
    border-color: var(--eo-danger-strong);
}

.eo-input-icon {
    position: relative;
}

.eo-input-icon > .svg-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    color: var(--eo-text-subtle);
    transform: translateY(-50%);
    pointer-events: none;
}

.eo-input-icon > .eo-control {
    padding-left: 34px;
}

/* desk "change products" modal: one line per product, quantity and remove on the right */
.eo-items-edit {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-items-edit:empty {
    display: none;
}

.eo-items-edit__row {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-sm) var(--eo-space-md);
}

.eo-items-edit__row + .eo-items-edit__row {
    border-top: 1px solid var(--eo-border);
}

.eo-items-edit__name {
    flex: 1 1 auto;
    min-width: 0;
}

.eo-items-edit__qty {
    flex: 0 0 auto;
    width: 84px;
    text-align: center;
}

.eo-desk-items-edit {
    margin-top: var(--eo-space-sm);
}

/* partial delivery form: one line per item, the count coming back on the right */
.eo-partial {
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-partial__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: var(--eo-space-sm) var(--eo-space-md);
}

.eo-partial__row + .eo-partial__row {
    border-top: 1px solid var(--eo-border);
}

.eo-partial__name {
    min-width: 0;
    font-size: var(--eo-fs-md);
}

.eo-partial__qty {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-partial__qty .eo-control {
    width: 72px;
    text-align: center;
}

/* order panel and order page: the buyer's details open for editing right under them */
.eo-contact-edit {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    margin-top: var(--eo-space-sm);
}

.eo-contact-edit .svg-icon {
    width: 14px;
    height: 14px;
}

.eo-contact-form {
    margin-top: var(--eo-space-md);
    padding-top: var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

/* password box: an eye button inside the right edge shows or hides what was typed */
.eo-password {
    position: relative;
}

.eo-password > .eo-control {
    padding-right: calc(var(--eo-control-h) + var(--eo-space-2xs));
}

.eo-password__toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--eo-control-h);
    height: 100%;
    padding: 0;
    color: var(--eo-text-subtle);
    background: none;
    border: 0;
    border-radius: 0 var(--eo-radius) var(--eo-radius) 0;
}

.eo-password__toggle:hover {
    color: var(--eo-text);
}

.eo-password__toggle:focus-visible {
    outline: 0;
    box-shadow: var(--eo-focus);
}

.eo-password__hide,
.eo-password__toggle[aria-pressed="true"] .eo-password__show {
    display: none;
}

.eo-password__toggle[aria-pressed="true"] .eo-password__hide {
    display: block;
}

.eo-qty .eo-control {
    width: 90px;
    flex: 0 1 90px;
}

.eo-qty .eo-btn {
    width: var(--eo-control-h);
    padding: 0;
}

.eo-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--eo-space-sm);
    margin: 0;
    font-size: var(--eo-fs-base);
    color: var(--eo-text);
    cursor: pointer;
}

.eo-check input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    accent-color: var(--eo-brand);
    cursor: pointer;
}

.eo-check__hint {
    display: block;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-switch input {
    position: relative;
    width: 34px;
    height: 20px;
    margin-top: 1px;
    background: var(--eo-text-subtle);
    border-radius: var(--eo-radius-pill);
    transition: background-color var(--eo-dur) var(--eo-ease);
    appearance: none;
}

.eo-switch input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--eo-surface);
    border-radius: 50%;
    transition: transform var(--eo-dur) var(--eo-ease);
}

.eo-switch input:checked {
    background: var(--eo-brand);
}

.eo-switch input:checked::after {
    transform: translateX(14px);
}

.eo-switch input:focus-visible {
    outline: none;
    box-shadow: var(--eo-focus);
}

/* x-status-dot: a record's status as a small dot and a word (TimoDesk status-dot); changing it is in the row's ⋯ menu */
.eo-status-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
    white-space: nowrap;
}

.eo-status-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    background: var(--eo-border-strong);
    border-radius: 50%;
}

.eo-status-dot--on {
    color: var(--eo-text);
}

.eo-status-dot--on::before {
    background: var(--eo-success);
}

/* a row's ⋯ menu (TimoDesk action-menu): the record's name on top, then its actions in groups split by a hairline */
.eo-action-menu > .eo-btn {
    width: 32px;
    height: 32px;
    color: var(--eo-text-muted);
    border-radius: var(--eo-radius);
}

.eo-action-menu > .eo-btn:hover,
.eo-action-menu > .eo-btn[aria-expanded="true"] {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

.eo-action-menu .dropdown-menu {
    width: 240px;
    max-width: calc(100vw - 2 * var(--eo-space-base));
    padding: 0;
    overflow: hidden;
    border-radius: var(--eo-radius-lg);
}

.eo-action-menu__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: var(--eo-surface-2);
    border-bottom: 1px solid var(--eo-border);
}

.eo-action-menu__name {
    overflow: hidden;
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-semibold);
    line-height: 1.4;
    color: var(--eo-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-action-menu__meta {
    overflow: hidden;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-action-menu__group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px;
}

.eo-action-menu__group + .eo-action-menu__group {
    border-top: 1px solid var(--eo-border);
}

.eo-action-menu .dropdown-item {
    gap: 10px;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    font-size: var(--eo-fs-sm-plus);
    color: var(--eo-text);
    border-radius: var(--eo-radius-sm);
}

.eo-action-menu .dropdown-item .svg-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--eo-text-muted);
}

.eo-action-menu .dropdown-item:hover {
    background: var(--eo-bg-hover);
}

.eo-action-menu .dropdown-item.is-danger,
.eo-action-menu .dropdown-item.is-danger .svg-icon {
    color: var(--eo-danger-strong);
}

.eo-action-menu .dropdown-item.is-danger:hover {
    background: var(--eo-danger-10);
}

/* switching something back on: the brand green, the danger item's opposite */
.eo-action-menu .dropdown-item.is-success,
.eo-action-menu .dropdown-item.is-success .svg-icon {
    color: var(--eo-brand);
}

.eo-action-menu .dropdown-item.is-success:hover {
    background: var(--eo-brand-10);
}

.eo-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--eo-space-sm);
    padding-top: var(--eo-space-base);
    margin-top: var(--eo-space-base);
    border-top: 1px solid var(--eo-border);
}

/* under stacked settings sections the buttons sit on the page itself: no line across the grey */
.eo-section ~ .eo-form-actions {
    padding-top: 0;
    border-top: 0;
}

.eo-fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

.eo-fieldset__title {
    margin-bottom: var(--eo-space-md);
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

@media (max-width: 767.98px) {
    .eo-control { height: var(--eo-control-h-lg); font-size: var(--eo-fs-lg); }
    .eo-control--sm { height: var(--eo-control-h); font-size: var(--eo-fs-base); }
    .eo-qty .eo-btn { width: var(--eo-control-h-lg); }
    .eo-form-actions .eo-btn { flex: 1 1 auto; }
}

/* <x-more-options>: fields a new user can skip wait behind one toggle */
/* a quiet text toggle, not a box: the hidden fields should not ask for attention */
.eo-more__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-height: var(--eo-control-h-sm);
    padding: 0 var(--eo-space-sm);
    margin-left: calc(-1 * var(--eo-space-sm));
    font: inherit;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-brand);
    background: transparent;
    border: 0;
    border-radius: var(--eo-radius);
    cursor: pointer;
}

.eo-more__toggle .svg-icon {
    width: 15px;
    height: 15px;
}

.eo-more__toggle:hover {
    background: var(--eo-bg-hover);
}

.eo-more__toggle:focus-visible {
    outline: 0;
    box-shadow: var(--eo-focus);
}

.eo-more__caret {
    transition: transform var(--eo-dur) var(--eo-ease);
}

.eo-more__toggle[aria-expanded="true"] .eo-more__caret {
    transform: rotate(180deg);
}

/* fields put straight inside get the same space between them as an .eo-stack form */
.eo-more__body {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-base);
    padding-top: var(--eo-space-base);
}

.eo-more__title {
    margin: 0;
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-semibold);
}

form:not(.has-more-open) .eo-more-col {
    display: none;
}

/* ========================================================================== */
/* CARDS AND PANELS */
/* ========================================================================== */

.eo-card {
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl);
}

.eo-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm) var(--eo-space-base);
    min-height: 56px;
    padding: var(--eo-space-base) var(--eo-space-lg) var(--eo-space-md);
}

.eo-card__title {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

/* panel head as in TimoDesk: a title, one short grey line under it, one small button on the right */
.eo-card__head-text {
    flex: 1 1 160px;
    min-width: 0;
}

.eo-card__sub {
    margin: 2px 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-card__head > .eo-btn {
    flex-shrink: 0;
}

.eo-card__body {
    padding: var(--eo-space-lg);
}

/* the title and the content read as one block, no rule between them */
.eo-card__head + .eo-card__body {
    padding-top: 0;
}

/* a table in a card uses the card's own edge, so there is never a box inside a box */
.eo-card > .eo-table-wrap {
    border-width: 1px 0 0;
    border-radius: 0 0 var(--eo-radius-xl) var(--eo-radius-xl);
}

.eo-card__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md) var(--eo-space-lg);
    background: var(--eo-surface-2);
    border-top: 1px solid var(--eo-border);
    border-radius: 0 0 var(--eo-radius-xl) var(--eo-radius-xl);
}

/* panels side by side share one height: the shorter one's foot stays at its bottom, not in the middle */
.eo-grid > .eo-panel:has(> .eo-card__foot) {
    display: flex;
    flex-direction: column;
}

.eo-grid > .eo-panel > .eo-card__foot {
    margin-top: auto;
}

/* x-settings-section foot: a single row of buttons at the end of the block, no extra strip */
.eo-section__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}

/* settings form: a card with class eo-section keeps its title (and a plain line) on the left, the fields on the right */
.eo-section > .eo-card__head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--eo-space-2xs);
}

.eo-section__text {
    margin: 0;
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

@media (min-width: 992px) {
    .eo-section {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        grid-template-rows: 1fr auto;
    }

    .eo-section > .eo-card__head {
        grid-column: 1;
        grid-row: 1 / span 2;
        padding: var(--eo-space-lg);
    }

    .eo-section > .eo-card__body {
        grid-column: 2;
        grid-row: 1;
        padding-top: var(--eo-space-lg);
        border-left: 1px solid var(--eo-border);
    }

    .eo-section > .eo-card__foot {
        grid-column: 2;
        grid-row: 2;
        border-left: 1px solid var(--eo-border);
        border-radius: 0 0 var(--eo-radius-xl) 0;
    }
}

/* a form's save buttons stay on screen on a long form, and settle at its end on a short one */
.eo-card__foot:has([type="submit"]),
form .eo-form-actions,
.eo-formbar {
    position: sticky;
    bottom: 0;
    z-index: var(--eo-z-formbar);
}

form .eo-form-actions:not(.eo-card__foot) {
    padding-bottom: var(--eo-space-sm);
    background: var(--eo-surface);
}

/* under settings sections the bar sits on the grey page, so it takes the page colour: no white strip, just the button */
form .eo-section ~ .eo-form-actions:not(.eo-card__foot) {
    padding-top: var(--eo-space-sm);
    padding-bottom: var(--eo-space-base);
    margin-top: 0;
    background: var(--eo-bg);
}

/* once the side column drops under the form, its save buttons pin to the screen edge, beside the sidebar */
.eo-order-form__save,
.pf-save {
    --eo-pin-left: var(--eo-sidebar-w);
}

@media (max-width: 1199.98px) {
    .pf-layout .pf-save {
        position: fixed;
        right: 0;
        bottom: 0;
        left: var(--eo-pin-left);
        z-index: var(--eo-z-formbar);
        display: flex;
        gap: var(--eo-space-sm);
        padding: var(--eo-space-sm);
        background: var(--eo-surface-2);
        border-top: 1px solid var(--eo-border);
    }

    .pf-layout .pf-save .eo-btn {
        flex: 1 1 0;
        width: auto;
    }

    .pf-layout .pf-save .eo-btn--ghost {
        display: none;
    }

    .pf-layout {
        padding-bottom: 72px;
    }
}

@media (max-width: 1099.98px) {
    .eo-order-layout .eo-order-form__save {
        position: fixed;
        right: 0;
        bottom: 0;
        left: var(--eo-pin-left);
        border-radius: 0;
    }

    .eo-order-layout {
        padding-bottom: 72px;
    }
}

@media (max-width: 991.98px) {
    .eo-order-form__save,
    .pf-save {
        --eo-pin-left: 0px;
    }
}

/* a form of several cards: this bar sits in the form itself, so it stays through every card */
.eo-formbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md) var(--eo-space-lg);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl);
}

@media (max-width: 767.98px) {
    .eo-formbar {
        padding: var(--eo-space-sm);
    }

    .eo-formbar .eo-btn {
        flex: 1 1 auto;
    }
}

/* under settings sections the save bar is no box of its own: page colour, no border, just the button */
.eo-section ~ .eo-formbar {
    padding: var(--eo-space-sm) 0 var(--eo-space-base);
    background: var(--eo-bg);
    border: 0;
    border-radius: 0;
}

/* lines of one record that belong together, closer than the blocks of a stack */
.eo-lines {
    display: grid;
    gap: var(--eo-space-2xs);
}

.eo-lines__foot {
    margin-top: var(--eo-space-sm);
    padding-top: var(--eo-space-sm);
    border-top: 1px solid var(--eo-border);
}

.eo-dl {
    display: grid;
    grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
    gap: var(--eo-space-sm) var(--eo-space-base);
    margin: 0;
}

/* a side card is narrow: a date may wrap here, it must never push the page sideways */
.eo-dl .eo-nowrap {
    white-space: normal;
}

aside .eo-dl {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--eo-space-sm);
}

.eo-dl dt {
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.eo-dl dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ========================================================================== */
/* BADGES */
/* ========================================================================== */

.eo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    line-height: 1;
    color: var(--eo-text-muted);
    white-space: nowrap;
    background: var(--eo-bg-hover);
    border: 1px solid transparent;
    border-radius: var(--eo-radius-sm);
}

.eo-badge__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: currentColor;
    border-radius: 50%;
}

.eo-badge--success { color: var(--eo-success-strong); background: var(--eo-success-10); border-color: var(--eo-success-25); }
.eo-badge--warning { color: var(--eo-warning-strong); background: var(--eo-warning-10); border-color: var(--eo-warning-25); }
.eo-badge--danger { color: var(--eo-danger-strong); background: var(--eo-danger-10); border-color: var(--eo-danger-25); }
.eo-badge--neutral { color: var(--eo-neutral); background: var(--eo-neutral-10); border-color: var(--eo-border); }
.eo-badge--info { color: var(--eo-info-strong); background: var(--eo-info-10); border-color: var(--eo-info-25); }
.eo-badge--success .eo-badge__dot { background: var(--eo-success); }
.eo-badge--warning .eo-badge__dot { background: var(--eo-warning); }
.eo-badge--danger .eo-badge__dot { background: var(--eo-danger); }
.eo-badge--info .eo-badge__dot { background: var(--eo-info); }
.eo-badge--brand { color: var(--eo-brand); background: var(--eo-brand-10); }
.eo-badge--accent { color: var(--eo-accent); background: var(--eo-accent-10); }

.eo-badge--outline {
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
}

.eo-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius-pill);
}

/* ========================================================================== */
/* ALERTS */
/* ========================================================================== */

.eo-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-base);
    font-size: var(--eo-fs-base);
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-alert > .svg-icon {
    margin-top: 2px;
    color: var(--eo-text-muted);
}

.eo-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.eo-alert__title {
    margin-bottom: 2px;
    font-weight: var(--eo-fw-semibold);
}

.eo-alert__close {
    margin: -6px -8px -6px 0;
}

.eo-alert--info { background: var(--eo-info-10); border-color: var(--eo-info-25); }
.eo-alert--info > .svg-icon { color: var(--eo-info-strong); }
.eo-alert--success { background: var(--eo-success-10); border-color: var(--eo-success-25); }
.eo-alert--success > .svg-icon { color: var(--eo-success-strong); }
.eo-alert--warning { background: var(--eo-warning-10); border-color: var(--eo-warning-25); }
.eo-alert--warning > .svg-icon { color: var(--eo-warning-strong); }
.eo-alert--danger { background: var(--eo-danger-10); border-color: var(--eo-danger-25); }
.eo-alert--danger > .svg-icon { color: var(--eo-danger-strong); }

.eo-impersonation {
    border-width: 0 0 1px;
    border-radius: 0;
}

.eo-impersonation__stop {
    margin-left: var(--eo-space-sm);
    font-weight: var(--eo-fw-semibold);
}

/* ========================================================================== */
/* STATS */
/* ========================================================================== */

/* TimoDesk stat strip: one bordered panel split into cells by fine lines. Each cell draws its own left and top
   line and is pulled 1px out, so the lines of the first column and row hide under the panel edge */
.eo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    overflow: hidden;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl);
}

.eo-stats > .eo-stat {
    margin: -1px 0 0 -1px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 1px 0 0 var(--eo-border), inset 0 1px 0 var(--eo-border);
}

.eo-stats > a.eo-stat:hover {
    background: var(--eo-surface-2);
}

@media (max-width: 575.98px) {
    .eo-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eo-stats .eo-stat {
        padding: var(--eo-space-md);
    }
}

.eo-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-xs);
    min-width: 0;
    padding: var(--eo-space-lg);
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl);
}

a.eo-stat:hover {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-surface-2);
}

.eo-stat__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
}

/* the icon is a small tinted square in the top right corner, the label stays on the left */
.eo-stat__label:has(.svg-icon) {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 28px;
}

.eo-stat__label .svg-icon {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 8px;
    margin: -4px -4px 0 0;
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-radius: var(--eo-radius-lg);
}

.eo-stat__value {
    font-size: var(--eo-fs-3xl);
    font-weight: var(--eo-fw-bold);
    line-height: var(--eo-lh-tight);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.eo-stat__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: var(--eo-fw-semibold);
}

.eo-trend--up { color: var(--eo-success-strong); }
.eo-trend--down { color: var(--eo-danger-strong); }
.eo-trend--flat { color: var(--eo-text-muted); }

/* the thin line under a stat: how far along it is (x-stat progress) */
.eo-stat__bar {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: var(--eo-space-xs);
    overflow: hidden;
    color: var(--eo-brand);
    background: var(--eo-bg-hover);
    border: 0;
    border-radius: var(--eo-radius-pill);
    appearance: none;
}

.eo-stat__bar::-webkit-progress-bar {
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius-pill);
}

.eo-stat__bar::-webkit-progress-value {
    background: var(--eo-brand);
    border-radius: var(--eo-radius-pill);
}

.eo-stat__bar::-moz-progress-bar {
    background: var(--eo-brand);
    border-radius: var(--eo-radius-pill);
}

.eo-stat__bar--success::-webkit-progress-value { background: var(--eo-success); }
.eo-stat__bar--success::-moz-progress-bar { background: var(--eo-success); }
.eo-stat__bar--warning::-webkit-progress-value { background: var(--eo-warning); }
.eo-stat__bar--warning::-moz-progress-bar { background: var(--eo-warning); }
.eo-stat__bar--danger::-webkit-progress-value { background: var(--eo-danger); }
.eo-stat__bar--danger::-moz-progress-bar { background: var(--eo-danger); }

/* ========================================================================== */
/* TOOLBAR, FILTER BAR AND TABLE TOOLS */
/* ========================================================================== */

.eo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    margin-bottom: var(--eo-space-md);
}

/* toolbar start: the search, the filter button and a pill row as one group on the left, the page's buttons on the right */
.eo-toolbar__start {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
}

.eo-toolbar__start > .eo-filterbar {
    flex: 1 1 320px;
}

/* a toolbar right above a table becomes that table's header, so search, filters and rows read as one block */
.eo-toolbar:has(+ .eo-table-wrap),
.eo-toolbar:has(+ .eo-empty) {
    margin-bottom: 0;
    padding: var(--eo-space-md);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-bottom: 0;
    border-radius: var(--eo-radius-xl) var(--eo-radius-xl) 0 0;
}

.eo-toolbar + .eo-table-wrap,
.eo-content .eo-toolbar + .eo-empty {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* the page's own gap would split the toolbar from the table or panel it heads */
.eo-content > .eo-toolbar + .eo-table-wrap,
.eo-content > .eo-toolbar + .eo-empty,
.eo-setpage > .eo-toolbar + .eo-table-wrap,
.eo-setpage > .eo-toolbar + .eo-empty {
    margin-top: calc(-1 * var(--eo-space-lg));
}

/* the same join inside a column stack, whose gap would otherwise split the toolbar from its table */
.eo-stack > .eo-toolbar + .eo-table-wrap,
.eo-stack > .eo-toolbar + .eo-empty {
    margin-top: calc(-1 * var(--eo-space-base));
}

.eo-stack--sm > .eo-toolbar + .eo-table-wrap,
.eo-stack--sm > .eo-toolbar + .eo-empty {
    margin-top: calc(-1 * var(--eo-space-sm));
}

.eo-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
    flex: 1 1 480px;
    min-width: 0;
}

/* a toolbar with tabs and a search box: the search comes first on the left, the tabs sit on the right; a bar with no search keeps its place */
.eo-toolbar:has(> .eo-segment) > .eo-filterbar:has(> .eo-filterbar__search) {
    order: -1;
}

/* in a column stack the 480px above would become the bar's height */
.eo-stack > .eo-filterbar,
.flex-column > .eo-filterbar {
    flex: 0 0 auto;
}

/* x-filter-bar lead slot: a pill row or a date range that stays in view beside the search */
.eo-filterbar__lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
}

/* x-filter-bar actions slot: the page's tools and one main button at the right end of the same row */
.eo-filterbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
    margin-left: auto;
}

.eo-filterbar__toggle ~ .eo-filterbar__actions {
    margin-left: 0;
}

/* report bar (TimoDesk reports): the period and its dates on the left, a filter or two and export on the right */
.eo-reportbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    margin-bottom: var(--eo-space-md);
}

.eo-reportbar__period,
.eo-reportbar__tools,
.eo-reportbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
}

.eo-reportbar__tools {
    margin-left: auto;
}

.eo-reportbar__period .eo-field,
.eo-reportbar__tools .eo-filterbar,
.eo-reportbar__group .eo-field {
    flex: 0 0 auto;
    margin: 0;
}

.eo-reportbar__tools .eo-filterbar__search {
    flex: 0 1 320px;
    min-width: 300px;
}

.eo-reportbar__dates {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    white-space: nowrap;
}

.eo-filterbar__search {
    flex: 0 1 340px;
    min-width: 180px;
}

/* search stays on the left; the filter button sits at the right end, next to the table tools */
.eo-filterbar__toggle {
    margin-left: auto;
}

.eo-filterbar__toggle.is-applied {
    color: var(--eo-brand);
    border-color: color-mix(in srgb, var(--eo-brand) 40%, var(--eo-border));
    background: var(--eo-brand-10);
}

.eo-filterbar__toggle.is-applied .eo-count {
    color: var(--eo-on-brand);
    background: var(--eo-brand);
}

/* x-side-panel: the right side panel used by the filter bar and the order quick view */
.eo-sidepanel.offcanvas {
    --bs-offcanvas-width: min(380px, 100vw);
    border-left: 1px solid var(--eo-border);
    box-shadow: var(--eo-shadow-float);
}

.eo-sidepanel--wide.offcanvas {
    --bs-offcanvas-width: min(480px, 100vw);
}

.eo-sidepanel__head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    height: var(--eo-topbar-h);
    padding: 0 var(--eo-space-sm) 0 var(--eo-space-lg);
    border-bottom: 1px solid var(--eo-border);
}

.eo-sidepanel__title {
    margin: 0;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.eo-sidepanel__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--eo-space-lg);
    overflow-y: auto;
}

.eo-sidepanel__foot {
    display: flex;
    flex: none;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md) var(--eo-space-lg);
    border-top: 1px solid var(--eo-border);
}

.eo-sidepanel__foot > .eo-btn {
    flex: 1 1 0;
}

.eo-filterbar__fields {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-base);
}

.eo-filterbar__fields > .eo-field {
    min-width: 0;
}

/* applied filters as removable chips under the row */
.eo-filterbar__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-xs);
    flex-basis: 100%;
    padding-top: var(--eo-space-sm);
    border-top: 1px dashed var(--eo-border);
}

.eo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 6px 0 12px;
    font-size: var(--eo-fs-md);
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-pill);
}

.eo-chip__name {
    color: var(--eo-text-muted);
}

.eo-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: var(--eo-text-subtle);
    background: none;
    border: 0;
    border-radius: 50%;
}

.eo-chip__remove:hover {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

.eo-chip__remove .svg-icon {
    width: 14px;
    height: 14px;
}

.eo-filterbar__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 var(--eo-space-sm);
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
}

.eo-filterbar__clear:hover {
    color: var(--eo-danger-strong);
    text-decoration: none;
}

.eo-filterbar__clear .svg-icon {
    width: 14px;
    height: 14px;
}

@media (max-width: 767.98px) {
    .eo-filterbar__search {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.eo-tabletools {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
    margin-left: auto;
    /* the column button is always the last thing in its row, after the page's own buttons */
    order: 99;
}

.eo-tabletools__menu {
    width: 260px;
    max-height: 380px;
    overflow-y: auto;
}

/* on a phone every list is cards, so columns mean nothing; search stays on one row with the first row of orders in sight */
@media (max-width: 767.98px) {
    .eo-tabletools .eo-tabletools__wide {
        display: none;
    }

    .eo-toolbar:has(> .eo-tabletools) {
        flex-wrap: nowrap;
    }

    .eo-toolbar:has(> .eo-tabletools) > .eo-filterbar {
        flex: 1 1 0;
    }

    .eo-toolbar:has(> .eo-tabletools) .eo-filterbar__search {
        flex: 1 1 0;
        min-width: 120px;
    }

    .eo-filterbar__toggle > span:not(.eo-count) {
        display: none;
    }
}

.eo-tabletools__label {
    display: none;
}

/* the columns menu is a square icon button, the same size as the filter button next to it */
.eo-tabletools > .dropdown > .eo-btn {
    width: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
}

/* ========================================================================== */
/* WORK TABLES */
/* ========================================================================== */

.eo-table-wrap {
    position: relative;
    overflow-x: auto;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl);
    overscroll-behavior-x: contain;
}

.eo-table-wrap--auto {
    max-height: none;
}

.eo-table-wrap.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.eo-table {
    width: 100%;
    margin: 0;
    font-size: var(--eo-fs-base);
    color: var(--eo-text);
    border-collapse: separate;
    border-spacing: 0;
}

.eo-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 40px;
    padding: 0 var(--eo-space-base);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--eo-surface-2);
    border-bottom: 1px solid var(--eo-border);
}

/* dashboard.js sets the shift while the page scrolls past the table */
.eo-table thead th {
    transform: translateY(var(--eo-head-shift, 0px));
}

.eo-table-wrap.is-head-pinned thead th {
    box-shadow: 0 1px 0 var(--eo-border), 0 4px 8px -6px rgb(0 0 0 / 0.18);
}

.eo-table td {
    height: var(--eo-row-h);
    padding: var(--eo-space-sm) var(--eo-space-base);
    vertical-align: middle;
    border-bottom: 1px solid var(--eo-bg-hover);
}

.eo-table tbody tr:last-child td {
    border-bottom: 0;
}

.eo-table tbody tr {
    transition: background-color var(--eo-dur) var(--eo-ease);
}

.eo-table tbody tr:hover td {
    background: var(--eo-surface-2);
}

.eo-table tbody tr.is-selected td {
    background: var(--eo-brand-10);
}

.eo-table tbody tr.is-focused td:first-child {
    box-shadow: inset 3px 0 0 var(--eo-brand);
}

/* owner's rule (5 Nov 2026): every column reads from the left, numbers too; only the last column sits on the right */
.eo-table th.eo-num,
.eo-table td.eo-num {
    text-align: left;
}

/* the last column of every table sits on the right edge; the script moves .eo-col-end when a column is hidden */
.eo-table tr > th:last-child:not([colspan]),
.eo-table tr > td:last-child:not([colspan]),
.eo-table .eo-col-end {
    text-align: right;
}

.eo-table tfoot td {
    position: sticky;
    bottom: 0;
    font-weight: var(--eo-fw-semibold);
    background: var(--eo-surface-2);
    border-top: 1px solid var(--eo-border);
    border-bottom: 0;
}

.eo-table--dense td {
    height: 34px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* a 100% wide select in an auto-width cell shrinks to its padding and looks empty */
.eo-table td select.eo-control {
    width: auto;
}

.eo-table__check {
    width: 40px;
    padding-right: 0 !important;
}

.eo-table__check input {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--eo-brand);
    cursor: pointer;
}

.eo-table__actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* row buttons all carry the same border; a red one keeps its red text */
.eo-table__actions .eo-btn--danger-ghost {
    background: var(--eo-surface);
    border-color: var(--eo-border);
}

.eo-table .is-col-hidden {
    display: none;
}

.eo-col-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--eo-surface);
}

.eo-table th.eo-col-sticky {
    z-index: 3;
    background: var(--eo-surface-2);
}

/* a table carries many names: one step lighter than a heading keeps the rows calm */
.eo-table .eo-strong {
    font-weight: var(--eo-fw-medium);
}

/* a row's name stays on one line; the table scrolls before a person's name breaks in two */
.eo-table a[data-row-link] {
    white-space: nowrap;
}

.eo-cell-main {
    display: block;
    line-height: 1.4;
    font-weight: var(--eo-fw-medium);
    white-space: nowrap;
}

.eo-cell-sub {
    display: block;
    line-height: 1.4;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    white-space: nowrap;
}

.eo-cell-wrap {
    min-width: 220px;
    max-width: 340px;
    white-space: normal;
}

/* x-name-cell: a list row's first column, as in TimoDesk: a soft tile (letter, icon or photo), the bold name, one grey line */
.eo-namecell {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
}

a.eo-namecell {
    color: inherit;
    text-decoration: none;
}

.eo-namecell__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    overflow: hidden;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    line-height: 1;
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-radius: var(--eo-radius);
}

.eo-namecell__tile .svg-icon {
    width: 16px;
    height: 16px;
}

.eo-namecell__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eo-namecell__tile:has(img) {
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
}

.eo-namecell__tile--lg {
    width: 44px;
    height: 44px;
    font-size: var(--eo-fs-lg);
}

.eo-namecell__tile--lg .svg-icon {
    width: 20px;
    height: 20px;
}

.eo-namecell__tile--round {
    border-radius: 50%;
}

/* a product photo in place of the tile */
.eo-namecell__img {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

/* tones: named for the color; the numbers let a page pick one by position (uid hash % 5) */
.eo-namecell__tile--brand,
.eo-namecell__tile--0 { color: var(--eo-brand); background: var(--eo-brand-10); }
.eo-namecell__tile--accent,
.eo-namecell__tile--1 { color: var(--eo-accent); background: var(--eo-accent-10); }
.eo-namecell__tile--warning,
.eo-namecell__tile--2 { color: var(--eo-warning-strong); background: var(--eo-warning-10); }
.eo-namecell__tile--neutral,
.eo-namecell__tile--3 { color: var(--eo-text-2); background: var(--eo-neutral-10); }
.eo-namecell__tile--info,
.eo-namecell__tile--4 { color: var(--eo-info-strong); background: var(--eo-info-10); }
.eo-namecell__tile--success { color: var(--eo-success-strong); background: var(--eo-success-10); }
.eo-namecell__tile--danger { color: var(--eo-danger); background: var(--eo-danger-10); }
.eo-namecell__tile--muted { color: var(--eo-text-muted); background: var(--eo-bg-hover); }

.eo-namecell__text {
    min-width: 0;
}

.eo-namecell__text .eo-cell-main,
.eo-namecell__text a.eo-cell-main {
    overflow: hidden;
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
    text-overflow: ellipsis;
}

.eo-namecell__text a.eo-cell-main:hover,
a.eo-namecell:hover .eo-cell-main {
    color: var(--eo-brand);
    text-decoration: none;
}

.eo-namecell__text .eo-cell-sub {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* a small sign beside the name (a lock on a system row) stays quiet */
.eo-namecell__text .eo-cell-main .svg-icon {
    width: 14px;
    height: 14px;
    color: var(--eo-text-muted);
}

/* clip: a long title (a listing, a ticket subject) ends in "..." instead of widening the table */
.eo-namecell--clip .eo-namecell__text {
    max-width: 360px;
}

/* a laptop fits the whole order list without sideways scrolling */
@media (min-width: 768px) {
    .eo-cell-wrap--narrow {
        min-width: 150px;
    }
}

/* the phone card has room for date and time on one line */
@media (max-width: 767.98px) {
    .eo-cell-time {
        display: inline;
        margin-left: var(--eo-space-xs);
    }
}

.eo-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.eo-cell-wrap .eo-cell-sub {
    white-space: normal;
}

.eo-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
}

.eo-sort:hover {
    color: var(--eo-text);
    text-decoration: none;
}

.eo-sort .svg-icon {
    width: 14px;
    height: 14px;
    color: var(--eo-text-subtle);
}

.eo-sort.is-active,
.eo-sort.is-active .svg-icon {
    color: var(--eo-brand);
}

.eo-table-empty td {
    height: auto;
    padding: 0;
}

.eo-table-empty td:hover,
.eo-table tbody tr.eo-table-empty:hover td {
    background: var(--eo-surface);
}

.eo-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 0;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.eo-inline:focus-visible {
    outline: none;
}

.eo-inline__icon {
    width: 13px !important;
    height: 13px !important;
    color: var(--eo-text-subtle);
    opacity: 0;
    transition: opacity var(--eo-dur) var(--eo-ease);
}

.eo-inline:hover .eo-inline__icon,
.eo-inline:focus-visible .eo-inline__icon {
    opacity: 1;
}

/* overlay: the pencil floats just past the value and takes no room, so two edits side by side (09:00 – 17:00) stay even */
.eo-inline--overlay .eo-inline__icon {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 2px;
    transform: translateY(-50%);
}

/* a status stays a status badge while it can still be changed from the row */
.eo-inline__value.eo-badge {
    max-width: none;
    border-bottom-style: solid;
}

.eo-inline.is-saved .eo-inline__icon {
    display: none;
}

.eo-inline__value {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--eo-dur) var(--eo-ease), color var(--eo-dur-slow) var(--eo-ease);
}

.eo-inline:hover .eo-inline__value,
.eo-inline:focus-visible .eo-inline__value {
    border-bottom-color: var(--eo-border-strong);
}

.eo-inline__value:empty::before {
    content: attr(data-empty);
    color: var(--eo-text-subtle);
}

.eo-inline.is-saved .eo-inline__value {
    color: var(--eo-success-strong);
    border-bottom-color: transparent;
}

/* a line runs under the new value while the check draws */
.eo-inline.is-saved::after {
    content: "";
    position: absolute;
    left: 0;
    right: 20px;
    bottom: 0;
    height: 2px;
    background: var(--eo-success);
    border-radius: var(--eo-radius-sm);
    transform-origin: left;
    animation: eo-saved-line 1.3s var(--eo-ease) both;
}

.eo-inline__saved {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--eo-on-brand);
    background: var(--eo-success);
    border-radius: 50%;
    animation: eo-saved-mark 1.3s var(--eo-ease) both;
}

.eo-inline__saved svg {
    width: 11px;
    height: 11px;
    stroke-width: 3;
}

.eo-inline__saved svg > * {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: eo-saved-draw 300ms 120ms var(--eo-ease) forwards;
}

.eo-inline-form {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 160px;
}

.eo-inline-form__field {
    position: relative;
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* the field stays the plain text it was, on one line that fills in with the brand color */
.eo-inline-form__field > .eo-control,
.eo-inline-form__field > .eo-control:hover,
.eo-inline-form__field > .eo-control:focus,
.eo-inline-form__field > .eo-select__toggle {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 1px 0 2px;
    overflow: hidden;
    color: inherit;
    font: inherit;
    line-height: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--eo-border-strong);
    border-radius: 0;
    box-shadow: none;
    resize: none;
}

/* the select keeps its caret and fills the cell */
.eo-inline-form__field > .eo-select__toggle,
.eo-table td .eo-inline-form__field > .eo-select__toggle {
    display: flex;
    width: 100%;
    max-width: none;
    padding-right: 22px;
    background: var(--eo-caret) no-repeat right 2px center / 16px;
}

.eo-inline-form__field > .eo-select__toggle.is-open {
    border-color: var(--eo-border-strong);
    box-shadow: none;
}

.eo-inline-form__field:has(.is-open)::after {
    transform: scaleX(1);
}

.eo-inline-form__field::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--eo-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--eo-dur-slow) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
    pointer-events: none;
}

.eo-inline-form__field:focus-within::after {
    transform: scaleX(1);
}

.eo-inline-form__actions {
    display: inline-flex;
    flex: none;
    gap: 2px;
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
    transition: opacity var(--eo-dur) var(--eo-ease), transform var(--eo-dur) var(--eo-ease);
}

.eo-inline-form.is-dirty .eo-inline-form__actions,
.eo-inline-form.is-pick .eo-inline-form__actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.eo-inline-form__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--eo-text-muted);
    background: none;
    border: 0;
    border-radius: var(--eo-radius-sm);
    cursor: pointer;
    transition: background-color var(--eo-dur) var(--eo-ease), color var(--eo-dur) var(--eo-ease);
}

.eo-inline-form__action:hover,
.eo-inline-form__action:focus-visible {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
    outline: none;
}

.eo-inline-form__action--save {
    color: var(--eo-brand);
}

.eo-inline-form__action--save:hover,
.eo-inline-form__action--save:focus-visible {
    color: var(--eo-brand-strong);
    background: var(--eo-brand-10);
}

.eo-inline-form__action svg {
    width: 16px;
    height: 16px;
}

.eo-inline-form.is-saving {
    pointer-events: none;
}

.eo-inline-form.is-saving .eo-control {
    color: var(--eo-text-muted);
}

.eo-inline-form.is-saving .eo-inline-form__field::after {
    right: auto;
    width: 30%;
    transform: none;
    animation: eo-inline-sweep 900ms var(--eo-ease) infinite;
}

.eo-inline-form.is-saving .eo-inline-form__action--save {
    animation: eo-pulse 900ms var(--eo-ease) infinite;
}

.eo-inline-form.is-error {
    animation: eo-inline-shake 300ms var(--eo-ease);
}

.eo-inline-form.is-error .eo-inline-form__field::after {
    background: var(--eo-danger);
    transform: scaleX(1);
}

.eo-flash-saved td,
.eo-flash-saved {
    animation: eo-saved 1.2s var(--eo-ease);
}

.eo-bulkbar {
    position: fixed;
    left: 50%;
    bottom: var(--eo-space-xl);
    z-index: var(--eo-z-bulkbar);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--eo-space-sm);
    max-width: calc(100vw - 2 * var(--eo-space-base));
    padding: 6px 6px 6px var(--eo-space-base);
    /* the sidebar's navy, so the bar stands out over a white table instead of melting into it */
    color: var(--eo-on-brand);
    background: var(--eo-side-bg);
    border: 1px solid var(--eo-side-bg);
    border-radius: var(--eo-radius-lg);
    box-shadow: var(--eo-shadow-float);
    transform: translateX(-50%);
    animation: eo-rise var(--eo-dur-slow) var(--eo-ease);
}

/* actions on the navy bar are plain words with an icon, lit on hover, not a row of boxes; a danger action keeps a red word */
.eo-bulkbar .eo-btn,
.eo-bulkbar .eo-btn:where(:not(.eo-btn--primary)) {
    color: rgb(255 255 255 / 0.88);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.eo-bulkbar .eo-btn:hover,
.eo-bulkbar .eo-btn:focus-visible {
    color: var(--eo-on-brand);
    background: rgb(255 255 255 / 0.1);
    border-color: transparent;
}

.eo-bulkbar .eo-btn--danger,
.eo-bulkbar .eo-btn--danger-ghost {
    color: var(--eo-danger-on-dark);
}

.eo-bulkbar .eo-btn--primary {
    color: var(--eo-on-brand);
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

/* closing the bar is a small × at the far end, after a thin line */
.eo-bulkbar > [data-bulk-clear] {
    position: relative;
    margin-left: var(--eo-space-xs);
    padding-inline: var(--eo-space-sm);
    color: rgb(255 255 255 / 0.6);
}

.eo-bulkbar > [data-bulk-clear]::before {
    content: "";
    position: absolute;
    left: calc(var(--eo-space-xs) * -1 - 1px);
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgb(255 255 255 / 0.18);
}

.eo-bulkbar > [data-bulk-clear] > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.eo-bulkbar[hidden] {
    display: none;
}

.eo-bulkbar__count {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-right: var(--eo-space-sm);
    font-weight: var(--eo-fw-semibold);
    white-space: nowrap;
    border-right: 1px solid rgb(255 255 255 / 0.18);
}

/* One row always: when buttons don't fit, the actions scroll sideways instead of wrapping */
.eo-bulkbar__actions {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: var(--eo-space-xs);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.eo-bulkbar__actions > .eo-btn,
.eo-bulkbar > [data-bulk-clear] {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 767.98px) {

    .eo-bulkbar {
        left: var(--eo-space-sm);
        right: var(--eo-space-sm);
        bottom: var(--eo-space-sm);
        max-width: none;
        transform: none;
    }
}

/* ========================================================================== */
/* PAGINATION */
/* ========================================================================== */

.eo-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    margin-top: var(--eo-space-md);
}

.eo-pager__info {
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
}

.eo-pager__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs);
    padding: 0;
    margin: 0;
    list-style: none;
}

.eo-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--eo-control-h-sm);
    height: var(--eo-control-h-sm);
    padding: 0 var(--eo-space-sm);
    font-size: var(--eo-fs-md);
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-pager__link:hover {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-bg-hover);
}

.eo-pager__link.is-active {
    color: var(--eo-on-brand);
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

.eo-pager__link.is-disabled {
    color: var(--eo-text-subtle);
    pointer-events: none;
    background: var(--eo-bg);
}

.eo-pager__gap {
    border-color: transparent;
    background: transparent;
}

/* a pager under a table that runs to a panel's edges keeps the panel's side padding */
.eo-card > .eo-pager {
    margin: 0;
    padding: var(--eo-space-md) var(--eo-space-lg);
    border-top: 1px solid var(--eo-border);
}

@media (max-width: 575.98px) {
    .eo-pager__num { display: none; }
    .eo-pager__link { min-width: var(--eo-control-h-lg); height: var(--eo-control-h-lg); }
}

/* ========================================================================== */
/* TABS AND SEGMENTS */
/* ========================================================================== */

.eo-tabs {
    display: flex;
    gap: var(--eo-space-base);
    margin-bottom: var(--eo-space-md);
    overflow-x: auto;
    border-bottom: 1px solid var(--eo-border);
    scrollbar-width: none;
}

.eo-tabs::-webkit-scrollbar {
    display: none;
}

.eo-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 2px;
    margin-bottom: -1px;
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
    white-space: nowrap;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
}

.eo-tab:hover {
    color: var(--eo-text);
    text-decoration: none;
}

.eo-tab.is-active,
.eo-tab.active {
    color: var(--eo-text);
    border-bottom-color: var(--eo-brand);
}

.eo-tab .eo-count {
    min-width: 20px;
    padding: 0 6px;
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-medium);
    line-height: 18px;
    text-align: center;
    color: var(--eo-text-muted);
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius-pill);
}

/* the page's main tabs, in a full-width strip joined to the top bar; the first tab's text lines up with the page content */
.eo-pagebar {
    position: sticky;
    top: var(--eo-topbar-h);
    z-index: calc(var(--eo-z-topbar) - 1);
    padding: 0 calc(var(--eo-space-xl) - var(--eo-space-md));
    overflow-x: auto;
    background: var(--eo-surface);
    border-bottom: 1px solid var(--eo-border);
}

@media (max-width: 767.98px) {
    .eo-pagebar {
        padding: 0;
    }
}

.eo-pagebar .eo-tabs {
    gap: var(--eo-space-2xs);
    margin: 0;
    border-bottom: 0;
}

.eo-pagebar .eo-tab {
    position: relative;
    height: 44px;
    padding: 0 var(--eo-space-md);
    margin: 0;
    border-bottom: 0;
    transition: color var(--eo-dur) var(--eo-ease);
}

.eo-pagebar .eo-tab::after {
    position: absolute;
    right: var(--eo-space-md);
    bottom: 0;
    left: var(--eo-space-md);
    height: 2px;
    content: "";
    background: transparent;
    border-radius: 2px 2px 0 0;
    transition: background var(--eo-dur) var(--eo-ease);
}

.eo-pagebar .eo-tab:hover::after {
    background: var(--eo-border-strong);
}

.eo-pagebar .eo-tab.is-active::after {
    background: var(--eo-brand);
}

.eo-tab.is-active .eo-count,
.eo-tab.active .eo-count {
    color: var(--eo-text);
}

@media (max-width: 767.98px) {
    .eo-pagebar .eo-tab {
        height: 46px;
    }
}

/* x-segment: a small pill row (TimoDesk) for a list's status choice; items are links or buttons */
.eo-segment {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius);
}

/* in a column (the page body, a stack) the pill row keeps its own width instead of stretching across */
.eo-content > .eo-segment,
.eo-stack > .eo-segment,
.flex-column > .eo-segment {
    align-self: flex-start;
}

.eo-segment__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: calc(var(--eo-control-h-sm) - 4px);
    padding: 0 12px;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
    white-space: nowrap;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--eo-radius-sm);
    cursor: pointer;
}

.eo-segment__item:hover {
    color: var(--eo-text);
    text-decoration: none;
}

.eo-segment__item.is-active {
    color: var(--eo-text);
    background: var(--eo-surface);
    box-shadow: 0 0 0 1px var(--eo-border);
}

.eo-segment__item .svg-icon {
    width: 14px;
    height: 14px;
}

.eo-segment__item .eo-count {
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-subtle);
}

.eo-segment__item.is-active .eo-count {
    color: var(--eo-text-muted);
}

/* the dashboard range: one bordered field with the chosen period, like TimoDesk's date filter */
.eo-range__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-sm);
    height: var(--eo-control-h);
    min-width: 150px;
    padding: 0 var(--eo-space-sm) 0 var(--eo-space-md);
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    transition: border-color var(--eo-dur) var(--eo-ease);
}

.eo-range__btn:hover,
.eo-range__btn[aria-expanded="true"] {
    border-color: var(--eo-border-strong);
}

.eo-range__btn .eo-range__icon {
    width: 16px;
    height: 16px;
    color: var(--eo-text-muted);
}

.eo-range__label {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
}

.eo-range__btn .eo-range__caret {
    width: 14px;
    height: 14px;
    color: var(--eo-text-subtle);
    transition: transform var(--eo-dur) var(--eo-ease);
}

.eo-range__btn[aria-expanded="true"] .eo-range__caret {
    transform: rotate(180deg);
}

/* the picker: quick periods on the left; with own dates two months open beside them (TimoDesk) */
.eo-range__menu {
    min-width: 0;
    margin-top: 6px !important;
    padding: 0;
    overflow: hidden;
}

.eo-range__body {
    display: flex;
}

.eo-range__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 160px;
    padding: var(--eo-space-xs);
}

.eo-range__menu.is-custom .eo-range__list {
    border-right: 1px solid var(--eo-border);
}

.eo-range__item {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    font-size: var(--eo-fs-md);
    color: var(--eo-text);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--eo-radius-sm);
    cursor: pointer;
}

.eo-range__item:hover {
    background: var(--eo-bg-hover);
}

.eo-range__item.is-active {
    font-weight: var(--eo-fw-medium);
    color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-range__cal {
    display: flex;
    gap: var(--eo-space-lg);
    padding: var(--eo-space-md) var(--eo-space-base);
}

.eo-range__month {
    width: 238px;
}

.eo-range__month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    margin-bottom: var(--eo-space-xs);
    font-size: var(--eo-fs-md);
}

.eo-range__month-head > span {
    width: 28px;
}

.eo-range__nav {
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    color: var(--eo-text-muted);
    background: none;
    border: 0;
    border-radius: var(--eo-radius-sm);
}

.eo-range__nav:hover:not(:disabled) {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

.eo-range__nav:disabled {
    opacity: 0.3;
}

.eo-range__grid {
    display: grid;
    grid-template-columns: repeat(7, 34px);
    row-gap: 4px;
}

.eo-range__wd {
    padding: 4px 0;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-subtle);
    text-align: center;
}

/* the cell carries the band edge to edge; the circle inside carries the number */
.eo-range__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0;
    color: var(--eo-text);
    background: none;
    border: 0;
}

.eo-range__day > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: var(--eo-fs-md);
    border-radius: 50%;
    transition: background var(--eo-dur) var(--eo-ease);
}

.eo-range__day:hover:not(:disabled):not(.is-edge) > span {
    background: var(--eo-bg-hover);
}

.eo-range__day:disabled {
    color: var(--eo-text-subtle);
    opacity: 0.45;
    cursor: default;
}

.eo-range__day.is-today > span {
    font-weight: var(--eo-fw-semibold);
    box-shadow: inset 0 0 0 1px var(--eo-border-strong);
}

.eo-range__day.is-between {
    background: var(--eo-brand-10);
}

.eo-range__day.is-between.is-row-start {
    border-radius: 16px 0 0 16px;
}

.eo-range__day.is-between.is-row-end {
    border-radius: 0 16px 16px 0;
}

.eo-range__day.is-between.is-row-start.is-row-end {
    border-radius: 16px;
}

.eo-range__day.is-between:hover:not(:disabled) > span {
    background: transparent;
}

/* the first and last day: half a band towards the inside, unless the week ends right there */
.eo-range__day.is-from:not(.is-row-end) {
    background: linear-gradient(to right, transparent 50%, var(--eo-brand-10) 50%);
}

.eo-range__day.is-to:not(.is-row-start) {
    background: linear-gradient(to left, transparent 50%, var(--eo-brand-10) 50%);
}

.eo-range__day.is-edge > span {
    font-weight: var(--eo-fw-semibold);
    color: #fff;
    background: var(--eo-brand);
    box-shadow: none;
}

/* while only the start is chosen, the hovered end is a lighter preview */
.eo-range__day.is-preview.is-to > span {
    color: var(--eo-brand);
    background: var(--eo-surface);
    box-shadow: inset 0 0 0 1.5px var(--eo-brand);
}

.eo-range__month {
    width: auto;
}

.eo-range__foot {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-sm) var(--eo-space-base);
    border-top: 1px solid var(--eo-border);
}

.eo-range__chosen {
    flex: 1 1 auto;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

/* a phone has room for one month: the list goes on top, the newer month stays */
@media (max-width: 767.98px) {
    .eo-range__body {
        flex-direction: column;
    }

    .eo-range__menu.is-custom .eo-range__list {
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--eo-border);
    }

    .eo-range__cal .eo-range__month:first-child {
        display: none;
    }

    .eo-range__cal .eo-range__month:last-child .eo-range__month-head > span:first-child {
        visibility: hidden;
    }
}

/* pill checkboxes: a row of small choices that can each be on (weekdays, sizes); the checkbox hides behind its pill */
.eo-pillpick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs);
}

.eo-pillpick__item {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.eo-pillpick__item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eo-pillpick__item span {
    display: inline-flex;
    align-items: center;
    height: var(--eo-control-h-sm);
    padding: 0 var(--eo-space-md);
    font-size: var(--eo-fs-md);
    color: var(--eo-text-2);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-pill);
}

.eo-pillpick__item input:checked + span {
    color: var(--eo-brand);
    font-weight: var(--eo-fw-semibold);
    background: var(--eo-brand-10);
    border-color: var(--eo-brand-20);
}

.eo-pillpick__item input:focus-visible + span {
    outline: 2px solid var(--eo-brand);
    outline-offset: 2px;
}

/* the "আরও" menu's rows: the label left, its count right */
.eo-segment__menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
}

/* ========================================================================== */
/* DROPDOWNS AND POPOVERS */
/* ========================================================================== */

.dropdown-menu {
    /* above the sticky page tabs and top bar */
    --bs-dropdown-zindex: var(--eo-z-popover);
    --bs-dropdown-min-width: 190px;
    --bs-dropdown-padding-x: var(--eo-space-xs);
    --bs-dropdown-padding-y: var(--eo-space-xs);
    --bs-dropdown-font-size: var(--eo-fs-base);
    --bs-dropdown-color: var(--eo-text);
    --bs-dropdown-bg: var(--eo-surface);
    --bs-dropdown-border-color: var(--eo-border);
    --bs-dropdown-border-radius: var(--eo-radius-lg);
    --bs-dropdown-box-shadow: var(--eo-shadow-float);
    --bs-dropdown-link-color: var(--eo-text);
    --bs-dropdown-link-hover-color: var(--eo-text);
    --bs-dropdown-link-hover-bg: var(--eo-bg-hover);
    --bs-dropdown-link-active-color: var(--eo-text);
    --bs-dropdown-link-active-bg: var(--eo-bg-hover);
    --bs-dropdown-item-padding-x: var(--eo-space-sm);
    --bs-dropdown-item-padding-y: 6px;
    --bs-dropdown-header-color: var(--eo-text-subtle);
    --bs-dropdown-divider-bg: var(--eo-border);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    font-family: inherit;
    border-radius: var(--eo-radius-sm);
}

.dropdown-item .svg-icon {
    width: 16px;
    height: 16px;
    color: var(--eo-text-muted);
}

.dropdown-item.is-danger,
.dropdown-item.is-danger .svg-icon,
.dropdown-item.eo-tone-danger,
.dropdown-item.eo-tone-danger:hover,
.dropdown-item.eo-tone-danger .svg-icon {
    color: var(--eo-danger-strong);
}

.dropdown-item.is-danger:hover,
.dropdown-item.eo-tone-danger:hover {
    background: var(--eo-danger-10);
}

.dropdown-header {
    font-size: var(--eo-fs-sm);
}

.eo-menu-check {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: 5px var(--eo-space-md);
    margin: 0;
    cursor: pointer;
}

.eo-menu-check:hover {
    background: var(--eo-bg-hover);
}

.eo-menu-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--eo-brand);
}

.eo-menu-check.is-locked {
    color: var(--eo-text-subtle);
    cursor: default;
}

.popover {
    --bs-popover-max-width: 300px;
    --bs-popover-font-size: var(--eo-fs-md);
    --bs-popover-bg: var(--eo-surface);
    --bs-popover-border-color: var(--eo-border);
    --bs-popover-border-radius: var(--eo-radius-lg);
    --bs-popover-box-shadow: var(--eo-shadow-float);
    --bs-popover-header-bg: var(--eo-surface-2);
    --bs-popover-header-color: var(--eo-text);
    --bs-popover-header-font-size: var(--eo-fs-base);
    --bs-popover-body-color: var(--eo-text);
    font-family: var(--eo-font);
    box-shadow: var(--bs-popover-box-shadow);
}

/* [data-tip]: a small dark box under an icon button with its name */
.eo-tip {
    position: fixed;
    z-index: 1090;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 5px 9px;
    white-space: nowrap;
    font-family: var(--eo-font);
    color: #fff;
    background: var(--eo-text);
    border-radius: var(--eo-radius);
    box-shadow: var(--eo-shadow-float);
    pointer-events: none;
}

.eo-tip.is-on {
    display: flex;
}

/* the little arrow points at the button's middle */
.eo-tip::before {
    content: "";
    position: absolute;
    top: -4px;
    left: calc(var(--eo-tip-arrow, 50%) - 4px);
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
}

.eo-tip__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
}

.eo-tip__key {
    padding: 0 5px;
    font-family: inherit;
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-medium);
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--eo-radius-sm);
}

.eo-tip__hint {
    font-size: var(--eo-fs-xs);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.tooltip {
    --bs-tooltip-font-size: var(--eo-fs-sm);
    --bs-tooltip-bg: var(--eo-text);
    --bs-tooltip-border-radius: var(--eo-radius-sm);
    font-family: var(--eo-font);
}

/* ========================================================================== */
/* MODALS */
/* ========================================================================== */

.modal {
    /* one value only: Bootstrap puts this inside a calc() for the footer, and "16px 20px" there gives no padding at all */
    --bs-modal-padding: var(--eo-space-lg);
    --bs-modal-bg: var(--eo-surface);
    --bs-modal-border-color: var(--eo-border);
    --bs-modal-border-radius: var(--eo-radius-xl);
    --bs-modal-inner-border-radius: var(--eo-radius-xl);
    --bs-modal-box-shadow: var(--eo-shadow-float);
    --bs-modal-header-padding: var(--eo-space-lg) var(--eo-space-lg) var(--eo-space-base);
    --bs-modal-header-border-color: transparent;
    --bs-modal-footer-border-color: transparent;
    --bs-modal-footer-gap: var(--eo-space-sm);
    --bs-modal-title-line-height: var(--eo-lh-tight);
    --bs-backdrop-bg: #000000;
    --bs-backdrop-opacity: 0.5;
}

.modal-content {
    box-shadow: var(--bs-modal-box-shadow);
}

/* a popup pops in where it stands (a quick scale and fade) instead of Bootstrap's slow slide down from the top */
.modal.fade .modal-dialog {
    opacity: 0;
    transform: scale(0.96);
    transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.12s ease-out;
}

.modal.show .modal-dialog {
    opacity: 1;
    transform: none;
}

.modal-backdrop.fade {
    transition: opacity 0.12s linear;
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    .modal-backdrop.fade {
        transition: none;
    }
}

.modal-title {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.modal-header .eo-btn--icon {
    margin: -8px -10px -8px auto;
}

/* fields placed straight in a modal have no margin of their own, so the body spaces them like a stack */
.modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-base);
    padding: 0 var(--eo-space-lg) var(--eo-space-sm);
}

.modal-body > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* Bootstrap spaces footer buttons with margins, which the rule below removes; the gap replaces them */
.modal-footer {
    gap: var(--eo-space-sm);
    padding: var(--eo-space-base) var(--eo-space-lg) var(--eo-space-lg);
}

.modal-footer > * {
    margin: 0;
}

/* the confirm window can open over another modal (add expense asks "cash goes below zero, go on?"): it and its backdrop sit on top */
.modal.eo-confirm {
    z-index: 1070;
}

.modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1065;
}

.eo-confirm .modal-dialog {
    --bs-modal-width: 420px;
}

.eo-confirm .modal-body {
    display: flex;
    flex-direction: row;
    gap: var(--eo-space-base);
    padding: var(--eo-space-lg) var(--eo-space-lg) 0;
}

/* a title with no text below it sits level with the icon */
.eo-confirm__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: var(--eo-icon-box);
}

.eo-confirm .modal-footer {
    padding-top: var(--eo-space-lg);
}

.eo-confirm .modal-footer .eo-btn {
    flex: 1 1 0;
}

.eo-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--eo-icon-box);
    height: var(--eo-icon-box);
    flex-shrink: 0;
    border-radius: 50%;
}

.eo-confirm__icon .svg-icon {
    width: 20px;
    height: 20px;
}

.eo-confirm__icon--danger { color: var(--eo-danger-strong); background: var(--eo-danger-10); }
.eo-confirm__icon--warning { color: var(--eo-warning-strong); background: var(--eo-warning-10); }
.eo-confirm__icon--brand { color: var(--eo-brand); background: var(--eo-brand-10); }

.eo-confirm__icon > span {
    display: inline-flex;
}

.eo-confirm__icon > span[hidden] {
    display: none;
}

.eo-confirm__title {
    margin: 0;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.eo-confirm__text {
    margin: var(--eo-space-2xs) 0 0;
    color: var(--eo-text-muted);
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .modal-footer .eo-btn { flex: 1 1 auto; }
}

/* ========================================================================== */
/* TOASTS */
/* ========================================================================== */

.eo-toasts {
    position: fixed;
    top: calc(var(--eo-topbar-h) + var(--eo-space-sm));
    right: var(--eo-space-base);
    z-index: var(--eo-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    width: 360px;
    max-width: calc(100vw - 2 * var(--eo-space-base));
    pointer-events: none;
}

/* sign in, sign up and onboarding have no top bar, so the toast goes to the very corner */
body:not(:has(.eo-topbar)) .eo-toasts {
    top: var(--eo-space-base);
}

.eo-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-sm) var(--eo-space-md) var(--eo-space-base);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    box-shadow: var(--eo-shadow-float);
    pointer-events: auto;
    animation: eo-slide-in var(--eo-dur-slow) var(--eo-ease);
}

.eo-toast.is-leaving {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity var(--eo-dur-slow) var(--eo-ease), transform var(--eo-dur-slow) var(--eo-ease);
}

.eo-toast__icon {
    display: inline-flex;
    margin-top: 1px;
}

.eo-toast__icon .svg-icon {
    width: 20px;
    height: 20px;
}

.eo-toast__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--eo-fs-base);
    overflow-wrap: anywhere;
}

.eo-toast__close {
    margin: -4px 0;
}

.eo-toast--success .eo-toast__icon { color: var(--eo-success-strong); }
.eo-toast--error .eo-toast__icon { color: var(--eo-danger-strong); }
.eo-toast--warning .eo-toast__icon { color: var(--eo-warning-strong); }
.eo-toast--info .eo-toast__icon { color: var(--eo-info-strong); }

@media (max-width: 575.98px) {
    .eo-toasts {
        top: auto;
        left: var(--eo-space-sm);
        right: var(--eo-space-sm);
        bottom: var(--eo-space-sm);
        width: auto;
        max-width: none;
    }
}

/* ========================================================================== */
/* EMPTY STATES AND LOADING */
/* ========================================================================== */

.eo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
    padding: var(--eo-space-3xl) var(--eo-space-base);
    margin: 0 auto;
    text-align: center;
}

/* straight on the page it is a full-width white panel like an empty table, and joins a toolbar above it */
.eo-content > .eo-empty,
.eo-content > .eo-stack > .eo-empty,
.eo-setpage > .eo-empty,
.eo-setpage > .eo-stack > .eo-empty,
.eo-grid--3-1 > .eo-stack > .eo-empty,
.eo-desk__panel > .eo-empty,
.eo-content > div:not([class]) > .eo-empty,
.eo-setpage > div:not([class]) > .eo-empty {
    max-width: none;
    padding: calc(var(--eo-space-3xl) + var(--eo-space-xl)) var(--eo-space-xl);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

/* the two thin rings are the only decoration: flat, no shadow, and they mark the block as "nothing here yet" */
/* a soft round tinted icon, as in TimoDesk: no frame, no rings */
.eo-empty__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--eo-space-base);
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border: 0;
    border-radius: 50%;
}

.eo-empty__icon .svg-icon {
    width: 20px;
    height: 20px;
}

.eo-empty__title {
    margin-bottom: var(--eo-space-xs);
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-semibold);
    line-height: var(--eo-lh-tight);
    color: var(--eo-text);
    text-wrap: balance;
}

.eo-empty__text {
    max-width: 400px;
    margin-bottom: var(--eo-space-lg);
    font-size: var(--eo-fs-md);
    line-height: var(--eo-lh-normal);
    color: var(--eo-text-muted);
    text-wrap: balance;
}

.eo-empty__title:last-child,
.eo-empty__text:last-child {
    margin-bottom: 0;
}

/* inside a card or a table row: same look, quieter */
.eo-empty--sm {
    padding: var(--eo-space-xl) var(--eo-space-base);
}

.eo-empty--sm .eo-empty__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 0 var(--eo-space-md);
}

.eo-empty--sm .eo-empty__icon::before,
.eo-empty--sm .eo-empty__icon::after {
    display: none;
}

.eo-empty--sm .eo-empty__icon .svg-icon {
    width: 18px;
    height: 18px;
}

.eo-empty--sm .eo-empty__title {
    margin-bottom: var(--eo-space-xs);
    font-size: var(--eo-fs-base);
}

.eo-empty--sm .eo-empty__text {
    margin-bottom: var(--eo-space-md);
    font-size: var(--eo-fs-md);
}

@media (max-width: 575.98px) {
    .eo-content > .eo-empty,
    .eo-content > .eo-stack > .eo-empty,
    .eo-setpage > .eo-empty,
    .eo-setpage > .eo-stack > .eo-empty,
    .eo-grid--3-1 > .eo-stack > .eo-empty,
    .eo-desk__panel > .eo-empty,
    .eo-content > div:not([class]) > .eo-empty,
    .eo-setpage > div:not([class]) > .eo-empty {
        padding: var(--eo-space-3xl) var(--eo-space-base);
    }
}

.eo-skel {
    display: block;
    height: 12px;
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius-sm);
    animation: eo-pulse 1.4s ease-in-out infinite;
}

.eo-skel--title { height: 18px; width: 40%; }
.eo-skel--w75 { width: 75%; }
.eo-skel--w50 { width: 50%; }
.eo-skel--w25 { width: 25%; }

.eo-skel-table {
    display: flex;
    flex-direction: column;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-skel-table__row {
    display: grid;
    grid-template-columns: 24px 1.2fr 2fr 1fr 0.8fr;
    gap: var(--eo-space-base);
    align-items: center;
    height: var(--eo-row-h);
    padding: 0 var(--eo-space-md);
    border-bottom: 1px solid var(--eo-border);
}

.eo-skel-table__row:last-child {
    border-bottom: 0;
}

.eo-skel-table__row--head {
    height: 38px;
    background: var(--eo-surface-2);
}

.eo-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--eo-border-strong);
    border-right-color: transparent;
    border-radius: 50%;
    animation: eo-spin 0.7s linear infinite;
}

/* ========================================================================== */
/* UI KIT PAGE */
/* ========================================================================== */

.eo-kit {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--eo-space-xl);
    align-items: start;
}

.eo-kit__nav {
    position: sticky;
    top: calc(var(--eo-topbar-h) + var(--eo-space-base));
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
}

.eo-kit__nav a {
    padding: 4px var(--eo-space-sm);
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
    border-radius: var(--eo-radius-sm);
}

.eo-kit__nav a:hover {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-bg-hover);
}

.eo-kit__section {
    padding-bottom: var(--eo-space-2xl);
    margin-bottom: var(--eo-space-2xl);
    border-bottom: 1px solid var(--eo-border);
    scroll-margin-top: calc(var(--eo-topbar-h) + var(--eo-space-base));
}

.eo-kit__section:last-child {
    border-bottom: 0;
}

.eo-kit__title {
    margin-bottom: var(--eo-space-xs);
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
}

.eo-kit__lead {
    max-width: 720px;
    margin-bottom: var(--eo-space-base);
    color: var(--eo-text-muted);
}

.eo-kit__demo {
    padding: var(--eo-space-base);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-kit__demo--plain {
    padding: 0;
    background: none;
    border: 0;
}

.eo-kit__code {
    padding: var(--eo-space-sm) var(--eo-space-md);
    margin: var(--eo-space-sm) 0 0;
    overflow-x: auto;
    font-family: Consolas, 'Courier New', monospace;
    font-size: var(--eo-fs-sm);
    line-height: 1.6;
    color: var(--eo-text);
    white-space: pre;
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-kit__label {
    margin: var(--eo-space-base) 0 var(--eo-space-sm);
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
}

.eo-kit__shell {
    display: grid;
    grid-template-columns: 180px 1fr;
    height: 220px;
    overflow: hidden;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-kit__shell .eo-sidebar {
    position: static;
    width: auto;
    height: auto;
    transform: none;
}

.eo-kit__shell .eo-topbar {
    position: static;
    padding: 0 var(--eo-space-base);
}

.eo-kit__shell-body {
    padding: var(--eo-space-base);
    background: var(--eo-bg);
}

.eo-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--eo-space-md);
}

.eo-swatch {
    overflow: hidden;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-swatch__chip {
    height: 56px;
    border-bottom: 1px solid var(--eo-border);
}

.eo-swatch__meta {
    padding: var(--eo-space-sm) var(--eo-space-md);
    font-size: var(--eo-fs-sm);
}

.eo-swatch__chip--brand { background: var(--eo-brand); }
.eo-swatch__chip--accent { background: var(--eo-accent); }
.eo-swatch__chip--success { background: var(--eo-success); }
.eo-swatch__chip--warning { background: var(--eo-warning); }
.eo-swatch__chip--danger { background: var(--eo-danger); }
.eo-swatch__chip--info { background: var(--eo-info); }
.eo-swatch__chip--neutral { background: var(--eo-neutral); }
.eo-swatch__chip--text { background: var(--eo-text); }
.eo-swatch__chip--muted { background: var(--eo-text-muted); }
.eo-swatch__chip--border { background: var(--eo-border); }
.eo-swatch__chip--bg { background: var(--eo-bg); }

.eo-option {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-md);
    padding: var(--eo-space-base);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-option__chips {
    display: grid;
    grid-template-columns: 2fr 1fr;
    height: 64px;
    overflow: hidden;
    border-radius: var(--eo-radius);
}

.eo-option__brand { background: var(--eo-brand); }
.eo-option__accent { background: var(--eo-accent); }

.eo-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--eo-space-xs);
}

.eo-icon-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eo-space-xs);
    padding: var(--eo-space-sm);
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
    text-align: center;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-icon-grid__item .svg-icon {
    width: 20px;
    height: 20px;
    color: var(--eo-text);
}

@media (max-width: 1279.98px) {
    .eo-kit { grid-template-columns: minmax(0, 1fr); }
    .eo-kit__nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 991.98px) {
    .eo-kit__shell { grid-template-columns: minmax(0, 1fr); height: auto; }
    .eo-kit__shell .eo-sidebar { display: none; }
}

/* ========================================================================== */
/* ANIMATIONS */
/* ========================================================================== */

@keyframes eo-spin {
    to { transform: rotate(360deg); }
}

@keyframes eo-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@keyframes eo-slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes eo-rise {
    from { opacity: 0; margin-bottom: -8px; }
    to { opacity: 1; margin-bottom: 0; }
}

@keyframes eo-saved {
    from { background-color: var(--eo-success-10); }
    to { background-color: transparent; }
}

@keyframes eo-saved-mark {
    0% { opacity: 0; transform: scale(0.4); }
    14% { opacity: 1; transform: scale(1.18); }
    26% { transform: scale(1); }
    78% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.85); }
}

@keyframes eo-saved-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes eo-saved-line {
    0% { opacity: 1; transform: scaleX(0); }
    28% { opacity: 1; transform: scaleX(1); }
    72% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
}

@keyframes eo-inline-sweep {
    from { left: -30%; }
    to { left: 100%; }
}

@keyframes eo-inline-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

@media print {
    .eo-sidebar,
    .eo-topbar,
    .eo-toolbar,
    .eo-bulkbar,
    .eo-toasts,
    .eo-pager {
        display: none !important;
    }

    .eo-table-wrap {
        max-height: none;
        overflow: visible;
        border: 0;
    }
}

/* 00 core */
/* ========================================================================== */
/* AUTH PAGES (login, signup, OTP, reset, setup wizard, admin login) */
/* ========================================================================== */

.eo-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--eo-space-xl);
    min-height: 100vh;
    padding: var(--eo-space-2xl) var(--eo-space-base);
}

.eo-auth__brand {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-bold);
    color: var(--eo-text);
}

.eo-auth__card {
    width: 100%;
    max-width: 420px;
    padding: var(--eo-space-2xl);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-auth__card--wide {
    max-width: 640px;
}

.eo-auth__title {
    margin: 0 0 var(--eo-space-xs);
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-semibold);
}

.eo-auth__sub {
    margin: 0 0 var(--eo-space-xl);
    color: var(--eo-text-muted);
}

/* the login page: a deep green side with a sample parcel label, the form in a white box */
.eo-auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--eo-surface);
}

.eo-auth-split__aside {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-base);
    padding: var(--eo-space-lg);
    color: var(--eo-on-brand);
    background: var(--eo-brand-deep);
}

.eo-auth-split__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eo-space-xl);
    padding: var(--eo-space-2xl) var(--eo-space-lg) var(--eo-space-lg);
}

.eo-auth-split__form {
    width: 100%;
    max-width: 400px;
    animation: eo-auth-rise 400ms var(--eo-ease) both;
}

/* phones keep the form flat: a box would take width the fields need */
@media (min-width: 576px) {
    .eo-auth-split__main {
        background: var(--eo-bg);
    }

    .eo-auth-split__form {
        max-width: 440px;
        padding: var(--eo-space-2xl);
        background: var(--eo-surface);
        border: 1px solid var(--eo-border);
        border-radius: var(--eo-radius-xl);
    }
}

/* phones: the form slides up over the green band like an app's bottom sheet */
@media (max-width: 575.98px) {
    .eo-auth-split__aside {
        padding-bottom: var(--eo-space-3xl);
    }

    .eo-auth-split__main {
        position: relative;
        margin-top: calc(var(--eo-space-xl) * -1);
        background: var(--eo-surface);
        border-radius: var(--eo-radius-xl) var(--eo-radius-xl) 0 0;
    }
}

.eo-auth-split .eo-auth__title {
    font-size: var(--eo-fs-4xl);
    font-weight: var(--eo-fw-bold);
    line-height: var(--eo-lh-normal);
}

.eo-auth-split .eo-auth__sub {
    margin-bottom: var(--eo-space-2xl);
    font-size: var(--eo-fs-base);
}

.eo-auth-split .eo-label {
    font-size: var(--eo-fs-base);
}

.eo-auth-split .eo-label__req {
    display: none;
}

/* 16px text stops iPhones zooming the page when a box is tapped */
.eo-auth-split .eo-control {
    height: var(--eo-control-h-xl);
    padding-inline: var(--eo-space-base);
    font-size: var(--eo-fs-lg);
    background-color: var(--eo-surface-2);
    border-radius: var(--eo-radius);
    transition: background-color var(--eo-dur) var(--eo-ease), border-color var(--eo-dur) var(--eo-ease), box-shadow var(--eo-dur) var(--eo-ease);
}

.eo-auth-split .eo-control:focus {
    background-color: var(--eo-surface);
}

.eo-auth-split .eo-input-icon > .eo-control {
    padding-left: 44px;
}

/* the box's own padding rule above would otherwise let typed text run under the eye */
.eo-auth-split .eo-password > .eo-control {
    padding-right: 48px;
}

.eo-auth-split .eo-input-icon > .svg-icon {
    left: var(--eo-space-base);
    width: 18px;
    height: 18px;
    transition: color var(--eo-dur) var(--eo-ease);
}

.eo-auth-split .eo-input-icon:focus-within > .svg-icon {
    color: var(--eo-brand);
}

.eo-auth-split .eo-field.is-invalid .eo-input-icon > .svg-icon {
    color: var(--eo-danger-strong);
}

/* browsers paint saved logins blue or yellow; an inset shadow is the only way to cover it */
.eo-auth-split .eo-control:-webkit-autofill {
    -webkit-text-fill-color: var(--eo-text);
    box-shadow: inset 0 0 0 100px var(--eo-surface-2);
}

.eo-auth-split .eo-control:-webkit-autofill:focus {
    box-shadow: inset 0 0 0 100px var(--eo-surface), var(--eo-focus);
}

.eo-auth-split .eo-password__toggle {
    width: 48px;
    height: var(--eo-control-h-xl);
    border-radius: 0 var(--eo-radius) var(--eo-radius) 0;
}

.eo-auth-split .eo-btn--primary {
    height: var(--eo-control-h-xl);
    margin-top: var(--eo-space-xs);
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    border-radius: var(--eo-radius);
    transition: background-color var(--eo-dur) var(--eo-ease), box-shadow var(--eo-dur) var(--eo-ease), transform var(--eo-dur) var(--eo-ease);
}

.eo-auth-split .eo-btn--primary:hover {
    box-shadow: var(--eo-shadow-button);
    transform: translateY(-1px);
}

.eo-auth-split .eo-btn--primary:active {
    box-shadow: none;
    transform: translateY(0);
}

/* covers the quieter second button too, like the email form on the forgot password page */
.eo-auth-split .eo-btn--block {
    height: var(--eo-control-h-xl);
    font-size: var(--eo-fs-lg);
    border-radius: var(--eo-radius);
}

.eo-auth-split .eo-control--code {
    font-weight: var(--eo-fw-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
}

.eo-auth-split .eo-control--code::placeholder {
    letter-spacing: normal;
}

.eo-auth-split .eo-more {
    margin-top: var(--eo-space-base);
}

.eo-auth-split__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--eo-space-sm) var(--eo-space-base);
    margin-top: var(--eo-space-xl);
    padding-top: var(--eo-space-lg);
    border-top: 1px solid var(--eo-border);
}

/* a wrong password gets a small shake as well as the message */
.eo-auth-split form.is-shaking {
    animation: eo-auth-shake 320ms var(--eo-ease);
}

.eo-auth-split .eo-btn--primary .svg-icon {
    transition: transform var(--eo-dur-slow) var(--eo-ease);
}

.eo-auth-split .eo-btn--primary:hover .svg-icon {
    transform: translate(4px, -0.15em);
}

.eo-auth-split .eo-auth__switch {
    margin-top: var(--eo-space-xl);
    padding-top: var(--eo-space-lg);
    border-top: 1px solid var(--eo-border);
}

.eo-auth-split a {
    font-weight: var(--eo-fw-medium);
}

.eo-auth-split__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--eo-space-xs) var(--eo-space-base);
    width: 100%;
    margin-top: auto;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-auth-split__foot-links {
    display: flex;
    gap: var(--eo-space-md);
}

.eo-auth-split__foot a {
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.eo-auth-split__foot a + a {
    padding-left: var(--eo-space-md);
    border-left: 1px solid var(--eo-border-strong);
}

.eo-auth-split__foot a:hover {
    color: var(--eo-text);
}

.eo-auth-split__brand {
    display: block;
    align-self: flex-start;
}

/* a fixed height holds the logo's place, so the page does not jump when it arrives from the CDN */
.eo-auth-split .eo-brand-logo {
    align-self: flex-start;
    height: 38px;
    max-width: none;
    max-height: none;
}

.eo-auth-split__caps {
    display: none;
    margin: calc(var(--eo-space-sm) * -1) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-warning-strong);
}

.eo-auth-split__caps.is-shown {
    display: block;
}

.eo-auth-pitch {
    animation: eo-auth-rise 400ms var(--eo-ease) both;
}

.eo-auth-pitch__title {
    margin: 0;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    line-height: var(--eo-lh-normal);
    color: inherit;
}

.eo-auth-pitch__mark {
    color: var(--eo-side-active-icon);
}

.eo-auth-pitch__text,
.eo-feature-deck {
    display: none;
}

.eo-feature-deck {
    width: 100%;
    max-width: 620px;
}

/* --eo-tilt-x and --eo-tilt-y run from -0.5 to 0.5 and come from the cursor (dashboard.js) */
.eo-ship-stack {
    position: relative;
    margin-bottom: var(--eo-space-lg);
    perspective: 1000px;
    animation: eo-auth-rise 500ms var(--eo-ease) both;
}

/* every card sits in the same grid cell, so the tallest sets the height and the page never jumps */
.eo-ship-deck {
    position: relative;
    z-index: 1;
    display: grid;
    transform: rotateX(calc(var(--eo-tilt-y, 0) * -7deg)) rotateY(calc(var(--eo-tilt-x, 0) * 7deg));
    transition: transform 240ms ease-out;
}

/* two more labels peeking out from under the top one */
.eo-ship-stack::before,
.eo-ship-stack::after {
    content: "";
    position: absolute;
    height: 40px;
    border-radius: 0 0 var(--eo-radius-xl) var(--eo-radius-xl);
    transition: transform 240ms ease-out;
}

.eo-ship-stack::before {
    right: var(--eo-space-base);
    bottom: -10px;
    left: var(--eo-space-base);
    background: color-mix(in srgb, var(--eo-on-brand) 55%, var(--eo-brand-deep));
    transform: translate(calc(var(--eo-tilt-x, 0) * -8px), calc(var(--eo-tilt-y, 0) * -4px));
}

.eo-ship-stack::after {
    right: var(--eo-space-2xl);
    bottom: -20px;
    left: var(--eo-space-2xl);
    background: color-mix(in srgb, var(--eo-on-brand) 28%, var(--eo-brand-deep));
    box-shadow: var(--eo-shadow-label);
    transform: translate(calc(var(--eo-tilt-x, 0) * -16px), calc(var(--eo-tilt-y, 0) * -8px));
}

.eo-ship-label {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--eo-text);
    background: var(--eo-surface);
    border-radius: var(--eo-radius-xl);
    visibility: hidden;
}

/* the top card peels off up and to the left, and the next one rises out of the stack underneath it */
.eo-ship-label.is-active {
    z-index: 1;
    visibility: visible;
    animation: eo-card-in 620ms var(--eo-ease-spring) both;
}

.eo-ship-label.is-leaving {
    z-index: 2;
    visibility: visible;
    box-shadow: var(--eo-shadow-label);
    animation: eo-card-out 420ms var(--eo-ease) both;
}

.eo-ship-label__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-base);
    padding: var(--eo-space-lg) var(--eo-space-xl);
    border-bottom: 1px dashed var(--eo-border-strong);
}

.eo-ship-label__title {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    min-width: 0;
}

.eo-ship-label__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-radius: var(--eo-radius-lg);
}

.eo-ship-label__icon > .svg-icon {
    width: 22px;
    height: 22px;
}

.eo-ship-label.is-active .eo-ship-label__icon {
    animation: eo-auth-dot 480ms var(--eo-ease-spring) 120ms both;
}

/* the ring stops at 92, the sample score on the fraud check card */
.eo-ship-label__ring {
    position: absolute;
    inset: 0;
    fill: none;
    stroke: var(--eo-border);
    stroke-width: 3.5;
    transform: rotate(-90deg);
}

.eo-ship-label__ring-value {
    stroke: var(--eo-success);
    stroke-dasharray: 100;
    stroke-dashoffset: 8;
    stroke-linecap: round;
}

.eo-ship-label.is-active .eo-ship-label__ring-value {
    animation: eo-ring-fill 1100ms var(--eo-ease) 200ms both;
}

/* two half circles cut out of the label's edges, on the tear line */
.eo-ship-label__head::before,
.eo-ship-label__head::after {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 16px;
    height: 16px;
    background: var(--eo-brand-deep);
    border-radius: 50%;
}

.eo-ship-label__head::before { left: -8px; }
.eo-ship-label__head::after { right: -8px; }

.eo-ship-label__name {
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
}

.eo-ship-label__address {
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
}

.eo-ship-label__money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--eo-space-xs);
    flex-shrink: 0;
    font-size: var(--eo-fs-3xl);
    font-variant-numeric: tabular-nums;
}

.eo-ship-label__tag {
    padding: 0 var(--eo-space-sm);
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
    background: var(--eo-bg);
    border-radius: var(--eo-radius-pill);
}

/* shorter cards spread their rows to fill the same height as the tallest */
.eo-ship-label__steps {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: var(--eo-space-base) var(--eo-space-xl);
    list-style: none;
}

/* timeline rows stretch instead, so the line between the ticks never breaks */
.eo-ship-label__steps--track {
    justify-content: flex-start;
}

.eo-ship-label__steps--track li:not(:last-child) {
    flex: 1;
}

.eo-ship-label__steps li {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--eo-space-base);
    padding: 0 0 var(--eo-space-sm) var(--eo-space-xl);
    font-size: var(--eo-fs-md);
}

/* the animations sit on the active card only, so they play again each time a card comes round */
.eo-ship-label.is-active .eo-ship-label__steps li {
    animation: eo-row-in 420ms var(--eo-ease-spring) both;
    animation-delay: calc(240ms + var(--eo-step) * 90ms);
}

.eo-ship-label__bar {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: var(--eo-space-xl);
    height: 3px;
    overflow: hidden;
    background: var(--eo-bg);
    border-radius: var(--eo-radius-pill);
}

.eo-ship-label__bar > span {
    display: block;
    width: var(--eo-bar, 0);
    height: 100%;
    background: var(--eo-brand);
    border-radius: var(--eo-radius-pill);
    transform-origin: left;
}

.eo-ship-label.is-active .eo-ship-label__bar > span {
    animation: eo-bar-grow 800ms var(--eo-ease) both;
    animation-delay: calc(320ms + var(--eo-step) * 90ms);
}

.eo-ship-label__dot {
    position: absolute;
    top: 3px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--eo-on-brand);
    background: var(--eo-success);
    border-radius: 50%;
}

.eo-ship-label.is-active .eo-ship-label__dot {
    animation: eo-auth-dot 420ms var(--eo-ease-spring) both;
    animation-delay: calc(280ms + var(--eo-step) * 90ms);
}

.eo-ship-label__steps li .eo-ship-label__dot--plain {
    top: 7px;
    left: var(--eo-space-xs);
    width: 8px;
    height: 8px;
    background: var(--eo-border-strong);
}

.eo-ship-label__steps li.eo-ship-label__row--success .eo-ship-label__dot--plain { background: var(--eo-success); }
.eo-ship-label__steps li.eo-ship-label__row--warning .eo-ship-label__dot--plain { background: var(--eo-warning); }
.eo-ship-label__steps li.eo-ship-label__row--danger .eo-ship-label__dot--plain { background: var(--eo-danger); }

/* a colored result reads as a small pill, like the status badges inside the panel */
.eo-ship-label__row--success .eo-ship-label__meta,
.eo-ship-label__row--warning .eo-ship-label__meta,
.eo-ship-label__row--danger .eo-ship-label__meta {
    padding: 0 var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    line-height: 20px;
    border-radius: var(--eo-radius-pill);
}

.eo-ship-label__row--success .eo-ship-label__meta { color: var(--eo-success-strong); background: var(--eo-success-10); }
.eo-ship-label__row--warning .eo-ship-label__meta { color: var(--eo-warning-strong); background: var(--eo-warning-10); }
.eo-ship-label__row--danger .eo-ship-label__meta { color: var(--eo-danger-strong); background: var(--eo-danger-10); }

/* chat cards: the customer's words sit in a speech bubble and pop in */
.eo-ship-label__steps--chat-meta li:not(:last-child),
.eo-ship-label__steps--chat-label li:not(:last-child) {
    align-items: center;
}

.eo-ship-label__steps--chat-meta li:not(:last-child) .eo-ship-label__dot--plain,
.eo-ship-label__steps--chat-label li:not(:last-child) .eo-ship-label__dot--plain {
    top: 9px;
}

.eo-ship-label__steps--chat-meta li:not(:last-child) .eo-ship-label__meta,
.eo-ship-label__steps--chat-label li:not(:last-child) .eo-ship-label__text {
    padding: 2px var(--eo-space-md);
    color: var(--eo-text-2);
    background: var(--eo-bg);
    border-radius: var(--eo-radius-xl) var(--eo-radius-xl) var(--eo-radius-xl) 2px;
    transform-origin: left bottom;
}

.eo-ship-label.is-active .eo-ship-label__steps--chat-meta li:not(:last-child) .eo-ship-label__meta,
.eo-ship-label.is-active .eo-ship-label__steps--chat-label li:not(:last-child) .eo-ship-label__text {
    animation: eo-auth-dot 420ms var(--eo-ease-spring) both;
    animation-delay: calc(300ms + var(--eo-step) * 90ms);
}

.eo-ship-label__dot .svg-icon {
    width: 10px;
    height: 10px;
    stroke-width: 3.5;
}

.eo-ship-label__steps--track li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px;
    bottom: -3px;
    left: 7px;
    width: 2px;
    background: var(--eo-success-25);
    transform-origin: top;
}

.eo-ship-label.is-active .eo-ship-label__steps--track li:not(:last-child)::after {
    animation: eo-auth-line 220ms var(--eo-ease) both;
    animation-delay: calc(360ms + var(--eo-step) * 90ms);
}

.eo-ship-label__steps li:nth-child(1) { --eo-step: 0; }
.eo-ship-label__steps li:nth-child(2) { --eo-step: 1; }
.eo-ship-label__steps li:nth-child(3) { --eo-step: 2; }
.eo-ship-label__steps li:nth-child(4) { --eo-step: 3; }
.eo-ship-label__steps li:nth-child(5) { --eo-step: 4; }
.eo-ship-label__steps li:nth-child(6) { --eo-step: 5; }

.eo-ship-label__steps--track li:nth-last-child(2)::after {
    bottom: -7px;
}

.eo-ship-label__steps li:last-child {
    margin: 0 calc(var(--eo-space-sm) * -1);
    padding: var(--eo-space-xs) var(--eo-space-sm) var(--eo-space-xs) calc(var(--eo-space-xl) + var(--eo-space-sm));
    overflow: hidden;
    font-weight: var(--eo-fw-semibold);
    background: var(--eo-success-10);
    border-radius: var(--eo-radius-lg);
}

.eo-ship-label__steps li:last-child .eo-ship-label__dot {
    top: calc(50% - 8px);
    left: var(--eo-space-sm);
}

.eo-ship-label__steps li:last-child .eo-ship-label__dot--plain {
    top: calc(50% - 4px);
    left: var(--eo-space-md);
}

/* one soft sweep of light across the result row, the card's payoff */
.eo-ship-label__steps li:last-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
    transform: translateX(-100%);
    pointer-events: none;
}

.eo-ship-label.is-active .eo-ship-label__steps li:last-child::after {
    animation: eo-result-sweep 900ms var(--eo-ease) 1000ms both;
}

.eo-ship-label__meta {
    color: var(--eo-text-muted);
    font-variant-numeric: tabular-nums;
}

.eo-ship-label__steps li:last-child .eo-ship-label__meta {
    color: var(--eo-success-strong);
}

.eo-ship-label__steps li.eo-ship-label__row--warning:last-child {
    background: var(--eo-warning-10);
}

.eo-ship-label__steps li.eo-ship-label__row--warning:last-child .eo-ship-label__meta {
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--eo-warning-strong);
    background: none;
}

.eo-ship-label__barcode {
    position: relative;
    height: 20px;
    margin: 0 var(--eo-space-xl) var(--eo-space-lg);
    background: repeating-linear-gradient(90deg, var(--eo-text) 0 2px, transparent 2px 5px, var(--eo-text) 5px 6px, transparent 6px 9px, var(--eo-text) 9px 12px, transparent 12px 14px, var(--eo-text) 14px 15px, transparent 15px 19px);
}

/* one scan across the barcode once the last step has landed */
.eo-ship-label__barcode::after {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 0;
    width: 2px;
    background: var(--eo-success);
    opacity: 0;
}

.eo-ship-label.is-active .eo-ship-label__barcode::after {
    animation: eo-auth-scan 1000ms var(--eo-ease) 1100ms both;
}

/* one dot per card; the active one's bar fills up and dashboard.js moves on when it is full */
.eo-feature-dots {
    display: flex;
    justify-content: center;
    gap: var(--eo-space-sm);
    padding-top: var(--eo-space-base);
}

.eo-feature-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--eo-on-brand) 30%, transparent);
    border: 0;
    border-radius: var(--eo-radius-pill);
    cursor: pointer;
    transition: width var(--eo-dur-slow) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.eo-feature-dot:hover {
    background: color-mix(in srgb, var(--eo-on-brand) 60%, transparent);
}

.eo-feature-dot.is-active {
    width: 32px;
}

.eo-feature-dot__bar {
    position: absolute;
    inset: 0;
    background: var(--eo-side-active-icon);
    transform: scaleX(0);
    transform-origin: left;
}

.eo-feature-dot.is-active .eo-feature-dot__bar {
    animation: eo-auth-progress 6s linear both;
}

.eo-feature-deck:hover .eo-feature-dot__bar,
.eo-feature-deck.is-paused .eo-feature-dot__bar {
    animation-play-state: paused;
}

/* laptops: the longer forms like sign up fit a 768px screen with tighter spacing */
@media (min-width: 992px) and (max-height: 820px) {
    .eo-auth-split .eo-auth-split__form {
        padding-block: var(--eo-space-xl);
    }

    .eo-auth-split .eo-auth__sub {
        margin-bottom: var(--eo-space-lg);
    }

    .eo-auth-split .eo-auth__switch,
    .eo-auth-split .eo-auth-split__actions {
        margin-top: var(--eo-space-base);
        padding-top: var(--eo-space-base);
    }
}

/* short laptop screens: drop the extra lines so the page fits without scrolling */
@media (min-width: 992px) and (max-height: 760px) {
    .eo-auth-split .eo-auth-pitch__text {
        display: none;
    }

    .eo-auth-split .eo-auth-split__aside {
        padding-block: var(--eo-space-2xl);
    }

    .eo-auth-split .eo-auth-split__main {
        gap: var(--eo-space-sm);
        padding-block: var(--eo-space-base);
    }
}

/* big monitors: the label grows so it does not look lost on the wide side */
@media (min-width: 1600px) {
    .eo-ship-label__steps li {
        padding-bottom: var(--eo-space-md);
        font-size: var(--eo-fs-base);
    }
}

@keyframes eo-auth-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes eo-auth-dot {
    from { opacity: 0; transform: scale(0.4); }
}

@keyframes eo-card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes eo-card-out {
    to { opacity: 0; transform: translate(-40px, -24px) rotate(-5deg) scale(0.98); }
}

@keyframes eo-row-in {
    from { opacity: 0; transform: translateX(-12px); }
}

@keyframes eo-bar-grow {
    from { transform: scaleX(0); }
}

@keyframes eo-ring-fill {
    from { stroke-dashoffset: 100; }
}

@keyframes eo-result-sweep {
    to { transform: translateX(100%); }
}

@keyframes eo-auth-line {
    from { transform: scaleY(0); }
}

@keyframes eo-auth-scan {
    0% { left: 0; opacity: 0; }
    10%, 90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes eo-auth-shake {
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@keyframes eo-auth-progress {
    to { transform: scaleX(1); }
}

/* with no bar animation nothing moves the cards on, so the first one simply stays */
@media (prefers-reduced-motion: reduce) {
    .eo-auth-split__form,
    .eo-auth-pitch,
    .eo-ship-stack,
    .eo-ship-label.is-active,
    .eo-ship-label.is-leaving,
    .eo-ship-label.is-active .eo-ship-label__icon,
    .eo-ship-label.is-active .eo-ship-label__ring-value,
    .eo-ship-label.is-active .eo-ship-label__steps li,
    .eo-ship-label.is-active .eo-ship-label__bar > span,
    .eo-ship-label.is-active .eo-ship-label__dot,
    .eo-ship-label.is-active .eo-ship-label__steps--track li:not(:last-child)::after,
    .eo-ship-label.is-active .eo-ship-label__steps li:last-child::after,
    .eo-ship-label.is-active .eo-ship-label__steps--chat-meta li:not(:last-child) .eo-ship-label__meta,
    .eo-ship-label.is-active .eo-ship-label__steps--chat-label li:not(:last-child) .eo-ship-label__text,
    .eo-ship-label.is-active .eo-ship-label__barcode::after,
    .eo-feature-dot.is-active .eo-feature-dot__bar,
    .eo-auth-split form.is-shaking {
        animation: none;
    }

    .eo-ship-label.is-leaving {
        visibility: hidden;
    }

    .eo-feature-dot.is-active .eo-feature-dot__bar {
        transform: scaleX(1);
    }
}

@media (min-width: 992px) {
    .eo-auth-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        grid-template-rows: none;
        background: var(--eo-bg);
    }

    /* on a long form the page scrolls and the panel stays in view */
    .eo-auth-split__aside {
        position: sticky;
        top: 0;
        align-self: start;
        min-height: 100vh;
        min-height: 100dvh;
        gap: var(--eo-space-xl);
        padding-block: var(--eo-space-3xl);
        /* a 620px column centred in the panel, so a wide panel has no empty right side */
        padding-inline: max(clamp(48px, 5vw, 140px), calc((100% - 620px) / 2));
        background-image: radial-gradient(color-mix(in srgb, var(--eo-on-brand) 10%, transparent) 1px, transparent 1px);
        background-size: 22px 22px;
    }

    .eo-auth-split__main {
        padding: var(--eo-space-3xl) var(--eo-space-3xl) var(--eo-space-lg);
    }

    /* the box stays centred in the space above the footer */
    .eo-auth-split__form {
        margin-block: auto;
    }

    .eo-auth-split__foot {
        margin-top: 0;
    }

    /* logo at the top, the headline and label centred in the space below it */
    .eo-auth-split__aside > :first-child {
        margin-bottom: auto;
    }

    .eo-auth-split__aside > :last-child {
        margin-bottom: auto;
    }

    .eo-auth-pitch {
        max-width: 680px;
    }

    .eo-auth-pitch__title {
        font-size: var(--eo-fs-display);
        font-weight: var(--eo-fw-bold);
        line-height: 1.35;
    }

    .eo-auth-pitch__mark {
        display: block;
    }

    .eo-auth-pitch__text {
        display: block;
        margin: var(--eo-space-md) 0 0;
        font-size: var(--eo-fs-lg);
        text-wrap: balance;
        color: color-mix(in srgb, var(--eo-on-brand) 82%, transparent);
    }

    .eo-feature-deck {
        display: block;
    }
}

.eo-auth__switch {
    margin: var(--eo-space-lg) 0 0;
    text-align: center;
    color: var(--eo-text-muted);
}

@media (max-width: 575.98px) {
    .eo-auth__card { padding: var(--eo-space-lg); }
}

/* ========================================================================== */
/* SETUP WIZARD STEPS */
/* ========================================================================== */

.eo-slug-preview {
    font-family: var(--eo-font);
    color: var(--eo-text-muted);
}

/* ========================================================================== */
/* ONBOARDING: one prefilled page, the owner's own shop updating beside the form */
/* ========================================================================== */

.eo-setup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--eo-bg);
}

.eo-setup__rail {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-base);
    padding: var(--eo-space-lg) var(--eo-space-lg) var(--eo-space-3xl);
    color: var(--eo-on-brand);
    background: var(--eo-brand-deep);
}

.eo-setup__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-base);
}

.eo-setup__brand {
    display: block;
    flex-shrink: 0;
}

.eo-setup .eo-brand-logo {
    height: 34px;
    max-width: none;
    max-height: none;
}

.eo-setup__logout button {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    padding: 0;
    font: inherit;
    font-size: var(--eo-fs-md);
    color: color-mix(in srgb, var(--eo-on-brand) 75%, transparent);
    background: none;
    border: 0;
    cursor: pointer;
}

.eo-setup__logout button:hover {
    color: var(--eo-on-brand);
}

.eo-setup__heading {
    margin: 0 0 var(--eo-space-xs);
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-bold);
    line-height: 1.35;
    color: inherit;
}

.eo-setup__lead {
    margin: 0;
    color: color-mix(in srgb, var(--eo-on-brand) 82%, transparent);
}

.eo-setup-card,
.eo-setup__after {
    display: none;
}

.eo-setup-card {
    color: var(--eo-text);
    background: var(--eo-surface);
    border-radius: var(--eo-radius-xl);
    box-shadow: var(--eo-shadow-label);
    animation: eo-auth-rise 500ms var(--eo-ease) both;
}

.eo-setup-card__head {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-lg);
    border-bottom: 1px solid var(--eo-border);
}

.eo-setup-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-bold);
    color: var(--eo-on-brand);
    background: var(--eo-brand);
    border-radius: var(--eo-radius-lg);
}

.eo-setup-card__who {
    flex: 1 1 auto;
    min-width: 0;
}

.eo-setup-card__who strong,
.eo-setup-card__who > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-setup-card__who strong {
    font-size: var(--eo-fs-xl);
}

.eo-setup-card__who > span {
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
}

.eo-setup-card__status {
    flex-shrink: 0;
    padding: 0 var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    line-height: 22px;
    color: var(--eo-success-strong);
    background: var(--eo-success-10);
    border-radius: var(--eo-radius-pill);
}

.eo-setup-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-base) var(--eo-space-lg) var(--eo-space-lg);
}

.eo-setup-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    padding: 2px var(--eo-space-sm);
    font-size: var(--eo-fs-md);
    color: var(--eo-text-2);
    background: var(--eo-bg);
    border-radius: var(--eo-radius);
    animation: eo-auth-dot 300ms var(--eo-ease-spring) both;
}

.eo-setup-chip[hidden] {
    display: none;
}

.eo-setup-chip .svg-icon {
    width: 13px;
    height: 13px;
    color: var(--eo-success);
}

.eo-setup__after-title {
    display: block;
    margin-bottom: var(--eo-space-md);
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    color: color-mix(in srgb, var(--eo-on-brand) 82%, transparent);
}

.eo-setup__after ol {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: eo-after;
}

.eo-setup__after li {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    font-size: var(--eo-fs-base);
    color: color-mix(in srgb, var(--eo-on-brand) 82%, transparent);
    counter-increment: eo-after;
}

.eo-setup__after li::before {
    content: counter(eo-after);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: var(--eo-fs-sm);
    border: 1px solid color-mix(in srgb, var(--eo-on-brand) 30%, transparent);
    border-radius: 50%;
}

/* phones: the form slides up over the green band, and the button stays in reach */
.eo-setup__main {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--eo-space-xl) * -1);
    background: var(--eo-surface);
    border-radius: var(--eo-radius-xl) var(--eo-radius-xl) 0 0;
}

.eo-setup__panel {
    width: 100%;
    max-width: 640px;
    padding: var(--eo-space-xl) var(--eo-space-lg) 0;
    animation: eo-auth-rise 400ms var(--eo-ease) both;
}

.eo-setup__panel form.is-shaking {
    animation: eo-auth-shake 320ms var(--eo-ease);
}

.eo-setup__title {
    margin: 0 0 var(--eo-space-xs);
    font-size: var(--eo-fs-4xl);
    font-weight: var(--eo-fw-bold);
    line-height: var(--eo-lh-normal);
}

.eo-setup__sub {
    margin: 0 0 var(--eo-space-xl);
    color: var(--eo-text-muted);
}

.eo-setup__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--eo-space-base);
}

/* 16px text stops iPhones zooming the page when a box is tapped */
.eo-setup .eo-control {
    height: var(--eo-control-h-xl);
    font-size: var(--eo-fs-lg);
    background-color: var(--eo-surface-2);
}

.eo-setup .eo-control:focus {
    background-color: var(--eo-surface);
}

.eo-setup .eo-input-icon > .eo-control {
    padding-left: 44px;
}

.eo-setup .eo-input-icon > .svg-icon {
    left: var(--eo-space-base);
    width: 18px;
    height: 18px;
}

.eo-setup .eo-input-icon:focus-within > .svg-icon {
    color: var(--eo-brand);
}

.eo-setup .eo-field.is-invalid .eo-input-icon > .svg-icon {
    color: var(--eo-danger-strong);
}

.eo-setup .eo-label__req {
    display: none;
}

.eo-setup-link {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    margin-top: var(--eo-space-base);
    padding: var(--eo-space-md) var(--eo-space-base);
    background: var(--eo-brand-10);
    border-radius: var(--eo-radius);
}

.eo-setup-link__icon {
    flex-shrink: 0;
    color: var(--eo-brand);
}

.eo-setup-link__text {
    flex: 1 1 auto;
    min-width: 0;
}

.eo-setup-link__text > span,
.eo-setup-link__text > strong {
    display: block;
    overflow-wrap: anywhere;
}

.eo-setup-link__text > span {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-setup-link .eo-link-btn {
    flex-shrink: 0;
    font-weight: var(--eo-fw-medium);
}

.eo-setup-link__edit {
    padding-top: var(--eo-space-base);
}

.eo-setup__group {
    margin-top: var(--eo-space-xl);
    padding-top: var(--eo-space-xl);
    border-top: 1px solid var(--eo-border);
}

.eo-setup__group-title {
    margin: 0 0 var(--eo-space-xs);
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
}

.eo-setup__group-sub {
    margin: 0 0 var(--eo-space-base);
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
}

.eo-setup-choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--eo-space-sm);
}

/* the whole card is the switch's label, so a tap anywhere on it answers the question */
.eo-setup-choice {
    position: relative;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    transition: background-color var(--eo-dur) var(--eo-ease), border-color var(--eo-dur) var(--eo-ease);
}

.eo-setup-choice:hover {
    border-color: var(--eo-border-strong);
}

.eo-setup-choice:has(input:checked) {
    background: var(--eo-brand-10);
    border-color: var(--eo-brand);
}

.eo-setup-choice:has(input:focus-visible) {
    box-shadow: var(--eo-focus);
}

.eo-setup-choice__icon {
    position: absolute;
    top: var(--eo-space-md);
    left: var(--eo-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--eo-text-muted);
    background: var(--eo-bg);
    border-radius: var(--eo-radius);
    pointer-events: none;
    transition: color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.eo-setup-choice:has(input:checked) .eo-setup-choice__icon {
    color: var(--eo-on-brand);
    background: var(--eo-brand);
}

.eo-setup-choice .eo-field,
.eo-setup-choice .eo-check {
    height: 100%;
    margin: 0;
}

.eo-setup-choice .eo-check {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--eo-space-md);
    width: 100%;
    min-height: 56px;
    padding: var(--eo-space-md) var(--eo-space-md) var(--eo-space-md) 56px;
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
}

.eo-setup-choice .eo-error:empty {
    display: none;
}

.eo-setup__cta {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: var(--eo-space-lg) calc(var(--eo-space-lg) * -1) 0;
    padding: var(--eo-space-md) var(--eo-space-lg);
    background: var(--eo-surface);
    border-top: 1px solid var(--eo-border);
}

.eo-setup__cta .eo-btn {
    height: 52px;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    border-radius: var(--eo-radius);
    transition: background-color var(--eo-dur) var(--eo-ease), box-shadow var(--eo-dur) var(--eo-ease), transform var(--eo-dur) var(--eo-ease);
}

.eo-setup__cta .eo-btn:hover {
    box-shadow: var(--eo-shadow-button);
    transform: translateY(-1px);
}

.eo-setup__cta .eo-btn:active {
    box-shadow: none;
    transform: translateY(0);
}

.eo-setup__cta .eo-btn .svg-icon {
    transition: transform var(--eo-dur-slow) var(--eo-ease);
}

.eo-setup__cta .eo-btn:hover .svg-icon {
    transform: translate(4px, -0.15em);
}

.eo-setup__note {
    margin: var(--eo-space-sm) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .eo-setup-card,
    .eo-setup-chip,
    .eo-setup__panel,
    .eo-setup__panel form.is-shaking {
        animation: none;
    }
}

@media (min-width: 576px) {
    .eo-setup__fields,
    .eo-setup-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* laptops: tighter spacing so the button is on screen without scrolling */
@media (min-width: 992px) and (max-height: 820px) {
    .eo-setup .eo-setup__rail {
        gap: var(--eo-space-base);
        padding-block: var(--eo-space-xl);
    }

    .eo-setup .eo-setup__panel {
        padding-block: var(--eo-space-lg);
    }

    .eo-setup .eo-setup__main {
        padding-block: var(--eo-space-base);
    }

    .eo-setup .eo-setup__title {
        font-size: var(--eo-fs-3xl);
    }

    .eo-setup .eo-setup__sub {
        margin-bottom: var(--eo-space-base);
    }

    .eo-setup .eo-setup__group {
        margin-top: var(--eo-space-base);
        padding-top: var(--eo-space-base);
    }

    .eo-setup .eo-setup__cta {
        margin-top: var(--eo-space-base);
    }

    .eo-setup .eo-setup__after-title {
        margin-bottom: var(--eo-space-sm);
    }
}

/* wide enough for both sides: the green side holds the shop card, and the form sits in a box */
@media (min-width: 992px) {
    .eo-setup {
        grid-template-columns: minmax(380px, 38%) minmax(0, 1fr);
        grid-template-rows: none;
    }

    .eo-setup__rail {
        position: sticky;
        top: 0;
        align-self: start;
        gap: var(--eo-space-xl);
        min-height: 100vh;
        min-height: 100dvh;
        padding: var(--eo-space-2xl) clamp(32px, 4vw, 72px);
        background-image: radial-gradient(color-mix(in srgb, var(--eo-on-brand) 10%, transparent) 1px, transparent 1px);
        background-size: 22px 22px;
    }

    .eo-setup__top {
        margin-bottom: auto;
    }

    .eo-setup__heading {
        font-size: var(--eo-fs-display);
    }

    .eo-setup__lead {
        font-size: var(--eo-fs-lg);
    }

    .eo-setup-card,
    .eo-setup__after {
        display: block;
    }

    .eo-setup__after {
        margin-bottom: auto;
    }

    .eo-setup__main {
        align-items: center;
        margin-top: 0;
        padding: var(--eo-space-xl);
        background: none;
        border-radius: 0;
    }

    .eo-setup__panel {
        padding: var(--eo-space-2xl);
        background: var(--eo-surface);
        border: 1px solid var(--eo-border);
        border-radius: var(--eo-radius-xl);
    }

    .eo-setup__cta {
        position: static;
        margin: var(--eo-space-xl) 0 0;
        padding: 0;
        border-top: 0;
    }
}

/* ========================================================================== */
/* TOP BAR BELL */
/* ========================================================================== */

.eo-bell__menu {
    width: 320px;
    max-width: calc(100vw - var(--eo-space-xl));
    padding: 0;
}

.eo-bell__head {
    padding: var(--eo-space-sm) var(--eo-space-md);
    border-bottom: 1px solid var(--eo-border);
}

.eo-bell__item {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    white-space: normal;
}

.eo-bell__empty {
    margin: 0;
    padding: var(--eo-space-lg) var(--eo-space-md);
    text-align: center;
}

.eo-bell__all {
    text-align: center;
    border-top: 1px solid var(--eo-border);
}

/* ========================================================================== */
/* TOP BAR CREDIT (04): SMS and call credit, one click to buy */
/* ========================================================================== */

.eo-credit-chip {
    position: relative;
}

.eo-credit-chip__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 var(--eo-space-md);
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

.eo-credit-chip__item + .eo-credit-chip__item {
    border-left: 1px solid var(--eo-border);
}

.eo-credit-chip__item .svg-icon {
    width: 15px;
    height: 15px;
    color: var(--eo-text-muted);
}

.eo-credit-chip__item.is-low,
.eo-credit-chip__item.is-low .svg-icon {
    color: var(--eo-danger-strong);
}

.eo-credit-menu {
    width: 320px;
    max-width: calc(100vw - var(--eo-space-xl));
    padding: 0;
    overflow: hidden;
}

.eo-credit-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-base);
    border-bottom: 1px solid var(--eo-border);
}

.eo-credit-menu__link {
    font-size: var(--eo-fs-md);
    color: var(--eo-brand);
    text-decoration: none;
}

.eo-credit-menu__link:hover {
    color: var(--eo-brand-strong);
    text-decoration: underline;
}

.eo-credit-menu__list {
    padding: var(--eo-space-xs) 0;
}

.eo-credit-menu__row {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-base);
}

.eo-credit-menu__row + .eo-credit-menu__row {
    border-top: 1px solid var(--eo-border);
}

.eo-credit-menu__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--eo-icon-box);
    height: var(--eo-icon-box);
    color: var(--eo-text-muted);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-credit-menu__row.is-low .eo-credit-menu__icon {
    color: var(--eo-danger-strong);
    background: var(--eo-danger-10);
    border-color: var(--eo-danger-25);
}

.eo-credit-menu__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    color: var(--eo-text);
    text-decoration: none;
}

.eo-credit-menu__text:hover {
    color: var(--eo-text);
}

.eo-credit-menu__text:hover .eo-credit-menu__value {
    text-decoration: underline;
}

.eo-credit-menu__label,
.eo-credit-menu__hint {
    font-size: var(--eo-fs-sm);
    line-height: var(--eo-lh-tight);
    color: var(--eo-text-muted);
}

.eo-credit-menu__value {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    line-height: var(--eo-lh-tight);
    font-variant-numeric: tabular-nums;
}

.eo-credit-menu__row.is-low .eo-credit-menu__value {
    color: var(--eo-danger-strong);
}

.eo-credit-menu__row .eo-btn {
    flex-shrink: 0;
}

.eo-credit-menu__foot {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md) var(--eo-space-base);
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
    text-decoration: none;
    background: var(--eo-surface-2);
    border-top: 1px solid var(--eo-border);
}

.eo-credit-menu__foot:hover {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

.eo-credit-menu__foot .svg-icon {
    width: 16px;
    height: 16px;
}

/* phone: only the SMS count stays in the bar; the menu shows both */
@media (max-width: 575.98px) {
    .eo-credit-chip__item {
        padding: 0 var(--eo-space-sm);
    }

    .eo-credit-chip__item--call {
        display: none;
    }
}

/* buy credit form: the price updates while the count is typed */
.eo-credit-total {
    padding: var(--eo-space-md);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-credit-total strong {
    font-size: var(--eo-fs-xl);
    font-variant-numeric: tabular-nums;
}

/* ========================================================================== */
/* ROLE FORM PERMISSION GROUPS */
/* ========================================================================== */

.eo-perm-group {
    padding: var(--eo-space-md) 0;
    border-top: 1px solid var(--eo-border);
}

.eo-perm-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    margin-bottom: var(--eo-space-sm);
}

.eo-perm-group__title {
    margin: 0;
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-semibold);
}

.eo-log-changes {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px var(--eo-space-sm);
    margin: 0;
    font-size: var(--eo-fs-sm);
}

.eo-log-changes dt {
    color: var(--eo-text-muted);
    font-weight: var(--eo-fw-normal, 400);
}

.eo-log-changes dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.eo-log-changes .svg-icon {
    width: 12px;
    height: 12px;
    color: var(--eo-text-muted);
    vertical-align: -1px;
}

.eo-log-changes__old {
    color: var(--eo-text-muted);
}

/* 05 super admin panel */
/* 05 super admin: the 30 day signup line on the dashboard */
.eo-linechart {
    display: block;
    width: 100%;
    height: 120px;
    color: var(--eo-brand);
}

/* 07 storefront landing pages */
/* panel screens of modules 07, 08 and 09 (landing editor, banners, boosters, payments) */

.lp-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: var(--eo-space-xl);
    align-items: start;
}

.lp-editor__preview {
    position: sticky;
    top: calc(var(--eo-topbar-h) + var(--eo-space-base));
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    overflow: hidden;
    background: var(--eo-surface);
}

.lp-editor__frame {
    width: 100%;
    height: calc(100vh - 140px);
    border: 0;
    display: block;
}

.lp-block[data-block-locked] {
    border-color: var(--eo-brand);
}

.lp-block__thumb {
    max-width: 160px;
    max-height: 100px;
    border-radius: var(--eo-radius);
    border: 1px solid var(--eo-border);
}

.sf-booster-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sf-booster {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-base);
    padding: var(--eo-space-md) var(--eo-space-base);
    border-bottom: 1px solid var(--eo-border);
}

.sf-booster:last-child {
    border-bottom: 0;
}

.sf-booster__text p {
    margin: 0;
}

.sf-admin-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--eo-radius-sm);
    margin-right: var(--eo-space-2xs);
}

.sf-admin-payments {
    list-style: none;
    padding: 0;
    margin: var(--eo-space-base) 0 0;
    display: grid;
    gap: var(--eo-space-sm);
}

[data-offer-field][hidden] {
    display: none;
}

@media (max-width: 1199.98px) {
    .lp-editor {
        grid-template-columns: 1fr;
    }

    .lp-editor__preview {
        position: static;
    }
}

/* 10 pos */
/* ========================================================================== */
/* 10 POS: full width sell screen, no side menu; works on a 1366 px laptop and a 10 inch tablet */
/* ========================================================================== */

.pos {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--eo-bg);
}

.pos__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--eo-space-md);
    padding: var(--eo-space-sm) var(--eo-space-base);
    background: var(--eo-surface);
    border-bottom: 1px solid var(--eo-border);
}

/* the drawer amount in the sell screen's bar: always in view while selling */
.pos__drawer {
    display: inline-flex;
    align-items: baseline;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-2xs) var(--eo-space-md);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.pos__drawer strong {
    font-size: var(--eo-fs-lg);
    font-variant-numeric: tabular-nums;
}

/* close form: what should be there and the difference from the count */
.pos-close {
    margin: 0;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.pos-close__row {
    display: flex;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: var(--eo-space-sm) var(--eo-space-md);
}

.pos-close__row + .pos-close__row {
    border-top: 1px solid var(--eo-border);
}

.pos-close dt {
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.pos-close dd {
    margin: 0;
    font-weight: var(--eo-fw-semibold);
    font-variant-numeric: tabular-nums;
}

.pos-close dd.is-short { color: var(--eo-danger-strong); }
.pos-close dd.is-over { color: var(--eo-warning-strong); }
.pos-close dd.is-matched { color: var(--eo-success-strong); }

.pos__title {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.pos__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--eo-space-base);
    flex: 1;
    min-height: 0;
    padding: var(--eo-space-base);
}

@media (min-width: 900px) {
    .pos__body { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }
}

.pos__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.pos__panel-head {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md);
    border-bottom: 1px solid var(--eo-border);
}

.pos__chips {
    display: flex;
    gap: var(--eo-space-xs);
    overflow-x: auto;
}

.pos__chip {
    flex: none;
    padding: var(--eo-space-2xs) var(--eo-space-md);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-pill);
    cursor: pointer;
}

.pos__chip.is-active {
    color: var(--eo-on-brand);
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

.pos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    /* each row as tall as its tile (square photo + name + price), so the next row never covers the text */
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md);
    overflow-y: auto;
}

/* nothing found: one centred message across the whole grid, not a word-wrapped line in the first cell */
.pos__empty {
    grid-column: 1 / -1;
    padding: var(--eo-space-2xl) var(--eo-space-base);
}

.pos__product {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    min-height: 88px;
    padding: var(--eo-space-sm);
    text-align: left;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-sm);
    cursor: pointer;
}

.pos__product:hover,
.pos__product:focus-visible {
    border-color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.pos__product.is-out {
    opacity: 0.55;
}

/* square photo on top of the tile; the same square pulses while loading */
/* flex-shrink 0: in a tall grid the tile is a flex column and would squash the picture into a thin strip */
.pos__product-img {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--eo-space-2xs);
    overflow: hidden;
    background: var(--eo-surface-2);
    border-radius: var(--eo-radius-sm);
}

.pos__product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos__product--skel {
    cursor: default;
    pointer-events: none;
}

.pos__product--skel .eo-skel + .eo-skel {
    margin-top: var(--eo-space-2xs);
}

.pos__product-name {
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
    line-height: var(--eo-lh-tight);
}

.pos__product-meta {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.pos__cart {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pos__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-sm) var(--eo-space-md);
    border-bottom: 1px solid var(--eo-border);
}

.pos__line.is-selected {
    background: var(--eo-brand-10);
}

.pos__line-name {
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
}

.pos__line-qty {
    width: 132px;
}

.pos__line-discount {
    width: 96px;
}

.pos__totals {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

.pos__total-row {
    display: flex;
    justify-content: space-between;
    padding: var(--eo-space-2xs) 0;
    font-size: var(--eo-fs-md);
}

.pos__totals .pos__total-row {
    padding: 0;
}

.pos__total-row--grand {
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-bold);
}

.pos__pay {
    min-height: var(--eo-control-h-lg);
    font-size: var(--eo-fs-xl);
}

.pos__methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: var(--eo-space-xs);
}

.pos__methods .eo-btn[aria-pressed="true"] {
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-color: var(--eo-brand);
}

.pos-pay__due {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-medium);
}

.pos-pay__due strong {
    font-size: 32px;
    font-weight: var(--eo-fw-bold);
}

.pos-pay__rows {
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.pos-pay__row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-sm) var(--eo-space-md);
}

.pos-pay__row + .pos-pay__row {
    border-top: 1px solid var(--eo-border);
}

.pos-pay__row.is-only [data-pos-split-remove] {
    visibility: hidden;
}

.pos-pay__method {
    font-weight: var(--eo-fw-medium);
}

.pos-pay__amount {
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-bold);
}

.pos-pay__notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs);
}

.pos-pay__notes[hidden] {
    display: none;
}

.pos-pay__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eo-space-sm);
}

.pos-pay__box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--eo-space-sm) var(--eo-space-md);
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-md);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.pos-pay__box strong {
    color: var(--eo-text);
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-bold);
}

.pos-pay__box.is-short strong {
    color: var(--eo-warning-strong);
}

.pos-pay__box.is-change strong {
    color: var(--eo-success-strong);
}

@media (max-width: 575.98px) {
    .pos-pay__row {
        grid-template-columns: 72px minmax(0, 1fr) auto;
    }

    .pos-pay__row [data-pos-split-account] {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* 58 or 80 mm receipt printed with window.print() */
.pos-receipt {
    margin: 0 auto;
    padding: var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    color: #000000;
    background: #FFFFFF;
}

.pos-receipt--80 { width: 80mm; }

.pos-receipt--58 { width: 58mm; }

.pos-receipt__center {
    text-align: center;
}

.pos-receipt__title {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-bold);
}

.pos-receipt__rule {
    margin: var(--eo-space-xs) 0;
    border-top: 1px dashed #000000;
}

.pos-receipt__row {
    display: flex;
    justify-content: space-between;
    gap: var(--eo-space-xs);
}

.pos-receipt__row--total {
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-bold);
}

.pos-receipt__actions {
    display: flex;
    justify-content: center;
    gap: var(--eo-space-sm);
    margin: var(--eo-space-base) 0;
}

@media print {
    .pos-receipt__actions { display: none; }

    .pos-receipt { padding: 0; }
}

/* 13 reseller dropshipping */
/* reseller (13) and affiliate (15) portal shell on the storefront host */
.eo-portal {
    min-height: 100vh;
    background: var(--eo-bg);
}

.eo-portal__head {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--eo-space-sm) var(--eo-space-base);
    background: var(--eo-surface);
    border-bottom: 1px solid var(--eo-border);
}

.eo-portal__head .eo-btn.is-active {
    color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-portal__body {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-base);
    max-width: var(--eo-content-max);
    margin: 0 auto;
    padding: var(--eo-space-base);
}

.eo-portal__narrow {
    width: 100%;
    max-width: 480px;
    margin: var(--eo-space-xl) auto;
}

/* 16 order management */

/* a combo line's open parts: "টি-শার্ট" then one picker per unit; an unpicked one stays orange until chosen */
.eo-combo-picks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.eo-combo-picks__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.eo-combo-picks__name {
    min-width: 88px;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-combo-picks .eo-control {
    width: auto;
    min-width: 120px;
    max-width: 180px;
}

.eo-combo-picks .eo-control.is-empty {
    color: var(--eo-warning-strong);
    border-color: var(--eo-warning);
    background-color: var(--eo-warning-10);
}

/* ORDER DESK, ORDER FORM AND ORDER DETAILS (module 16) */

.eo-grid--3-1 {
    display: grid;
    gap: var(--eo-space-lg);
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 991.98px) {
    .eo-grid--3-1 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.eo-order-form {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
}

.eo-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--eo-space-lg);
    align-items: start;
}

.eo-order-layout__main {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
    min-width: 0;
}

/* the total and the save button stay in view while the list of products grows */
.eo-order-layout__side {
    position: sticky;
    top: calc(var(--eo-topbar-h, 64px) + var(--eo-space-base));
}

.eo-order-form__save .eo-btn--primary {
    flex: 1 1 auto;
}

/* the save key, quietly inside the button; phones and tablets have no keyboard to press it on */
.eo-order-form__key {
    padding: 1px 5px;
    font-family: inherit;
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-medium);
    color: inherit;
    background: rgba(255, 255, 255, .18);
    border-radius: 4px;
    opacity: .85;
}

@media (max-width: 1099.98px) {
    .eo-order-form__key {
        display: none;
    }
}

.eo-order-search-bar {
    padding: var(--eo-space-base);
    border-bottom: 1px solid var(--eo-border);
}

/* a table right under it brings its own top line: one line, not two */
.eo-order-search-bar:has(+ .eo-table-wrap) {
    border-bottom: 0;
}

.eo-order-search {
    position: relative;
    width: 100%;
}

.eo-order-result {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    white-space: normal;
}

/* the product photo, so an agent picks by sight; a grey square when there is none */
.eo-order-result__img {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    color: var(--eo-text-subtle);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-sm);
}

.eo-order-result__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eo-order-result__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.eo-order-result__name {
    font-weight: var(--eo-fw-medium);
}

.eo-order-result__sub {
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-order-result__price {
    flex: 0 0 auto;
    font-weight: var(--eo-fw-medium);
}

.eo-order-search .dropdown-menu {
    width: 100%;
    max-height: 420px;
    overflow-y: auto;
}

/* order form discount: the amount with a ৳ / % switch joined to its right edge */
.eo-order-discount > .eo-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.eo-order-discount__type {
    display: flex;
    flex: none;
}

.eo-order-discount__type label {
    display: flex;
    margin: 0;
    cursor: pointer;
}

.eo-order-discount__type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eo-order-discount__type span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 10px;
    color: var(--eo-text-muted);
    font-weight: var(--eo-fw-medium);
    background: var(--eo-bg);
    border: 1px solid var(--eo-border-strong);
    border-left: 0;
}

.eo-order-discount__type label:last-child span {
    border-top-right-radius: var(--eo-radius);
    border-bottom-right-radius: var(--eo-radius);
}

.eo-order-discount__type input:checked + span {
    color: var(--eo-on-brand);
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

.eo-order-discount__type input:focus-visible + span {
    outline: 2px solid var(--eo-brand);
    outline-offset: 1px;
}

/* order form: the usual products as tiles under the search box, a tap adds one; two rows show, the rest scroll */
.eo-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--eo-space-sm);
    max-height: 372px;
    margin-top: var(--eo-space-md);
    overflow-y: auto;
}

.eo-pick-grid:empty {
    display: none;
}

.eo-pick-grid__more,
.eo-pick-grid__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--eo-space-md) 0;
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
    text-align: center;
}

.eo-pick {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: var(--eo-space-xs);
    color: var(--eo-text);
    text-align: left;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.eo-pick:hover {
    border-color: var(--eo-border-strong);
}

.eo-pick:active {
    background: var(--eo-bg-hover);
}

.eo-pick:focus-visible {
    outline: 2px solid var(--eo-brand);
    outline-offset: 1px;
}

.eo-pick.is-picked {
    border-color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-pick__img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    color: var(--eo-text-subtle);
    background: var(--eo-surface-2);
    border-radius: var(--eo-radius-sm);
}

.eo-pick__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* no photo: a short strip with the package icon instead of a big empty box */
.eo-pick__img.is-empty {
    aspect-ratio: auto;
    height: 36px;
}

.eo-pick__letter {
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
}

.eo-pick__count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 22px;
    padding: 1px 6px;
    color: var(--eo-on-brand);
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-semibold);
    text-align: center;
    background: var(--eo-brand);
    border-radius: 6px;
}

.eo-pick__count[hidden] {
    display: none;
}

.eo-pick__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.eo-pick__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 6px;
    margin-top: auto;
    font-size: var(--eo-fs-xs);
}

.eo-pick__price {
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
}

.eo-pick__stock {
    color: var(--eo-text-muted);
}

.eo-pick__stock.is-out {
    color: var(--eo-danger-strong);
}

.eo-order-form.is-line-mode [data-line-discount-col] {
    display: table-cell;
}

.eo-order-form [data-line-discount-col] {
    display: none;
}

.eo-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
    cursor: pointer;
}

.eo-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.eo-file__name {
    min-width: 0;
    overflow: hidden;
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-file:focus-within .eo-btn {
    outline: 2px solid var(--eo-brand);
    outline-offset: 2px;
}

/* tablet and phone: one column, the summary comes last */
@media (max-width: 1099.98px) {
    .eo-order-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .eo-order-layout__side {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .eo-order-form [data-item-row] .eo-control--num {
        min-width: 4.5rem;
    }
}

.eo-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--eo-border);
}

.eo-timeline__item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs) var(--eo-space-sm);
    padding: 0 0 var(--eo-space-md) var(--eo-space-base);
}

.eo-timeline__item::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: var(--eo-radius-pill);
    background: var(--eo-border-strong);
}

.eo-invoice-page {
    padding: var(--eo-space-lg) var(--eo-space-md);
    background: var(--eo-bg);
    page: invoice;
}

/* no page margin means the browser prints no date, title or address around the sheet; the sheet keeps its own */
@page invoice {
    size: A4;
    margin: 0;
}

.eo-invoice__bar {
    display: flex;
    justify-content: flex-end;
    max-width: 780px;
    margin: 0 auto var(--eo-space-md);
}

.eo-invoice {
    max-width: 780px;
    margin: 0 auto var(--eo-space-lg);
    padding: var(--eo-space-2xl);
    font-size: var(--eo-fs-md);
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    page-break-after: always;
}

.eo-invoice:last-of-type {
    page-break-after: auto;
}

/* :where keeps this reset weaker than the classes below, which set their own margins */
:where(.eo-invoice) p {
    margin: 0;
}

.eo-invoice__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-lg);
    padding-bottom: var(--eo-space-lg);
    border-bottom: 1px solid var(--eo-border);
}

.eo-invoice__logo {
    display: block;
    max-width: 180px;
    max-height: 56px;
    object-fit: contain;
}

.eo-invoice__contact {
    margin-top: var(--eo-space-xl);
    padding-top: var(--eo-space-md);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    text-align: center;
    border-top: 1px solid var(--eo-border);
}

.eo-invoice__shop {
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
}

.eo-invoice__ref {
    flex-shrink: 0;
    text-align: right;
}

.eo-invoice__title {
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
}

.eo-invoice__number {
    font-weight: var(--eo-fw-medium);
}

.eo-invoice__muted {
    color: var(--eo-text-muted);
}

.eo-invoice__label {
    margin-bottom: var(--eo-space-2xs);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-invoice__customer {
    padding: var(--eo-space-lg) 0;
}

.eo-invoice__name {
    font-weight: var(--eo-fw-semibold);
}

.eo-invoice__table {
    width: 100%;
    border-collapse: collapse;
}

.eo-invoice__table th,
.eo-invoice__table td {
    padding: var(--eo-space-sm) 0 var(--eo-space-sm) var(--eo-space-lg);
}

/* the first column starts on the sheet's left edge, in line with the shop name */
.eo-invoice__table th:first-child,
.eo-invoice__table td:first-child {
    padding-left: 0;
}

.eo-invoice__table th {
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
    border-top: 1px solid var(--eo-border-strong);
    border-bottom: 1px solid var(--eo-border-strong);
}

.eo-invoice__table td {
    border-bottom: 1px solid var(--eo-border);
}

.eo-invoice__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--eo-space-xl);
    padding-top: var(--eo-space-lg);
}

.eo-invoice__note {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.eo-invoice__totals {
    display: grid;
    flex: 0 0 300px;
    grid-template-columns: 1fr auto;
    row-gap: var(--eo-space-sm);
    margin: 0;
}

.eo-invoice__totals dt {
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.eo-invoice__totals dd {
    margin: 0;
    padding-left: var(--eo-space-lg);
    text-align: right;
    white-space: nowrap;
}

.eo-invoice__totals .eo-invoice__due {
    padding-top: var(--eo-space-sm);
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
    border-top: 1px solid var(--eo-border-strong);
}

@media (max-width: 575.98px) {
    .eo-invoice {
        padding: var(--eo-space-base);
    }

    .eo-invoice__foot {
        flex-direction: column;
        gap: var(--eo-space-md);
    }

    .eo-invoice__totals {
        flex-basis: auto;
    }

    .eo-invoice__table th:not(:first-child),
    .eo-invoice__table td:not(:first-child) {
        padding-left: var(--eo-space-sm);
    }
}

@media print {
    .eo-invoice-page {
        padding: 0;
        background: none;
    }

    .eo-invoice {
        max-width: none;
        margin: 0;
        padding: 16mm;
        border: 0;
        border-radius: 0;
    }

    .eo-no-print {
        display: none !important;
    }
}

/* 18 order confirmation */
/* CONFIRMATION DESK (module 18) */

/* two classes on purpose: module 24 below makes plain .eo-desk a single column for the packing and return desks */
.eo-desk.eo-desk--split {
    display: grid;
    gap: var(--eo-space-lg);
    grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
    align-items: start;
}

@media (max-width: 991.98px) {
    .eo-desk.eo-desk--split {
        grid-template-columns: minmax(0, 1fr);
    }

    /* one column: a sticky list would slide over the order below it */
    .eo-desk--split .eo-desk__queue {
        position: static;
        max-height: 320px;
    }
}

.eo-desk__queue {
    position: sticky;
    top: calc(var(--eo-topbar-h) + var(--eo-space-base));
    max-height: calc(100vh - var(--eo-topbar-h) - var(--eo-space-2xl));
    overflow-y: auto;
}

.eo-desk__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eo-desk__item {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    width: 100%;
    padding: var(--eo-space-sm) var(--eo-space-base);
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--eo-border);
    color: var(--eo-text);
}

/* another agent has this order open right now */
.eo-desk__viewer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--eo-fs-xs);
    color: var(--eo-warning-strong);
}

.eo-desk__viewer[hidden] {
    display: none;
}

.eo-desk__viewer .svg-icon {
    width: 12px;
    height: 12px;
}

.eo-desk__item.is-taken .eo-namecell__tile {
    opacity: .55;
}

.eo-desk__item:hover,
.eo-desk__item.is-active {
    background: var(--eo-bg-hover);
}

.eo-desk__actions {
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* 22 courier booking */
/* module 22: parcel detail, book modal, labels and pickup sheet */
.eo-parcel__main { grid-column: span 2; }
.eo-parcel__followup { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--eo-space-sm); align-items: end; padding: var(--eo-space-md) var(--eo-space-base); background: var(--eo-surface-2); border-top: 1px solid var(--eo-border); border-radius: 0 0 var(--eo-radius-lg) var(--eo-radius-lg); }
@media (max-width: 767.98px) { .eo-parcel__followup { grid-template-columns: minmax(0, 1fr); } }
.eo-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--eo-space-md); }
.eo-timeline__item { display: flex; gap: var(--eo-space-sm); align-items: flex-start; }
.eo-timeline__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--eo-icon-box); height: var(--eo-icon-box); border: 1px solid var(--eo-border); border-radius: var(--eo-radius-pill); color: var(--eo-text-muted); background: var(--eo-surface); }
.eo-proof { display: flex; flex-wrap: wrap; gap: var(--eo-space-xs); }
.eo-proof img { width: 88px; height: 88px; object-fit: cover; border: 1px solid var(--eo-border); border-radius: var(--eo-radius-sm); }
.eo-area-results { border: 1px solid var(--eo-border); border-radius: var(--eo-radius); background: var(--eo-surface); max-height: 220px; overflow-y: auto; }
.eo-area-results__item { display: block; width: 100%; text-align: left; padding: var(--eo-space-xs) var(--eo-space-sm); border: 0; background: transparent; color: var(--eo-text); font-size: var(--eo-fs-sm); }
.eo-area-results__item:hover, .eo-area-results__item:focus { background: var(--eo-bg-hover); }

.eo-labels { margin: 0; font-family: "Noto Sans Bengali", sans-serif; color: #111; background: #fff; }
.eo-labels--a4 { display: flex; flex-wrap: wrap; gap: 4mm; padding: 6mm; }
.eo-labels--a4 .eo-label-card { width: 95mm; height: 64mm; }
.eo-labels--thermal .eo-label-card { width: 76mm; height: 101mm; page-break-after: always; }
.eo-label-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 2mm; padding: 3mm; border: 1px solid #222; overflow: hidden; font-size: 9pt; page-break-inside: avoid; }
.eo-label-card__head { display: flex; justify-content: space-between; border-bottom: 1px solid #222; padding-bottom: 1mm; }
.eo-label-card__code { text-align: center; }
.eo-barcode { display: block; font-family: "Libre Barcode 39", monospace; font-size: 30pt; line-height: 1; }
.eo-label-card__tracking { font-weight: 700; letter-spacing: 1px; }
/* a long address gives way, the COD amount never does */
.eo-label-card__body { margin: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.eo-label-card__body dt { font-size: 7pt; color: #555; }
.eo-label-card__body dd { margin: 0 0 1mm; }
/* the small sticker has no room for a label line above every value */
.eo-labels--a4 .eo-label-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2mm; align-content: start; }
.eo-labels--a4 .eo-label-card__body dt { padding-top: 0.5mm; }
.eo-labels--a4 .eo-label-card { gap: 1mm; }
.eo-labels--a4 .eo-label-card__code { display: flex; align-items: center; justify-content: space-between; }
.eo-label-card__cod { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #222; padding-top: 1mm; font-size: 12pt; }

.eo-sheet { font-family: "Noto Sans Bengali", sans-serif; color: #111; padding: 10mm; }
.eo-sheet__table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.eo-sheet__table th, .eo-sheet__table td { border: 1px solid #333; padding: 2mm; text-align: left; }
.eo-sheet__table .eo-num { text-align: right; }
.eo-sheet__signs { display: flex; justify-content: space-between; margin-top: 20mm; }
.eo-sheet__signs p { width: 40%; border-top: 1px solid #333; padding-top: 2mm; }

@media print {
  .eo-labels--a4 { padding: 0; }
}

/* 23 parcel tracking */
/* module 23: buyer tracking page */
.eo-track { background: var(--eo-bg); color: var(--eo-text); font-family: var(--eo-font); min-height: 100vh; }
.eo-track__head { display: flex; align-items: center; gap: var(--eo-space-sm); padding: var(--eo-space-md) var(--eo-space-lg); background: var(--eo-surface); border-bottom: 1px solid var(--eo-border); }
.eo-track__logo { height: 32px; width: auto; }
.eo-track__shop { font-weight: var(--eo-fw-semibold); font-size: var(--eo-fs-lg); }
.eo-track__main { max-width: 640px; margin: 0 auto; padding: var(--eo-space-lg) var(--eo-space-md); display: flex; flex-direction: column; gap: var(--eo-space-md); }
.eo-track__contact { text-align: center; }
.eo-track__cod { display: flex; align-items: center; justify-content: space-between; gap: var(--eo-space-md); padding: var(--eo-space-md) var(--eo-space-base); background: var(--eo-surface-2); border: 1px solid var(--eo-border); border-radius: var(--eo-radius); }
.eo-track__cod strong { font-size: var(--eo-fs-xl); font-weight: var(--eo-fw-semibold); }
/* a standing list: long Bangla step names read on a phone without shrinking */
.eo-progress { list-style: none; margin: 0; padding: 0; }
.eo-progress__step { position: relative; padding: 0 0 var(--eo-space-lg) var(--eo-space-2xl); color: var(--eo-text-muted); }
.eo-progress__step:last-child { padding-bottom: 0; }
.eo-progress__step::before { content: ""; position: absolute; z-index: 1; left: 0; top: 3px; width: 18px; height: 18px; border: 2px solid var(--eo-border-strong); border-radius: var(--eo-radius-pill); background: var(--eo-surface) center / 12px no-repeat; }
.eo-progress__step::after { content: ""; position: absolute; left: 8px; top: 21px; bottom: -3px; width: 2px; background: var(--eo-border); }
.eo-progress__step:last-child::after { display: none; }
.eo-progress__step.is-done { color: var(--eo-text); }
.eo-progress__step.is-done::before { border-color: var(--eo-success-strong); background-color: var(--eo-success-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.eo-progress__step.is-done::after { background: var(--eo-success-strong); }
.eo-progress__step.is-current { font-weight: var(--eo-fw-semibold); }
.eo-progress__step.is-current::before { box-shadow: 0 0 0 4px var(--eo-success-10); }
.eo-progress__step.is-current::after { background: var(--eo-border); }

/* 24 pickup check packing proof */
/* module 24 and the shared scan box (pickups, rider runs, return desk) */
.eo-scandesk { display: flex; flex-direction: column; gap: var(--eo-space-md); }
.eo-scan { position: relative; display: flex; align-items: center; }
.eo-scan > .svg-icon { position: absolute; z-index: 1; left: var(--eo-space-md); color: var(--eo-text-muted); pointer-events: none; }
.eo-scan__input { height: var(--eo-control-h-lg); padding-left: calc(var(--eo-space-md) * 2 + 16px); font-size: var(--eo-fs-lg); }
.eo-table tr.is-wrong td { background: var(--eo-danger-10); color: var(--eo-danger-strong); }
.eo-table tr.is-scanned td { background: var(--eo-success-10); }

/* 32 inventory */
/* ========================================================================== */
/* INVENTORY (modules 32, 33, 34) */
/* ========================================================================== */

.eo-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    background: var(--eo-surface-2);
    color: var(--eo-text-subtle);
}

.eo-thumb--lg {
    width: 96px;
    height: 96px;
}

.eo-picker-results {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-picker-results__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-sm) var(--eo-space-md);
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--eo-border);
    cursor: pointer;
}

.eo-picker-results__item:last-child {
    border-bottom: 0;
}

.eo-picker-results__item:hover,
.eo-picker-results__item:focus-visible {
    background: var(--eo-surface-2);
}

.eo-material-short {
    color: var(--eo-danger-strong);
    font-weight: var(--eo-fw-semibold);
}

/* 36 meta ads campaign profit */
.eo-ads-total td {
  background: var(--eo-surface-2);
  font-weight: 600;
}

/* 38 seo google shopping */
/* module 38: Google result preview and the copyable feed link */
.eo-seo-preview { display: flex; flex-direction: column; gap: var(--eo-space-2xs); padding: var(--eo-space-base); border: 1px solid var(--eo-border); border-radius: var(--eo-radius); background: var(--eo-surface); max-width: 640px; }
.eo-seo-preview__url { font-size: var(--eo-fs-sm); color: var(--eo-text-muted); overflow-wrap: anywhere; }
.eo-seo-preview__title { font-size: var(--eo-fs-lg); color: var(--eo-brand); font-weight: var(--eo-fw-medium); }
.eo-seo-preview__text { font-size: var(--eo-fs-md); color: var(--eo-text); }
.eo-seo-link { display: flex; gap: var(--eo-space-xs); align-items: center; }
.eo-seo-link .eo-control { flex: 1; min-width: 0; }
.eo-seo-length--ok { color: var(--eo-success-strong); }
.eo-seo-length--long { color: var(--eo-warning-strong); }

/* 40 omnichannel inbox */
.eo-inbox {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--eo-space-base);
    min-height: calc(100vh - 140px);
}

.eo-inbox__list {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    min-width: 0;
}

.eo-inbox__items {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    background: var(--eo-surface);
}

.eo-inbox__item {
    display: flex;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-sm) var(--eo-space-md);
    border-bottom: 1px solid var(--eo-border);
    color: var(--eo-text);
    text-decoration: none;
}

.eo-inbox__item:hover {
    background: var(--eo-bg-hover);
}

.eo-inbox__item.is-active {
    background: var(--eo-brand-10);
}

.eo-inbox__item.is-unread .eo-strong {
    color: var(--eo-brand);
}

.eo-inbox__item-body {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    min-width: 0;
    flex: 1;
}

.eo-inbox__thread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--eo-space-base);
    min-width: 0;
}

.eo-inbox__pane {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    background: var(--eo-surface);
    min-width: 0;
}

.eo-inbox__head {
    display: flex;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md);
    border-bottom: 1px solid var(--eo-border);
}

.eo-inbox__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.eo-inbox__messages {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 320px);
    padding: var(--eo-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    background: var(--eo-surface-2);
}

.eo-inbox__msg {
    align-self: flex-start;
    max-width: 75%;
    padding: var(--eo-space-sm) var(--eo-space-md);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    background: var(--eo-surface);
}

.eo-inbox__msg.is-out {
    align-self: flex-end;
    background: var(--eo-brand-10);
    border-color: var(--eo-brand-20);
}

.eo-inbox__msg.is-hidden {
    border-style: dashed;
    opacity: 0.75;
}

.eo-inbox__msg.is-failed {
    border-color: var(--eo-danger-strong);
}

.eo-inbox__meta {
    margin: var(--eo-space-2xs) 0 0;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-subtle);
}

.eo-inbox__system {
    align-self: center;
    color: var(--eo-text-muted);
}

.eo-inbox__image {
    display: block;
    max-width: 240px;
    max-height: 240px;
    border-radius: var(--eo-radius);
}

.eo-inbox__reply {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

.eo-inbox__side {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
}

.eo-connect {
    display: flex;
    flex-direction: column;
}

.eo-connect__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--eo-space-sm);
}

@media (max-width: 1199px) {
    .eo-inbox__thread {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .eo-inbox {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 43 team hrm */
/* ========================================================================== */
/* 43 TEAM AND HRM */
/* ========================================================================== */

.eo-punch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-base);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-punch__state {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-dash > .eo-punch {
    padding: 0;
    background: none;
    border: 0;
}

/* a role that only sees one block gets the whole row, no empty half beside it */
.eo-grid--2 > .eo-card:only-child {
    grid-column: 1 / -1;
}

.eo-team-legend {
    flex-wrap: wrap;
    gap: var(--eo-space-base);
    margin-bottom: var(--eo-space-md);
}

.eo-table .eo-team-grid__day {
    width: 28px;
    padding-left: var(--eo-space-2xs);
    padding-right: var(--eo-space-2xs);
    text-align: center;
}

.eo-team-grid__day.is-holiday {
    color: var(--eo-warning-strong);
}

.eo-team-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: var(--eo-radius-sm);
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-semibold);
}

.eo-team-day--present {
    background: var(--eo-success-10);
    color: var(--eo-success-strong);
}

.eo-team-day--late {
    background: var(--eo-warning-10);
    color: var(--eo-warning-strong);
}

.eo-team-day--absent {
    background: var(--eo-danger-10);
    color: var(--eo-danger-strong);
}

.eo-team-day--leave,
.eo-team-day--off,
.eo-team-day--holiday {
    background: var(--eo-neutral-10);
    color: var(--eo-neutral);
}

.eo-team-preview {
    padding-top: var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

/* 44 reports dashboard */
/* ========================================================================== */
/* 44 REPORTS AND DASHBOARD */
/* ========================================================================== */

.eo-dash-queue {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-dash-queue li + li {
    border-top: 1px solid var(--eo-border);
}

.eo-dash-queue__row {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    min-height: 44px;
    padding: var(--eo-space-sm) var(--eo-space-lg);
    color: var(--eo-text);
    text-decoration: none;
}

a.eo-dash-queue__row:hover {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-bg-hover);
}

/* one width for every count, so the words start on the same line */
.eo-dash-queue__row .eo-badge {
    justify-content: center;
    min-width: 40px;
}

.eo-dash-queue__row > .svg-icon {
    width: 16px;
    height: 16px;
    color: var(--eo-text-subtle);
    transition: transform var(--eo-dur) var(--eo-ease);
}

a.eo-dash-queue__row:hover > .svg-icon {
    color: var(--eo-text-muted);
    transform: translateX(2px);
}

/* recent orders row: name + number left, money and badge right */
.eo-dash-queue__row .eo-cell-main,
.eo-dash-queue__row .eo-cell-sub {
    display: block;
}

/* dashboard stat strip: narrower cells so a row of five fits on a laptop */
@media (min-width: 576px) {
    .eo-stats.eo-stats--strip {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* the strip used as a panel body already sits inside the panel's border */
.eo-card__body.eo-stats--strip {
    padding: 0;
    border-width: 1px 0 0;
    border-radius: 0 0 var(--eo-radius-xl) var(--eo-radius-xl);
}

/* to-do: the words open the list, the button opens the work */
.eo-todo__text {
    color: var(--eo-text);
    text-decoration: none;
}

.eo-todo__text:hover {
    color: var(--eo-text);
    text-decoration: underline;
}

.eo-todo .eo-dash-queue__row > .eo-btn {
    flex: 0 0 auto;
}

/* two columns on a wide screen, so eight rows don't push the rest of the page down */
@media (min-width: 992px) {
    .eo-todo__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eo-todo__list li {
        border-top: 1px solid var(--eo-border);
    }

    .eo-todo__list li:nth-child(-n + 2) {
        border-top: 0;
    }

    .eo-todo__list li:nth-child(odd) {
        border-right: 1px solid var(--eo-border);
    }

    /* a row left alone on its line keeps its half, so its button stays near the words, but draws no divider to nothing */
    .eo-todo__list li:nth-child(odd):last-child {
        border-right: 0;
    }
}

[data-dash-blocks]:empty {
    display: none;
}

[data-dash-stats],
[data-dash-blocks] {
    transition: opacity var(--eo-dur) var(--eo-ease);
}

[data-dash-stats].is-loading,
[data-dash-blocks].is-loading {
    opacity: 0.6;
}

.eo-load-failed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-base);
    color: var(--eo-text-muted);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-dash-chart {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    min-width: 0;
}

.eo-dash-chart .eo-h3 {
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
}

.eo-chart {
    width: 100%;
    height: auto;
    display: block;
}

.eo-chart__bar--a {
    fill: var(--eo-brand);
}

.eo-chart__bar--b {
    fill: var(--eo-success-strong);
}

.eo-chart__label {
    fill: var(--eo-text-subtle);
    font-size: 10px;
}

.eo-chart__legend {
    display: flex;
    gap: var(--eo-space-base);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-chart__key::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: var(--eo-space-xs);
    border-radius: var(--eo-radius-sm);
    vertical-align: middle;
}

.eo-chart__key--a::before {
    background: var(--eo-brand);
}

.eo-chart__key--b::before {
    background: var(--eo-success-strong);
}

.eo-barlist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
}

.eo-barlist li {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    align-items: center;
    gap: var(--eo-space-sm);
    font-size: var(--eo-fs-md);
}

.eo-barlist__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-barlist__track {
    width: 100%;
    height: 8px;
    background: var(--eo-bg);
    border-radius: var(--eo-radius-sm);
}

.eo-barlist__value {
    font-variant-numeric: tabular-nums;
    color: var(--eo-text-muted);
    white-space: nowrap;
}

/* print file for report PDFs (wkhtmltopdf) */
.eo-print {
    font-family: var(--eo-font, 'Noto Sans Bengali', Arial, sans-serif);
    font-size: 11px;
    color: #1F2933;
}

.eo-print__title {
    font-size: 16px;
    margin: 0 0 4px;
}

.eo-print__meta {
    margin: 0 0 8px;
    color: #616E7C;
}

.eo-print__table {
    width: 100%;
    border-collapse: collapse;
}

.eo-print__table th,
.eo-print__table td {
    border: 1px solid #E3E6EB;
    padding: 4px 6px;
    text-align: left;
}

.eo-print__table th {
    background: #FAFBFC;
}

.eo-print__num {
    text-align: right;
}

/* 01 features and first steps */
.eo-feature-list,
.eo-first-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eo-feature,
.eo-first-step {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-base);
    border-bottom: 1px solid var(--eo-border);
}

.eo-feature:last-child,
.eo-first-step:last-child {
    border-bottom: 0;
}

.eo-feature__icon,
.eo-first-step__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--eo-icon-box);
    height: var(--eo-icon-box);
    border-radius: var(--eo-radius);
    background: var(--eo-bg-hover);
    color: var(--eo-text);
}

.eo-feature__text,
.eo-first-step__text {
    flex: 1;
    min-width: 0;
}

.eo-feature__text p {
    margin: 0;
}

.eo-first-step__mark {
    width: var(--eo-control-h-sm);
    height: var(--eo-control-h-sm);
    border-radius: var(--eo-radius-pill);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border-strong);
    color: var(--eo-text-subtle);
}

.eo-first-step.is-done .eo-first-step__mark {
    background: var(--eo-success-10);
    border-color: var(--eo-success-strong);
    color: var(--eo-success-strong);
}

.eo-first-step.is-done .eo-first-step__text {
    color: var(--eo-text-muted);
    text-decoration: line-through;
}

/* 01 settings: every settings page gets the settings menu on its left; on a phone the menu folds into one line on top */
.eo-content--settings {
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr);
    gap: var(--eo-space-base);
    align-items: start;
}

.eo-setpage {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
    min-width: 0;
}

.eo-setnav {
    position: sticky;
    top: calc(var(--eo-topbar-h) + var(--eo-space-base));
    max-height: calc(100vh - var(--eo-topbar-h) - var(--eo-space-xl));
    overflow-y: auto;
}

/* a 4px rounded bar without arrows, seen only while the pointer is on the menu; Firefox gets its own thin bar */
.eo-setnav::-webkit-scrollbar {
    width: 4px;
}

.eo-setnav::-webkit-scrollbar-button {
    display: none;
}

.eo-setnav::-webkit-scrollbar-track {
    background: transparent;
}

.eo-setnav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--eo-radius-pill);
}

.eo-setnav:hover::-webkit-scrollbar-thumb {
    background: var(--eo-border-strong);
}

@supports not selector(::-webkit-scrollbar) {
    .eo-setnav {
        scrollbar-width: thin;
        scrollbar-color: var(--eo-border-strong) transparent;
    }
}

/* on a wide screen the list is always shown and the phone's fold button is not */
.eo-setnav__current {
    display: none;
}

@media (min-width: 992px) {
    .eo-setnav .eo-setnav__groups.collapse:not(.show) {
        display: flex;
    }

    /* on a wide screen the menu is a card like the settings cards beside it, not a bare list on the page */
    .eo-setnav {
        padding: var(--eo-space-md) var(--eo-space-sm);
        background: var(--eo-surface);
        border: 1px solid var(--eo-border);
        border-radius: var(--eo-radius-xl);
    }

    .eo-setnav__group + .eo-setnav__group {
        padding-top: var(--eo-space-md);
        border-top: 1px solid var(--eo-border);
    }
}

.eo-setnav__groups {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-md);
}

.eo-setnav__title {
    margin: 0 0 var(--eo-space-xs);
    padding: 0 var(--eo-space-md);
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-semibold, 600);
}

.eo-setnav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-setnav__link {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: 8px var(--eo-space-md);
    color: var(--eo-text);
    font-size: var(--eo-fs-md);
    text-decoration: none;
    border-radius: var(--eo-radius);
}

.eo-setnav__link .svg-icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--eo-text-muted);
}

.eo-setnav__link:hover {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-bg-hover);
}

.eo-setnav__link.is-active {
    color: var(--eo-brand);
    font-weight: var(--eo-fw-semibold);
    background: var(--eo-brand-10);
    /* a short bar on the left edge marks the open page without another border */
    box-shadow: inset 3px 0 0 var(--eo-brand);
}

.eo-setnav__link.is-active .svg-icon {
    color: var(--eo-brand);
}

.eo-setnav__sub {
    display: block;
    margin: 2px 0 2px calc(var(--eo-space-md) + 7px);
    padding: 4px var(--eo-space-md) 4px calc(var(--eo-space-md) + 9px);
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
    text-decoration: none;
    /* a thin guide line ties the sub page to the item above it */
    border-left: 1px solid var(--eo-border);
}

.eo-setnav__sub:hover {
    color: var(--eo-text);
    text-decoration: none;
    border-left-color: var(--eo-border-strong);
}

.eo-content--settings .eo-pagehead__back--settings {
    display: none;
}

/* a form that only carries the floating bulk bar has no height, but would still count as a row and add a second gap */
.eo-setpage > form:has(> .eo-bulkbar) {
    display: contents;
}

/* a settings page's one line of help sits close to its first card, not a whole button row away */
.eo-setpage > .eo-pagehead--echo:not(.is-bare) {
    min-height: 0;
    margin-bottom: calc(-1 * var(--eo-space-sm));
}

@media (max-width: 991.98px) {
    .eo-content--settings {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--eo-space-base);
    }

    .eo-setnav {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .eo-setnav__current {
        display: flex;
        align-items: center;
        gap: var(--eo-space-sm);
        padding: var(--eo-space-sm) var(--eo-space-md);
        font-weight: var(--eo-fw-medium);
        width: 100%;
        color: var(--eo-text);
        text-align: left;
        cursor: pointer;
        background: var(--eo-surface);
        border: 1px solid var(--eo-border);
        border-radius: var(--eo-radius-lg);
    }

    .eo-setnav__current .svg-icon {
        width: 16px;
        height: 16px;
        color: var(--eo-brand);
    }

    .eo-setnav__current .eo-setnav__caret {
        margin-left: auto;
        color: var(--eo-text-muted);
        transition: transform var(--eo-dur) var(--eo-ease);
    }

    .eo-setnav__current[aria-expanded="true"] .eo-setnav__caret {
        transform: rotate(180deg);
    }

    .eo-setnav__groups {
        margin-top: var(--eo-space-sm);
        padding: var(--eo-space-sm);
        background: var(--eo-surface);
        border: 1px solid var(--eo-border);
        border-radius: var(--eo-radius-lg);
    }
}

/* ========================================================================== */
/* CUSTOM SELECT (every select.eo-control; the real select stays hidden in the form) */
/* ========================================================================== */

.eo-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.eo-select__toggle {
    display: flex;
    align-items: center;
    padding-right: 30px;
    text-align: left;
    background-image: var(--eo-caret);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    cursor: pointer;
}

.eo-select__toggle.is-open {
    border-color: var(--eo-brand);
    box-shadow: var(--eo-focus);
}

.eo-select__toggle.is-placeholder {
    color: var(--eo-text-subtle);
}

.eo-select__toggle:disabled {
    cursor: not-allowed;
}

.eo-select__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* an auto-width cell would shrink a 100% wide button to its padding */
.eo-table td .eo-select__toggle {
    width: auto;
    max-width: 260px;
}

.eo-select__menu {
    position: fixed;
    z-index: var(--eo-z-popover);
    display: flex;
    flex-direction: column;
    max-width: min(420px, calc(100vw - 16px));
    max-height: 320px;
    overflow: hidden;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    box-shadow: var(--eo-shadow-float);
}

.eo-select__search {
    flex: 0 0 auto;
    width: auto;
    margin: var(--eo-space-sm) var(--eo-space-sm) var(--eo-space-xs);
}

.eo-select__list {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--eo-space-xs);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.eo-select__group {
    padding: var(--eo-space-sm) var(--eo-space-sm) var(--eo-space-xs);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
}

.eo-select__option {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-height: 36px;
    padding: 6px var(--eo-space-sm);
    font-size: var(--eo-fs-base);
    color: var(--eo-text);
    border-radius: var(--eo-radius);
    cursor: pointer;
}

.eo-select__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.eo-select__option svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--eo-brand);
    visibility: hidden;
}

.eo-select__option.is-active {
    background: var(--eo-bg-hover);
}

.eo-select__option.is-selected {
    font-weight: var(--eo-fw-medium);
}

.eo-select__option.is-selected svg {
    visibility: visible;
}

.eo-select__option.is-placeholder {
    color: var(--eo-text-subtle);
}

.eo-select__option.is-disabled {
    color: var(--eo-text-subtle);
    cursor: not-allowed;
}

.eo-select__empty {
    padding: var(--eo-space-md) var(--eo-space-sm);
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
    text-align: center;
}

/* bigger touch targets on phones */
@media (max-width: 767.98px) {
    .eo-select__option {
        min-height: 44px;
    }
}

/* 45 best courier: booking modal */
.eo-book-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-xs);
    margin-top: calc(var(--eo-space-xs) * -1);
}

.eo-book-suggest[hidden] {
    display: none;
}

/* ========================================================================== */
/* FILE UPLOADER (<x-file-upload>, also every <x-input type="file">) */
/* ========================================================================== */

/* a flat drop zone with a dashed border; the real input stays inside the label so keyboard and forms work as before */
.eo-upload {
    display: grid;
    gap: var(--eo-space-sm);
    min-width: 0;
}

.eo-upload__zone {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    min-height: 72px;
    margin: 0;
    padding: var(--eo-space-md) var(--eo-space-base);
    border: 1px dashed var(--eo-border-strong);
    border-radius: var(--eo-radius-lg);
    background: var(--eo-surface-2);
    cursor: pointer;
    transition: border-color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.eo-upload__zone:hover,
.eo-upload.is-dragging .eo-upload__zone {
    border-color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-upload.is-dragging .eo-upload__zone {
    border-style: solid;
}

.eo-upload__zone:focus-within {
    border-color: var(--eo-brand);
    box-shadow: var(--eo-focus);
}

.eo-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
}

.eo-upload__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--eo-icon-box);
    height: var(--eo-icon-box);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    background: var(--eo-surface);
    color: var(--eo-brand);
}

.eo-upload [hidden] {
    display: none;
}

.eo-upload__icon--img {
    padding: 2px;
    object-fit: contain;
}

.eo-upload__text {
    display: grid;
    flex: 1;
    gap: var(--eo-space-2xs);
    min-width: 0;
}

.eo-upload__title {
    color: var(--eo-text);
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-medium);
    line-height: var(--eo-lh-tight);
}

.eo-upload__hint {
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-upload__pick {
    flex: none;
    pointer-events: none;
}

.eo-field.is-invalid .eo-upload__zone,
.eo-upload.is-invalid .eo-upload__zone {
    border-color: var(--eo-danger);
    background: var(--eo-danger-10);
}

.eo-upload__list {
    display: grid;
    gap: var(--eo-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-upload__list[hidden] {
    display: none;
}

.eo-upload__item {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
    padding: var(--eo-space-xs) var(--eo-space-sm);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    background: var(--eo-surface);
}

.eo-upload__item[hidden] {
    display: none;
}

.eo-upload__thumb {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--eo-icon-box);
    height: var(--eo-icon-box);
    border-radius: var(--eo-radius-sm);
    background: var(--eo-bg);
    color: var(--eo-text-muted);
    object-fit: cover;
}

.eo-upload__info {
    display: grid;
    flex: 1;
    min-width: 0;
}

.eo-upload__name {
    overflow: hidden;
    color: var(--eo-text);
    font-size: var(--eo-fs-md);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-upload__meta {
    color: var(--eo-text-subtle);
    font-size: var(--eo-fs-sm);
}

.eo-upload__remove {
    flex: none;
    color: var(--eo-text-muted);
}

.eo-upload__remove:hover {
    color: var(--eo-danger-strong);
}

/* compact: one line, for table cells such as the return desk photo column */
.eo-upload--sm {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
}

.eo-upload--sm .eo-upload__zone {
    flex: none;
    gap: var(--eo-space-xs);
    min-height: var(--eo-control-h-sm);
    padding: 0 var(--eo-space-sm);
    border-radius: var(--eo-radius);
}

.eo-upload--sm .eo-upload__icon {
    width: auto;
    height: auto;
    border: 0;
    background: none;
}

.eo-upload--sm .eo-upload__title {
    font-size: var(--eo-fs-sm);
    white-space: nowrap;
}

.eo-upload--sm .eo-upload__list {
    display: flex;
    flex: 1;
    min-width: 0;
}

.eo-upload--sm .eo-upload__item {
    padding: 0 0 0 var(--eo-space-2xs);
    border: 0;
    background: none;
}

.eo-upload--sm .eo-upload__thumb {
    width: var(--eo-control-h-sm);
    height: var(--eo-control-h-sm);
}

.eo-upload--sm .eo-upload__info {
    display: none;
}

@media (max-width: 575.98px) {
    .eo-upload__zone {
        padding: var(--eo-space-md);
    }

    .eo-upload:not(.eo-upload--sm) .eo-upload__pick {
        display: none;
    }
}

/* ========================================================================== */
/* AI ASSISTANT (46): top bar button and side panel */
/* ========================================================================== */

/* accent, not brand: brand stays on the main action ("নতুন অর্ডার") beside it */
/* same weight as quick actions beside it, only the icon carries the accent */
.eo-ai-btn .svg-icon {
    color: var(--eo-accent);
}

.eo-ai.offcanvas {
    --bs-offcanvas-width: 440px;
    display: flex;
    flex-direction: column;
    font-family: var(--eo-font);
    color: var(--eo-text);
    background: var(--eo-surface);
    border-left: 1px solid var(--eo-border);
    box-shadow: var(--eo-shadow-float);
}

@media (max-width: 575.98px) {
    .eo-ai.offcanvas {
        --bs-offcanvas-width: 100vw;
    }
}

.eo-ai__head {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-base) var(--eo-space-base) var(--eo-space-md);
    border-bottom: 1px solid var(--eo-border);
}

.eo-ai__mark,
.eo-ai__avatar,
.eo-ai__hero-icon,
.eo-ai__off-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--eo-accent);
    background: var(--eo-accent-10);
    border-radius: var(--eo-radius-lg);
}

.eo-ai__mark {
    width: var(--eo-icon-box);
    height: var(--eo-icon-box);
}

.eo-ai__head-text {
    flex: 1;
    min-width: 0;
}

.eo-ai__title {
    margin: 0;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.eo-ai__credit {
    margin: 2px 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-ai__credit strong {
    color: var(--eo-text);
    font-weight: var(--eo-fw-semibold);
}

.eo-ai__dot {
    margin: 0 var(--eo-space-xs);
    color: var(--eo-text-subtle);
}

.eo-ai__body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-base);
    padding: var(--eo-space-base);
    background: var(--eo-surface-2);
}

.eo-ai__lead {
    margin: 0 0 var(--eo-space-base);
    color: var(--eo-text-muted);
    line-height: var(--eo-lh-normal);
}

/* the one-click overview: the panel's main action */
.eo-ai__hero {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    width: 100%;
    padding: var(--eo-space-md) var(--eo-space-base);
    font-family: inherit;
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
    text-align: left;
    cursor: pointer;
    background: var(--eo-surface);
    border: 1px solid color-mix(in srgb, var(--eo-accent) 35%, transparent);
    border-radius: var(--eo-radius-lg);
    transition: border-color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.eo-ai__hero:hover,
.eo-ai__hero:focus-visible {
    background: var(--eo-accent-10);
    border-color: var(--eo-accent);
    outline: none;
}

.eo-ai__hero-icon {
    width: 36px;
    height: 36px;
}

.eo-ai__hero-text {
    flex: 1;
}

.eo-ai__hero > .svg-icon:last-child {
    color: var(--eo-accent);
}

.eo-ai__label {
    margin: var(--eo-space-xl) 0 var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-subtle);
}

.eo-ai__chips {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
}

.eo-ai__chip {
    padding: var(--eo-space-sm) var(--eo-space-md);
    font-family: inherit;
    font-size: var(--eo-fs-md);
    color: var(--eo-text);
    text-align: left;
    cursor: pointer;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    transition: border-color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.eo-ai__chip:hover,
.eo-ai__chip:focus-visible {
    background: var(--eo-bg-hover);
    border-color: var(--eo-border-strong);
    outline: none;
}

.eo-ai__msg {
    display: flex;
    gap: var(--eo-space-sm);
    align-items: flex-start;
}

.eo-ai__msg--user {
    justify-content: flex-end;
}

.eo-ai__bubble {
    max-width: 85%;
    margin: 0;
    padding: var(--eo-space-sm) var(--eo-space-md);
    color: var(--eo-on-brand);
    line-height: var(--eo-lh-normal);
    white-space: pre-wrap;
    background: var(--eo-accent);
    border-radius: var(--eo-radius-lg) var(--eo-radius-lg) var(--eo-radius-sm) var(--eo-radius-lg);
}

.eo-ai__avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--eo-radius);
}

.eo-ai__avatar .svg-icon {
    width: 16px;
    height: 16px;
}

.eo-ai__avatar--error {
    color: var(--eo-danger-strong);
    background: var(--eo-danger-10);
}

/* a draft the merchant must approve before anything is sent */
.eo-ai__draft {
    display: grid;
    gap: var(--eo-space-xs);
    padding: var(--eo-space-md);
    margin-top: var(--eo-space-sm);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-ai__draft p {
    margin: 0;
}

.eo-ai__draft-title {
    font-weight: var(--eo-fw-semibold);
}

.eo-ai__draft-to {
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
}

.eo-ai__draft-text {
    white-space: pre-line;
}

.eo-ai__answer {
    flex: 1;
    min-width: 0;
    padding: var(--eo-space-md);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-sm) var(--eo-radius-lg) var(--eo-radius-lg) var(--eo-radius-lg);
}

.eo-ai__answer--error {
    border-color: var(--eo-danger-25);
}

.eo-ai__answer--error p {
    margin: 0 0 var(--eo-space-sm);
}

.eo-ai__answer--error p:last-child {
    margin-bottom: 0;
}

.eo-ai__answer-body p {
    margin: 0 0 var(--eo-space-xs);
    line-height: var(--eo-lh-normal);
}

.eo-ai__answer-body .eo-ai__headline {
    margin-bottom: var(--eo-space-sm);
    font-weight: var(--eo-fw-semibold);
}

.eo-ai__answer-body .eo-ai__point {
    position: relative;
    padding-left: var(--eo-space-base);
}

.eo-ai__answer-body .eo-ai__point::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 4px;
    width: 5px;
    height: 5px;
    background: var(--eo-text-subtle);
    border-radius: 50%;
}

.eo-ai__answer-body .eo-ai__step {
    margin-top: var(--eo-space-sm);
    padding: var(--eo-space-xs) var(--eo-space-sm);
    color: var(--eo-accent);
    background: var(--eo-accent-10);
    border-radius: var(--eo-radius-sm);
}

.eo-ai__meta {
    margin: var(--eo-space-sm) 0 0;
    padding-top: var(--eo-space-sm);
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-subtle);
    border-top: 1px solid var(--eo-border);
}

.eo-ai__typing {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-sm);
    margin: 4px 0 0;
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
}

.eo-ai__typing-dots {
    display: inline-flex;
    gap: 3px;
}

.eo-ai__typing-dots i {
    width: 6px;
    height: 6px;
    background: var(--eo-accent);
    border-radius: 50%;
    animation: eo-ai-dot 1.2s var(--eo-ease) infinite;
}

.eo-ai__typing-dots i:nth-child(2) {
    animation-delay: 0.15s;
}

.eo-ai__typing-dots i:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes eo-ai-dot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.eo-ai__off {
    margin: auto 0;
    padding: var(--eo-space-xl) var(--eo-space-base);
    text-align: center;
}

.eo-ai__off-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--eo-space-md);
}

.eo-ai__off-title {
    margin: 0 0 var(--eo-space-sm);
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.eo-ai__composer {
    display: flex;
    gap: var(--eo-space-sm);
    align-items: flex-end;
    padding: var(--eo-space-md) var(--eo-space-base) var(--eo-space-xs);
    border-top: 1px solid var(--eo-border);
}

.eo-ai__input.eo-control {
    height: var(--eo-control-h);
    min-height: var(--eo-control-h);
    max-height: 140px;
    padding-top: var(--eo-space-sm);
    padding-bottom: var(--eo-space-sm);
    resize: none;
    line-height: var(--eo-lh-normal);
}

.eo-ai__note {
    margin: 0;
    padding: 0 var(--eo-space-base) var(--eo-space-md);
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .eo-ai__typing-dots i {
        animation: none;
    }
}

/* ========================================================================== */
/* ORDER ITEMS AND TOTALS (order page) */
/* ========================================================================== */

.eo-item-cell {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
}

.eo-item-cell__text {
    display: grid;
    min-width: 0;
}

/* invoice style: a narrow block on the right instead of labels and amounts at opposite edges of the card */
.eo-totals {
    display: grid;
    gap: var(--eo-space-xs);
    width: 100%;
    max-width: 380px;
    margin: 0 0 0 auto;
}

.eo-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eo-space-base);
}

.eo-totals dt {
    color: var(--eo-text-muted);
    font-weight: var(--eo-fw-normal);
}

.eo-totals dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.eo-totals__row--total {
    margin-top: var(--eo-space-xs);
    padding-top: var(--eo-space-sm);
    border-top: 1px solid var(--eo-border);
}

.eo-totals__row--total dt,
.eo-totals__row--total dd {
    color: var(--eo-text);
    font-weight: var(--eo-fw-semibold);
}

/* what the courier collects from the buyer: the number the team checks most */
.eo-totals__row--due {
    margin-top: var(--eo-space-xs);
    padding: var(--eo-space-sm) var(--eo-space-md);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    background: var(--eo-surface-2);
}

.eo-totals__row--due dt {
    color: var(--eo-text);
    font-weight: var(--eo-fw-semibold);
}

.eo-totals__row--due dd {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-bold);
}

.eo-totals__row--note {
    margin-top: var(--eo-space-xs);
    font-size: var(--eo-fs-sm);
}

@media (max-width: 575.98px) {
    .eo-totals {
        max-width: none;
    }
}

/* ========================================================================== */
/* DASHBOARD LAYOUT (UI pass) */
/* ========================================================================== */

/* fixed 4 per row, so 8 cards make two even rows instead of 5 + 3 */
@media (min-width: 768px) {
    .eo-stats.eo-stats--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* cards side by side keep their own height; a short list no longer stretches to match its neighbour */
.eo-grid.eo-grid--top {
    align-items: start;
}

/* delivered is the accent, so it never looks like the orders bar (the brand green) */
.eo-chart__bar--b {
    fill: var(--eo-accent);
}

.eo-chart__key--b::before {
    background: var(--eo-accent);
}

.eo-chart__value {
    fill: var(--eo-text-muted);
    font-size: 10px;
    font-weight: var(--eo-fw-semibold);
}

.eo-chart__axis {
    stroke: var(--eo-border);
    stroke-width: 1;
}

/* ========================================================================== */
/* FRAUD CHECK CARD (17): one short line per courier, fits a side column       */
/* ========================================================================== */

.eo-fraud-couriers {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-fraud-courier {
    display: grid;
    gap: 4px;
    padding: var(--eo-space-sm) var(--eo-space-md);
}

.eo-fraud-courier + .eo-fraud-courier {
    border-top: 1px solid var(--eo-border);
}

.eo-fraud-courier__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-xs) var(--eo-space-sm);
}

.eo-fraud-courier__ratio {
    margin-left: auto;
    font-weight: var(--eo-fw-semibold);
    font-variant-numeric: tabular-nums;
}

.eo-fraud-courier__ratio.is-success { color: var(--eo-success); }
.eo-fraud-courier__ratio.is-warning { color: var(--eo-warning); }
.eo-fraud-courier__ratio.is-danger { color: var(--eo-danger); }

.eo-fraud-courier__bar {
    display: block;
    width: 100%;
    height: 6px;
    overflow: hidden;
    appearance: none;
    background: var(--eo-border);
    border: 0;
    border-radius: var(--eo-radius-pill);
}

.eo-fraud-courier__bar::-webkit-progress-bar { background: var(--eo-border); border-radius: var(--eo-radius-pill); }
.eo-fraud-courier__bar::-webkit-progress-value { border-radius: var(--eo-radius-pill); }
.eo-fraud-courier__bar--success::-webkit-progress-value { background: var(--eo-success); }
.eo-fraud-courier__bar--warning::-webkit-progress-value { background: var(--eo-warning); }
.eo-fraud-courier__bar--danger::-webkit-progress-value { background: var(--eo-danger); }
.eo-fraud-courier__bar--success::-moz-progress-bar { background: var(--eo-success); }
.eo-fraud-courier__bar--warning::-moz-progress-bar { background: var(--eo-warning); }
.eo-fraud-courier__bar--danger::-moz-progress-bar { background: var(--eo-danger); }

/* ========================================================================== */
/* RETURN RISK (17): list badge with a reasons popover, order page meter       */
/* ========================================================================== */

.eo-risk-btn {
    display: inline-flex;
    padding: 0;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--eo-radius-pill);
}

.eo-risk-btn:focus-visible {
    outline: none;
    box-shadow: var(--eo-focus);
}

.eo-risk-pop {
    margin: 0;
    padding-left: var(--eo-space-base);
    font-size: var(--eo-fs-sm);
    line-height: var(--eo-lh-normal);
}

.eo-risk-pop li + li {
    margin-top: var(--eo-space-2xs);
}

.eo-risk-pop__action {
    margin: var(--eo-space-sm) 0 0;
    padding-top: var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    border-top: 1px solid var(--eo-border);
}

.eo-risk-meter {
    display: block;
    width: 100%;
    height: 8px;
}

.eo-risk-meter__track {
    fill: var(--eo-bg);
}

.eo-risk-meter--success .eo-risk-meter__fill {
    fill: var(--eo-success);
}

.eo-risk-meter--warning .eo-risk-meter__fill {
    fill: var(--eo-warning);
}

.eo-risk-meter--danger .eo-risk-meter__fill {
    fill: var(--eo-danger);
}

.eo-risk-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-risk-reason {
    padding: var(--eo-space-2xs) var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

/* the one next step; a left rule instead of a boxed alert so it fits the narrow side column */
.eo-risk-action {
    margin: 0;
    padding: var(--eo-space-2xs) 0 var(--eo-space-2xs) var(--eo-space-sm);
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
    line-height: var(--eo-lh-normal);
    border-left: 3px solid var(--eo-border-strong);
}

.eo-risk-action--warning {
    color: var(--eo-warning-strong);
    border-left-color: var(--eo-warning);
}

.eo-risk-action--danger {
    color: var(--eo-danger-strong);
    border-left-color: var(--eo-danger);
}

/* ========================================================================== */
/* SAVINGS METER (44): dashboard top, money EcomOS kept for the shop this month */
/* ========================================================================== */

.eo-savings {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--eo-space-base) var(--eo-space-xl);
    padding: var(--eo-space-base) var(--eo-space-lg);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl);
}

.eo-savings__main {
    min-width: 0;
}

.eo-savings__label {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
    margin: 0;
    font-size: var(--eo-fs-md);
    color: var(--eo-text-muted);
}

.eo-savings__label .svg-icon {
    color: var(--eo-success-strong);
}

.eo-savings__value {
    margin: var(--eo-space-xs) 0 0;
    font-size: var(--eo-fs-3xl);
    font-weight: var(--eo-fw-bold);
    line-height: var(--eo-lh-tight);
    color: var(--eo-success-strong);
    font-variant-numeric: tabular-nums;
}

.eo-savings__bill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-xs) var(--eo-space-sm);
    margin: var(--eo-space-sm) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-savings__times {
    padding: 0 var(--eo-space-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-success-strong);
    background: var(--eo-success-10);
    border-radius: var(--eo-radius-pill);
}

.eo-savings__items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-savings__item + .eo-savings__item {
    border-top: 1px solid var(--eo-border);
}

.eo-savings__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: var(--eo-space-sm) 0;
    font-size: var(--eo-fs-md);
    color: var(--eo-text);
    text-decoration: none;
}

a.eo-savings__link:hover .eo-savings__item-label {
    color: var(--eo-brand);
}

.eo-savings__item-value {
    flex: none;
    font-weight: var(--eo-fw-semibold);
    font-variant-numeric: tabular-nums;
}

.eo-savings__note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-subtle);
}

@media (max-width: 767.98px) {
    .eo-savings {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--eo-space-base);
    }
}

.eo-savings__item.is-zero .eo-savings__link {
    color: var(--eo-text-subtle);
}

/* ========================================================================== */
/* ORDER SOURCE ICON (order list) */
/* ========================================================================== */

/* the icon alone is hard to read, so it shows the source name in a tooltip on hover or keyboard focus */
.eo-source-icon {
    display: inline-flex;
    padding: 2px;
    color: var(--eo-text-muted);
    border-radius: var(--eo-radius-sm);
    cursor: help;
}

.eo-source-icon:hover,
.eo-source-icon:focus-visible {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

/* ========================================================================== */
/* DATE PICKER (every date, date-time, month and time field) */
/* ========================================================================== */

/* the real input stays in the form for submit and validation, out of sight */
.eo-date__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.eo-date__toggle {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    text-align: left;
    cursor: pointer;
}

.eo-date__toggle svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--eo-text-muted);
}

.eo-date__toggle.is-open {
    border-color: var(--eo-brand);
    box-shadow: var(--eo-focus);
}

.eo-date__toggle.is-placeholder {
    color: var(--eo-text-subtle);
}

.eo-date__toggle:disabled {
    cursor: not-allowed;
}

.eo-date__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* filter bars size the field by its text, not the full row */
.eo-table td .eo-date__toggle,
.eo-filterbar__fields .eo-date__toggle {
    width: auto;
    min-width: 150px;
}

.eo-date__menu {
    position: fixed;
    z-index: var(--eo-z-popover);
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    width: 292px;
    max-width: calc(100vw - 16px);
    padding: var(--eo-space-sm);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    box-shadow: var(--eo-shadow-float);
}

.eo-date__nav {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
}

.eo-date__title {
    flex: 1 1 auto;
    padding: 4px var(--eo-space-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
    background: none;
    border: 0;
    border-radius: var(--eo-radius);
}

.eo-date__title:not(:disabled):hover {
    background: var(--eo-bg-hover);
}

.eo-date__title:disabled {
    color: var(--eo-text);
    opacity: 1;
}

.eo-date__grid {
    display: grid;
    gap: 2px;
}

.eo-date__grid--days {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.eo-date__grid--months,
.eo-date__grid--years {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eo-date__dow {
    padding: 4px 0;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
    text-align: center;
}

.eo-date__cell {
    height: 36px;
    padding: 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--eo-radius);
    cursor: pointer;
}

.eo-date__grid--months .eo-date__cell,
.eo-date__grid--years .eo-date__cell {
    height: 44px;
}

.eo-date__cell:hover:not(:disabled) {
    background: var(--eo-bg-hover);
}

.eo-date__cell:focus-visible {
    outline: none;
    box-shadow: var(--eo-focus);
}

.eo-date__cell.is-outside {
    color: var(--eo-text-subtle);
}

.eo-date__cell.is-today {
    border-color: var(--eo-border-strong);
    font-weight: var(--eo-fw-semibold);
}

.eo-date__cell.is-selected,
.eo-date__cell.is-selected:hover {
    color: var(--eo-on-brand);
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

.eo-date__cell:disabled {
    color: var(--eo-text-subtle);
    opacity: 0.45;
    cursor: not-allowed;
}

.eo-date__time {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--eo-space-sm);
    padding-top: var(--eo-space-sm);
    border-top: 1px solid var(--eo-border);
}

.eo-date__menu > .eo-date__time:first-child {
    padding-top: 0;
    border-top: 0;
}

.eo-date__foot {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
    padding-top: var(--eo-space-sm);
    border-top: 1px solid var(--eo-border);
}

.eo-date__done {
    margin-left: auto;
}

/* ========================================================================== */
/* PRODUCT FORM TABLES (price and stock, combo pack) */
/* ========================================================================== */

/* the main column carries the work, the side column stays in reach with save and sorting */
.pf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--eo-space-base);
    align-items: start;
}

.pf-save {
    display: grid;
    gap: var(--eo-space-sm);
}

.pf-side {
    position: sticky;
    top: calc(var(--eo-topbar-h) + var(--eo-space-base));
    max-height: calc(100vh - var(--eo-topbar-h) - var(--eo-space-xl));
    overflow-y: auto;
}

.pf-add-field {
    display: flex;
    align-items: flex-end;
    gap: var(--eo-space-sm);
}

.pf-options {
    display: grid;
    gap: var(--eo-space-sm);
}

.pf-options[hidden],
.pf-variant-bar[hidden] {
    display: none;
}

.pf-option {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--eo-space-sm);
    align-items: start;
}

.pf-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    height: auto;
    min-height: var(--eo-control-h);
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: text;
}

.pf-chips:focus-within {
    border-color: var(--eo-brand);
}

.pf-chips__input {
    flex: 1 1 140px;
    min-width: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    background: none;
    border: 0;
    outline: none;
}

.pf-variant-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
}

[data-variant-builder]:not(.is-detailed) .pf-col-more,
[data-variant-builder]:not(.has-options) .pf-col-option,
.pf-no-stock .pf-col-stock,
.pf-no-cost .pf-col-cost {
    display: none;
}

/* price and stock sit inside the first card; in the full form they get their own small heading */
.pf-builder__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    padding-top: var(--eo-space-sm);
    border-top: 1px solid var(--eo-border);
}

.pf-builder__head .eo-more__title {
    margin: 0;
}

.pf-detail-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--eo-space-xs) var(--eo-space-md);
}

.pf-detail-toggle .eo-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    font-weight: var(--eo-fw-medium);
}

.pf-layout:not(.pf-simple) .pf-when-simple,
.pf-simple .pf-when-full {
    display: none;
}

/* simple form: only name, photo, price, stock and category; every detail waits behind the switch */
.pf-simple [data-pf-detail],
.pf-simple .pf-col-cost {
    display: none !important;
}

/* the one price row reads as two labelled fields, not a table */
.pf-simple [data-variant-table] {
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
}

.pf-simple [data-variant-table] .eo-table {
    min-width: 0;
}

.pf-simple [data-variant-table] thead {
    display: none;
}

.pf-simple [data-variant-table] tbody,
.pf-simple [data-variant-table] tr[data-variant-row] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eo-space-base);
}

.pf-simple [data-variant-table] tbody {
    grid-template-columns: minmax(0, 1fr);
}

.pf-simple [data-variant-table] tr[data-variant-row] > td {
    height: auto;
    padding: 0;
    text-align: left;
    border: 0;
    background: none;
}

.pf-simple [data-variant-table] td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--eo-space-xs);
    color: var(--eo-text);
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-medium);
}

.pf-simple [data-variant-table] .eo-control--sm {
    height: var(--eo-control-h);
    font-size: var(--eo-fs-md);
}

.pf-simple .pf-no-stock tr[data-variant-row] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 575.98px) {
    .pf-simple [data-variant-table] tr[data-variant-row] {
        grid-template-columns: minmax(0, 1fr);
    }
}

[data-variant-details][aria-pressed="true"] {
    color: var(--eo-brand);
}

[data-variant-row].is-off .eo-control,
[data-variant-row].is-off .eo-num {
    opacity: .5;
}

[data-variant-row].is-off [data-variant-remove],
[data-variant-row]:not(.is-off) [data-variant-restore] {
    display: none;
}

.pf-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--eo-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-photos[hidden] {
    display: none;
}

.pf-photo {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.pf-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* product page: the one photo sits beside the stock numbers, as tall as they are */
.pf-summary {
    display: flex;
    gap: var(--eo-space-md);
}

.pf-summary .eo-stats {
    flex: 1 1 auto;
    min-width: 0;
}

.pf-summary__photo {
    flex: 0 0 96px;
    aspect-ratio: auto;
}

.pf-summary__photo img {
    position: absolute;
    inset: 0;
}

@media (min-width: 1200px) {
    .pf-summary .eo-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .pf-summary .eo-stat {
        padding-right: var(--eo-space-md);
        padding-left: var(--eo-space-md);
    }
}

@media (max-width: 1199.98px) {
    .pf-summary {
        flex-direction: column;
    }

    .pf-summary__photo {
        flex: none;
        width: 96px;
        aspect-ratio: 1;
    }
}

.pf-photo__actions {
    display: flex;
    position: absolute;
    right: 4px;
    bottom: 4px;
    gap: 4px;
}

.pf-stock {
    display: grid;
    gap: var(--eo-space-sm);
    margin: 0;
}

.pf-stock > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eo-space-sm);
}

.pf-stock dt {
    color: var(--eo-text-muted);
    font-weight: 400;
}

.pf-stock dd {
    margin: 0;
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .pf-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 575.98px) {
    .pf-option {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* open: boxes share the width but never shrink below a readable code or price */
.eo-table-wrap[data-variant-table] .eo-control {
    min-width: 104px;
}

.eo-table-wrap[data-variant-table] .eo-control--num {
    min-width: 84px;
}

/* the quantity column is only as wide as its box; the product name takes the rest */
.eo-table-wrap[data-line-table] td:has(> .eo-control--num) {
    width: 1%;
}

.eo-table-wrap[data-line-table] .eo-control--num {
    width: 120px;
}

/* ========================================================================== */
/* NIGHTLY SUMMARY (46): one day's message, as the phone shows it               */
/* ========================================================================== */

.eo-nightly {
    max-width: 560px;
    padding: var(--eo-space-md) var(--eo-space-base);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-nightly p {
    margin: 0 0 var(--eo-space-xs);
    line-height: var(--eo-lh-normal);
}

.eo-nightly p:last-child {
    margin-bottom: 0;
}

.eo-nightly__headline {
    font-weight: var(--eo-fw-semibold);
}

.eo-nightly .eo-nightly__headline {
    margin-bottom: var(--eo-space-sm);
}

.eo-nightly__point {
    position: relative;
    padding-left: var(--eo-space-base);
}

.eo-nightly__point::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 4px;
    width: 5px;
    height: 5px;
    background: var(--eo-text-subtle);
    border-radius: 50%;
}

.eo-nightly .eo-nightly__step {
    margin-top: var(--eo-space-sm);
    padding: var(--eo-space-xs) var(--eo-space-sm);
    color: var(--eo-accent);
    background: var(--eo-accent-10);
    border-radius: var(--eo-radius-sm);
}

/* 51 CTRL+K JUMP-ANYWHERE SEARCH */
/* ========================================================================== */

.eo-topbar__search .eo-control[data-cmdk-open] {
    padding-right: 64px;
    cursor: pointer;
}

.eo-topbar__kbd {
    position: absolute;
    top: 50%;
    right: 10px;
    width: auto;
    padding: 0 var(--eo-space-xs);
    font-family: var(--eo-font);
    color: var(--eo-text-subtle);
    cursor: pointer;
    background: var(--eo-bg);
    border: 0;
    transform: translateY(-50%);
}

.eo-cmdk .eo-cmdk__dialog {
    max-width: 620px;
    margin-top: calc(var(--eo-topbar-h) + var(--eo-space-base));
}

.eo-cmdk .modal-content {
    overflow: hidden;
    border-color: var(--eo-border);
    border-radius: var(--eo-radius-xl);
    box-shadow: var(--eo-shadow-float);
}

/* flat keys: the box should read as a list, not a keyboard */
.eo-cmdk .eo-kbd {
    font-family: var(--eo-font);
    color: var(--eo-text-muted);
    background: var(--eo-bg);
    border: 0;
}

.eo-cmdk__head {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    min-height: 56px;
    padding: 0 var(--eo-space-sm) 0 var(--eo-space-base);
    border-bottom: 1px solid var(--eo-border);
}

.eo-cmdk__head > .svg-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--eo-brand);
}

/* Esc and the backdrop close it on a computer, a phone needs the button */
@media (min-width: 576px) {
    .eo-cmdk__head .eo-btn {
        display: none;
    }
}

.eo-cmdk__input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--eo-control-h-lg);
    padding: 0;
    font-family: var(--eo-font);
    font-size: var(--eo-fs-lg);
    color: var(--eo-text);
    background: transparent;
    border: 0;
    outline: 0;
}

.eo-cmdk__input::placeholder {
    color: var(--eo-text-subtle);
}

.eo-cmdk__body {
    max-height: min(60vh, 480px);
    padding: var(--eo-space-sm);
    overflow-y: auto;
    transition: opacity var(--eo-dur) var(--eo-ease);
}

.eo-cmdk__body:empty {
    display: none;
}

.eo-cmdk__body.is-loading {
    opacity: 0.6;
}

.eo-cmdk__group + .eo-cmdk__group {
    margin-top: var(--eo-space-xs);
}

.eo-cmdk__group-label {
    padding: var(--eo-space-xs) var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-subtle);
}

.eo-cmdk__item {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    min-height: 44px;
    padding: var(--eo-space-xs) var(--eo-space-sm);
    color: var(--eo-text);
    border-radius: var(--eo-radius-lg);
}

.eo-cmdk__item:hover,
.eo-cmdk__item.is-active {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-brand-10);
}

.eo-cmdk__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--eo-text-subtle);
}

.eo-cmdk__item.is-active .eo-cmdk__icon {
    color: var(--eo-brand);
}

.eo-cmdk__icon .svg-icon {
    width: 18px;
    height: 18px;
}

.eo-cmdk__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eo-cmdk__label,
.eo-cmdk__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-cmdk__label {
    font-weight: var(--eo-fw-medium);
}

.eo-cmdk__sub {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-cmdk__note {
    padding: var(--eo-space-lg) var(--eo-space-base);
    color: var(--eo-text-muted);
    text-align: center;
}

.eo-cmdk__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-base);
    padding: var(--eo-space-sm) var(--eo-space-base);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-subtle);
    border-top: 1px solid var(--eo-border);
}

.eo-cmdk__foot span {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
}

@media (max-width: 575.98px) {
    .eo-cmdk .eo-cmdk__dialog {
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .eo-cmdk .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .eo-cmdk__body {
        flex: 1 1 auto;
        max-height: none;
    }

    .eo-cmdk__item {
        min-height: 56px;
    }

    .eo-cmdk__foot {
        display: none;
    }
}

/* ===== 53 daily work: today's to-do, new-order alerts ===== */
.eo-todo .eo-empty__icon {
    color: var(--eo-success-strong);
    background: var(--eo-success-10);
}

.eo-toast__action {
    flex: 0 0 auto;
    align-self: center;
}

/* orders waiting: a solid orange pill, since a light tint disappears on the dark sidebar */
.eo-nav__count--waiting {
    color: #1F1300;
    background: var(--eo-warning);
    border-color: var(--eo-warning);
}

/* 52 order assist: paste-to-order and order warnings */
.eo-paste {
    padding: var(--eo-space-md);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-paste[hidden] {
    display: none;
}

.eo-control.is-assisted {
    border-color: var(--eo-accent);
    background: var(--eo-accent-10);
}

[data-item-row].is-assisted > td {
    background: var(--eo-accent-10);
}

.eo-order-warnings__list {
    margin: 0;
    padding-left: var(--eo-space-base);
}

.eo-order-warnings__item + .eo-order-warnings__item {
    margin-top: var(--eo-space-2xs);
}

.eo-order-warnings__item.is-danger::marker {
    color: var(--eo-danger);
}

.eo-order-warnings__item.is-warning::marker {
    color: var(--eo-warning-strong);
}

/* ========================================================================== */
/* COMMENT AUTO REPLY (40): starter rules and the "try a comment" result        */
/* ========================================================================== */

.eo-rule-starters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-sm);
}

.eo-rule-try__result {
    padding: var(--eo-space-md);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-rule-try__result p {
    margin: 0 0 var(--eo-space-xs);
    line-height: var(--eo-lh-normal);
    white-space: pre-wrap;
}

.eo-rule-try__result p:last-child {
    margin-bottom: 0;
}

.eo-rule-try__head {
    font-weight: var(--eo-fw-semibold);
}

.eo-rule-try__label {
    display: block;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

/* ========================================================================== */
/* ERROR PAGES (404, 500 and the rest, resources/views/errors) */
/* ========================================================================== */

/* one quiet page: the logo, a very large pale code, and the message sitting on its lower edge */
.eo-errpage-body {
    background: var(--eo-surface);
}

.eo-errpage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--eo-space-3xl) var(--eo-space-base);
}

.eo-errpage__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-sm);
    margin-bottom: var(--eo-space-2xl);
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-bold);
    color: var(--eo-text);
    text-decoration: none;
}

/* a fixed height holds the logo's place, so the page does not jump when it arrives from the CDN */
.eo-errpage__brand .eo-brand-logo {
    height: 30px;
    max-width: none;
    max-height: none;
}

.eo-errpage__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 760px;
    text-align: center;
}

/* light brand green with a clear darker edge; only the lowest part fades, where the title overlaps it */
.eo-errpage__code {
    margin: 0 0 -0.16em;
    /* the mask cuts at the box edge, and tight letters plus the outline poke past it, so the box gets room on each side */
    padding: 0 0.1em;
    font-size: clamp(9rem, 32vw, 18rem);
    font-weight: var(--eo-fw-bold);
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--eo-brand) 16%, var(--eo-surface));
    -webkit-text-stroke: 2px color-mix(in srgb, var(--eo-brand) 60%, var(--eo-surface));
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.15) 100%);
    mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.15) 100%);
    user-select: none;
}

/* the title stays on one line under the wide code; only a phone may wrap it */
.eo-errpage__title {
    position: relative;
    margin: 0 0 var(--eo-space-md);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: var(--eo-fw-bold);
    line-height: var(--eo-lh-tight);
    color: var(--eo-text);
    white-space: nowrap;
}

.eo-errpage__text {
    max-width: 440px;
    margin: 0 0 var(--eo-space-2xl);
    font-size: var(--eo-fs-lg);
    line-height: var(--eo-lh-normal);
    color: var(--eo-text-muted);
    text-wrap: balance;
}

.eo-errpage__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--eo-space-md);
}

.eo-errpage__actions .eo-btn {
    height: var(--eo-control-h-lg);
    padding-inline: var(--eo-space-xl);
    font-size: var(--eo-fs-md);
    font-weight: var(--eo-fw-semibold);
}

.eo-errpage__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--eo-space-xs) var(--eo-space-lg);
    max-width: 100%;
    margin: var(--eo-space-3xl) 0 0;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-subtle);
}

.eo-errpage__meta span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .eo-errpage__title {
        font-size: var(--eo-fs-2xl);
        white-space: normal;
        text-wrap: balance;
    }

    .eo-errpage {
        justify-content: flex-start;
        padding-top: var(--eo-space-2xl);
    }

    .eo-errpage__text {
        font-size: var(--eo-fs-base);
    }

    .eo-errpage__actions {
        width: 100%;
    }

    .eo-errpage__actions .eo-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================================
   RICH TEXT EDITOR (<x-rich-text>)
   ============================================================ */
.eo-editor {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border-strong);
    border-radius: var(--eo-radius);
}

.eo-editor:focus-within {
    border-color: var(--eo-brand);
    box-shadow: var(--eo-focus);
}

.eo-field.is-invalid .eo-editor {
    border-color: var(--eo-danger);
}

.eo-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-2xs);
    padding: var(--eo-space-xs);
    background: var(--eo-surface-2);
    border-bottom: 1px solid var(--eo-border);
    border-radius: var(--eo-radius) var(--eo-radius) 0 0;
}

.eo-editor__block {
    flex: 0 0 150px;
    min-width: 0;
}

.eo-editor__sep {
    flex: 0 0 1px;
    align-self: stretch;
    margin: var(--eo-space-2xs) var(--eo-space-2xs);
    background: var(--eo-border);
}

.eo-editor__end {
    display: inline-flex;
    gap: var(--eo-space-2xs);
    margin-left: auto;
}

.eo-editor__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--eo-control-h-sm);
    height: var(--eo-control-h-sm);
    padding: 0;
    color: var(--eo-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--eo-radius-sm);
}

.eo-editor__btn svg {
    width: 16px;
    height: 16px;
}

.eo-editor__btn:hover:not(:disabled) {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

.eo-editor__btn:focus-visible {
    outline: 0;
    box-shadow: var(--eo-focus);
}

.eo-editor__btn:disabled {
    color: var(--eo-text-subtle);
    opacity: 0.5;
}

.eo-editor__btn.is-active,
.eo-editor__btn.is-active:hover {
    color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-editor__linkbar {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
    padding: var(--eo-space-xs);
    border-bottom: 1px solid var(--eo-border);
}

.eo-editor__linkbar[hidden] {
    display: none;
}

.eo-editor__linkbar .eo-control {
    flex: 1 1 auto;
    min-width: 0;
}

.eo-editor__area {
    position: relative;
    min-height: 280px;
    max-height: 52vh;
    padding: var(--eo-space-base);
    overflow-y: auto;
    overflow-wrap: anywhere;
    font-size: var(--eo-fs-base);
    line-height: var(--eo-lh-normal);
    color: var(--eo-text);
    outline: 0;
}

.eo-editor__area.is-empty::before {
    position: absolute;
    color: var(--eo-text-subtle);
    pointer-events: none;
    content: attr(data-placeholder);
}

.eo-editor__area > :first-child {
    margin-top: 0;
}

.eo-editor__area > :last-child {
    margin-bottom: 0;
}

.eo-editor__area p,
.eo-editor__area ul,
.eo-editor__area ol {
    margin: 0 0 var(--eo-space-sm);
}

.eo-editor__area ul,
.eo-editor__area ol {
    padding-left: var(--eo-space-xl);
}

.eo-editor__area h2,
.eo-editor__area h3,
.eo-editor__area h4 {
    margin: var(--eo-space-lg) 0 var(--eo-space-xs);
    font-weight: var(--eo-fw-bold);
    line-height: var(--eo-lh-tight);
}

.eo-editor__area h2 { font-size: var(--eo-fs-2xl); }
.eo-editor__area h3 { font-size: var(--eo-fs-xl); }
.eo-editor__area h4 { font-size: var(--eo-fs-lg); }

.eo-editor__area blockquote {
    margin: 0 0 var(--eo-space-sm);
    padding-left: var(--eo-space-base);
    color: var(--eo-text-muted);
    border-left: 3px solid var(--eo-border-strong);
}

.eo-editor__area a {
    color: var(--eo-accent);
    text-decoration: underline;
}

.eo-editor__area img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--eo-space-xs) 0;
    border-radius: var(--eo-radius-sm);
}

.eo-editor__area img:hover {
    outline: 2px solid var(--eo-brand-20);
}

@media (max-width: 767.98px) {
    .eo-editor__block {
        flex-basis: 100%;
    }

    .eo-editor__block + .eo-editor__sep {
        display: none;
    }

    .eo-editor__btn {
        width: var(--eo-control-h);
        height: var(--eo-control-h);
    }

    .eo-editor__end {
        margin-left: 0;
    }

    .eo-editor__linkbar {
        flex-wrap: wrap;
    }

    .eo-editor__linkbar .eo-control {
        flex-basis: 100%;
    }

    .eo-editor__area {
        min-height: 220px;
    }
}

.eo-rule-product {
    position: relative;
}

.eo-rule-product .dropdown-menu {
    top: 100%;
    right: 0;
    left: 0;
    max-height: 240px;
    overflow-y: auto;
}

.eo-rule-try__ai {
    margin-top: var(--eo-space-md);
    padding-top: var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

[data-rule-ai-fields][hidden] {
    display: none;
}

/* ========================================================================== */
/* CRON (05): the setup guide and its dashboard warning */
/* ========================================================================== */
.eo-cron-warning {
    margin-bottom: var(--eo-space-lg);
}

.eo-cron-guide__lead {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    margin: 0;
}

.eo-cron-guide__label {
    margin-bottom: var(--eo-space-xs);
}

.eo-cron-guide__command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-sm);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-cron-guide__command code {
    min-width: 0;
    color: var(--eo-text);
    overflow-wrap: anywhere;
}

.eo-cron-guide__command .eo-btn {
    flex: none;
}

/* super admin role form: one column of checkboxes per menu section */
.eo-ability-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--eo-space-lg);
}

.eo-ability-group {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.eo-ability-group legend {
    margin-bottom: var(--eo-space-xs);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
}

.eo-cron-actions {
    flex-wrap: nowrap;
    gap: var(--eo-space-xs);
}

.eo-cron-output summary {
    cursor: pointer;
    color: var(--eo-text-muted);
}

.eo-cron-output pre {
    max-height: 320px;
    margin: var(--eo-space-sm) 0 0;
    padding: var(--eo-space-md);
    overflow: auto;
    font-size: var(--eo-fs-xs);
    white-space: pre-wrap;
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius-sm);
}

/* assign rider modal */
/* the chevron stays visible: this is how a merchant finds the next step */
.eo-status-menu .eo-inline__icon { opacity: 1; }
.eo-rider-assign { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--eo-space-lg); }
.eo-rider-assign__title { margin: 0 0 var(--eo-space-sm); font-size: var(--eo-fs-base); font-weight: var(--eo-fw-semibold); }
.eo-rider-assign .eo-dl { grid-template-columns: minmax(0, 1fr); }
.eo-rider-pick { display: flex; flex-direction: column; gap: var(--eo-space-xs); max-height: 320px; overflow-y: auto; }
.eo-rider-pick__item { display: flex; align-items: center; gap: var(--eo-space-sm); padding: var(--eo-space-sm); cursor: pointer; border: 1px solid var(--eo-border); border-radius: var(--eo-radius); }
.eo-rider-pick__item:hover { background: var(--eo-surface-2); }
.eo-rider-pick__item input { position: absolute; opacity: 0; }
.eo-rider-pick__item > .svg-icon { flex: 0 0 auto; color: var(--eo-brand); visibility: hidden; }
.eo-rider-pick__item:has(input:checked) { border-color: var(--eo-brand); }
.eo-rider-pick__item:has(input:checked) > .svg-icon { visibility: visible; }
.eo-rider-pick__item:has(input:focus-visible) { outline: 2px solid var(--eo-brand); outline-offset: 1px; }
.eo-rider-pick__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
@media (max-width: 767.98px) { .eo-rider-assign { grid-template-columns: minmax(0, 1fr); } }

/* courier account form */
.eo-courier-keys__title { margin: 0 0 var(--eo-space-sm); font-size: var(--eo-fs-base); font-weight: var(--eo-fw-semibold); }

/* searchable select */
.eo-sel__native { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.eo-sel__btn { display: flex; align-items: center; width: 100%; height: var(--eo-control-h); padding: 0 30px 0 12px; font: inherit; font-size: var(--eo-fs-base); color: var(--eo-text); text-align: left; cursor: pointer; background: var(--eo-surface) var(--eo-caret) no-repeat right 8px center / 16px; border: 1px solid var(--eo-border-strong); border-radius: var(--eo-radius); }
.eo-sel__btn:hover { border-color: var(--eo-text-muted); }
.eo-sel__btn:focus-visible, .eo-sel__btn[aria-expanded="true"] { border-color: var(--eo-brand); outline: 2px solid var(--eo-brand); outline-offset: -1px; }
.eo-sel__btn.is-empty { color: var(--eo-text-muted); }
.eo-sel__btn--sm { font-size: var(--eo-fs-md); }
.eo-sel__native.is-invalid + .eo-sel__btn { border-color: var(--eo-danger-strong); }
.eo-sel__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eo-sel__panel { position: fixed; z-index: var(--eo-z-toast); min-width: 220px; padding: var(--eo-space-xs); background: var(--eo-surface); border: 1px solid var(--eo-border); border-radius: var(--eo-radius); box-shadow: var(--eo-shadow-float); }
.eo-sel__list { max-height: 260px; margin-top: var(--eo-space-xs); overflow-y: auto; }
.eo-sel__item { display: block; width: 100%; padding: var(--eo-space-xs) var(--eo-space-sm); font: inherit; font-size: var(--eo-fs-base); color: var(--eo-text); text-align: left; cursor: pointer; background: transparent; border: 0; border-radius: var(--eo-radius-sm); }
.eo-sel__item:hover, .eo-sel__item.is-hover { background: var(--eo-surface-2); }
.eo-sel__item.is-active { font-weight: var(--eo-fw-semibold); color: var(--eo-brand); }
.eo-sel__note { margin: 0; padding: var(--eo-space-sm); font-size: var(--eo-fs-sm); color: var(--eo-text-muted); }

/* a small modal is still wide enough for a sentence and a box */
.modal-dialog.modal-sm { --bs-modal-width: 480px; }

/* a key shown once: flat strip, the value and its copy button read as one control */
.eo-secret { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--eo-space-base); align-items: center; margin-bottom: var(--eo-space-base); padding: var(--eo-space-base); background: var(--eo-surface); border: 1px solid var(--eo-border); border-radius: var(--eo-radius-lg); }
.eo-secret__title { margin: 0; font-size: var(--eo-fs-base); font-weight: var(--eo-fw-semibold); }
.eo-secret__help { margin: 2px 0 0; color: var(--eo-text-muted); font-size: var(--eo-fs-sm); }
.eo-secret__key { display: flex; min-width: 0; height: var(--eo-control-h); background: var(--eo-surface-2); border: 1px solid var(--eo-border-strong); border-radius: var(--eo-radius); }
.eo-secret__value { flex: 1 1 auto; min-width: 0; padding: 0 12px; color: var(--eo-text); background: transparent; border: 0; outline: 0; }
.eo-secret__copy { flex: 0 0 auto; height: 100%; border-width: 0 0 0 1px; border-radius: 0 var(--eo-radius) var(--eo-radius) 0; }
@media (max-width: 767.98px) { .eo-secret { grid-template-columns: minmax(0, 1fr); } }

/* super admin settings: a page of topic cards two to a row, one save bar under them; a service is edited on its own page */
.eo-settings { display: flex; flex-direction: column; gap: var(--eo-space-base); }
.eo-settings__card > .eo-card__head { border-bottom: 1px solid var(--eo-border); }
.eo-settings .eo-card__head + .eo-card__body { padding-top: var(--eo-space-lg); }
.eo-settings .eo-card > .eo-card__head:has(.eo-section__text) { flex-direction: column; align-items: flex-start; gap: var(--eo-space-2xs); }
.eo-settings__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--eo-space-sm); padding-top: var(--eo-space-sm); }
.eo-provider__steps { display: flex; flex-direction: column; gap: var(--eo-space-xs); margin: 0; padding-left: var(--eo-space-lg); font-size: var(--eo-fs-sm); }

/* ========================================================================== */
/* NOTIFICATION TEMPLATES */
/* ========================================================================== */

.eo-channel {
    display: inline-flex;
    align-items: stretch;
    margin-left: var(--eo-space-xs);
    overflow: hidden;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-channel:hover {
    color: var(--eo-text);
    text-decoration: none;
    border-color: var(--eo-border-strong);
}

.eo-channel__name {
    padding: var(--eo-space-xs) var(--eo-space-sm);
}

.eo-channel__state {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--eo-space-xs);
    color: var(--eo-text-subtle);
    background: var(--eo-surface-2);
    border-left: 1px solid var(--eo-border);
}

.eo-channel.is-on {
    color: var(--eo-text);
}

.eo-channel.is-on .eo-channel__state {
    color: var(--eo-success-strong);
    background: var(--eo-success-10);
}

.eo-channel__state .svg-icon {
    width: 14px;
    height: 14px;
}

/* super admin email templates (41): fields on the left, the live email on the right */
.eo-email-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--eo-space-base);
    align-items: start;
}

.eo-email-editor > .eo-stack {
    position: sticky;
    top: calc(var(--eo-topbar-h) + var(--eo-space-base));
}

@media (max-width: 1199.98px) {
    .eo-email-editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .eo-email-editor > .eo-stack {
        position: static;
    }
}

.eo-code-input {
    font-family: Consolas, 'Courier New', monospace;
    font-size: var(--eo-fs-md);
    line-height: 1.55;
    tab-size: 4;
}

.eo-email-frame {
    display: block;
    width: 100%;
    height: 560px;
    margin-bottom: var(--eo-space-sm);
    background: #F4F4F5;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-email-frame--sm {
    height: 420px;
    margin-bottom: 0;
}

.eo-email-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: var(--eo-space-base);
}

@media (max-width: 575.98px) {
    .eo-email-gallery {
        grid-template-columns: minmax(0, 1fr);
    }
}

.eo-email-gallery__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eo-shortcode {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    width: 100%;
    padding: var(--eo-space-xs) var(--eo-space-sm);
    text-align: left;
    color: var(--eo-text);
    background: none;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-shortcode:hover,
.eo-shortcode:focus-visible {
    background: var(--eo-surface-2);
    border-color: var(--eo-border-strong);
}

/* message words as small chips: tap one and it lands where the cursor was */
.eo-token-bar { display: flex; flex-direction: column; gap: var(--eo-space-xs); }
.eo-token-bar__chips { display: flex; flex-wrap: wrap; gap: var(--eo-space-xs); }
.eo-token-chip {
    padding: 4px 10px;
    font-family: inherit;
    font-size: var(--eo-fs-sm);
    line-height: 1.5;
    color: var(--eo-brand);
    cursor: pointer;
    background: var(--eo-brand-10);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: border-color .15s;
}
.eo-token-chip__hint { margin-left: 4px; color: var(--eo-text-muted); }
.eo-token-chip:hover,
.eo-token-chip:focus-visible { border-color: var(--eo-brand); outline: none; }

.eo-shortcode__text {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

/* order side panel: who, what, how much to collect; separate from the quick actions menu */
.eo-qv { display: flex; flex-direction: column; gap: var(--eo-space-base); }
.eo-qv > * { flex-shrink: 0; }
.eo-qv p { margin: 0; }
/* the loaded parts need a height limit, or the footer falls below the screen */
/* a side panel's loaded content: a column whose body scrolls under the fixed head */
.eo-sidepanel__content,
[data-quick-content] { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.eo-qv__more { display: inline-flex; align-items: center; gap: var(--eo-space-xs); margin-top: var(--eo-space-xs); font-size: var(--eo-fs-md); font-weight: var(--eo-fw-medium); }
.eo-qv__more .svg-icon { width: 14px; height: 14px; }
.eo-qv__tools { display: flex; flex-wrap: wrap; gap: var(--eo-space-sm); }
.eo-qv__tools > * { flex: 1 1 auto; min-width: 0; }
.eo-qv__tools > * > .eo-btn { width: 100%; }
.eo-qv__section { display: flex; flex-direction: column; gap: var(--eo-space-xs); padding-top: var(--eo-space-base); border-top: 1px solid var(--eo-border); }
.eo-qv__label { margin: 0 0 var(--eo-space-2xs); color: var(--eo-text-muted); font-size: var(--eo-fs-sm); font-weight: var(--eo-fw-semibold); }
.eo-qv__who { display: flex; align-items: center; justify-content: space-between; gap: var(--eo-space-sm); }
.eo-qv__items { display: flex; flex-direction: column; gap: var(--eo-space-sm); margin: 0; padding: 0; list-style: none; }
.eo-qv__items li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(72px, auto); align-items: baseline; gap: var(--eo-space-md); }
.eo-qv__item-name { overflow-wrap: anywhere; }
.eo-qv__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--eo-space-2xs) var(--eo-space-md); margin: var(--eo-space-sm) 0 0; padding-top: var(--eo-space-sm); border-top: 1px dashed var(--eo-border); color: var(--eo-text-muted); font-size: var(--eo-fs-md); }
.eo-qv__sum dt { font-weight: var(--eo-fw-normal); }
.eo-qv__sum dd { margin: 0; text-align: right; }
.eo-qv__due { display: flex; align-items: center; justify-content: space-between; gap: var(--eo-space-md); margin-top: var(--eo-space-sm); padding: var(--eo-space-sm) var(--eo-space-md); background: var(--eo-surface-2); border: 1px solid var(--eo-border); border-radius: var(--eo-radius); font-weight: var(--eo-fw-semibold); }
.eo-qv__due strong { font-size: var(--eo-fs-xl); font-weight: var(--eo-fw-bold); }
.eo-qv__cost { display: flex; justify-content: space-between; gap: var(--eo-space-md); color: var(--eo-text-muted); font-size: var(--eo-fs-sm); }
.eo-qv__log { display: flex; flex-direction: column; gap: var(--eo-space-sm); margin: 0; padding: 0 0 0 var(--eo-space-base); list-style: none; }
.eo-qv__log li { position: relative; font-size: var(--eo-fs-md); }
.eo-qv__log li::before { content: ""; position: absolute; top: 7px; left: calc(var(--eo-space-base) * -1); width: 7px; height: 7px; background: var(--eo-border-strong); border-radius: 50%; }
.eo-qv__log li:not(:last-child)::after { content: ""; position: absolute; top: 16px; bottom: calc(var(--eo-space-sm) * -1 + 6px); left: calc(var(--eo-space-base) * -1 + 3px); width: 1px; background: var(--eo-border); }

#order-history { scroll-margin-top: calc(var(--eo-topbar-h) + var(--eo-space-3xl)); }

/* ========================================================================== */
/* SHOP COLOUR SWATCHES */
/* ========================================================================== */

.eo-color-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-color-swatch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.eo-color-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eo-color-swatch span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: transparent;
    border-radius: var(--eo-radius-pill);
}

.eo-color-swatch input:checked + span {
    color: #FFFFFF;
    box-shadow: 0 0 0 2px var(--eo-surface), 0 0 0 4px var(--eo-text);
}

.eo-color-swatch input:focus-visible + span {
    box-shadow: 0 0 0 2px var(--eo-surface), 0 0 0 4px var(--eo-brand);
}

.eo-color-swatch--default span { background: #1E3A8A; }
.eo-color-swatch--teal span { background: #0F766E; }
.eo-color-swatch--green span { background: #166534; }
.eo-color-swatch--maroon span { background: #9F1239; }
.eo-color-swatch--brown span { background: #92400E; }
.eo-color-swatch--slate span { background: #334155; }
.eo-color-swatch--black span { background: #111827; }

.eo-color-swatch-custom {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    padding: var(--eo-space-2xs);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-color-swatch-custom:has(input:checked) {
    border-color: var(--eo-brand);
    box-shadow: inset 0 0 0 1px var(--eo-brand);
}

.eo-color-swatch-custom input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eo-color-swatch-custom input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.eo-color-swatch-custom .eo-control {
    width: 92px;
    border: 0;
}

/* ============================================================
   QUANTITY STEPPER (<x-qty-input>)
   One joined control with the number in the middle
   ============================================================ */
.eo-qty.eo-input-group {
    display: inline-flex;
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    vertical-align: top;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border-strong);
    border-radius: var(--eo-radius);
    transition: border-color var(--eo-dur) var(--eo-ease), box-shadow var(--eo-dur) var(--eo-ease);
}

.eo-qty.eo-input-group:focus-within {
    border-color: var(--eo-brand);
    box-shadow: var(--eo-focus);
}

.eo-qty.eo-input-group > .eo-btn {
    flex: 0 0 auto;
    width: var(--eo-control-h);
    height: auto;
    padding: 0;
    color: var(--eo-text-muted);
    background: var(--eo-surface-2);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.eo-qty.eo-input-group > .eo-btn:hover {
    color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-qty.eo-input-group > .eo-btn:active {
    background: var(--eo-brand-20);
}

.eo-qty.eo-input-group > .eo-control {
    flex: 0 1 64px;
    width: 64px;
    font-weight: var(--eo-fw-semibold);
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* line-height 1: the Bangla font's tall line box otherwise lifts a short unit like পিস above the middle */
.eo-qty.eo-input-group > .eo-input-group__addon {
    line-height: 1;
    padding: 0 var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--eo-border);
    border-radius: 0;
}

.eo-field.is-invalid .eo-qty.eo-input-group {
    border-color: var(--eo-danger);
}

@media (max-width: 767.98px) {
    .eo-qty.eo-input-group > .eo-btn {
        width: var(--eo-control-h-lg);
    }
}

/* ============================================================
   WEB PUSH: the switch inside the bell menu
   ============================================================ */
.eo-bell__push {
    padding: var(--eo-space-sm) var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

.eo-bell__push .eo-row {
    flex-wrap: nowrap;
    gap: var(--eo-space-sm);
}

.eo-bell__push .eo-btn,
.eo-bell__push .eo-link-btn {
    flex: 0 0 auto;
}

/* 25 rider's own delivery screen: phone first, big buttons */
.rd-summary {
    margin-bottom: var(--eo-space-md);
}

.rd-list {
    display: grid;
    gap: var(--eo-space-md);
}

.rd-parcel {
    display: grid;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md);
}

.rd-parcel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--eo-space-sm);
}

.rd-parcel__name,
.rd-parcel__cod {
    font-weight: 600;
    color: var(--eo-text);
}

.rd-parcel__cod {
    white-space: nowrap;
}

.rd-parcel__line {
    display: flex;
    gap: var(--eo-space-xs);
    margin: 0;
}

.rd-parcel__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eo-space-sm);
}

.rd-parcel__actions > :first-child {
    grid-column: 1 / -1;
}

/* phones: iOS zooms the page into any field under 16px */
@media (max-width: 767.98px) {
    input.eo-control,
    select.eo-control,
    textarea.eo-control,
    .eo-scan__input {
        font-size: 1rem;
    }
}

/* phones: the two lists people open most read as rows of cards, the other columns stay on the order page */
@media (max-width: 575.98px) {
    [data-table="orders"] .eo-table,
    [data-table="products"] .eo-table,
    [data-table="orders"] tbody,
    [data-table="products"] tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    [data-table="orders"] thead,
    [data-table="products"] thead {
        display: none;
    }

    [data-table="orders"] tbody tr:not(.eo-table-empty),
    [data-table="products"] tbody tr:not(.eo-table-empty) {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        gap: 2px var(--eo-space-sm);
        align-items: center;
        padding: var(--eo-space-sm) var(--eo-space-md);
        border-bottom: 1px solid var(--eo-border);
    }

    [data-table="orders"] tbody tr:not(.eo-table-empty) > td,
    [data-table="products"] tbody tr:not(.eo-table-empty) > td {
        display: none;
        min-width: 0;
        height: auto;
        padding: 0;
        white-space: normal;
        border: 0;
    }

    [data-table="orders"] tbody tr:not(.eo-table-empty) > td.eo-table__check,
    [data-table="products"] tbody tr:not(.eo-table-empty) > td.eo-table__check {
        display: block;
        grid-row: 1 / span 3;
        grid-column: 1;
        width: auto;
    }

    [data-table="orders"] tbody td[data-col="number"],
    [data-table="products"] tbody td[data-col="name"] {
        display: block !important;
        grid-row: 1;
        grid-column: 2;
    }

    [data-table="orders"] tbody td[data-col="total"],
    [data-table="products"] tbody td[data-col="price"] {
        display: block !important;
        grid-row: 1;
        grid-column: 3;
        font-weight: var(--eo-fw-semibold);
        text-align: right;
    }

    [data-table="orders"] tbody td[data-col="customer"],
    [data-table="products"] tbody td[data-col="category"] {
        display: block !important;
        grid-row: 2;
        grid-column: 2;
    }

    [data-table="orders"] tbody td[data-col="status"],
    [data-table="products"] tbody td[data-col="available"] {
        display: block !important;
        grid-row: 2;
        grid-column: 3;
        text-align: right;
    }

    [data-table="orders"] tbody td[data-col="date"] {
        display: block !important;
        grid-row: 3;
        grid-column: 2 / span 2;
    }
}

/* phones: an order line reads as name, then quantity, price and total */
@media (max-width: 575.98px) {
    .eo-order-items .eo-table,
    .eo-order-items tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .eo-order-items thead {
        display: none;
    }

    .eo-order-items tbody tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 2px var(--eo-space-sm);
        padding: var(--eo-space-sm) var(--eo-space-base);
        border-bottom: 1px solid var(--eo-border);
    }

    .eo-order-items tbody td {
        height: auto;
        padding: 0;
        white-space: normal;
        border: 0;
    }

    .eo-order-items tbody td:first-child {
        grid-column: 1 / -1;
    }

    .eo-order-items tbody td:nth-child(2)::after {
        content: " ×";
        color: var(--eo-text-muted);
    }

    .eo-order-items tbody td:nth-child(n+6) {
        display: none;
    }
}

/* phones: every other list reads as cards; dashboard.js picks the tables and labels the cells */
@media (max-width: 575.98px) {
    .eo-table-wrap--cards {
        max-height: none;
        overflow-x: visible;
    }

    .eo-table-wrap--cards .eo-table,
    .eo-table-wrap--cards tbody,
    .eo-table-wrap--cards tfoot {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .eo-table-wrap--cards thead {
        display: none;
    }

    .eo-table-wrap--cards tbody tr:not(.eo-table-empty),
    .eo-table-wrap--cards tfoot tr {
        position: relative;
        display: block;
        padding: var(--eo-space-sm) var(--eo-space-md);
        border-bottom: 1px solid var(--eo-border);
    }

    .eo-table-wrap--cards tbody tr:not(.eo-table-empty) > td,
    .eo-table-wrap--cards tfoot tr > * {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        height: auto;
        padding: 2px 0;
        overflow-wrap: anywhere;
        text-align: right;
        white-space: normal;
        border: 0;
    }

    .eo-table-wrap--cards tbody tr:not(.eo-table-empty) > td::after {
        display: block;
        clear: both;
        content: "";
    }

    .eo-table-wrap--cards td[data-label]::before {
        float: left;
        margin-right: var(--eo-space-sm);
        font-size: var(--eo-fs-sm);
        font-weight: var(--eo-fw-normal);
        color: var(--eo-text-muted);
        content: attr(data-label);
    }

    /* the first cell names the row, so it needs no label */
    .eo-table-wrap--cards tbody tr:not(.eo-table-empty) > td:first-child,
    .eo-table-wrap--cards tbody tr:not(.eo-table-empty) > td.eo-table__check + td {
        padding-right: var(--eo-space-xl);
        font-weight: var(--eo-fw-medium);
        text-align: left;
    }

    .eo-table-wrap--cards tfoot tr > :first-child {
        font-weight: var(--eo-fw-medium);
        text-align: left;
    }

    .eo-table-wrap--cards tbody tr > td:first-child::before,
    .eo-table-wrap--cards tbody tr > td.eo-table__check + td::before,
    .eo-table-wrap--cards tfoot tr > :first-child::before {
        content: none;
    }

    .eo-table-wrap--cards .eo-cell-main,
    .eo-table-wrap--cards .eo-cell-sub {
        white-space: normal;
    }

    .eo-table-wrap--cards tbody tr:not(.eo-table-empty) > td.eo-table__check {
        position: absolute;
        top: var(--eo-space-sm);
        right: var(--eo-space-md);
        width: auto;
        padding: 0;
    }

    .eo-table-wrap--cards .eo-table__actions .eo-row,
    .eo-table-wrap--cards td[data-label] .eo-row {
        justify-content: flex-end;
    }

    .eo-table-wrap--cards td[data-label] .eo-control {
        display: inline-block;
        width: auto;
        max-width: 60%;
        vertical-align: middle;
    }

    .eo-table-wrap--cards td[data-label] .eo-row .eo-control {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .eo-table-wrap--cards .eo-table-empty,
    .eo-table-wrap--cards .eo-table-empty > td {
        display: block;
    }

    .eo-table-wrap--cards .eo-table .is-col-hidden,
    .eo-table-wrap--cards .eo-table .is-cell-empty {
        display: none !important;
    }
}

/* a short list of tick boxes in a modal, such as the staff of one warehouse */
.eo-check-list {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-xs);
    max-height: 320px;
    margin: 0;
    padding: var(--eo-space-sm) var(--eo-space-md);
    overflow-y: auto;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-check-list .eo-field {
    margin: 0;
}

.eo-check-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.eo-check-group legend {
    float: none;
    width: auto;
    margin: 0 0 var(--eo-space-xs);
    padding: 0;
}

/* 41 SMS settings: credit in one line, events as a switch list, text editor in a modal */
.eo-credit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-md) var(--eo-space-2xl);
    padding: var(--eo-space-md) var(--eo-space-lg);
}

.eo-credit-bar__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--eo-icon-box);
    height: var(--eo-icon-box);
    color: var(--eo-text-muted);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-credit-bar__icon.is-low {
    color: var(--eo-danger-strong);
    background: var(--eo-danger-10);
    border-color: var(--eo-danger-25);
}

.eo-credit-bar__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eo-credit-bar__label {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-credit-bar__value {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    line-height: var(--eo-lh-tight);
    font-variant-numeric: tabular-nums;
}

.eo-credit-bar__action {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .eo-credit-bar {
        gap: var(--eo-space-md) var(--eo-space-lg);
        padding: var(--eo-space-md);
    }

    .eo-credit-bar__action {
        width: 100%;
        margin-left: 0;
    }
}

.eo-toggle-list {
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
    transition: opacity var(--eo-dur) var(--eo-ease);
}

.eo-toggle-list.is-off {
    opacity: 0.55;
}

.eo-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-base);
}

.eo-toggle-row + .eo-toggle-row {
    border-top: 1px solid var(--eo-border);
}

.eo-toggle-row:hover {
    background: var(--eo-surface-2);
}

.eo-toggle-row__main {
    flex: 1;
    min-width: 0;
}

.eo-toggle-row__main .eo-field {
    margin: 0;
}

.eo-toggle-row__main .eo-check {
    font-weight: var(--eo-fw-medium);
}

/* lines up under the label, past the 34px switch and its gap */
.eo-toggle-row__preview {
    margin: 2px 0 0 calc(34px + var(--eo-space-sm));
    overflow: hidden;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.eo-toggle-row__action {
    flex-shrink: 0;
    color: var(--eo-text-muted);
}

.eo-toggle-row__dot {
    width: 6px;
    height: 6px;
    background: var(--eo-accent);
    border-radius: 50%;
}

@media (max-width: 575.98px) {
    .eo-toggle-row {
        padding: var(--eo-space-md);
    }

    .eo-toggle-row__preview {
        white-space: normal;
    }
}

.eo-sms-codes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs);
}

.eo-sms-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    font: inherit;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-pill);
    cursor: pointer;
}

.eo-sms-code .svg-icon {
    width: 12px;
    height: 12px;
    color: var(--eo-text-subtle);
}

.eo-sms-code:hover {
    border-color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-sms-preview {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-xs);
    padding: var(--eo-space-md);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-sms-preview__bubble {
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: var(--eo-space-sm) var(--eo-space-md);
    font-size: var(--eo-fs-base);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: 12px 12px 12px 2px;
}

/* 04 wallet page: one balance strip, one history card, one services card */
.eo-balances {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

.eo-balances__item {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    padding: var(--eo-space-base) var(--eo-space-lg);
    color: var(--eo-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: background-color var(--eo-dur) var(--eo-ease);
}

.eo-balances__item + .eo-balances__item {
    border-left: 1px solid var(--eo-border);
}

.eo-balances__item:hover {
    color: var(--eo-text);
    text-decoration: none;
    background: var(--eo-surface-2);
}

.eo-balances__item.is-active {
    border-bottom-color: var(--eo-brand);
    background: var(--eo-surface-2);
}

.eo-balances__label {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-balances__item.is-active .eo-balances__label {
    color: var(--eo-brand);
}

.eo-balances__label .svg-icon {
    width: 14px;
    height: 14px;
}

.eo-balances__value {
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-bold);
    line-height: 1.2;
}

.eo-wallet-history__head {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.eo-wallet-history__head > div {
    flex: 1;
    min-width: 0;
}

.eo-wallet-history__head .eo-filterbar {
    flex: none;
    width: auto;
    margin: 0;
}

/* services: two plain rows a line, a switch on each; no box per service */
.eo-addons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--eo-space-2xl);
    padding: 0 var(--eo-space-lg) var(--eo-space-sm);
}

.eo-addon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-base);
    padding: var(--eo-space-md) 0;
    border-top: 1px solid var(--eo-border);
}

.eo-addon__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eo-addon__meta {
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-addon__switch {
    display: inline-flex;
    flex: none;
    align-items: center;
}

.eo-addon__state {
    min-width: 32px;
    line-height: 1;
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

@media (max-width: 767.98px) {
    .eo-balances {
        grid-template-columns: minmax(0, 1fr);
    }

    .eo-balances__item + .eo-balances__item {
        border-left: 0;
        border-top: 1px solid var(--eo-border);
    }

    .eo-balances__item {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: var(--eo-space-sm);
        padding: var(--eo-space-md) var(--eo-space-base);
    }

    .eo-balances__label {
        flex-basis: 100%;
    }

    .eo-balances__value {
        font-size: var(--eo-fs-xl);
    }

    .eo-addons {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 var(--eo-space-base) var(--eo-space-xs);
    }
}

/* 37 SMS campaign form: three steps on the left, the summary and phone preview stay in view on the right */
.eo-sms {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--eo-space-base);
    align-items: start;
}

.eo-sms__side {
    position: sticky;
    top: calc(var(--eo-topbar-h) + var(--eo-space-base));
}

.eo-sms__step {
    display: flex;
    align-items: flex-start;
    gap: var(--eo-space-md);
}

.eo-sms__num {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--eo-brand);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    background: var(--eo-brand-10);
    border-radius: var(--eo-radius-pill);
}

.eo-sms__hint {
    margin: var(--eo-space-2xs) 0 0;
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-sms__picked {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    margin: 0;
    font-weight: var(--eo-fw-medium);
}

.eo-sms__codes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-xs);
}

.eo-sms__codes-label {
    margin-right: var(--eo-space-2xs);
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-sms__count {
    margin: calc(var(--eo-space-xs) * -1) 0 0;
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
    text-align: right;
}

.eo-sms__when {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eo-space-sm);
}

.eo-sms__option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    padding: var(--eo-space-md);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    cursor: pointer;
    transition: border-color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.eo-sms__option:hover {
    border-color: var(--eo-border-strong);
}

.eo-sms__option:has(input:checked) {
    border-color: var(--eo-brand);
    background: var(--eo-brand-10);
    box-shadow: inset 0 0 0 1px var(--eo-brand);
}

.eo-sms__option:has(input:focus-visible) {
    box-shadow: var(--eo-focus);
}

.eo-sms__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eo-sms__option-title {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-sm);
    font-weight: var(--eo-fw-semibold);
}

.eo-sms__option-text {
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-sms__reach {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eo-space-2xs);
    padding-bottom: var(--eo-space-base);
    text-align: center;
    border-bottom: 1px solid var(--eo-border);
}

.eo-sms__reach-num {
    font-size: 2.25rem;
    font-weight: var(--eo-fw-bold);
    line-height: 1.1;
}

.eo-sms__reach-label {
    color: var(--eo-text-muted);
}

.eo-sms__reach-note {
    color: var(--eo-warning-strong);
    font-size: var(--eo-fs-sm);
}

.eo-sms__facts {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--eo-space-sm) var(--eo-space-base);
    margin: 0;
}

.eo-sms__facts dt {
    color: var(--eo-text-muted);
    font-weight: var(--eo-fw-normal);
}

.eo-sms__facts dd {
    margin: 0;
    text-align: right;
}

.eo-sms__phone {
    padding: var(--eo-space-base);
    background: var(--eo-bg);
    border-radius: var(--eo-radius-lg);
}

.eo-sms__phone-label {
    margin: 0 0 var(--eo-space-sm);
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

/* a received text message: grey bubble, tail on the left */
.eo-sms__bubble {
    max-height: 240px;
    padding: var(--eo-space-sm) var(--eo-space-md);
    overflow-y: auto;
    font-size: var(--eo-fs-base);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl) var(--eo-radius-xl) var(--eo-radius-xl) var(--eo-radius-sm);
}

.eo-sms__bubble.is-empty {
    color: var(--eo-text-subtle);
}

.eo-sms__actions {
    flex-direction: column;
    align-items: stretch;
}

@media (max-width: 1199.98px) {
    .eo-sms {
        grid-template-columns: minmax(0, 1fr);
    }

    .eo-sms__side {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .eo-sms__when {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* page: p12-pos */
/* a row's name with a soft initial tile in front, like TimoDesk's project list */

/* counter cards on the open-the-drawer page */
.eo-pos-counter__state {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
    color: var(--eo-text-muted);
}

.eo-pos-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    margin-left: auto;
}
/* end page: p12-pos */

/* page: p05-orders */
.eo-order-top {
    align-items: center;
}

/* end page: p05-orders */

/* page: p06-orders */
.eo-od-person { display: flex; align-items: center; gap: var(--eo-space-md); }
.eo-od-person__text { display: flex; flex-direction: column; min-width: 0; }
.eo-od-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--eo-border); border-radius: var(--eo-radius); }
.eo-od-mini > div { padding: var(--eo-space-sm) var(--eo-space-md); text-align: center; }
.eo-od-mini > div + div { border-left: 1px solid var(--eo-border); }
.eo-od-mini dt { font-size: var(--eo-fs-sm); font-weight: var(--eo-fw-normal, 400); color: var(--eo-text-muted); }
.eo-od-mini dd { margin: 0; font-size: var(--eo-fs-lg); font-weight: var(--eo-fw-semibold); color: var(--eo-text); }
.eo-od-mini dd.eo-od-mini__bad { color: var(--eo-danger); }
.eo-od-event { display: flex; flex-direction: column; gap: var(--eo-space-2xs); min-width: 0; }
.eo-od-event__what { display: flex; flex-wrap: wrap; gap: var(--eo-space-xs) var(--eo-space-sm); }
.eo-od-timeline + .eo-more { margin-top: var(--eo-space-sm); }
.eo-od-timeline .eo-timeline__item { padding-bottom: var(--eo-space-sm); }
.eo-od-sub { margin-top: var(--eo-space-base); padding-top: var(--eo-space-md); border-top: 1px solid var(--eo-border); }
.eo-od-sub__title { margin: 0 0 var(--eo-space-sm); font-size: var(--eo-fs-sm); font-weight: var(--eo-fw-semibold); color: var(--eo-text-muted); }
.eo-od-past { list-style: none; margin: 0; padding: 0; }
.eo-od-past__row { display: flex; align-items: center; justify-content: space-between; gap: var(--eo-space-sm); padding: var(--eo-space-sm) var(--eo-space-lg); border-top: 1px solid var(--eo-border); }
.eo-od-past__link { display: flex; align-items: baseline; gap: var(--eo-space-sm); min-width: 0; color: var(--eo-text); text-decoration: none; }
.eo-od-past__link:hover .eo-strong { color: var(--eo-brand); }
.eo-od-past__more { padding: var(--eo-space-sm) var(--eo-space-lg); border-top: 1px solid var(--eo-border); }
.eo-od-past__more .eo-od-past__row { padding-left: 0; padding-right: 0; }
/* order form: "more options" sits in the items panel foot and opens to full width */
.eo-card__foot.eo-order-form__more { display: block; }
/* end page: p06-orders */

/* page: p04-marketing */
.eo-smslist__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}
/* end page: p04-marketing */

/* page: p02-marketing */
/* row name with a soft initial tile, like TimoDesk's project list */

.eo-mkt-tools {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
}
/* end page: p02-marketing */

/* page: p01-marketing */

@media (min-width: 1200px) {
    .eo-mk-toolbar-left {
        flex-wrap: nowrap;
    }

    .eo-mk-toolbar-left .eo-filterbar__search {
        flex: 0 1 300px;
    }
}

.eo-mk-actions {
    flex-wrap: nowrap;
    gap: var(--eo-space-xs);
}
.eo-mk-ads-stats {
    margin-bottom: var(--eo-space-base);
}
.eo-mk-period {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    min-height: var(--eo-control-h-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-2);
}
/* end page: p01-marketing */

/* page: p08-team */
.eo-team-tools {
    flex-wrap: wrap;
    gap: var(--eo-space-sm);
}
/* end page: p08-team */

/* page: p14-settings */
/* a list row's name cell, TimoDesk style: a soft letter tile, then the name and one grey line */

/* end page: p14-settings */

/* page: p10-team */
/* staff or shift name with a soft initial tile in front, like TimoDesk's project list */

.eo-team-time {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    white-space: nowrap;
}
/* end page: p10-team */

/* page: p09-team */
/* team pages: a soft initial tile before a name, day pills for the weekly off, a date tile per holiday */

.eo-team-holidays {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--eo-space-lg);
    align-items: start;
}

@media (max-width: 991.98px) {
    .eo-team-holidays {
        grid-template-columns: minmax(0, 1fr);
    }
}

.eo-team-daylist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-team-daylist__row {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-sm) var(--eo-space-lg);
    border-top: 1px solid var(--eo-border);
}

.eo-team-daylist__text {
    flex: 1;
    min-width: 0;
}

.eo-team-datetile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    line-height: 1.1;
    background: var(--eo-warning-10);
    border-radius: var(--eo-radius);
}

.eo-team-datetile__day {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-bold);
    color: var(--eo-warning-strong);
}

.eo-team-datetile__month {
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

.eo-team-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--eo-space-sm);
}

.eo-team-mini__item {
    display: flex;
    flex-direction: column;
    padding: var(--eo-space-md);
    background: var(--eo-surface-2);
    border-radius: var(--eo-radius);
}

.eo-team-mini__value {
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-bold);
    color: var(--eo-text);
}

.eo-team-mini__label {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-team-punches {
    margin: var(--eo-space-md) 0 0;
}
/* end page: p09-team */

/* page: p03-marketing */
.eo-mk-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-mk-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
}
/* end page: p03-marketing */

/* page: p11-inbox */
.eo-inbox__segment {
    display: flex;
}

.eo-inbox__segment .eo-segment__item {
    flex: 1 1 auto;
    justify-content: center;
}

.eo-inbox__tools {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
}

.eo-inbox__tools .eo-filterbar {
    flex: 1 1 auto;
    flex-wrap: nowrap;
}

.eo-inbox__tools .eo-filterbar__search {
    flex: 1 1 auto;
    min-width: 0;
}

.eo-inbox__head {
    align-items: center;
}

.eo-inbox__who {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
}

.eo-inbox__who-text {
    min-width: 0;
}

.eo-inbox__who-text p {
    margin: 0;
}

.eo-inbox__side .eo-avatar {
    width: 28px;
    height: 28px;
    font-size: var(--eo-fs-sm);
}

.eo-inbox__side p {
    margin: 0;
}
/* end page: p11-inbox */

/* page: p15-wholesale */
.eo-ws-top {
    align-items: center;
}

/* a buyer's or product's name with a soft initial tile in front, like TimoDesk's project list */

.eo-ws-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-2xs);
}

/* price ladder: up to three "from N pieces, price X" pairs side by side in one cell */
.eo-ws-tiers {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--eo-space-sm);
}

.eo-ws-tier {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-2xs);
    padding: 2px;
    background: var(--eo-surface-2);
    border-radius: var(--eo-radius);
}

.eo-ws-tier .eo-control {
    width: 68px;
}

.eo-ws-tier__sep {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--eo-text-subtle);
}
/* end page: p15-wholesale */

/* page: p16-products */
/* a row's name with its photo, or a soft initial tile when it has none */

/* product page: one photo on top of the facts panel */
.eo-prodview-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: var(--eo-space-md);
}
/* end page: p16-products */

/* page: p17-billing */
.eo-bill-toolbar {
    align-items: center;
}

.eo-bill-period .eo-field {
    margin: 0;
}

.eo-bill-payopt {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: 12px var(--eo-space-md);
    color: inherit;
    text-decoration: none;
}

.eo-bill-row__text {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.eo-bill-payopt {
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}
/* dead simple billing home: one full-width card; amount left, breakdown right on wide screens */
.eo-bill-simple {
    padding: 0;
    overflow: hidden;
}

.eo-bill-due {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-lg);
    background: var(--eo-danger-10);
    border-bottom: 1px solid var(--eo-border);
}

.eo-bill-due__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.eo-bill-due__text strong {
    color: var(--eo-danger-strong);
    font-size: var(--eo-fs-lg);
}

.eo-bill-due__text span {
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-bill-month {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--eo-space-md);
    padding: var(--eo-space-lg);
}

@media (min-width: 768px) {
    .eo-bill-month {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--eo-space-xl, 32px);
    }
}

.eo-bill-month__head {
    display: flex;
    flex-direction: column;
}

.eo-bill-month__label,
.eo-bill-month__date {
    color: var(--eo-text-muted);
}

.eo-bill-month__amount {
    font-size: 2.25rem;
    font-weight: var(--eo-fw-semibold);
    line-height: 1.2;
}

.eo-bill-month__rows {
    margin: 0;
}

.eo-bill-month__rows > div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.eo-bill-month__rows > div + div {
    border-top: 1px dashed var(--eo-border);
}

.eo-bill-month__rows dt {
    font-weight: normal;
    color: var(--eo-text-muted);
}

.eo-bill-month__rows dd {
    margin: 0;
    font-weight: var(--eo-fw-semibold);
}

/* invoice page: one sheet */
.eo-inv {
    padding: 0;
    overflow: hidden;
}

.eo-inv__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: var(--eo-space-lg);
}

.eo-inv__total {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.eo-inv__total span,
.eo-inv__label,
.eo-inv__facts dt {
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
    font-weight: normal;
}

.eo-inv__total strong {
    font-size: 2rem;
    line-height: 1.2;
}

.eo-inv__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--eo-space-md);
    margin: 0;
    padding: var(--eo-space-md) var(--eo-space-lg);
    background: var(--eo-bg);
    border-top: 1px solid var(--eo-border);
    border-bottom: 1px solid var(--eo-border);
}

.eo-inv__facts dd {
    margin: 2px 0 0;
    font-weight: var(--eo-fw-semibold);
}

.eo-inv__lines,
.eo-inv__pays {
    padding: var(--eo-space-sm) var(--eo-space-lg);
}

.eo-inv__line,
.eo-inv__pay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: 10px 0;
}

.eo-inv__line + .eo-inv__line {
    border-top: 1px dashed var(--eo-border);
}

.eo-inv__line--total {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.eo-inv__line--total,
.eo-inv__line + .eo-inv__line--total {
    border-top: 1px solid var(--eo-text);
}

.eo-inv__pays {
    border-top: 1px solid var(--eo-border);
}

.eo-inv__label {
    padding-top: var(--eo-space-sm);
}

.eo-inv__pay + .eo-inv__pay {
    border-top: 1px dashed var(--eo-border);
}

.eo-inv__pay-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
/* end page: p17-billing */

/* page: p20-cod */

.eo-cod-form {
    max-width: 640px;
}

/* upload page: file or by hand as two pills, and the three steps on the side */
.eo-exp-top {
    margin-bottom: var(--eo-space-md);
}

.eo-exp-top > .eo-segment {
    max-width: 100%;
    overflow-x: auto;
}

.eo-cod-top {
    margin-bottom: var(--eo-space-md);
}

.eo-cod-sample {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--eo-space-sm);
    padding-top: var(--eo-space-md);
    margin-top: var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

.eo-cod-steps {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--eo-fs-md);
}

.eo-cod-steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--eo-space-sm);
}

.eo-cod-steps__num {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-radius: 50%;
}

.eo-cod-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-2xs);
    white-space: nowrap;
}

.eo-cod-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}
/* end page: p20-cod */

/* page: p21-confirmation */
.eo-desk__queue .eo-desk__item {
    padding: var(--eo-space-sm) var(--eo-space-base);
}

.eo-desk__queue .eo-namecell__tile {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.eo-desk__queue .eo-cell-sub .svg-icon {
    width: 12px;
    height: 12px;
}

.eo-desk-who__tile {
    width: 42px;
    height: 42px;
    font-size: var(--eo-fs-lg);
    border-radius: 50%;
}

.eo-desk-facts {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-desk-facts > li {
    display: flex;
    align-items: flex-start;
    gap: var(--eo-space-sm);
}

.eo-desk-facts > li > .svg-icon {
    flex-shrink: 0;
    margin-top: var(--eo-space-2xs);
    color: var(--eo-text-muted);
}

.eo-desk-facts__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eo-desk-facts__text.eo-row {
    flex-direction: row;
    align-items: center;
}

.eo-desk-facts__note {
    display: block;
}

.eo-desk-past {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 10rem);
    gap: var(--eo-space-md);
    align-items: center;
    margin: 0;
}

.eo-desk-past > :last-child {
    justify-self: end;
}

.eo-board-rate {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-board-rate progress {
    width: 64px;
    margin: 0;
}
/* end page: p21-confirmation */

/* page: p24-integrations */
.eo-intg-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--eo-space-sm);
}

.eo-intg-choice {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    width: 100%;
    padding: var(--eo-space-md);
    text-align: left;
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.eo-intg-choice:hover,
.eo-intg-choice:focus-visible {
    border-color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-intg-choice:disabled {
    opacity: 0.6;
}

.eo-intg-choice__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* a narrow choice card wraps its grey line instead of running under the arrow */
.eo-intg-choice__text .eo-cell-sub {
    white-space: normal;
}

.eo-intg-choice__go {
    flex: none;
    color: var(--eo-text-muted);
}

/* the WooCommerce tile is a link to its guide */
a.eo-intg-choice {
    text-decoration: none;
}

.eo-intg-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-2xs);
}

.eo-intg-steps {
    padding: var(--eo-space-sm);
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius-sm);
}

.eo-intg-steps > p {
    margin-bottom: var(--eo-space-xs);
}

.eo-intg-link {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
    min-width: 200px;
}

/* WooCommerce guide (06): numbered step cards, the number in a green circle on the left */
.eo-woo-steps {
    display: grid;
    gap: var(--eo-space-base);
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-woo-step {
    display: flex;
    gap: var(--eo-space-base);
    padding: var(--eo-space-lg);
}

.eo-woo-step__num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-weight: var(--eo-fw-semibold);
    color: #FFFFFF;
    background: var(--eo-brand);
    border-radius: var(--eo-radius-pill);
}

.eo-woo-step__body {
    display: grid;
    flex: 1;
    gap: var(--eo-space-sm);
    min-width: 0;
}

.eo-woo-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 1.2em;
}

.eo-woo-code {
    display: grid;
    gap: var(--eo-space-md);
    max-width: 460px;
}

.eo-woo-code .eo-btn {
    justify-self: start;
}

.eo-woo-notes {
    display: grid;
    gap: var(--eo-space-xs);
    padding: var(--eo-space-sm) var(--eo-space-md);
    background: var(--eo-surface-2);
    border-radius: var(--eo-radius);
}

.eo-woo-sites {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-woo-sites li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: var(--eo-space-sm) var(--eo-space-md);
}

.eo-woo-sites li + li {
    border-top: 1px solid var(--eo-border);
}

.eo-woo-needs {
    display: grid;
    gap: var(--eo-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-woo-needs li {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-woo-needs .svg-icon {
    color: var(--eo-success);
}

/* what you need and the help stay in view while the owner works down the steps */
@media (min-width: 992px) {
    .eo-woo-aside {
        position: sticky;
        top: calc(var(--eo-topbar-h) + var(--eo-space-base));
        max-height: calc(100vh - var(--eo-topbar-h) - var(--eo-space-xl));
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* end page: p24-integrations */

/* page: p19-calls */
.eo-call-top {
    align-items: center;
}

.eo-call-tools {
    display: flex;
    flex: 1 1 420px;
    align-items: center;
    gap: var(--eo-space-sm);
    min-width: 0;
}

/* a call row: a soft tile with the call's direction, then the name and phone */

.eo-call-head {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    padding-bottom: var(--eo-space-base);
    margin-bottom: var(--eo-space-base);
    border-bottom: 1px solid var(--eo-border);
}

.eo-call-head .eo-namecell__text {
    flex: 1 1 auto;
}

.eo-call-audio {
    display: block;
    width: 100%;
}

.eo-call-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
}

.eo-call-range {
    min-width: 260px;
    padding: var(--eo-space-md);
}

.eo-call-range .eo-field {
    margin-bottom: var(--eo-space-sm);
}
/* end page: p19-calls */

/* page: p22-customers */

.eo-cust-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-cust-tools--center {
    justify-content: center;
}

/* profile page: a narrow "who" column on the left, the history on the right */
.eo-cust-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--eo-space-lg);
    align-items: start;
}

@media (max-width: 991.98px) {
    .eo-cust-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.eo-cust-side,
.eo-cust-main {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
    min-width: 0;
}

.eo-cust-who {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
}

.eo-cust-who__name {
    margin: 0 0 var(--eo-space-xs);
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
    overflow-wrap: anywhere;
}

.eo-cust-who__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs);
}

.eo-cust-facts {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    margin: 0;
    padding: var(--eo-space-base) 0 0;
    list-style: none;
    border-top: 1px solid var(--eo-border);
}

.eo-cust-facts li {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-height: 28px;
    font-size: var(--eo-fs-base);
    color: var(--eo-text-2);
}

.eo-cust-facts li > .svg-icon {
    flex-shrink: 0;
    color: var(--eo-text-subtle);
}

.eo-cust-facts__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.eo-cust-tabs .eo-card__head {
    padding-bottom: 0;
}

.eo-cust-import {
    max-width: 760px;
}
/* end page: p22-customers */

/* page: p25-parcels */
.eo-parcels-top {
    align-items: center;
}

.eo-parcels-top__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-sm);
    margin-left: auto;
}

.eo-parcels-narrow {
    max-width: 720px;
}

.eo-parcels-show {
    align-items: start;
}

.eo-parcels-show .eo-more {
    padding: var(--eo-space-sm) var(--eo-space-base);
    border-top: 1px solid var(--eo-border);
}
/* end page: p25-parcels */

/* page: p23-daraz */

.eo-dz-shop {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    min-width: 0;
}

.eo-dz-shop__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eo-dz-shop__text {
    flex: 1 1 auto;
}

.eo-dz-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--eo-space-md);
    margin: var(--eo-space-lg) 0 0;
    padding-top: var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

.eo-dz-meta dt {
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.eo-dz-meta dd {
    margin: 0;
    color: var(--eo-text);
}

.eo-dz-error {
    max-width: 200px;
    overflow: hidden;
    color: var(--eo-danger-strong);
    text-overflow: ellipsis;
}

.eo-dz-note {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    margin: 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-dz-grid {
    align-items: start;
}

.eo-dz-actions {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
}
/* end page: p23-daraz */

/* page: p26-profit */
.eo-profit-total td {
    background: var(--eo-bg-hover);
}

.eo-profit-sub {
    padding-left: var(--eo-space-xl);
}

/* a line opens its orders, but it reads as a statement line, not a row of green links */
.eo-profit-line a {
    color: inherit;
    text-decoration: none;
}

.eo-profit-line a:hover,
.eo-profit-line a:focus-visible {
    color: var(--eo-brand);
    text-decoration: underline;
}

.eo-profit-note {
    margin: var(--eo-space-sm) 0 var(--eo-space-md);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}
/* end page: p26-profit */

/* page: p29-staff */
.eo-staff-toolbar {
    align-items: center;
}

.eo-staff-toolbar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-staff-row-off .eo-namecell,
.eo-staff-row-off .eo-staff-role,
.eo-staff-row-off .eo-inline {
    opacity: .6;
}

.eo-staff-form {
    max-width: 760px;
}

.eo-staff-stores {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-xs);
}
/* end page: p29-staff */

/* page: p30-stores */
.eo-store-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
}

.eo-store-actions form {
    margin: 0;
}

.eo-dns-line {
    display: block;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}
/* end page: p30-stores */

/* page: p28-resellers */
.eo-rsl-seg {
    align-self: flex-start;
    max-width: 100%;
    margin-bottom: var(--eo-space-md);
    overflow-x: auto;
}

.eo-rsl-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-rsl-hint {
    margin: 0 0 var(--eo-space-md);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

/* profile page: a narrow "who" column on the left, the orders and money on the right */
.eo-rsl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--eo-space-lg);
    align-items: start;
}

@media (min-width: 1200px) {
    .eo-rsl-layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

.eo-rsl-col {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
    min-width: 0;
}

.eo-rsl-col > .eo-card {
    margin-bottom: 0;
}

.eo-rsl-who {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    margin-bottom: var(--eo-space-md);
}

.eo-rsl-who__name {
    margin: 0;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.eo-rsl-facts {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    margin: 0;
}

.eo-rsl-facts dt {
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.eo-rsl-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}
/* end page: p28-resellers */

/* page: p31-support */
.eo-sup-toolbar { align-items: center; }
.eo-sup-toolbar .eo-filterbar { flex: 1 1 260px; }

.eo-sup-narrow { width: 100%; max-width: 720px; }

.eo-sup-thread { display: flex; flex-direction: column; gap: var(--eo-space-base); }
.eo-sup-msg { display: flex; flex-direction: column; gap: var(--eo-space-xs); max-width: 80%; }
.eo-sup-msg--me { align-self: flex-end; align-items: flex-end; }
.eo-sup-msg--system { align-self: center; align-items: center; max-width: 100%; }
.eo-sup-msg__who { display: flex; gap: var(--eo-space-sm); margin: 0; font-size: var(--eo-fs-sm); }
.eo-sup-msg__bubble { padding: var(--eo-space-md) var(--eo-space-base); background: var(--eo-bg-hover); border-radius: var(--eo-radius-lg); }
.eo-sup-msg__bubble > p { margin: 0; }
.eo-sup-msg--me .eo-sup-msg__bubble { background: var(--eo-brand-10); }
.eo-sup-msg--system .eo-sup-msg__bubble { color: var(--eo-text-muted); background: none; border: 1px dashed var(--eo-border); }
/* super admin: an internal note stays on our side but reads as private */
.eo-sup-msg--internal .eo-sup-msg__bubble { background: var(--eo-warning-10); border: 1px dashed var(--eo-warning); }
.eo-sup-msg__files { margin-top: var(--eo-space-sm); }
.eo-sup-reply { margin-top: var(--eo-space-lg); padding-top: var(--eo-space-lg); border-top: 1px solid var(--eo-border); }
.eo-sup-block { width: 100%; justify-content: center; }
.eo-sup-rate { display: flex; }
.eo-sup-rate .eo-segment__item { flex: 1 1 0; justify-content: center; }
@media (max-width: 767.98px) {
    .eo-sup-msg { max-width: 100%; }
}

/* the TimoDesk support layout: one card (intro, body, foot) with a tips or details card beside it */
.eo-nt { align-items: start; }
.eo-nt-card { overflow: hidden; }
.eo-nt-intro { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--eo-border); }
.eo-nt-intro__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--eo-brand); background: var(--eo-brand-10); border-radius: var(--eo-radius-lg); }
.eo-nt-intro__icon .svg-icon { width: 22px; height: 22px; }
.eo-nt-intro__text { flex: 1; min-width: 0; }
.eo-nt-intro__title { margin: 0 0 2px; font-size: var(--eo-fs-lg); font-weight: var(--eo-fw-semibold); color: var(--eo-text); overflow-wrap: anywhere; }
.eo-nt-intro__sub { margin: 0; font-size: var(--eo-fs-sm); color: var(--eo-text-muted); }
.eo-nt-intro__status { flex-shrink: 0; align-self: flex-start; }
.eo-nt-body { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.eo-nt-body > .collapse:not(.show) { display: none; }
.eo-nt-body textarea { min-height: 110px; resize: vertical; }
.eo-nt-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px; }

.eo-nt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.eo-nt-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; cursor: pointer; background: var(--eo-surface); border: 1px solid var(--eo-border); border-radius: var(--eo-radius-lg); transition: border-color .2s, background .2s, box-shadow .2s; }
.eo-nt-tile input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.eo-nt-tile:hover { border-color: var(--eo-brand); }
.eo-nt-tile:has(input:checked) { background: var(--eo-brand-10); border-color: var(--eo-brand); box-shadow: 0 0 0 3px var(--eo-brand-10); }
.eo-nt-tile:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--eo-brand-20); }
.eo-nt-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 8px; color: var(--eo-text-muted); background: var(--eo-bg-hover); border-radius: var(--eo-radius-lg); transition: all .2s; }
.eo-nt-tile__icon .svg-icon { width: 17px; height: 17px; }
.eo-nt-tile:has(input:checked) .eo-nt-tile__icon { color: var(--eo-on-brand); background: var(--eo-brand); }
.eo-nt-tile__name { font-size: var(--eo-fs-sm); font-weight: var(--eo-fw-semibold); color: var(--eo-text); }
.eo-nt-tile__hint { font-size: var(--eo-fs-xs); color: var(--eo-text-muted); }

.eo-nt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--eo-border); }
.eo-nt-foot__attach { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eo-nt-foot__hint { font-size: var(--eo-fs-xs); color: var(--eo-text-subtle); }
.eo-nt-foot__end { display: flex; gap: 8px; margin-left: auto; }

.eo-nt-tips { padding: 22px 24px; }
.eo-nt-tips__title { margin: 0 0 16px; font-size: var(--eo-fs-xs); font-weight: var(--eo-fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--eo-text-muted); }
.eo-nt-tips__list { display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; }
.eo-nt-tips__list li { display: flex; gap: 12px; }
.eo-nt-tips__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--eo-brand); background: var(--eo-brand-10); border-radius: var(--eo-radius-lg); }
.eo-nt-tips__icon .svg-icon { width: 15px; height: 15px; }
.eo-nt-tips__list strong { display: block; font-size: var(--eo-fs-sm); font-weight: var(--eo-fw-semibold); color: var(--eo-text); }
.eo-nt-tips__list p { margin: 2px 0 0; font-size: var(--eo-fs-sm); line-height: 1.5; color: var(--eo-text-muted); }
.eo-nt-tips__link { display: flex; align-items: center; gap: 8px; padding-top: 16px; font-size: var(--eo-fs-sm); font-weight: var(--eo-fw-medium); color: var(--eo-brand); text-decoration: none; border-top: 1px solid var(--eo-border); }
.eo-nt-tips__link .svg-icon { width: 16px; height: 16px; }
.eo-nt-tips__link .svg-icon:last-child { margin-left: auto; transition: transform .2s; }
.eo-nt-tips__link:hover .svg-icon:last-child { transform: translateX(3px); }

/* the ticket page: reply box on top, the conversation newest first under it */
.eo-nt-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: var(--eo-fs-sm); color: var(--eo-text-2); background: var(--eo-warning-10); border-radius: var(--eo-radius-lg); }
.eo-nt-note .svg-icon { flex-shrink: 0; color: var(--eo-warning-strong); }
.eo-nt-thread { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-top: 1px solid var(--eo-border); }
.eo-nt-msg { display: flex; gap: 12px; min-width: 0; }
.eo-nt-msg__avatar { width: 36px; height: 36px; font-size: var(--eo-fs-sm); }
.eo-nt-msg--team .eo-nt-msg__avatar { color: var(--eo-on-brand); background: var(--eo-text); }
.eo-nt-msg--system .eo-nt-msg__avatar { color: var(--eo-text-muted); background: var(--eo-bg-hover); }
.eo-nt-msg__main { flex: 1; min-width: 0; }
.eo-nt-msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.eo-nt-msg__name { font-size: var(--eo-fs-sm); font-weight: var(--eo-fw-semibold); color: var(--eo-text); }
.eo-nt-msg__time { margin-left: auto; font-size: var(--eo-fs-xs); color: var(--eo-text-subtle); }
.eo-nt-msg__body { padding: 12px 14px; font-size: var(--eo-fs-sm); line-height: 1.6; color: var(--eo-text-2); overflow-wrap: anywhere; background: var(--eo-surface-2); border: 1px solid var(--eo-border); border-radius: 0 var(--eo-radius-lg) var(--eo-radius-lg) var(--eo-radius-lg); }
.eo-nt-msg--team .eo-nt-msg__body { background: var(--eo-brand-10); border-color: var(--eo-brand-20); }
.eo-nt-msg--system .eo-nt-msg__body { color: var(--eo-text-muted); background: none; border-style: dashed; }
.eo-nt-msg__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.eo-nt-facts { margin: 0 0 20px; }
.eo-nt-facts__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: var(--eo-fs-sm); }
.eo-nt-facts__row:first-child { padding-top: 0; }
.eo-nt-facts__row + .eo-nt-facts__row { border-top: 1px solid var(--eo-border); }
.eo-nt-facts__row dt { flex-shrink: 0; font-weight: var(--eo-fw-normal); color: var(--eo-text-subtle); white-space: nowrap; }
.eo-nt-facts__row dd { min-width: 0; margin: 0; font-weight: var(--eo-fw-medium); color: var(--eo-text); text-align: right; }
.eo-nt-facts + .eo-nt-tips__link,
.eo-nt-side form + .eo-nt-tips__link { margin-top: 16px; }

@media (min-width: 992px) {
    .eo-nt-side { position: sticky; top: calc(var(--eo-topbar-h, 64px) + 24px); }
}

@media (max-width: 767.98px) {
    .eo-nt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eo-nt-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .eo-nt-intro, .eo-nt-body, .eo-nt-foot, .eo-nt-tips, .eo-nt-thread { padding-right: 16px; padding-left: 16px; }
    .eo-nt-foot__hint { display: none; }
    .eo-nt-msg__time { width: 100%; margin-left: 0; }
}
/* end page: p31-support */

/* page: p36-returns */
.eo-rt-top {
    align-items: center;
}

.eo-rt-actions {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    margin-left: auto;
}

.eo-rt-scan {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

.eo-rt-scan__hint {
    margin: var(--eo-space-sm) 0 0;
    color: var(--eo-text-muted);
    font-size: var(--eo-fs-sm);
}

.eo-rl-actions form {
    display: inline-block;
    margin-left: 4px;
}
.eo-rt-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--eo-space-base);
    align-items: start;
}

@media (min-width: 992px) {
    .eo-rt-detail {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.eo-rt-detail .eo-dl dd .eo-cell-sub {
    display: block;
}
.eo-rl-group + .eo-rl-group {
    border-top: 1px solid var(--eo-border);
}

.eo-rl-group__head {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md) var(--eo-space-lg);
    cursor: pointer;
    list-style: none;
}

.eo-rl-group__head::-webkit-details-marker {
    display: none;
}

.eo-rl-group__head:hover {
    background: var(--eo-bg-hover);
}

.eo-rl-group__chev {
    color: var(--eo-text-muted);
    transition: transform 0.15s;
}

.eo-rl-group[open] .eo-rl-group__chev {
    transform: rotate(90deg);
}

.eo-rl-group__title {
    font-weight: var(--eo-fw-semibold);
}

.eo-rl-group__on {
    display: none;
    padding: 0 8px;
    font-size: var(--eo-fs-sm);
    color: var(--eo-success-strong);
    background: var(--eo-success-10);
    border-radius: var(--eo-radius-sm);
}

.eo-rl-group:has(input[data-perm-group]:checked) .eo-rl-group__on {
    display: inline-block;
}

.eo-rl-group__count {
    margin-left: auto;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-rl-group__body {
    padding: 0 var(--eo-space-lg) var(--eo-space-base) calc(var(--eo-space-lg) + 24px);
}

.eo-rl-group__all {
    margin-bottom: var(--eo-space-sm);
    font-weight: var(--eo-fw-semibold);
}
/* end page: p36-returns */

/* page: p35-pickups */
.eo-pk-top {
    align-items: center;
}

.eo-pk-scan {
    margin: 0;
}

.eo-pk-clip {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* end page: p35-pickups */

/* page: p32-vat-invoices */
.eo-vat-toolbar {
    align-items: center;
}

.eo-vat-toolbar__tools {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
}
/* end page: p32-vat-invoices */

/* page: p33-affiliates */
.eo-aff-seg {
    align-self: flex-start;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: var(--eo-space-md);
}

.eo-aff-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-aff-player {
    width: 100%;
}
/* end page: p33-affiliates */

/* page: p34-landing-pages */
.eo-lp-top {
    align-items: center;
}

.eo-lp-top__left {
    flex: 1 1 520px;
    flex-wrap: nowrap;
    min-width: 0;
}

.eo-lp-top__left .eo-filterbar {
    flex: 1 1 auto;
}

.eo-lp-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.eo-offer-form {
    max-width: 780px;
}

.eo-lp-section {
    padding-top: var(--eo-space-sm);
}

.eo-lp-add {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
    padding: var(--eo-space-md) var(--eo-space-lg);
    border: 1px dashed var(--eo-border-strong);
    border-radius: var(--eo-radius-xl);
    background: var(--eo-surface);
}

.eo-lp-add__label {
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
}

@media (max-width: 767.98px) {
    .eo-lp-top__left {
        flex-wrap: wrap;
    }
}
/* end page: p34-landing-pages */

/* page: p40-disputes */
.eo-dsp-top {
    align-items: center;
}

.eo-dsp-actions {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    margin-left: auto;
}

.eo-dsp-sum {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-sm);
}

.eo-dsp-sum__row {
    display: flex;
    justify-content: space-between;
    gap: var(--eo-space-md);
}

.eo-dsp-sum__row--total {
    padding-top: var(--eo-space-sm);
    border-top: 1px solid var(--eo-border);
    font-weight: 600;
}

.eo-dsp-log {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* end page: p40-disputes */

/* page: p43-profile */
.eo-profile__who {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-lg);
}

.eo-profile__avatar {
    width: 52px;
    height: 52px;
    font-size: var(--eo-fs-xl);
}

.eo-profile__who-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eo-profile__name {
    font-size: var(--eo-fs-lg);
}

.eo-profile__current {
    margin: 0;
    line-height: var(--eo-control-h);
    font-weight: var(--eo-fw-bold);
}

.eo-rider-toolbar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-sm);
}

/* the filter button sits beside the add button instead of taking a whole row */
.eo-rider-toolbar__end > .eo-filterbar {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.eo-rider-toolbar__end .eo-filterbar__chips {
    order: -1;
    flex-basis: auto;
    padding-top: 0;
    border-top: 0;
}
/* end page: p43-profile */

/* page: p38-stock-transfers */
.eo-xfer-toolbar {
    align-items: center;
}

.eo-xfer-route {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-xs);
}

.eo-xfer-route .svg-icon {
    width: 14px;
    height: 14px;
    color: var(--eo-text-subtle);
}

/* the from > to card on the detail page */
.eo-xfer-trip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--eo-space-base);
}

.eo-xfer-trip__end {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eo-xfer-trip__end--to {
    text-align: right;
}

.eo-xfer-trip__label {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-xfer-trip__name {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

.eo-xfer-trip__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-radius: 50%;
}

.eo-xfer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-xs) var(--eo-space-base);
    margin-top: var(--eo-space-base);
    padding-top: var(--eo-space-base);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    border-top: 1px solid var(--eo-border);
}

.eo-xfer-meta strong {
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
}

/* nightly summary: the history list as a calm list of days */

.eo-night-state {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-night-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--eo-text-muted);
    background: var(--eo-surface-2);
    border-radius: 50%;
}

.eo-night-state__icon.is-on {
    color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-night-state__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eo-night-panel .eo-nightly {
    max-width: none;
}
/* end page: p38-stock-transfers */

/* page: p42-money-accounts */
/* a list row's name with a soft icon tile in front, like TimoDesk's project list */

/* the packing desk's idle hint steps aside once a scanned order opens */
.eo-scandesk:has([data-pack-form]:not([hidden])) .eo-packidle {
    display: none;
}
/* end page: p42-money-accounts */

/* page: p50-delivery-problems */
.eo-dp-seg {
    align-self: flex-start;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: var(--eo-space-md);
}

.eo-dp-tools {
    display: flex;
    gap: var(--eo-space-xs);
    align-items: center;
}

/* end page: p50-delivery-problems */

/* page: p39-catalog-sync */
.eo-cs-narrow {
    max-width: 720px;
}

.eo-cs-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--eo-space-sm);
}

.eo-cs-seg {
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: var(--eo-space-md);
}

.eo-cs-problem {
    margin-top: var(--eo-space-2xs);
    color: var(--eo-danger);
}
/* end page: p39-catalog-sync */

/* page: p45-stock-counts */

.eo-p45-scan {
    padding: 0 var(--eo-space-md) var(--eo-space-md);
}

.eo-p45-qty {
    max-width: 120px;
    margin-left: auto;
}
.eo-p45-link {
    text-decoration: none;
}

.eo-p45-link:hover {
    color: var(--eo-brand);
}

.eo-p45-actions {
    display: inline-flex;
    gap: var(--eo-space-xs);
}
/* end page: p45-stock-counts */

/* page: p51-locations */
.eo-notice-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-notice-list li + li {
    border-top: 1px solid var(--eo-border);
}

.eo-notice {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    width: 100%;
    padding: var(--eo-space-md) var(--eo-space-lg);
    text-align: left;
    color: var(--eo-text-2);
    background: transparent;
    border: 0;
}

.eo-notice:hover {
    background: var(--eo-surface-2);
}

.eo-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--eo-text-muted);
    background: var(--eo-neutral-10);
    border-radius: 50%;
}

.eo-notice.is-unread .eo-notice__icon {
    color: var(--eo-brand);
    background: var(--eo-brand-10);
}

.eo-notice__text {
    display: grid;
    flex: 1;
    min-width: 0;
}

.eo-notice__subject {
    font-size: var(--eo-fs-base);
    overflow-wrap: anywhere;
}

.eo-notice.is-unread .eo-notice__subject {
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

.eo-notice__time {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-notice__dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: var(--eo-brand);
    border-radius: 50%;
}

.eo-notice__go {
    flex-shrink: 0;
    color: var(--eo-text-subtle);
}

.eo-p51-list {
    min-width: 0;
}

.eo-p51-list > .eo-toolbar:not(:has(+ .eo-table-wrap, + .eo-empty)) {
    margin-bottom: var(--eo-space-md);
}

.eo-p51-list > .eo-table-wrap + * {
    margin-top: var(--eo-space-md);
}
.eo-p51-list > .eo-empty {
    max-width: none;
    margin: 0;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl);
}

.eo-p51-list > .eo-toolbar + .eo-empty {
    border-top: 0;
    border-radius: 0 0 var(--eo-radius-xl) var(--eo-radius-xl);
}
/* the rider works on a phone: on a wide screen the cards keep a phone-like width */
.eo-p51-run {
    max-width: 760px;
}

/* end page: p51-locations */

/* page: p53-wallet */

.eo-wh-name__default {
    margin-left: var(--eo-space-xs);
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}
/* end page: p53-wallet */

/* page: p49-cash-flow */

.eo-p49-tools {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-p49-note {
    margin: var(--eo-space-sm) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-cf-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
}

.eo-cf-bar__dates {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}
/* end page: p49-cash-flow */

/* restored: the boosters page and phone lines list still use these rows */
 
/* page: p48-batches */

.eo-p48-expiry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.eo-p48-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-p48-row {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-base);
    border-top: 1px solid var(--eo-border);
}

.eo-p48-row:first-child {
    border-top: 0;
}

.eo-p48-row__text {
    flex: 1;
    min-width: 0;
}

.eo-p48-row__title {
    margin: 0;
    font-weight: var(--eo-fw-semibold);
}

.eo-p48-row__help {
    margin: 2px 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-p48-row__note {
    margin: 2px 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-2);
}

.eo-p48-row__end {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--eo-space-sm);
}

.eo-p48-stack {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
}

/* page: p52-payment-methods */
.eo-pm-item + .eo-pm-item {
    border-top: 1px solid var(--eo-border);
}

.eo-pm-row {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-lg);
}

.eo-pm-row__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.eo-pm-caret {
    transition: transform var(--eo-dur) var(--eo-ease);
}

[aria-expanded="true"] > .eo-pm-caret {
    transform: rotate(180deg);
}

.eo-pm-form {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-md);
    padding: var(--eo-space-md) var(--eo-space-lg) var(--eo-space-lg);
    background: var(--eo-surface-2);
    border-top: 1px solid var(--eo-border);
}

.eo-pm-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding-top: var(--eo-space-md);
    border-top: 1px solid var(--eo-border);
}

.eo-pm-form__foot .eo-field {
    margin: 0;
}

.eo-pm-seg {
    align-self: flex-start;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: var(--eo-space-md);
}

.eo-pm-tools {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .eo-pm-row {
        flex-wrap: wrap;
        padding: var(--eo-space-md);
    }

    .eo-pm-form {
        padding: var(--eo-space-md);
    }
}
/* end page: p52-payment-methods */

/* page: p47-activity */

.eo-act-what {
    font-weight: var(--eo-fw-medium);
}

.eo-act-when {
    color: var(--eo-text-muted);
    white-space: nowrap;
}

.eo-p47-seg--top {
    align-self: flex-start;
    margin-bottom: var(--eo-space-md);
}

.eo-p47-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--eo-space-xs);
}
/* end page: p47-activity */

/* page: review-4 */
/* long variant names wrap so every return column fits without side scroll */
.eo-rt-items .eo-cell-main {
    white-space: normal;
}
/* shop link preview reads as a small hint under the field */
.eo-slug-preview {
    margin: var(--eo-space-2xs) 0 0;
    font-size: var(--eo-fs-sm);
}
/* end page: review-4 */

/* page: review-6 */
/* exchange form: the qty box is only as wide as it needs, the product name takes the rest */
.eo-exchange-back td:has(> .eo-control--num) { width: 1%; }
.eo-exchange-back .eo-control--num { width: 120px; }

/* page: review-7 */
.eo-table__actions > .eo-row {
    flex-wrap: nowrap;
}

/* page: review-8 */
/* a list of amounts reads like a statement: label left, money right on a fine line */
.eo-dl--amounts {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0;
}

.eo-dl--amounts dt,
.eo-dl--amounts dd {
    padding: var(--eo-space-sm) 0;
    border-bottom: 1px solid var(--eo-border);
}

.eo-dl--amounts dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.eo-dl--amounts dt:nth-last-of-type(1),
.eo-dl--amounts dd:last-of-type {
    border-bottom: 0;
}

/* ============================================================
   STOCK TIMELINE (side panel on the product list and product page)
   ============================================================ */
.eo-stl {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
}

/* the body scrolls, so its parts keep their own height instead of being squeezed to fit */
.eo-stl > * {
    flex-shrink: 0;
}

/* where the stock is now: six small figures in a fine grid */
.eo-stl__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.eo-stl__stat {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-2xs);
    padding: var(--eo-space-md) var(--eo-space-base);
    border-right: 1px solid var(--eo-border);
    border-bottom: 1px solid var(--eo-border);
}

.eo-stl__stat:nth-child(3n) {
    border-right: 0;
}

.eo-stl__stat:nth-last-child(-n + 3) {
    border-bottom: 0;
}

.eo-stl__stat-label {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-stl__stat-value {
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
    font-variant-numeric: tabular-nums;
}

.eo-stl__stat--danger .eo-stl__stat-value {
    color: var(--eo-danger-strong);
}

.eo-stl__unit {
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.eo-stl__totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs) var(--eo-space-xl);
    margin: calc(var(--eo-space-sm) * -1) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

/* the group tabs fill the panel's width on one line, never wider; a label with no room ends in "…" (a long group picked under আরও) */
.eo-stl {
    overflow-x: hidden;
}

.eo-stl .eo-segment {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
}

.eo-stl .eo-segment__item {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 0 var(--eo-space-sm);
}

.eo-stl .eo-segment__item > span:not(.eo-count) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eo-stl .eo-segment__item > .eo-count,
.eo-stl .eo-segment__item > .svg-icon {
    flex-shrink: 0;
}

.eo-stl .eo-segment__more {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.eo-stl .eo-segment__more > .eo-segment__item {
    width: 100%;
}

.eo-stl__qty--in {
    color: var(--eo-success-strong);
}

.eo-stl__qty--out {
    color: var(--eo-danger-strong);
}

/* the moves: a line down the left, a colored dot per move, a day heading where the date changes */
.eo-stl__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eo-stl__day {
    padding: var(--eo-space-base) 0 var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.eo-stl__day:first-child {
    padding-top: 0;
}

.eo-stl__day strong {
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

.eo-stl__item {
    --eo-stl-dot: var(--eo-neutral);
    position: relative;
    padding: 0 0 var(--eo-space-base) var(--eo-space-xl);
    border-left: 1px solid var(--eo-border);
    margin-left: 5px;
}

.eo-stl__item::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -6px;
    width: 11px;
    height: 11px;
    background: var(--eo-stl-dot);
    border: 2px solid var(--eo-surface);
    border-radius: 50%;
}

.eo-stl__item--success { --eo-stl-dot: var(--eo-success); }
.eo-stl__item--warning { --eo-stl-dot: var(--eo-warning); }
.eo-stl__item--danger { --eo-stl-dot: var(--eo-danger); }

.eo-stl__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eo-space-base);
}

.eo-stl__what {
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

.eo-stl__qty {
    flex-shrink: 0;
    font-weight: var(--eo-fw-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.eo-stl__flow {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-2);
}

.eo-stl__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--eo-space-sm);
    margin-top: var(--eo-space-2xs);
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

.eo-stl__meta > * + *::before {
    content: "·";
    margin-right: var(--eo-space-sm);
    color: var(--eo-text-subtle);
}

.eo-stl__none {
    padding: var(--eo-space-xl) 0;
    font-size: var(--eo-fs-sm);
    text-align: center;
    color: var(--eo-text-muted);
}

.eo-stl__more {
    padding-top: var(--eo-space-sm);
    text-align: center;
}

@media (max-width: 575.98px) {
    .eo-stl__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eo-stl__stat:nth-child(3n) {
        border-right: 1px solid var(--eo-border);
    }

    .eo-stl__stat:nth-child(2n) {
        border-right: 0;
    }

    .eo-stl__stat:nth-last-child(-n + 3) {
        border-bottom: 1px solid var(--eo-border);
    }

    .eo-stl__stat:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

/* product list: a small colored dot before the stock figure, the same colors as the স্টক কম / স্টক শেষ tabs */
.eo-stockqty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--eo-fw-medium);
}

.eo-stockqty::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--eo-success);
}

.eo-stockqty--warning::before {
    background: var(--eo-warning);
}

.eo-stockqty--danger {
    color: var(--eo-danger-strong);
}

.eo-stockqty--danger::before {
    background: var(--eo-danger);
}

/* product list photo: a little bigger than other name cells, since the photo is how a seller spots the product */
.eo-namecell .eo-prodthumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--eo-radius-lg);
}

.eo-prodthumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--eo-text-subtle);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
}

.eo-prodthumb--empty .svg-icon {
    width: 18px;
    height: 18px;
}

/* page: product wizard */
/* "নতুন প্রোডাক্ট" step by step (YouTube upload style): steps in the header, fields on the left, a live preview card on the right */
.pw-dialog {
    max-width: 880px;
}

.pw {
    overflow: hidden;
    border: 0;
    border-radius: 12px;
}

.pw__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--eo-space-lg);
    padding: 14px var(--eo-space-lg);
    border-bottom: 1px solid var(--eo-border);
}

.pw__title {
    margin: 0;
    font-size: var(--eo-fs-base);
    font-weight: var(--eo-fw-semibold);
    white-space: nowrap;
}

.pw__close {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--eo-text-muted);
    background: none;
    border: 0;
    border-radius: var(--eo-radius);
}

.pw__close:hover {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

/* the steps: a small number and its name in one line, joined by a short rule */
.pw__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--eo-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pw__step {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
}

.pw__step:not(:last-child)::after {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--eo-border-strong);
}

.pw__step.is-done:not(:last-child)::after {
    background: var(--eo-brand);
}

.pw__step-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-subtle);
    background: none;
    border: 0;
    border-radius: var(--eo-radius-sm);
}

.pw__step-btn:not(:disabled):hover {
    background: var(--eo-bg-hover);
}

.pw__step-btn:disabled {
    cursor: default;
}

/* the step's word sits 0.15em lower so its Bangla ink is level with the circle and the joining lines */
.pw__step-label {
    position: relative;
    top: 0.15em;
}

.pw__step-num {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: var(--eo-fw-semibold);
    line-height: 1;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.pw__step-num .svg-icon {
    display: none;
    width: 12px;
    height: 12px;
}

.pw__step-label {
    white-space: nowrap;
}

.pw__step.is-current .pw__step-btn {
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

.pw__step.is-current .pw__step-num {
    color: #fff;
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

.pw__step.is-done .pw__step-btn {
    color: var(--eo-text-muted);
}

.pw__step.is-done .pw__step-num {
    color: var(--eo-brand);
    border-color: var(--eo-brand);
}

.pw__step.is-done .pw__step-num > span {
    display: none;
}

.pw__step.is-done .pw__step-num .svg-icon {
    display: block;
}

.pw__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
}

.pw__body {
    max-height: calc(100vh - 220px);
    padding: var(--eo-space-lg) var(--eo-space-xl);
    overflow-y: auto;
}

.pw__pane-text {
    margin: 0 0 var(--eo-space-base);
    color: var(--eo-text-muted);
}

.pw__stack {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-base);
}

.pw__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eo-space-base);
    margin-bottom: var(--eo-space-base);
}

.pw__pane .eo-field {
    margin: 0;
}

/* step 4's one note: everything here is optional, saving now is fine */
.pw__note {
    display: flex;
    align-items: flex-start;
    gap: var(--eo-space-md);
    margin-bottom: var(--eo-space-lg);
    padding: 12px 14px;
    background: var(--eo-brand-10);
    border: 1px solid color-mix(in srgb, var(--eo-brand) 22%, transparent);
    border-radius: var(--eo-radius-lg);
}

.pw__note-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--eo-brand);
    background: var(--eo-surface);
    border-radius: 50%;
}

.pw__note-icon .svg-icon {
    width: 16px;
    height: 16px;
}

.pw__note-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--eo-fs-sm);
    line-height: 1.5;
    color: var(--eo-text-muted);
}

.pw__note-text strong {
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

/* step 3 asks one plain question above its two answers */
.pw__question {
    margin: 0 0 4px;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

/* step 3: two plain choice cards */
.pw__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eo-space-md);
}

.pw__choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 14px 16px 14px 44px;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    cursor: pointer;
    transition: border-color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.pw__choice:hover {
    border-color: var(--eo-border-strong);
}

/* the radio dot, drawn so it matches the brand */
.pw__choice input {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid var(--eo-border-strong);
    border-radius: 50%;
    appearance: none;
}

.pw__choice input:checked {
    border: 5px solid var(--eo-brand);
}

.pw__choice:has(input:checked) {
    background: var(--eo-brand-10);
    border-color: var(--eo-brand);
}

.pw__choice:has(input:focus-visible) {
    box-shadow: var(--eo-focus);
}

.pw__choice-title {
    font-weight: var(--eo-fw-semibold);
}

.pw__choice-hint {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.pw__options {
    margin-top: var(--eo-space-lg);
}

/* the variations as a small table: labels once on top, rows with clear room between them */
.pw__option-head,
.pw__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 32px;
    gap: var(--eo-space-md);
}

.pw__option-head {
    margin-bottom: 6px;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
}

.pw__option {
    align-items: start;
}

.pw__option + .pw__option {
    margin-top: var(--eo-space-md);
}

.pw__option .eo-error:empty {
    display: none;
}

.pw__option-hint {
    margin: var(--eo-space-sm) 0 var(--eo-space-md);
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

.pw__option-remove {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: var(--eo-control-h);
    padding: 0;
    color: var(--eo-text-subtle);
    background: none;
    border: 0;
    border-radius: var(--eo-radius);
}

.pw__option-remove:hover {
    color: var(--eo-danger-strong);
    background: var(--eo-danger-10);
}

.pw__option-remove .svg-icon {
    width: 16px;
    height: 16px;
}

.pw__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-brand);
    background: none;
    border: 0;
}

.pw__link .svg-icon {
    width: 15px;
    height: 15px;
}

.pw__link:hover {
    text-decoration: underline;
}

.pw__combos {
    margin-top: var(--eo-space-base);
    overflow: hidden;
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.pw__combo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--eo-fs-sm-plus);
}

.pw__combo-table th {
    padding: 7px 10px;
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
    text-align: left;
    background: var(--eo-surface-2);
    border-bottom: 1px solid var(--eo-border);
}

.pw__combo-table td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--eo-bg-hover);
}

.pw__combo-table tr:last-child td {
    border-bottom: 0;
}

.pw__combo-table .eo-control {
    width: 100%;
    max-width: none;
    height: 32px;
    padding: 0 10px;
    font-size: var(--eo-fs-sm-plus);
}

.pw__combo-table th:first-child,
.pw__combo-table td:first-child {
    width: 34%;
}

/* the "সবগুলোতে" row: a light green band under the heads */
.pw__fill td {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-bottom: 1px solid var(--eo-border);
}

.pw__fill-qty {
    display: flex;
    gap: 6px;
}

.pw__fill-qty .eo-btn {
    flex-shrink: 0;
    height: 32px;
}

.pw__combo-name {
    font-weight: var(--eo-fw-medium);
}

.pw__stores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--eo-space-sm);
}

/* a store as a small card: letter tile, name, and a tick in the corner when it is chosen */
.pw__store {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    cursor: pointer;
    transition: border-color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.pw__store:hover {
    border-color: var(--eo-border-strong);
}

.pw__store input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pw__store:has(input:focus-visible) {
    box-shadow: var(--eo-focus);
}

.pw__store-mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius);
}

.pw__store-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-weight: var(--eo-fw-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw__store-tick {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: transparent;
    border: 1.5px solid var(--eo-border-strong);
    border-radius: 50%;
}

.pw__store-tick .svg-icon {
    width: 12px;
    height: 12px;
}

.pw__store:has(input:checked) {
    background: var(--eo-brand-10);
    border-color: var(--eo-brand);
}

.pw__store:has(input:checked) .pw__store-mark {
    color: #fff;
    background: var(--eo-brand);
}

.pw__store:has(input:checked) .pw__store-tick {
    color: #fff;
    background: var(--eo-brand);
    border-color: var(--eo-brand);
}

/* the live preview: the product as a card, on a quiet grey side */
.pw__preview {
    padding: var(--eo-space-lg);
    background: var(--eo-surface-2);
    border-left: 1px solid var(--eo-border);
}

.pw__preview-label {
    margin: 0 0 var(--eo-space-sm);
    font-size: var(--eo-fs-xs);
    font-weight: var(--eo-fw-semibold);
    letter-spacing: 0.02em;
    color: var(--eo-text-subtle);
}

.pw__card {
    overflow: hidden;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.pw__card-img {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    color: var(--eo-border-strong);
    background: var(--eo-bg-hover);
}

.pw__card-img .svg-icon {
    width: 36px;
    height: 36px;
}

/* step 1: a wide drop area for the photo; with a photo it shows a thumbnail and the file name */
.pw__drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    margin: 0;
    padding: 14px 16px;
    background: var(--eo-surface-2);
    border: 1.5px dashed var(--eo-border-strong);
    border-radius: var(--eo-radius-lg);
    cursor: pointer;
    transition: border-color var(--eo-dur) var(--eo-ease), background-color var(--eo-dur) var(--eo-ease);
}

.pw__drop:hover,
.pw__drop:focus-within {
    background: var(--eo-brand-10);
    border-color: var(--eo-brand);
}

.pw__drop.has-photo {
    background: var(--eo-surface);
    border-style: solid;
    border-color: var(--eo-border);
}

.pw__drop input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.pw__drop-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--eo-brand);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.pw__drop-icon .svg-icon {
    width: 22px;
    height: 22px;
}

.pw__drop-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--eo-radius);
}

.pw__drop-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pw__drop-title {
    overflow: hidden;
    font-weight: var(--eo-fw-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw__drop-hint {
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

.pw__drop-action {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius);
}

.pw__card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pw__card-body {
    padding: 12px 14px 14px;
}

.pw__card-name {
    margin: 0;
    overflow: hidden;
    font-weight: var(--eo-fw-semibold);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw__card-name.is-empty {
    color: var(--eo-text-subtle);
}

.pw__card-cat {
    min-height: 18px;
    margin: 2px 0 0;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

.pw__card-price {
    margin: 8px 0 10px;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-brand);
}

.pw__card-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--eo-border);
}

.pw__card-facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
}

.pw__card-facts dt {
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.pw__card-facts dd {
    margin: 0;
    font-weight: var(--eo-fw-medium);
}

.pw__foot {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    padding: 12px var(--eo-space-lg);
    border-top: 1px solid var(--eo-border);
}

.pw__foot-gap {
    flex: 1 1 auto;
}

.pw__foot .eo-btn--primary {
    min-width: 132px;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .pw__step-label {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .pw__head {
        grid-template-columns: 1fr auto;
    }

    .pw__steps {
        grid-column: 1 / -1;
        grid-row: 2;
    }

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

    .pw__preview {
        display: none;
    }

    .pw__pair,
    .pw__choices,
    .pw__option {
        grid-template-columns: minmax(0, 1fr);
    }


    .pw__body {
        padding: var(--eo-space-base);
    }
}
/* step 2: two small groups, "দাম" and "স্টক", each under a quiet title */
.pw__group + .pw__group {
    margin-top: var(--eo-space-lg);
    padding-top: var(--eo-space-lg);
    border-top: 1px solid var(--eo-border);
}

.pw__group-title {
    margin: 0 0 var(--eo-space-md);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text-muted);
}

.pw__group .pw__pair {
    margin-bottom: 0;
}

/* numbers read from the left in the popup, like every column */
.pw .eo-control--num,
.pw__qty .eo-control {
    text-align: left;
}

/* the count and its unit in one box, on the shared input group: the unit list sits at the end like the ৳ sign at the start */
/* a grid, not flex: the count takes the rest of the box and the unit list (or unit word) stays small at the end */
.eo-input-group.pw__qty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
}

.eo-input-group.pw__qty > .eo-control,
.eo-input-group.pw__qty > .eo-input-group__addon {
    width: 100%;
    min-width: 0;
}

.eo-input-group.pw__qty > .eo-input-group__addon {
    justify-content: center;
}

.eo-input-group.pw__qty > select.eo-control {
    background-color: var(--eo-bg);
    border-left: 0;
}

/* a thin scrollbar inside the popup, not the browser's thick one */
.pw__body {
    scrollbar-width: thin;
    scrollbar-color: var(--eo-border-strong) transparent;
}

.pw__body::-webkit-scrollbar {
    width: 6px;
}

.pw__body::-webkit-scrollbar-thumb {
    background: var(--eo-border-strong);
    border-radius: 6px;
}

.pw__body::-webkit-scrollbar-track {
    background: transparent;
}

/* edit: a product with variations changes each price in the variations tab */
.pw__edit-note {
    margin: var(--eo-space-base) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.pw__edit-note:empty,
.pw__edit-note:has(> [hidden]:only-child) {
    display: none;
}

/* edit: the variations table: name, price, stock (read only), on / off */
.pw__combo-table--edit th:first-child,
.pw__combo-table--edit td:first-child {
    width: 36%;
}

.pw__combo-table--edit th:last-child,
.pw__combo-table--edit td:last-child {
    width: 72px;
    text-align: right;
}

.pw__combo-stock {
    font-size: var(--eo-fs-sm-plus);
    color: var(--eo-text-muted);
}

.pw__row-switch {
    display: inline-flex;
    justify-content: flex-end;
    margin: 0;
}

/* a new variation row: one small box per variation name */
.pw__new-row td {
    background: var(--eo-brand-10);
}

.pw__new-parts {
    display: flex;
    gap: 6px;
}

.pw__new-parts .eo-control {
    min-width: 0;
}

.pw__edit-add {
    margin-top: var(--eo-space-md);
}

/* edit: the rare settings live in the full form */
.pw__more-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: var(--eo-space-sm) 0 0;
    padding-top: var(--eo-space-base);
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    border-top: 1px solid var(--eo-border);
}

.pw__more-link .svg-icon {
    width: 15px;
    height: 15px;
}

.pw__more-link a,
.pw__note a {
    font-weight: var(--eo-fw-medium);
    color: var(--eo-brand);
}

/* combo pack: the kind cards on top of step 1 */
.pw__kind {
    margin-bottom: var(--eo-space-lg);
}

/* combo pack: find a product by name or code */
.pw__search {
    position: relative;
    margin-top: var(--eo-space-base);
}

.pw__search > .svg-icon {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 16px;
    height: 16px;
    color: var(--eo-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.pw__search > .eo-control {
    width: 100%;
    max-width: none;
    padding-left: 34px;
}

.pw__search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--eo-z-popover);
    max-height: 240px;
    padding: 4px;
    overflow-y: auto;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
    box-shadow: var(--eo-shadow-float);
}

.pw__search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-md);
    width: 100%;
    padding: 7px 10px;
    font-size: var(--eo-fs-sm-plus);
    text-align: left;
    color: var(--eo-text);
    background: transparent;
    border: 0;
    border-radius: var(--eo-radius);
}

.pw__search-item:hover,
.pw__search-item:focus-visible {
    background: var(--eo-bg-hover);
}

.pw__search-item.is-taken {
    opacity: 0.5;
    cursor: default;
}

.pw__search-name {
    min-width: 0;
    overflow: hidden;
    font-weight: var(--eo-fw-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw__search-meta,
.pw__search-empty {
    flex-shrink: 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.pw__search-empty {
    margin: 0;
    padding: 8px 10px;
}

/* combo pack: the parts table: product, how many in one pack, stock, remove */
.pw__combo-table--parts th:first-child,
.pw__combo-table--parts td:first-child {
    width: auto;
}

.pw__combo-table--parts th:nth-child(2),
.pw__combo-table--parts td:nth-child(2) {
    width: 150px;
}

.pw__combo-table--parts th:nth-child(3),
.pw__combo-table--parts td:nth-child(3) {
    width: 96px;
}

.pw__combo-table--parts th:last-child,
.pw__combo-table--parts td:last-child {
    width: 40px;
    text-align: right;
}

.pw__combo-table--parts .eo-input-group.pw__qty {
    grid-template-columns: minmax(0, 1fr) 56px;
}

.pw__combo-table--parts .eo-input-group__addon {
    height: 32px;
    font-size: var(--eo-fs-sm);
}

.pw__part-sku {
    display: block;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

.pw__part-sku:empty {
    display: none;
}

.pw__combo-table--parts td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.pw__combo-table--parts .pw__combo-name {
    display: block;
}

/* a part's variation: one small box under its name, sized to its words; "যেকোনো" reads quieter */
.pw__combo-table .pw__part-variant {
    display: block;
    width: auto;
    max-width: 100%;
    height: 26px;
    margin-top: 5px;
    padding: 0 26px 0 8px;
    font-size: var(--eo-fs-sm);
    background-position: right 6px center;
    background-size: 12px;
}

.pw__combo-table .pw__part-variant[hidden] {
    display: none;
}

.pw__combo-table .pw__part-variant.is-any {
    color: var(--eo-text-muted);
    border-style: dashed;
}

.pw__combo-hint {
    margin: var(--eo-space-sm) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

/* end page: product wizard */

/* page: product details (TimoDesk member page: one head card with the key facts, stock first, then sales, side cards) */
.pd-head {
    margin-bottom: 0;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-xl);
}

.pd-head__top {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    padding: var(--eo-space-base) var(--eo-space-lg);
}

.pd-head__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: var(--eo-text-muted);
    border-radius: var(--eo-radius);
}

.pd-head__back:hover {
    color: var(--eo-text);
    background: var(--eo-bg-hover);
}

.pd-head__back .svg-icon {
    width: 18px;
    height: 18px;
}

.pd-head__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.pd-head__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-head__photo.is-empty .svg-icon {
    width: 22px;
    height: 22px;
    color: var(--eo-text-subtle);
}

.pd-head__id {
    flex: 1;
    min-width: 0;
}

.pd-head__title {
    margin: 0;
    overflow: hidden;
    font-size: var(--eo-fs-xl);
    font-weight: var(--eo-fw-semibold);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 2px 0 0;
    padding: 0;
    font-size: var(--eo-fs-sm-plus);
    color: var(--eo-text-muted);
    list-style: none;
}

.pd-head__meta li + li::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 9px;
    vertical-align: middle;
    background: var(--eo-text-subtle);
    border-radius: 50%;
}

/* the ⋮ beside the head's buttons is a full-size button like them, not a small row icon */
.pd-head__actions .eo-action-menu > .eo-btn {
    width: var(--eo-control-h);
    height: var(--eo-control-h);
    color: var(--eo-text-2);
    border-radius: var(--eo-radius);
}

.pd-head__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--eo-space-sm);
}

/* the key facts: one row under a fine line, split by thin dividers */
.pd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 0;
    border-top: 1px solid var(--eo-border);
}

.pd-fact {
    min-width: 0;
    padding: var(--eo-space-md) var(--eo-space-lg) var(--eo-space-base);
}

.pd-fact + .pd-fact {
    border-left: 1px solid var(--eo-border);
}

.pd-fact dt {
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.pd-fact dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 0;
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-semibold);
    line-height: 1.35;
    color: var(--eo-text);
}

.pd-fact dd .eo-trend {
    font-size: var(--eo-fs-sm);
}

.pd-fact p {
    margin: 2px 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.pd-fact.is-warning p { color: var(--eo-warning-strong); }
.pd-fact.is-danger dd,
.pd-fact.is-danger p { color: var(--eo-danger-strong); }

/* the "bring more" line: which ones, how many, and the button */
.pd-alert {
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    margin-bottom: 0;
    padding: 10px var(--eo-space-base);
    font-size: var(--eo-fs-sm-plus);
    color: var(--eo-text-2);
    background: var(--eo-warning-10);
    border: 1px solid var(--eo-warning-25);
    border-radius: var(--eo-radius-lg);
}

.pd-alert > .svg-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--eo-warning-strong);
}

.pd-alert > span {
    flex: 1;
}

/* one gap everywhere on this page: the same 20px the page puts between its blocks */
.pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--eo-space-lg);
    align-items: start;
}

.pd-main,
.pd-side {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-lg);
    min-width: 0;
}

.pd-main > *,
.pd-side > * {
    margin: 0;
}

/* a card's content sits as close under its title as the stock table does */
.pd-layout .eo-card__head + .eo-card__body {
    padding-top: var(--eo-space-xs);
}

/* grid / list switch in the stock card's head */
.pd-switch {
    display: inline-flex;
    padding: 2px;
    background: var(--eo-bg-hover);
    border-radius: var(--eo-radius);
}

.pd-switch button {
    padding: 4px 12px;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--eo-radius-sm);
}

.pd-switch button.is-active {
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
    background: var(--eo-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* the রং × সাইজ grid: every cell a small tile with the stock and what sold */
.pd-grid-wrap {
    padding: var(--eo-space-base) var(--eo-space-lg) var(--eo-space-md);
    overflow-x: auto;
}

.pd-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
    margin: -6px;
}

.pd-grid th {
    padding: 0 4px;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
    text-align: center;
    white-space: nowrap;
}

.pd-grid tbody th {
    padding-right: var(--eo-space-sm);
    font-size: var(--eo-fs-sm-plus);
    color: var(--eo-text);
    text-align: left;
}

.pd-grid .pd-grid__corner {
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-subtle);
    text-align: left;
}

.pd-grid td {
    padding: 0;
}

.pd-grid .pd-grid__total {
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
    text-align: right;
}

.pd-grid thead .pd-grid__total {
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
}

.pd-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 64px;
    height: 54px;
    padding: 4px;
    color: var(--eo-text);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

button.pd-cell:hover {
    border-color: var(--eo-brand);
}

.pd-cell strong {
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
    line-height: 1.2;
}

.pd-cell small {
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

.pd-cell.is-low {
    background: var(--eo-warning-10);
    border-color: var(--eo-warning-25);
}

.pd-cell.is-low strong { color: var(--eo-warning-strong); }

.pd-cell.is-out {
    background: var(--eo-danger-10);
    border-color: var(--eo-danger-25);
}

.pd-cell.is-out strong { color: var(--eo-danger-strong); }

.pd-cell.is-none {
    color: var(--eo-text-subtle);
    background: transparent;
    border-style: dashed;
}

.pd-grid__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eo-space-base);
    margin: var(--eo-space-md) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

/* a coloured dot before a word: the same colours as the grid and the bars */
.pd-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pd-key::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--eo-neutral);
}

.pd-key--available::before { background: var(--eo-success); }
.pd-key--low::before,
.pd-key--reserved::before,
.pd-key--returning::before { background: var(--eo-warning); }
.pd-key--with_courier::before { background: var(--eo-info); }
.pd-key--out::before,
.pd-key--damaged::before,
.pd-key--lost::before { background: var(--eo-danger); }

/* a variation's stock in the list: the number, and a thin bar against the fullest one */
.pd-meter {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
}

.pd-meter__value {
    min-width: 56px;
    white-space: nowrap;
}

.pd-meter__bar {
    width: 80px;
    height: 6px;
    overflow: hidden;
    appearance: none;
    background: var(--eo-bg-hover);
    border: 0;
    border-radius: var(--eo-radius-pill);
}

.pd-meter__bar::-webkit-progress-bar { background: var(--eo-bg-hover); border-radius: var(--eo-radius-pill); }
.pd-meter__bar::-webkit-progress-value { background: var(--eo-success); border-radius: var(--eo-radius-pill); }
.pd-meter__bar::-moz-progress-bar { background: var(--eo-success); border-radius: var(--eo-radius-pill); }
.pd-meter__bar.is-low::-webkit-progress-value { background: var(--eo-warning); }
.pd-meter__bar.is-low::-moz-progress-bar { background: var(--eo-warning); }

.pd-strike {
    color: var(--eo-text-subtle);
    text-decoration: line-through;
}

/* sales: a line with a light area under it, and the best sellers beside it */
.pd-sales {
    display: grid;
    gap: var(--eo-space-lg);
}

.pd-sales.has-top {
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
}

.pd-chart {
    display: block;
    width: 100%;
    height: auto;
}

.pd-chart__grid {
    stroke: var(--eo-border);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.pd-chart__tick {
    font-size: 14px;
    fill: var(--eo-text-muted);
}

.pd-chart__area {
    fill: var(--eo-brand-10);
}

.pd-chart__line {
    fill: none;
    stroke: var(--eo-brand);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.pd-chart__dot {
    fill: var(--eo-surface);
    stroke: var(--eo-brand);
    stroke-width: 1.5;
    opacity: 0;
}

.pd-chart__dot:hover {
    opacity: 1;
}

.pd-top__title {
    margin: 0 0 var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
}

.pd-top__list {
    display: flex;
    flex-direction: column;
    gap: var(--eo-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-top__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px var(--eo-space-sm);
    font-size: var(--eo-fs-sm-plus);
}

.pd-top__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-top__qty {
    font-weight: var(--eo-fw-semibold);
}

.pd-top__bar {
    grid-column: 1 / -1;
    width: 100%;
}

/* label on the left, value on the right; the side cards are all this one list */
.pd-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eo-space-md);
    padding: 8px 0;
    font-size: var(--eo-fs-sm-plus);
    border-bottom: 1px dashed var(--eo-border);
}

.pd-list li:first-child {
    padding-top: 0;
}

.pd-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pd-list li > span:first-child {
    color: var(--eo-text-muted);
}

.pd-list strong {
    font-weight: var(--eo-fw-semibold);
}

/* what one unit earns, in big type, over the price list */
.pd-earn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--eo-space-base);
    padding: var(--eo-space-md) var(--eo-space-base);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.pd-earn__label {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.pd-earn__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eo-space-sm);
}

.pd-earn__value {
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-semibold);
}

.pd-earn__chip {
    padding: 2px 8px;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-success-strong);
    background: var(--eo-success-10);
    border-radius: var(--eo-radius-pill);
}

.pd-earn__chip.is-low {
    color: var(--eo-warning-strong);
    background: var(--eo-warning-10);
}

/* delivery rate: the share in big type, one split bar, two counts */
.pd-rate {
    display: flex;
    align-items: baseline;
    gap: var(--eo-space-sm);
    margin-bottom: var(--eo-space-sm);
}

.pd-rate__value {
    font-size: var(--eo-fs-2xl);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-text);
}

.pd-rate__label {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.pd-split {
    display: block;
    width: 100%;
    height: 8px;
    margin-bottom: var(--eo-space-md);
    overflow: hidden;
    border-radius: var(--eo-radius-pill);
}

.pd-split__track { fill: var(--eo-bg-hover); }
.pd-split__part--available { fill: var(--eo-success); }
.pd-split__part--lost { fill: var(--eo-danger); }

.pd-note {
    margin: var(--eo-space-md) 0 0;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
}

.pd-note--flush {
    margin: 0;
}

.pd-side__label {
    margin: var(--eo-space-base) 0 var(--eo-space-sm);
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text-muted);
}

/* the shops a product is sold in: name as a link to its page there, a copy button at the end */
.pd-shops {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-shops li {
    display: flex;
    align-items: center;
    gap: var(--eo-space-sm);
    min-height: 32px;
    font-size: var(--eo-fs-sm-plus);
}

.pd-shops li > .svg-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: var(--eo-text-muted);
}

.pd-shops__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--eo-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.pd-shops__name:hover {
    color: var(--eo-brand);
    text-decoration: underline;
}

.pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-2);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-pill);
}

a.pd-chip:hover {
    color: var(--eo-brand);
    border-color: var(--eo-brand-20);
}

.pd-chip .svg-icon {
    width: 13px;
    height: 13px;
    color: var(--eo-text-muted);
}

@media (max-width: 1199.98px) {
    .pd-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-sales.has-top {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .pd-head__top {
        flex-wrap: wrap;
        padding: var(--eo-space-md);
    }

    .pd-head__back {
        display: none;
    }

    .pd-head__title {
        white-space: normal;
    }

    .pd-head__actions {
        width: 100%;
    }

    .pd-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-fact {
        padding: var(--eo-space-md);
        border-top: 1px solid var(--eo-border);
    }

    .pd-fact + .pd-fact {
        border-left: 0;
    }

    .pd-fact:nth-child(even) {
        border-left: 1px solid var(--eo-border);
    }

    .pd-fact dd {
        font-size: var(--eo-fs-xl);
    }

    .pd-alert {
        flex-wrap: wrap;
    }
}
/* the stock card's states: tiles in one row under a fine line, split by thin dividers like the head's facts */
.pd-states {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin: 0;
    border-top: 1px solid var(--eo-border);
}

.pd-state {
    min-width: 0;
    padding: var(--eo-space-md) var(--eo-space-lg);
}

.pd-state + .pd-state {
    border-left: 1px solid var(--eo-border);
}

.pd-state dt {
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-normal);
    color: var(--eo-text-muted);
}

.pd-state dd {
    margin: 4px 0 0;
    font-size: var(--eo-fs-lg);
    font-weight: var(--eo-fw-semibold);
}

.pd-state p {
    margin: 0;
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

/* the grid or the list under the states, separated by one line; a table here uses the card's own edge */
.pd-pane {
    border-top: 1px solid var(--eo-border);
}

.pd-pane > .eo-table-wrap {
    border: 0;
    border-radius: 0 0 var(--eo-radius-xl) var(--eo-radius-xl);
}

/* "সব অর্ডার": a quiet link in the card head, not a second button */
.pd-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-brand);
}

.pd-more:hover {
    color: var(--eo-brand-strong);
}

.pd-more .svg-icon {
    width: 15px;
    height: 15px;
}

/* recent orders: one line each, number and customer on the left, then qty, status and date in fixed columns */
.pd-orders {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--eo-border);
}

.pd-orders li + li {
    border-top: 1px solid var(--eo-bg-hover);
}

.pd-orders__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 170px 120px;
    align-items: center;
    gap: var(--eo-space-md);
    padding: 10px var(--eo-space-lg);
    color: var(--eo-text);
}

.pd-orders__row:hover {
    color: var(--eo-text);
    background: var(--eo-surface-2);
}

.pd-orders li:last-child .pd-orders__row {
    border-radius: 0 0 var(--eo-radius-xl) var(--eo-radius-xl);
}

.pd-orders__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-orders__main strong {
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-semibold);
    color: var(--eo-brand);
}

.pd-orders__main small {
    overflow: hidden;
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-orders__qty {
    font-size: var(--eo-fs-sm-plus);
}

.pd-orders__date {
    font-size: var(--eo-fs-sm);
    color: var(--eo-text-muted);
    text-align: right;
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .pd-states {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-state:nth-child(odd) {
        border-left: 0;
    }

    .pd-state:nth-child(n + 3) {
        border-top: 1px solid var(--eo-border);
    }

    .pd-orders__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pd-orders__qty,
    .pd-orders__date {
        display: none;
    }
}
/* "স্টক ঠিক করুন": today's stock on top, what happened as cards, how many, then the stock after it */
.sfx-now {
    margin: 0 0 var(--eo-space-base);
    padding: 10px var(--eo-space-md);
    font-size: var(--eo-fs-sm-plus);
    color: var(--eo-text-muted);
    background: var(--eo-surface-2);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.sfx-now strong {
    margin-left: 4px;
    font-size: var(--eo-fs-base);
    color: var(--eo-text);
}

.sfx-kinds {
    margin: 0;
    padding: 0;
    border: 0;
}

.sfx-kinds__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eo-space-sm);
}

.sfx-kind {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--eo-space-md);
    margin: 0;
    padding: 10px var(--eo-space-md);
    cursor: pointer;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-lg);
}

.sfx-kind[hidden] {
    display: none;
}

.sfx-kind:hover {
    border-color: var(--eo-border-strong);
}

.sfx-kind input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sfx-kind:has(input:checked) {
    background: var(--eo-brand-10);
    border-color: var(--eo-brand);
    box-shadow: 0 0 0 1px var(--eo-brand);
}

.sfx-kind:has(input:focus-visible) {
    outline: 2px solid var(--eo-brand);
    outline-offset: 2px;
}

.sfx-kind__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--eo-danger-strong);
    background: var(--eo-danger-10);
    border-radius: var(--eo-radius);
}

.sfx-kind__icon.is-up {
    color: var(--eo-success-strong);
    background: var(--eo-success-10);
}

.sfx-kind__icon .svg-icon {
    width: 16px;
    height: 16px;
}

.sfx-kind__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sfx-kind__title {
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-text);
}

.sfx-kind__hint {
    font-size: var(--eo-fs-xs);
    color: var(--eo-text-muted);
}

.sfx-qty {
    margin-top: var(--eo-space-lg);
}

.sfx-qty .eo-qty {
    max-width: 180px;
}

.sfx-result {
    margin: var(--eo-space-sm) 0 0;
    font-size: var(--eo-fs-sm-plus);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-success-strong);
}

.sfx-result.is-bad {
    color: var(--eo-danger-strong);
}

[data-stock-fix] [data-fix-cost] {
    margin-top: var(--eo-space-base);
}

.sfx-note-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--eo-space-base);
    padding: 0;
    font-size: var(--eo-fs-sm);
    font-weight: var(--eo-fw-medium);
    color: var(--eo-brand);
    background: none;
    border: 0;
}

.sfx-note-link[hidden] {
    display: none;
}

.sfx-note-link .svg-icon {
    width: 14px;
    height: 14px;
}

[data-fix-note] {
    margin-top: var(--eo-space-base);
}

@media (max-width: 575.98px) {
    .sfx-kinds__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* end page: product details */

.eo-act-subject {
    color: var(--eo-text);
    font-weight: var(--eo-fw-medium);
}

/* offers list: type pills and shop picker share the first row */
.eo-offer-top {
    margin-bottom: var(--eo-space-md);
}

.eo-offer-top > .eo-segment {
    max-width: 100%;
    overflow-x: auto;
}

/* profit report row: compare is a small on/off chip, not a switch with a long label */
.eo-reportbar__compare {
    display: inline-flex;
    align-items: center;
    gap: var(--eo-space-xs);
    height: var(--eo-control-h-sm);
    padding: 0 var(--eo-space-md);
    font-size: var(--eo-fs-md);
    color: var(--eo-text-2);
    cursor: pointer;
    background: var(--eo-surface);
    border: 1px solid var(--eo-border);
    border-radius: var(--eo-radius-pill, 999px);
}

.eo-reportbar__compare input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eo-reportbar__compare:hover,
.eo-reportbar__compare:focus-within {
    border-color: var(--eo-brand);
}

.eo-reportbar__compare.is-on {
    color: var(--eo-brand);
    background: var(--eo-brand-10);
    border-color: var(--eo-brand);
}

/* the period form fills the row so store and compare can sit on the right, next to the download */
.eo-reportbar > .eo-reportbar__period {
    flex: 1 1 auto;
}

.eo-reportbar__push {
    flex: 1 1 0;
}

.eo-reportbar > .eo-reportbar__tools {
    margin-left: 0;
}

/* x-date-range: from – to boxes on one line, the quick ranges as small chips under them */
.eo-daterange__boxes {
    display: flex;
    align-items: center;
    gap: var(--eo-space-xs);
}

.eo-daterange__boxes > * {
    flex: 1 1 0;
    min-width: 0;
}

.eo-daterange__boxes > .eo-daterange__dash {
    flex: 0 0 auto;
    color: var(--eo-text-muted);
}

.eo-daterange__quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eo-space-xs);
}

.eo-daterange__clear {
    color: var(--eo-text-muted);
    background: transparent;
    border-color: var(--eo-border);
}