:root{
  --gx-bg:#020617;
  --gx-card-bg:rgba(15,23,42,.98);
  --gx-border:rgba(148,163,184,.22);
  --gx-border-strong:rgba(148,163,184,.35);

  --gx-radius-lg:22px;
  --gx-radius-md:16px;
  --gx-radius-sm:12px;

  --gx-primary:#22c55e;
  --gx-primary-2:#14b8a6;
  --gx-primary-soft:rgba(34,197,94,.18);

  --gx-info:#0ea5e9;
  --gx-info-soft:rgba(14,165,233,.18);

  --gx-text:#e5e7eb;
  --gx-muted:rgba(229,231,235,.68);

  --gx-shadow:0 10px 30px rgba(0,0,0,.28);

  --gx-focus:0 0 0 .22rem rgba(34,197,94,.22);
  --gx-nav-h:56px;
}

/* ✅ Sticky footer support (Android-safe) */
html, body{ height:100%; }

/* ===== Body ===== */
body.gx-app-body{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.16) 0, transparent 45%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.14) 0, transparent 45%),
    var(--gx-bg);
  color:var(--gx-text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.gx-no-scroll{ overflow:hidden; }

/* Accessible focus */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:none !important;
  box-shadow:var(--gx-focus) !important;
  border-radius:999px;
}

/* ===== Shell & Sidebar ===== */

.gx-app-shell{
  display:flex;
  min-height:100vh;   /* ✅ shell owns viewport height */
  height:100%;        /* ✅ helps Android calculate height correctly */
  position:relative;
}

/* Backdrop for mobile sidebar */
.gx-app-shell::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.72);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:1035;
}
.gx-app-shell.gx-sidebar-open::before{
  opacity:1;
  pointer-events:auto;
}

.gx-app-sidebar{
  width:220px;
  padding:1.2rem 1rem;
  border-right:1px solid var(--gx-border-strong);
  background:radial-gradient(circle at top left, rgba(15,23,42,.98), rgba(2,6,23,1));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex-shrink:0;
  z-index:1040;
  position:relative;
}

.gx-sidebar-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.25rem;
}

.gx-logo-dot{
  width:16px;
  height:16px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gx-primary-2),var(--gx-primary));
  box-shadow:0 0 0 6px rgba(34,197,94,.18);
}

.gx-brand-small{
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(156,163,175,.85);
}

.gx-brand-main{
  font-weight:650;
  font-size:.98rem;
  line-height:1.1;
}

/* Nav */
.gx-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.gx-nav-link{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .75rem;
  border-radius:999px;
  color:rgba(209,213,219,.95);
  text-decoration:none;
  font-size:.9rem;
  transition:background .18s ease, color .18s ease, transform .12s ease, border-color .18s ease;
  border:1px solid transparent;
}

.gx-nav-link i{ font-size:.95rem; opacity:.95; }

.gx-nav-link:hover{
  background:rgba(255,255,255,.045);
  color:#f9fafb;
  transform:translateY(-1px);
  border-color:rgba(148,163,184,.12);
}

.gx-nav-link.active{
  background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(20,184,166,.12));
  border-color:rgba(34,197,94,.28);
  color:#bbf7d0;
  font-weight:650;
}

.gx-sidebar-footer{
  margin-top:1.25rem;
  font-size:.8rem;
  color:var(--gx-muted);
}

/* ===== Main Area ===== */

.gx-app-main{
  flex:1;
  padding:1.2rem 1.4rem;
  display:flex;
  flex-direction:column;
  min-width:0;
  /* ✅ IMPORTANT: do NOT set min-height:100vh here (Android bug) */
}

.gx-main-header{
  padding-bottom:.85rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--gx-border);
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(180deg, rgba(2,6,23,.88), rgba(2,6,23,.62));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.gx-header-badge{
  padding:.28rem .75rem;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.55);
  font-size:.8rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:#bbf7d0;
  background:rgba(15,23,42,.72);
}

