/* =============================================
   Trading Card Search and Sell - Shared Responsive Styles
   ============================================= */

/* =============================================
   CSS Custom Properties (Variables)
   ============================================= */
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --primary-color: #667eea;
    --primary-dark: #5a6fd8;
    --secondary-color: #764ba2;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --dark-color: #343a40;
    --light-bg: #f8f9fa;
    --border-color: #dee2e6;
    --text-muted: #6c757d;

    /* Touch target sizes */
    --touch-target-min: 44px;
    --touch-target-spacing: 8px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 15px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* =============================================
   Base Responsive Utilities
   ============================================= */

/* Touch-friendly targets - ensure minimum 44px height */
.touch-target,
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
    min-height: var(--touch-target-min);
}

/* =============================================
   Mobile Detection Body Classes
   ============================================= */
body.is-mobile .desktop-only {
    display: none !important;
}

body:not(.is-mobile) .mobile-only {
    display: none !important;
}

/* =============================================
   Responsive Navbar
   ============================================= */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .navbar-nav .nav-link {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .navbar-nav .nav-link i {
        margin-right: 4px;
    }

    /* Hide text on very small screens, show only icons */
    @media (max-width: 480px) {
        .navbar-nav .nav-link span.nav-text {
            display: none;
        }
    }
}

/* =============================================
   Responsive Cards Grid
   ============================================= */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .stats-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .stats-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stat-card {
        padding: 15px;
    }

    .stat-number {
        font-size: 1.5em;
    }
}

/* =============================================
   Responsive Data Table -> Cards
   ============================================= */
@media (max-width: 768px) {
    /* Hide table header */
    .data-table thead {
        display: none;
    }

    /* Table becomes block */
    .data-table,
    .data-table tbody {
        display: block;
        width: 100%;
    }

    /* Each row becomes a card */
    .data-table tr {
        display: block;
        margin-bottom: 16px;
        border-radius: var(--radius-md);
        background: white;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
        padding: 12px;
    }

    /* Each cell becomes a row with label */
    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        text-align: right;
    }

    .data-table td:last-child {
        border-bottom: none;
    }

    /* Add labels from data-label attribute */
    .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--dark-color);
        text-align: left;
        flex-shrink: 0;
        margin-right: 15px;
    }

    /* Card info cell - full width on mobile */
    .data-table td[data-label="Card Info"],
    .data-table td[data-label="eBay Pricing"] {
        flex-direction: column;
        text-align: left;
    }

    .data-table td[data-label="Card Info"]::before,
    .data-table td[data-label="eBay Pricing"]::before {
        margin-bottom: 8px;
    }

    /* Actions cell styling */
    .data-table td[data-label="Actions"] {
        justify-content: center;
        padding-top: 15px;
    }

    .data-table td[data-label="Actions"]::before {
        display: none;
    }

    /* Button group in mobile */
    .data-table .button-group {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .data-table .button-group button {
        min-width: auto;
        flex: 1;
        min-height: var(--touch-target-min);
    }
}

/* =============================================
   Full-Screen Modals on Mobile
   ============================================= */
@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-start;
    }

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

    .modal-header {
        border-radius: 0 !important;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        -webkit-overflow-scrolling: touch;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 28px;
    }

    /* Form elements in modal */
    .modal-content .form-group input[type="text"],
    .modal-content .form-group input[type="number"],
    .modal-content .form-group select {
        min-height: var(--touch-target-min);
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .modal-content .form-actions {
        flex-direction: column;
        gap: 10px;
        padding: 15px 0;
        position: sticky;
        bottom: 0;
        background: white;
        margin: 0 -15px;
        padding: 15px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    .modal-content .form-actions button {
        width: 100%;
        min-height: var(--touch-target-min);
    }
}

/* =============================================
   Touch-Friendly Buttons
   ============================================= */
@media (max-width: 768px) {
    .btn,
    button,
    .edit-btn,
    .delete-btn,
    .requery-btn,
    .list-ebay-btn,
    .view-listings-btn {
        min-height: var(--touch-target-min);
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    /* Links styled as buttons on mobile */
    .edit-link,
    .view-listings-link,
    .requery-link,
    .image-link {
        display: inline-block;
        padding: 8px 12px;
        min-height: calc(var(--touch-target-min) - 8px);
        line-height: 1.5;
    }

    /* Button groups */
    .btn-group-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--touch-target-spacing);
        width: 100%;
    }

    .btn-group-mobile .btn,
    .btn-group-mobile button {
        width: 100%;
    }

    /* Header actions */
    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-actions .btn {
        flex: 1;
        min-width: 100px;
    }
}

