/* kv_topbar_mobile.css
   Mobile topbar / sidebar behaviour for every page that includes
   incfiles/_topbar.php (feed, dashboard, listings, etc).

   WHY THIS FILE EXISTS:
   The topbar JS (in _topbar.php) toggles body.kv-sidebar-open and the
   #kvSidebarOverlay element to open/close the mobile drawer. The matching CSS
   that actually slides the sidebar in (transform:none) + shows the overlay used
   to live ONLY in auth-common.css, which is loaded by the auth headers but NOT
   on the main logged-in pages (socialfeed.php only loads style.bundle.css +
   kv_pro_polish.css). Result: on mobile the hamburger set the class but nothing
   moved — the sidebar stayed at translateX(-225px) off-screen and every top-bar
   tap "did nothing". These rules are extracted verbatim from auth-common.css so
   the behaviour matches the auth pages. All selectors are scoped to
   #kt_app_header / #kt_app_sidebar / body.kv-sidebar-open — no global side
   effects on .card / a / input. */

@media (max-width:991.98px){
  #kt_app_header_container{padding-left:10px !important;padding-right:10px !important;}
  #kt_app_header .app-navbar{margin-left:auto;gap:2px;align-items:center;padding-right:max(6px,env(safe-area-inset-right,0px));}
  #kt_app_header .app-navbar-item{margin-left:.35rem !important;}
  #kt_app_header .app-navbar .btn-icon,#kt_header_user_menu_button,.kv-guest-user-link{width:35px !important;height:35px !important;}
  #kt_menu_item_wow svg{display:block;width:20px;height:20px;}
  #kt_app_header .btn-icon-muted{color:rgba(15,23,42,.92) !important;}
  [data-bs-theme="dark"] #kt_app_header .btn-icon-muted{color:rgba(248,250,252,.92) !important;}
  #kt_app_header .btn-icon-muted .ki-duotone{color:inherit !important;opacity:1 !important;}
  #kt_app_header .btn-icon-muted .ki-duotone .path1,#kt_app_header .btn-icon-muted .ki-duotone .path2,#kt_app_header .btn-icon-muted .ki-duotone .path3,#kt_app_header .btn-icon-muted .ki-duotone .path4,#kt_app_header .btn-icon-muted .ki-duotone .path5,#kt_app_header .btn-icon-muted .ki-duotone .path6,#kt_app_header .btn-icon-muted .ki-duotone .path7,#kt_app_header .btn-icon-muted .ki-duotone .path8,#kt_app_header .btn-icon-muted .ki-duotone .path9,#kt_app_header .btn-icon-muted .ki-duotone .path10{opacity:1 !important;}
  #kt_app_header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;z-index:2147483200 !important;min-height:58px !important;padding-top:env(safe-area-inset-top,0px) !important;background:var(--bs-body-bg,#fff) !important;box-shadow:0 8px 24px rgba(15,23,42,.08) !important;}
  body{padding-top:calc(58px + env(safe-area-inset-top,0px)) !important;}
  #kt_app_header_container{min-height:58px !important;}
  #kt_app_header .app-navbar-item{min-height:34px;display:flex;align-items:center;}
  .kv-lang-dropdown-mobile .dropdown-menu{position:fixed !important;top:calc(58px + env(safe-area-inset-top,0px) + 8px) !important;right:max(10px,env(safe-area-inset-right,0px)) !important;left:auto !important;transform:none !important;width:min(280px,calc(100vw - 20px)) !important;max-width:calc(100vw - 20px) !important;}
  #kt_app_header .btn.btn-icon,#kt_app_header button.btn.btn-icon,#kt_app_header a.btn.btn-icon{width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;}
  #kt_app_header button,#kt_app_header .btn{touch-action:manipulation;}
  #kt_app_header .btn{pointer-events:auto;}
  #kvSidebarOverlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(2px);z-index:2147483140;}
  body.kv-sidebar-open #kvSidebarOverlay{display:block;}
  body.kv-sidebar-open{overflow:hidden;}
  body.kv-sidebar-open #kt_app_sidebar{display:flex !important;visibility:visible !important;position:fixed !important;top:0 !important;bottom:0 !important;left:0 !important;z-index:2147483150 !important;width:260px !important;max-width:86vw !important;transform:none !important;overflow:auto !important;-webkit-overflow-scrolling:touch;}
  /* Metronic's base .drawer sets visibility:hidden; clear it when the drawer is closed too so future opens work. */
  body:not(.kv-sidebar-open) #kt_app_sidebar.drawer{visibility:hidden;}
  /* topbar dropdown menus (avatar / notifications / apps / search) opened by the
     custom toggleMenu — keep them above the fixed header + overlay */
  #kt_app_header .menu.show,#kt_app_header .menu-sub.show,#kt_app_header .dropdown-menu.show{z-index:2147483305 !important;}
  /* The mobile chrome (header/sidebar/bottom-nav/dropdowns) was cranked to
     ~2.1B z-index, which floats OVER Bootstrap modals. Fix: put the modal + its
     backdrop ABOVE all chrome, and when a modal is open drop the WHOLE chrome
     (header, sidebar, overlay, bottom-nav, settings sheet — the sidebar was the
     piece previously forgotten) beneath the backdrop. */
  .modal{z-index:2147483620 !important;}
  .modal-backdrop{z-index:2147483610 !important;}
  body.modal-open #kt_app_header,
  body.modal-open #kt_app_sidebar,
  body.modal-open #kvSidebarOverlay,
  body.modal-open .kv-bottom-nav,
  body.modal-open .kv-mobile-settings-sheet,
  body.modal-open .kv-mobile-settings-backdrop{z-index:2147483090 !important;}
  /* When the user opens the sidebar it must sit ABOVE any modal/backdrop. A
     lingering welcome/wallet modal previously left the opened sidebar behind the
     backdrop, so the hamburger looked like it "wasn't opening". Force it on top
     and hide any modal/backdrop while the sidebar drawer is open. */
  body.kv-sidebar-open #kt_app_sidebar{z-index:2147483700 !important;}
  body.kv-sidebar-open #kvSidebarOverlay{z-index:2147483690 !important;display:block !important;}
  body.kv-sidebar-open .modal,
  body.kv-sidebar-open .modal-backdrop{display:none !important;}
}

