/* ============================================================
   BWLMC Nabu - global.css (DROP-IN)
   - Sticky footer that also behaves inside Android WebView
   - Uses dynamic viewport units (dvh) + safe fallbacks
   ============================================================ */

:root{
  --petrol:#4284b5;
  --bronze:#be905d;
  --black:#000000;
  --white:#ffffff;
  --dark:#222222;
  --container-bg:#2e2e2e;
}

/* ------------------------------------------------------------
   Base
------------------------------------------------------------ */

body{
  margin:0;
  background-color:var(--dark);
  color:var(--white);
  font-family:"Segoe UI", Arial, sans-serif;
}

/* Keep scrollbars stable and prevent automatic Android text enlargement */
html{
  overflow-y:scroll;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* IMPORTANT:
   Do NOT force html/body height:100% globally — Android WebView can lie about vh.
   We rely on flex + min-height on body instead. */
html, body{ height:auto; }

/* ------------------------------------------------------------
   Sticky footer layout (works in APK WebView too)
------------------------------------------------------------ */

/* Baseline flex layout */
body{
  display:flex;
  flex-direction:column;

  /* baseline */
  min-height:100vh;

  /* modern: correct viewport on mobile */
  min-height:100dvh;
}

/* If head.php sets --vh from window.innerHeight, this is most accurate */
body{
  min-height:calc(var(--vh, 1vh) * 100);
}

/* Let main consume remaining space so footer can sit at bottom */
body > main{
  flex:1 0 auto;
  display:block;
}

/* Ensure common top elements don't stretch */
body > nav,
body > header{
  flex:0 0 auto;
}

/* Footer pushed to bottom */
body > footer{
  margin-top:auto;
  flex:0 0 auto;
}

/* Keep existing "layout-sticky-footer" class working too */
body.layout-sticky-footer{
  display:flex;
  flex-direction:column;
}
body.layout-sticky-footer main,
body.layout-sticky-footer .content-wrapper{
  flex:1 0 auto;
}
body.layout-sticky-footer footer{
  margin-top:auto;
}

/* ------------------------------------------------------------
   Typography
------------------------------------------------------------ */

h1, h2, h3, h4, h5{
  color:var(--petrol);
  font-weight:600;
}
p, li, span, a{
  color:var(--white);
}

/* ------------------------------------------------------------
   Containers
------------------------------------------------------------ */

.container{
  background:none;
  border:none;
  box-shadow:none;
  padding-top:30px;
  padding-bottom:30px;
}

.content-box{
  background-color:var(--container-bg);
  border:1px solid var(--bronze);
  border-radius:12px;
  padding:25px 30px;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
}

/* The main wrapper used in many pages */
.nabu-container{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:20px;
  box-sizing:border-box;
}

.nabu-inner{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

.nopadtop{ padding-top:0 !important; }

/* ------------------------------------------------------------
   Navbar + Footer visuals (unchanged)
------------------------------------------------------------ */

.navbar{
  background-color:var(--petrol);
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

footer{
  background-color:var(--petrol);
  color:var(--white);

  width:100%;
  min-height:70px;
  height:auto;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 -2px 10px rgba(0,0,0,0.3);
  z-index:1000;
  flex-shrink:0;
}

.footer-cache-version{
  opacity:0.6;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.05em;
}

/* ------------------------------------------------------------
   Links / Buttons
------------------------------------------------------------ */

a{
  color:var(--bronze);
  text-decoration:none;
}
a:hover{
  color:var(--petrol);
  text-decoration:underline;
}

button, .btn{
  background-color:var(--petrol);
  color:var(--white);
  border:none;
  border-radius:6px;
  padding:8px 16px;
  font-weight:500;
  cursor:pointer;
  transition:background-color 0.2s ease;
}
button:hover, .btn:hover{
  background-color:var(--bronze);
}

.subnav,
nav,
footer{
  user-select:none;
}

/* ------------------------------------------------------------
   Scrollbars
------------------------------------------------------------ */

::-webkit-scrollbar{ width:14px; }

::-webkit-scrollbar-track{
  background-color:#1a1a1a;
  border-radius:10px;
  margin:2px;
}

::-webkit-scrollbar-thumb{
  background-color:#4284b5;
  border-radius:10px;
  border:3px solid #1a1a1a;
  box-shadow:inset 0 0 6px rgba(0,0,0,0.4);
  transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
::-webkit-scrollbar-thumb:hover{
  background-color:#5b9cc9;
  border-color:#2b2b2b;
}

/* Firefox Scrollbar */
*{
  scrollbar-width:auto;
  scrollbar-color:#4284b5 #1a1a1a;
}

/* ------------------------------------------------------------
   Back button helpers
------------------------------------------------------------ */

.btn-back{
  display:inline-block;
  background:#4284b5;
  color:#fff;
  padding:6px 12px;
  border-radius:6px;
  font-size:0.9rem;
  text-decoration:none;
  font-weight:600;
  transition:background .2s;
}
.btn-back:hover{
  background:#356c94;
  color:#fff;
  text-decoration:none;
}

.back-button-wrapper{ margin-bottom:12px; }

/* ------------------------------------------------------------
   Update alert (legacy)
------------------------------------------------------------ */

/* ------------------------------------------------------------
   View-as banner (unchanged)
------------------------------------------------------------ */

.viewas-banner{
  position:sticky;
  top:0;
  z-index:9999;
  width:100%;
  background:rgba(190,144,93,0.14);
  border-bottom:1px solid rgba(190,144,93,0.35);
  backdrop-filter:blur(10px);
}

.viewas-banner-inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  font-size:13px;
  color:#fff;
  flex-wrap:wrap;
}

.viewas-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(190,144,93,0.55);
  background:rgba(190,144,93,0.18);
  font-weight:800;
  letter-spacing:0.04em;
}

.viewas-text{
  flex:1 1 180px;
  min-width:0;
  overflow-wrap:anywhere;
}
.viewas-text strong{ color:var(--bronze); }

.viewas-exit{
  margin-left:auto;
  text-decoration:none;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.25);
  color:#fff;
  white-space:nowrap;
}
.viewas-exit:hover{ text-decoration:underline; }

.viewas-pfp{
  width:26px;
  height:26px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.18);
  flex:0 0 auto;
}

