/* kv_feed_mobile.css
 * ---------------------------------------------------------------------------
 * Social feed / wall — mobile presentation fixes (founder review, 2026-08-15,
 * revised 2026-08-16). Colour/spacing/interaction-affordance only — no markup,
 * no JS, no behaviour change. Desktop (>=768px) is untouched except §4, which
 * fixes a vertical-centring bug that exists at every width.
 *
 * CASCADE NOTE (why so many rules carry a doubled class):
 *   The base post-card styling lives in assets/css/wall.css and
 *   assets/css/kv_pro_polish.css, which between them declare `.wall-action-bar`
 *   and `.wall-reaction-bar` in FIVE separate blocks, several with `!important`
 *   (wall.css:432, :489, :1431, :1476; kv_pro_polish.css:279, :312, :486).
 *   Those are all specificity (0,1,0)/(0,2,0). This file is emitted by
 *   incfiles/_kv_bottomnav_css.php from _topbar.php, i.e. AFTER wall.css — so
 *   an equal-specificity rule happens to win today purely on document order.
 *   That is fragile: any page that emits the topbar before wall.css silently
 *   loses every fix below. The selectors here therefore qualify with the card
 *   (`.card.wall-post-card…`, (0,3,0)) so they win on SPECIFICITY and no longer
 *   depend on load order at all.
 * ------------------------------------------------------------------------- */

/* One shared inset for the whole post card — the single Instagram-style
   gutter that replaces the three nested ones (see §2). */
:root { --kv-feed-inset: 12px; }

/* 1. BLANK WHITE CARD AT THE TOP OF THE FEED  ------------------------------
   Founder: "showing white blank card on top".

   Measured: `.kv-page-heading-card` rendered 32px tall while its innerText was
   253 characters. Cause: its only child is a flex row whose two columns are
   `.d-lg-flex` desktop side-columns that compute to `position: fixed` with
   height 705px on mobile. Fixed children are out of flow, so the flex row
   measured height 0 and the card collapsed to a bare 32px white strip — a card
   with a border and background and no visible content.

   The columns are desktop-only by intent (`d-lg-flex`), and their content is
   already reachable elsewhere on mobile, so the empty shell is simply removed
   below the lg breakpoint rather than trying to reflow fixed elements.

   SCOPE (2026-09-01): `.kv-page-heading-card` is applied by the global
   `kv-unified-layout` injector (config/common_includes.php:895) in two different
   ways, and only one of them is the empty shell described above:
     (a) synthesised wrapper — the page has no `#kt_app_toolbar_container`, so the
         script builds `div.card.kv-page-heading-card` around the first heading
         block. This is the feed case, and the one that collapses. Feed pages
         carry no toolbar container (verified: socialfeed.php, feed.php,
         index.php, cpages/social/_indexfeed.php all match 0), so they always
         land here and stay hidden exactly as before.
     (b) the page's REAL Metronic toolbar — the script just tags the existing
         `#kt_app_toolbar_container`. That region is not an empty shell: of 361
         pages carrying the container, 143 put live controls in it (counted by
         walking each container to its matching </div> by tag depth; 0 unparsed).
         The affected controls are entry points, e.g. the FoodVerse "Cart"
         (cpages/food/menu.php), "Write a blog" (blog.php), "Add Category"/"Add
         Item" (cpages/food/menu_manage.php), "Add Hotel", "Add Event", "Add
         Product", and the "Add new lead" CRM screens.
   Hiding (b) took the only control for those actions to 0x0 below 992px —
   measured on restaurant_menu.php (Cart, a full checkout dead-end) and blog.php
   ("Write a blog", 0x0). The blanket hide is therefore narrowed to the
   synthesised wrapper; the real toolbar keeps rendering. Specificity rises to
   (1,1,0) but the rule it must not break is the feed one above, which is the
   same selector minus the guard, so order is moot.

   Scope of the claim, deliberately: an earlier pass of this audit ended each
   toolbar block at the string "kt_app_content", which does not match pages that
   write class="app-content" with no id — so those blocks ran on to the end of
   the file and the scan mis-attributed page-body controls to the toolbar. That
   produced a false "Pay Invoice (Koovira Credits)" / "Save Availability"
   severity claim; both of those toolbars are in fact title-only and were never
   affected. Verified after the fix: 26 public pages at 375px all render the
   toolbar with no zero-width controls and no horizontal overflow. */
