/* ═══════════════════════════════════════════════════════════════
   i-Bina Blazor — App base styles
   ═══════════════════════════════════════════════════════════════ */

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--ib-success);
    outline-offset: 1px;
}

.invalid {
    outline: 2px solid var(--ib-error);
    outline-offset: 1px;
}

#blazor-error-ui {
    background: var(--ib-warning-bg);
    border-top: 1px solid var(--ib-warning);
    bottom: var(--ib-footer-h);
    box-shadow: var(--ib-shadow-lg);
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 2000;
    font-size: var(--ib-text-sm);
    color: var(--ib-on-surface);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ib-on-surface-muted);
}

.blazor-error-boundary {
    background: var(--ib-error-bg);
    padding: 16px 16px 16px 48px;
    color: var(--ib-error);
    border-radius: var(--ib-radius);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

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

/* Loading screen */
.app-loading {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ib-space-5);
    background: var(--ib-surface);
}

.app-loading__mark {
    width: 48px;
    height: 48px;
    border: 3px solid var(--ib-outline-light);
    border-top-color: var(--ib-primary);
    border-right-color: var(--ib-secondary);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.06);
    animation: app-loading-spin 0.8s linear infinite;
}

.app-loading__text {
    color: var(--ib-on-surface-muted);
    font-size: var(--ib-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

@media (prefers-reduced-motion: reduce) {
    .app-loading__mark { animation: none; }
}

code {
    color: var(--ib-primary);
    background: var(--ib-primary-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Search highlight */
.search-highlight {
    background: rgba(224, 123, 57, 0.25);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

/* Legacy class aliases (public-nav / owner-nav-menu kept for app.css search styles) */
.public-nav .logo-image,
.owner-nav-menu .logo-image,
.ib-public-header .logo-image,
.ib-app-header .logo-image {
    width: 110px;
    height: auto;
    display: block;
}