/**
 * Mobile-First CSS Enhancements
 * Comprehensive mobile optimizations for FlatRate Pro
 */

/* ===== MOBILE-FIRST UTILITY CLASSES ===== */

/* Responsive text sizing utilities */
.text-mobile-xs { font-size: var(--text-xs); }
.text-mobile-sm { font-size: var(--text-sm); }
.text-mobile-base { font-size: var(--text-base); }
.text-mobile-lg { font-size: var(--text-lg); }
.text-mobile-xl { font-size: var(--text-xl); }

/* Mobile-specific visibility */
@media (max-width: 767px) {
    .mobile-hide { display: none !important; }
    .mobile-show { display: block !important; }
}

@media (min-width: 768px) {
    .desktop-hide { display: none !important; }
    .desktop-show { display: block !important; }
}

/* ===== HEADER & NAVIGATION OPTIMIZATIONS ===== */

@media (max-width: 767px) {
    /* Page headers - stack on mobile */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    /* Header title section */
    .page-header h1 {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.3 !important;
    }

    .page-header p {
        font-size: 0.875rem !important; /* 14px */
    }

    /* Header actions - stack buttons vertically on mobile */
    .page-header .flex.items-center.gap-3,
    .page-header .flex.items-center.gap-2 {
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    /* Make header buttons full width or half width on mobile */
    .page-header a,
    .page-header button {
        font-size: 0.875rem !important; /* 14px */
        padding: 0.625rem 1rem !important; /* 10px 16px */
        white-space: nowrap !important;
    }

    /* Hide user pill on very small screens */
    #current-user-pill {
        display: none !important;
    }

    /* Navigation links - make them smaller on mobile */
    nav a {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Top navigation bars should be sticky */
    nav.fixed {
        padding: 0.75rem 1rem !important;
    }

    nav.fixed .flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    /* Logo should be smaller on mobile */
    nav img[alt*="FlatRate"] {
        width: 2rem !important;
        height: 2rem !important;
    }

    /* Navigation menu items */
    nav .flex.items-center.space-x-4 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
}

/* ===== FORM OPTIMIZATIONS ===== */

@media (max-width: 767px) {
    /* Ensure all form labels are clearly visible */
    form label {
        font-size: var(--text-sm) !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }

    /* Form groups should stack with proper spacing */
    .form-group {
        margin-bottom: var(--spacing-md) !important;
    }

    /* Textarea specific */
    textarea {
        min-height: 100px !important;
        resize: vertical !important;
    }

    /* Select dropdowns */
    select {
        background-size: 1.25em !important;
        padding-right: 2.5rem !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }

    /* Checkbox and radio improvements */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px !important;
        min-height: 24px !important;
        margin-right: 0.75rem !important;
    }

    /* Helper text */
    .form-helper-text,
    .text-xs.text-gray-400,
    .text-xs.text-slate-400 {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
        margin-top: 0.25rem !important;
    }
}

/* ===== MODAL DIALOG OPTIMIZATIONS ===== */

