/* 
   ==========================================================================
   PREMIUM BANKING - MASTER RESPONSIVE FRAMEWORK
   Mobile-First Design System for Complete Project Responsiveness
   ========================================================================== 
*/

/* ========================================================================
   BREAKPOINT DEFINITIONS
   - Mobile:    320px - 575px
   - Tablet:    576px - 991px
   - Desktop:   992px - 1199px
   - Large:     1200px+
   ======================================================================== */

/* ========================================================================
   BASE MOBILE RULES (Default - Mobile First)
   ======================================================================== */

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Base Typography Scaling */
html {
    font-size: 14px;
}

/* Container Adjustments */
.container,
.container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Main Content Area */
.main-content {
    padding-top: 80px !important;
    margin-left: 0 !important;
    width: 100% !important;
}

.layout-px-spacing {
    padding: 15px !important;
}

/* Header Mobile */
.header-container {
    height: 80px !important;
    padding: 0 10px !important;
}

.header-container .navbar {
    min-height: 60px !important;
    padding: 0 !important;
}

.header-container .theme-brand {
    width: auto !important;
    min-width: 50px !important;
    border: none !important;
}

.brand-modern {
    display: none !important;
}

.brand-modern .brand-text h4 {
    font-size: 14px !important;
}

.brand-modern .brand-text p {
    display: none !important;
}

/* Sidebar Mobile - Hidden by default */
.sidebar-wrapper {
    position: fixed !important;
    left: -280px !important;
    top: 60px !important;
    height: calc(100vh - 60px) !important;
    width: 280px !important;
    z-index: 1050 !important;
    transition: left 0.3s ease !important;
}

#container.sbar-open .sidebar-wrapper {
    left: 0 !important;
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.8) !important;
}

/* Sidebar Profile - Compact */
#sidebar .profile-info {
    padding: 1rem !important;
}

#sidebar .profile-info .user-info img {
    width: 50px !important;
    height: 50px !important;
}

#sidebar .profile-info .user-info h5 {
    font-size: 14px !important;
}

/* Navigation Items */
.navbar-nav .nav-item {
    margin-left: 8px !important;
}

.navbar-nav .nav-link span {
    display: none !important;
}

/* Cards & Components */
.hero-card-premium,
.p-glass,
.tile,
.card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.stat-p-value {
    font-size: 1.5rem !important;
}

/* Tables - Horizontal Scroll */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.table-premium th,
.table-premium td {
    padding: 0.75rem !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

/* Forms */
.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    font-size: 16px !important;
    /* Prevents iOS zoom */
    padding: 12px !important;
}

