/* ============================================================
   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);
}

/* Global safety net */
*{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;   /* stops iOS Safari inflating text */
  text-size-adjust: 100%;
}
html, body{ overflow-x: hidden; max-width: 100%; }
img{ max-width: 100%; height: auto; }

/* Cards scroll horizontally instead of breaking layout (tables etc.) */
.cmb-card{ overflow-x: auto; }

/* Sidebar — desktop default (MacBook, Windows PC) */
.cmb-sidebar{
  width: 260px;
  flex-shrink: 0;
  min-height: 100vh;
  padding: 20px 0;
}

.cmb-hamburger-btn{
  display:none;
  position:fixed;
  top:12px; left:12px;
  z-index:1060;
  background: var(--cmb-gray-950);
  color: var(--cmb-gold-bright);
  border:none;
  border-radius:8px;
  width:44px; height:44px;   /* 44px min touch target, iOS + Android */
  font-size:20px;
  line-height:1;
  box-shadow: var(--cmb-shadow);
  cursor:pointer;
}
.cmb-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.5);
  z-index:1045;
}
.cmb-overlay.open{ display:block; }

/* ============================================================
   Phones + tablets (iPhone, Android, iPad portrait) — slide-in sidebar
   ============================================================ */
@media (max-width: 991px){
  .cmb-hamburger-btn{ display:block; }

  .cmb-sidebar{
    position: fixed !important;
    top: 0;
    left: -280px;               /* offscreen by default; left is more reliable than transform on old iOS */
    width: 280px !important;
    height: 100vh;
    height: 100dvh;             /* accounts for Safari's dynamic toolbar */
    min-height: 0 !important;
    z-index: 1050;
    transition: left .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.35);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 64px;          /* clears the hamburger button */
  }
  .cmb-sidebar.open{ left: 0; }

  main.flex-grow-1{
    padding-top: 68px !important;
    width: 100% !important;
    max-width: 100vw;
  }

  /* Prevent iOS auto-zoom when tapping a field */
  input, select, textarea{ font-size:16px !important; }
}

/* Small phones (iPhone SE / older Androids, ~480px and under) */
@media (max-width: 480px){
  main.flex-grow-1{ padding: 16px !important; padding-top: 68px !important; }
  main h3{ font-size: 20px; }
  .cmb-card{ padding: 14px !important; }
  .tier-card .avail-btn{ padding: 12px 8px; font-size: 13px; }
  .table{ font-size: 13px; }
}

/* Tablet landscape / small laptops */
@media (min-width: 992px) and (max-width: 1200px){
  .cmb-sidebar{ width: 220px; }
}

/* ============================================================
   LOGIN / REGISTER / SETUP screens
   Deep gradient backdrop + interactive dot-ripple canvas
   (canvas is injected by assets/js/auth-bg.js)
   ============================================================ */
.cmb-auth-body{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,   #23262d 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 85% 100%, #2a2419 0%, transparent 62%),
    radial-gradient(ellipse 70% 70% at 10% 90%,  #1c1e24 0%, transparent 60%),
    linear-gradient(160deg, #14161a 0%, #191b20 45%, #131519 100%);
}

/* The dot-ripple canvas sits between the gradient and the card */
.cmb-auth-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.cmb-auth-card{
  width: 400px;
  max-width: 100%;
  padding: 48px 34px;
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.cmb-auth-card-wide{ width: 440px; }

/* Phones — stays centered, a bit more width and vertical padding */
@media (max-width: 991px){
  .cmb-auth-body{ padding: 16px 14px; }
  .cmb-auth-card{
    width: 100%;
    max-width: 420px;
    padding: 52px 26px;
  }
  .cmb-auth-card .form-control{ padding: 13px 14px; }
  .cmb-auth-card .btn{ padding: 14px !important; font-size: 16px; }
}

/* 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); }