/* Public pages load their own styles. */
.fi-body {
    background-color: #f1f5ed;
}

.fi-sidebar,
.fi-sidebar-header {
    background-color: #eaf1e5;
}

.fi-topbar {
    background-color: #eaf1e5;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: #d7e6cc;
}

.dark .fi-body {
    background-color: #18251c;
}

.dark .fi-sidebar,
.dark .fi-sidebar-header {
    background-color: #1e2e24;
}

.dark .fi-topbar {
    background-color: #1e2e24;
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: #314c37;
}

.oase-save-bar[x-cloak] {
    display: none;
}

.oase-save-bar {
    position: sticky;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #a9b69f;
    border-radius: 0.75rem;
    background: #f4f8f0;
    color: #283a2a;
    box-shadow: 0 0.35rem 1.25rem #0002;
}

.oase-editor-color-picker {
    margin-block-end: 15rem;
}

.oase-user-name {
    max-width: min(12rem, 24vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 600;
}

.dark .oase-save-bar {
    border-color: #56664f;
    background: #223528;
    color: #f5f1e8;
}

.gallery-admin-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: .5rem; }
.gallery-admin-preview:focus-visible { outline: 3px solid #507d00; outline-offset: 3px; }

.oase-brand { display: flex; align-items: center; gap: .5rem; height: 100%; min-width: 0; font-size: 1rem; font-weight: 300; line-height: 1.2; }
.oase-brand img { width: 44px; height: 36px; flex-shrink: 0; object-fit: contain; }
.oase-brand > span { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.dark .oase-brand img { filter: invert(1); }
.oase-logout-form { margin: 0; flex-shrink: 0; }
.oase-logout-button { white-space: nowrap; }
@media (max-width: 640px) {
    .oase-logout-label { display: none; }
    .oase-logout-button { padding-inline: .5rem; }
    .oase-brand { font-size: .875rem; gap: .25rem; }
    .oase-brand img { width: 32px; height: 32px; }
    .oase-user-name { max-width: 5rem; }
}
@media (max-width: 480px) {
    .oase-user-name { display: none; }
}