/* Buttons */
.btn,
.btn-p-gold {
    padding: 10px 16px !important;
    font-size: 14px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.btn-group .btn {
    width: auto !important;
}

/* Footer Mobile */
.footer-wrapper {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 1.5rem 1rem !important;
}

.footer-section.f-section-2 {
    display: block !important;
}

/* Grid Adjustments */
.row {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.col,
[class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Hide on Mobile */
.hide-mobile,
.d-none-mobile {
    display: none !important;
}

/* Dashboard Cards Stack */
.quick-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

/* Dropdown Menus */
.dropdown-menu {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Modal Responsiveness */
.modal-dialog {
    margin: 10px !important;
    max-width: calc(100vw - 20px) !important;
}

.modal-content {
    border-radius: 12px !important;
}

/* Chart Containers */
.apexcharts-canvas {
    max-width: 100% !important;
}

/* DataTables Mobile */
.dataTables_wrapper {
    overflow-x: auto !important;
}

.dataTables_filter,
.dataTables_length {
    text-align: center !important;
    margin-bottom: 10px !important;
}

.dataTables_filter input {
    width: 100% !important;
    max-width: 250px !important;
}

/* ========================================================================
   SMALL TABLETS (576px - 767px)
   ======================================================================== */
@media (min-width: 576px) {
    html {
        font-size: 15px;
    }

    .layout-px-spacing {
        padding: 20px !important;
    }

    .btn,
    .btn-p-gold {
        width: auto !important;
    }

    .quick-services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .stat-p-value {
        font-size: 1.75rem !important;
    }
}

/* ========================================================================
   TABLETS (768px - 991px)
   ======================================================================== */
@media (min-width: 768px) {
    html {
        font-size: 15px;
    }

    .header-container {
        height: 80px !important;
    }

    .main-content {
        padding-top: 80px !important;
    }

    .sidebar-wrapper {
        top: 65px !important;
        height: calc(100vh - 65px) !important;
    }

    .brand-modern {
        display: flex !important;
    }

    .brand-modern .brand-text h4 {
        font-size: 16px !important;
    }

    .hero-card-premium,
    .p-glass,
    .tile {
        padding: 1.5rem !important;
    }

    .stat-p-value {
        font-size: 2rem !important;
    }

    .table-premium th,
    .table-premium td {
        padding: 1rem !important;
        font-size: 13px !important;
    }

    .quick-services-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .footer-wrapper {
        flex-direction: row !important;
        text-align: left !important;
    }

    .navbar-nav .nav-link span {
        display: inline !important;
    }
}

/* ========================================================================
   DESKTOP (992px+)
   ======================================================================== */
@media (min-width: 992px) {
    html {
        font-size: 16px;
    }

    .header-container {
        height: 70px !important;
    }

    .main-content {
        padding-top: 70px !important;
        margin-left: 255px !important;
    }

    .sidebar-wrapper {
        left: 0 !important;
        top: 70px !important;
        height: calc(100vh - 70px) !important;
        width: 255px !important;
    }

    #container.sidebar-closed .sidebar-wrapper {
        left: -255px !important;
    }

    #container.sidebar-closed .main-content {
        margin-left: 0 !important;
    }

    .header-container .theme-brand {
        width: 255px !important;
        border-right: 1px solid rgba(255, 215, 0, 0.08) !important;
    }

    .brand-modern .brand-text p {
        display: block !important;
    }

    .hero-card-premium,
    .p-glass,
    .tile {
        padding: 2rem !important;
    }

    .stat-p-value {
        font-size: 2.5rem !important;
    }

    .table-premium th,
    .table-premium td {
        padding: 1.25rem !important;
        font-size: 14px !important;
        white-space: normal !important;
    }

    .dropdown-menu {
        position: absolute !important;
        left: auto !important;
        right: 0 !important;
        width: auto !important;
        min-width: 200px !important;
    }
}

/* ========================================================================
   LARGE SCREENS (1200px+)
   ======================================================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .layout-px-spacing {
        padding: 30px !important;
    }

    .hero-card-premium::before {
        width: 400px;
        height: 400px;
    }
}

/* ========================================================================
   EXTRA LARGE SCREENS (1400px+)
   ======================================================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ========================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================================================== */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .btn,
    .nav-link,
    .dropdown-item,
    a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Remove hover effects that feel odd on touch */
    .tile:hover,
    .p-glass:hover {
        transform: none !important;
    }
}

/* ========================================================================
   ORIENTATION SPECIFIC
   ======================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar-wrapper {
        overflow-y: auto !important;
    }

    #sidebar .profile-info {
        padding: 0.5rem !important;
    }

    #sidebar .profile-info .user-info img {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ========================================================================
   PRINT STYLES
   ======================================================================== */
@media print {

    .sidebar-wrapper,
    .header-container,
    .footer-wrapper,
    .no-print {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}

/* ========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================================================
   SPECIFIC PAGE OVERRIDES
   ======================================================================== */

/* Cards Page */
@media (max-width: 767px) {
    .cardx {
        padding: 1.25rem !important;
        border-radius: 16px !important;
    }

    .cardx .pan {
        font-size: 18px !important;
        letter-spacing: 2px !important;
    }
}

/* Wire Transfer Page */
@media (max-width: 575px) {
    .p-badge {
        display: block !important;
        margin-bottom: 8px !important;
    }
}

/* Dashboard Quick Actions */
@media (max-width: 575px) {
    .quick-action-btn {
        padding: 12px !important;
    }

    .quick-action-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    .quick-action-btn span {
        font-size: 11px !important;
    }
}

/* Profile Page */
@media (max-width: 767px) {
    .profile-header {
        flex-direction: column !important;
        text-align: center !important;
    }

    .profile-header img {
        margin-bottom: 1rem !important;
    }
}

/* Transaction Tables */
@media (max-width: 767px) {
    .transaction-row {
        display: block !important;
        padding: 1rem !important;
        border-bottom: 1px solid rgba(255, 215, 0, 0.08) !important;
    }

    .transaction-row td {
        display: flex !important;
        justify-content: space-between !important;
        padding: 5px 0 !important;
    }

    .transaction-row td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--gold-vibrant);
    }
}

/* Authentication Pages */
@media (max-width: 575px) {
    .auth-container {
        padding: 20px !important;
    }

    .auth-form {
        padding: 1.5rem !important;
    }

    .auth-logo {
        max-width: 150px !important;
    }
}

/* ========================================================================
   ADMIN PANEL RESPONSIVE
   ======================================================================== */
@media (max-width: 991px) {
    .admin-sidebar {
        position: fixed !important;
        left: -280px !important;
        z-index: 1050 !important;
    }

    .admin-sidebar.open {
        left: 0 !important;
    }

    .admin-content {
        margin-left: 0 !important;
    }
}

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

/* Show/Hide at Breakpoints */
.show-mobile {
    display: block !important;
}

.hide-mobile {
    display: none !important;
}

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

    .hide-mobile {
        display: block !important;
    }

    .show-tablet {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .show-tablet {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* Text Alignment */
@media (max-width: 575px) {
    .text-center-mobile {
        text-align: center !important;
    }

    .text-left-mobile {
        text-align: left !important;
    }
}

/* Spacing Utilities */
@media (max-width: 767px) {
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }

    .mt-mobile-3 {
        margin-top: 1rem !important;
    }

    .p-mobile-2 {
        padding: 0.5rem !important;
    }
}

/* Full Width on Mobile */
@media (max-width: 575px) {
    .w-100-mobile {
        width: 100% !important;
    }
}