@media (max-width: 767px) {
    /* Make modals feel more native on mobile - bottom sheet style */
    .modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .modal-content {
        border-radius: 1.25rem 1.25rem 0 0 !important; /* Bottom sheet style */
        margin: 0 !important;
        max-height: 92vh !important;
        width: 100% !important;
        max-width: 100% !important;
        animation: slideUpModal 0.3s ease-out !important;
        padding: 1.25rem !important;
    }

    @keyframes slideUpModal {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Add handle bar for bottom sheet */
    .modal-content::before {
        content: '';
        position: absolute;
        top: 0.75rem;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(148, 163, 184, 0.4);
        border-radius: 2px;
    }

    /* Modal titles - adjust for handle bar */
    .modal-content > h3:first-child,
    .modal-content h3[id*="modal-title"] {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding-right: 2.5rem !important;
    }

    /* Modal body - scrollable */
    .modal-body,
    #profile-modal-body,
    #goal-modal-body,
    .modal-content > div[id*="modal-body"] {
        overflow-y: auto !important;
        max-height: calc(92vh - 140px) !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Modal tabs - responsive */
    .modal-content nav.flex {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        margin-bottom: 1rem !important;
    }

    .modal-content nav.flex::-webkit-scrollbar {
        display: none !important;
    }

    .modal-content nav button {
        font-size: 0.875rem !important;
        padding: 0.625rem 1rem !important;
        white-space: nowrap !important;
        min-width: max-content !important;
    }

    /* Profile cards within modals - compact */
    .modal-content .bg-gray-700,
    .modal-content .bg-gray-800,
    .modal-content .pro-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        border-radius: 0.75rem !important;
    }

    /* Form grids in modals should stack */
    .modal-content .grid.grid-cols-2,
    .modal-content .grid.grid-cols-3,
    .modal-content .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Buttons in modals - full width and stacked */
    .modal-content .flex.justify-end,
    .modal-content .flex.space-x-3,
    .modal-content .flex.gap-2,
    .modal-content .flex.gap-3 {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-top: 1rem !important;
    }

    .modal-content .flex button,
    .modal-content button[type="submit"],
    .modal-content button[type="button"] {
        width: 100% !important;
        margin: 0 !important;
        min-height: 48px !important;
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
        border-radius: 0.75rem !important;
    }

    /* Form inputs in modals */
    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        font-size: 16px !important;
        padding: 0.75rem !important;
        border-radius: 0.75rem !important;
        min-height: 48px !important;
    }

    .modal-content textarea {
        min-height: 100px !important;
    }

    /* Labels in modals */
    .modal-content label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }

    /* Nested sections in modals */
    .modal-content .space-y-4 > * + * {
        margin-top: 1rem !important;
    }

    .modal-content .space-y-3 > * + * {
        margin-top: 0.75rem !important;
    }

    /* Profile list items */
    .modal-content #profile-list > div,
    .modal-content #certifications-list > div,
    .modal-content #training-events-list > div {
        padding: 0.875rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 0.75rem !important;
    }

    /* Goal settings sections */
    .modal-content .bg-gray-700 h4 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Close buttons - larger touch target */
    .modal-content button[id*="close"],
    .modal-content button[id*="cancel"] {
        min-height: 48px !important;
    }

    /* Helper text visibility */
    .modal-content .text-xs {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
        margin-top: 0.375rem !important;
    }

    /* Scrollable areas within modals */
    .modal-content .overflow-y-auto {
        max-height: 250px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Prevent body scroll when modal is open */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ===== TABLE RESPONSIVENESS ===== */

@media (max-width: 767px) {
    /* Make tables scrollable horizontally */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Or convert to card layout */
    .table-mobile-cards thead {
        display: none !important;
    }

    .table-mobile-cards tr {
        display: block !important;
        margin-bottom: var(--spacing-md) !important;
        border: 1px solid var(--card-border) !important;
        border-radius: 0.75rem !important;
        padding: var(--spacing-md) !important;
    }

    .table-mobile-cards td {
        display: block !important;
        text-align: left !important;
        padding: 0.5rem 0 !important;
    }

    .table-mobile-cards td:before {
        content: attr(data-label) ": " !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }
}

/* ===== CHART & VISUALIZATION OPTIMIZATIONS ===== */

@media (max-width: 767px) {
    /* Charts should be touch-friendly */
    canvas {
        max-width: 100% !important;
        height: auto !important;
        touch-action: pan-y !important;
    }

    /* Chart containers */
    .chart-container {
        position: relative !important;
        width: 100% !important;
        height: 250px !important;
        margin: var(--spacing-md) 0 !important;
    }

    /* Chart legends */
    .chart-legend {
        font-size: var(--text-xs) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--spacing-sm) !important;
    }
}

/* ===== NAVIGATION LINK IMPROVEMENTS ===== */

