/* 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; }
}

/* master now uses the same 60px sticky topbar as khelpur and chief, so the bar
   must GROW by the inset rather than 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));
}

/* ---- 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. */
/* master keeps its own 56/156 and 68/168 anchors; only the inset is added. */
.floating-item-position   { top: calc(60px + 15px + var(--kp-safe-top)) !important; }
.floating-item-position-2 { top: calc(60px + 115px + var(--kp-safe-top)) !important; }
@media (min-width: 768px) {
  .floating-item-position   { top: calc(60px + 15px + var(--kp-safe-top)) !important; }
  .floating-item-position-2 { top: calc(60px + 115px + var(--kp-safe-top)) !important; }
}
/* master's #form-alerts uses top:50% (vertically centred), not a topbar anchor,
   so it is deliberately left alone. */

/* ---------------------------------------------------------------------------
   Floating wallet and timer - modelled on the user end.
   khelpur gives these two SEPARATE selectors (.mesmerizing-wallet on the left,
   #countdownClockContainer on the right) and positions each explicitly. On
   master both elements share .floating-item-position, so every rule hit both
   and they stacked. They now carry distinct marker classes and are pinned to
   opposite edges, exactly as on the user end. Width is content-driven.
   --------------------------------------------------------------------------- */
.floating-item-position,
.floating-item-position-2 {
  width: auto !important;
  max-width: max-content !important;
}
.floating-item-position.kp-float-left {
  left: 15px !important;
  right: auto !important;
}
.floating-item-position.kp-float-right {
  right: 15px !important;
  left: auto !important;
}
@media (min-width: 992px) {
  .floating-item-position.kp-float-left  { left: 20px !important; }
  .floating-item-position.kp-float-right { right: 20px !important; }
}

/* ---------------------------------------------------------------------------
   MASTER SIDEBAR COLOUR - set DIRECTLY on the element.
   Master's original sidebar was .sidebarbgcolor = #ffa50088: yellow at ~53%
   alpha over a blurred backdrop. Routing this through the theme variables kept
   failing, so the background is painted here explicitly and cannot be
   overridden by the variable chain. Ink is dark brown for contrast on yellow.
   --------------------------------------------------------------------------- */
#appSidebar,
#appSidebar.bd-sidebar,
.bd-sidebar {
  background-color: rgba(255, 165, 0, 0.53) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-right: 1px solid rgba(120, 82, 0, 0.35) !important;
}
[data-bs-theme="dark"] #appSidebar,
[data-bs-theme="dark"] .bd-sidebar {
  background-color: rgba(255, 165, 0, 0.53) !important;
  border-right-color: rgba(0, 0, 0, 0.35) !important;
}

/* Ink, icons and states on the yellow surface. */
#appSidebar .sidebar-brand-text,
#appSidebar .offcanvas-title,
#appSidebar .sidebarbutton-text,
#appSidebar .sidebarbutton-icon,
#appSidebar .btn-close { color: #241a00 !important; }
#appSidebar .topbar-brand-highlight { color: #6b4b00 !important; }

#appSidebar .sidebarbutton > button:hover,
#appSidebar .sidebarbutton > a:hover { background-color: rgba(255, 255, 255, .35) !important; }

#appSidebar .sidebarbutton.SideBtnActive > button,
#appSidebar .sidebarbutton.SideBtnActive > a { background-color: #6b4b00 !important; }
#appSidebar .sidebarbutton.SideBtnActive .sidebarbutton-text,
#appSidebar .sidebarbutton.SideBtnActive .sidebarbutton-icon { color: #ffffff !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 - master.
   .btn-close is a background-image SVG, so `color` has no effect; `filter` does.
   Master's sidebar stays YELLOW in both themes, so the glyph must stay DARK in
   both. Bootstrap 5.3 auto-inverts it to white under [data-bs-theme=dark],
   which made it white-on-yellow and invisible - this cancels that.
   --------------------------------------------------------------------------- */
#appSidebar .btn-close,
.bd-sidebar .btn-close,
[data-bs-theme="dark"] #appSidebar .btn-close,
[data-bs-theme="dark"] .bd-sidebar .btn-close {
  filter: none !important;
  opacity: 1 !important;
}