/* assets/mobile-app.css
   ============================================================
   Poore ZenoRestro project (customer site, admin, branch, kitchen,
   user dashboard) me include hoti hai. Do kaam karti hai:

   1. PWA / "app jaisa" feel — full screen, no browser chrome bounce,
      safe-area padding (notch/home-indicator wale phones ke liye).

   2. Common responsive bugs fix — jinki wajah se buttons chhup jaate
      the ya cut ho jaate the chhoti screens pe: overflow wrapping,
      horizontal scroll on toolbars/action-bars, minimum touch target
      size, aur fixed-width containers ko flexible banaya.
   ============================================================ */

/* ---------- 1. App-like full-screen feel ---------- */
html {
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    min-height: 100%;
    min-height: 100dvh;
    overscroll-behavior-y: contain;      /* pull-to-refresh bounce band karta hai jaisa apps me hota hai */
    -webkit-tap-highlight-color: transparent;
}

/* Notch / home-indicator wale phones (iPhone etc.) ke liye safe area padding */
.safe-area-top    { padding-top: env(safe-area-inset-top); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Fixed top/bottom bars ko notch ke peeche chupne se bachata hai */
.app-topbar, header.site-header, .navbar, .top-nav {
    padding-top: max(env(safe-area-inset-top), 0px);
}
.app-bottombar, .bottom-nav, .mobile-bottom-bar {
    padding-bottom: max(env(safe-area-inset-bottom), 10px);
}

/* ---------- 2. Buttons/actions chhupne se rokna ---------- */

@media (max-width: 768px) {

    /* Kisi bhi button-row / action-bar / toolbar ko wrap karne do,
       taaki buttons overflow me chhup na jayein — screen se bahar
       jaane ki jagah neeche wrap ho jayein. */
    .btn-group, .action-bar, .toolbar, .actions, .button-row,
    .card-actions, .form-actions, .modal-actions, .table-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow-x: visible;
    }

    /* Har button ka minimum touch-friendly size aur text wrap na ho */
    button, .btn, a.btn, input[type="submit"], input[type="button"] {
        min-height: 40px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Agar koi container fixed/large width ki wajah se horizontal
       scroll create kar raha ho aur buttons screen ke bahar chale
       jaate hon, to unhe screen width ke andar rakho */
    .container, .wrapper, .page, .content, .dashboard, .panel {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Sirf data-tables ko horizontally scroll karne do (data table
       chhote screen pe genuinely wide ho sakti hai), buttons ko nahi */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sidebar/modal jaise elements jo screen se bahar overflow karte
       hain unhe screen ke andar fit karo */
    .sidebar, .modal, .drawer, .offcanvas {
        max-width: 92vw;
    }

    /* Grid layouts jo columns me buttons chhupa dete the, unhe
       single column me stack karo chhoti screen pe */
    .grid, .btn-grid, .quick-actions {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 420px) {
    .grid, .btn-grid, .quick-actions {
        grid-template-columns: 1fr !important;
    }
}