/* =====================
   BASE
===================== */

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.dashboard-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  background: #f6f8f7;
}

.main {
  width: 100%;
  flex: 1;
  padding: 30px;
  box-sizing: border-box;
}


* {
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  margin: 0;
  background: #F7F5EF;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* =====================
   AUTH CONTAINER
===================== */

.auth-wrapper {
  width: 100%;
  max-width: 420px;
}

form,
.alert {
  background: #ffffff;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  width: 100%;
}

/* =====================
   HEADINGS
===================== */

h2 {
  margin-bottom: 20px;
  color: #0F3D2E;
  font-size: 22px;
  text-align: center;
}

/* =====================
   INPUTS
===================== */

input {
  width: 100%;
  padding: 14px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 15px;
}

/* =====================
   PASSWORD FIELD
===================== */

.password-wrap {
  position: relative;
}

.password-wrap button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #0F3D2E;
  font-weight: 600;
  cursor: pointer;
}

/* =====================
   BUTTONS
===================== */

button[type="submit"] {
  width: 100%;
  padding: 14px;
  background: #0F3D2E;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}

button[type="submit"]:hover {
  opacity: 0.95;
}

/* =====================
   LINKS
===================== */

.link {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  color: #0F3D2E;
  text-decoration: none;
}

/* =====================
   ALERTS
===================== */

.alert.success {
  border-left: 6px solid #0F3D2E;
  text-align: center;
}

.alert.success p {
  font-size: 14px;
}

/* =====================
   SMALL DEVICES
===================== */

@media (max-width: 480px) {

  body {
    padding: 16px;
  }

  form,
  .alert {
    padding: 22px;
  }

  h2 {
    font-size: 20px;
  }

  input {
    font-size: 14px;
    padding: 12px;
  }

  button[type="submit"] {
    padding: 13px;
    font-size: 14px;
  }
}

.captcha-box {
  margin-bottom: 16px;
}

.captcha-box span {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: #333;
}

.captcha-box input {
  width: 100%;
}

/* ================= DASHBOARD LAYOUT ================= */

.dashboard-wrapper {
  display: flex;
  min-height: 100vh;
  background: #f6f8f7;
}

.sidebar {
  width: 240px;
  background: #0F3D2E;
  color: #fff;
  padding: 25px;
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}

.sidebar nav a {
  display: block;
  color: #fff;
  padding: 12px 0;
  text-decoration: none;
}

.sidebar nav a.active {
  color: #D4AF37;
}

.logout {
  margin-top: auto;
  color: #FFD700;
  text-decoration: none;
  font-weight: 600;
}

/* ================= MAIN CONTENT ================= */

.main {
  flex: 1;
  padding: 30px;
}

.balance-card {
  background: linear-gradient(135deg,#0F3D2E,#145A44);
  color: white;
  padding: 30px;
  border-radius: 16px;
  margin-bottom: 30px;
}

.content-card {
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,.06);
}

.content-card.center {
  text-align: center;
}

.subtext {
  color: #555;
  margin-bottom: 20px;
}

/* ================= BUTTON ================= */

.btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 20px;
  background: #0F3D2E;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

/* ================= FOOTER ================= */

.footer {
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  color: #777;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {
  .dashboard-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .sidebar nav {
    display: flex;
    gap: 20px;
  }

  .logout {
    display: none;
  }
}

/* ===== SAFE AREA + TOP COVER FIX (GLOBAL) ===== */
:root{
  --safeTop: env(safe-area-inset-top, 0px);
}

/* Push the entire page away from the browser notch/status bar */
html, body{
  height: 100%;
}

body{
  padding-top: var(--safeTop);
}

/* Ensure dashboard wrapper fills screen without hiding content */
.dashboard-wrapper{
  min-height: calc(100vh - var(--safeTop));
}

/* Sidebar brand/title shouldn't be hidden at top */
.sidebar{
  padding-top: calc(25px + var(--safeTop));
}

/* Main content gets comfortable top spacing too */
.main{
  padding-top: 24px;
}

/* On small screens when sidebar becomes top bar, keep spacing */
@media (max-width: 768px){
  .sidebar{
    padding-top: calc(18px + var(--safeTop));
  }
  .main{
    padding-top: 18px;
  }
}
/* ================= MOBILE DROPDOWN NAV ================= */

.mobile-topbar {
  display: none;
}

/* Desktop sidebar stays the same */
@media (max-width: 768px) {

  :root { --safeTop: env(safe-area-inset-top, 0px); }

  /* Hide desktop sidebar */
  .sidebar { display: none !important; }

  /* Show mobile topbar */
  .mobile-topbar {
    display: flex;
    position: sticky;
    top: var(--safeTop);
    z-index: 9999;
    background: #0F3D2E;
    color: #fff;
    padding: calc(12px + var(--safeTop)) 16px 12px;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-brand {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .3px;
  }

  .mobile-menu-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 16px;
    cursor: pointer;
  }

  .mobile-dropdown {
    position: absolute;
    right: 16px;
    top: calc(100% + 10px);
    width: min(260px, 92vw);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
    overflow: hidden;
    display: none;
  }

  .mobile-dropdown.open { display: block; }

  .mobile-dropdown a {
    display: block;
    padding: 13px 14px;
    text-decoration: none;
    color: #1e1e1e;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .mobile-dropdown a.active {
    background: rgba(15,61,46,0.08);
    color: #0F3D2E;
  }

  .mobile-dropdown a.logout {
    background: rgba(184,50,50,0.08);
    color: #b83232;
    border-bottom: none;
  }

  /* Main area spacing under topbar */
  .main {
    padding-top: 18px !important;
  }

  /* make wrapper column layout for mobile */
  .dashboard-wrapper {
    flex-direction: column;
  }
}





/* =========================================================
   DASHBOARD FIX OVERRIDES (PASTE AT VERY BOTTOM of auth.css)
   Makes dashboard responsive + fixes mobile dropdown overlay
========================================================= */

/* stop auth-body centering from breaking dashboard */
body.dashboard-page{
  margin: 0 !important;
  background: #F7F5EF !important;
  min-height: 100vh !important;

  /* overrides auth.css body flex-centering */
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;

  /* overrides auth.css body padding */
  padding: 0 !important;

  /* overrides safe-area padding-top for dashboard */
  padding-top: 0 !important;
}

/* prevent “zoom out to fit” caused by horizontal overflow */
html, body.dashboard-page{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* ensure dashboard fills screen normally */
body.dashboard-page .dashboard-wrapper{
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: #f6f8f7;
}

/* sidebar should not shrink */
body.dashboard-page .sidebar{
  flex: 0 0 240px;
  width: 240px;
}

/* main should grow + not overflow */
body.dashboard-page .main{
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 30px;
}

/* mobile layout */
@media (max-width: 768px){
  body.dashboard-page .dashboard-wrapper{ flex-direction: column; }
  body.dashboard-page .main{ padding: 18px 16px; }
}

/* =========================
   OVERLAY (professional)
========================= */
body.dashboard-page .mobile-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.38);
  z-index: 9998;
}
body.dashboard-page .mobile-overlay.open{ display:block; }

/* =========================
   MOBILE DROPDOWN FIX
   - change from absolute -> fixed so it never clips/overlaps weirdly
========================= */
@media (max-width: 768px){
  body.dashboard-page .mobile-dropdown{
    position: fixed !important;
    right: 16px;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    width: min(320px, 92vw);
    z-index: 10000;
  }

  /* keep topbar above overlay */
  body.dashboard-page .mobile-topbar{
    z-index: 9999;
  }
}