/* Web client shell: top bar with the menu, content area, loading and login pages. */

.erp-web-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.erp-web-topbar {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    min-height: 52px;
    padding: env(safe-area-inset-top) max(var(--erp-space-3), env(safe-area-inset-right)) 0 max(var(--erp-space-3), env(safe-area-inset-left));
    background: var(--erp-color-surface);
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-web-topbar__title {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    margin-right: var(--erp-space-3);
}

.erp-web-nav {
    display: flex;
    flex: 1;
    gap: var(--erp-space-1);
    min-width: 0;
    overflow-x: auto;
}

.erp-web-nav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--erp-space-2);
    min-height: 44px;
    padding: 0 var(--erp-space-3);
    border: 0;
    border-radius: var(--erp-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.erp-web-nav__item:hover {
    background: var(--erp-color-hover);
}

.erp-web-nav__item.is-current {
    background: var(--erp-color-selected);
    box-shadow: inset 0 -3px 0 var(--erp-color-accent);
}

.erp-web-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Start screen (index.html, then WebSplash): app icon, progress bar, current step. */
.erp-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100vh;
    height: 100dvh;
    background: var(--erp-color-background);
}

.erp-splash__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.erp-splash__icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.12);
    animation: erp-splash-breathe 1.8s ease-in-out infinite;
}

.erp-splash__bar {
    position: relative;
    width: min(240px, 60vw);
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--erp-color-border);
}

/* Runtime download: Blazor sets --blazor-load-percentage on the document while it loads. */
.erp-splash__fill {
    width: var(--blazor-load-percentage, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--erp-color-accent);
    transition: width 0.2s ease-out;
}

.erp-splash__bar--indeterminate .erp-splash__fill {
    position: absolute;
    width: 40%;
    transition: none;
    animation: erp-splash-slide 1.2s ease-in-out infinite;
}

.erp-splash__step {
    min-height: 1.5em;
    color: var(--erp-color-text-muted);
}

.erp-splash__step:empty::after {
    content: var(--blazor-load-percentage-text, "");
}

@keyframes erp-splash-breathe {
    50% {
        transform: scale(0.94);
        opacity: 0.85;
    }
}

@keyframes erp-splash-slide {
    from {
        left: -40%;
    }

    to {
        left: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .erp-splash__icon,
    .erp-splash__bar--indeterminate .erp-splash__fill {
        animation: none;
    }
}

.erp-web-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--erp-space-3);
    height: 100vh;
    height: 100dvh;
}

/* Tablet dashboard: 4 columns of fixed row height, 2 in reading order on a narrow window; the
   Syncfusion grid only while customizing, where a dragged button never scrolls the page. */
.erp-tablet-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 112px;
    gap: 12px;
}

.erp-tablet-grid__tile {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--erp-space-1);
    grid-column: var(--erp-tile-cell-column);
    grid-row: var(--erp-tile-cell-row);
    min-height: 44px;
    padding: var(--erp-space-3);
    border: none;
    border-radius: var(--erp-radius-large);
    background: var(--erp-tile-color);
    color: #ffffff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.erp-tablet-grid__tile:active {
    filter: brightness(0.9);
}

@media (max-width: 719px) {
    .erp-tablet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-tablet-grid__tile {
        grid-column: var(--erp-tile-span-column);
        grid-row: var(--erp-tile-span-row);
    }
}

.erp-tablet-dashboard--editing .e-panel,
.erp-tablet-dashboard--editing .e-resize {
    touch-action: none;
}

.erp-tablet-dashboard--editing .erp-tile__tools .erp-icon-button {
    min-width: 44px;
    height: 44px;
}

/* Deliveries: one card per delivery note under a heading per day, newest first. */
.erp-deliveries__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
}

.erp-deliveries__day {
    margin: var(--erp-space-3) 0 0;
    font-size: var(--erp-font-size);
    font-weight: 600;
    color: var(--erp-color-text-muted);
}

.erp-delivery-card {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    padding: var(--erp-space-3);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-delivery-card__header,
.erp-delivery-card__customer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-1) var(--erp-space-3);
    align-items: baseline;
}

