/* ===================================
   Responsive Touch Interactions
   Touch-friendly button styles and interactions
   Requirements: 9.1, 9.2, 9.3, 9.4
   =================================== */

/* ===================================
   Touch Target Minimum Dimensions (44x44px)
   Requirement 9.1
   =================================== */

/* Base button touch targets */
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
}

/* Icon buttons touch targets */
.btn-icon {
    min-width: 44px;
    min-height: 44px;
    padding: 0.625rem;
}

/* Small buttons still meet minimum */
.btn-sm {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem 1rem;
}

/* Link buttons as touch targets */
a.btn {
    min-height: 44px;
    min-width: 44px;
}

/* Form submit buttons */
input[type="submit"],
input[type="button"],
button[type="submit"],
button[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Action buttons in tables */
.data-table .btn,
.data-table button,
.data-table a.btn {
    min-height: 44px;
    min-width: 44px;
}

/* Pagination buttons */
.pagination button,
.pagination a {
    min-height: 44px;
    min-width: 44px;
}

/* Modal buttons */
.modal-footer .btn,
.modal-footer button {
    min-height: 44px;
}

/* Form action buttons */
.form-actions .btn,
.form-actions button {
    min-height: 44px;
}

/* Dropdown toggle buttons */
.dropdown-toggle {
    min-height: 44px;
    min-width: 44px;
}

/* Close buttons */
.close,
.btn-close,
[aria-label="Close"] {
    min-height: 44px;
    min-width: 44px;
}

/* ===================================
   Touch Target Spacing (8px minimum)
   Requirement 9.2
   =================================== */

/* Button groups with adequate spacing */
.btn-group {
    display: flex;
    gap: 0.5rem; /* 8px minimum */
    flex-wrap: wrap;
}

.btn-group .btn {
    margin: 0;
}

/* Form action button spacing */
.form-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Modal footer button spacing */
.modal-footer {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Table action button spacing */
.data-table .actions,
.table-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Pagination button spacing */
.pagination {
    display: flex;
    gap: 0.5rem;
}

/* Toolbar button spacing */
.toolbar,
.button-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Quick actions spacing */
.quick-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Card action spacing */
.card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===================================
   Touch Feedback States
   Requirement 9.3
   =================================== */

/* Active state for all buttons */
.btn:active:not(:disabled) {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Primary button active state */
.btn-primary:active:not(:disabled) {
    background: var(--primary-gradient-hover);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* Secondary button active state */
.btn-secondary:active:not(:disabled) {
    background-color: var(--gray-300);
}

/* Success button active state */
.btn-success:active:not(:disabled) {
    background-color: #059669;
}

/* Danger button active state */
.btn-danger:active:not(:disabled) {
    background-color: #dc2626;
}

/* Warning button active state */
.btn-warning:active:not(:disabled) {
    background-color: #d97706;
}

/* Icon button active state */
.btn-icon:active:not(:disabled) {
    background-color: var(--gray-200);
    transform: scale(0.95);
}

/* Link button active state */
.btn-link:active:not(:disabled) {
    opacity: 0.7;
}

/* Outline button active state */
.btn-outline:active:not(:disabled) {
    background-color: rgba(102, 126, 234, 0.1);
}

/* ===================================
   Remove Hover-Dependent Interactions
   Requirement 9.4
   =================================== */

/* On touch devices, remove hover-only interactions */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover transforms that don't work on touch */
    .btn:hover:not(:disabled) {
        transform: none;
    }
    
    /* Remove hover box-shadow changes */
    .btn-primary:hover:not(:disabled) {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    
    /* Ensure active states work instead */
    .btn:active:not(:disabled) {
        transform: scale(0.98);
    }
    
    /* Remove hover-dependent tooltips */
    [data-tooltip]:hover::after {
        display: none;
    }
    
    /* Remove hover-dependent dropdowns - use click instead */
    .dropdown:hover .dropdown-menu {
        display: none;
    }
    
    /* Icon buttons on touch - show active state clearly */
    .btn-icon:active:not(:disabled) {
        background-color: var(--gray-200);
    }
}

/* ===================================
   Mobile-Specific Touch Enhancements
   =================================== */

@media (max-width: 767px) {
    /* Larger touch targets on mobile */
    .btn {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
    }
    
    .btn-icon {
        min-width: 48px;
        min-height: 48px;
        padding: 0.75rem;
    }
    
    /* Increase spacing on mobile */
    .btn-group,
    .form-actions,
    .modal-footer,
    .table-actions,
    .toolbar,
    .quick-actions,
    .card-actions {
        gap: 0.75rem; /* 12px on mobile */
    }
    
    /* Full-width buttons on mobile for easier tapping */
    .modal-footer .btn,
    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Stack button groups vertically on mobile */
    .btn-group-mobile-stack {
        flex-direction: column;
    }
    
    .btn-group-mobile-stack .btn {
        width: 100%;
    }
}

/* ===================================
   Tablet Touch Enhancements
   =================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Maintain good touch targets on tablets */
    .btn {
        min-height: 44px;
    }
    
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Horizontal layout for button groups on tablet */
    .modal-footer,
    .form-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .modal-footer .btn,
    .form-actions .btn {
        width: auto;
    }
}

/* ===================================
   Desktop - Preserve Hover States
   =================================== */

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    /* Desktop can use smaller buttons if needed */
    .btn-sm {
        min-height: 36px;
        min-width: auto;
        padding: 0.5rem 1rem;
    }
    
    /* Preserve hover effects on desktop */
    .btn:hover:not(:disabled) {
        transform: translateY(-2px);
    }
    
    .btn-primary:hover:not(:disabled) {
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    }
    
    /* Icon buttons can be smaller on desktop */
    .btn-icon {
        min-width: 36px;
        min-height: 36px;
        padding: 0.5rem;
    }
}

/* ===================================
   Accessibility - Focus States
   =================================== */

/* Ensure focus states are visible for keyboard navigation */
.btn:focus-visible {
    outline: 3px solid rgba(102, 126, 234, 0.5);
    outline-offset: 2px;
}

.btn-icon:focus-visible {
    outline: 3px solid rgba(102, 126, 234, 0.5);
    outline-offset: 2px;
}

/* ===================================
   Special Cases
   =================================== */

/* Floating action buttons */
.fab,
.btn-fab {
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    padding: 0;
}

/* Compact button groups (still meet minimum) */
.btn-group-compact .btn {
    min-width: 44px;
    padding: 0.625rem 1rem;
}

/* Icon-only buttons with labels */
.btn-icon-label {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
}

/* Toggle buttons */
.btn-toggle {
    min-height: 44px;
    min-width: 44px;
}

.btn-toggle:active {
    transform: scale(0.95);
}

/* Split buttons */
.btn-split {
    display: flex;
    gap: 1px;
}

.btn-split .btn {
    min-height: 44px;
}

.btn-split .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-split .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-width: 44px;
}

/* ===================================
   Print Styles
   =================================== */

@media print {
    .btn,
    .btn-icon,
    button {
        min-height: auto;
        min-width: auto;
    }
}