.viewas-toggle{
  text-decoration:none;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.20);
  color:#fff;
  white-space:nowrap;
}
.viewas-toggle:hover{ text-decoration:underline; }

.viewas-banner a,
.viewas-banner a:visited{
  color:#ffffff;
  text-decoration:none;
  transition:color 0.15s ease, opacity 0.15s ease;
}
.viewas-banner a:hover,
.viewas-banner a:focus{
  color:#ffffff;
  opacity:0.75;
  text-decoration:underline;
}
.viewas-banner .viewas-toggle:hover{ opacity:0.85; }
.viewas-banner .viewas-exit:hover{ opacity:0.9; }

@media (max-width:520px){
  .viewas-banner-inner{ gap:8px; }
}

/* Later rule = authoritative (keep) */
body{ min-height:calc(var(--vh, 1vh) * 100); }

body.nabu-is-app #nabuInstallBar{ display:none; }

/* ============================================================
   Nabu global alerts
   ============================================================ */

.nabu-alert{
  --nabu-alert-accent:#4284b5;
  position:fixed;
  top:16px;
  left:50%;
  z-index:10000;
  width:min(720px, calc(100% - 24px));
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 10px 12px 14px;
  border:1px solid rgba(255,255,255,0.13);
  border-left:5px solid var(--nabu-alert-accent);
  border-radius:13px;
  color:rgba(255,255,255,0.95);
  background:rgba(31,31,31,0.97);
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-weight:700;
  font-size:1.02rem;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(-10px);
  transition:opacity .2s ease, transform .2s ease;
}

.nabu-alert.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nabu-alert.is-leaving{
  opacity:0;
  transform:translateX(-50%) translateY(-10px);
}

.nabu-alert-success{ --nabu-alert-accent:#3fc17a; }
.nabu-alert-error{ --nabu-alert-accent:#ef6262; }

.nabu-alert-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--nabu-alert-accent);
  background:color-mix(in srgb, var(--nabu-alert-accent) 9%, transparent);
}

.nabu-alert-text{
  min-width:0;
  line-height:1.35;
}

.nabu-alert-close{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin:0;
  padding:0;
  border:0;
  border-radius:8px;
  color:rgba(255,255,255,0.62);
  background:transparent;
  box-shadow:none;
  cursor:pointer;
}

.nabu-alert-close:hover,
.nabu-alert-close:focus-visible{
  color:#fff;
  background:rgba(255,255,255,0.08);
}

.nabu-alert-close:focus-visible{
  outline:2px solid var(--nabu-alert-accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .nabu-alert{ transition-duration:1ms; }
}