/* Admin Panel Mobile Responsive Styles */
/* This file contains mobile-specific styles for the admin panel to provide a native app-like experience */

/* ============================================
   MOBILE-FIRST BASE STYLES
   ============================================ */

/* Apply mobile styles only on devices smaller than 768px */
@media (max-width: 767px) {

    /* ============================================
       SAFE AREA SUPPORT (for notched devices)
       ============================================ */
    .safe-area-top {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .safe-area-left {
        padding-left: max(1rem, env(safe-area-inset-left));
    }

    .safe-area-right {
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* ============================================
       TOUCH-OPTIMIZED INTERACTIVE ELEMENTS
       ============================================ */

    /* Minimum touch target size: 44x44px (Apple HIG) */
    button,
    .btn,
    a[role="button"],
    input[type="submit"],
    input[type="button"],
    select {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }

    /* Larger tap targets for icon buttons */
    button svg,
    .btn svg {
        pointer-events: none;
        /* Ensure SVG doesn't interfere with button clicks */
    }

    /* ============================================
       FORM INPUTS (prevent iOS zoom)
       ============================================ */

    /* iOS zooms on inputs smaller than 16px */
    input,
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px;
    }

    /* Ensure input labels are readable */
    label {
        font-size: 12px;
    }

    /* ============================================
       MODALS - FULL SCREEN ON MOBILE
       ============================================ */

    .modal {
        padding: 0 !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Modal scrollable body */
    .modal-content>div[class*="overflow-y-auto"] {
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    /* ============================================
       TABLE TO CARD CONVERSION
       ============================================ */

    /* Hide table headers on mobile */
    .table-container table thead {
        display: none;
    }

    /* Convert table to card layout */
    .table-container table,
    .table-container thead,
    .table-container tbody,
    .table-container th,
    .table-container td,
    .table-container tr {
        display: block;
        width: 100%;
        min-width: 0 !important;
        /* Override min-w-[800px] */
        box-sizing: border-box;
    }

    .table-container tr {
        background: white;
        border-radius: 1rem;
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
    }

    .table-container td {
        display: block;
        text-align: left;
        padding: 0.5rem 0;
        border: none;
    }

    /* Add labels before each cell */
    .table-container td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        color: #94a3b8;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }

    /* Last cell (usually actions) should be full width */
    .table-container td:last-child {
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 1px solid #e5e7eb;
    }

    /* ============================================
       GRID LAYOUTS - STACK ON MOBILE
       ============================================ */

    /* Force single column for all grids on mobile */
    .grid[class*="grid-cols-2"],
    .grid[class*="grid-cols-3"],
    .grid[class*="grid-cols-4"] {
        grid-template-columns: 1fr !important;
    }

    /* Settings page specific grids */
    #tab-settings .grid {
        grid-template-columns: 1fr !important;
    }

    /* ============================================
       SIDEBAR IMPROVEMENTS
       ============================================ */

    #sidebar {
        width: 85vw !important;
        max-width: 320px;
    }

    /* Overlay should cover entire screen */
    #sidebar-overlay {
        z-index: 25;
    }

    /* Navigation items larger for touch */
    .nav-tab {
        padding: 1rem !important;
        font-size: 11px !important;
    }

    /* ============================================
       HEADER OPTIMIZATIONS
       ============================================ */

    header {
        padding: 1rem !important;
    }

    #page-title {
        font-size: 1.5rem !important;
    }

    #page-subtitle {
        font-size: 0.75rem !important;
    }

    /* ============================================
       CONTENT AREA SPACING
       ============================================ */

    /* Reduce padding on mobile for more content space */
    main>div[class*="p-"] {
        padding: 1rem !important;
        padding-bottom: 5rem !important;
        /* Extra padding for bottom spacing */
    }

    /* ============================================
       VEHICLE CARDS
       ============================================ */

    #vehicles-grid {
        gap: 1rem !important;
    }

    /* Stack vehicle action buttons vertically */
    #vehicles-grid .flex.gap-2 {
        flex-direction: column;
        gap: 0.5rem;
    }

    #vehicles-grid button,
    #vehicles-grid .flex.gap-2>* {
        width: 100% !important;
        justify-content: center;
    }

    /* ============================================
       VEHICLE MODAL MOBILE OPTIMIZATIONS
       ============================================ */

    #vehicle-modal .modal-content {
        padding: 0 !important;
    }

    /* Modal header - fixed at top */
    #vehicle-modal .px-8.py-6.border-b {
        position: sticky;
        top: 0;
        z-index: 30;
        padding: 1rem !important;
        background: white;
    }

    /* Modal body - scrollable */
    #vehicle-modal .overflow-y-auto {
        padding: 1rem !important;
    }

    /* Modal footer - fixed at bottom */
    #vehicle-modal .px-8.py-6.border-t {
        position: sticky;
        bottom: 0;
        padding: 1rem !important;
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    /* Form sections spacing */
    #vehicle-form .space-y-4 {
        margin-bottom: 1.5rem;
    }

    /* Image preview grid - 2 columns on mobile */
    #vehicle-images-preview {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding: 1rem !important;
    }

    /* ============================================
       OFFER DETAIL MODAL
       ============================================ */

    #offer-detail-modal .grid[class*="grid-cols-"] {
        grid-template-columns: 1fr !important;
    }

    /* AI Pricing - stack vertically */
    #offer-ai-pricing-container .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    #offer-ai-pricing-container .scale-105 {
        transform: scale(1) !important;
    }

    /* ============================================
       AI ASSISTANT TAB
       ============================================ */

    #tab-ai-assistant .grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    /* Sessions list - limited height */
    #chat-sessions-list {
        max-height: 300px;
        min-height: 200px;
    }

    /* Chat messages - better mobile height */
    #chat-messages-view {
        min-height: 400px;
    }

    /* ============================================
       SETTINGS TAB
       ============================================ */

    /* Save button sticky at bottom */
    #tab-settings {
        padding-bottom: 80px !important;
    }

    /* Settings header buttons */
    #tab-settings .flex.gap-4 {
        flex-direction: column;
        width: 100%;
    }

    #tab-settings .flex.gap-4 button {
        width: 100%;
    }

    /* Product settings cards */
    #products-settings .grid {
        grid-template-columns: 1fr !important;
    }

    /* Image upload sections */
    .flex.items-center.gap-4:has(input[type="file"]) {
        flex-direction: column;
        align-items: stretch !important;
    }

    .flex.items-center.gap-4:has(input[type="file"]) .flex-1 {
        width: 100%;
    }

    .flex.items-center.gap-4:has(input[type="file"]) label {
        width: 100%;
        text-align: center;
    }

    /* ============================================
       APPOINTMENTS TAB
       ============================================ */

    /* Status select - larger for touch */
    #appointments-table select {
        min-height: 44px;
        font-size: 14px;
        padding: 0.75rem;
    }

    /* ============================================
       INQUIRIES & VALUATIONS TABS
       ============================================ */

    /* Action buttons - stack vertically */
    .table-container .flex.gap-2 {
        flex-direction: column;
        gap: 0.5rem;
    }

    .table-container .flex.gap-2>* {
        width: 100% !important;
        justify-content: center;
    }

    /* WhatsApp button - make prominent */
    .table-container a[href*="wa.me"] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 0.75rem 1rem;
    }

    /* ============================================
       LOGIN SCREEN
       ============================================ */

    #login-screen .max-w-md {
        max-width: 100% !important;
        margin: 0 1rem;
    }

    #login-screen .rounded-\[40px\] {
        border-radius: 1.5rem !important;
    }

    #login-screen .p-12 {
        padding: 2rem !important;
    }

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

    /* Mobile-only visibility */
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    /* Responsive text sizes */
    .text-responsive-sm {
        font-size: 0.875rem;
    }

    .text-responsive-base {
        font-size: 1rem;
    }

    .text-responsive-lg {
        font-size: 1.125rem;
    }

    /* ============================================
       PERFORMANCE OPTIMIZATIONS
       ============================================ */

    /* Smooth scrolling on iOS */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent text size adjustment on orientation change */
    html {
        -webkit-text-size-adjust: 100%;
    }

    /* Improve tap highlighting */
    * {
        -webkit-tap-highlight-color: rgba(249, 115, 22, 0.1);
    }

    /* ============================================
       ANIMATIONS & TRANSITIONS
       ============================================ */

    /* Reduce motion for better performance on mobile */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Touch feedback animations */
    button:active,
    .btn:active,
    a[role="button"]:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ============================================
   LANDSCAPE MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {

    /* Reduce header size in landscape */
    header {
        padding: 0.5rem !important;
    }

    #page-title {
        font-size: 1.25rem !important;
    }

    /* Modal adjustments for landscape */
    .modal-content {
        max-height: 95vh !important;
    }
}

