/* ============================================================
   GLOBAL RESPONSIVE CSS - NiceSeva Portal
   Auto-adjusts display for Mobile, Tablet, Laptop & Desktop
   ============================================================ */

/* ============ BASE RESPONSIVE FIXES ============ */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

input, select, textarea, button {
    max-width: 100%;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ============ TABLE RESPONSIVE WRAPPER ============ */
.table-responsive,
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* ============ TOPBAR RESPONSIVE ============ */
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
}

.topbar-left .page-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ============ CONTENT AREA ============ */
.content-wrapper {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 25px;
}

/* ============ SERVICE PAGE GRIDS ============ */
.main-container,
.main-grid,
.recharge-container {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .main-container,
    .main-grid,
    .recharge-container {
        grid-template-columns: 1fr !important;
    }
}

/* ============ FORM RESPONSIVE ============ */
.form-row {
    display: grid;
    gap: 15px;
}

.form-group {
    min-width: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

/* ============ CARDS RESPONSIVE ============ */
.card, .modern-card {
    max-width: 100%;
    box-sizing: border-box;
}

/* ============ STATS GRID ============ */
.stats-grid {
    display: grid;
    gap: 15px;
    width: 100%;
}

/* ========================================
           DESKTOP (> 1200px)
   ======================================== */
@media (min-width: 1201px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
         LAPTOP / SMALL DESKTOP (992px - 1200px)
   ======================================== */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    
    .content-wrapper {
        padding: 25px 20px !important;
    }
}

/* ========================================
              TABLET (768px - 991px)
   ======================================== */
@media (max-width: 991px) {
    /* Layout */
    .admin-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1050;
    }
    
    .admin-sidebar.active {
        transform: translateX(0);
    }
    
    .mobile-toggle,
    .mobile-menu-toggle,
    .sidebar-toggle {
        display: flex !important;
    }
    
    .content-wrapper {
        padding: 20px 15px !important;
    }
    
    /* Grid layouts */
    .main-container {
        grid-template-columns: 1fr !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
    
    .filter-grid,
    .filter-form {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Topbar */
    .topbar-balance .balance-amount {
        font-size: 13px;
    }
    
    .user-info .user-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Tables */
    .modern-table,
    .apps-table,
    table {
        display: block;
        width: 100%;
    }
    
    .modern-table thead,
    .apps-table thead {
        display: none;
    }
    
    .modern-table tbody,
    .apps-table tbody,
    .modern-table tr,
    .apps-table tr {
        display: block;
        width: 100%;
    }
    
    .modern-table td,
    .apps-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        border-bottom: 1px solid #f0f0f0;
        text-align: right;
    }
    
    .modern-table td::before,
    .apps-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #374151;
        text-align: left;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    .modern-table tr,
    .apps-table tr {
        margin-bottom: 12px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        overflow: hidden;
    }
    
    /* Recharge transaction grid */
    .transactions-header {
        display: none !important;
    }
    
    .transaction-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 15px !important;
        margin-bottom: 10px;
        border-radius: 10px;
    }
}

/* ========================================
         MOBILE LANDSCAPE (576px - 767px)
   ======================================== */
