/* Mobile-First Responsive Design for Bike Sanctuary */

/* Base styles - Mobile first */
* {
    box-sizing: border-box;
}

/* Custom Scrollbar Design */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
    border: 2px solid var(--bg-tertiary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
    opacity: 0.8;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--bg-tertiary);
}

/* Modals - Responsive sizing */
.modal {
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 20px auto !important;
}

@media (min-width: 768px) {
    .modal {
        max-width: 600px !important;
        margin: 50px auto !important;
    }
    
    .modal[style*="700px"],
    .modal[style*="900px"],
    .modal[style*="1000px"] {
        max-width: 90vw !important;
    }
}

@media (min-width: 1024px) {
    .modal[style*="700px"] {
        max-width: 700px !important;
    }
    
    .modal[style*="900px"] {
        max-width: 900px !important;
    }
    
    .modal[style*="1000px"] {
        max-width: 1000px !important;
    }
}

/* Tables - Responsive */
table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Desktop tables - normal display */
table {
    width: 100%;
    border-collapse: collapse;
    display: table;
}

table thead {
    display: table-header-group;
}

table tbody {
    display: table-row-group;
}

table tr {
    display: table-row;
}

table th,
table td {
    display: table-cell;
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

table th {
    font-weight: 600;
    background: var(--bg-tertiary);
    white-space: nowrap;
}

@media (max-width: 768px) {
    table {
        font-size: 0.85rem;
    }
    
    table th,
    table td {
        padding: 8px 4px !important;
    }
    
    /* Stack tables vertically on mobile ONLY */
    table.stack-mobile {
        display: block;
    }
    
    table.stack-mobile thead {
        display: none;
    }
    
    table.stack-mobile tbody,
    table.stack-mobile tr,
    table.stack-mobile td {
        display: block;
        width: 100%;
    }
    
    table.stack-mobile tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 10px;
        background: var(--bg-secondary);
    }
    
    table.stack-mobile td {
        text-align: left !important;
        padding: 8px 10px !important;
        border: none !important;
        display: flex;
        justify-content: space-between;
    }
    
    table.stack-mobile td:before {
        content: attr(data-label);
        font-weight: bold;
        color: var(--text-secondary);
        flex-shrink: 0;
        width: 100px;
    }
}

/* Grid layouts - Responsive */
.grid-2-cols,
.grid-3-cols,
.grid-4-cols {
    display: grid;
    gap: 15px;
}

.grid-2-cols {
    grid-template-columns: 1fr;
}

.grid-3-cols {
    grid-template-columns: 1fr;
}

.grid-4-cols {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .grid-2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-4-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4-cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Forms - Responsive */
.form-group {
    margin-bottom: 15px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 100%;
}

/* Buttons - Responsive */
.btn {
    padding: 10px 16px;
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    
    .btn-sm {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* Navbar - Responsive */
.navbar {
    padding: 10px 15px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-brand img {
    height: 45px !important;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .nav-brand span {
        font-size: 0.9rem;
    }
    
    .nav-links {
        gap: 8px;
    }
    
    .nav-link {
        font-size: 0.85rem;
        padding: 5px 8px;
    }
}

@media (min-width: 768px) {
    .nav-brand img {
        height: 50px !important;
    }
}

/* Container - Responsive */
.container {
    padding: 15px;
    max-width: 100%;
}

@media (min-width: 768px) {
    .container {
        padding: 20px;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 30px;
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* Cards - Responsive */
.card {
    padding: 15px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .card {
        padding: 20px;
        margin-bottom: 20px;
    }
}

/* Bike Cards Grid */
.bikes-grid-large {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .bikes-grid-large {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .bikes-grid-large {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Contact Modal - Specific fixes */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Opening hours table */
.hours-table {
    width: 100%;
    border-collapse: collapse;
}

.hours-table tr {
    border-bottom: 1px solid var(--border-color);
}

.hours-table td {
    padding: 8px 0;
}

/* Bike Images Grid */
.bike-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .bike-images-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

.bike-image-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .bike-image-thumb {
        height: 150px;
    }
}

/* Filter bar - Desktop first, mobile responsive */
@media (max-width: 768px) {
    .filter-bar,
    div[style*="grid-template-columns: repeat(5"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
}

/* Admin tabs - Responsive */
.admin-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .admin-tabs {
        flex-wrap: wrap;
    }
    
    .admin-tabs .tab {
        flex: 1 1 calc(50% - 5px);
        min-width: 120px;
        font-size: 0.85rem;
        padding: 8px;
    }
}

/* Charts - Responsive height */
canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix for action buttons in tables */
@media (max-width: 768px) {
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .btn-group .btn {
        width: 100%;
    }
}

/* Social media buttons */
.social-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.social-buttons .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    padding: 12px 16px !important;
    white-space: nowrap;
    font-weight: 500;
}

.social-buttons .btn i {
    font-size: 1.3rem;
}

@media (max-width: 640px) {
    .social-buttons {
        flex-direction: column;
    }
    
    .social-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .social-buttons .btn span:last-child {
        font-size: 0.85rem;
    }
}

/* Utility classes */
.mobile-hidden {
    display: none;
}

@media (min-width: 768px) {
    .mobile-hidden {
        display: block;
    }
}

.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
}

/* Fix scrollbars in modals */
.modal-overlay {
    overflow-y: auto !important;
    padding: 20px 10px;
}

@media (min-width: 768px) {
    .modal-overlay {
        padding: 50px 20px;
    }
}

/* Service History Modal - Mobile responsive */
@media (max-width: 768px) {
    .service-history-item {
        padding: 15px !important;
        margin-bottom: 12px !important;
    }
    
    .service-history-item h3 {
        font-size: 1rem !important;
    }
    
    .service-history-item table {
        font-size: 0.8rem !important;
        display: block;
        overflow-x: auto;
    }
    
    .service-history-item table th,
    .service-history-item table td {
        padding: 6px 4px !important;
        white-space: nowrap;
    }
    
    /* Service action buttons on mobile */
    .service-history-item [style*="display: flex; gap: 5px"] {
        flex-direction: column !important;
        width: 100%;
    }
    
    .service-history-item .btn-sm {
        width: 100% !important;
        justify-content: center;
    }
    
    /* Cost badge on mobile */
    .service-history-item [style*="Összköltség"] {
        font-size: 0.95rem !important;
        padding: 8px 12px !important;
        width: 100%;
        justify-content: center;
    }
}

/* Text responsiveness */
h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
}