/* ============================================================
   MERIK SOKONI — COMPONENT / PATTERN LAYER
   Loaded after main.css + modern.css.

   Purpose: the public pages were laid out with hundreds of repeated
   inline style="..." attributes, which cannot be overridden globally
   (every mobile tweak had to be repeated per element). The patterns
   that repeated 3+ times now live here, so the UI can be tuned in
   ONE place. Visual output is identical to the inline styles it
   replaced — this file adds no new look.

   Spacing uses the modern.css scale (--s1..--s7) with literal
   fallbacks so the values hold even if that layer is missing.
   ============================================================ */

/* ── 1. ROWS — horizontal groups ─────────────────────────────
   Composable on purpose: alignment/gap are separate so a swap is
   always declaration-for-declaration identical to the old inline. */
.sk-row          { display: flex; }
.sk-row--mid     { align-items: center; }
.sk-row--top     { align-items: flex-start; }
.sk-row--between { justify-content: space-between; }
.sk-row--wrap    { flex-wrap: wrap; }

/* ── 2. STACKS — vertical groups ─────────────────────────────── */
.sk-stack { display: flex; flex-direction: column; }

/* ── 3. GAPS — shared by rows and stacks ─────────────────────── */
.sk-gap-s1 { gap: var(--s1, 4px); }
.sk-gap-s2 { gap: var(--s2, 8px); }
.sk-gap-s3 { gap: var(--s3, 12px); }
.sk-gap-10 { gap: 10px; }
.sk-gap-14 { gap: 14px; }

/* ── 4. FLEX CHILDREN ────────────────────────────────────────── */
/* Grow, but allow the child to shrink below its content width —
   without min-width:0 long provider names blow the row out. */
.sk-fill     { flex: 1; min-width: 0; }
.sk-noshrink { flex-shrink: 0; }

/* ── 5. MUTED TEXT SCALE ─────────────────────────────────────── */
.sk-muted-xs { font-size: .78rem; color: var(--muted); }
.sk-muted-sm { font-size: .82rem; color: var(--muted); }
.sk-muted-md { font-size: .85rem; color: var(--muted); }

/* ── 6. TITLES ───────────────────────────────────────────────── */
.sk-sec-title   { font-size: 1.2rem; margin-bottom: var(--s4, 16px); }  /* section h2 */
.sk-item-title  { font-weight: 700; margin-bottom: var(--s1, 4px); }    /* listing / order title */
.sk-block-title { font-weight: 700; font-size: .95rem; margin-bottom: var(--s3, 12px); } /* card heading */

/* ── 7. COMPACT FORM LABELS ──────────────────────────────────── */
.sk-filter-lbl { margin-bottom: 3px; font-size: .78rem; }               /* browse filter bar */
.sk-field-lbl  { display: block; font-size: .8rem; font-weight: 600;    /* scheduling fields */
                 color: var(--muted); margin-bottom: 5px; }

/* ── 8. BUTTON VARIANTS ──────────────────────────────────────── */
.sk-btn--center { text-align: center; }
/* WhatsApp brand green — no token exists for it. Double-class +
   :hover so the base .sk-btn--outline hover colours don't win,
   matching the old inline-style behaviour. */
