/* ──────────────────────────────────────────────────────────────────────
   Responsive sweep — mobile / tablet refinements over the design layers.
   Loaded last to override breakpoint-specific rules where needed.
   ──────────────────────────────────────────────────────────────────── */

/* ── BASE: gentle container padding on small phones ───────────── */
@media (max-width: 575px) {
    .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

/* ── HERO carousel on phones ──────────────────────────────────── */
@media (max-width: 767px) {
    .th-slide { min-height: 420px; padding-block: 1rem; }
    .th-hero-title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.12 !important; }
    .th-hero-carousel .lead { font-size: 0.95rem; line-height: 1.5; }
    .th-hero-carousel .carousel-indicators { margin-bottom: 0.85rem; }
    .th-hero-carousel .carousel-indicators [data-bs-target] { width: 22px; height: 3px; }
    .th-hero-carousel .carousel-indicators .active { width: 36px; }
    .th-hero-search .form-control { font-size: 0.92rem; padding: 0.7rem 0.8rem; }
    .th-hero-search .btn { padding-inline: 1rem; font-size: 0.85rem; }
    .th-hero-search .btn span,
    .th-hero-search .btn .small { display: none; }
    .th-hero-badge { font-size: 0.68rem; padding: 0.32rem 0.7rem; }
    .th-mesh-orb { filter: blur(60px); opacity: 0.45; }
    .th-mesh-orb-1, .th-mesh-orb-2 { width: 280px; height: 280px; }
    .th-mesh-orb-3, .th-mesh-orb-4 { width: 200px; height: 200px; }
    .th-lang-chip { font-size: 0.78rem; padding: 0.32rem 0.7rem; }
}

/* ── KPI stats on tiny phones (≤375) ─────────────────────────── */
@media (max-width: 375px) {
    .th-stat { padding: 0.85rem 0.9rem; }
    .th-stat-icon { width: 34px; height: 34px; font-size: 0.92rem; }
    .th-stat-num { font-size: 1.55rem !important; }
    .th-stat-label { font-size: 0.66rem; letter-spacing: 0.05em; }
}

/* ── Section header padding on small screens ─────────────────── */
@media (max-width: 575px) {
    .th-section-head { margin-bottom: 1.85rem; }
    .th-h-section { font-size: 1.5rem !important; line-height: 1.2 !important; }
    .th-lead { font-size: 0.95rem; line-height: 1.55; }
    .th-label { font-size: 0.66rem; }
}

/* ── Sector / Categories tiles on phones ──────────────────────── */
@media (max-width: 575px) {
    .th-cat-grid { gap: 0.65rem; }
    .th-cat-tile { aspect-ratio: 4 / 4.5; border-radius: 0.85rem; }
    .th-cat-tile-icon { width: 32px; height: 32px; font-size: 0.92rem; top: 0.6rem; left: 0.6rem; }
    .th-cat-tile-count {
        top: 0.6rem; right: 0.6rem;
        font-size: 0.62rem; padding: 0.22rem 0.5rem;
    }
    .th-cat-tile-body { padding: 0.7rem 0.8rem; }
    .th-cat-tile-title { font-size: 0.92rem; }
    .th-cat-tile-cta { font-size: 0.66rem; }
}

/* ── Company cards — denser layout, bigger touch targets on mobile ── */
@media (max-width: 767px) {
    .th-co-card-channels { gap: 0.45rem; }
    .th-co-channel {
        width: 36px; height: 36px;
        border-radius: 10px;
        font-size: 1rem;
    }
    .th-co-card-link  { padding: 0.95rem 1rem 0.85rem; gap: 0.7rem; }
    .th-co-card-name  { font-size: 1.05rem; -webkit-line-clamp: 2; }
    .th-co-card-desc  { font-size: 0.84rem; -webkit-line-clamp: 3; }
    .th-co-card-logo  { width: 60px; height: 60px; border-radius: 14px; }
    .th-co-card-logo-initial { font-size: 1.6rem; }
    .th-co-card-footer { padding: 0.7rem 0.9rem; }
    .th-co-card-cta   { padding: 0.5rem 0.9rem; font-size: 0.78rem; }
    .th-co-flag       { font-size: 0.6rem; padding: 0.22rem 0.5rem; }
    .th-co-stat       { padding: 0.32rem 0.55rem; font-size: 0.7rem; }
}

/* ── Trust band on phones ─────────────────────────────────────── */
@media (max-width: 575px) {
    .th-trust-band { padding: 2rem 0; }
    .th-trust-pillar { padding: 1rem 0.85rem; }
    .th-trust-pillar-icon { width: 38px; height: 38px; font-size: 1rem; margin-bottom: 0.6rem; }
    .th-trust-pillar-metric { font-size: 1.7rem !important; margin-bottom: 0.3rem; }
    .th-trust-pillar-title { font-size: 0.78rem; }
    .th-trust-pillar-desc { font-size: 0.76rem; line-height: 1.45; }
}