@media (max-width: 767px) {
    /* Make all navigation links thumb-friendly */
    nav a,
    nav button {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
    }

    /* Breadcrumbs */
    .breadcrumb {
        font-size: var(--text-sm) !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ===== LIST & CARD IMPROVEMENTS ===== */

@media (max-width: 767px) {
    /* Job log entries */
    .job-entry {
        border-radius: 0.75rem !important;
        margin-bottom: var(--spacing-md) !important;
        padding: var(--spacing-md) !important;
    }

    /* Card headers */
    .card-header,
    .pro-card h2,
    .pro-card h3 {
        font-size: var(--text-lg) !important;
        margin-bottom: var(--spacing-md) !important;
    }

    /* Card content */
    .card-body,
    .card-content {
        font-size: var(--text-base) !important;
        line-height: 1.5 !important;
    }

    /* List items */
    li {
        line-height: 1.6 !important;
        margin-bottom: 0.5rem !important;
    }

    ul, ol {
        padding-left: 1.25rem !important;
    }
}

/* ===== IMAGE & MEDIA OPTIMIZATIONS ===== */

@media (max-width: 767px) {
    /* Ensure images don't overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Avatar images */
    .avatar,
    .member-avatar {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* Logo images */
    .logo img {
        max-height: 3rem !important;
    }
}

/* ===== NOTIFICATION & TOAST IMPROVEMENTS ===== */

@media (max-width: 767px) {
    /* Toasts should appear above bottom nav */
    .toast,
    .notification {
        bottom: 90px !important; /* Above bottom nav */
        left: var(--spacing-sm) !important;
        right: var(--spacing-sm) !important;
        width: auto !important;
        max-width: 100% !important;
        font-size: var(--text-sm) !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

@media (max-width: 767px) {
    /* Focus states more prominent on mobile */
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid var(--primary-blue-light) !important;
        outline-offset: 2px !important;
    }

    /* Active states for touch feedback */
    button:active,
    a:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
}

/* ===== UTILITY SPACING CLASSES ===== */

@media (max-width: 767px) {
    /* Mobile-specific spacing utilities */
    .mobile-mt-0 { margin-top: 0 !important; }
    .mobile-mt-1 { margin-top: var(--spacing-xs) !important; }
    .mobile-mt-2 { margin-top: var(--spacing-sm) !important; }
    .mobile-mt-3 { margin-top: var(--spacing-md) !important; }
    .mobile-mt-4 { margin-top: var(--spacing-lg) !important; }

    .mobile-mb-0 { margin-bottom: 0 !important; }
    .mobile-mb-1 { margin-bottom: var(--spacing-xs) !important; }
    .mobile-mb-2 { margin-bottom: var(--spacing-sm) !important; }
    .mobile-mb-3 { margin-bottom: var(--spacing-md) !important; }
    .mobile-mb-4 { margin-bottom: var(--spacing-lg) !important; }

    .mobile-p-0 { padding: 0 !important; }
    .mobile-p-1 { padding: var(--spacing-xs) !important; }
    .mobile-p-2 { padding: var(--spacing-sm) !important; }
    .mobile-p-3 { padding: var(--spacing-md) !important; }
    .mobile-p-4 { padding: var(--spacing-lg) !important; }
}

/* ===== LOADING STATES ===== */

@media (max-width: 767px) {
    /* Spinners and loading states */
    .spinner,
    .loading {
        width: 24px !important;
        height: 24px !important;
    }

    /* Skeleton loaders */
    .skeleton {
        border-radius: 0.5rem !important;
        margin-bottom: var(--spacing-sm) !important;
    }
}

/* ===== PRINT OPTIMIZATIONS (MOBILE) ===== */

@media print {
    /* Hide mobile-specific UI elements when printing */
    .bottom-nav,
    .fab,
    .scroll-top,
    .mobile-menu,
    .mobile-menu-overlay,
    .section-indicator {
        display: none !important;
    }

    /* Ensure content is readable when printed from mobile */
    body {
        padding-bottom: 0 !important;
        font-size: 12pt !important;
    }

    .pro-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}

/* ===== VOICE INPUT UX ENHANCEMENTS ===== */

/* Voice Recording Banner States */
#voice-recording-banner {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(100, 116, 139, 0.3);
    backdrop-filter: blur(8px);
}

#voice-recording-banner.recording {
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.2) 0%, rgba(153, 27, 27, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.5);
    animation: bannerPulse 2s ease-in-out infinite;
}

#voice-recording-banner.transcribing {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.5);
}

#voice-recording-banner.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.1) 100%);
    border-color: rgba(34, 197, 94, 0.5);
}

#voice-recording-banner.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Pulsing Ring Animation for Voice Button */
#voice-pulse-ring {
    pointer-events: none;
    animation: pulsRing 1.5s ease-out infinite;
}

@keyframes pulsRing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes bannerPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.2);
    }
}

/* Voice Button States */
#voice-to-text-btn.recording {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

#voice-to-text-btn.recording #voice-icon {
    color: #ef4444 !important;
}

#voice-to-text-btn.transcribing {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

#voice-to-text-btn.success {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
}

#voice-to-text-btn.success #voice-icon {
    color: #22c55e !important;
}

/* Recording Timer */
#recording-timer {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* Stop Recording Button Hover Effect */
#stop-recording-btn {
    transition: all 0.2s ease;
}

#stop-recording-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: scale(1.05);
}

#stop-recording-btn:active {
    transform: scale(0.95);
}

/* Undo Button */
#undo-voice-btn {
    transition: all 0.2s ease;
}

#undo-voice-btn:hover {
    background: rgba(71, 85, 105, 0.8);
    transform: translateX(-2px);
}

#undo-voice-btn:active {
    transform: scale(0.95);
}

/* Mobile Optimizations for Voice UX */
@media (max-width: 767px) {
    #voice-recording-banner {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    #recording-timer {
        font-size: 0.875rem !important;
    }
    
    #stop-recording-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    #undo-voice-btn {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Increase touch target for voice button on mobile */
    #voice-to-text-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* Success checkmark animation */
@keyframes checkmarkPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#banner-success svg {
    animation: checkmarkPop 0.4s ease-out;
}