/*
 * App shell: app bar, large page title, scroll area, tab bar and safe areas (PLAN.md §11.2, §11.3).
 * Colours come from tokens.css (main-app navigation bar and page colours). Phase 3 adds transitions,
 * the collapsing title, gestures and sheets.
 */

.app-shell {
    display: grid;
    grid-template-areas: "bar" "banner" "main" "tabs";
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: minmax(0, 1fr); /* never wider than the viewport, whatever the content */
    height: 100vh;
    height: 100dvh;
    background: var(--capture-color-bg);
}

/* App bar: the main app's navigation bar colours ------------------------ */

.app-bar {
    grid-area: bar;
    display: flex;
    align-items: center;
    gap: var(--spacing-extra-small);
    min-height: calc(var(--capture-app-bar-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(var(--capture-gutter), env(safe-area-inset-right)) 0
        max(var(--capture-gutter), env(safe-area-inset-left));
    background: var(--capture-color-bar);
    color: var(--capture-color-on-bar);
    user-select: none;
    -webkit-user-select: none;
}

.app-bar__logo {
    display: block;
    height: 22px;
    width: auto;
}

/* Small title: appears once the large title has scrolled away (app-shell controller). */
.app-bar__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: var(--size-subtitle);
    font-weight: var(--fontweight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity var(--animation-timing-fast),
        transform var(--animation-timing-fast);
}

.app-bar--collapsed .app-bar__title {
    opacity: 1;
    transform: none;
}

.app-bar__logo + .app-bar__title {
    margin-left: var(--spacing-small);
}

.app-bar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--capture-tap-target);
    min-height: var(--capture-tap-target);
    margin-left: calc(var(--spacing-medium) * -1);
    color: inherit;
    font-size: var(--size-subtitle);
}

.app-bar__back .icon {
    color: inherit;
    cursor: pointer;
}

.app-bar__back:active {
    opacity: 0.6;
}

.app-bar__actions {
    display: flex;
    align-items: center;
}

/* Installed on desktop with window-controls-overlay: keep the bar inside the title bar area. */
@media (display-mode: window-controls-overlay) {
    .app-bar {
        min-height: env(titlebar-area-height, var(--capture-app-bar-height));
        padding-top: 0;
        padding-left: calc(env(titlebar-area-x, 0px) + var(--capture-gutter));
        width: env(titlebar-area-width, 100%);
        -webkit-app-region: drag;
        app-region: drag;
    }

    .app-bar a,
    .app-bar button {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
}

/* Content --------------------------------------------------------------- */

.app-main {
    grid-area: main;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 max(var(--capture-gutter), env(safe-area-inset-right)) var(--capture-gutter)
        max(var(--capture-gutter), env(safe-area-inset-left));
}

/* Large page title in the main app's .pageheader h1 style (24px heading colour).
   `.app-main >` outranks the main app's h1:first-child margin reset. */
.app-main > .app-title {
    margin: var(--spacing-medium-large) 0 var(--spacing-medium);
    color: var(--capture-color-heading);
    font-size: var(--size-heading);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Tab bar --------------------------------------------------------------- */

.tab-bar {
    grid-area: tabs;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: calc(var(--capture-tab-bar-height) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top: 1px solid var(--capture-color-border);
    background: var(--capture-color-surface);
    user-select: none;
    -webkit-user-select: none;
}

.tab-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--capture-tab-bar-height);
    padding: 0;
    border: 0;
    background: none;
    color: var(--capture-color-text-secondary);
    font: inherit;
    font-size: var(--size-small);
    text-decoration: none;
    cursor: pointer;
}

.tab-bar__item .icon {
    color: inherit;
    font-size: 20px;
    cursor: inherit;
}

.tab-bar__item[aria-current='page'] {
    color: var(--capture-color-accent);
    font-weight: var(--fontweight-semibold);
}

/* The current tab uses the regular (heavier) Font Awesome weight, as the main app does for buttons. */
.tab-bar__item[aria-current='page'] .icon {
    font-family: 'Font Awesome Pro Regular' !important;
    font-weight: 400;
}

.tab-bar__item:active:not(:disabled) {
    opacity: 0.6;
}

.tab-bar__item:disabled {
    cursor: default;
    opacity: 0.4;
}

/* Pull-to-refresh (pull-to-refresh controller) ------------------------------ */

.pull-to-refresh {
    --pull: 0px;
    position: relative;
}

.pull-to-refresh > :not(.pull-to-refresh__indicator) {
    transform: translateY(var(--pull));
}

.pull-to-refresh:not(.pull-to-refresh--active) > :not(.pull-to-refresh__indicator) {
    transition: transform var(--animation-timing-fast);
}

.pull-to-refresh__indicator {
    position: absolute;
    top: calc(var(--pull) - 40px);
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    background: var(--capture-color-surface);
    box-shadow: var(--main-box-shadow);
    color: var(--capture-color-accent);
    opacity: 0;
    pointer-events: none;
}

.pull-to-refresh--active .pull-to-refresh__indicator,
.pull-to-refresh--refreshing .pull-to-refresh__indicator {
    opacity: 1;
}

.pull-to-refresh__indicator .icon {
    color: inherit;
    transform: rotate(calc(var(--pull) * 3));
}

.pull-to-refresh--armed .pull-to-refresh__indicator .icon {
    font-family: 'Font Awesome Pro Regular' !important;
    font-weight: 400;
}

.pull-to-refresh--refreshing .pull-to-refresh__indicator .icon {
    animation: capture-spin 0.8s linear infinite;
}

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

/* Update banner (update-banner controller), above the tab bar ---------------- */

.update-banner {
    position: fixed;
    z-index: var(--zindex-notification);
    right: max(var(--capture-gutter), env(safe-area-inset-right));
    bottom: calc(var(--capture-tab-bar-height) + env(safe-area-inset-bottom) + var(--spacing-small));
    left: max(var(--capture-gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-medium);
    padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-medium-large);
    border-radius: var(--border-radius-small);
    background: rgb(var(--background-navbar));
    color: rgb(var(--textcolor-navbar-link));
    box-shadow: var(--main-box-shadow);
}

.update-banner[hidden] {
    display: none;
}

/* Global "token no longer valid" banner (connection controller) ------------- */

.connection-banner {
    grid-area: banner;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-small);
    padding: var(--spacing-small) max(var(--capture-gutter), env(safe-area-inset-right)) var(--spacing-small)
        max(var(--capture-gutter), env(safe-area-inset-left));
    background: rgb(var(--background-warning));
    color: rgb(var(--textcolor-warning));
}