/* ============================================
   SMALL MOBILE DEVICES (< 375px)
   ============================================ */
@media (max-width: 374px) {

    /* Extra padding reduction for very small screens */
    main>div[class*="p-"] {
        padding: 0.75rem !important;
    }

    /* Smaller titles */
    #page-title {
        font-size: 1.25rem !important;
    }

    /* Compact buttons */
    button,
    .btn {
        font-size: 0.75rem;
        padding: 0.625rem 0.875rem;
    }
}

/* ============================================
    VALUATIONS SPECIAL CARD LAYOUT
    ============================================ */

@media (max-width: 767px) {

    /* Target specific table for cleaner card layout */
    #valuations-table tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        position: relative;
        padding-bottom: 0.75rem !important;
    }

    /* 1. Header: Date (Left) & Type (Right) */
    #valuations-table td:nth-child(1) {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.25rem;
    }

    /* Hide generic label for first cell */
    #valuations-table td:nth-child(1)::before {
        display: none;
    }

    /* Fix alignment of type badge */
    #valuations-table td:nth-child(1) .mt-1 {
        margin-top: 0 !important;
    }

    /* 2. Customer Info (Full Width) */
    #valuations-table td:nth-child(2) {
        grid-column: 1 / -1;
        padding: 0 0 0.25rem 0 !important;
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
    }

    #valuations-table td:nth-child(2)::before {
        display: none;
    }

    /* 3. Vehicle Details (Highlighted Box) */
    #valuations-table td:nth-child(3) {
        grid-column: 1 / -1;
        background: #f8fafc;
        border-radius: 0.75rem;
        padding: 0.75rem !important;
        margin: 0.25rem 0;
        border: 1px solid #e2e8f0;
    }

    #valuations-table td:nth-child(3)::before {
        display: none;
    }

    /* Make vehicle text larger */
    #valuations-table td:nth-child(3) .text-sm {
        font-size: 1rem !important;
        /* 16px */
        color: #0f172a;
        font-weight: 800;
    }

    /* 4. Damage Info (Left Half) */
    #valuations-table td:nth-child(4) {
        grid-column: 1 / 2;
        padding: 0.5rem 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #valuations-table td:nth-child(4)::before {
        display: none;
    }

    /* 5. AI Price (Right Half) */
    #valuations-table td:nth-child(5) {
        grid-column: 2 / 3;
        padding: 0.5rem 0 !important;
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    #valuations-table td:nth-child(5)::before {
        content: 'TAHMİNİ FİYAT';
        font-size: 9px;
        color: #64748b;
        margin-bottom: 2px;
        display: block;
        font-weight: 800;
    }

    /* 6. Actions (Full Width Bottom) */
    #valuations-table td:nth-child(6) {
        grid-column: 1 / -1;
        margin-top: 0.5rem;
        padding-top: 0 !important;
        border-top: none;
    }

    #valuations-table td:nth-child(6)::before {
        display: none;
    }

    /* Actions flex row - FORCE ROW LAYOUT */
    #valuations-table td:nth-child(6) .flex {
        display: flex;
        /* Changed from row to flex to support gap */
        flex-direction: row !important;
        /* Side by side buttons */
        gap: 0.5rem !important;
    }

    #valuations-table td:nth-child(6) .flex>* {
        flex: 1;
        /* Equal width buttons */
        justify-content: center;
        margin: 0 !important;
    }

    /* ============================================
    INQUIRIES (MESSAGES) SPECIAL CARD LAYOUT
    ============================================ */

    #inquiries-table tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        position: relative;
        padding-bottom: 0.75rem !important;
    }

    /* 1. Date (Full Width Header) */
    #inquiries-table td:nth-child(1) {
        grid-column: 1 / -1;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.25rem;
        font-weight: 700;
        color: #64748b;
        font-size: 0.75rem;
    }

    #inquiries-table td:nth-child(1)::before {
        display: none;
    }

    /* 2. Content (Left: Name) */
    #inquiries-table td:nth-child(2) {
        grid-column: 1 / 2;
        padding: 0 !important;
        display: flex;
        align-items: center;
    }

    #inquiries-table td:nth-child(2)::before {
        display: none;
    }

    #inquiries-table td:nth-child(2) .font-black {
        font-size: 1rem;
    }

    /* 3. Contact (Right: Phone/Email) */
    #inquiries-table td:nth-child(3) {
        grid-column: 2 / 3;
        padding: 0 !important;
        text-align: right;
    }

    #inquiries-table td:nth-child(3)::before {
        display: none;
    }

    /* 4. Message (Full Width Box) */
    #inquiries-table td:nth-child(4) {
        grid-column: 1 / -1;
        background: #f8fafc;
        border-radius: 0.75rem;
        padding: 0.75rem !important;
        margin: 0.5rem 0;
        border: 1px solid #e2e8f0;
    }

    #inquiries-table td:nth-child(4)::before {
        display: none;
    }

    #inquiries-table td:nth-child(4) .text-sm {
        font-style: italic;
        color: #334155;
    }

    /* 5. Actions (Full Width Bottom) */
    #inquiries-table td:nth-child(5) {
        grid-column: 1 / -1;
        padding-top: 0 !important;
        border-top: none;
    }

    #inquiries-table td:nth-child(5)::before {
        display: none;
    }

    #inquiries-table td:nth-child(5) .flex {
        display: flex;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    #inquiries-table td:nth-child(5) .flex>* {
        flex: 1;
        justify-content: center;
        margin: 0 !important;
    }

    /* ============================================
    APPOINTMENTS SPECIAL CARD LAYOUT
    ============================================ */

    #appointments-table tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        position: relative;
        padding-bottom: 0.75rem !important;
    }

    /* 1. Date (Left Header) */
    #appointments-table td:nth-child(1) {
        grid-column: 1 / 2;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.25rem;
        font-weight: 700;
        color: #64748b;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
    }

    #appointments-table td:nth-child(1)::before {
        display: none;
    }

    /* 5. Status (Right Header - Moved visually) */
    /* Note: In DOM it's nth-child(5), we use grid to move it up */
    #appointments-table td:nth-child(5) {
        grid-column: 2 / 3;
        grid-row: 1;
        /* Move to top row */
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.25rem;
        text-align: right;
    }

    #appointments-table td:nth-child(5)::before {
        display: none;
    }

    #appointments-table td:nth-child(5) select {
        padding: 0.25rem 0.5rem !important;
        height: auto !important;
        min-height: 30px !important;
        font-size: 0.75rem !important;
        width: auto !important;
        float: right;
    }

    /* 2. Customer (Full Width) */
    #appointments-table td:nth-child(2) {
        grid-column: 1 / -1;
        padding: 0 !important;
        margin-top: 0.25rem;
    }

    #appointments-table td:nth-child(2)::before {
        display: none;
    }


    /* ============================================
   MOBILE PAGINATION STYLES
   ============================================ */

    /* Make pagination buttons larger and easier to tap on mobile */
    @media (max-width: 767px) {
        #valuations-pagination {
            flex-wrap: wrap;
            gap: 0.5rem !important;
            margin-top: 1.5rem !important;
            padding-bottom: 2rem;
            /* Ensure space at bottom */
        }

        #valuations-pagination button {
            min-width: 44px !important;
            min-height: 44px !important;
            padding: 0 1rem !important;
            font-size: 1rem !important;
            /* Larger text */
            border-radius: 0.75rem !important;
            margin: 0 !important;
        }

        /* Hide page numbers on very small screens, keep arrows */
        @media (max-width: 380px) {
            #valuations-pagination button:not(:first-child):not(:last-child) {
                display: none;
                /* Simplistic approach, better would be JS logic update */
            }

            #valuations-pagination span {
                display: none;
            }
        }
    }

    /* ============================================
   VALUATION CARD ENHANCEMENTS
   ============================================ */

    @media (max-width: 767px) {
        #valuations-table tr {
            /* Enhance card look */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
            border: 1px solid #e2e8f0;
            margin-bottom: 1.25rem !important;
            padding: 1rem !important;
            border-radius: 1rem !important;
            transition: transform 0.2s ease;
        }

        #valuations-table tr:active {
            transform: scale(0.99);
        }

        /* Hasarlı/Hasarsız Indicator Stripe */
        #valuations-table tr:has(.text-red-500) {
            border-left: 5px solid #ef4444 !important;
        }

        #valuations-table tr:has(.text-green-500) {
            border-left: 5px solid #22c55e !important;
        }

        /* Date and Type row - more prominence */
        #valuations-table td:nth-child(1) {
            border-bottom: 1px solid #f1f5f9;
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem !important;
        }

        #valuations-table td:nth-child(1) .text-xs {
            font-size: 0.8rem !important;
            color: #64748b;
        }

        /* Vehicle Info - Clean up */
        #valuations-table td:nth-child(3) {
            background: #f8fafc;
            border: 1px solid #f1f5f9;
            margin: 0.5rem 0;
        }
    }

    #appointments-table td:nth-child(2) .font-black {
        font-size: 1.1rem;
    }

    /* 3. Contact (Full Width) */
    #appointments-table td:nth-child(3) {
        grid-column: 1 / -1;
        padding: 0 0 0.5rem 0 !important;
    }

    #appointments-table td:nth-child(3)::before {
        display: none;
    }

    #appointments-table td:nth-child(3) .text-sm {
        display: inline-block;
        margin-right: 0.5rem;
    }

    #appointments-table td:nth-child(3) .text-xs {
        display: inline-block;
    }

    /* 4. Car/Time Info (Highlighted Box) */
    #appointments-table td:nth-child(4) {
        grid-column: 1 / -1;
        background: #fff7ed;
        /* Orange tint */
        border-radius: 0.75rem;
        padding: 0.75rem !important;
        margin: 0.25rem 0 0.5rem 0;
        border: 1px solid #ffedd5;
    }

    #appointments-table td:nth-child(4)::before {
        display: none;
    }

    #appointments-table td:nth-child(4) .text-orange-600 {
        font-size: 1rem !important;
        font-weight: 900;
        margin-bottom: 0.25rem;
        display: block;
    }

    /* 6. Actions (Full Width Bottom) */
    #appointments-table td:nth-child(6) {
        grid-column: 1 / -1;
        padding-top: 0.5rem !important;
        border-top: 1px solid #f1f5f9;
        margin-top: 0.25rem;
    }

    #appointments-table td:nth-child(6)::before {
        display: none;
    }

    #appointments-table td:nth-child(6) .flex {
        display: flex;
        flex-direction: row !important;
        gap: 0.5rem !important;
        width: 100%;
    }

    #appointments-table td:nth-child(6) .flex>* {
        flex: 1;
        justify-content: center;
        margin: 0 !important;
        width: 100% !important;
        display: flex;
    }
}

/* Missing Animations Fix */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}

@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
}