/* ==========================================================================
   Polosys — Mobile responsive overrides
   Section 1-4  : Auth / landing pages  (loaded last by _Theme2Layout.cshtml)
   Section 5+   : Admin portal pages    (loaded last by HeadCSS.cshtml)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Small phones (<= 575.98px): stack every form field full width
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Stack half/third/quarter width form columns into a single column */
    form .row > .col-2,
    form .row > .col-3,
    form .row > .col-4,
    form .row > .col-5,
    form .row > .col-6,
    form .row > .col-7,
    form .row > .col-8,
    form .row > .col-9,
    form .row > [class*="col-sm-"]:not([class*="col-12"]),
    form .row > [class*="col-md-"]:not([class*="col-12"]):not([class*="col-sm-"]) {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Fields must never sit flush against the screen edge */
    .contact-form,
    .contact-infobox,
    .contact-formbox {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* 16px keeps iOS Safari / Android WebView from auto-zooming on focus */
    form .form-control,
    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form input[type="tel"],
    form input[type="number"],
    form input[type="search"],
    form select,
    form textarea {
        font-size: 16px !important;
        padding: 11px 46px 11px 16px !important;
        min-height: 44px;
        border-radius: 10px;
    }

    /* Room for the trailing icon / eye toggle */
    form .form-group > img,
    form .form-group .pwd-toggle {
        right: 14px !important;
    }

    /* Verify-email button sits under the email field, full width */
    #sendOtpGrp,
    #otpInputGrp,
    #verifyOtpGrp {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-top: 2px;
    }

    #sendOtpGrp .th-btn,
    #verifyOtpGrp .th-btn {
        width: 100% !important;
        padding: 11px 12px !important;
        font-size: 15px !important;
        min-height: 44px;
    }

    /* Full-width primary buttons with a comfortable tap target */
    .form-btn .th-btn,
    .form-btn button[type="submit"] {
        width: 100%;
        max-width: 100%;
        padding: 13px 20px !important;
        font-size: 15px !important;
        min-height: 46px;
    }

    /* Validation messages must wrap instead of overflowing */
    .text-danger {
        display: block;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
    }

    /* Checkbox row: no squeeze */
    .form-check {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .form-check-label {
        flex: 1;
        line-height: 1.45;
        font-size: 14px;
    }

    /* Google sign-in button is rendered at a fixed 340px — force it to fit */
    #googleSignupBtnContainer {
        max-width: 100%;
        overflow: hidden;
    }

    #googleSignupBtnContainer .g_id_signin,
    #googleSignupBtnContainer .g_id_signin > div,
    #googleSignupBtnContainer iframe {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* "or continue with" divider */
    .form-btn hr {
        min-width: 0;
    }

    /* Remember me / forgot password must stay on one line each */
    .th-form-group {
        flex-wrap: wrap;
        gap: 6px 10px;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .th-form-group .form-check,
    .th-form-group .form-check-label,
    .th-form-group .th-link {
        white-space: nowrap;
        font-size: 14px !important;
    }

    /* Titles must not run into each other */
    .title-area .sec-title {
        font-size: 1.35rem !important;
        line-height: 1.25;
    }

    .title-area .sec-text {
        font-size: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   2. Very small phones (<= 380px): tighten spacing so nothing overflows
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {

    form .form-control,
    form input,
    form select,
    form textarea {
        padding: 10px 42px 10px 14px !important;
        font-size: 16px !important;
    }

    .title-area .sec-title {
        font-size: 1.2rem !important;
    }

    .form-btn .th-btn {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   3. Header: keep the white logo fully inside the blue mask shape
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* The theme only gives the blue shape 60% width here, which leaves the
       tail of the white logo sitting on the white background (invisible). */
    .header-layout1 .logo-bg {
        width: 70%;
        height: 88px;
    }

    .th-header .header-logo {
        max-width: calc(100% - 130px);
    }

    .th-header .header-logo img {
        width: auto;
        max-width: 165px;
        max-height: 46px;
        height: auto;
    }

    .th-header .menu-area {
        min-height: 76px;
    }

    .th-header .menu-area > .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --------------------------------------------------------------------------
   4. Safety net: any horizontally overflowing element gets clipped cleanly
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* ==========================================================================
   5. Admin portal (_Layout) — mobile drawer navigation
   Scoped to <= 991.98px so the desktop web layout is untouched.
   ========================================================================== */

/* Backdrop exists in the DOM on every page — keep it inert on desktop. */
.mobile-nav-close,
.mobile-nav-backdrop {
    display: none;
}

@media (max-width: 991.98px) {

    /* ---- 5.1 Drawer itself: sits above everything, shadowed, full height ---- */
    .vertical-menu {
        top: 75px !important;
        z-index: 1056 !important;
        border-right: 0;
        border-radius: 0 14px 14px 0;
        box-shadow: 10px 0 32px rgba(15, 23, 42, .22);
    }

    .vertical-menu .navbar-brand-box,
    .vertical-menu .vertical-menu-btn {
        display: none;
    }

    /* ---- 5.2 Close button inside the drawer ---- */
    .mobile-nav-close {
        position: absolute;
        top: 10px;
        right: 8px;
        width: 40px;
        height: 40px;
        display: none;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 10px;
        background: rgba(148, 163, 184, .18);
        color: #475569;
        font-size: 24px;
        line-height: 1;
        z-index: 6;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-close:active {
        background: rgba(148, 163, 184, .32);
    }

    body.sidebar-enable .mobile-nav-close {
        display: flex;
    }

    /* Room for the absolutely-positioned close button */
    .sidebar-menu-scroll {
        padding-top: 48px;
    }

    /* ---- 5.3 Dimmed backdrop + page scroll lock while the drawer is open ---- */
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 75px 0 0 0;
        z-index: 1055;
        background: rgba(15, 23, 42, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    body.sidebar-enable .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* body only — the drawer keeps its own scroll (simplebar) */
    body.polosys-nav-locked {
        overflow: hidden;
    }

    /* ---- 5.4 Comfortable tap targets in the menu ---- */
    #side-menu > li > a,
    #sidebar-menu > li > a {
        padding: 12px 20px;
        font-size: 15px;
        min-height: 46px;
    }

    #side-menu > li > a i,
    #sidebar-menu > li > a i {
        font-size: 18px;
    }

    #side-menu li.menu-title,
    #sidebar-menu li.menu-title {
        padding: 12px 20px 6px;
        font-size: 11px;
    }

    /* ---- 5.5 Topbar: compact, big tap targets, no overlap ---- */
    .navbar-header {
        padding: 0 4px 0 0;
    }

    .navbar-header .header-item {
        min-width: 44px;
        min-height: 44px;
    }

    .navbar-header .header-item.noti-icon {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* ---- 5.6 Floating "Settings" tab overlaps content on phones — hide it.
       The theme's right-bar (customizer panel) is desktop-only. ---- */
    .layout-setting-btn,
    .right-bar,
    .right-bar-enabled .right-bar {
        display: none !important;
    }

    /* ---- 5.7 page content breathing room ---- */
    .page-content {
        padding: calc(75px + 12px) 0 40px 0;
    }

    /* ---- 5.8 Footer ---- */
    .footer {
        left: 0 !important;
        padding: 15px 12px;
        text-align: center;
    }
}

/* ==========================================================================
   6. Admin portal — tables & grids on phones (<= 767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* grid.js: let the table keep a usable minimum width and scroll
       horizontally instead of collapsing headers into single letters. */
    .gridjs-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
    }

    .gridjs-table {
        table-layout: fixed;
        width: 100%;
        min-width: 720px;
    }

    .gridjs-td,
    .gridjs-th {
        padding: 10px 12px !important;
        font-size: 13px;
    }

    .gridjs-td,
    .gridjs-th .gridjs-th-content {
        white-space: nowrap;
    }

    .gridjs-th .gridjs-th-content {
        text-overflow: ellipsis;
        overflow: hidden;
        width: auto;
    }

    /* grid.js toolbar: stack search + pagination so they fit */
    .gridjs-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .gridjs-search-input {
        min-width: 180px;
    }

    .gridjs-pagination {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        width: 100%;
    }

    /* Bootstrap tables already scroll, just tighten the padding */
    .table {
        font-size: 13px;
    }

    .table td,
    .table th {
        padding: 0.6rem 0.55rem;
    }

    /* Long IDs / order numbers must not blow the cell out */
    .text-truncate {
        max-width: 100%;
    }
}

/* ==========================================================================
   7. Admin portal — cards, forms and buttons on phones (<= 575.98px)
   ========================================================================== */
@media (max-width: 575.98px) {

    .card {
        border-radius: 10px;
    }

    .card-body {
        padding: 1rem;
    }

    /* Product / cart cards: image + content stack nicely */
    .card-product {
        margin-bottom: 12px;
    }

    /* Every primary action button becomes full width and finger-sized */
    .btn {
        min-height: 44px;
    }

    /* Buttons sitting side by side in card footers */
    .d-flex.gap-2 > .btn {
        flex: 1 1 100%;
    }

    /* Quantity steppers / small controls keep their size */
    .input-group .btn {
        min-width: 44px;
    }

    /* Badges and labels may wrap rather than overflow */
    .badge {
        white-space: normal;
    }

    /* Stats / summary rows: one card per row */
    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"],
    .row.g-md-3 > [class*="col-md-"] {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   8. Admin portal — very small phones (<= 380px)
   ========================================================================== */
@media (max-width: 380px) {

    .gridjs-table {
        min-width: 640px;
    }

    .navbar-header .header-item {
        min-width: 40px;
    }

    .navbar-brand-box .logo-sm img {
        max-width: 132px;
    }
}

/* ==========================================================================
   9. Admin portal — bottom navigation for phones / small screens
   Replaces reliance on the hamburger-only navigation below 992px.
   ========================================================================== */

/* Hidden on desktop and on the auth (theme2) layout. */
.polosys-bottom-nav {
    display: none;
}

@media (max-width: 991.98px) {

    .polosys-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 4px;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        background: #ffffff;
        border-radius: 22px 22px 0 0;
        border-top: 1px solid rgba(148, 163, 184, .16);
        box-shadow: 0 -8px 26px rgba(15, 23, 42, .10);
        -webkit-tap-highlight-color: transparent;
    }

    /* The drawer backdrop must cover the bottom nav too */
    body.sidebar-enable .mobile-nav-backdrop {
        inset: 75px 0 0 0;
        z-index: 1055;
    }

    .polosys-bottom-nav .bn-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 2px;
        border-radius: 14px;
        color: #64748b;
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.1;
        text-align: center;
        transition: background-color .18s ease, color .18s ease;
    }

    .polosys-bottom-nav .bn-item i {
        font-size: 21px;
        line-height: 1;
    }

    .polosys-bottom-nav .bn-item span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .polosys-bottom-nav .bn-item.active {
        background: rgba(81, 69, 205, .09);
        color: #5145cd;
        font-weight: 600;
    }

    .polosys-bottom-nav .bn-item:active {
        background: rgba(81, 69, 205, .16);
    }

    /* Reserve room so content / footer never sit under the bar */
    .page-content {
        padding-bottom: calc(64px + 40px + env(safe-area-inset-bottom, 0px));
    }

    .footer {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
    }
}