@media (max-width: 767px) {
    .content-wrapper {
        padding: 70px 12px 15px 12px !important;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stat-card {
        padding: 15px 12px;
    }
    
    .stat-card h3,
    .stat-value {
        font-size: 20px;
    }
    
    .stat-card p,
    .stat-label {
        font-size: 11px;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .filter-grid,
    .filter-form {
        grid-template-columns: 1fr !important;
    }
    
    .form-section,
    .form-body {
        padding: 20px 15px;
    }
    
    .form-group label {
        font-size: 13px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    /* Topbar compact */
    .admin-topbar {
        padding: 0 12px;
        height: auto;
        min-height: 55px;
    }
    
    .page-title {
        font-size: 16px !important;
    }
    
    .topbar-right {
        gap: 8px;
    }
    
    .topbar-balance {
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 15px;
    }
    
    .topbar-balance .btn-sm {
        padding: 3px 8px;
        font-size: 11px;
    }
    
    .notification-dropdown {
        right: -50px;
        width: 280px;
    }
    
    .user-dropdown {
        right: 0;
        min-width: 180px;
    }
    
    .user-info {
        display: none;
    }
    
    .user-menu-btn .fa-chevron-down {
        display: none;
    }
    
    /* Cards */
    .card-body,
    .modern-card-body {
        padding: 15px;
    }
    
    .card-header,
    .modern-card-header {
        padding: 15px;
    }
    
    /* Service cards */
    .service-cards-grid,
    .state-cards-grid {
        justify-content: center;
    }
    
    .service-type-card,
    .state-logo-card {
        min-width: 110px !important;
        flex: 0 0 calc(50% - 10px);
    }
    
    /* Button responsive */
    .btn {
        font-size: 14px;
    }
    
    .btn-lg {
        padding: 12px 20px;
        font-size: 15px;
    }
    
    /* Modals */
    .modal-content,
    .modern-modal-content {
        width: 95% !important;
        max-width: 100% !important;
        margin: 10px auto;
    }
    
    .modal-header,
    .modern-modal-header {
        padding: 18px 20px;
    }
    
    .modal-body,
    .modern-modal-body {
        padding: 20px;
    }
    
    /* Transfer grid */
    .transfer-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Beneficiary grid */
    .bene-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Recharge container */
    .recharge-container {
        grid-template-columns: 1fr !important;
    }
    
    /* DMT tabs */
    .dmt-tabs {
        flex-wrap: wrap;
    }
    
    .dmt-tab {
        flex: 1;
        min-width: 80px;
        font-size: 12px;
        padding: 8px;
    }
    
    /* Page header */
    .page-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start !important;
    }
}

/* ========================================
          MOBILE PORTRAIT (< 576px)
   ======================================== */
@media (max-width: 575px) {
    .content-wrapper {
        padding: 65px 10px 10px 10px !important;
    }
    
    /* Stats - 2 column on small phones too */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .stat-card {
        padding: 12px 10px;
    }
    
    .stat-card .stat-icon,
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .stat-card h3,
    .stat-value {
        font-size: 18px;
    }
    
    /* Topbar */
    .page-title {
        font-size: 14px !important;
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .topbar-balance .balance-amount {
        font-size: 12px;
    }
    
    /* Notifications hide badge number */
    .notification-badge {
        font-size: 9px;
        min-width: 16px;
        height: 16px;
    }
    
    /* Service type cards - 2 per row */
    .service-type-card,
    .state-logo-card {
        min-width: 100px !important;
        flex: 0 0 calc(50% - 8px);
    }

    .service-type-card .card-icon,
    .state-logo-card img {
        width: 45px;
        height: 45px;
    }
    
    .service-type-card span,
    .state-logo-card span {
        font-size: 11px;
    }
    
    /* Form */
    .form-section {
        border-radius: 12px;
        margin: 0;
    }
    
    .form-section .form-header,
    .section-header {
        padding: 15px;
        font-size: 16px;
    }
    
    .form-body {
        padding: 15px 12px;
    }
    
    /* Upload area */
    .upload-area {
        padding: 20px 15px;
    }
    
    .upload-area i {
        font-size: 30px;
    }
    
    .upload-area span,
    .upload-area p {
        font-size: 12px;
    }
    
    /* Subscription plan section */
    .subscription-card,
    [style*="max-width: 600px"] {
        max-width: 100% !important;
        margin: 15px auto !important;
    }
    
    /* Recent applications scroll */
    .applications-section,
    .recent-section {
        max-height: 400px;
        overflow-y: auto;
    }
    
    /* PDF modal */
    .pdf-modal-content {
        width: 98% !important;
        height: 90vh !important;
    }
    
    /* Actions */
    .action-btns,
    .action-buttons {
        flex-direction: column;
        gap: 5px;
    }
    
    .action-btns .btn,
    .action-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    .btn-sm {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ========================================
      VERY SMALL PHONES (< 400px)
   ======================================== */
@media (max-width: 399px) {
    .content-wrapper {
        padding: 60px 8px 8px 8px !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    
    .stat-card {
        padding: 10px 8px;
    }
    
    .stat-card h3,
    .stat-value {
        font-size: 16px;
    }
    
    .stat-card .stat-icon,
    .stat-icon {
        width: 35px;
        height: 35px;
        font-size: 15px;
    }
    
    .topbar-balance {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .page-title {
        font-size: 13px !important;
        max-width: 90px;
    }
    
    .form-group label {
        font-size: 12px;
    }
    
    .form-group input,
    .form-group select {
        font-size: 13px;
        padding: 9px 10px;
    }
    
    .btn {
        font-size: 13px;
        padding: 10px 15px;
    }
    
    .btn-lg {
        font-size: 14px;
        padding: 11px 18px;
    }
    
    .service-type-card,
    .state-logo-card {
        min-width: 90px !important;
    }
    
    /* Wallet/Money amounts */
    .balance-display,
    [style*="font-size: 48px"],
    [style*="font-size: 36px"],
    [style*="font-size: 32px"] {
        font-size: 28px !important;
    }
}

/* ========================================
     LANDSCAPE MODE FIXES (short height)
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .admin-sidebar {
        height: 100vh;
        overflow-y: auto;
    }
    
    .content-wrapper {
        padding-top: 60px !important;
    }
    
    .sidebar-logo {
        padding: 10px 15px;
    }
    
    .sidebar-user-card {
        display: none;
    }
}

/* ========================================
     PRINT STYLES
   ======================================== */
@media print {
    .admin-sidebar,
    .admin-topbar,
    .mobile-toggle,
    .sidebar-overlay,
    .topbar-right,
    .action-btns,
    .action-buttons,
    .btn,
    .no-print {
        display: none !important;
    }
    
    .admin-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .content-wrapper {
        padding: 0 !important;
    }
    
    body {
        background: #fff !important;
    }
    
    .card, .modern-card {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
}

/* ========================================
     TOUCH DEVICE OPTIMIZATIONS
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn, button, a.btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .sidebar-nav a {
        min-height: 48px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
    }
    
    /* Remove hover effects that cause sticky on touch */
    .btn:hover {
        transform: none;
    }
    
    .card:hover {
        transform: none;
    }
}

/* ========================================
     SAFE AREA (Notch phones)
   ======================================== */
@supports (padding: max(0px)) {
    .admin-topbar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    
    .content-wrapper {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    
    .admin-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ======================================================================
   MOBILE SAFETY NET  (2026-07-31)
   ----------------------------------------------------------------------
   Ye block sabse ANT me hai, isliye har purane rule ke BAAD chalta hai.
   Maqsad ek hi: chhoti screen par page kabhi bhi "toota hua" na lage —
   na side me khiske, na koi button chhoot jaye, na zoom ho kar sab bada
   ho jaye. Kisi bhi page ka apna design nahi badla jaata, sirf wo cheezein
   sambhali jaati hain jo phone par dikkat karti hain.
   ====================================================================== */

@media (max-width: 991px) {

    /* 1) SIDE-SCROLL BAND.
       Sabse aam mobile shikayat: page daayein-baayein khisak jaata hai aur
       tap galat jagah lagti hai. Wajah aksar koi ek chaudi cheez hoti hai
       (table, pre, iframe, lambi URL). Body ko hi rok dete hain. */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 2) Koi bhi media/embed apne dabbe se bahar na jaye. */
    img, video, canvas, svg, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }

    /* 3) Chaudi TABLE ko apne andar scroll karao — page ko na kheenche.
       Jin tables ke paas pehle se .table-responsive hai unpar koi asar nahi. */
    table {
        max-width: 100%;
    }
    .table-responsive,
    .table-wrap,
    .card-body > table,
    .settings-section > table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 4) Lamba text (URL, base64, request id) shabd ke beech se toot jaye,
          warna wahi ek line poore page ko chauda kar deti hai. */
    td, th, p, div, span, a, code, pre {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    pre { white-space: pre-wrap; }

    /* 5) TAP TARGET — ungli se dabane layak.
          44px Apple/Google dono ki sifarish hai. */
    button, .btn, input[type="submit"], input[type="button"],
    .server-btn, .nav-item, .msv-switch {
        min-height: 44px;
    }

    /* 6) iOS ka auto-ZOOM rokna.
          16px se chhota font wale input par iPhone form par pahunchte hi
          zoom kar deta hai, aur phir page tirchha reh jaata hai —
          user ko lagta hai "kuch kaam nahi kar raha". */
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* 7) Do-column grid phone par ek column. Jo pages `grid-template-columns`
          inline likhte hain, unke liye bhi. */
    .main-container,
    .main-grid,
    .row-2col,
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* 8) Modal / popup screen ke andar rahe. */
    .modal-dialog, .swal2-popup {
        max-width: calc(100vw - 24px) !important;
    }
}

/* Bahut chhoti screen (chhote Android phone) */
@media (max-width: 400px) {
    .content-wrapper, .card-body, .settings-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* Server tiles 4 ki jagah 2 ki line me */
    .server-selector {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}