[x-cloak] { display: none !important; }

/* Ensure <dialog> elements are hidden when not open (DaisyUI 5 base CSS missing dialog styles) */
dialog:not([open]) { display: none; }

/* === F-0001 fix: suppress UA default outline on programmatic-focus a11y targets.
   `[data-focus-after-swap]` divs receive tabindex="-1" + .focus() from app.js
   after HTMX swaps so screen-reader attention follows the swap (see app.js:691-708).
   The browser's default 2px blue focus outline rendered around the full-width
   wrapper div was reading as a stray "saturated blue border" against the warm
   earth-tone palette (visual-QA dogfood F-0001, 2026-05-12).
   These divs are NOT user-clickable focus targets, so suppressing the outline
   is correct a11y practice. */
[data-focus-after-swap]:focus,
[data-focus-after-swap]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ============================================================
   Inventory Ingestion - Custom Styles
   DaisyUI + Tailwind handles layout, navbar, cards, buttons.
   This file covers HTMX indicators, JS-rendered components,
   and legacy class compatibility for app.js renderers.
   ============================================================ */

/* === Fix: DaisyUI .menu sets overflow:hidden on <details> for collapsible submenus,
   which clips .dropdown content that needs to float above the page === */
.menu details.dropdown {
    overflow: visible !important;
}

/* === Active nav link emphasis === */
.menu a.active {
    font-weight: 600;
}

/* === HTMX Indicators === */
.htmx-indicator {
    display: none;
    color: oklch(var(--bc) / 0.6);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid oklch(var(--bc) / 0.2);
    border-top-color: oklch(var(--p));
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* === JS-Rendered Text Utilities === */
.text-muted {
    opacity: 0.6;
}

.text-mono {
    font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
    font-size: 0.8rem;
}

/* === JS-Rendered Badges (stateBadgeClass + search results) === */
.badge-ingested, .badge-info {
    background: oklch(0.93 0.05 230);
    color: oklch(0.4 0.12 230);
}

.badge-matched, .badge-success {
    background: oklch(0.93 0.05 145);
    color: oklch(0.35 0.12 145);
}

.badge-pending, .badge-warning {
    background: oklch(0.95 0.05 75);
    color: oklch(0.45 0.12 75);
}

.badge-error, .badge-danger {
    background: oklch(0.93 0.06 25);
    color: oklch(0.4 0.15 25);
}

.badge-verified, .badge-purple {
    background: oklch(0.93 0.05 290);
    color: oklch(0.4 0.15 290);
}

.badge-unknown {
    background: oklch(var(--bc) / 0.08);
    color: oklch(var(--bc) / 0.6);
}

.badge-invoice {
    background: oklch(0.93 0.05 230);
    color: oklch(0.4 0.12 230);
}

.badge-order {
    background: oklch(0.95 0.05 75);
    color: oklch(0.45 0.12 75);
}

.badge-transaction {
    background: oklch(0.93 0.05 290);
    color: oklch(0.4 0.15 290);
}

/* === HTMX Swap Transitions === */
.htmx-swapping {
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 150ms ease-in;
}

/* === Table Row Hover (skip zebra-striped tables to avoid conflict) === */
.table:not(.table-zebra) tbody tr:hover {
    background-color: oklch(var(--b2) / 0.5);
}

/* === Receive Success Flash Animation === */
.receive-success {
    animation: successFlash 0.6s ease-out;
}

@keyframes successFlash {
    0% { background: oklch(0.9 0.1 145); }
    100% { background: transparent; }
}

/* === Mobile Scroll Hints (gradient shadow on right edge of scrollable tables) === */
@media (max-width: 640px) {
    .card-body > .overflow-x-auto,
    .card-body.overflow-x-auto {
        background:
            linear-gradient(to right, oklch(var(--b1)) 30%, transparent),
            linear-gradient(to left, oklch(var(--b1)) 30%, transparent),
            linear-gradient(to right, oklch(var(--bc) / 0.12), transparent),
            linear-gradient(to left, oklch(var(--bc) / 0.12), transparent);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 1.5rem 100%, 1.5rem 100%, 0.75rem 100%, 0.75rem 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* === Mobile bottom navigation safe area === */
:root {
    --mobile-bottom-nav-height: 0px;
}

@media (max-width: 1023px) {
    :root {
        --mobile-bottom-nav-height: calc(5.25rem + env(safe-area-inset-bottom, 0px));
    }

    .mobile-content-safe {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 1rem);
    }

    .mobile-footer-safe {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 1.5rem);
    }

    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-fixed-above-nav {
        bottom: var(--mobile-bottom-nav-height);
    }

    .mobile-toast-above-nav {
        bottom: calc(var(--mobile-bottom-nav-height) + 1rem);
    }

    .mobile-fixed-action-spacer {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 5rem);
    }
}

/* === Batch Action Bar Mobile === */
@media (max-width: 640px) {
    #batch-bar .flex {
        flex-direction: column;
        align-items: stretch;
    }
    #batch-bar .flex > * {
        width: 100%;
    }
}

/* === Stats Grid Container (used as hx-target) === */
.stats-grid {
    margin-bottom: 1.5rem;
}

/* === WCAG 2.5.5 touch targets for coarse pointer devices === */
@media (pointer: coarse) {
    .btn-sm { min-height: 44px; }
    .btn-xs { min-height: 44px; min-width: 44px; }
    .checkbox-sm, .radio-sm { min-height: 44px; min-width: 44px; }
}