.gx-main-content{
  flex:1;        /* ✅ pushes footer down */
  min-height:0;  /* ✅ prevents overflow bugs in flex layouts */
}

.gx-main-footer{
  flex-shrink:0; /* ✅ never collapses */
  padding-top:.85rem;
  border-top:1px solid var(--gx-border);
  margin-top:1rem;
  font-size:.78rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  color:var(--gx-muted);

  /* ✅ Android / PWA gesture-bar safe area */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== Cards & Metrics ===== */

.gx-card{
  border-radius:var(--gx-radius-md);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.07);
  padding:14px 14px;
  box-shadow:var(--gx-shadow);
}

.gx-card.gx-card-soft{
  background:rgba(15,23,42,.78);
  border:1px solid var(--gx-border);
  box-shadow:none;
}

.gx-card-title{
  font-weight:700;
  letter-spacing:.2px;
}

.gx-metric-value{
  font-size:1.85rem;
  font-weight:850;
  letter-spacing:.2px;
  line-height:1.1;
}

.gx-metric-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.65);
}

.gx-subtext{
  font-size:.82rem;
  color:var(--gx-muted);
}

.badge-soft{
  font-size:.75rem;
  border-radius:999px;
  padding:.25rem .6rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.78);
}

.gx-icon-pill{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
}

.gx-divider{
  height:1px;
  background:rgba(148,163,184,.16);
  margin:.75rem 0;
}

/* ===== Tables (modern dark) ===== */

.table.gx-table{
  --bs-table-bg:transparent;
  --bs-table-color:rgba(229,231,235,.92);
  --bs-table-border-color:rgba(148,163,184,.14);
  margin-bottom:0;
}
.table.gx-table thead th{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(229,231,235,.65);
  border-bottom:1px solid rgba(148,163,184,.18) !important;
}
.table.gx-table tbody td{
  padding:.7rem .65rem;
  border-top:1px solid rgba(148,163,184,.12);
}
.table.gx-table.table-hover tbody tr:hover{
  background:rgba(255,255,255,.035);
}

/* Progress */
.progress.gx-progress{
  height:10px;
  background:rgba(255,255,255,.06);
  border-radius:999px;
  overflow:hidden;
}
.progress.gx-progress .progress-bar{
  border-radius:999px;
}

/* Buttons slightly more premium (works with Bootstrap) */
.btn.gx-btn-pill{
  border-radius:999px;
}
.btn-outline-light{
  border-color:rgba(255,255,255,.18) !important;
}
.btn-outline-light:hover{
  border-color:rgba(255,255,255,.32) !important;
  background:rgba(255,255,255,.06) !important;
}

/* ===== Mobile / Tablet Responsive ===== */

.gx-sidebar-toggle{
  padding-inline:.55rem;
  padding-block:.3rem;
  border-radius:999px;
}

/* ≤ 991.98px */
@media (max-width: 991.98px){
  .gx-app-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:260px;
    max-width:80%;
    transform:translateX(-100%);
    transition:transform .25s ease-out, box-shadow .25s ease-out;
    box-shadow:0 0 0 transparent;
  }

  .gx-app-shell.gx-sidebar-open .gx-app-sidebar{
    transform:translateX(0);
    box-shadow:0 20px 45px rgba(15,23,42,.9);
  }

  .gx-nav-link{
    padding:.6rem .85rem;
    font-size:.92rem;
  }

  .gx-app-main{
    padding:.95rem .95rem 1.05rem;
  }

  .gx-main-header{
    padding-bottom:.6rem;
    margin-bottom:.8rem;
  }

  .gx-header-badge{
    font-size:.72rem;
    padding:.22rem .55rem;
  }

  .gx-main-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ≤ 575.98px */
@media (max-width: 575.98px){
  .gx-app-main{
    padding-inline:.75rem;
  }

  .gx-card{
    padding:.9rem;
    border-radius:18px;
  }

  .gx-metric-value{
    font-size:1.4rem;
  }

  .gx-brand-main{
    font-size:.92rem;
  }

  .gx-brand-small{
    font-size:.62rem;
  }
}