/* ── How it works — vertical stack on mobile (no arrows) ──────── */
@media (max-width: 991px) {
    .th-how-grid { gap: 0.75rem; }
    .th-how-step { padding: 1.2rem 1.1rem; }
    .th-how-step-num { font-size: 1.6rem; top: 0.85rem; right: 1rem; }
    .th-how-step-icon { width: 42px; height: 42px; font-size: 1.1rem; margin-bottom: 0.7rem; }
    .th-how-step-title { font-size: 1rem; }
    .th-how-step-desc { font-size: 0.88rem; }
}

/* ── Company list page filters ─────────────────────────────────── */
@media (max-width: 991px) {
    .th-filter-card.sticky-top { position: static !important; }
}

/* ── Footer contact rows (all viewports — icon + text aligned) ── */
.th-footer .th-footer-contact { display: flex; align-items: flex-start; gap: 0.5rem; }
.th-footer .th-footer-contact > i { padding-top: 0.18rem; flex-shrink: 0; }
.th-footer .th-footer-contact a { color: inherit; }

/* ── Footer on mobile ─────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Body content left-aligned (was centered, hard to scan); copyright stays centered via .text-center */
    .th-footer .th-footer-section-title { margin-top: 1.25rem; }
    .th-footer-bottom { font-size: 0.78rem; }
    /* Logo pill at the top has its own horizontal flow — left-align the brand row */
    .th-footer-brand { justify-content: flex-start; }
}

/* ── Navbar / brand on small screens ──────────────────────────── */
@media (max-width: 767px) {
    .th-brand-pill { padding: 0.2rem 0.5rem; }
    .th-brand-pill img { max-height: 32px; }
    .th-navbar { padding-block: 0.55rem; }
}

/* ── Mobile navbar — proper spacing when hamburger is open ───── */
/* Active below lg (992px) — same breakpoint as navbar-expand-lg. */
@media (max-width: 991.98px) {
    .th-navbar .navbar-collapse {
        padding-block: 0.75rem 0.5rem;
        gap: 0.6rem;
    }
    .th-navbar .navbar-nav {
        gap: 0.1rem;
        margin-bottom: 0.5rem;
    }
    .th-navbar .nav-link {
        padding-block: 0.55rem;
        font-size: 1rem;
    }
    /* Search form: full width, no right margin */
    .th-navbar form[role="search"] {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
        width: 100%;
    }
    .th-navbar form[role="search"] .input-group { width: 100%; }
    /* Language dropdown: full width button */
    .th-navbar > .container > .navbar-collapse > .dropdown {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
        width: 100%;
    }
    .th-navbar .dropdown > .btn {
        width: 100%;
        justify-content: center;
        padding-block: 0.5rem;
    }
    /* Auth/Admin/CRM/Login button: full width, prominent */
    .th-navbar .th-nav-auth {
        width: 100%;
        padding-block: 0.6rem;
        font-size: 1rem;
    }
}

/* ── Campaigns hero (split layout) on mobile ──────────────────── */
@media (max-width: 767px) {
    .th-camp-hero-split { grid-template-columns: 1fr !important; }
    .th-camp-hero-split .th-camp-hero-img,
    .th-camp-hero-split .th-camp-hero-img-ph {
        min-height: 200px;
    }
    .th-camp-hero-panel { padding: 1.1rem 1.2rem; gap: 0.6rem; }
    .th-camp-hero-title { font-size: 1.15rem !important; line-height: 1.25 !important; }
    .th-camp-hero-desc { font-size: 0.88rem; line-height: 1.5; -webkit-line-clamp: 4; }
    .th-camp-hero-footer { gap: 0.5rem; padding-top: 0.65rem; }
}

/* ── FAQ accordion answer padding on phones ───────────────────── */
@media (max-width: 575px) {
    .th-faq-q { padding: 0.85rem 0.95rem; gap: 0.65rem; }
    .th-faq-icon { width: 32px; height: 32px; font-size: 0.9rem; }
    .th-faq-toggle { width: 28px; height: 28px; font-size: 0.85rem; }
    .th-faq-q-text { font-size: 0.88rem; }
    .th-faq-a { padding: 0 0.95rem 1rem 3.1rem; font-size: 0.88rem; line-height: 1.6; }
}

/* ── Directory hero stats on tablet ───────────────────────────── */
@media (max-width: 991px) {
    .th-dir-stats { padding: 0.8rem 0.4rem; }
}

/* ── Filter chip-clear pill — full-width on mobile ────────────── */
@media (max-width: 575px) {
    .th-filter-chip-clear {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 0.85rem;
    }
}