@media (max-width: 991.98px) {
  .kv-page-heading-card:not(#kt_app_toolbar_container) { display: none !important; }

  /* 1b. TOOLBAR ACTIONS MUST WRAP  (2026-09-02)
     Consequence of two correct fixes meeting, neither wrong alone:
       - the rule above makes every page's real toolbar render on mobile again;
       - the root font-size lift further down this file (12px -> 15px, founder:
         "unreadable text on mobile") makes everything in it proportionally wider.
     Toolbars built as `d-flex flex-stack` (title left, actions right) with no
     `flex-wrap` then have nowhere to put the actions. Measured on blog.php at
     375px: "Write a blog" ran from x=254 to x=382, i.e. 7px past the viewport,
     and documentElement.scrollWidth went to 382 — the button WAS the horizontal
     overflow. Pages whose markup already carries `flex-wrap` (e.g.
     restaurant_menu.php) were fine, which is exactly why this must be fixed
     centrally rather than per page: 143 toolbars hold controls and only some of
     them opted into wrapping.
     Wrapping is also the cheaper layout — blog.php's toolbar got SHORTER, 179px
     -> 118px, because the actions drop to their own line instead of being
     squeezed beside the title. Verified no-op where there was no problem:
     citydetail.php 114 -> 116px, groups.php 375 -> 375 scrollWidth, both still
     zero overflow. */
  #kt_app_toolbar_container { flex-wrap: wrap !important; }
}

@media (max-width: 767.98px) {

  /* 2. TRIPLE PADDING  ----------------------------------------------------
     Founder: "on responsive view unnecessary padding — card padding then post
     padding. make it professional like instagram".

     Measured at 390px, the horizontal inset was applied by THREE nested
     layers plus the page container:

       #kt_app_content_container.container-xxl   6px    (wall.css @991.98)
         .wall-post-card                         card border + 12px radius
           .card-header                         15px
           .card-body                           12.6px
             > .px-4   (text, media posts only) 16px
             > .px-2   (actions + comments)      8px
               .wall-action-bar (px-3)          16px

     ~34px per side of a 390px screen, and the nesting meant text, media and
     the action bar all started at different x — which is what reads as
     unprofessional far more than the absolute size does.

     Instagram's model: the card is full-bleed, MEDIA touches both edges, and
     every non-media element shares ONE inset. That is reproduced exactly:
       - the negative margin cancels the 6px container gutter so the card spans
         the full viewport, and the radius/side borders are dropped (a
         full-bleed card with rounded corners reads as broken);
       - card-header, the `.px-4` text wrapper and the `.px-2` action/comment
         wrapper are all normalised to --kv-feed-inset;
       - `.card-body` itself goes to 0 so the inset is never applied twice —
         on media posts it is already `px-0` and the media block is a direct
         child, which is what lets media run edge-to-edge. */
  .card.wall-post-card.kv-feed-card {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  .card.wall-post-card .card-header {
    padding: var(--kv-feed-inset) var(--kv-feed-inset) 8px !important;
  }
  /* wall.js emits TWO different body shapes (wall.js:3144):
       media post     -> `card-body py-2 px-0`, media as a direct child, text
                         in a `.px-4` wrapper and actions/comments in `.px-2`;
       text-only post -> `card-body py-2`, everything a direct child.
     They are handled separately so that the ONE inset lands on text in both
     cases while media keeps its 0 and stays edge-to-edge. Targeting the body
     as a whole would either indent the media or strip the inset off the url
     preview / poll / comments of a text-only post. */

  /* Text-only posts: the body itself carries the single inset, and every
     direct child (content, url preview, meta card, poll, comments) inherits
     it — nothing else needs a rule. */
  .card.wall-post-card .card-body:not(.px-0) {
    padding-left: var(--kv-feed-inset) !important;
    padding-right: var(--kv-feed-inset) !important;
  }
  /* Media posts: the body stays at 0 so the media block runs edge-to-edge;
     the two wrappers around everything else take the inset instead. */
  .card.wall-post-card .card-body.px-0 > .px-4,
  .card.wall-post-card .card-body.px-0 > .px-2 {
    padding-left: var(--kv-feed-inset) !important;
    padding-right: var(--kv-feed-inset) !important;
  }

  /* 3. VIEW COUNT WRAPPING TO A SECOND LINE  ------------------------------
     Founder: "like share forward or view should be in same line for each post"
     / "check heart, comment share images, view is going to next line".

     Measured: `.wall-action-bar` is a flex row that inherits `flex-wrap: wrap`
     (wall.css:432) AND `gap: 10px`. Its first child — the like/comment/share
     group — carries Bootstrap `gap-4` (24px) and was stretching to the bar's
     full width, so its buttons were spread edge-to-edge and `.kv-pa-views`
     (~50px) had nowhere to go and wrapped: bar height 69px for one row of
     controls.

     Fix: never wrap; stop the group stretching (`flex: 0 1 auto` + `width:
     auto`) and pack it with a small gap so the buttons read as a cluster;
     push the view count to the far right with `margin-left: auto`.

     Width budget at the narrowest supported width (360px): the card is now
     full-bleed, so 360 - 2*12 = 336px of usable row. Three 44px buttons + two
     4px gaps = 140px, view count ~58px => 198px. The 4th ("Message") button
     appears only at >=576px (`d-none d-sm-inline-flex`), giving 242px inside
     552px. Comfortable at 360 / 390 / 414 with no wrap and no squashing.

     Tap targets are RAISED, not shrunk, to reach the row: every control is a
     minimum 44x44 box (Apple HIG / WCAG 2.5.5 target size), above the 40px
     floor. Bar height is 44 + 2*2 padding = 48px — one line, down from 69. */
  .card.wall-post-card .wall-action-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    /* Horizontal padding 0: the `.px-2` wrapper above already supplies the
       shared inset, so the action row lines up with the text and the header
       instead of being indented a further 16px by its own `px-3`. */
    padding: 2px 0 !important;
    margin: 2px 0 0 !important;
    min-height: 48px;
  }
  /* The like/comment/share cluster. `:not(.wall-reaction-bar)` is belt-and-
     braces — the popover is a sibling and has no `d-flex` today, but it must
     never be laid out as part of the row if that ever changes. */
  .card.wall-post-card .wall-action-bar > .d-flex:not(.wall-reaction-bar) {
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }
  .card.wall-post-card .wall-action-bar .kv-pa-btn {
    flex: 0 0 auto !important;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 8px !important;
    gap: 5px !important;
    justify-content: center;
    white-space: nowrap;
  }
  .card.wall-post-card .wall-action-bar .kv-pa-views {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    min-height: 44px;
    padding-left: 8px;
    white-space: nowrap;
  }
}

/* 4. REACTION PICKER: FIDDLY, AND IT COVERED THE POST  ---------------------
   Founder: "reaction is little complicated and unprofessional".

   The INTERACTION the founder asked for already exists in wall.js and is left
   completely untouched: `reactQuick()` (wall.js:3348) likes/unlikes on a plain
   tap, a 450ms `pointerdown` timer (wall.js:~3317) opens the full set on
   long-press, and `onmouseenter` opens it on hover for mice. Nothing here
   changes a handler or a server action. Two PRESENTATION faults made that good
   behaviour feel broken:

     (a) the popover is `bottom-100` — anchored above the action bar, i.e.
         directly over the post's media/text. Founder: it "does not [should
         not] obscure the post". It is re-anchored BELOW the bar, where it
         overlays the comment area instead of the content just reacted to.
     (b) `kv_pro_polish.css:322` gives each emoji `translateY(-4px)
         scale(1.35)` on hover, and `wall.css:365` `scale(1.4)`. The targets
         moved out from under the finger as they grew, so picking a specific
         reaction took two or three attempts — precisely "complicated". The
         transform is removed and replaced with a static 44x44 target and a
         flat background tint, so the emoji stays exactly where it was tapped.

   `display` is deliberately never set: the popover is toggled by adding and
   removing Bootstrap's `.d-none`, and a `display: flex !important` here would
   pin it permanently open. */
.card.wall-post-card .wall-reaction-bar {
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 8px !important;
  right: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 999px !important;
  max-width: calc(100% - 16px);
  border-top-width: 1px !important;
}
.card.wall-post-card .wall-reaction-bar > .d-flex {
  flex-wrap: nowrap !important;
  gap: 4px !important;
}
.card.wall-post-card .wall-reaction-bar .reaction-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  transform: none !important;
  transition: background-color .15s ease !important;
}
.card.wall-post-card .wall-reaction-bar .reaction-item:hover,
.card.wall-post-card .wall-reaction-bar .reaction-item:focus,
.card.wall-post-card .wall-reaction-bar .reaction-item:active {
  transform: none !important;
  background: rgba(109, 75, 240, .10) !important;
}
.card.wall-post-card .wall-reaction-bar .reaction-item .fs-3 {
  font-size: 24px !important;
  line-height: 1 !important;
}
/* 5 x 44px targets + 4 x 4px gaps + 12px padding = 248px, inside the 336px
   full-bleed card at 360px. */

