/* 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 {
    margin-right: var(--erp-space-3);
    font-weight: 600;
}

.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);
}

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

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

.erp-web-home__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-3);
}

.erp-web-home__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--erp-space-2);
    width: 160px;
    height: 120px;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

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

.erp-web-home__tile .e-icons {
    font-size: 28px;
    color: var(--erp-color-accent);
}

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

/* 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;
}