html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #3E2C23;
}

/* ---- App shell: header brand, bottom tabs on phones, menu ---- */
.ep-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    color: #FAF6F0;
    text-decoration: none;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.2rem;
    white-space: nowrap;
}
.ep-brand img { border-radius: 7px; display: block; }

.ep-tabs { display: none; }

@media (max-width: 959.98px) {
    .ep-tabs {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1090;
        background: #FFFFFF;
        border-top: 1px solid #E8E0D6;
        padding: 4px max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
    }
    .ep-main--tabs { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

.ep-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px 8px;
    border: 0;
    border-top: 2px solid transparent;
    background: none;
    color: #7A6A5D;
    font: 500 11px/1.2 'Inter', Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.ep-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ep-tab.active { color: #3E2C23; font-weight: 600; border-top-color: #3E2C23; }
.ep-tab:focus-visible { outline: 2px solid #C8A25A; outline-offset: -2px; }

.ep-drawer { border-right: 1px solid #E8E0D6; }
.ep-nav-label {
    display: block;
    padding: 14px 16px 2px;
    color: var(--mud-palette-text-secondary);
    letter-spacing: .08em;
}
.ep-nav-button {
    width: 100%;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ---- Resident home ("Today") ---- */
.ep-today { display: grid; gap: 12px; max-width: 640px; }
.ep-muted { color: #7A6A5D; }
.ep-card { display: grid; gap: 6px; background: #FFFFFF; border: 1px solid #E8E0D6; border-radius: 12px; }
.ep-card--alert { border-color: #E2B4AE; background: #FFF8F6; }
/* Orders: one title with an Upcoming / Subscriptions switch, then each day's bag as a card of lines. */
.ep-orders-head { display: grid; gap: 10px; margin-bottom: 14px; max-width: 760px; }
.ep-seg { display: grid; grid-template-columns: 1fr 1fr; background: #EFE7DD; border-radius: 10px; padding: 3px; }
.ep-seg a { text-align: center; padding: 8px 10px; border-radius: 8px; font: 600 14px 'Inter', Arial, sans-serif; color: #7A6A5D; text-decoration: none; }
.ep-seg a.active { background: #FFFFFF; color: #2A1D16; box-shadow: 0 1px 2px rgba(42,29,22,.12); }
.ep-dayrow { padding: 12px 14px; }
.ep-dayrow__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 15px; }
.ep-lines { display: grid; }
.ep-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
.ep-line + .ep-line { border-top: 1px solid #F0E9E1; }
.ep-line__main { flex: 1; min-width: 0; }
.ep-line__main .ep-muted { font-size: 13px; }
.ep-line .mud-chip { margin: 0; flex: none; }
.ep-line--skipped .ep-line__main { color: #9a8d80; text-decoration: line-through; }
.ep-line--skipped .ep-line__main .ep-muted { text-decoration: none; }
.ep-ios-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.ep-ios-steps .mud-icon-root { vertical-align: -3px; }
.ep-ios-steps .ep-muted { display: block; font-size: 13px; }
.ep-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7A6A5D; }
.ep-day { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.6rem; line-height: 1.15; color: #2A1D16; }
.ep-mark { display: grid; gap: 2px; margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: #3E2C23; color: #FAF6F0; }
/* Sized so a usual mark ("12 · THANDI · BBC · SAT") fits one line on a phone; a longer one wraps evenly, not one word alone. */
.ep-mark__text { font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; font-weight: 700; font-size: clamp(1.1rem, 5.2vw, 1.5rem); letter-spacing: .04em; overflow-wrap: anywhere; text-wrap: balance; }
.ep-mark__say { font-size: 12px; color: #D8C7B5; }
.ep-steps { display: flex; gap: 6px; margin-top: 10px; font-size: 12px; color: #7A6A5D; }
.ep-steps span { flex: 1; min-width: 0; padding-top: 6px; border-top: 3px solid #E8E0D6; }
.ep-steps .done { border-top-color: #5E8C61; color: #2A1D16; font-weight: 600; }
a.ep-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: inherit; text-decoration: none; }
a.ep-row:hover { background: #FBF8F4; }
.ep-row img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.ep-row__main { flex: 1; min-width: 0; display: grid; font-size: 14px; }
.ep-row__main .ep-muted { font-size: 13px; }

/* ---- Shared phone-first pieces: stacked cards, date chips, quantity stepper ---- */
.ep-stack { display: grid; gap: 12px; max-width: 760px; }
.ep-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ep-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px solid #E8E0D6; border-radius: 999px;
    background: #FFFFFF; color: #2A1D16; font: 500 13px/1.3 'Inter', Arial, sans-serif; cursor: pointer; }
.ep-chip:hover:not(:disabled) { border-color: #3E2C23; }
.ep-chip--locked { background: #F4EFE8; color: #7A6A5D; cursor: default; }
.ep-chip .mud-icon-root { font-size: 15px; }
.ep-linkbtn { border: 0; background: none; padding: 0 2px; color: #3E2C23; font: 600 13px 'Inter', Arial, sans-serif; text-decoration: underline; cursor: pointer; }
.ep-skipped { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; }
.ep-pause { margin-top: 12px; padding: 12px; border: 1px solid #E8E0D6; border-radius: 10px; background: #FBF8F4; max-width: 420px; }
.ep-pause .ep-sub__actions { margin-top: 8px; }
.ep-stepper { display: inline-flex; align-items: center; border: 1px solid #E8E0D6; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.ep-stepper button { width: 36px; height: 34px; border: 0; background: none; font-size: 18px; color: #3E2C23; cursor: pointer; }
.ep-stepper button:disabled { color: #C9BFB4; cursor: default; }
.ep-stepper span { min-width: 30px; text-align: center; font-weight: 600; border-left: 1px solid #E8E0D6; border-right: 1px solid #E8E0D6; line-height: 34px; }

/* Compact rows: a date column, the main text, a status at the end. */
.ep-list { display: grid; background: #FFFFFF; border: 1px solid #E8E0D6; border-radius: 12px; overflow: hidden; }
.ep-list__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 14px; }
.ep-list__row + .ep-list__row { border-top: 1px solid #F0E9E1; }
.ep-list__date { flex: none; width: 82px; font-weight: 600; color: #2A1D16; }
.ep-list__main { flex: 1; min-width: 0; }
.ep-list__row .mud-chip { margin: 0; flex: none; }

/* Expansion-panel titles that fit a phone: name and amount on one line, status and details wrap below. */
.ep-panel-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; width: 100%; align-items: center; font-size: 14px; }
.ep-panel-title b { overflow-wrap: anywhere; }
.ep-panel-title__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #7A6A5D; }
.ep-panel-title__meta .mud-chip { margin: 0; }
/* A business logo beside its name (BusinessLogo). */
.ep-logo { border-radius: 50%; object-fit: cover; flex: none; background: #FFFFFF; }
.ep-with-logo { display: flex; align-items: center; gap: 12px; }
.ep-with-logo--inline { display: inline-flex; gap: 8px; }

.ep-nowrap { white-space: nowrap; }
.ep-product { flex-wrap: wrap; }
.ep-product .ep-list__main { flex: 1 1 200px; font-size: 14px; }
.ep-product .ep-list__main .ep-muted { font-size: 13px; }
.ep-product__photo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.ep-product__actions { display: inline-flex; margin-left: auto; }

/* ---- My subscriptions card ---- */
.ep-sub__head { display: flex; align-items: flex-start; gap: 12px; }
.ep-sub__photo { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.ep-sub__title { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.ep-sub__name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.1rem; color: #2A1D16; }
.ep-sub__price { display: grid; justify-items: end; gap: 4px; font-weight: 600; color: #9A7B3E; white-space: nowrap; }
.ep-sub__price .mud-chip { margin: 0; }
.ep-sub__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ep-sub__links { margin-left: auto; display: inline-flex; }

/* Admin → Businesses: room under the tabs, or a MudGrid's negative top margin slides the fields over them and
   the tabs can't be clicked. */
.ep-manage-tabs .mud-tabs-panels { padding-top: 28px; }

/* Admin → Businesses → Logo: the empty spot where a logo would show. */
.ep-logo-empty { flex: none; width: 96px; height: 96px; border-radius: 50%; border: 2px dashed #DCD3C9;
    display: flex; align-items: center; justify-content: center; color: #7A6A5D; font-size: 13px; }

/* ---- Public estate page (/join/{estate}) ---- */
.ep-public-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #3E2C23;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
.ep-public-bar__signin { color: #FAF6F0; font-weight: 600; text-decoration: none; }
.ep-public { background: #FAF6F0; min-height: 100vh; padding: 0 16px 48px; color: #2A1D16; }
.ep-public > section { max-width: 760px; margin: 0 auto; }
/* The bakery-racks photo, the same as sign-in, so the WhatsApp link, this page and sign-in look like one place. */
.ep-public > section.ep-public__hero { margin-top: 16px; }
.ep-public__hero { display: grid; gap: 12px; padding: 40px 24px; border-radius: 14px; color: #FAF6F0;
    background: linear-gradient(135deg, rgba(42,29,22,.55) 0%, rgba(42,29,22,.85) 100%), url('/bread-bg.jpg') center / cover no-repeat, #2A1D16; }
.ep-public__hero .ep-eyebrow { color: #E8D9C4; }
.ep-public__hero .ep-public__cta > a:not(.mud-button-root) { color: #FAF6F0; }
/* The brand-brown button vanishes on the dark photo; gold, as on the sign-in page. */
.ep-public__hero .mud-button-filled-primary { background: #C8A25A; color: #2A1D16; }
.ep-public__hero .mud-button-filled-primary:hover { background: #b8924a; }
.ep-public__hero h1 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.1; text-wrap: balance; }
.ep-public__hero p { margin: 0; font-size: 1.1rem; max-width: 52ch; }
.ep-public__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 8px; }
.ep-public__section { padding-top: 32px; display: grid; gap: 12px; }
.ep-public__section h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.5rem; }
.ep-public__section p { margin: 0; max-width: 60ch; }
.ep-public__steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; max-width: 60ch; }
.ep-public__products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ep-public__product { display: grid; background: #FFFFFF; border: 1px solid #E8E0D6; border-radius: 12px; overflow: hidden; }
.ep-public__product img { width: 100%; height: 150px; object-fit: cover; display: block; }
.ep-public__product div { display: grid; gap: 2px; padding: 10px 12px 12px; font-size: 14px; }
.ep-public__price { color: #9A7B3E; font-weight: 600; }
.ep-public-foot { max-width: 760px; margin: 48px auto 0; padding-top: 16px; border-top: 1px solid #E8E0D6;
    display: flex; gap: 20px; font-size: 14px; }
.ep-public-foot a { color: #3E2C23; font-weight: 600; }

/* ---- Privacy and Terms (/privacy, /terms) ---- */
.ep-legal > section { max-width: 760px; margin: 0 auto; }
.ep-draft { margin: 20px 0 0; padding: 10px 14px; border-radius: 10px; background: #FBEFD9; border: 1px solid #E8C98A;
    color: #5C4310; font-size: 14px; font-weight: 600; }
.ep-legal ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; max-width: 60ch; }
.ep-legal a { color: #3E2C23; font-weight: 600; }
.ep-placeholder { background: #FBEFD9; padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* ---- One card style: a thin warm border instead of mixed shadows ---- */
.ep-main .mud-paper.mud-elevation-1,
.ep-main .mud-paper.mud-elevation-2,
.ep-main .mud-paper.mud-elevation-3,
.ep-main .mud-card.mud-elevation-1 {
    box-shadow: none;
    border: 1px solid #E8E0D6;
}
.ep-main .mud-button-filled { box-shadow: none; }
/* Expandable lists (trade orders, production days) in the same frame, not a grey shadow. */
.ep-main .mud-expand-panel.mud-elevation-1 { box-shadow: none; margin: 0; }
.ep-main .mud-expansion-panels:has(.mud-expand-panel.mud-elevation-1) { border: 1px solid #E8E0D6; border-radius: 12px; overflow: hidden; }

/* ---- Phone type scale: page titles about a third smaller, so content starts higher ---- */
@media (max-width: 599.98px) {
    .ep-main .mud-typography-h3 { font-size: 2rem; }
    .ep-main .mud-typography-h4 { font-size: 1.6rem; line-height: 1.2; }
    .ep-main .mud-typography-h5 { font-size: 1.3rem; }
    .ep-main .mud-typography-h6 { font-size: 1.1rem; }
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Safety net: a date-picker calendar must always show all 7 day columns,
   even when the picker input is sized narrow. */
.mud-picker-container {
    min-width: 312px;
}

/* Notification count: MudBlazor anchors the badge to the padded icon-button corner,
   which floats it too far up/right of the bell glyph. Pull it in and shrink slightly.
   Adjust the translate values if you want it nudged further. */
.ep-bell .mud-badge {
    transform: scale(0.85) translate(-35%, 35%) !important;
}

/* Clickable notification rows (those with a link) get a pointer + hover highlight. */
.ep-notif-clickable {
    cursor: pointer;
    transition: background-color .15s ease;
}
.ep-notif-clickable:hover {
    background-color: var(--mud-palette-action-default-hover);
}