/* ═══════════════════════════════════════════════════════════════
   PayUPI – Mobile Responsive Styles (mobile.css)
   Covers: Tablets (≤991px), Small Tablets (≤768px),
           Phones (≤576px), Small Phones (≤480px), Tiny (≤360px)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   TABLET BREAKPOINT (≤ 991px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* ───── Sidebar: off-canvas ───── */
    .sidebar {
        transform: translateX(calc(-1 * var(--sidebar-w)));
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

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

    /* ───── Content ───── */
    .content-area {
        padding: 20px 16px 32px;
    }

    .topbar {
        padding: 12px 16px;
    }

    .topbar h5 {
        font-size: 15px;
    }

    /* ───── Stat Cards ───── */
    .stat-card {
        padding: 18px 16px;
    }

    .stat-card .stat-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .stat-card .stat-value {
        font-size: 24px;
    }

    /* ───── Cards ───── */
    .card-custom .card-header {
        padding: 16px 20px;
        font-size: 14px;
    }

    .card-custom .card-body {
        padding: 20px;
    }

    /* ───── Gateway Page ───── */
    .row.g-4 > .col-md-4,
    .row.g-4 > .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ───── Tables ───── */
    .table-responsive {
        margin: 0 -1px;
    }

    .table thead th,
    .table tbody td {
        padding: 10px 12px;
    }

    /* ───── DataTables ───── */
    div.dataTables_wrapper .dataTables_length,
    div.dataTables_wrapper .dataTables_filter {
        padding: 14px 16px 10px;
    }

    div.dataTables_wrapper .dataTables_filter input {
        min-width: 180px;
    }

    /* ───── Modals ───── */
    .modal-dialog {
        margin: 16px;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-header,
    .modal-footer {
        padding: 16px 20px;
    }

    /* ───── API Docs ───── */
    .api-endpoint {
        padding: 16px;
    }

    .api-endpoint .d-flex {
        flex-wrap: wrap;
    }

    .api-endpoint code {
        font-size: 11px;
        word-break: break-all;
    }

    pre.code-block {
        font-size: 11.5px;
        padding: 14px 16px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SMALL TABLET BREAKPOINT (≤ 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ───── Stat Cards: 2-column grid ───── */
    .row.g-3 > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .stat-card .stat-value {
        font-size: 22px;
    }

    .stat-card .stat-label {
        font-size: 11.5px;
    }

    .stat-card .stat-sub {
        font-size: 11px;
    }

    /* ───── Topbar ───── */
    .topbar .admin-name {
        display: none;
    }

    .topbar .admin-avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    /* ───── Forms ───── */
    .form-control,
    .form-select {
        font-size: 14px;
        padding: 10px 12px;
    }

    /* ───── Tables: horizontal scroll ───── */
    .table {
        font-size: 12px;
    }

    .table thead th {
        font-size: 10.5px;
        padding: 10px 10px;
    }

    .table tbody td {
        padding: 10px 10px;
        font-size: 12px;
    }

    .table code {
        font-size: 10.5px;
        padding: 2px 6px;
    }

    /* ───── Badges ───── */
    .badge-success,
    .badge-warning,
    .badge-danger,
    .badge-info {
        font-size: 10.5px;
        padding: 3px 10px;
    }

    /* ───── Buttons ───── */
    .btn-action {
        font-size: 12px;
        padding: 7px 14px;
    }

    /* ───── Dropdown ───── */
    .dropdown-menu {
        font-size: 12px;
    }

    .dropdown-item {
        padding: 7px 12px;
    }

    /* ───── Select2 ───── */
    .select2-container--bootstrap-5 .select2-selection {
        min-height: 38px;
        padding: 4px 8px;
        font-size: 13px;
    }

    /* ───── Cards ───── */
    .card-custom .card-body {
        padding: 16px;
    }

    .card-custom .card-header {
        padding: 14px 16px;
        font-size: 13.5px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PHONE BREAKPOINT (≤ 576px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {

    /* ───── Stat Cards ───── */
    .stat-card {
        padding: 16px 14px;
    }

    .stat-card .stat-value {
        font-size: 20px;
    }

    .stat-card .stat-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    /* ───── Content Area ───── */
    .content-area {
        padding: 16px 12px 28px;
    }

    .topbar {
        padding: 10px 12px;
    }

    .topbar h5 {
        font-size: 14px;
    }

    /* ───── Cards ───── */
    .card-custom .card-body {
        padding: 14px 12px;
    }

    .card-custom .card-header {
        padding: 12px 14px;
        font-size: 13px;
    }

    /* ───── DataTables – Full Width ───── */
    div.dataTables_wrapper .dataTables_length,
    div.dataTables_wrapper .dataTables_filter {
        padding: 12px 12px 8px;
        float: none !important;
        text-align: left !important;
    }

    div.dataTables_wrapper .dataTables_filter input {
        min-width: 100%;
        width: 100% !important;
        margin-left: 0 !important;
    }

    div.dataTables_wrapper .dataTables_info,
    div.dataTables_wrapper .dataTables_paginate {
        padding: 10px 12px;
        float: none !important;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 5px 8px !important;
        font-size: 11px !important;
        min-width: 30px;
    }

    div.dataTables_wrapper .dataTables_length label,
    div.dataTables_wrapper .dataTables_filter label {
        font-size: 12px;
        flex-wrap: wrap;
    }

    div.dataTables_wrapper .dataTables_length select {
        min-width: 60px;
        max-width: 80px;
        font-size: 12px;
        padding: 6px 28px 6px 10px;
    }

    /* ───── Info Panel ───── */
    .info-panel {
        padding: 12px;
    }

    .info-panel .info-label {
        font-size: 11px;
    }

    /* ───── Empty State ───── */
    .empty-state {
        padding: 32px 16px;
    }

    .empty-state i {
        font-size: 36px;
    }

    .empty-state p {
        font-size: 13px;
    }

    /* ───── User Actions ───── */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }

    /* ───── Modal ───── */
    .modal-dialog {
        margin: 8px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-header {
        padding: 14px 16px;
    }

    .modal-header .modal-title {
        font-size: 15px;
    }

    .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* ───── Buttons ───── */
    .btn-action {
        font-size: 12px;
        padding: 7px 12px;
    }

    .btn-primary {
        font-size: 14px;
    }

    /* ───── Sidebar ───── */
    .sidebar {
        width: 270px;
    }

    .sidebar .brand {
        padding: 18px 20px 16px;
    }

    .sidebar .brand h5 {
        font-size: 14px;
    }

    .sidebar .nav-link {
        font-size: 13px;
        padding: 8px 14px;
    }

    .sidebar .nav-section {
        padding: 16px 24px 4px;
        font-size: 9px;
    }

    /* ───── API Docs ───── */
    .api-endpoint {
        padding: 12px;
    }

    .api-endpoint .d-flex {
        flex-direction: column;
        gap: 6px !important;
    }

    .api-endpoint .table {
        font-size: 11px;
    }

    .api-endpoint .table thead th {
        font-size: 10px;
        padding: 8px 8px;
    }

    .api-endpoint .table tbody td {
        padding: 8px 8px;
        font-size: 11px;
    }

    .api-endpoint code {
        font-size: 10.5px;
    }

    pre.code-block {
        font-size: 10.5px;
        padding: 12px 14px;
        border-radius: var(--radius-sm);
    }

    .method-badge {
        font-size: 10px;
        padding: 2px 10px;
    }

    /* ───── Alerts ───── */
    .alert {
        font-size: 12.5px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SMALL PHONE BREAKPOINT (≤ 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ───── Login Page ───── */
    .login-card {
        padding: 32px 24px 28px;
        margin: 16px;
        border-radius: 20px;
    }

    .login-card h2 {
        font-size: 21px;
    }

    .login-card .subtitle {
        font-size: 13px;
    }

    .brand-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        margin-bottom: 20px;
    }

    .brand-icon svg {
        width: 24px;
        height: 24px;
    }

    body.login-page .form-control {
        padding: 12px 14px;
        font-size: 13px;
    }

    body.login-page .btn-primary {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* ───── Install Page ───── */
    .install-card {
        padding: 28px 20px;
        margin: 12px;
        border-radius: 14px;
    }

    .install-card h2 {
        font-size: 20px;
    }

    .install-card .subtitle {
        font-size: 13px;
    }

    .success-icon {
        width: 64px;
        height: 64px;
    }

    .success-icon svg {
        width: 32px;
        height: 32px;
    }

    body.install-page .form-control {
        padding: 10px 14px;
        font-size: 13px;
    }

    body.install-page .btn-primary {
        padding: 11px 20px;
        font-size: 13px;
    }

    /* ───── Stat Cards: Stack ───── */
    .row.g-3 > .col-md-3.col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

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

    .stat-card .stat-value {
        font-size: 18px;
    }

    .stat-card .stat-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
        border-radius: 8px;
    }

    .stat-card .stat-label {
        font-size: 10.5px;
    }

    .stat-card .stat-sub {
        font-size: 10px;
    }

    /* ───── Topbar ───── */
    .topbar .admin-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
        border-radius: 6px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SUCCESS PAGE – MOBILE (≤ 500px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {

    body.success-page {
        padding: 0;
        align-items: flex-start;
    }

    body.success-page::before {
        display: none;
    }

    body.success-page .card {
        border-radius: 0;
        min-height: 100vh;
        max-width: 100%;
        box-shadow: none;
        animation: none;
    }

    body.success-page .card-header {
        padding: 32px 20px 24px;
    }

    body.success-page .card-header h2 {
        font-size: 22px;
    }

    .amount-big {
        font-size: 38px;
    }

    .amount-big span {
        font-size: 20px;
    }

    .details {
        padding: 24px 20px;
    }

    .detail-row {
        padding: 12px 0;
    }

    .detail-label {
        font-size: 12px;
    }

    .detail-value {
        font-size: 13px;
    }

    .btn-actions {
        padding: 0 20px 24px;
    }

    .whatsapp-btn,
    .btn-redirect {
        padding: 14px;
        font-size: 14px;
    }

    .auto-redirect {
        padding: 0 20px 20px;
    }

    .status-icon {
        width: 68px;
        height: 68px;
    }

    .status-icon svg {
        width: 32px;
        height: 32px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TEST PAYMENT PAGE – MOBILE (≤ 500px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {

    body.test-page {
        padding: 0;
        align-items: flex-start;
    }

    body.test-page::before {
        display: none;
    }

    .test-card {
        border-radius: 0;
        min-height: 100vh;
        max-width: 100%;
        box-shadow: none;
        animation: none;
    }

    .card-top {
        padding: 36px 20px 28px;
    }

    .card-top h1 {
        font-size: 26px;
    }

    .card-top p {
        font-size: 13px;
    }

    .brand-badge {
        font-size: 11px;
        padding: 6px 14px;
    }

    .card-body-custom {
        padding: 24px 20px;
    }

    .amount-buttons {
        gap: 8px;
    }

    .amount-btn {
        font-size: 18px;
        padding: 14px 6px 12px;
    }

    .amount-btn small {
        font-size: 9px;
    }

    .whatsapp-note {
        font-size: 12px;
        padding: 12px 14px;
    }

    body.test-page .form-control {
        padding: 12px 14px;
        font-size: 13px;
    }

    .btn-pay {
        padding: 16px;
        font-size: 16px;
    }

    .secure-note {
        font-size: 10px;
        gap: 4px;
    }

    .back-link a {
        font-size: 12px;
    }

    .alert-danger {
        font-size: 12px;
        padding: 12px 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TINY PHONE (≤ 360px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

    /* ───── Login ───── */
    .login-card {
        padding: 24px 18px 22px;
        margin: 10px;
        border-radius: 16px;
    }

    .login-card h2 {
        font-size: 19px;
    }

    .brand-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .brand-icon svg {
        width: 22px;
        height: 22px;
    }

    /* ───── Install ───── */
    .install-card {
        padding: 22px 16px;
        margin: 8px;
        border-radius: 12px;
    }

    .install-card h2 {
        font-size: 18px;
    }

    /* ───── Admin Panel ───── */
    .content-area {
        padding: 12px 10px 24px;
    }

    .topbar {
        padding: 8px 10px;
    }

    .topbar h5 {
        font-size: 13px;
    }

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

    .stat-card .stat-value {
        font-size: 16px;
    }

    .stat-card .stat-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
        border-radius: 6px;
    }

    .card-custom .card-body {
        padding: 12px 10px;
    }

    .card-custom .card-header {
        padding: 10px 12px;
        font-size: 12px;
    }

    /* ───── Table ───── */
    .table {
        font-size: 11px;
    }

    .table thead th {
        font-size: 9.5px;
        padding: 8px;
    }

    .table tbody td {
        padding: 8px;
        font-size: 11px;
    }

    /* ───── Test Page ───── */
    .amount-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .amount-btn {
        font-size: 16px;
        padding: 12px 6px 10px;
    }

    .card-top h1 {
        font-size: 22px;
    }

    .btn-pay {
        padding: 14px;
        font-size: 15px;
    }

    /* ───── Success Page ───── */
    .amount-big {
        font-size: 32px;
    }

    .amount-big span {
        font-size: 18px;
    }

    body.success-page .card-header h2 {
        font-size: 20px;
    }

    .status-icon {
        width: 60px;
        height: 60px;
    }

    .status-icon svg {
        width: 28px;
        height: 28px;
    }

    .details {
        padding: 18px 16px;
    }

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

    .detail-value {
        font-size: 12px;
    }

    .btn-actions {
        padding: 0 16px 20px;
    }

    .whatsapp-btn,
    .btn-redirect {
        padding: 12px;
        font-size: 13px;
    }

    /* ───── Sidebar ───── */
    .sidebar {
        width: 260px;
    }

    .sidebar .brand {
        padding: 16px 16px 14px;
        gap: 10px;
    }

    .sidebar .brand-icon-wrap {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .sidebar .brand h5 {
        font-size: 13px;
    }

    .sidebar .nav-link {
        font-size: 12px;
        padding: 7px 12px;
        gap: 9px;
    }

    .sidebar .nav-link i {
        font-size: 15px;
        width: 18px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE (max-height: 450px + landscape)
   ═══════════════════════════════════════════════════════════════ */
@media (max-height: 450px) and (orientation: landscape) {

    body.login-page {
        padding: 16px;
    }

    .login-card {
        padding: 24px 32px;
        max-width: 380px;
    }

    .brand-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 12px;
    }

    .login-card h2 {
        font-size: 19px;
    }

    body.success-page {
        padding: 12px;
        align-items: center;
    }

    body.success-page .card {
        border-radius: var(--radius-xl);
        min-height: auto;
        max-width: 460px;
    }

    body.success-page .card-header {
        padding: 20px 24px 18px;
    }

    .amount-big {
        font-size: 32px;
        margin-top: 8px;
    }

    .status-icon {
        width: 56px;
        height: 56px;
    }

    .details {
        padding: 16px 20px;
    }

    .detail-row {
        padding: 10px 0;
    }

    body.test-page {
        padding: 12px;
        align-items: center;
    }

    .test-card {
        border-radius: var(--radius-xl);
        min-height: auto;
        max-width: 440px;
    }

    .card-top {
        padding: 24px 24px 20px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */
@media print {
    .sidebar,
    .sidebar-overlay,
    .topbar,
    .mobile-toggle,
    .btn-actions,
    .auto-redirect,
    .back-link,
    .whatsapp-note,
    .secure-note {
        display: none !important;
    }

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

    body {
        background: #fff !important;
    }

    .card-custom,
    .stat-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}