/* PWA safe-area / viewport fitting.  Loaded LAST so it wins over the theme CSS.
   Every value resolves to 0px on a device with no notch or gesture bar, so desktop
   and older phones are completely unchanged.

   The mistake this file exists to correct: adding viewport-fit=cover makes iOS draw
   page content UNDER the status bar. Simply adding padding-top to #topbar did NOT
   work, because #topbar has a FIXED height:60px - the padding ate into that height
   and squashed the contents instead of moving the bar down. The bar height itself
   must grow by the inset, and every element anchored to the old flat 60px must
   shift down by the same amount. */

:root {
  --kp-safe-top:    env(safe-area-inset-top, 0px);
  --kp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --kp-safe-left:   env(safe-area-inset-left, 0px);
  --kp-safe-right:  env(safe-area-inset-right, 0px);
}

html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: contain; overflow-x: hidden; }
a, button, .btn, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Offcanvas sidebar clears the status bar and the home indicator. */
/* Sidebars and offcanvas panels. #bdSidebar on master uses the class offcanvas-lg,
   NOT plain .offcanvas, so an ".offcanvas" selector alone never matched it and its
   close button sat under the notch. The header is padded too, because on an
   offcanvas-lg the panel itself is static on desktop and only the header needs it. */
#appSidebar, #bdSidebar, .offcanvas, .offcanvas-lg, .offcanvas-md {
  padding-bottom: var(--kp-safe-bottom);
  padding-left: var(--kp-safe-left);
}
#appSidebar > .offcanvas-header,
#bdSidebar  > .offcanvas-header,
.offcanvas > .offcanvas-header,
.offcanvas-lg > .offcanvas-header {
  padding-top: calc(0.5rem + var(--kp-safe-top));
}

/* 100vh counts the collapsing browser UI on mobile; dvh tracks the real height. */
@supports (height: 100dvh) {
  .min-vh-100 { min-height: 100dvh !important; }
  .vh-100     { height: 100dvh !important; }
}

/* --- topbar: GROW it, do not pad inside a fixed height --- */
#topbar {
  height: calc(60px + var(--kp-safe-top));
  padding-top: var(--kp-safe-top);
  padding-left: calc(1rem + var(--kp-safe-left));
  padding-right: calc(1rem + var(--kp-safe-right));
}

/* --- everything anchored to the old flat 60px --- */
.content-wrapper { padding-top: calc(60px + 1rem + var(--kp-safe-top)); }
@media (min-width: 992px) {
  .bd-sidebar { padding-top: calc(60px + var(--kp-safe-top)); }
}

/* Keep the last row clear of the home indicator. */
main, .content-wrapper { padding-bottom: calc(1rem + var(--kp-safe-bottom)); }

/* ---- Floating furniture -------------------------------------------------
   Every element below is position:fixed and was anchored to a flat pixel top
   measured against a 60px topbar. Now that the bar grows by the status-bar
   inset, each must shift by the same amount or it lands on top of the bar.

   !important is REQUIRED here, not lazy: .floating-item-position is set with
   !important inside an inline style block in head.php, and #form-alerts is
   positioned by an inline style attribute in floating_items.php. Nothing but
   !important can beat either. */
/* floating item: pinned 15px below the bar at every breakpoint, so it can never
   overlap. (Its old mobile value of 56px sat 4px INSIDE the 60px bar already.) */
.floating-item-position { top: calc(60px + 15px + var(--kp-safe-top)) !important; }

/* countdown clock */
#countdownClockContainer { top: calc(90px + var(--kp-safe-top)) !important; }
@media (max-width: 991.98px) { #countdownClockContainer { top: calc(80px + var(--kp-safe-top)) !important; } }
@media (max-width: 768px)    { #countdownClockContainer { top: calc(80px + var(--kp-safe-top)) !important; } }
@media (max-width: 480px)    { #countdownClockContainer { top: calc(70px + var(--kp-safe-top)) !important; } }

/* floating wallet */
.mesmerizing-wallet { top: calc(90px + var(--kp-safe-top)) !important; }
@media (max-width: 991.98px) { .mesmerizing-wallet { top: calc(80px + var(--kp-safe-top)) !important; } }
@media (max-width: 768px)    { .mesmerizing-wallet { top: calc(80px + var(--kp-safe-top)) !important; } }
@media (max-width: 480px)    { .mesmerizing-wallet { top: calc(70px + var(--kp-safe-top)) !important; } }

/* alert toast (positioned by an inline style attribute) */
#form-alerts { top: calc(120px + var(--kp-safe-top)) !important; }

/* ---------------------------------------------------------------------------
   Floating-sidebar toggle is a DESKTOP-only control: on tablet and phone the
   sidebar is an offcanvas, so pinning it floating is meaningless. The whole
   .sidebar-footer-area is hidden below the lg breakpoint rather than just the
   button, because the area carries a top border - leaving it would show an
   empty bordered strip at the bottom of the sidebar.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .sidebar-footer-area { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Sidebar close button in dark mode.
   .btn-close is a background-image SVG, not text, so setting `color` does
   nothing - it needs `filter`. In dark mode the sidebar surface is dark, so the
   default black glyph disappears; invert it to white.
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] #appSidebar .btn-close,
[data-bs-theme="dark"] .bd-sidebar .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 1 !important;
}
#appSidebar .btn-close, .bd-sidebar .btn-close { opacity: 1 !important; }