/* App palette (FE-7, FE-17). Fills with white text meet WCAG AA (>= 4.5:1).
   Surfaces and text follow Pico's light/dark theme, which tracks the OS
   setting unless <html data-theme> pins one. */
:root {
    --pwf-success: #1e7b45;
    --pwf-success-hover: #17643a;
    --pwf-success-text: #1e7b45;
    --pwf-danger: #c0392b;
    --pwf-danger-hover: #a93226;
    --pwf-danger-text: #b03a2e;
    --pwf-warning: #9a6200;
    --pwf-info: #1f6fa8;
    --pwf-info-text: #1f6fa8;
    --pwf-neutral: #5d6d7e;
    --pwf-neutral-hover: #4d5b69;
    --pwf-surface-muted: #f3f4f6;
    --pwf-surface-hover: #e9ecef;
    --pwf-highlight: #e3f2fd;
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pwf-success-text: #4cd787;
        --pwf-danger-text: #ff8a80;
        --pwf-info-text: #7cc0f0;
        --pwf-surface-muted: #1f2631;
        --pwf-surface-hover: #283140;
        --pwf-highlight: #16314a;
    }
}

[data-theme="dark"] {
    --pwf-success-text: #4cd787;
    --pwf-danger-text: #ff8a80;
    --pwf-info-text: #7cc0f0;
    --pwf-surface-muted: #1f2631;
    --pwf-surface-hover: #283140;
    --pwf-highlight: #16314a;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.htmx-indicator {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

.htmx-request button {
    opacity: 0.6;
    cursor: not-allowed;
    transition: opacity 0.2s ease;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

button {
    transition: opacity 0.2s ease;
}

/* Optimistic UI Styles */
.action-section {
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.optimistic-update {
    opacity: 0.7;
    transform: scale(0.98);
}

.action-section button {
    transition: all 0.2s ease;
}

.action-section button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(0.95);
}

#action-section {
    position: relative;
}

.optimistic-message {
    padding: 1rem;
    background-color: var(--pwf-surface-muted);
    border-left: 4px solid #3498db;
    border-radius: 4px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-out {
    animation: fadeOut 0.3s ease;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* SSE Connection Indicator Styles */
.sse-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 0.5rem;
    transition: background-color 0.3s ease;
}

.sse-indicator-connected {
    background-color: var(--pwf-success);
}

.sse-indicator-disconnected {
    background-color: var(--pwf-danger);
}

.sse-indicator-error {
    background-color: var(--pwf-danger);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Burn Card Toast Styles */
.burn-card-toast {
    background-color: rgba(243, 156, 18, 0.15);
    border-left: 4px solid #f39c12;
    color: var(--pico-color);
    font-weight: 500;
    animation: slideInFromTop 0.3s ease;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.burn-card-toast.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

/* Focus-visible styles for action buttons */
.action-section button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Badge class for non-interactive status indicators */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background-color: #6c757d;
}

.badge.secondary {
    background-color: var(--pwf-neutral-hover);
}

/* Compact site header */
.site-header {
    padding: 0 !important;
    margin: 0 !important;
}

/* Reduce main container vertical padding */
.site-header + div + main.container,
.site-header + main.container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* Site shell (FE-16): skip link, header nav, short brand on narrow screens */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-radius: var(--pico-border-radius);
}

.skip-link:focus {
    top: 0.5rem;
}

main:focus {
    outline: none;
}

.site-header nav {
    padding: 0.25rem 1rem;
}

.site-header .brand {
    font-size: 0.9rem;
}

.site-header .brand-short {
    display: none;
}

.site-header .nav-icons {
    gap: 0.25rem;
}

.site-header .nav-balance {
    font-size: 0.75rem;
}

.site-header .nav-logout {
    display: inline;
    margin: 0;
}

.site-header .nav-logout button {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

@media (max-width: 576px) {
    .site-header .brand-full {
        display: none;
    }

    .site-header .brand-short {
        display: inline;
    }
}

.site-header .nav-tab-label {
    display: none;
}

/* Phase 1: Mobile bottom thumb-zone tab bar on non-table screens & compact table shell */
@media (max-width: 767px) {
    body:not(.is-table-view) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    body:not(.is-table-view) .site-header .primary-nav-tabs {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0;
        padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom, 0px));
        background-color: var(--pico-card-background-color, #1f2631);
        border-top: 1px solid var(--pico-muted-border-color, rgba(128, 128, 128, 0.25));
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    }

    body:not(.is-table-view) .site-header .primary-nav-tabs li {
        flex: 1;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body:not(.is-table-view) .site-header .primary-nav-tabs a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.1rem;
        min-height: 44px;
        padding: 0.2rem 0.25rem;
        text-decoration: none;
        border-radius: 8px;
    }

    body:not(.is-table-view) .site-header .primary-nav-tabs .nav-tab-label {
        display: block;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.1;
        color: var(--pico-color);
    }

    body.is-table-view > footer {
        display: none;
    }

    body.is-table-view main.container {
        padding: 0.2rem 0.35rem calc(116px + env(safe-area-inset-bottom, 0px));
        max-width: 100%;
    }
}