/* ============================================================
   GLOWWLIFE MLM PLATFORM — Main Stylesheet
   ============================================================ */

/* ---- Brand Colors — Green / White / Gold ---- */
:root {
  --gloww-primary:      #15803d;  /* deep green */
  --gloww-primary-dark: #0e5e2b;  /* darker green */
  --gloww-primary-soft: #e6f5ec;  /* green tint */
  --gloww-accent:       #d4af37;  /* gold */
  --gloww-gold:         #d4af37;
  --gloww-gold-bright:  #f2c14e;
  --gloww-gold-soft:    #fbf3d8;
  --gloww-success:      #15803d;
  --gloww-light:        #f3faf5;

  /* Override Bootstrap primary -> green, site-wide */
  --bs-primary: #15803d;
  --bs-primary-rgb: 21,128,61;
  --bs-link-color: #15803d;
  --bs-link-hover-color: #0e5e2b;
}



/* ---- Bootstrap primary remap (green) ---- */
.text-primary { color: #15803d !important; }
.bg-primary { background-color: #15803d !important; }
.bg-primary-subtle { background-color: #e6f5ec !important; }
.text-primary-emphasis { color: #0e5e2b !important; }
.border-primary { border-color: #15803d !important; }
.link-primary { color: #15803d !important; }
.btn-primary {
  --bs-btn-bg: #15803d; --bs-btn-border-color: #15803d;
  --bs-btn-hover-bg: #0e5e2b; --bs-btn-hover-border-color: #0e5e2b;
  --bs-btn-active-bg: #0c4f24; --bs-btn-active-border-color: #0c4f24;
  --bs-btn-disabled-bg: #15803d; --bs-btn-disabled-border-color: #15803d;
}
.btn-outline-primary {
  --bs-btn-color: #15803d; --bs-btn-border-color: #15803d;
  --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d;
  --bs-btn-active-bg: #0e5e2b; --bs-btn-active-border-color: #0e5e2b;
}
/* Gold accent helpers */
.text-gold { color: var(--gloww-gold) !important; }
.bg-gold   { background: var(--gloww-gold) !important; }
.btn-gold {
  background: var(--gloww-gold); color: #4a3000; border: none; font-weight: 700;
}
.btn-gold:hover { background: var(--gloww-gold-bright); color: #4a3000; }

/* ---- Fonts ---- */
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--gloww-light); }

/* ---- Navbar ---- */
.gloww-navbar { background: linear-gradient(135deg, var(--gloww-primary), var(--gloww-primary-dark)); min-height: 56px; }

/* ---- Sidebar ---- */
.gloww-sidebar { background: #fff; border-right: 1px solid #e9ecef; min-height: 100%; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 2px;
  color: #1e3a5f; text-decoration: none; font-size: 0.88em; font-weight: 500;
  transition: all 0.18s;
}
.sidebar-link:hover { background: #f0f4ff; color: var(--gloww-primary); }
.sidebar-link.active { background: #e8eaf6; color: var(--gloww-primary); font-weight: 700; }
.sidebar-link i { font-size: 1.05em; width: 20px; text-align: center; }

/* ---- Admin Sidebar ---- */
/* =========================================
   MODERN ADMIN SIDEBAR
========================================= */

#adminSidebar {
    background: #FFAD12 !important;
    border-right: 1px solid #f59e0b !important;
    box-shadow: 0 8px 25px rgba(245,158,11,.20);
}

/* section headings */
#adminSidebar small {
    color: #854d0e !important; /* Changed to dark brown/orange for better readability */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* menu */

.admin-nav-link{

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 14px;

    margin-bottom:6px;

    border-radius:10px;

    color:#5b3a00 !important;
    
    font-weight:600;

    text-decoration:none;

    transition:.25s;
}

/* icons */

.admin-nav-link i{

    width:22px;

    text-align:center;

    font-size:18px;

    color:#15803d;
}

/* hover */

.admin-nav-link:hover{

    background:#22c55e;
    
    color:#fff !important;

    transform:translateX(4px);
}

.admin-nav-link:hover i{

    color:#fff;
}

/* active */

.admin-nav-link.active{

    background:#15803d;

    color:#fff !important;

    box-shadow:0 5px 15px rgba(21,128,61,.35);
}

.admin-nav-link.active i{

    color:#fff;
}
/* ---- Stat Cards ---- */
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.stat-icon { font-size: 1.4em; margin-bottom: 4px; }
.stat-value { font-size: 1.25em; font-weight: 800; line-height: 1.1; margin-bottom: 2px; }
.stat-label { font-size: 0.75em; color: #6c757d; font-weight: 500; }

/* ---- Colorful Stat Card Variants ---- */
.stat-green  { background: linear-gradient(135deg,#16a34a,#4ade80); color:#fff; }
.stat-blue   { background: linear-gradient(135deg,#1d4ed8,#60a5fa); color:#fff; }
.stat-orange { background: linear-gradient(135deg,#c2410c,#fb923c); color:#fff; }
.stat-purple { background: linear-gradient(135deg,#7c3aed,#c084fc); color:#fff; }
.stat-green .stat-label,.stat-blue .stat-label,.stat-orange .stat-label,.stat-purple .stat-label { color:rgba(255,255,255,.82); }
.stat-green .stat-icon,.stat-blue .stat-icon,.stat-orange .stat-icon,.stat-purple .stat-icon { color:#fff !important; opacity:.85; }

/* ---- Primary Button ---- */
.gloww-btn {
  background: linear-gradient(135deg, var(--gloww-primary), var(--gloww-primary-dark));
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  transition: opacity 0.15s, transform 0.1s;
}
.gloww-btn:hover { opacity: 0.92; transform: translateY(-1px); color: #fff; }

/* ---- Login Page ---- */
.login-bg {
  background: linear-gradient(135deg, #0e5e2b 0%, #15803d 50%, #1c9b4b 100%);
  min-height: 100vh;
}
.login-bg .card { border-radius: 16px !important; }

/* ---- Rank Badge (inline) ---- */
.rank-badge { display: inline-block; }

/* ---- OTP Input ---- */
.otp-input {
  font-size: 1.6em; font-weight: 700; letter-spacing: 0.5em;
  text-align: center; border-radius: 10px; padding: 12px;
}

/* ---- ID Selector ---- */
.id-selector-card { cursor: pointer; transition: all 0.15s; }
.id-selector-card:hover { border-color: #3f51b5 !important; background: #f0f4ff; }

/* ---- Product Card (join page) ---- */
.product-card { cursor: pointer; transition: all 0.15s; }
.product-card:hover { border-color: #3f51b5 !important; background: #f0f4ff; }

/* ---- Binary Tree ---- */
.tree-scroll-container {
  overflow-x: auto; overflow-y: auto;
  max-height: 520px; padding: 20px;
  background: #fafbff; border-radius: 8px;
  border: 1px solid #e9ecef;
}
.tree-wrapper { display: flex; justify-content: center; min-width: max-content; }
.tree-node {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.tree-node-card {
  background: #fff; border-radius: 10px; border: 2px solid #e0e0e0;
  padding: 8px 12px; min-width: 130px; text-align: center;
  cursor: pointer; transition: all 0.18s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-size: 0.8em;
}
.tree-node-card:hover { border-color: #3f51b5; transform: scale(1.04); box-shadow: 0 4px 16px rgba(63,81,181,0.18); }
.tree-node-card.root-node { border-color: var(--gloww-primary); background: #e8eaf6; }
.tree-node-card .member-name { font-weight: 700; font-size: 1em; }
.tree-node-card .member-code { color: #888; font-size: 0.82em; }
.tree-node-card .member-bv { font-size: 0.82em; color: #555; }
.tree-children { display: flex; gap: 30px; position: relative; padding-top: 30px; margin-top: -4px; }
.tree-children::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 2px; height: 30px;
  background: #ccc;
}
.tree-branch {
  display: flex; flex-direction: column; align-items: center; position: relative;
}
.tree-branch::before {
  content: ''; position: absolute; top: 0; width: 50%; height: 2px;
  background: #ccc;
}
.tree-branch.left::before { right: 50%; }
.tree-branch.right::before { left: 50%; }
.tree-empty-slot {
  background: #f8f9fa; border: 2px dashed #ccc; border-radius: 10px;
  padding: 12px; min-width: 120px; text-align: center; color: #aaa;
  font-size: 0.78em;
}
.tree-leg-label {
  font-size: 0.65em; font-weight: 700; padding: 1px 6px;
  border-radius: 3px; margin-bottom: 4px; letter-spacing: 0.05em;
}
.tree-leg-label.left { background: #e3f2fd; color: #1565c0; }
.tree-leg-label.right { background: #e8f5e9; color: #2e7d32; }

/* ---- Mobile bottom nav ---- */
.mobile-nav { background: #fff !important; padding-bottom: env(safe-area-inset-bottom); }
.mobile-nav-link { display: flex; flex-direction: column; align-items: center; color: #777; text-decoration: none; font-size: 0.65em; }
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--gloww-primary); }
.mobile-nav-link .bi { font-size: 1.4em; }

/* ---- Card / Table tweaks ---- */
.card { border-radius: 12px !important; }
.table > :not(caption) > * > * { padding: 10px 12px; }
.table th { font-size: 0.82em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.badge { font-weight: 600; border-radius: 5px; }

/* ---- Alert tweaks ---- */
.alert { border-radius: 10px; border: none; }

/* ---- Footer placeholder ---- */
.pb-5 { padding-bottom: 5rem !important; }

/* ---- Public landing page ---- */
.hero-section {
  background: linear-gradient(135deg, #0e5e2b 0%, #15803d 50%, #1c9b4b 100%);
  color: #fff; padding: 80px 0;
}
.income-card {
  border-radius: 12px; border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.income-card:hover { transform: translateY(-4px); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* ---- Responsive tweaks ---- */
@media (max-width: 768px) {
  .stat-value { font-size: 1.1em; }
  .stat-card { padding: 12px; }
  main { padding-bottom: 80px !important; }
}

/* ======================================================
   PUBLIC WEBSITE STYLES
   ====================================================== */

/* Public navbar link hover */
.navbar-nav .nav-link:hover { color: #FFD700 !important; }
.navbar-nav .nav-link.active { color: #FFD700 !important; font-weight: 600; }

/* Page hero (about, why, gallery, contact) */
.page-hero { position: relative; overflow: hidden; }
.page-hero h1 { text-shadow: 0 2px 10px rgba(0,0,0,0.4); }

/* Why cards on public page */
.why-card { transition: transform 0.2s, box-shadow 0.2s; }
.why-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(106,13,173,0.12) !important; }

/* Prose content (About page HTML output) */
.prose-content p { margin-bottom: 1rem; line-height: 1.8; }
.prose-content ul,
.prose-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose-content li { margin-bottom: 0.4rem; }
.prose-content h3, .prose-content h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose-content strong { color: #333; }

/* Gallery lightbox */
.gal-item { overflow: hidden; }
.gal-item img { transition: transform 0.3s; }
.gal-item:hover img { transform: scale(1.05); }

/* Admin: small btn */
.btn-xs { padding: 2px 8px; font-size: 0.78em; }

/* Admin: gallery image grid */
.gallery-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; }

/* Font monospace in forms */
.font-monospace { font-family: 'Courier New', monospace; }

/* Public footer hover */
.hover-white:hover { color: #fff !important; }

/* Sticky footer fix */
footer { margin-top: 0; }

/* Admin sidebar sections */
.admin-sidebar small.text-muted {
  display: block; padding: 0 6px; margin-top: 8px; margin-bottom: 4px;
}

/* Mobile-first tweaks */
@media (max-width: 575px) {
  .page-hero h1 { font-size: 1.6rem !important; }
  .page-hero .lead { font-size: 0.9rem; }
}

/* Product select card */
.product-sel-card { cursor: pointer; transition: all 0.15s; }
.product-sel-card:hover { border-color: #6A0DAD !important; background: #f5f0ff; }