/* ── Pagination — wrap and center on mobile ──────────────────── */
@media (max-width: 575px) {
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(.disabled) {
        display: none;
    }
    .pagination { justify-content: center; }
}

/* ── Touch device — disable hover lift (avoid sticky hover state) */
@media (hover: none) and (pointer: coarse) {
    .th-co-card:hover,
    .th-stat:hover,
    .th-cat-tile:hover,
    .th-industry-card:hover,
    .th-rank-mini:hover,
    .th-faq-item:hover,
    .th-how-step:hover {
        transform: none;
    }
    .th-cat-tile:hover .th-cat-tile-img { transform: none; }
}

/* ── Hide hero floating cards on tablet too (lg breakpoint) ───── */
@media (max-width: 991px) {
    .th-hero-card-stack { display: none; }
    .th-trust-orb-wrap, .th-globe-wrap { display: none; }
}

/* ── Form inputs — full width tap targets on mobile ────────────── */
@media (max-width: 575px) {
    .form-control, .form-select { font-size: 16px; }  /* prevents iOS zoom on focus */
}

/* ── KPI stats row mobile — slightly tighter ───────────────────── */
@media (max-width: 575px) {
    .th-stats-row { gap: 0.6rem; }
}

/* ── Long text safety: prevent overflow ───────────────────────── */
.th-co-card-name,
.th-cat-tile-title,
.th-rank-name,
.th-rank-mini-name,
.th-stat-label,
.th-faq-q-text,
.th-camp-hero-title { word-wrap: break-word; overflow-wrap: anywhere; }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  GLOBAL SAFETY PATCHES — apply across all 100+ views.                 ║
   ║  Targets generic Bootstrap / browser primitives, not project classes,  ║
   ║  so adding a new page automatically inherits the same protections.     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── 1. Root viewport hygiene ────────────────────────────────────────────
   - Prevent any element from triggering horizontal page scroll.
   - Use dynamic viewport units where supported (iOS Safari hides the URL
     bar, so 100vh measures TALLER than the visible area, leaking content
     under it). 100dvh tracks the live viewport. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, embed, object, svg { max-width: 100%; height: auto; }
@supports (height: 100dvh) {
    .login-shell, .vh-100 { min-height: 100dvh !important; }
}

/* ── 2. Universal long-text & code overflow ─────────────────────────────
   Cell content, badges, code samples — any of these can blow out a row
   on mobile if a user pastes a long URL or an unspaced foreign-language
   string. This is the cheapest, highest-leverage rule on the page. */
.table td, .table th, .badge, .alert, .card-body p, .form-text {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
pre, code, kbd, samp { white-space: pre-wrap; word-break: break-word; }

/* ── 3. Tables — wrap in horizontal scroll on small screens ────────────
   Admin/CRM lists are 8-12 columns wide. Without a wrapper they push the
   page wider than the viewport. We auto-wrap with a scrollable container
   without forcing every dev to remember .table-responsive. */
@media (max-width: 991.98px) {
    .table:not(.table-no-responsive) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Bootstrap's .table-responsive already does this — we only apply on
       a *bare* .table that wasn't wrapped. */
    .table-responsive .table { display: table; overflow-x: visible; }
    .table th, .table td { white-space: normal; }
}

/* ── 4. Form action footers — stack vertically on phones ───────────────
   Many edit pages render <Save / Cancel / Delete> in a flex row that
   overflows on a 320-360px screen. Stack and full-width them. */
@media (max-width: 575.98px) {
    .form-footer, .th-form-actions, .crm-form-actions, .admin-form-actions {
        display: flex;
        flex-direction: column-reverse;   /* primary action ends up on top */
        gap: 0.5rem;
    }
    .form-footer .btn,
    .th-form-actions .btn,
    .crm-form-actions .btn,
    .admin-form-actions .btn { width: 100%; }
    /* Sweep generic patterns: any .d-flex of buttons inside a form footer. */
    form .text-end > .btn + .btn,
    form .d-flex.gap-2 > .btn,
    form .modal-footer > .btn { margin-top: 0; }
}

/* ── 5. Modals — fit within viewport on phones, never get cropped ──────── */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 0.5rem auto; max-width: calc(100vw - 1rem); }
    .modal-body   { padding: 1rem; }
    .modal-header, .modal-footer { padding: 0.85rem 1rem; }
    .modal-footer { flex-wrap: wrap; gap: 0.5rem; }
    .modal-footer > * { flex: 1 1 auto; }
    /* Full-screen modals on tiny phones (≤375) for forms */
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 1rem); }
}