.erp-delivery-card__number {
    font-weight: 600;
}

.erp-delivery-card__muted {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-delivery-card__lines {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.erp-delivery-card__lines li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--erp-space-3);
    padding-top: var(--erp-space-1);
    border-top: 1px solid var(--erp-color-border);
}

.erp-delivery-card__quantity {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.erp-delivery-card__remark {
    grid-column: 1 / -1;
    font-style: italic;
}

@media (max-width: 600px) {
    .erp-web-nav__label {
        display: none;
    }

    /* The two logos only: room for the menu. */
    .erp-web-topbar__title {
        margin-right: var(--erp-space-1);
    }
}

/* Company's current fiscal year, read-only. */
.erp-web-topbar__fiscal-year {
    display: inline-flex;
    align-items: center;
    gap: var(--erp-space-1);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
    white-space: nowrap;
}

/* Phone screens (orders entered step by step): one column, touch targets of at least 44 px,
   action buttons at the bottom within reach of the thumb. */
.erp-phone {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
    max-width: 640px;
    margin: 0 auto;
    padding: var(--erp-space-3) var(--erp-space-3) calc(76px + env(safe-area-inset-bottom));
}

.erp-phone__section {
    margin: var(--erp-space-2) 0 0;
    font-size: var(--erp-font-size);
    font-weight: 600;
    color: var(--erp-color-text-muted);
}

.erp-phone__title {
    margin: 0;
    font-size: var(--erp-font-size-title);
    font-weight: 600;
}

.erp-phone__subtitle,
.erp-phone__hint,
.erp-phone__empty {
    margin: 0;
    color: var(--erp-color-text-muted);
}

.erp-phone__empty {
    text-align: center;
    padding: var(--erp-space-3) 0;
}

.erp-phone__busy {
    display: flex;
    justify-content: center;
    padding: var(--erp-space-3);
}

.erp-phone__cards {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.erp-phone-card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-phone-card--draft {
    border-style: dashed;
}

.erp-phone-card.is-faulty {
    border-color: var(--erp-color-danger);
}

.erp-phone-card__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 56px;
    padding: var(--erp-space-2) var(--erp-space-3);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.erp-phone-card.is-static .erp-phone-card__main {
    cursor: default;
}

.erp-phone-card__title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.erp-phone-card__muted {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-phone-card__action {
    min-width: 52px;
    border: 0;
    border-left: 1px solid var(--erp-color-border);
    background: transparent;
    color: var(--erp-color-danger);
    cursor: pointer;
}

.erp-phone-input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: var(--erp-space-2) var(--erp-space-3);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
    background: var(--erp-color-surface);
    color: inherit;
    /* 16 px at least: iOS zooms into smaller fields. */
    font: inherit;
    font-size: max(16px, 1em);
}

textarea.erp-phone-input {
    resize: vertical;
}

.erp-phone-form {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
}

.erp-phone-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--erp-space-2);
}

.erp-phone-form__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-2);
}

.erp-phone-form__buttons .e-btn,
.erp-phone__wide,
.erp-phone__more {
    min-height: 44px;
}

.erp-phone__wide,
.erp-phone__more {
    width: 100%;
}

.erp-phone-field {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-1);
}

.erp-phone-field > span:first-child,
.erp-phone-summary__label {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-phone-check {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    min-height: 44px;
}

.erp-phone-check input {
    width: 22px;
    height: 22px;
}

.erp-phone-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-2);
}

/* Block, not flex: Safari lays a flex <details> out unreliably. */
.erp-phone-more {
    padding: var(--erp-space-2) 0;
    border-top: 1px solid var(--erp-color-border);
}

.erp-phone-more > summary {
    min-height: 44px;
    line-height: 44px;
    font-weight: 600;
    cursor: pointer;
}

.erp-phone-more > :not(summary) {
    margin-top: var(--erp-space-3);
}