.sk-btn.sk-btn--wa,
.sk-btn.sk-btn--wa:hover { border-color: #25D366; color: #25D366; }
/* Buttons stacked in a modal always centre their label */
.sk-modal-actions .sk-btn { justify-content: center; }

/* Distance badge on a provider card. Was an inline style, which no media query
   could override — inline beats stylesheet regardless of specificity. */
.dist-label {
  margin-left: 5px;
  font-size: .72rem;
  color: var(--primary);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Provider cards: 2-up on phones (compact tier)
   ---------------------------------------------------------------------------
   main.css collapsed .sk-grid-3 to a single column below 480px. A full-width
   card is ~380px tall, so a phone showed roughly TWO providers — which defeats
   the point of a browse page. Two columns show six.

   Two columns alone would just squeeze, so this is a real compact tier: the gap
   and container padding shrink to buy card width back, and the three elements
   that break at ~160px (name ellipsis, the location + distance line, the "Also"
   chips) are each handled rather than left to overflow.

   Card width at 360px: (360 − 28 padding − 10 gap) / 2 = 161px.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Scoped to grids that hold provider cards (.sk-grid--pcards) rather than
     .sk-grid-3/.sk-grid-4 globally. The dashboard's saved-providers grid is also
     .sk-grid-3 but uses a HORIZONTAL card (44px avatar + text), which would be
     crushed at this width — and the admin layouts force 1fr !important anyway.
     Container padding is deliberately left at 20px: scoping the gap change buys
     back most of the width without altering gutters on every page. */
  .sk-grid--pcards { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .sk-pcard__body   { padding: 28px 8px 6px; }
  .sk-pcard__footer { padding: 6px 8px 9px; }
  .sk-pcard__banner { height: 46px; }
  .sk-pcard__avatar { width: 46px; height: 46px; bottom: -23px; }

  /* Ellipsis on a 145px line hides most business names. Two lines fit, and the
     clamp keeps every card the same height so the grid rows stay aligned. */
  .sk-pcard__name {
    white-space: normal;
    max-width: 100%;
    font-size: .8rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;      /* reserve both lines so 1-line names don't shift */
  }

  .sk-pcard__cat,
  .sk-pcard__loc     { font-size: .66rem; }
  .sk-pcard__rating  { font-size: .68rem; gap: 2px; }
  .sk-pcard__price   { font-size: .74rem; }

  /* "📍 Eldoret · 7.5km away" overflows one 145px line — let the distance drop
     onto its own line instead of clipping the town name. */
  .sk-pcard__loc     { line-height: 1.3; }
  .sk-pcard__loc .dist-label { display: block; margin-left: 0; }

  /* Three chips wrap into a ragged block at this width — show one. */
  .sk-pcard__chips-lbl,
  .sk-pcard__chip:nth-child(n+3) { display: none; }
  .sk-pcard__chip { max-width: 100%; font-size: .58rem; }

  .sk-pcard__footer .sk-btn { font-size: .7rem; padding: 6px 4px; }
  .sk-pcard__tier-pill { font-size: .5rem; padding: 1px 5px; }
}

/* Very narrow phones (iPhone SE, 320px) — card lands at 141px. Stay 2-up, but
   surrender the extras rather than let them collide. */
@media (max-width: 340px) {
  .sk-pcard__chips { display: none; }
  .sk-pcard__name  { font-size: .76rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Utility atoms — extend the vocabulary already defined above.
   Each one is byte-equivalent to an inline declaration repeated 4+ times across
   provider/, so swapping them in changes nothing visually.

   Deliberately ABSENT: display:none / :inline / :contents. Three places in
   provider/ compare `el.style.display === 'none'` in JavaScript; moving those to
   a class makes style.display read as '' and silently breaks the toggle.
   ────────────────────────────────────────────────────────────────────────── */
.sk-muted        { color: var(--muted); }
.sk-text-primary { color: var(--primary); }
.sk-text-danger  { color: var(--danger); }
.sk-text-body    { color: var(--text); }
.sk-bold         { font-weight: 700; }
.sk-nowrap       { white-space: nowrap; }
.sk-text-right   { text-align: right; }
.sk-flex1        { flex: 1; }
.sk-mb-16        { margin-bottom: 16px; }
.sk-mb-18        { margin-bottom: 18px; }
.sk-mb-28        { margin-bottom: 28px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Data tables on phones
   ---------------------------------------------------------------------------
   Audit finding: no admin or provider page overflows at 320–360px — the layouts
   are already responsive, and .sk-table is auto-wrapped in .sk-table-wrap
   (overflow-x:auto) with min-width 640–680px. So the tables SCROLL correctly.

   The real problem is that they scroll invisibly. admin/users.php renders a
   1114px table into a 360px viewport: you see USER and CONTACT, while status,
   verified, joined, last-login and the action buttons sit off-screen with no
   indication they exist. Nothing signals "scroll me", and once you do scroll,
   nothing tells you which row you are on.

   Two fixes, both pure CSS, no markup change:
     1. Scroll shadows that appear only when there is more to reach and fade out
        at each end (background-attachment: local vs scroll does the detection).
     2. A sticky first column below 700px, so the identifying cell — the person
        or the order — stays put while the rest scrolls under it.
   ────────────────────────────────────────────────────────────────────────── */

.sk-table-wrap {
  /* Two opaque "cover" layers scroll WITH the content (local); two shadow
     layers stay fixed to the edges (scroll). At the far left the cover sits
     over the shadow and hides it; scroll right and the cover moves away,
     revealing it. That is the whole affordance — no JS, no scroll listener. */
  background:
    linear-gradient(to right,  var(--surface), rgba(255,255,255,0)) 0 0 / 28px 100% no-repeat,
    linear-gradient(to left,   var(--surface), rgba(255,255,255,0)) 100% 0 / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,.16), rgba(0,0,0,0)) 0 0 / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) 100% 0 / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

@media (max-width: 700px) {
  /* Keep the identifying column visible while the rest scrolls.
     An explicit background is required: a transparent sticky cell would let
     the scrolling columns show through it. border-collapse:collapse drops
     borders on sticky cells in several browsers, so the right-hand rule is
     drawn with box-shadow instead. */
  .sk-table th:first-child,
  .sk-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  .sk-table th:first-child { background: var(--light); z-index: 3; }

  /* Row hover must not turn the sticky cell transparent. */
  .sk-table tr:hover td:first-child { background: var(--light); }
}