/* ============================================
   Mobile Responsive CSS untuk PMB DR3
   Memastikan semua halaman responsive di handphone
   ============================================ */

/* ============================================
   Global Mobile Styles
   ============================================ */
@media (max-width: 768px) {
    /* Container padding */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Card padding */
    .card-body {
        padding: 20px 15px !important;
    }
    
    .card-body.p-5 {
        padding: 20px 15px !important;
    }
    
    .card-body.p-4 {
        padding: 15px !important;
    }
    
    /* Heading sizes */
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    h4 {
        font-size: 1.1rem !important;
    }
    
    h5 {
        font-size: 1rem !important;
    }
    
    /* Text overflow */
    p, span, div, label {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ============================================
   Forms - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Form controls */
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    .form-control-lg {
        font-size: 16px !important;
        padding: 12px 15px !important;
    }
    
    .form-select-lg {
        font-size: 16px !important;
        padding: 12px 15px !important;
    }
    
    /* Input groups */
    .input-group-lg .form-control {
        font-size: 16px !important;
    }
    
    /* Labels */
    .form-label {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
    
    /* Buttons */
    .btn-lg {
        padding: 12px 20px;
        font-size: 1rem;
    }
    
    .btn {
        white-space: normal;
        word-wrap: break-word;
    }
    
    /* Button groups */
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Form rows */
    .row.g-3 > * {
        margin-bottom: 15px;
    }
}

/* ============================================
   Tables - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Table wrapper */
    .table-responsive {
        border-radius: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Table */
    .table {
        font-size: 0.85rem;
        min-width: 600px; /* Force horizontal scroll on small screens */
    }
    
    .table th,
    .table td {
        padding: 8px 10px;
        white-space: nowrap;
    }
    
    .table th {
        font-size: 0.8rem;
    }
    
    /* Badge in table */
    .table .badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    /* Action buttons in table */
    .table .btn {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .table .btn-sm {
        padding: 3px 6px;
        font-size: 0.75rem;
    }
}

/* ============================================
   Cards - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Dashboard cards */
    .dashboard-card {
        margin-bottom: 20px;
        border-radius: 10px;
    }
    
    .step-card {
        margin-bottom: 15px;
        padding: 12px;
    }
    
    /* Card headers */
    .card-header-custom {
        padding: 15px !important;
    }
    
    .card-header-custom h4 {
        font-size: 1.1rem !important;
    }
    
    /* Card body */
    .card-body-custom {
        padding: 15px !important;
    }
    
    /* Alert boxes */
    .alert {
        padding: 15px !important;
        font-size: 0.9rem;
    }
    
    .alert-heading {
        font-size: 1rem !important;
    }
    
    .alert .d-flex {
        flex-direction: column;
    }
    
    .alert .me-3 {
        margin-right: 0 !important;
        margin-bottom: 10px;
        text-align: center;
    }
}

/* ============================================
   Grid System - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Force single column on mobile */
    .col-lg-3,
    .col-lg-4,
    .col-lg-6,
    .col-md-3,
    .col-md-4,
    .col-md-6 {
        margin-bottom: 15px;
    }
    
    /* Dashboard steps - single column */
    .row.g-3 > .col-md-6.col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================
   Images - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .img-fluid {
        max-width: 100%;
        height: auto;
    }
    
    /* Logo */
    .logo img,
    .navbar-brand img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================
   Navigation & Header - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Header buttons */
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 15px;
    }
    
    .d-flex.justify-content-between .btn {
        width: 100%;
        margin-top: 10px;
    }
    
    /* Back button */
    .btn-outline-secondary {
        width: 100%;
        margin-top: 10px;
    }
}

/* ============================================
   Progress Bars - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    .progress {
        height: 20px !important;
    }
    
    .progress-bar {
        font-size: 0.75rem;
        padding: 0 5px;
    }
}

/* ============================================
   Modals & Popups - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        border-radius: 10px;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 15px;
    }
    
    /* SweetAlert2 responsive */
    .swal2-popup {
        width: 90% !important;
        max-width: 400px !important;
        padding: 20px !important;
    }
    
    .swal2-title {
        font-size: 1.2rem !important;
    }
    
    .swal2-content {
        font-size: 0.9rem !important;
    }
}

