/**
 * NVC Banking Platform - Global Responsive Design System
 * Mobile-first responsive design for all platforms
 */

/* ========================================
   1. BASE RESPONSIVE SETTINGS
   ======================================== */

/* Ensure proper viewport rendering */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 16px; /* Base font size */
}

body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

/* Prevent horizontal scroll */
* {
    max-width: 100%;
}

img, video, iframe, embed {
    max-width: 100%;
    height: auto;
}

/* ========================================
   2. BREAKPOINT SYSTEM
   Mobile First: 320px → 768px → 1024px → 1440px
   ======================================== */

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
    html { font-size: 14px; }
    .container, .container-fluid { padding: 10px !important; }
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 1rem !important; }
}

/* Mobile Medium (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    html { font-size: 15px; }
    .container, .container-fluid { padding: 15px !important; }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    html { font-size: 16px; }
    .container, .container-fluid { padding: 20px !important; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    html { font-size: 16px; }
}

/* ========================================
   3. RESPONSIVE NAVIGATION
   ======================================== */

/* Mobile Navigation */
@media (max-width: 991px) {
    /* Make navbar scrollable if too many items */
    .navbar-collapse {
        max-height: 80vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Stack navigation items vertically */
    .navbar-nav {
        width: 100% !important;
    }
    
    .navbar-nav .nav-item {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    
    .navbar-nav .nav-link {
        padding: 12px 15px !important;
        font-size: 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Dropdown menus full width on mobile */
    .dropdown-menu {
        width: 100% !important;
        position: static !important;
        float: none !important;
        border: none !important;
        margin: 0 !important;
        background: rgba(0,0,0,0.2) !important;
    }
    
    .dropdown-item {
        padding: 10px 20px !important;
        white-space: normal !important;
    }
}

/* ========================================
   4. RESPONSIVE BUTTONS & FORMS
   ======================================== */

/* Touch-friendly buttons (min 44px height for mobile) */
.btn {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
}

@media (max-width: 767px) {
    .btn {
        width: 100% !important;
        margin-bottom: 10px !important;
        display: block !important;
    }
    
    .btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-group .btn {
        border-radius: 8px !important;
        margin: 5px 0 !important;
    }
}

/* Responsive form controls */
.form-control, .form-select, input, textarea, select {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px 15px !important;
    border-radius: 8px !important;
}

@media (max-width: 767px) {
    .form-control, .form-select {
        width: 100% !important;
    }
    
    .form-group, .mb-3 {
        margin-bottom: 15px !important;
    }
    
    label {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
    }
}

/* ========================================
   5. RESPONSIVE CARDS & PANELS
   ======================================== */

.card {
    margin-bottom: 20px !important;
    border-radius: 12px !important;
}

@media (max-width: 767px) {
    .card {
        margin-bottom: 15px !important;
    }
    
    .card-body {
        padding: 15px !important;
    }
    
    .card-title {
        font-size: 1.1rem !important;
    }
    
    /* Stack card columns on mobile */
    .card-columns {
        column-count: 1 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .card-columns {
        column-count: 2 !important;
    }
}

/* ========================================
   6. RESPONSIVE TABLES
   ======================================== */

/* Make tables scrollable on mobile */
@media (max-width: 991px) {
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 100% !important;
        font-size: 0.9rem !important;
    }
    
    th, td {
        padding: 8px !important;
        white-space: nowrap !important;
    }
    
    /* Stack table rows on very small screens */
    @media (max-width: 575px) {
        table, thead, tbody, th, td, tr {
            display: block !important;
        }
        
        thead tr {
            position: absolute !important;
            top: -9999px !important;
            left: -9999px !important;
        }
        
        tr {
            border: 1px solid rgba(255,255,255,0.1) !important;
            margin-bottom: 10px !important;
            border-radius: 8px !important;
            padding: 10px !important;
        }
        
        td {
            border: none !important;
            position: relative !important;
            padding-left: 50% !important;
            white-space: normal !important;
        }
        
        td:before {
            content: attr(data-label) !important;
            position: absolute !important;
            left: 10px !important;
            font-weight: bold !important;
            text-transform: uppercase !important;
            font-size: 0.8rem !important;
        }
    }
}

/* ========================================
   7. RESPONSIVE GRID SYSTEM
   ======================================== */

/* Force single column on mobile */
@media (max-width: 767px) {
    .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   8. RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Fluid typography */
h1, .h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}

h2, .h2 {
    font-size: clamp(1.3rem, 4vw, 2rem) !important;
    line-height: 1.3 !important;
}

h3, .h3 {
    font-size: clamp(1.1rem, 3vw, 1.75rem) !important;
}

h4, .h4 {
    font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
}

p, .text-body {
    font-size: clamp(0.9rem, 2vw, 1rem) !important;
    line-height: 1.6 !important;
}

/* ========================================
   9. RESPONSIVE MODALS
   ======================================== */

@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    .modal-content {
        border-radius: 15px !important;
    }
    
    .modal-header, .modal-body, .modal-footer {
        padding: 15px !important;
    }
    
    .modal-title {
        font-size: 1.2rem !important;
    }
}

/* ========================================
   10. RESPONSIVE SPACING
   ======================================== */

@media (max-width: 767px) {
    /* Reduce padding/margins on mobile */
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
    .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    
    .container, .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ========================================
   11. RESPONSIVE IMAGES
   ======================================== */

img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* Prevent images from being too small */
@media (max-width: 767px) {
    img.logo {
        max-width: 150px !important;
    }
    
    .card-img-top {
        border-radius: 12px 12px 0 0 !important;
    }
}

/* ========================================
   12. RESPONSIVE BADGES & ALERTS
   ======================================== */

@media (max-width: 767px) {
    .badge {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
        margin: 3px !important;
        display: inline-block !important;
    }
    
    .alert {
        padding: 12px !important;
        margin-bottom: 15px !important;
        font-size: 0.9rem !important;
    }
}

/* ========================================
   13. RESPONSIVE UTILITY CLASSES
   ======================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 767px) {
    .show-mobile {
        display: block !important;
    }
}

/* ========================================
   14. RESPONSIVE FLEXBOX
   ======================================== */

@media (max-width: 767px) {
    .d-flex {
        flex-direction: column !important;
    }
    
    .flex-row {
        flex-direction: column !important;
    }
    
    .justify-content-between,
    .justify-content-around,
    .justify-content-evenly {
        justify-content: center !important;
    }
    
    .text-end, .text-start {
        text-align: center !important;
    }
}

/* ========================================
   15. TOUCH-FRIENDLY INTERACTIONS
   ======================================== */

/* Larger click targets for mobile */
a, button, .clickable {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better tap highlighting */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* ========================================
   16. RESPONSIVE DASHBOARDS & STATS
   ======================================== */

@media (max-width: 767px) {
    .dashboard-stat,
    .stat-card,
    .metric-box {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .stat-value {
        font-size: 1.5rem !important;
    }
    
    .stat-label {
        font-size: 0.85rem !important;
    }
}

/* ========================================
   17. RESPONSIVE FORMS SPECIFIC
   ======================================== */

@media (max-width: 767px) {
    /* Stack form rows */
    .form-row {
        flex-direction: column !important;
    }
    
    .form-row > div {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Full width form groups */
    .input-group {
        flex-direction: column !important;
    }
    
    .input-group > * {
        width: 100% !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
    }
}

/* ========================================
   18. LANDSCAPE MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 991px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    
    /* Make navigation more compact */
    .navbar-nav .nav-link {
        padding: 8px 12px !important;
    }
}

/* ========================================
   19. PRINT STYLES
   ======================================== */

@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        text-decoration: underline !important;
    }
}

/* ========================================
   20. HIGH DPI / RETINA DISPLAYS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}