/* 5. COMMENT PLACEHOLDER NOT VERTICALLY CENTRED  --------------------------
   Founder: "comment box placeholder text is not on middle of height of
   textbox. all these small things u must check in UI UX".

   The composer is a `rows="1"` textarea with an inline `min-height: 45px` and
   Bootstrap `py-3` (12px). Its line-height was INHERITED rather than declared,
   so the used content height depended on whatever `fs-7`/`lh-base` resolved to
   on that page — leaving several px of dead space below the text, which is why
   the placeholder sat visibly high.

   Rather than patch the padding against an inherited value, the box is made
   deterministic: line-height and padding are both declared and add up to the
   45px min-height exactly (21 + 12 + 12 = 45), so a single line is centred by
   construction at any font size the theme picks. `height` is deliberately NOT
   set — the composer auto-grows by writing `style.height` as the user types,
   and a fixed height here would fight it.

   Applies at all widths: the same misalignment is present on desktop. */
.card.wall-post-card textarea[placeholder*="comment" i] {
  line-height: 21px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: 45px !important;
}

/* ============================================================================
   MOBILE READABILITY + TABLELESS LAYOUT            (founder directive, 2026-09-02)
   ----------------------------------------------------------------------------
   Two complaints, both measured on
   /product/eveready-1012-carbon-zinc-aaa-battery-pack-of-10-on-koovira-11448:

   1. TEXT TOO SMALL TO READ. That page renders 18 elements at 9.36px, 60 at
      10.66px and 32 at 11px; the "We check delivery to your area..." line is
      12.87px in #6c757d grey. On a phone anything under ~12px is hard to read
      and 9px is not readable at all. Platform guidance is 16px for body text.
      Bootstrap's .small / Keen's .fs-7 .fs-8 .fs-9 are the culprits — they are
      sized for a desktop grid and were never re-based for mobile.

   2. DATA IN TABLES. Nine tables on that page, each 886px wide inside a 375px
      viewport. They sit in .table-responsive so they side-scroll instead of
      breaking the layout, but side-scrolling a two-column label/value table is
      exactly the experience being objected to.

   Everything here is scoped to <=991.98px so desktop is untouched.
   ========================================================================== */
