.base {
    overflow-x: clip;
}

.base__container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    box-sizing: border-box;
    transition: .25s ease-in-out;
    background-color: var(--color-olympia-canvas);
}

.base__header {
    position: fixed;
    top: 0;
    padding-top: env(safe-area-inset-top);
    z-index: 40;
    width: 100%;
    background-color: var(--color-olympia-canvas);
}


.base__overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .25s ease;
    background-color: var(--color-gray-900);
    z-index: 50;

}

.base__content-container {
    display: flex;
    justify-content: center;
    flex: 1;
    width: 100%;
    margin-top: calc(var(--dim-mobile-header-height) + env(safe-area-inset-top));
}

/*
 * Management sidebar — full-viewport-height fixed rail on lg+ that the header
 * and content shift right of via padding on `.base__container--has-sidebar`.
 * Collapsed state is driven by Alpine on `.base__container`; the rail width
 * animates via the modifier class so labels ease out without a layout flash.
 */
.base__sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .base__sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 256px;
        z-index: 30;
        border-right: solid 1px var(--color-olympia-canvas-border);
        background-color: var(--color-olympia-canvas);
        overflow: hidden;
        overscroll-behavior: contain;
        transition: width .2s ease-in-out;
    }

    .base__container--has-sidebar {
        padding-left: 256px;
        transition: padding-left .2s ease-in-out;
        /* Admin content fills the available width; member-facing pages keep the 1046px default. */
        --dim-max-width: none;
    }

    /*
     * Fill-viewport layout opts in via a `.fill-viewport` marker on the page: lock the
     * container to the viewport so an inner region owns the scroll (lists, timeline,
     * leaderboards). Pages without the marker fall back to normal page scroll.
     */
    .base__container--has-sidebar:has(.fill-viewport) {
        height: 100vh;
        overflow: hidden;
    }

    /* Sidebar owns the community identity and primary nav, so the top header is redundant on lg+. */
    .base__container--has-sidebar > .base__header {
        display: none;
    }

    .base__container--sidebar-collapsed .base__sidebar {
        width: 64px;
    }

    .base__container--sidebar-collapsed {
        padding-left: 64px;
    }

    .base__container--sidebar-collapsed .base-sidebar__label {
        display: none !important;
    }

    /* Collapsed-only chrome — shown only when the rail is collapsed (lg+). */
    .base-sidebar__collapsed-only {
        display: none;
    }

    .base__container--sidebar-collapsed .base-sidebar__collapsed-only {
        display: inline-flex;
    }

    /*
     * Sidebar Flowbite tooltips — Popper positions them globally, but we only want them
     * to fire when the rail is collapsed (labels are visible otherwise). When the rail
     * is expanded, force the tooltip to stay hidden even if Flowbite tries to show it.
     */
    .base__container--has-sidebar:not(.base__container--sidebar-collapsed) .sidebar-tooltip {
        display: none !important;
    }

    /* Centre remaining icons when the rail is collapsed — labels are gone, so left-aligned chrome would look uneven. */
    .base__container--sidebar-collapsed .base-sidebar a,
    .base__container--sidebar-collapsed .base-sidebar button {
        justify-content: center;
    }

    /*
     * Admin chain stretches to viewport height so list cards (and any inner flex-1)
     * extend to the bottom. Only the explicit wrappers in the chain are flexed.
     * Gated on :has(.fill-viewport) so non-opted pages keep normal page scrolling.
     */
    .base__container--has-sidebar:has(.fill-viewport) .base__content-container,
    .base__container--has-sidebar:has(.fill-viewport) .base__content-container > div,
    .base__container--has-sidebar:has(.fill-viewport) .base__content-container main,
    .base__container--has-sidebar:has(.fill-viewport) .communities,
    .base__container--has-sidebar:has(.fill-viewport) .communities__content {
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        min-height: 0;
    }

    /*
     * Breathing room between the pill-tab section and the outer card on desktop.
     * Scoped to non-empty section-tabs so pages without tabs don't gain extra top space.
     */
    .base__container--has-sidebar .communities__section-tabs:has(*) {
        margin-bottom: 1rem;
    }

    /*
     * Per-page wrappers inside `.communities__content` typically use `mx-auto max-w-[...]`.
     * In a flex-column parent, auto-margins override stretch and collapse the child to its
     * content width (calendar / dashboard look "mobile-style"). Force 100% width so the
     * wrapper fills the available space — the max-width cap is `none` in admin anyway.
     */
    .base__container--has-sidebar:has(.fill-viewport) .communities__content > * {
        width: 100%;
        min-height: 0;
    }

    /*
     * Lists inside the admin card scroll within the card (not the page). The card and
     * any flex-column wrappers between it and the list need min-height: 0 to allow the
     * scroll surface to shrink-fit the available space.
     */
    .base__container--has-sidebar .common-list-card,
    .base__container--has-sidebar .common-list-card .flex.flex-col {
        min-height: 0;
    }
    .base__container--has-sidebar .common-list {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.base__content {
    flex: 1;
    max-width: var(--dim-max-width);
    width: 100%; /* Ensure the content stretches fully */
    overflow-x: auto; /* Enable scrolling on smaller devices */
}

/* --break-tablet-large */
@media (min-width: 240px) {
    .base__content {
        padding: 16px;
        display: block; /* Disable flex on mobile */
    }
}

/* --break-screen-small */
@media (min-width: 1024px) {
    .base__header {
        position: initial;
        top: initial;
        width: initial;
        padding-top: initial;
        background-color: initial;
    }

    .base__content-container {
        margin-top: initial;
    }
}

/*
 * Header
 */

.base-header {
    display: flex;
    align-items: center;
    height: var(--dim-mobile-header-height);
    border-bottom: solid 1px var(--color-olympia-canvas-border);
    padding: 6px 16px;
    background-color: var(--color-olympia-canvas);
}

.base-header__button {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.base-header__button--disabled {
    cursor: default;
}

.base-header__button--disabled span {
    display: flex;
    width: 24px;
    height: 24px;
}

.base-header__button[data-position="left"] {
    padding-left: 16px;
}

.base-header__logo {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: 22px;
}

.base-header__logo #logo:not(.hidden) {
    display: inline-flex;
}

.base-header__nav {
    display: none;
}

.base-header__user {
    display: none;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}


.base-header__user-avatar {
    cursor: pointer;
}

.base-header__user-avatar img {
    display: block;
    width: var(--dim-list-item-image-width);
    height: var(--dim-list-item-image-width);
    border-radius: 50%;
    object-fit: cover;
}

/* --break-screen-tablet */
@media (min-width: 480px) {
    .base-header {
        height: initial;
        padding: 10px 32px 10px 32px;
    }
}

/* --break-screen-tablet */
@media (min-width: 768px) {
    .base-header {
        height: initial;
        padding: 10px 32px 10px 32px;
    }
}

/* --break-screen-small */
@media (min-width: 1024px) {
    .base-header {
        height: initial;
        padding: 10px 32px 10px 32px;
    }

    .base-header__button {
        display: none;
    }

    .base-header__logo {
        justify-content: flex-start;
    }

    .base-header__nav {
        display: flex;
        align-items: center;
        padding-left: 24px;
        font-family: var(--font-sans);
        font-size: var(--text-sm);
    }

    .base-header__nav ul {
        display: flex;
        flex-direction: row;
    }

    .base-header__nav li:not(:first-child) {
        margin-left: 12px;
    }

    .base-header__nav li {
        padding: 8px 14px;
        border-radius: 9999px;
        transition: all 0.15s ease;
    }

    .base-header__nav li:hover,
    .base-header__nav-item--active {
        background-color: var(--color-olympia-canvas-selected);
    }

    .base-header__nav li:hover > a,
    .base-header__nav-item--active > a {
        color: var(--color-olympia-ink-900) !important;
    }

    .base-header__nav li a {
        color: var(--color-olympia-ink-500);
    }

    .base-header__user {
        display: flex;
    }
}

/*
 * Drawers
 */

.base__drawer {
    position: fixed;
    padding-top: env(safe-area-inset-top);
    width: var(--dim-drawer-width);
    height: 100%;
    box-sizing: border-box;
    transition: .25s ease-in-out;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 60;
    background: var(--color-olympia-canvas);
}

.safe-area-pt {
    padding-top: max(1rem, env(safe-area-inset-top));
}

.safe-area-pb {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.base__drawer[data-position="left"] {
    left: 0;
    transform: translateX(calc(-1 * var(--dim-drawer-width)));
}

.base__drawer[data-position="right"] {
    right: 0;
    transform: translateX(var(--dim-drawer-width));
}

.base__drawer--open {
    transform: translateX(0) !important;
}

/* >>> Right Drawer Content <<< */

.base-drawer-right {
    margin-top: 8px;
}

.base-drawer-right__avatar {
    display: flex;
}

.base-drawer-right__avatar img {
    display: block;
    width: var(--dim-list-item-image-width);
    height: var(--dim-list-item-image-width);
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

/*
 * Footer
 */

.base-footer {
    background-color: var(--color-olympia-canvas);
}

.base-footer__bottom-navigation {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 10;
    background-color: var(--color-olympia-canvas);
    border-top: solid 1px var(--color-olympia-canvas-border);
}

@media (min-width: 1024px) {
    .base-footer__bottom-navigation {
        display: none;
    }
}

/*
* Animations
*/
@keyframes rotate-horizontal {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.animate-rotate-horizontal {
  animation: rotate-horizontal 1s ease-in-out;
}

/* Cross-fade transition between pages */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
}