/* 
 * Responsive Components CSS
 * City Discovery - Common Responsive Patterns
 * Shared responsive utilities across admin and game interfaces
 */

/* ==========================================
 * UNIFIED CONTAINER SYSTEM
 * ========================================== */

/* Main container responsive behavior */
.container-fluid {
    padding: 0.5rem;
}

@media (min-width: 769px) and (max-width: 991px) {
    .container-fluid {
        max-width: 700px;
        margin: 0 auto;
        padding: 1rem;
    }
}

@media (min-width: 992px) {
    .container-fluid {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem;
    }
}

/* ==========================================
 * CARD RESPONSIVE SYSTEM
 * ========================================== */
.card {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .card {
        border-radius: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}

@media (min-width: 769px) {
    .card.shadow,
    .card.shadow-sm {
        max-width: 100%;
        width: 100%;
    }
}

/* ==========================================
 * BUTTON RESPONSIVE SYSTEM
 * ========================================== */
.btn {
    min-height: 44px;
    touch-action: manipulation;
    transition: all 0.15s ease-in-out;
}

.btn-sm {
    min-height: 38px;
}

@media (max-width: 768px) {
    .btn {
        min-height: 50px;
        padding: 15px 25px;
        font-size: 1.1rem;
    }
    
    .btn-sm {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* ==========================================
 * FORM CONTROLS RESPONSIVE
 * ========================================== */
.form-control {
    min-height: 44px;
    transition: all 0.15s ease-in-out;
}

@media (max-width: 768px) {
    .form-control {
        min-height: 50px;
        padding: 15px;
        font-size: 1.1rem;
    }
    
    .form-control-lg {
        min-height: 56px;
        padding: 18px;
        font-size: 1.2rem;
    }
}

/* ==========================================
 * TYPOGRAPHY RESPONSIVE
 * ========================================== */
@media (max-width: 768px) {
    .logo {
        font-size: 2rem !important;
    }
    
    .subtitle {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }
    
    h1, .h1 { font-size: 1.8rem; }
    h2, .h2 { font-size: 1.6rem; }
    h3, .h3 { font-size: 1.4rem; }
    h4, .h4 { font-size: 1.2rem; }
    h5, .h5 { font-size: 1.1rem; }
}

@media (min-width: 769px) and (max-width: 991px) {
    .logo {
        font-size: 2.4rem !important;
    }
    
    .subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 25px !important;
    }
}

@media (min-width: 992px) {
    .logo {
        font-size: 2.8rem !important;
    }
    
    .subtitle {
        font-size: 1.2rem !important;
        margin-bottom: 35px !important;
    }
}

/* ==========================================
 * NAVIGATION RESPONSIVE
 * ========================================== */
.nav-pills .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
}

@media (max-width: 768px) {
    .nav-pills {
        flex-direction: row;
        gap: 0.25rem;
        flex-wrap: nowrap;
    }
    
    .nav-pills .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        flex: 1;
        min-width: 0;
    }
}

/* ==========================================
 * MODAL RESPONSIVE
 * ========================================== */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
    }
}

/* ==========================================
 * TABLE RESPONSIVE
 * ========================================== */
@media (max-width: 768px) {
    .table-responsive {
        border: none;
    }
    
    .table td, .table th {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .table .btn-icon-compact {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
}

/* ==========================================
 * ALERT RESPONSIVE
 * ========================================== */
@media (max-width: 768px) {
    .alert {
        padding: 0.75rem;
        font-size: 0.9rem;
        border-radius: 0.5rem;
    }
}

/* ==========================================
 * BADGE RESPONSIVE
 * ========================================== */
@media (max-width: 768px) {
    .badge.fs-6 {
        font-size: 0.75rem !important;
        padding: 0.35em 0.65em;
    }
    
    .badge.fs-4 {
        font-size: 1.1rem !important;
        padding: 0.5em 1em;
    }
}

/* ==========================================
 * UTILITY CLASSES
 * ========================================== */
.hidden {
    display: none !important;
}

.d-none {
    display: none !important;
}

/* Touch-friendly spacing */
@media (max-width: 768px) {
    .mb-mobile-2 { margin-bottom: 0.5rem !important; }
    .mb-mobile-3 { margin-bottom: 1rem !important; }
    .mb-mobile-4 { margin-bottom: 1.5rem !important; }
    
    .p-mobile-2 { padding: 0.5rem !important; }
    .p-mobile-3 { padding: 1rem !important; }
    
    .gap-mobile-2 { gap: 0.5rem !important; }
    .gap-mobile-3 { gap: 1rem !important; }
}

/* ==========================================
 * BREAKPOINT SPECIFIC UTILITIES
 * ========================================== */
@media (max-width: 768px) {
    .d-mobile-none { display: none !important; }
    .d-mobile-block { display: block !important; }
    .d-mobile-inline { display: inline !important; }
    .d-mobile-flex { display: flex !important; }
}

@media (min-width: 769px) and (max-width: 991px) {
    .d-tablet-none { display: none !important; }
    .d-tablet-block { display: block !important; }
    .d-tablet-inline { display: inline !important; }
    .d-tablet-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .d-desktop-none { display: none !important; }
    .d-desktop-block { display: block !important; }
    .d-desktop-inline { display: inline !important; }
    .d-desktop-flex { display: flex !important; }
}