/* ============================================================
   CMB DIGITAL PORTAL — Colorway
   Certified Millionaire Builders
   Palette: Gold / Gray / Off-white
   ============================================================ */
:root{
  /* Gold family */
  --cmb-gold:        #c9a24b;
  --cmb-gold-bright:  #e2bf6f;
  --cmb-gold-dark:    #a4802f;
  --cmb-gold-soft:    #f3e6c7;

  /* Gray family */
  --cmb-gray-950:     #16181c;
  --cmb-gray-900:     #202329;
  --cmb-gray-800:     #2b2f37;
  --cmb-gray-600:     #565c66;
  --cmb-gray-400:     #8b909a;
  --cmb-gray-200:     #d8dade;

  /* Off-white family */
  --cmb-offwhite:      #f7f5ef;
  --cmb-offwhite-dim:  #efece2;
  --cmb-white:         #ffffff;

  --cmb-success:      #4f8f5b;
  --cmb-danger:       #b5533f;

  --cmb-radius: 10px;
  --cmb-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

body{
  background: var(--cmb-offwhite);
  color: var(--cmb-gray-900);
  font-family: 'Poppins','Segoe UI',sans-serif;
}

/* Sidebar */
.cmb-sidebar{
  background: linear-gradient(180deg, var(--cmb-gray-950), var(--cmb-gray-900));
  color: var(--cmb-offwhite-dim);
  border-right: 1px solid var(--cmb-gold-dark);
}
.cmb-sidebar .brand{
  color: var(--cmb-gold-bright);
  font-weight: 700;
  letter-spacing: .5px;
}
.cmb-sidebar a{
  color: var(--cmb-gray-200);
  text-decoration: none;
}
.cmb-sidebar a.active, .cmb-sidebar a:hover{
  background: rgba(201,162,75,0.12);
  color: var(--cmb-gold-bright);
  border-left: 3px solid var(--cmb-gold);
}
.cmb-sidebar .section-label{
  color: var(--cmb-gray-400);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}

/* Buttons */
.btn-cmb-primary{
  background: linear-gradient(135deg, var(--cmb-gold-bright), var(--cmb-gold-dark));
  color: var(--cmb-gray-950);
  border: none;
  font-weight: 600;
  border-radius: var(--cmb-radius);
}
.btn-cmb-primary:hover{ filter: brightness(1.08); color: var(--cmb-gray-950); }
.btn-cmb-outline{
  background: transparent;
  border: 1.5px solid var(--cmb-gold);
  color: var(--cmb-gold-dark);
  border-radius: var(--cmb-radius);
}

/* Cards */
.cmb-card{
  background: var(--cmb-white);
  border: 1px solid var(--cmb-gray-200);
  border-radius: var(--cmb-radius);
  box-shadow: var(--cmb-shadow);
}
.cmb-card-header{
  border-bottom: 2px solid var(--cmb-gold-soft);
}

/* Tier / upgrade cards */
.tier-card{
  background: var(--cmb-white);
  border: 1px solid var(--cmb-gray-200);
  border-radius: var(--cmb-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tier-card:hover{ transform: translateY(-3px); box-shadow: var(--cmb-shadow); }
.tier-card .tier-photo{
  aspect-ratio: 3/4;
  width: 100%;
  object-fit: cover;
  background: var(--cmb-gray-200);
}
.tier-card .tier-photo.placeholder{
  display:flex; align-items:center; justify-content:center;
  color: var(--cmb-gray-400);
  font-size: 13px;
  text-align:center;
  padding: 12px;
}
.tier-card .tier-label{
  background: var(--cmb-gold-soft);
  color: var(--cmb-gold-dark);
  font-weight: 700;
  padding: 6px 0;
  text-align:center;
}
.tier-card .avail-btn{
  width:100%;
  padding: 10px;
  background: var(--cmb-gray-950);
  color: var(--cmb-gold-bright);
  border: none;
  font-weight: 600;
  letter-spacing: 1px;
}
.tier-card .avail-btn:hover{ background: var(--cmb-gold-dark); color: var(--cmb-gray-950); }

/* Topbar */
.cmb-topbar{
  background: var(--cmb-white);
  border-bottom: 1px solid var(--cmb-gray-200);
}

/* Badges by role */
.badge-superadmin{ background: var(--cmb-gray-950); color: var(--cmb-gold-bright); }
.badge-founder{ background: var(--cmb-gold-dark); color: var(--cmb-white); }
.badge-team_member{ background: var(--cmb-gray-600); color: var(--cmb-white); }
.badge-official_member{ background: var(--cmb-gold-soft); color: var(--cmb-gold-dark); }
.badge-digital_associate{ background: var(--cmb-gray-200); color: var(--cmb-gray-600); }