/* ════════════════════════════════════════════════════════════════
   responsive-fixes.css — narrow-viewport baseline
   ════════════════════════════════════════════════════════════════
   Loaded by every layout (admin / seller / manager / public /
   auth / guest). Targeted at the patterns that break the UI at
   small widths WITHOUT redesigning anything.

   ── REGRESSION HISTORY ──
   v1: used `overflow-wrap: anywhere` globally → flex algorithm
       saw min-content = 1 char → Armenian compound words wrapped
       one letter per line.
   v2: switched to `overflow-wrap: break-word` on a few brand
       classes → still wrapped per character because explicit
       `min-width:0` on flex parents (very common pattern in this
       codebase, e.g. <div style="flex:1; min-width:0">) lets the
       child shrink BELOW its longest-word min-content. Combined
       with `break-word`, the title still got chopped per char.
   v3 (this version): drop `overflow-wrap` overrides entirely.
       Default `overflow-wrap: normal` + `word-break: normal`
       means single Armenian words NEVER break mid-character.
       Text overflows when a word is wider than its container,
       and `html/body { overflow-x: hidden }` clips the overflow
       cleanly. Plus targeted rules to:
         (a) force tables to keep their natural width and scroll
             horizontally instead of squishing columns
         (b) stack flex card-headers vertically on tiny phones
             so a title beside an action doesn't get crushed
         (c) keep status pills + counter chips on a single line.
   ════════════════════════════════════════════════════════════════ */

/* ── 0. Universal anti-page-scroll guard ─────────────────────
   Prevents the most common "page scrolls right" cause: a stray
   child wider than the viewport (a 100vw block that didn't
   account for the scrollbar). Doesn't break anchor navigation,
   sticky positioning, or modals. Applied at every viewport
   width because horizontal scroll is never desired. */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ── 1. Width caps on commonly-overflowing elements ──────────
   Images without dimensions, buttons with long labels, form
   controls with long placeholder text — these can all push
   their parent wider than the viewport. Capping at 100% of
   the parent prevents that without affecting normal layout. */
img        { max-width: 100%; height: auto; }
.form-control,
input, select, textarea {
    max-width: 100%;
}
.btn, .btn-main, .btn-soft, .tlp-btn,
button[type="submit"], a.btn {
    max-width: 100%;
}

/* ── 2. Tables — KEEP natural width, force horizontal scroll ─
   The seller layout declares `table { min-width: 560px }` and
   `th, td { white-space: nowrap }`. The OLD policy here was to
   override that to `min-width: 0` at <=991.98px so 3-column
   tables could fit without scrolling. The cost: 7-10 column
   tables (admin/managers, admin/user-visits, admin/payments)
   ended up with ~35px columns and content tried to wrap into
   per-character columns.

   New policy: tables KEEP their natural width and the wrapper
   gets horizontal scroll. Bootstrap's .table-responsive already
   does this. We mirror that for the project's own .table-wrap
   class. Pages that need a table to fit fully (rare — usually
   a 2-3 column summary) opt in with .table-fit. */
@media (max-width: 991.98px) {
    .table-wrap,
    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Force headers to a single line so the table widens to its
       natural column-sum width. The auto table-layout algorithm
       then never has to compress cells below header width, which
       was causing multi-word Armenian headers ("Ակտիվ վճարված")
       to wrap into per-character columns at narrow viewports.
       Targets BOTH the project's own .table-wrap AND Bootstrap's
       .table-responsive — the admin/managers + admin/payments
       pages use the latter. */
    .table-wrap thead th,
    .table-responsive thead th { white-space: nowrap; }

    /* table-fit: explicit shrink-to-fit. Use ONLY for narrow
       summary tables (≤4 cols, short cells) that look ugly with
       horizontal scroll. */
    .table-wrap > table.table-fit,
    .table-responsive > table.table-fit { min-width: 0; }
    .table-wrap > table.table-fit thead th,
    .table-responsive > table.table-fit thead th { white-space: normal; }
}

/* ── 3. Status pills / counter chips stay on one line ────────
   In narrow table cells, common badge patterns ("● Online",
   "Pending", "12 / 50") can wrap to multi-line because their
   default <span> inherits white-space:normal. Force these
   common classes to inline-block + nowrap so they keep the
   pill shape regardless of cell width. */
.badge,
.btn-soft,
[class*="status-pill"],
[class*="-badge"] {
    white-space: nowrap;
}

/* ── 4. Card / section headers — stack on narrow phones ──────
   Common pattern across admin + seller pages:
     <div class="card">
       <div style="display:flex; gap:12px; flex-wrap:wrap;">
         <div style="flex:1; min-width:0;">
           <h3 class="section-title">…</h3>
           <p class="section-text">…</p>
         </div>
         <a href="…">Locked link / action</a>
       </div>
       …
     </div>
   At ≤640px the two flex items compete for too little width.
   The title's min-width:0 lets it shrink below word width and
   text was wrapping per character. Forcing the header flex
   container to stack vertically gives the title a full-width
   row. Targeted via :has() to only fire when a section-title
   is actually inside the flex header — not every flex card.

   The .ai-head and .ai-head-left rules cover the seller AI
   chat page, where the same icon + title + side-badge layout
   was compressing the title to per-character columns. */
@media (max-width: 640px) {
    .card > div:first-child:has(.section-title),
    .card > header:has(.section-title),
    .card > .card-header:has(.section-title),
    .ai-head {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    /* Center the credit badge under the title on stacked AI head. */
    .ai-head .ai-credits { align-self: flex-start; }
}

/* ── 5. Mid-phone form actions (≤480px) ──────────────────────
   On a 320–480px viewport, two CTAs side-by-side often squeeze
   to ~100px each. Stacking them column-wise gives each button
   a full-width tap target without overflow. .btn-row is the
   project's button-pair class; .form-actions is the modal/
   form footer pattern. */
@media (max-width: 480px) {
    .btn-row, .form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .btn-row > *, .form-actions > * { width: 100%; }

    /* Bootstrap modals at 320px viewport touch the edges. A
       small margin gives them breathing room without the
       full-width modal pattern (which often breaks layouts). */
    .modal-dialog { margin: 8px !important; }
}

/* ── 6. Tiny phones (≤380px) — extra padding compression ─────
   At 320–360px viewport, default 16-20px paddings leave only
   ~280px usable width for content. Trim selectively so cards
   don't feel cramped without affecting tablet/desktop. */
@media (max-width: 380px) {
    .content    { padding: 12px !important; }
    .card       { padding: 14px !important; }
    .topbar     { padding: 8px 10px !important; }
    .modal-body { padding: 16px !important; }
    .modal-header, .modal-footer { padding: 12px 16px !important; }

    /* Reduce table cell padding so 4–5 column tables fit at
       320px without forcing too much horizontal scroll. */
    th, td { padding: 8px 10px !important; }
}