/* ── 6. Dropdown menus — keep within viewport ────────────────────────── */
@media (max-width: 575.98px) {
    .dropdown-menu { max-width: calc(100vw - 1.5rem); }
    .dropdown-menu-end { right: 0.5rem; }
}

/* ── 7. Touch tap-target floor (≥44×44 per WCAG 2.5.5) ────────────────
   Only on coarse pointers — so cursor desktops stay compact. */
@media (hover: none) and (pointer: coarse) {
    .btn-sm:not(.btn-icon-only), .pagination .page-link {
        min-height: 38px;
    }
    .btn:not(.btn-link):not(.btn-icon-only),
    .nav-link, .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Icon-only square buttons that should stay round/square */
    .btn-icon-only { min-width: 36px; min-height: 36px; }
}

/* ── 8. Sticky elements — auto-disable on short viewports ─────────────
   A sticky sidebar that's taller than the screen turns into a stuck
   wall the user can't scroll past. Disable when not enough headroom. */
@media (max-height: 600px) {
    .sticky-top, .sticky-md-top, .sticky-lg-top,
    .crm-sidebar.sticky-top, .admin-sidebar.sticky-top {
        position: static !important;
    }
}

/* ── 9. Kanban / horizontal scroll columns — show scroll on mobile ──── */
@media (max-width: 991.98px) {
    .th-opp-kanban,
    .th-kanban-board,
    [data-kanban] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem;
        padding-bottom: 0.5rem;       /* room for inertial scroll bar */
        scroll-snap-type: x mandatory;
    }
    .th-opp-kanban > *,
    .th-kanban-board > *,
    [data-kanban] > * {
        flex: 0 0 88vw;                /* one card-column per swipe page */
        max-width: 360px;
        scroll-snap-align: start;
    }
}

/* ── 10. Inputs — hard guarantees ──────────────────────────────────────
   font-size 16px+ on mobile prevents iOS Safari's punitive auto-zoom.
   max-width 100% prevents number/date inputs from stretching past their
   container in flex rows. */
@media (max-width: 575.98px) {
    .form-control, .form-select, textarea, input[type="text"],
    input[type="email"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="number"], input[type="password"],
    input[type="date"], input[type="time"], input[type="datetime-local"] {
        font-size: 16px;
        max-width: 100%;
    }
    .input-group { flex-wrap: nowrap; }
    .input-group .form-control { min-width: 0; }   /* allow shrink in flex */
}

/* ── 11. Card grids — single column on tiny phones ────────────────────
   Bootstrap's row-cols-2 etc. don't break below 320px. Force one column. */
@media (max-width: 360px) {
    .row.row-cols-2 > [class*="col"],
    .row.row-cols-md-2 > [class*="col"],
    .row.row-cols-lg-3 > [class*="col"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── 12. Alert dismiss / close buttons — easier to hit on mobile ─────── */
@media (hover: none) and (pointer: coarse) {
    .btn-close { width: 1.25rem; height: 1.25rem; padding: 0.85rem; }
    .alert-dismissible .btn-close { right: 0.5rem; top: 0.5rem; }
}

/* ── 13. Login screen specific refinements ────────────────────────────
   The login template lives outside the public layout, so its rules need
   to be kept here to survive future template edits. */
@supports (height: 100dvh) {
    .login-shell { min-height: 100dvh !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Tablet landscape — hero panel was 3.5rem inset, too tight under 1100px */
    .login-hero { padding: 2rem 2.2rem; }
    .hero-headline { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
    .hero-features li { font-size: 0.88rem; }
}
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 520px) {
    /* Landscape phones — login panel doesn't need vertical centering, would
       push content off-screen. Switch to top-aligned scrollable layout. */
    .login-panel { align-items: flex-start; padding-top: 1rem; padding-bottom: 1rem; }
    .login-mobile-brand { margin-bottom: 0.85rem; }
}
@media (min-width: 1600px) {
    /* Ultra-wide monitors — keep card readable, don't let the right panel
       sprawl across 800px of empty white. */
    .login-card { max-width: 480px; }
}

/* ── 14. Image / logo containers — never break their parent ──────────── */
.th-brand-pill img, .login-brand img, .sidebar-brand img,
.th-co-card-logo img, img.th-product-thumb {
    max-width: 100%;
    object-fit: contain;
}

/* ── 15. Print — hide chrome, expand content ─────────────────────────── */
@media print {
    .navbar, .th-navbar, .admin-sidebar, .crm-sidebar, .th-footer,
    .th-opp-tabswitch, .pagination, .btn, .dropdown,
    [data-bs-toggle], .alert-dismissible .btn-close { display: none !important; }
    main, .container, .container-fluid { padding: 0 !important; }
    body, .card, .table { color: #000 !important; background: #fff !important; }
    a { text-decoration: none !important; color: inherit !important; }
}