.erp-phone__bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: var(--erp-space-2);
    padding: var(--erp-space-2) max(var(--erp-space-3), env(safe-area-inset-right)) calc(var(--erp-space-2) + env(safe-area-inset-bottom)) max(var(--erp-space-3), env(safe-area-inset-left));
    background: var(--erp-color-surface);
    border-top: 1px solid var(--erp-color-border);
}

.erp-phone__bottom .e-btn {
    flex: 1;
    min-height: 48px;
}

.erp-phone-wizard__header {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
}

.erp-phone-steps {
    display: flex;
    flex: 1;
    gap: var(--erp-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.erp-phone-steps > li {
    flex: 1;
    min-width: 0;
    padding-top: var(--erp-space-1);
    border-top: 3px solid var(--erp-color-border);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-phone-steps > li.is-done {
    border-top-color: var(--erp-color-accent);
}

.erp-phone-steps > li.is-current {
    border-top-color: var(--erp-color-accent);
    color: var(--erp-color-text);
    font-weight: 600;
}

.erp-phone-wizard__body {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
}

.erp-phone-tabs {
    display: flex;
    gap: var(--erp-space-1);
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-phone-tabs__tab {
    flex: 1;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--erp-color-text-muted);
    font: inherit;
    cursor: pointer;
}

.erp-phone-tabs__tab.is-current {
    color: var(--erp-color-text);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--erp-color-accent);
}

.erp-phone-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--erp-space-3);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.erp-phone-summary.is-static {
    cursor: default;
}

.erp-phone-summary .is-faulty {
    color: var(--erp-color-danger);
    font-weight: 600;
}

.erp-phone-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--erp-space-3);
    padding-top: var(--erp-space-6);
    text-align: center;
}

.erp-phone-done__icon {
    font-size: 48px;
    color: var(--erp-color-success);
}

/* Background photo (spec 032), set by BackgroundPhotoScreen or by background-photo-start.js before
   the app starts: "frosted" look, never on phones (shorter side under 600 px, as DeviceMode). A
   fixed layer rather than background-attachment: fixed, which iPadOS ignores. The top bar's blur
   sits on a layer of its own (on the bar, backdrop-filter would confine the full-window backdrop of
   its menu); page panels, which hold menus too, are translucent without blur. */
@media (min-width: 600px) and (min-height: 600px) {
    html.erp-photo-page body {
        background: transparent;
    }

    html.erp-photo-page body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background: var(--erp-photo-page) center / cover no-repeat;
    }

    html.erp-photo-page .erp-splash {
        background: transparent;
    }

    html.erp-photo-page .erp-splash__panel {
        padding: 32px 40px;
        border-radius: 18px;
        background: rgb(255 255 255 / 0.78);
        box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    html.erp-photo-page .erp-web-topbar {
        position: relative;
        z-index: 2;
        isolation: isolate;
        background: transparent;
        border-bottom-color: rgb(255 255 255 / 0.5);
    }

    html.erp-photo-page .erp-web-topbar::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgb(255 255 255 / 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    html.erp-photo-page .erp-web-content {
        box-sizing: border-box;
        padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }

    html.erp-photo-page .erp-web-content > .erp-page {
        box-sizing: border-box;
        min-height: 100%;
        border-radius: 14px;
        background: rgb(255 255 255 / 0.9);
        box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
    }

    /* Dashboard: no panel, the buttons float on the photo. */
    html.erp-photo-page .erp-web-content > .erp-tablet-dashboard {
        background: transparent;
        box-shadow: none;
    }

    html.erp-photo-page .erp-tablet-dashboard .erp-form__title {
        color: #fff;
        text-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
    }
}

/* Touch screens (iPad): every control at least 44 px high, grid rows easy to touch, and the
   dialogs full screen in portrait, where a centered dialog would leave no room. */
@media (pointer: coarse) {
    .e-btn,
    .erp-icon-button,
    .erp-tabs__tab,
    .e-input-group,
    .e-input-group.e-control-wrapper {
        min-height: 44px;
    }

    .erp-icon-button {
        min-width: 44px;
    }

    .e-grid .e-rowcell {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media (pointer: coarse) and (orientation: portrait) {
    .e-dialog.e-popup {
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0;
    }
}