.connection-banner[hidden] {
    display: none;
}

.connection-banner .icon {
    margin-top: 0.2em;
    color: rgb(var(--icon-warning));
}

.connection-banner a {
    color: inherit;
    font-weight: var(--fontweight-semibold);
    text-decoration: underline;
}

/* Badge dot on a tab (Settings when the token is invalid) */
.tab-bar__icon {
    position: relative;
    display: inline-flex;
}

.tab-bar__badge {
    position: absolute;
    top: -2px;
    right: -6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--notification-dot-alert));
}

.tab-bar__badge[hidden] {
    display: none;
}

/* Sync status chip (PLAN.md §7.1): the main app's .labelbadge with signal colours, inside a 44px tap target. */
.sync-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--capture-tap-target);
    min-height: var(--capture-tap-target);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-app-region: no-drag;
}

.sync-chip[hidden] {
    display: none;
}

.sync-chip__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-extra-small);
    font-variant-numeric: tabular-nums;
}

.sync-chip__badge .icon {
    color: inherit;
    cursor: inherit;
}

.sync-chip__count[hidden],
.sync-chip__spinner[hidden],
.sync-chip__badge .icon[hidden] {
    display: none;
}

.sync-chip[data-tone='ok'] .sync-chip__badge {
    background: rgb(var(--background-success));
    color: rgb(var(--textcolor-success));
}

.sync-chip[data-tone='error'] .sync-chip__badge {
    background: rgb(var(--background-error));
    color: rgb(var(--textcolor-error));
}

.sync-chip[data-tone='warning'] .sync-chip__badge {
    background: rgb(var(--background-warning));
    color: rgb(var(--textcolor-warning));
}

.sync-chip[data-tone='offline'] .sync-chip__badge,
.sync-chip[data-tone='neutral'] .sync-chip__badge {
    background: rgb(var(--background-labelbadge));
    color: var(--capture-color-text-secondary);
}

.tab-bar__icon--spinning {
    animation: capture-spin 1s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .tab-bar__icon--spinning {
        animation: none;
    }
}

/* Connection icon in the app bar: connected (cloud) or offline (crossed-out cloud), in the navigation bar's text colour. */
.connection-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: var(--capture-tap-target);
    color: rgb(var(--textcolor-navbar-link));
}

.connection-indicator[hidden] {
    display: none;
}

.connection-indicator .icon {
    color: inherit;
    cursor: default;
}

/* Same colour in both states (warning yellow is unreadable on the navigation bar); the icon shape tells them apart. */