/* ============================================
   GlobalTrust Bank - Mobile Banking Styles
   Responsive design for mobile devices
   ============================================ */

/* Tablet & Mobile adjustments */
@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 1050;
        transition: left 0.3s ease;
    }

    .sidebar.show {
        left: 0;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }

    .sidebar.show + .sidebar-overlay {
        display: block;
    }

    #page-content {
        width: 100%;
        margin-left: 0;
    }
}

/* Mobile specific styles */
@media (max-width: 767px) {
    body {
        font-size: 14px;
        padding-bottom: 70px;
    }

    /* Dashboard layout adjustments */
    .dashboard-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .dashboard-header h2 {
        font-size: 1.3rem;
    }

    /* Stats grid - 1 column on small mobile, 2 on larger */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .stat-card {
        padding: 16px 12px;
    }

    .stat-value {
        font-size: 28px !important;
    }

    .stat-label {
        font-size: 11px;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    /* Quick actions grid */
    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-action-btn {
        padding: 14px 8px;
        font-size: 11px;
    }

    .quick-action-btn i {
        font-size: 1.3rem;
    }

    /* Cards */
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Tables - make scrollable */
    .table-card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 600px;
    }

    .data-table th,
    .data-table td {
        padding: 10px 8px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Toolbar adjustments */
    .toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .toolbar-search {
        width: 100%;
    }

    .toolbar-filters {
        flex-wrap: wrap;
        gap: 6px;
    }

    .filter-btn {
        font-size: 12px;
        padding: 4px 10px;
    }

    /* Page content */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header h2 {
        font-size: 1.3rem;
    }

    .header-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .header-actions .btn {
        flex: 1;
        font-size: 13px;
    }

    /* Main content padding */
    #page-content .p-4 {
        padding: 16px !important;
    }

    /* Top bar */
    .navbar {
        padding: 10px 16px !important;
    }

    /* Action buttons in tables */
    .action-btns {
        gap: 4px;
    }

    .action-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* User cell */
    .user-cell {
        min-width: 140px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* Empty state */
    .empty-state {
        padding: 40px 20px;
    }

    .empty-state i {
        font-size: 2.5rem;
    }

    .empty-state h5 {
        font-size: 1rem;
    }

    /* Pagination */
    .pagination-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Forms & Modals */
    .modal-dialog {
        margin: 10px;
    }

    .form-label {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .form-control, .form-select {
        font-size: 14px;
        padding: 8px 12px;
    }

    /* Flash messages */
    .alert {
        font-size: 13px;
        padding: 10px 14px;
    }

    /* Deposit/Investment cards */
    .deposit-card, .investment-card {
        flex-direction: column;
    }

    /* Support chat */
    .message-bubble {
        max-width: 90%;
    }

    /* Statement view */
    .statement-header {
        text-align: center;
    }

    .statement-info-grid {
        grid-template-columns: 1fr;
    }

    /* Bottom Navigation for Mobile */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        z-index: 1030;
        padding: 4px 0;
        padding-bottom: env(safe-area-inset-bottom, 4px);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }

    .mobile-bottom-nav .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 4px;
        text-decoration: none;
        color: #6b7280;
        font-size: 10px;
        transition: color 0.2s;
        gap: 2px;
    }

    .mobile-bottom-nav .bottom-nav-item i {
        font-size: 1.2rem;
    }

    .mobile-bottom-nav .bottom-nav-item.active {
        color: #1a56db;
    }

    .mobile-bottom-nav .bottom-nav-item:active {
        background: #f3f4f6;
    }

    /* Service categories grid */
    .service-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Loan cards */
    .loan-summary-card {
        flex-direction: column;
    }
}

/* Very small mobile */
@media (max-width: 400px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mobile-bottom-nav .bottom-nav-item {
        font-size: 9px;
    }

    .mobile-bottom-nav .bottom-nav-item i {
        font-size: 1.1rem;
    }
}

/* Show bottom nav only on mobile */
@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none;
    }
}

/* Print styles */
@media print {
    .sidebar,
    .mobile-bottom-nav,
    .navbar,
    .btn,
    .toolbar,
    .pagination-wrapper,
    .action-btns,
    .header-actions {
        display: none !important;
    }

    #page-content {
        margin: 0;
        padding: 0;
    }

    .data-table {
        min-width: auto;
    }

    body {
        padding-bottom: 0;
    }
}