/*
 * eduvem-mobile.css - the Eduvem phone layer for Sngine (default theme).
 *
 * Fleet-wide and client-independent: no colour is hard-coded except neutral greys/shadows; every
 * accent comes from the theme's own CSS variables (--link-color, --card-dark-color, ...) or from
 * the client's css_custome_css, so each client keeps its accent colour and night mode keeps working.
 * Everything is inside the phone media query (the same 768 px breakpoint where Sngine shows its
 * bottom bar), so tablets and desktop are untouched.
 *
 * Delivered by scripts/sngine/apply-vendor-patches.py (Patch 6), which copies this file and
 * eduvem-mobile.js into content/themes/default/eduvem/ and links them from _head.tpl.
 * See docs/sngine-hosting.md "Mobile layer". Findings it fixes:
 * Kornell .claude/reviews/social-mobile-2026-10-13/findings.md (issues 1-5).
 */

/* Backdrop for the two navigations (issue 3). Created by eduvem-mobile.js; hidden by default. */
.knl-backdrop {
  display: none;
}

/* The composer options toggle only exists on phones. */
.knl-opts-toggle {
  display: none;
}

@media (max-width: 767.98px) {

  /* ---------------------------------------------------------------- 2. header wordmark */
  .main-header .knl-brand-wordmark {
    font-size: 18px;
    letter-spacing: 0;
    margin-left: 4px;
    text-shadow: 2px 2px var(--body-bg-color-dark);
  }

  /* "SOCIAL NETWORK" (en_us) is the longest wordmark */
  html[data-lang="en_us"] .main-header .knl-brand-wordmark {
    font-size: 15px;
  }

  .main-header .logo-wrapper .logo {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------------------------------------------------------------- 1. compact composer */
  /* attachments: one horizontally scrollable row of chips instead of 10 full-width buttons */
  .publisher-tools-tabs {
    margin: 0 12px;
    padding-top: 10px;
  }

  .publisher-tools-tabs > ul.row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fade at the right edge: tells the user the row scrolls */
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }

  .publisher-tools-tabs > ul.row::-webkit-scrollbar {
    display: none;
  }

  .publisher-tools-tabs > ul.row > li {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    scroll-snap-align: start;
  }

  .publisher-tools-tabs > ul.row > li:last-child {
    padding-right: 40px; /* the last chip is not hidden under the fade */
  }

  .publisher-tools-tab {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 8px 14px;
    white-space: nowrap;
  }

  /* toggles (schedule / anonymous / adult / collaborative): collapsed behind the options button */
  .publisher-footer.knl-opts-collapsed .publisher-footer-options {
    display: none;
  }

  .publisher-footer-options {
    margin-bottom: 12px;
  }

  .publisher-footer-options .form-table-row {
    margin-bottom: 6px !important;
    min-height: 44px;
    align-items: center;
  }

  /* footer: always reachable, sticks to the bottom of the screen above Sngine's bottom bar */
  .publisher-footer {
    position: sticky;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    padding: 10px 12px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, 0.35);
  }

  body.night-mode .publisher-footer {
    background: var(--card-dark-color);
  }

  .modal .publisher-footer {
    bottom: 0;
  }

  .publisher-footer-buttons {
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* the privacy picker shrinks (ellipsis) so the labelled publish button always fits */
  .publisher-footer-buttons > .btn-group {
    flex: 1 1 auto;
    min-width: 0;
  }

  .publisher-footer-buttons > .btn-group > .btn {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .publisher-footer-buttons > .d-grid {
    flex: 0 0 auto;
  }

  .publisher-footer-buttons .btn,
  .knl-opts-toggle {
    min-height: 44px;
  }

  .knl-opts-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 44px;
    align-self: stretch;
    width: 44px;
    padding: 0;
  }

  .knl-opts-toggle[aria-expanded="true"] {
    color: var(--link-color);
  }

  .knl-opts-toggle.knl-has-active::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--link-color);
  }

  /* the publish button gets its (already translated) label back */
  .publisher-footer-buttons .js_publisher-btn > span.d-none {
    display: inline-block !important;
  }

  .publisher-footer-buttons .js_publisher-btn {
    margin-left: 0 !important;
    padding-left: 18px;
    padding-right: 18px;
    font-weight: 600;
  }

  /* ---------------------------------------------------------------- 3. one menu at a time + backdrop */
  .knl-backdrop {
    position: fixed;
    inset: 0;
    z-index: 997; /* under the header (1001) and the bottom bar (999), over the page */
    background: rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
  }

  body.knl-menu-open .knl-backdrop {
    display: block;
  }

  body.knl-menu-open {
    overflow: hidden;
  }

  /* the hamburger sidebar becomes a drawer over the dimmed page, not a panel that shoves the feed */
  .sg-offcanvas.active {
    min-height: 0 !important;
  }

  .sg-offcanvas.active .sg-offcanvas-mainbar {
    left: 0;
  }

  .sg-offcanvas .sg-offcanvas-sidebar {
    position: fixed !important;
    top: 70px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: -100%;
    width: min(86vw, 340px);
    max-width: none;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 998;
    background: var(--body-bg-color, #f0f2f5);
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.25);
  }

  body.night-mode .sg-offcanvas .sg-offcanvas-sidebar {
    background: var(--body-bg-color-dark);
  }

  .sg-offcanvas.active .sg-offcanvas-sidebar {
    left: 0;
  }

  /* ---------------------------------------------------------------- 4. tap targets >= 44 px */
  /* post menu chevron: same look, 44x44 hit area */
  .post-meta .dropdown .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -10px -10px 0 0;
  }

  /* comment React / Reply: padding grows the hit area, negative margin keeps the layout */
  .comment-actions > li .text-link {
    display: inline-block;
    padding: 13px 4px;
    margin: -13px -4px;
  }

  .comment-actions > li {
    margin-right: 10px;
  }

  .post-actions .action-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
  }

  /* create group / page / event: the labelled button instead of the 32x29 icon-only one */
  .btn.d-none.d-lg-block[data-url^="modules/add.php"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }

  .btn.btn-icon.d-block.d-lg-none[data-url^="modules/add.php"] {
    display: none !important;
  }

  /* /modcp + /admincp dashboard: the whole stat card is the link */
  .stat-panel {
    position: relative;
  }

  .stat-panel .stat-cell {
    position: static;
  }

  .stat-panel .stat-cell > a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* ---------------------------------------------------------------- 5. visible labels */
  /* post actions: show the translated React / Comment / Share labels that Sngine hides below xl */
  .post-actions .action-btn > span.d-none,
  .post-actions .reaction-btn-name.d-none {
    display: inline-block !important;
    font-size: 12px;
    margin-left: 2px;
  }

  .post-actions .action-btn .action-icon.mr5 {
    margin-right: 2px !important;
  }

  /* profile friend / follow buttons: "Amigos", "Seguindo" instead of two bare check marks */
  .profile-buttons-wrapper .btn > span.d-none.d-xxl-inline-block {
    display: inline-block !important;
  }

  .profile-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .profile-buttons-wrapper .btn {
    min-height: 44px;
    min-width: 44px;
    margin: 0 !important;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
  }

  /* profile tabs: scrollable row, icon over a short label */
  .profile-tabs-wrapper {
    justify-content: flex-start !important;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .profile-tabs-wrapper::-webkit-scrollbar {
    display: none;
  }

  .profile-tabs-wrapper a {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 56px;
    padding: 8px 6px;
    font-size: 11px;
    line-height: 14px;
  }

  .profile-tabs-wrapper a > svg {
    margin: 0 !important;
  }

  .profile-tabs-wrapper a > span.d-none {
    display: block !important;
    margin: 4px 0 0 !important;
    white-space: nowrap;
  }
}

/* very narrow phones (360 px class) */
@media (max-width: 374.98px) {
  .main-header .knl-brand-wordmark {
    font-size: 16px;
  }

  html[data-lang="en_us"] .main-header .knl-brand-wordmark {
    font-size: 13px;
  }

  .post-actions .action-btn > span.d-none,
  .post-actions .reaction-btn-name.d-none {
    font-size: 11px;
  }
}