@media (max-width: 991.98px) {

  /* ---- 1. THE ROOT CAUSE: html font-size is 12px on mobile ---------------- */
  /* Measured on a 375px viewport: getComputedStyle(html).fontSize === "12px".
     The browser default is 16px, so EVERY rem-based size renders at 75% —
     Bootstrap's .small (0.875rem) resolves to 10.5px instead of 14px, and the
     theme's .fs-8/.fs-9 land at 8-9px. That is why the page reads as unreadable
     and why per-class overrides did nothing: they are rem-based too, so they
     shrank by the same 25%.
     Raising the root scales all of it proportionally in one move. 15px keeps
     the design's relative rhythm intact while bringing body copy to ~15px and
     the smallest utilities to ~11-12px, instead of 8-9px. */
  html { font-size: 15px !important; }
  /* body carries its own explicit 12px, which overrides the root, so body copy stayed
     small even after raising html. Set it in rem so it now follows the root. */
  body { font-size: 1rem !important; line-height: 1.5 !important; }

  /* ---- 1b. floors for anything not rem-based ----------------------------- */
  /* Raise the floor rather than restyling every component: these utility
     classes are what the small text actually resolves to. 0.875rem = 14px is
     the smallest that stays comfortably legible on a phone. */
  .small, small,
  .fs-7, .fs-8, .fs-9,
  .f-s-11, .f-s-12, .f-s-13 { font-size: 0.875rem !important; line-height: 1.45 !important; }

  .text-muted.small, small.text-muted { font-size: 0.875rem !important; }

  /* Grey-on-white at small sizes is the other half of "not readable": #6c757d
     is about 4.6:1, which passes at large sizes but reads washed out on a
     phone. Darken muted text on mobile only. */
  .text-muted { color: #55595e !important; }

  /* Nothing should render below 12px on a phone, whatever set it. */
  body, p, li, td, th, span, div, label { font-size: max(0.75rem, 1em); }

  /* ---- 2. tableless: stack rows as cards -------------------------------- */
  /* Standard responsive pattern — each row becomes a block, each cell a line.
     A two-column label/value table reads as "label, then value" with no
     horizontal scrolling at all. Wide data tables also stop overflowing;
     they simply become taller, which is the correct trade on a phone. */
  .table-responsive > table.table,
  table.kv-stack-mobile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .table-responsive > table.table > thead,
  table.kv-stack-mobile > thead {
    /* Column headers mean nothing once rows are stacked; the cell label carries it. */
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table-responsive > table.table > tbody,
  .table-responsive > table.table > tbody > tr,
  table.kv-stack-mobile > tbody,
  table.kv-stack-mobile > tbody > tr { display: block !important; width: 100% !important; }

  .table-responsive > table.table > tbody > tr,
  table.kv-stack-mobile > tbody > tr {
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--bs-body-bg, #fff);
  }
  .table-responsive > table.table > tbody > tr > td,
  .table-responsive > table.table > tbody > tr > th,
  table.kv-stack-mobile > tbody > tr > td,
  table.kv-stack-mobile > tbody > tr > th {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    padding: 2px 0 !important;
    white-space: normal !important;   /* stop nowrap forcing a scrollbar back in */
    text-align: left !important;
  }
  /* First cell of each row is the label in these label/value tables. */
  .table-responsive > table.table > tbody > tr > th:first-child,
  .table-responsive > table.table > tbody > tr > td:first-child,
  table.kv-stack-mobile > tbody > tr > *:first-child {
    font-weight: 600;
    color: #55595e;
    font-size: 0.8125rem;
  }
  /* The wrapper no longer needs to scroll, and leaving it scrollable creates a
     phantom horizontal drag on touch. */
  .table-responsive { overflow-x: visible !important; }

  /* Opt out where a table genuinely must stay a grid (e.g. a real report). */
  table.kv-keep-table { display: table !important; }
  table.kv-keep-table > thead { position: static !important; width: auto; height: auto; clip: auto; }
  table.kv-keep-table > tbody, table.kv-keep-table > tbody > tr { display: table-row-group !important; }
  table.kv-keep-table > tbody > tr { display: table-row !important; border: 0; padding: 0; margin: 0; }
  table.kv-keep-table > tbody > tr > td, table.kv-keep-table > tbody > tr > th { display: table-cell !important; }
  .table-responsive:has(> table.kv-keep-table) { overflow-x: auto !important; }
}

/* ---- FoodVerse mobile cart bar --------------------------------------------
   Moved out of cpages/food/menu.php (house rule: no inline CSS/JS). The bar is
   the ONLY way to open the cart on a phone — the desktop cart button lives in
   #kt_app_toolbar_container, which is hidden below 992px — so it must stay
   reachable, but it is hidden until the cart has something in it so it never
   covers the menu for nothing. menu.php toggles .is-visible, nothing else. */
/* BUG FIX 2026-09-07 — the div carries Bootstrap `bottom-0` (bottom:0 !important) with z-index
   1035 (above the 1030 bottom nav), so the food cart/checkout bar painted OVER the whole bottom
   tab nav (tabs untappable while ordering) and sat under the iOS home indicator. Lift it to sit
   flush ON TOP of the nav via the shared --kv-bottomnav-safe contract; !important is required to
   beat `bottom-0`'s own !important (same specificity → later source order + !important wins). */
.kv-mobile-cart-bar { z-index: 1035; display: none; bottom: var(--kv-bottomnav-safe, 0px) !important; }
.kv-mobile-cart-bar.is-visible { display: block; }
/* Cart-sheet quantity controls: guarantee a 44px touch target so +/−/trash aren't mis-tapped. */
.kv-food-qty-ctrl { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 992px) { .kv-mobile-cart-bar,
                            .kv-mobile-cart-bar.is-visible { display: none; } }