/* ============================================================================
   XROADGEAR — Shared Responsive Foundation (RWD)
   ----------------------------------------------------------------------------
   Three techniques, one shared file (mobile-first):
     1. Fluid Grids        -> %, fr, minmax(), auto-fit, flexbox, fluid containers
     2. CSS Media Queries  -> breakpoints @ 480 / 768 / 1024 / 1280 px
     3. Fluid Typography   -> clamp() with rem + viewport units, fluid :root base

   Loaded LAST in layouts/app.blade.php so it can refine the Bamburgh (Bootstrap 4)
   base WITHOUT fighting the framework grid. Standalone auth pages link it too.
   Design language preserved: Poppins on auth, black capsule buttons.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. Fluid type + spacing tokens (consumed by the rules below)
   --------------------------------------------------------------------------- */
:root {
    /* Modular fluid type scale: min (≈360px) -> max (≈1280px+) */
    --rwd-step--1: clamp(0.78rem, 0.74rem + 0.20vw, 0.88rem);
    --rwd-step-0:  clamp(0.88rem, 0.82rem + 0.28vw, 1.00rem);
    --rwd-step-1:  clamp(1.05rem, 0.96rem + 0.42vw, 1.25rem);
    --rwd-step-2:  clamp(1.25rem, 1.08rem + 0.78vw, 1.75rem);
    --rwd-step-3:  clamp(1.50rem, 1.24rem + 1.20vw, 2.25rem);
    --rwd-step-4:  clamp(1.80rem, 1.40rem + 1.95vw, 3.00rem);

    /* Fluid gutter used for container padding + grid gaps */
    --rwd-gutter:  clamp(0.75rem, 0.45rem + 1.45vw, 1.50rem);
}

/* ---------------------------------------------------------------------------
   1. Box-sizing + overflow guards — eliminate horizontal scroll at any width
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fluid root base: tight range so Bootstrap's rem system stays intact
   while text still scales smoothly between phone and desktop. */
html {
    font-size: clamp(15px, 0.93rem + 0.18vw, 17px);
    -webkit-text-size-adjust: 100%;
}

/* Media + embeds never overflow their column */
img, svg, video, canvas, iframe, embed, object {
    max-width: 100%;
}
img, svg, video, canvas { height: auto; }

/* ---------------------------------------------------------------------------
   2. Fluid containers — shrink gracefully with comfortable gutters
   --------------------------------------------------------------------------- */
.container,
.container-fluid {
    width: 100%;
    padding-right: var(--rwd-gutter);
    padding-left: var(--rwd-gutter);
    margin-right: auto;
    margin-left: auto;
}

/* Wide screens keep a readable max-width (Bootstrap-compatible) */
@media (min-width: 1280px) {
    .container { max-width: 1200px; }
}

/* Long tables become horizontally scrollable in their own box rather than
   blowing out the whole page. Bamburgh datatables get a fluid wrapper too. */
.table-responsive,
.dataTables_wrapper { width: 100%; }
.dataTables_scroll,
.dataTables_wrapper .dataTable { max-width: 100%; }

/* ---------------------------------------------------------------------------
   3. Fluid typography — scale headings/body within content + keep Poppins auth
   (Scoped to content areas + auth so the dense admin chrome stays stable.)
   --------------------------------------------------------------------------- */
.app-content--inner h1, .app-content--inner .h1,
.bg-second h1 { font-size: var(--rwd-step-4); line-height: 1.15; }

.app-content--inner h2, .app-content--inner .h2 { font-size: var(--rwd-step-3); line-height: 1.2; }
.app-content--inner h3, .app-content--inner .h3 { font-size: var(--rwd-step-2); line-height: 1.25; }
.app-content--inner h4, .app-content--inner .h4 { font-size: var(--rwd-step-1); line-height: 1.3; }
.app-content--inner h5, .app-content--inner .h5 { font-size: var(--rwd-step-0); }
.app-content--inner p,
.app-content--inner li { font-size: var(--rwd-step-0); }

/* ---------------------------------------------------------------------------
   4. Header / top nav — fix fixed 280px sidebar offset that overflowed mobile
   (custom.css forces .app-header{padding-left:280px} + .tc_btn{min-width:170px})
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    .app-header {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding-left: var(--rwd-gutter) !important;
        padding-right: var(--rwd-gutter);
    }
    .app-header .tc_btn {
        min-width: 0 !important;
        font-size: var(--rwd-step--1);
    }
    .app-header .search-link input[type="text"] { max-width: 100%; }
}

@media (max-width: 767.98px) {
    .app-header {
        justify-content: space-between;
    }
    /* let the action cluster wrap instead of pushing past the viewport */
    .app-header .d-flex.align-items-center { flex-wrap: wrap; row-gap: 0.4rem; }
    /* Slightly tighter main content gutters on phones */
    .app-content--inner {
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    }
}

/* ---------------------------------------------------------------------------
   5. Fluid grid helpers (opt-in) — for custom card/listing blocks that used
   fixed pixel widths. Uses auto-fit + minmax so columns reflow automatically.
   --------------------------------------------------------------------------- */
.rwd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--rwd-gutter);
}
.rwd-grid--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.rwd-grid--lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Common custom listing wrappers reflow instead of overflowing */
.checkbox-container,
.widget_logos { flex-wrap: wrap; }

/* Product/category thumbnails stay within their column */
.package_product img,
.category.product img,
.tbl_img { max-width: 100%; height: auto; }

/* ============================================================================
   6. AUTH PAGES — shared responsive rules (login / register / verify)
   Login is a standalone document and register/verify extend the master layout;
   page-specific inline tweaks live in those views, but these shared rules keep
   the unified auth look fluid + centered from 360px → desktop.
   ============================================================================ */

/* The dark overlay must grow with tall forms (register) instead of clipping. */
.bg-second {
    position: relative !important;
    min-height: 100vh;
    height: auto !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 3.75rem) clamp(0.75rem, 4vw, 3.75rem) !important;
    overflow-y: auto;
}

.bg-second .container { max-width: 1140px; }

/* Auth headings + helper text scale fluidly (Poppins kept by the views). */
.bg-second .main-head h1 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem); }
.bg-second .main-head p  { font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem); }

/* Capsule buttons + fields scale text fluidly while keeping the pill shape. */
.btn-second {
    font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    max-width: 100%;
}
.text-field,
.bg-second .form-control {
    font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
}

/* Auth panel becomes single-column well before Bootstrap's lg break feels cramped */
@media (max-width: 991.98px) {
    .bg-second .main-img { display: none; }
    .bg-second .main-txt { padding: clamp(1rem, 4vw, 2rem) !important; }
}

@media (max-width: 480px) {
    .bg-second { padding: 0.75rem !important; }
    .bg-second .modal-content.p-3 { padding: 0.75rem !important; }
    .btn-second { width: 100%; }
}