/* Public (statically rendered) pages: Vanta.js background behind MudBlazor cards. */
.ep-vanta {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 20% 20%, #4a2a73 0%, #1d1233 55%, #120a22 100%);
}

.ep-public {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ep-public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.ep-brand {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* An organization's own address (ADR-0044): its logo, centred above the card. */
.ep-public--site .ep-public-header { justify-content: center; padding-top: 36px; }
.ep-public--site .ep-brand { font-size: 1.6rem; text-align: center; }
.ep-site-logo { display: block; height: 96px; max-width: min(420px, 82vw); object-fit: contain; }

.ep-public-main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px 48px;
}

.ep-auth-card {
    width: 100%;
    max-width: 460px;
}

.ep-auth-card.wide {
    max-width: 720px;
}

/* Native fields of the account pages that work without a script (the provider's registration, ADR-0051). */
.ep-plain-form label,
.ep-plain-form legend {
    display: block;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.ep-plain-form select,
.ep-plain-form input[type="text"] {
    width: 100%;
    min-height: 56px;
    padding: 0 12px;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}

.ep-plain-form select:focus,
.ep-plain-form input[type="text"]:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
}

.ep-plain-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 12px;
}

.ep-plain-form legend {
    grid-column: 1 / -1;
}

.ep-plain-form .ep-plain-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 0;
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    cursor: pointer;
}

.ep-plain-form .ep-plain-form__check input {
    width: 18px;
    height: 18px;
    accent-color: var(--mud-palette-primary);
}

.ep-plain-form__error {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
    margin-top: 4px;
}

.ep-public-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    padding: 16px;
}

.ep-public-footer a {
    color: inherit;
}

.ep-public-footer a:hover {
    color: #fff;
}

.ep-hero {
    color: #fff;
    text-align: center;
    max-width: 760px;
    padding-top: 8vh;
}

.ep-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    margin: 0 0 16px;
}

.ep-hero p {
    font-size: 1.15rem;
    opacity: 0.85;
    margin: 0 0 32px;
}