/* --- Bottom nav + mobile settings + tour/footer sheet (footerbase) ----------
   Same situation as the topbar: footerbase.php renders the bottom nav, the
   Quick-Settings sheet and the tour/footer sheets on every page, but their CSS
   lived only in auth-common.css. On the main app pages they fell back to
   position:static — the Settings sheet rendered inline in the page flow instead
   of as a fixed overlay ("bottom settings button / modal below content").
   Extracted verbatim from auth-common.css. All class-scoped, no global rules. */
@media (max-width:767.98px){
  body{padding-bottom:76px;}
  .kv-bottom-nav{display:block!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;z-index:2147483000!important;transform:none!important;margin:0!important;background:rgba(255,255,255,0.92);border-top:1px solid rgba(15,23,42,0.10);backdrop-filter:blur(10px);}
  [data-bs-theme="dark"] .kv-bottom-nav{background:rgba(17,24,39,0.92);border-top-color:rgba(255,255,255,0.10);}
  .kv-bottom-nav .kv-bottom-nav-inner{display:flex;justify-content:space-around;gap:6px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));}
  .kv-bottom-nav .kv-bottom-nav-item{flex:1 1 0;text-decoration:none;color:rgba(15,23,42,0.68);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border:0;border-radius:14px;min-height:52px;background:transparent;font:inherit;}
  [data-bs-theme="dark"] .kv-bottom-nav .kv-bottom-nav-item{color:rgba(229,231,235,0.78);}
  .kv-bottom-nav .kv-bottom-nav-item svg{width:22px;height:22px;display:block;}
  .kv-bottom-nav .kv-bottom-nav-item .kv-bottom-nav-label{font-size:11px;line-height:1;font-weight:600;letter-spacing:0.01em;}
  .kv-bottom-nav .kv-bottom-nav-item.kv-active{color:var(--bs-primary,#6B6EEB);background:rgba(107,110,235,0.10);}
  .kv-mobile-settings-sheet{display:none;position:fixed!important;left:12px!important;right:12px!important;bottom:82px!important;top:auto!important;z-index:2147483002!important;background:rgba(255,255,255,.98);border:1px solid rgba(15,23,42,.1);border-radius:8px;padding:12px;box-shadow:0 18px 44px rgba(2,6,23,.18);backdrop-filter:blur(10px);}
  .kv-mobile-settings-sheet.kv-open{display:block;}
  [data-bs-theme="dark"] .kv-mobile-settings-sheet{background:rgba(17,24,39,.98);border-color:rgba(255,255,255,.12);box-shadow:0 18px 44px rgba(0,0,0,.35);}
  .kv-mobile-settings-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
  .kv-mobile-settings-title{font-weight:800;color:rgba(15,23,42,.92);}
  [data-bs-theme="dark"] .kv-mobile-settings-title{color:rgba(229,231,235,.92);}
  .kv-mobile-settings-actions{display:grid;gap:8px;}
  .kv-mobile-settings-action{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px 12px;border:1px solid rgba(15,23,42,.08);border-radius:8px;background:#fff;color:#243047;text-align:left;font-weight:750;text-decoration:none;}
  .kv-mobile-settings-action:hover{color:var(--bs-primary,#6B6EEB);background:#f4f8ff;}
  [data-bs-theme="dark"] .kv-mobile-settings-action{background:#1f2438;border-color:rgba(255,255,255,.08);color:#e5e7eb;}
  .kv-mobile-settings-action svg{width:20px;height:20px;flex:0 0 20px;}
  .kv-mobile-settings-backdrop{display:none;position:fixed!important;inset:0!important;z-index:2147483001!important;background:rgba(15,23,42,.18);}
  .kv-mobile-settings-backdrop.kv-open{display:block;}
  #kt_app_footer .kv-footer-desktop-menu{display:none !important;}
  #kt_app_footer .kv-footer-mobile-toggle{display:inline-flex !important;align-items:center;gap:6px;}
}
@media (max-width:450px){
  body{padding-bottom:62px;}
  .kv-bottom-nav .kv-bottom-nav-inner{padding:8px 8px calc(8px + env(safe-area-inset-bottom));}
  .kv-bottom-nav .kv-bottom-nav-item{gap:0;padding:10px 5px;min-height:44px;}
  .kv-bottom-nav .kv-bottom-nav-item .kv-bottom-nav-label{display:none;}
  .kv-mobile-settings-sheet{bottom:68px;}
}
.kv-tour-sheet{display:none;position:fixed;left:12px;right:12px;bottom:76px;z-index:1050;background:rgba(255,255,255,0.98);border:1px solid rgba(15,23,42,0.10);border-radius:16px;padding:12px 12px 10px;box-shadow:0 10px 30px rgba(2,6,23,0.18);backdrop-filter:blur(10px);}
[data-bs-theme="dark"] .kv-tour-sheet{background:rgba(17,24,39,0.98);border-color:rgba(255,255,255,0.12);box-shadow:0 10px 30px rgba(0,0,0,0.35);}
.kv-tour-sheet.kv-tour-open{display:block;}
.kv-footer-mobile-toggle{display:none;}
.kv-footer-sheet{display:none;position:fixed;left:12px;right:12px;bottom:76px;z-index:1040;background:rgba(255,255,255,0.98);border:1px solid rgba(15,23,42,0.10);border-radius:16px;padding:12px;box-shadow:0 10px 30px rgba(2,6,23,0.18);backdrop-filter:blur(10px);}
[data-bs-theme="dark"] .kv-footer-sheet{background:rgba(17,24,39,0.98);border-color:rgba(255,255,255,0.12);box-shadow:0 10px 30px rgba(0,0,0,0.35);}
.kv-footer-sheet.kv-open{display:block;}
@media (max-width:450px){.kv-footer-sheet{bottom:62px;}.kv-tour-sheet{bottom:62px;}}

/* ---- UI sweep fixes (2026-06-24) ---- */
@media (max-width:991.98px){
  /* Off-canvas drawer sidebar opened at top:0 BEHIND the 60px fixed header
     (z-index header > sidebar), so its top items ("OVERVIEW" label + Dashboard)
     were hidden under the header. Offset the drawer below the header. */
  #kt_app_sidebar.app-sidebar.drawer{ padding-top:60px !important; }
  /* QA debug overlay was sitting at bottom:12px, on top of the 76px bottom-nav
     ("Settings" item was half-covered). Lift it clear of the nav. */
  #kvQaOverlay{ bottom:88px !important; }
  /* Profile stats strip (Followers/Following/Friends/Posts/…) was a content-width
     horizontal scroll strip that overflowed and cut off the last stat on phones.
     Constrain it to the viewport and wrap so every stat shows (no scroll). The
     element is sized to content inside an overflow-x container, so width must be
     pinned. Specificity matches wall.css's `.kv-stats-container .kv-stats-scroll`. */
  .kv-stats-container{ overflow-x:visible !important; }
  .kv-stats-container .kv-stats-scroll{
    flex-wrap:wrap !important; gap:8px !important;
    width:100% !important; max-width:100% !important; overflow-x:visible !important;
  }
  .kv-stats-container .kv-stats-scroll > .kv-stat{ flex:1 1 88px !important; min-width:88px !important; }
}
@media (max-width:450px){
  #kvQaOverlay{ bottom:74px !important; }
}

/* ---- Responsive cleanup batch (2026-06-24) ---- */
@media (max-width:991.98px){
  /* #1 Show the Koovira logo at the top of the mobile drawer sidebar */
  body.kv-sidebar-open #kt_app_sidebar .app-sidebar-logo,
  body.kv-sidebar-open #kt_app_sidebar #kt_app_sidebar_logo{
    display:flex !important; align-items:center; padding:12px 16px !important;
    border-bottom:1px solid #eef0f4; flex:0 0 auto;
  }
  body.kv-sidebar-open #kt_app_sidebar .app-sidebar-logo-default{ display:inline-block !important; height:34px !important; }
  body.kv-sidebar-open #kt_app_sidebar .app-sidebar-logo-minimize{ display:none !important; }
  /* #1 Make sure the menu scrolls (bound height + scroll container) */
  body.kv-sidebar-open #kt_app_sidebar{ display:flex !important; flex-direction:column !important; }
  body.kv-sidebar-open #kt_app_sidebar #kt_app_sidebar_menu_scroll,
  body.kv-sidebar-open #kt_app_sidebar .app-sidebar-wrapper{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; max-height:none !important; }
  /* #7 Dropdown menus: compact + easy to tap on mobile */
  .menu.menu-sub-dropdown{ width:min(86vw,260px) !important; border-radius:14px !important; padding:8px !important; box-shadow:0 16px 40px rgba(16,24,40,.20) !important; }
  .menu.menu-sub-dropdown .menu-link{ padding:11px 12px !important; min-height:44px; }
}
/* #1 Desktop: ensure the sidebar menu is scrollable when it overflows */
@media (min-width:992px){
  #kt_app_sidebar #kt_app_sidebar_menu_scroll{ overflow-y:auto !important; }
}

/* Header user avatar — ported from auth-common.css (which app pages don't load) so the
   avatar renders correctly everywhere _topbar loads. Without these the image shows at
   natural size AND the initial letter stays visible (overlapping = the broken look). */
#kt_header_user_menu_button{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50% !important;overflow:hidden;background:linear-gradient(135deg,#e0e7ff 0%,#dbeafe 100%);color:#1d4ed8;}
#kt_header_user_menu_button img{position:absolute;inset:0;border-radius:50% !important;width:35px;height:35px;object-fit:cover;display:block;}
#kt_header_user_menu_button .kv-user-menu-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:13px;font-weight:700;line-height:1;text-transform:uppercase;}
#kt_header_user_menu_button.kv-user-menu-button--has-image .kv-user-menu-fallback{display:none;}
.top_menu-avatar{object-fit:cover;background:linear-gradient(135deg,#e0e7ff 0%,#dbeafe 100%);}