/**
 * Mobile Touch Targets - WCAG 2.1 AAA Compliant
 *
 * Ensures all interactive elements meet minimum touch target sizes:
 * - Buttons/Links: 44x44px minimum (WCAG AAA)
 * - Inputs: 48px height to prevent iOS auto-zoom
 * - Font size: 16px minimum on inputs to prevent auto-zoom
 *
 * Mobile-first approach: defaults apply to mobile, overrides for larger screens.
 * Uses :where() to avoid specificity conflicts with existing styles.
 */

/* ========================================
   BUTTONS & LINKS - WCAG AAA (44x44px)
   ======================================== */

:where(
    button,
    a[href],
    [role="button"],
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
) {
    min-height: 44px;
    /* min-width removed - only for icon-only buttons below */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon-only buttons need explicit dimensions */
:where(
    button:only-child,
    [role="button"]:only-child,
    .btn-icon,
    .icon-btn,
    button[class*="icon"],
    button[aria-label]
) {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
}

/* ========================================
   FORM INPUTS - iOS Auto-zoom Prevention
   ======================================== */

:where(
    input[type="text"]:not([class*="pl-"]),
    input[type="email"]:not([class*="pl-"]),
    input[type="password"]:not([class*="pl-"]),
    input[type="number"]:not([class*="pl-"]),
    input[type="tel"]:not([class*="pl-"]),
    input[type="url"]:not([class*="pl-"]),
    input[type="search"]:not([class*="pl-"]),
    input[type="date"]:not([class*="pl-"]),
    input[type="time"]:not([class*="pl-"]),
    input[type="datetime-local"]:not([class*="pl-"]),
    input[type="month"]:not([class*="pl-"]),
    input[type="week"]:not([class*="pl-"]),
    input:not([type]):not([class*="pl-"]),
    select,
    textarea
) {
    min-height: 48px;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px 16px;
}

/* Textarea can grow taller but must start at 48px */
:where(textarea) {
    min-height: 48px;
    resize: vertical;
}

/* ========================================
   CHECKBOXES & RADIOS - 48px Touch Targets
   ======================================== */

/* Wrap checkboxes/radios in clickable containers */
:where(input[type="checkbox"]),
:where(input[type="radio"]) {
    min-height: 48px;
    min-width: 48px;
    /* Ensure visible checkbox/radio is properly sized */
    width: 20px;
    height: 20px;
    margin: 14px;
}

/* Label wrapper for checkbox/radio groups */
:where(label:has(input[type="checkbox"])),
:where(label:has(input[type="radio"])) {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    cursor: pointer;
}

/* ========================================
   DROPDOWN MENUS & SELECTS
   ======================================== */

:where(select) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 44px; /* Space for arrow icon */
}

/* ========================================
   TABLET & DESKTOP OVERRIDES
   ======================================== */

@media (min-width: 768px) {
    /* Reduce padding on larger screens while maintaining touch targets */
    :where(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="tel"],
        input[type="url"],
        input[type="search"],
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="week"],
        input:not([type]),
        select,
        textarea
    ) {
        /* Keep 48px for consistency but can reduce padding */
        min-height: 48px;
    }

    /* Icon buttons can be slightly more compact on desktop */
    :where(
        button:only-child,
        [role="button"]:only-child,
        .btn-icon,
        .icon-btn
    ) {
        min-height: 40px;
        min-width: 40px;
    }
}

/* ========================================
   SPECIAL CASES & EXCLUSIONS
   ======================================== */

/* Pagination controls maintain touch targets */
:where(.pagination a, .pagination button, .pagination span) {
    min-height: 44px;
    min-width: 44px;
}

/* Modal close buttons */
:where(.modal-close, [data-dismiss="modal"], [aria-label="Close"]) {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile bottom navigation */
:where(.bottom-nav a, .bottom-nav button) {
    min-height: 48px;
    min-width: 48px;
}

/* ========================================
   ACCESSIBILITY HELPERS
   ======================================== */

/* Ensure focus indicators meet contrast requirements */
:where(
    button,
    a,
    input,
    select,
    textarea
):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Ensure touch targets have spacing between them (exclude grid items) */
:where(
    button + button,
    .btn + .btn,
    a + a,
    input + input
):not(:where(.grid > *)) {
    margin-left: 8px;
}

/* ========================================
   SAFEGUARDS FOR EXISTING STYLES
   ======================================== */

/* Use !important sparingly - only for critical accessibility */
:where([role="button"]:not(.btn)):not([class*="button"]) {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Allow w-full buttons to be full-width (override inline-flex) */
/* Exclude buttons with responsive hidden classes (lg:hidden, lg:!hidden, md:hidden, etc) */
button.w-full:not([class*="hidden"]),
a.w-full:not(.bankroll-card),
[role="button"].w-full:not([class*="hidden"]) {
    display: flex !important;
    width: 100% !important;
}

/* Prevent text truncation in buttons */
:where(button, a, [role="button"]) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure long text wraps properly */
:where(button, a, [role="button"]) {
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}