/* =========================================
   RESPONSIVE MOBILE - PUBLIC PAGES
   CSS responsive untuk halaman publik
   (dashboard, payment, tagihan, dll)
   ========================================= */

/* ===== BASE MOBILE STYLES ===== */
@media (max-width: 767px) {

    /* Body & container */
    body {
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .container,
    .main-container {
        padding: 12px !important;
        max-width: 100% !important;
    }

    /* Headers */
    h1 {
        font-size: 22px !important;
    }

    h2 {
        font-size: 19px !important;
    }

    h3 {
        font-size: 17px !important;
    }

    h4 {
        font-size: 15px !important;
    }

    /* Card/panel */
    .card,
    .panel,
    .box {
        margin: 8px 0 !important;
        padding: 14px !important;
        border-radius: 8px !important;
    }

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

    .btn-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .btn:last-child {
        margin-bottom: 0 !important;
    }

    /* Forms */
    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevent zoom on iOS */
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .form-group {
        margin-bottom: 14px !important;
    }

    label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

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

    table {
        min-width: 600px !important;
        font-size: 13px !important;
    }

    table th,
    table td {
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* Grid layouts - stack vertically */
    .row,
    .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .col,
    [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Info cards */
    .info-card,
    .stat-card {
        margin-bottom: 12px !important;
        padding: 14px !important;
    }

    .info-card h3,
    .stat-card h3 {
        font-size: 16px !important;
    }

    /* Status badges */
    .badge,
    .status,
    .label {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* Navigation */
    nav {
        padding: 10px 12px !important;
    }

    nav a {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* Modal/popup */
    .modal,
    .popup {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    .modal-header,
    .popup-header {
        padding: 14px !important;
    }

    .modal-body,
    .popup-body {
        padding: 14px !important;
    }

    /* Lists */
    ul,
    ol {
        padding-left: 20px !important;
    }

    li {
        margin-bottom: 8px !important;
    }

    /* Footer */
    footer {
        padding: 14px 12px !important;
        font-size: 12px !important;
    }

    /* Image responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Alert/notification */
    .alert,
    .notification,
    .message {
        padding: 12px !important;
        font-size: 13px !important;
        margin: 10px 0 !important;
    }

    /* Payment specific */
    .payment-method {
        margin-bottom: 12px !important;
    }

    .payment-info {
        padding: 12px !important;
        font-size: 13px !important;
    }

    .qr-code {
        max-width: 250px !important;
        margin: 0 auto !important;
    }

    /* Invoice/billing */
    .invoice-header {
        padding: 12px !important;
    }

    .invoice-item {
        padding: 10px !important;
        font-size: 13px !important;
    }

    .invoice-total {
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Dashboard widgets */
    .widget {
        margin-bottom: 12px !important;
        padding: 14px !important;
    }

    .widget-title {
        font-size: 15px !important;
    }

    /* Chart containers */
    .chart-container {
        height: 250px !important;
        overflow-x: auto !important;
    }
}

/* ===== TABLET STYLES ===== */
@media (min-width: 768px) and (max-width: 1023px) {

    .container {
        padding: 18px !important;
    }

    /* 2 columns for tablets */
    .row,
    .grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .col-full {
        grid-column: 1 / -1 !important;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 896px) and (orientation: landscape) {

    /* Reduce vertical spacing in landscape */
    .card,
    .panel {
        padding: 10px !important;
        margin: 6px 0 !important;
    }

    h1 {
        font-size: 18px !important;
    }

    h2 {
        font-size: 16px !important;
    }

    h3 {
        font-size: 15px !important;
    }

    .btn {
        padding: 8px 12px !important;
    }

    input,
    select,
    textarea {
        padding: 8px !important;
    }
}

/* ===== 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;
    }
}

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

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

/* Padding & margin utilities */
@media (max-width: 767px) {
    .p-mobile-0 {
        padding: 0 !important;
    }

    .p-mobile-1 {
        padding: 8px !important;
    }

    .p-mobile-2 {
        padding: 12px !important;
    }

    .p-mobile-3 {
        padding: 16px !important;
    }

    .m-mobile-0 {
        margin: 0 !important;
    }

    .m-mobile-1 {
        margin: 8px !important;
    }

    .m-mobile-2 {
        margin: 12px !important;
    }

    .m-mobile-3 {
        margin: 16px !important;
    }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (max-width: 767px) {

    /* Larger tap targets */
    a,
    button,
    [role="button"],
    [onclick] {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Better tap highlight */
    a,
    button {
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.2);
    }

    /* No text selection on UI elements */
    button,
    .btn {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ===== FIX COMMON ISSUES ===== */

/* Prevent zoom on input focus (iOS) */
@media (max-width: 767px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

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

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

/* Better font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}