/* ============================================
   Upload Forms - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* File input */
    .form-control[type="file"] {
        font-size: 14px;
        padding: 8px;
    }
    
    /* Upload card */
    .card.shadow-lg {
        border-radius: 15px !important;
    }
    
    /* Bank info card */
    .card.border-primary {
        margin-bottom: 15px;
    }
    
    .card.border-primary .card-body {
        padding: 15px !important;
    }
    
    .card.border-primary .row {
        margin: 0;
    }
    
    .card.border-primary .col-md-6 {
        margin-bottom: 10px;
    }
}

/* ============================================
   Tables in Cards - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    .table-responsive {
        margin: -15px;
        padding: 0;
    }
    
    .table-responsive .table {
        margin: 0;
    }
}

/* ============================================
   Text & Typography - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Prevent text overflow */
    * {
        max-width: 100%;
    }
    
    /* Long text */
    .text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Small text */
    small {
        font-size: 0.8rem;
    }
    
    /* Code blocks */
    code {
        font-size: 0.85rem;
        word-break: break-all;
    }
}

/* ============================================
   Buttons - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Button groups */
    .d-grid .btn {
        width: 100%;
    }
    
    /* Button with icon */
    .btn i {
        margin-right: 5px;
    }
    
    /* Full width buttons */
    .btn.w-100 {
        width: 100% !important;
    }
    
    /* Button spacing */
    .d-grid.gap-2 {
        gap: 10px !important;
    }
}

/* ============================================
   Input Groups - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    .input-group {
        flex-wrap: wrap;
    }
    
    .input-group-lg {
        flex-direction: column;
    }
    
    .input-group-lg .input-group-text {
        width: 100%;
        border-radius: 8px 8px 0 0 !important;
    }
    
    .input-group-lg .form-control {
        border-radius: 0 0 8px 8px !important;
        width: 100%;
    }
    
    .input-group-lg .btn {
        width: 100%;
        margin-top: 10px;
        border-radius: 8px !important;
    }
}

/* ============================================
   Login & Register Forms - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    .login-section,
    .register-section {
        padding: 30px 15px;
        min-height: auto;
    }
    
    .login-card,
    .register-card {
        margin: 0;
        border-radius: 15px;
    }
    
    .login-header,
    .register-header {
        padding: 20px 15px;
    }
    
    .login-body,
    .register-body {
        padding: 20px 15px;
    }
}

/* ============================================
   Dashboard - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Dashboard container */
    .content-area {
        padding: 15px !important;
    }
    
    /* Progress section */
    .dashboard-card .card-body {
        padding: 15px !important;
    }
    
    /* Step cards in row */
    .row.g-3 {
        margin: 0;
    }
    
    .row.g-3 > * {
        padding: 0 7.5px;
    }
}

/* ============================================
   Admin Pages - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Admin data card */
    .data-card {
        margin-bottom: 20px;
    }
    
    /* Search box */
    .input-group {
        margin-bottom: 15px;
    }
    
    /* Filter buttons */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 5px;
    }
}

/* ============================================
   QR Code View - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    .qr-code-container {
        text-align: center;
    }
    
    .qr-code-container .col-md-6 {
        margin-bottom: 20px;
    }
}

/* ============================================
   Very Small Screens (320px - 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Extra small padding */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .card-body {
        padding: 15px 10px !important;
    }
    
    /* Smaller fonts */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    /* Smaller buttons */
    .btn-lg {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    /* Smaller form controls */
    .form-control-lg {
        padding: 10px 12px;
        font-size: 16px !important;
    }
    
    /* Tighter spacing */
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    .p-4 {
        padding: 1rem !important;
    }
    
    .p-5 {
        padding: 1rem !important;
    }
}

/* ============================================
   Landscape Mobile (max-height: 500px)
   ============================================ */
@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
    .login-section,
    .register-section {
        padding: 20px 15px;
        min-height: auto;
    }
    
    .sidebar {
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* ============================================
   Print Styles (Optional)
   ============================================ */
@media print {
    .sidebar,
    .mobile-menu-toggle,
    .btn,
    .navbar {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
}