/**
 * Touch Target Size Improvements
 * Ensures all interactive elements meet WCAG 2.1 AAA standards (48x48px minimum)
 * Improves mobile usability and reduces accidental taps
 */

/* Global Touch Target Rules */
button,
a.btn,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.clickable,
.interactive {
    min-width: 48px;
    min-height: 48px;
    padding: 12px 20px;
}

/* Ensure adequate spacing between touch targets */
button + button,
.btn + .btn,
a + a {
    margin-left: 16px;
}

/* Vertical spacing */
button:not(:last-child),
.btn:not(:last-child) {
    margin-bottom: 12px;
}

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px; /* Prevents zoom on iOS */
}

select {
    min-height: 48px;
    padding: 12px 16px;
}

textarea {
    min-height: 96px; /* 2x minimum */
    padding: 12px 16px;
}

/* Checkbox and Radio Buttons */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    margin: 12px;
}

/* Labels for checkboxes/radios should be tappable */
label {
    cursor: pointer;
    display: inline-block;
    min-height: 48px;
    padding: 12px 8px;
    display: flex;
    align-items: center;
}

/* Icon Buttons */
.btn-icon,
.icon-button {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Navigation Links */
nav a,
.nav-link {
    min-height: 48px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
}

/* Card Touch Targets */
.card,
.child-card,
.game-card,
.stat-card {
    cursor: pointer;
    min-height: 96px; /* Larger targets for cards */
}

/* List Items */
li button,
li a {
    min-height: 48px;
    padding: 12px 16px;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Avatar Selectors */
.avatar-option,
.avatar-selector > * {
    min-width: 48px;
    min-height: 48px;
    padding: 8px;
    margin: 4px;
}

/* Modal Close Buttons */
.close-btn,
.modal-close,
[aria-label="close"] {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
}

/* Dropdown Items */
.dropdown-item,
.child-dropdown-item {
    min-height: 48px;
    padding: 12px 16px;
}

/* Tab Buttons */
.tab,
.period-tab,
.view-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 16px;
}

/* Social Media Icons */
.social-icon,
.share-button {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
}

/* Game Controls */
.game-button,
.game-control {
    min-width: 64px;
    min-height: 64px;
    padding: 16px;
}

/* Parent Gate (requires 3-second hold) */
.parent-gate-button {
    min-width: 80px;
    min-height: 80px;
    padding: 20px;
}

/* Increase spacing in button groups */
.button-group,
.btn-group,
.actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Vertical button groups */
.button-group-vertical,
.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Table Row Actions */
tr button,
tr a.btn {
    min-width: 40px; /* Slightly smaller in dense tables */
    min-height: 40px;
    padding: 8px;
    margin: 0 4px;
}

/* Switch/Toggle Elements */
.switch,
.toggle {
    min-width: 48px;
    min-height: 28px; /* Standard switch height */
}

.switch-label {
    min-height: 48px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Slider Controls */
input[type="range"] {
    min-height: 48px;
    padding: 16px 0;
}

/* Color Pickers */
input[type="color"] {
    min-width: 64px;
    min-height: 48px;
}

/* File Upload Buttons */
input[type="file"] {
    min-height: 48px;
    padding: 12px;
}

.file-upload-button {
    min-width: 48px;
    min-height: 48px;
    padding: 12px 20px;
}

/* Pagination */
.pagination button,
.pagination a {
    min-width: 48px;
    min-height: 48px;
    margin: 0 4px;
}

/* Breadcrumbs */
.breadcrumb a {
    min-height: 48px;
    padding: 12px 8px;
}

/* Accordion Headers */
.accordion-header,
.accordion-button {
    min-height: 48px;
    padding: 12px 16px;
}

/* Tags/Chips */
.tag,
.chip,
.badge-interactive {
    min-height: 32px; /* Smaller for tags, but still tappable */
    padding: 6px 12px;
    margin: 4px;
}

/* Remove Button (X) in tags */
.tag .remove,
.chip .close {
    min-width: 24px;
    min-height: 24px;
    padding: 4px;
    margin-left: 8px;
}

/* Search Suggestions */
.suggestion-item,
.autocomplete-item {
    min-height: 48px;
    padding: 12px 16px;
}

/* Context Menu Items */
.context-menu-item,
.menu-item {
    min-height: 48px;
    padding: 12px 20px;
}

/* Floating Action Buttons */
.fab,
.floating-action-button {
    min-width: 56px;
    min-height: 56px;
    padding: 16px;
}

/* Mini FAB */
.fab-mini {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
}

/* Calendar Date Cells */
.calendar-day,
.date-cell {
    min-width: 48px;
    min-height: 48px;
    padding: 8px;
}

/* Rating Stars */
.star,
.rating-star {
    min-width: 32px;
    min-height: 32px;
    padding: 4px;
    margin: 0 2px;
}

/* Stepper Buttons */
.stepper-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    min-width: 32px;
    min-height: 32px;
}

/* Mobile Specific Improvements */
@media (max-width: 768px) {
    /* Increase touch targets on mobile */
    button,
    .btn,
    a.btn {
        min-height: 52px;
        padding: 14px 24px;
    }

    /* Larger game buttons on mobile */
    .game-button,
    .game-control {
        min-width: 72px;
        min-height: 72px;
        padding: 20px;
    }

    /* More spacing between elements */
    button + button,
    .btn + .btn {
        margin-left: 20px;
    }

    /* Full-width buttons on small screens */
    .btn-block-mobile {
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 12px;
    }

    /* Increase dropdown item height */
    .dropdown-item,
    .child-dropdown-item {
        min-height: 56px;
        padding: 16px 20px;
    }

    /* Larger nav items */
    nav a,
    .nav-link {
        min-height: 56px;
        padding: 16px 20px;
    }
}

/* Tablet Specific (iPad, etc) */
@media (min-width: 769px) and (max-width: 1024px) {
    button,
    .btn {
        min-height: 50px;
    }
}

/* Touch Device Detection */
@media (hover: none) and (pointer: coarse) {
    /* On touch-only devices, increase all touch targets */
    button,
    .btn,
    a,
    input,
    select,
    textarea,
    .clickable {
        min-height: 52px;
    }

    /* Increase spacing */
    * + button,
    * + .btn {
        margin-left: 20px;
    }
}

/* Accessibility: Focus States */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Remove tap highlight on iOS */
button,
a,
input,
.clickable {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on buttons */
button,
.btn {
    user-select: none;
    -webkit-user-select: none;
}

/* Active States (visual feedback on tap) */
button:active,
.btn:active,
.clickable:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* Disabled State */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading State */
button.loading,
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Sticky Headers/Footers should have adequate touch targets */
.sticky-header button,
.sticky-footer button {
    min-height: 56px;
}

/* Bottom Navigation (Common in mobile apps) */
.bottom-nav a,
.bottom-nav button {
    min-height: 56px;
    min-width: 56px;
    padding: 8px;
}

/* Ensure adequate spacing around links in text */
p a,
span a,
div a:not(.btn) {
    padding: 4px 8px;
    margin: -4px -8px; /* Negative margin to preserve text flow */
}

/* Child-specific touch targets (games) */
.game-object,
.game-card,
.answer-button {
    min-width: 64px;
    min-height: 64px;
    padding: 16px;
    margin: 8px;
}

/* Ensure dropdown arrow is included in touch target */
select {
    padding-right: 40px; /* Space for arrow */
}

/* Avatar selector grid spacing */
.avatar-selector {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
}

/* Ensure modals have adequate close button size */
.modal .close-btn,
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    min-width: 48px;
    min-height: 48px;
    z-index: 10;
}

/* Print: Remove touch target adjustments */
@media print {
    button,
    .btn,
    input,
    select {
        min-height: auto;
        padding: 4px 8px;
    }
}