/* Small usability and look improvements that apply to every page (loaded after style.css, before dark.css). */

/* ---- phone: a slim app bar with the menu button, the page name and the logo, it stays on top while scrolling ---- */
.mobile-app-bar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 52px;
    margin: -1em -1em .9rem;
    padding: 0 .75rem 0 .35rem;
    background: color-mix(in srgb, var(--bg-color) 82%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--border-color);
}

.mobile-app-bar.d-none {
    display: none !important;
}

/* the impersonation bar of "Login as" is fixed above everything */
body:has(#impersonation-banner) .mobile-app-bar {
    top: 64px;
}

.mobile-app-bar-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-dark);
}

.mobile-app-bar-menu:active,
.mobile-app-bar-menu:hover {
    background: var(--surface-hover);
}

.mobile-app-bar-menu svg {
    width: 26px;
    height: 26px;
}

.mobile-app-bar-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-dark);
}

.mobile-app-bar-logo {
    height: 26px;
    width: auto;
    flex: none;
}

html[data-theme="dark"] .mobile-app-bar-logo {
    filter: invert(1);
}

/* ---- keyboard focus: a clear ring for keyboard users, none for mouse clicks ---- */
:where(a, button, .btn, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: none;
}

/* ---- money: digits of the same width, so amounts line up in columns ---- */
table td,
.balance-total,
.weekly-latest,
.tx-amount,
.wallet-local,
.wallet-usd {
    font-variant-numeric: tabular-nums;
}

/* dates and amounts in tables never break in the middle ("2026-\n09-\n28") */
#weekly-accounting-box td,
#exchange-rate-box td {
    white-space: nowrap;
}

/* ---- touch: no grey flash on tap, no double-tap zoom delay on buttons ---- */
a, button, .btn, label, summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* text selection in the AAlign tone */
::selection {
    background: rgba(59, 130, 246, .22);
}

/* ---- people who asked their system for less motion get none ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}