.ep-code {
    font-family: Consolas, "Courier New", monospace;
    background: rgba(107, 63, 160, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    word-break: break-all;
}

/* Room plan (SVG, coordinates in metres). */
.ep-plan {
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: #fbfaf7;
    border-radius: 8px;
    touch-action: none;
}

.ep-plan .grid-minor {
    stroke: #e8e4ee;
    stroke-width: 0.02;
}

.ep-plan .grid-major {
    stroke: #cfc6dc;
    stroke-width: 0.04;
}

.ep-plan .area-label {
    font-size: 0.38px;
    fill: #6b3fa0;
    font-style: italic;
    pointer-events: none;
    dominant-baseline: middle;
}

.ep-plan .room-outline {
    fill: none;
    stroke: #3b2a57;
    stroke-width: 0.12;
}

.ep-plan .element {
    cursor: pointer;
    stroke-width: 0.05;
}

.ep-plan .element.selected {
    stroke: #1565c0;
    stroke-width: 0.12;
}

.ep-plan .element.invalid {
    stroke: #d32f2f;
    stroke-width: 0.12;
    stroke-dasharray: 0.25 0.12;
}

.ep-plan .label {
    font-size: 0.45px;
    fill: #2b2140;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* ---------- invitation editor ---------- */

.ep-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 12px;
    max-height: 560px;
    overflow-y: auto;
    padding: 4px;
}

.ep-template {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ep-template:hover {
    border-color: var(--mud-palette-lines-default);
}

.ep-template--selected {
    border-color: var(--mud-palette-primary);
}

.ep-template:disabled {
    cursor: default;
}

.ep-palettes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ep-palette {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 76px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ep-palette > span {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.ep-palette small {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

.ep-palette--selected {
    border-color: var(--mud-palette-primary);
}

/* The models page of the application: the pictures of the public gallery, in cards. */
.ep-models__collection { margin-bottom: 32px; }
.ep-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ep-model { display: flex; flex-direction: column; overflow: hidden; }
.ep-model--current { border-color: var(--mud-palette-success) !important; box-shadow: 0 0 0 2px var(--mud-palette-success); }
.ep-model > img { display: block; width: 100%; height: auto; aspect-ratio: 520 / 600; object-fit: cover; object-position: top; background: var(--mud-palette-background-gray); }
.ep-model__body { flex: 1; padding: 10px 12px 4px; }
.ep-model__body .mud-typography-body2 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ep-model__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 8px 10px; }

.ep-phone-preview {
    position: sticky;
    top: 80px;
}

.ep-phone {
    width: 390px;
    max-width: 100%;
    height: 760px;
    margin: 0 auto;
    overflow-y: auto;
    border: 10px solid #1b1b1f;
    border-radius: 36px;
    background: #fff;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}

/* The invitation page (ADR-0057): the invitation in the middle, two round buttons at the right edge, the settings in
   a panel that slides in beside it. The panel is below the pickers' layer, so dates and lists open above it. */
.ep-inv-stage { display: flex; justify-content: center; padding-bottom: 24px; transition: padding-right .25s ease; }
.ep-inv-tools {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1140;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.ep-inv-tools--hidden { display: none; }
.ep-inv-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ep-inv-tool > span {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    white-space: nowrap;
}
.ep-inv-settings {
    position: fixed;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8);
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    z-index: 1150;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
    border-left: 1px solid var(--mud-palette-lines-default);
    box-shadow: -16px 0 36px -20px rgba(0, 0, 0, .45);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}
.ep-inv-settings--open { transform: none; visibility: visible; transition: transform .25s ease; }
.ep-inv-settings__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ep-inv-settings__body { flex: 1; overflow-y: auto; padding: 16px; }
@media (min-width: 0px) and (orientation: landscape) {
    .ep-inv-settings { top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4); }
}
@media (min-width: 600px) {
    .ep-inv-settings { top: var(--mud-appbar-height); }
}
@media (min-width: 1280px) {
    /* Wide screens: the invitation moves aside and stays in view while the settings are open. */
    .ep-inv-stage--settings { padding-right: 560px; }
}
@media (max-width: 599px) {
    .ep-inv-tools { right: 8px; }
}

/* ---- 2D floor plan editor (WebAssembly island on a static page) -------------------------------------- */
/* 100svh, not 100dvh (ADR-0067): the dynamic height follows the address bar of a phone frame by frame, and every
   frame would resize and redraw the canvas. The small viewport is stable; 100vh is the fallback. */
.ep-editor-shell { height: 100vh; height: 100svh; overflow: hidden; background: var(--mud-palette-background, #f3f1f7); }
.ep-editor-host { position: relative; height: 100%; }
.ep-editor-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #7b7089; font: 15px "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.ep-editor-host:has(.ep-editor) .ep-editor-loading { display: none; }
.ep-editor-loading__spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(107, 63, 160, .2); border-top-color: #6b3fa0; animation: ep-spin .9s linear infinite; }
@keyframes ep-spin { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: dark) {
    .ep-editor-shell { background: var(--mud-palette-background, #15101f); }
    .ep-editor-loading { color: #a197b3; }
}
.ep-editor-missing { padding: 48px 16px; text-align: center; font-family: "Segoe UI", Roboto, sans-serif; }

.ep-editor { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--mud-palette-background); color: var(--mud-palette-text-primary); }
.ep-editor__bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 56px; background: var(--mud-palette-appbar-background); color: var(--mud-palette-appbar-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); z-index: 3; }
.ep-editor__title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ep-editor__title strong { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-editor__title span { font-size: .8rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-editor__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 8px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); z-index: 2; }
.ep-editor__group { display: flex; align-items: center; gap: 2px; }
.ep-editor__group + .ep-editor__group { padding-left: 10px; border-left: 1px solid var(--mud-palette-lines-default); }
.ep-editor__tool { text-transform: none !important; }
.ep-editor__body { flex: 1; display: flex; min-height: 0; }
.ep-editor__stage { position: relative; flex: 1; min-width: 0; min-height: 0; background: var(--mud-palette-background-gray); }
.ep-editor__canvas { position: absolute; inset: 0; outline: none; touch-action: none; }
.ep-editor__canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--mud-palette-primary); }
.ep-editor__banners { position: absolute; top: 8px; left: 8px; right: 8px; display: grid; gap: 6px; pointer-events: none; z-index: 1; }
.ep-editor__banners > * { pointer-events: auto; max-width: 720px; width: 100%; margin: 0 auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.ep-editor__panel { width: 320px; flex-shrink: 0; overflow-y: auto; padding: 12px 14px 24px; background: var(--mud-palette-surface); border-left: 1px solid var(--mud-palette-lines-default); }
.ep-editor__message { flex: 1; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; padding: 24px; }
/* Actions of the toolbar: an icon on wide screens (the tooltip names it), icon and name on narrow ones. */
.ep-editor__tool--action { min-width: 0 !important; padding: 5px !important; border-radius: 50%; }
.ep-editor__tool--action:not(.mud-button-text-primary) { color: var(--mud-palette-action-default); }
.ep-editor__tool--action .mud-button-icon-start { margin: 0; }
.ep-editor__tool--action .mud-icon-root { font-size: 1.25rem; }
.ep-editor__tool-label { display: none; }

/* Narrow screens (ADR-0043): the plan keeps the whole screen, the details open from a gear on the right edge and the
   objects from "Adaugă obiect". On wide screens the wrapper of the objects is not a box at all and the rest is hidden. */
.ep-editor__objects { display: contents; }
.ep-editor__objects .ep-editor__group ~ .ep-editor__group,
.ep-editor__objects + .ep-editor__group { padding-left: 10px; border-left: 1px solid var(--mud-palette-lines-default); }
.ep-editor__objects-toggle, .ep-editor__objects-title, .ep-editor__drawer-head, .ep-editor__panel-toggle, .ep-editor__scrim { display: none; }

@media (max-width: 900px) {
    .ep-editor__tool-text { display: none; }

    /* One row of tools that scrolls sideways, each action with its name under the icon. */
    .ep-editor__tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ep-editor__tools::-webkit-scrollbar { display: none; }
    .ep-editor__group { flex-shrink: 0; }
    .ep-editor__tool--action { min-width: 48px !important; padding: 4px 3px !important; border-radius: 8px; }
    .ep-editor__tool--action .mud-button-label { flex-direction: column; gap: 1px; }
    .ep-editor__tool-label { display: block; font-size: .62rem; line-height: 1.1; white-space: nowrap; text-transform: none; }
    .ep-editor__objects-toggle {
        all: unset; box-sizing: border-box; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px 6px 10px;
        border-radius: 999px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-size: .86rem; font-weight: 600; cursor: pointer;
    }
    .ep-editor__objects-toggle:focus-visible { outline: 2px solid var(--mud-palette-secondary); outline-offset: 2px; }

    /* The objects that can be added: a drawer from the left, every object with its name. */
    .ep-editor__objects {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; width: min(330px, 88vw); padding: 12px 12px 24px;
        overflow-y: auto; background: var(--mud-palette-surface); box-shadow: 6px 0 28px rgba(0, 0, 0, .35);
        transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s;
    }
    .ep-editor--objects-open .ep-editor__objects { transform: none; visibility: visible; transition: transform .2s ease; }
    /* The toolbar is its own layer: with the list open it must stand above the scrim, and must not clip the list. */
    .ep-editor--objects-open .ep-editor__tools { z-index: 30; overflow: visible; }
    .ep-editor__objects .ep-editor__group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 !important; border: 0 !important; }
    .ep-editor__objects .ep-editor__draggable, .ep-editor__objects .mud-tooltip-root { display: block; width: 100%; }
    .ep-editor__objects .ep-editor__tool { width: 100%; min-height: 52px; justify-content: flex-start; padding: 8px 10px !important; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }
    .ep-editor__objects .ep-editor__tool-text { display: inline; text-align: left; white-space: normal; line-height: 1.2; }
    .ep-editor__objects-title { display: block; margin-top: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
    .ep-editor__drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 1.05rem; }

    /* The details: a drawer from the right, opened by the gear in the middle of the right edge. */
    .ep-editor__panel {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(360px, 90vw); border-left: none; box-shadow: -6px 0 28px rgba(0, 0, 0, .35);
        transform: translateX(105%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s;
    }
    .ep-editor--panel-open .ep-editor__panel { transform: none; visibility: visible; transition: transform .2s ease; }
    /* The properties of an object have their own title and close button. */
    .ep-editor__panel:has(.ep-props__head) > .ep-editor__drawer-head { display: none; }
    .ep-editor__panel-toggle {
        all: unset; box-sizing: border-box; position: absolute; top: 50%; right: 0; z-index: 2; transform: translateY(-50%); display: flex; flex-direction: column;
        align-items: center; gap: 2px; padding: 10px 8px 8px 10px; border-radius: 16px 0 0 16px; background: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary); box-shadow: -2px 2px 12px rgba(0, 0, 0, .28); font-size: .68rem; font-weight: 600; line-height: 1.15; cursor: pointer;
    }
    .ep-editor__panel-toggle span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ep-editor__panel-toggle--active { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
    .ep-editor__panel-toggle:focus-visible { outline: 2px solid var(--mud-palette-secondary); outline-offset: -2px; }
    .ep-editor__scrim { position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .42); }
    .ep-editor--panel-open .ep-editor__scrim, .ep-editor--objects-open .ep-editor__scrim { display: block; }
}
@media (max-width: 600px) {
    .ep-editor__title span, .ep-editor__status { display: none !important; }
    .ep-editor__tools { gap: 2px 4px; padding: 2px 4px; }
    .ep-editor__group + .ep-editor__group { padding-left: 4px; }
}

.ep-props, .ep-summary { display: flex; flex-direction: column; gap: 6px; }
.ep-props__head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.ep-props__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.ep-props__seats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ep-props__seat-field { flex: 1 1 100%; }
.ep-props__sides { display: grid; grid-template-columns: 1fr 1fr; }
.ep-props__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ep-summary__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin: 8px 0; }
.ep-summary__stats > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--mud-palette-background-gray); }
.ep-summary__stats strong { font-size: 1.4rem; line-height: 1.2; color: var(--mud-palette-primary); }
.ep-summary__stats span { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.ep-summary__list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ep-summary__list--tables { max-height: 260px; overflow-y: auto; }
.ep-summary__link { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: .875rem; }
.ep-summary__link:hover, .ep-summary__link:focus-visible { background: var(--mud-palette-action-default-hover); }
.ep-summary__link small { color: var(--mud-palette-text-secondary); white-space: nowrap; }
.ep-summary__link--error { color: var(--mud-palette-error); }
.ep-summary__keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: .8rem; }
.ep-summary__keys dt { font-weight: 600; white-space: nowrap; }
.ep-summary__keys dd { margin: 0; color: var(--mud-palette-text-secondary); }

.ep-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(21, 16, 31, .35); backdrop-filter: blur(2px); overflow-y: auto; z-index: 2; }
.ep-start__card { max-width: 880px; width: 100%; padding: 24px; border-radius: 16px !important; max-height: 100%; overflow-y: auto; }
.ep-start__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ep-start__option { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); cursor: pointer; background: var(--mud-palette-surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ep-start__option:hover, .ep-start__option:focus-visible { border-color: var(--mud-palette-primary); box-shadow: 0 4px 14px rgba(107, 63, 160, .18); transform: translateY(-1px); }
.ep-start__option[disabled] { opacity: .6; pointer-events: none; }
.ep-start__option small { color: var(--mud-palette-text-secondary); }
.ep-start__preview { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--mud-palette-background-gray); display: flex; align-items: center; justify-content: center; }
.ep-start__preview > svg.ep-plan-preview { width: 100%; height: 100%; }
.ep-start__preview--empty .mud-icon-root { position: absolute; color: var(--mud-palette-primary); }

.ep-plan-preview__floor { fill: var(--mud-palette-surface); }
.ep-plan-preview__outline { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: .15; }
.ep-plan-preview__level { fill: none; stroke: var(--mud-palette-primary); stroke-width: 0.12; stroke-dasharray: 0.5 0.3; }
.ep-plan-preview__fixed { fill: rgba(107, 100, 120, .55); }
.ep-plan-preview__fixed--stage { fill: rgba(107, 63, 160, .3); }
.ep-plan-preview__fixed--bar { fill: rgba(154, 91, 34, .45); }
.ep-plan-preview__fixed--door { fill: #9a5b22; }
.ep-plan-preview__fixed--window { fill: #0288d1; }
.ep-plan-preview__fixed--restrictedzone { fill: rgba(211, 47, 47, .2); }
.ep-plan-preview__fixed--photobooth { fill: rgba(2, 136, 209, .25); }
.ep-plan-preview__fixed--candybar { fill: rgba(245, 124, 0, .3); }
.ep-plan-preview__fixed--restrooms { fill: rgba(0, 137, 123, .25); }
.ep-plan-preview__fixed--entrancehall { fill: rgba(251, 192, 45, .25); }
.ep-plan-preview__element { fill: rgba(194, 24, 91, .16); stroke: var(--mud-palette-secondary); stroke-width: .08; }
.ep-plan-preview__table { fill: var(--mud-palette-primary); opacity: .75; }

/* Room layout templates (room page) */
.ep-template-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ep-template-card { display: flex; flex-direction: column; overflow: hidden; }
.ep-template-card__preview { display: block; aspect-ratio: 4 / 3; padding: 8px; background: var(--mud-palette-background-gray); }
.ep-template-card__preview > svg.ep-plan-preview { width: 100%; height: 100%; }
.ep-template-card__body { padding: 8px 12px 0; }
.ep-template-card__actions { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; }

/* Preparations and budget (ADR-0048): one row per thing to do or to buy */
.ep-checklist-start { border-left: 4px solid var(--mud-palette-primary); }
.ep-checklist-item { display: flex; align-items: flex-start; gap: 4px; padding: 6px 0; border-top: 1px solid var(--mud-palette-divider); }
.ep-checklist-item__body { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.ep-checklist-item__money { flex: 0 0 auto; min-width: 150px; padding-top: 6px; text-align: right; display: flex; flex-direction: column; }
.ep-checklist-item--done .ep-checklist-item__title { text-decoration: line-through; color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) {
    .ep-checklist-item { flex-wrap: wrap; }
    .ep-checklist-item__body { flex-basis: calc(100% - 48px); }
    .ep-checklist-item__money { flex: 1 1 auto; min-width: 0; padding-left: 44px; text-align: left; }
}

/* Seating view (phase 7): view switch in the editor bar and the seating panel */
.ep-editor__views { display: inline-flex; margin-left: 12px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.ep-editor__view { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: .85rem; color: inherit; opacity: .85; }
.ep-editor__view:hover, .ep-editor__view:focus-visible { opacity: 1; background: rgba(255, 255, 255, .12); }
.ep-editor__view--active { opacity: 1; background: var(--mud-palette-surface); color: var(--mud-palette-primary); font-weight: 600; }
.ep-editor__view--active:hover { background: var(--mud-palette-surface); }
.ep-editor__hint { font-size: .8rem; color: var(--mud-palette-text-secondary); }
/* Floors of the room (ADR-0037) */
.ep-editor__levels { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--mud-palette-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.ep-editor__level { all: unset; box-sizing: border-box; display: inline-grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; padding: 6px 12px; border-radius: 9px; cursor: pointer; font-size: .85rem; color: var(--mud-palette-text-primary); }
.ep-editor__level small { grid-column: 2; font-size: .7rem; color: var(--mud-palette-text-secondary); }
.ep-editor__level:hover, .ep-editor__level:focus-visible { background: var(--mud-palette-action-default-hover); }
.ep-editor__level--active { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-weight: 600; }
.ep-editor__level--active small { color: inherit; opacity: .85; }
.ep-editor__level--active:hover { background: var(--mud-palette-primary); }
.ep-editor__levels-wrap { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ep-editor__levels-wrap .ep-editor__levels { position: static; }
.ep-editor__draggable { display: inline-flex; cursor: grab; }
.ep-editor__draggable:active { cursor: grabbing; }
@media (max-width: 600px) {
    .ep-editor__views { margin-left: 4px; }
    .ep-editor__view span { display: none; }
    .ep-editor__hint { display: none; }
}

.ep-seat { display: flex; flex-direction: column; gap: 8px; }
.ep-seat__stat--todo strong { color: var(--mud-palette-warning); }
.ep-seat__table { padding: 10px; border-radius: 10px; border: 1px solid var(--mud-palette-primary); background: var(--mud-palette-background-gray); }
.ep-seat__table-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ep-seat__selection { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-size: .85rem; }
.ep-seat__selection .mud-button-root { color: inherit; }
.ep-seat__head { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ep-seat__families, .ep-seat__list { list-style: none; margin: 0; padding: 0; }
.ep-seat__families > li { margin-bottom: 6px; }
.ep-seat__family { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 0; border-radius: 6px; cursor: grab; font-weight: 600; font-size: .85rem; }
.ep-seat__family:hover { background: var(--mud-palette-action-default-hover); }
.ep-seat__family small { margin-left: auto; color: var(--mud-palette-text-secondary); font-weight: 400; }
.ep-seat__family-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-seat__guest { display: flex; align-items: center; gap: 6px; padding: 5px 8px; margin-left: 12px; border-radius: 6px; cursor: grab; font-size: .85rem; border: 1px solid transparent; user-select: none; }
.ep-seat__table .ep-seat__guest { margin-left: 0; }
.ep-seat__guest:hover { background: var(--mud-palette-action-default-hover); }
.ep-seat__guest--selected { border-color: var(--mud-palette-primary); background: var(--mud-palette-background-gray); }
.ep-seat__guest[draggable="false"], .ep-seat__family[draggable="false"] { cursor: default; }
.ep-seat__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-seat__badges { display: inline-flex; gap: 4px; flex-shrink: 0; }
.ep-seat__badge { padding: 0 6px; border-radius: 999px; font-size: .7rem; line-height: 1.5; border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.ep-seat__badge--warn { border-color: var(--mud-palette-warning); color: var(--mud-palette-warning); }

/* Marketplace (Faza 8) */
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
.ep-muted { opacity: .55; }
.ep-preline { white-space: pre-line; }
.ep-provider-logo img { width: 100%; height: 100%; object-fit: cover; }
.ep-provider-cover { display: block; width: 100%; height: 220px; object-fit: cover; background: var(--mud-palette-background-gray); }
.ep-provider-cover--small { height: 110px; border-radius: 8px; }
.ep-market-card { transition: box-shadow .15s ease, transform .15s ease; }
.ep-market-card:hover { box-shadow: var(--mud-elevation-4); transform: translateY(-1px); }
.ep-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ep-portfolio-thumb { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; background: var(--mud-palette-background-gray); }
.ep-portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.ep-portfolio-thumb:hover img, .ep-portfolio-thumb:focus-visible img { transform: scale(1.03); }
.ep-portfolio-thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: .8rem; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
/* A clip of the portfolio (ADR-0051): twice as wide as a photo, played in place; its caption sits above the controls. */
.ep-portfolio-thumb--video { cursor: default; grid-column: span 2; aspect-ratio: 16 / 9; background: #000; }
.ep-portfolio-thumb--video video, .ep-portfolio-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.ep-portfolio-thumb--video span { top: 0; bottom: auto; background: linear-gradient(rgba(0, 0, 0, .65), transparent); pointer-events: none; }
@media (max-width: 480px) { .ep-portfolio-thumb--video { grid-column: 1 / -1; } }
.ep-photo-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 8px; }
.ep-package-item { margin-bottom: 4px; }
.ep-stat-tile { height: 100%; }
.ep-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ep-calendar__head { text-align: center; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); padding-bottom: 2px; }
.ep-calendar__cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 64px; padding: 6px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; text-align: left; }
.ep-calendar__cell:hover:not(:disabled) { border-color: var(--mud-palette-primary); }
.ep-calendar__cell:disabled { cursor: default; opacity: .45; }
.ep-calendar__cell--today { box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.ep-calendar__cell--selected { outline: 3px solid var(--mud-palette-primary); outline-offset: -1px; }
.ep-calendar__cell--available { background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface)); }
.ep-calendar__cell--tentative { background: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-surface)); }
.ep-calendar__cell--booked, .ep-calendar__cell--unavailable { background: color-mix(in srgb, var(--mud-palette-error) 18%, var(--mud-palette-surface)); }
.ep-calendar__day { font-weight: 600; }
.ep-calendar__status { font-size: .68rem; line-height: 1.2; color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) {
    .ep-calendar { gap: 3px; }
    .ep-calendar__cell { min-height: 44px; padding: 4px; }
    .ep-calendar__status { display: none; }
}

/* Cereri și oferte (Faza 9) */
.ep-offer--latest { border-color: var(--mud-palette-primary); }
.ep-offer--old { opacity: .8; }
.ep-offer__table td, .ep-offer__table th { padding: 6px 8px; }
.ep-offer__total td { border-top: 2px solid var(--mud-palette-lines-default); }

/* Notificări (Faza 10) */
.ep-bell .mud-list { padding: 0; }
.ep-bell__list { width: min(380px, 92vw); }
.ep-bell__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 6px; }
.ep-bell__row { display: flex; gap: 10px; align-items: flex-start; white-space: normal; }
.ep-bell__title { font-weight: 600; font-size: .9rem; }
.ep-bell__body { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.ep-bell__time { font-size: .72rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.ep-bell__item--unread { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.ep-reminders { border-color: var(--mud-palette-warning); }

/* Registration: what the account is for, one choice a row. */
.ep-purpose, .ep-plain-form .ep-purpose { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.ep-purpose legend { font-size: 0.875rem; color: var(--mud-palette-text-secondary); margin-bottom: 6px; padding: 0; }
.ep-purpose__option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    background: var(--mud-palette-surface);
}
.ep-purpose__option:has(input:checked) { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.ep-purpose__option input { margin-top: 3px; accent-color: var(--mud-palette-primary); }
.ep-purpose__option strong { display: block; }
.ep-purpose__option small { display: block; color: var(--mud-palette-text-secondary); font-size: 0.8125rem; line-height: 1.35; }

/* The registration page (ADR-0068): three steps above the card, where the person is on the first page, the hall
   drawing and three lines beside the card on wide screens. Phones keep one column and the 16 px gutters of the page. */
.ep-auth-split { width: 100%; max-width: 460px; display: grid; gap: 28px; }
.ep-auth-aside { display: none; color: #fff; }
.ep-auth-hall { display: block; width: 100%; max-width: 420px; height: auto; }
.ep-hall__floor { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.ep-hall__stage { fill: rgba(255, 255, 255, .18); stroke: rgba(255, 255, 255, .5); }
.ep-hall__label { fill: rgba(255, 255, 255, .75); font-size: 10px; text-anchor: middle; font-family: inherit; }
.ep-hall__dance { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-dasharray: 4 3; }
.ep-hall__couple { fill: rgba(255, 214, 102, .85); }
.ep-hall__table circle { fill: rgba(255, 255, 255, .22); stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.ep-hall__table .ep-hall__chair { fill: rgba(255, 255, 255, .55); stroke: none; }
.ep-hall__door { fill: rgba(255, 214, 102, .6); }
.ep-auth-benefits { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; font-size: 1.05rem; line-height: 1.4; }
.ep-auth-benefits li { display: flex; gap: 10px; align-items: flex-start; }
.ep-auth-benefits li::before { content: "✓"; flex-shrink: 0; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: .8rem; }
.ep-auth-main { min-width: 0; }
.ep-steps { list-style: none; margin: 0 0 14px; padding: 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: rgba(255, 255, 255, .72); font-size: .82rem; }
.ep-steps__step { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ep-steps__step + .ep-steps__step::before { content: "·"; margin-right: 6px; opacity: .6; }
.ep-steps__step span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); font-weight: 600; font-size: .75rem; }
.ep-steps__step--active { color: #fff; font-weight: 600; }
.ep-steps__step--active span { background: #fff; color: #4a2a73; border-color: #fff; }
.ep-steps__step--done span { background: rgba(255, 255, 255, .28); border-color: transparent; }
.ep-register__where, .ep-plain-form .ep-register__where { display: block; margin-top: 20px; border: 0; padding: 0; }
.ep-register__where legend { font-size: 0.875rem; color: var(--mud-palette-text-secondary); margin-bottom: 6px; padding: 0; }
.ep-register__why { display: block; margin-top: 6px; color: var(--mud-palette-text-secondary); font-size: .78rem; line-height: 1.35; }
.ep-register__chosen, .ep-place__summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--mud-default-borderradius); background: var(--mud-palette-background-gray); font-size: .95rem; }
.ep-register__chosen a, .ep-place__summary a { color: var(--mud-palette-primary); font-size: .85rem; white-space: nowrap; }
.ep-place { display: grid; gap: 12px; }
.ep-plain-form .ep-place label { margin-bottom: 6px; }
@media (min-width: 900px) {
    .ep-auth-split { max-width: 980px; grid-template-columns: minmax(0, 1fr) 460px; align-items: center; gap: 48px; }
    .ep-auth-aside { display: block; }
}
/* Motion only where the visitor allows it: the public site respects "reduce motion" (ADR-0059 exempts the invitations alone). */
@media (prefers-reduced-motion: no-preference) {
    @keyframes ep-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ep-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
    .ep-auth-main .ep-auth-card { animation: ep-rise .45s ease-out both; }
    .ep-steps { animation: ep-rise .4s ease-out both; }
    .ep-auth-aside { animation: ep-rise .6s ease-out both; }
    .ep-auth-hall { animation: ep-float 3.6s ease-in-out infinite alternate; }
    .ep-auth-benefits li { animation: ep-rise .5s ease-out both; }
    .ep-auth-benefits li:nth-child(1) { animation-delay: .25s; }
    .ep-auth-benefits li:nth-child(2) { animation-delay: .35s; }
    .ep-auth-benefits li:nth-child(3) { animation-delay: .45s; }
    .ep-purpose__option { animation: ep-rise .4s ease-out both; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
    .ep-purpose__option:nth-child(2) { animation-delay: .1s; }
    .ep-purpose__option:nth-child(3) { animation-delay: .17s; }
    .ep-purpose__option:nth-child(4) { animation-delay: .24s; }
    .ep-purpose__option:hover, .ep-purpose__option:focus-within { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(107, 63, 160, .18); }
    .ep-purpose__option:has(input:checked):hover { box-shadow: inset 0 0 0 1px var(--mud-palette-primary), 0 6px 16px rgba(107, 63, 160, .18); }
}
.ep-reminders__days { max-width: 260px; }

/* Personalizarea organizației (ADR-0035) */
.ep-guide { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .92rem; line-height: 1.5; }
.ep-brand-logo { height: 40px; max-width: 160px; object-fit: contain; }
.ep-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-brand-preview { border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.ep-brand-preview img { height: 36px; max-width: 140px; object-fit: contain; }
.ep-color-input { width: 48px; height: 36px; border: none; background: none; padding: 0; cursor: pointer; }

/* Support inbox (ADR-0054): the administrators' answers stand apart from what the customer wrote. */
.ep-support-message--ours { border-left: 4px solid var(--mud-palette-primary); }

/* Operations pages of the platform administration (ADR-0061): an exception's text, scrollable. */
.ep-log-details {
    max-height: 320px;
    margin: 6px 0 0;
    padding: 8px;
    overflow: auto;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ADR-0062: the Meta page; its tables scroll in their own box, so a phone keeps the width of its screen. */
.ep-meta-scroll { overflow-x: auto; max-width: 100%; }
.ep-meta-code { word-break: break-all; }

/* ADR-0065: the "?" next to an announcement or a template, and its explanation in a readable width. */
.ep-help-tip { display: inline-flex; cursor: help; border-radius: 50%; }
.ep-help-tip:focus-visible { outline: 2px solid var(--mud-palette-info); outline-offset: 2px; }
.ep-help-tip__text { max-width: 340px; white-space: normal; text-align: left; line-height: 1.45; }