/* SFQA custom styles — supplement Tailwind */

/* Alpine.js: hide elements until initialized (prevents FOUC) */
[x-cloak] { display: none !important; }

/* Large touch targets for factory use (minimum 44px per WCAG) */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Offline indicator */
body.offline::after {
    content: 'OFFLINE';
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: #1c1917;
    padding: 2px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 0 0 6px 6px;
    z-index: 9999;
}

/* PASS/FAIL large buttons */
.btn-pass {
    background: #16a34a;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    transition: background-color 150ms;
}
.btn-pass:hover { background: #15803d; }
.btn-pass:active { background: #166534; }

.btn-fail {
    background: #dc2626;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    transition: background-color 150ms;
}
.btn-fail:hover { background: #b91c1c; }
.btn-fail:active { background: #991b1b; }

/* Measurement input — large text for tablet */
.measurement-input {
    font-size: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* HTMX loading indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}

/* Smooth page transitions via HTMX */
.htmx-swapping {
    opacity: 0;
    transition: opacity 100ms;
}