/* =============================================
   Form Elements
   ============================================= */
@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        min-height: var(--touch-target-min);
        font-size: 16px; /* Prevents zoom on focus in iOS */
    }

    /* Price input */
    .price-input {
        width: 100% !important;
        min-height: var(--touch-target-min);
    }

    /* Checkbox and radio */
    .checkbox-group input[type="checkbox"],
    .checkbox-group input[type="radio"] {
        width: 24px;
        height: 24px;
    }

    .checkbox-group label {
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
    }
}

/* =============================================
   Container Padding
   ============================================= */
@media (max-width: 768px) {
    .main-container,
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 480px) {
    .main-container,
    .container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* =============================================
   Page Headers
   ============================================= */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 1.5rem;
    }

    .page-header p {
        font-size: 0.9rem;
    }

    .display-6 {
        font-size: 1.5rem;
    }

    .lead {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .page-header h1 {
        font-size: 1.25rem;
    }
}

/* =============================================
   Table Container
   ============================================= */
@media (max-width: 768px) {
    .table-container {
        border-radius: var(--radius-md);
        overflow: visible;
    }

    .table-header {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
        text-align: center;
    }

    .table-header h2 {
        font-size: 1.2rem;
    }

    .table-wrapper {
        padding: 12px;
        background: var(--light-bg);
    }
}

/* =============================================
   Dashboard Cards
   ============================================= */
@media (max-width: 768px) {
    .dashboard-card {
        border-radius: var(--radius-md);
    }

    .dashboard-card .card-body {
        padding: 15px;
    }

    .dashboard-card .card-title {
        font-size: 1rem;
    }
}

/* =============================================
   Listing Items
   ============================================= */
@media (max-width: 768px) {
    .listing-item {
        padding: 12px;
        margin-bottom: 12px;
    }

    .listing-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .listing-actions {
        width: 100%;
        margin-top: 10px;
    }

    .listing-actions a,
    .listing-actions button {
        min-height: var(--touch-target-min);
        flex: 1;
        text-align: center;
    }
}

/* =============================================
   Badges
   ============================================= */
@media (max-width: 768px) {
    .status-badge,
    .rookie-badge,
    .numbered-badge,
    .insert-badge {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

/* =============================================
   Image Links Section
   ============================================= */
@media (max-width: 768px) {
    .image-links-section {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .image-links-section a {
        flex: 1;
        text-align: center;
        padding: 8px;
        background: var(--light-bg);
        border-radius: var(--radius-sm);
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image-links-section span {
        display: none;
    }
}

/* =============================================
   Alerts
   ============================================= */
@media (max-width: 768px) {
    .alert {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 1050;
        max-width: none;
    }
}

/* =============================================
   Loading Spinner
   ============================================= */
@media (max-width: 768px) {
    .loading {
        padding: 30px 15px;
    }

    .spinner {
        width: 32px;
        height: 32px;
    }
}

/* =============================================
   Utility Classes
   ============================================= */
.flex-mobile-column {
    display: flex;
}

@media (max-width: 768px) {
    .flex-mobile-column {
        flex-direction: column;
    }
}

.gap-mobile {
    gap: 20px;
}

@media (max-width: 768px) {
    .gap-mobile {
        gap: 12px;
    }
}

/* Hide on specific breakpoints */
@media (max-width: 320px) {
    .hide-xs {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hide-sm {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-md {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .hide-lg {
        display: none !important;
    }
}

/* =============================================
   PWA Standalone Mode Adjustments
   ============================================= */
@media all and (display-mode: standalone) {
    /* Add safe area padding for notched devices */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Adjust navbar for standalone mode */
    .navbar {
        padding-top: calc(0.5rem + env(safe-area-inset-top));
    }
}