/* BLTZMAIL_DASHBOARD_THEME_FULLBANNER_V2 */

:root{
  --theme-bg:#f5f5f1;
  --theme-grid:rgba(0,0,0,.05);
  --theme-card:#ffffff;
  --theme-card-soft:#fbfbfb;
  --theme-text:#111111;
  --theme-muted:#666666;
  --theme-line:rgba(0,0,0,.10);
  --theme-line-soft:rgba(0,0,0,.06);
  --theme-black:#050505;
  --page-max:1180px;
}

html,
body{
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  background:
    linear-gradient(var(--theme-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-grid) 1px, transparent 1px),
    var(--theme-bg) !important;
  background-size:52px 52px !important;
  color:var(--theme-text) !important;
}

body{
  min-height:100vh;
}

#loadingScreen{
  background:#ffffff !important;
}

.loading-text{
  color:#666666 !important;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  background:#050505 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.06);
}

.topbar-inner{
  width:min(var(--page-max), calc(100% - 28px)) !important;
  min-height:74px !important;
}

.topbar,
.topbar *{
  color:#ffffff !important;
}

/* =========================
   PAGE
========================= */
.page{
  width:min(var(--page-max), calc(100% - 36px)) !important;
  margin:0 auto !important;
  padding-top:0 !important;
}

/* =========================
   BANNER FULL BLACK
========================= */
.page > .dashboard-banner:first-child{
  margin-top:0 !important;
}

.dashboard-banner{
  position:relative !important;
  left:50% !important;
  right:50% !important;
  width:100vw !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  margin-top:-1px !important;
  margin-bottom:30px !important;
  min-height:360px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#050505 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.dashboard-banner > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:.20 !important;
  filter:brightness(.36) contrast(1.03) !important;
  border-radius:0 !important;
}

.dashboard-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.78) 38%,
      rgba(0,0,0,.56) 68%,
      rgba(0,0,0,.42) 100%
    );
  z-index:1;
}

.dashboard-banner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.06);
  z-index:2;
}

.dashboard-banner > *{
  position:relative !important;
  z-index:3 !important;
}

.dashboard-banner > *:not(img){
  width:min(var(--page-max), calc(100% - 36px)) !important;
  margin:0 auto !important;
  padding:62px 0 64px !important;
}

.dashboard-banner h1,
.dashboard-banner h2,
.dashboard-banner h3,
.dashboard-banner strong,
.dashboard-banner .hero-title,
.dashboard-banner .banner-title{
  color:#ffffff !important;
}

.dashboard-banner p,
.dashboard-banner span,
.dashboard-banner .hero-subtitle,
.dashboard-banner .banner-text{
  color:rgba(255,255,255,.82) !important;
}

/* =========================
   SECTION UMUM
========================= */
.section{
  margin:0 0 24px !important;
}

.section h1,
.section h2,
.section h3,
.section strong{
  color:#111111 !important;
}

.section p,
.section span{
  color:#666666 !important;
}

/* =========================
   CARD PUTIH
========================= */
.quick-card,
.account-list,
.bltz-order-panel,
.bltz-plan-panel,
[data-api-key-id],
.account-card,
.orders-card,
.stats-card{
  background:#ffffff !important;
  color:#111111 !important;
  border:1px solid var(--theme-line) !important;
  border-radius:22px !important;
  box-shadow:none !important;
}

.account-row,
.bltz-order-row,
.bltz-plan-detail,
[data-api-key-id] > div,
[data-api-key-id] > div > div{
  border-color:var(--theme-line-soft) !important;
}

.quick-card *,
.account-list *,
.bltz-order-panel *,
.bltz-plan-panel *,
[data-api-key-id] *{
  color:inherit;
}

/* =========================
   PANEL GELAP KHUSUS
========================= */
#api-keys .section-card,
#api-keys .api-card-shell,
#api-keys .developer-access-card,
#api-keys .api-management-card{
  background:#050505 !important;
  border:1px solid rgba(255,255,255,.07) !important;
  color:#ffffff !important;
}

#api-keys .section-card *,
#api-keys .api-card-shell *,
#api-keys .developer-access-card *,
#api-keys .api-management-card *{
  color:inherit !important;
}

/* =========================
   BUTTON
========================= */
button,
.button,
.quick-card a,
#createApiKeyButton,
#apiKeyModalCreate{
  box-shadow:none !important;
}

[data-api-key-id] button,
#createApiKeyButton,
#apiKeyModalCreate,
.bltz-plan-action{
  background:#111111 !important;
  color:#ffffff !important;
  border:1px solid #111111 !important;
}

#apiKeyModalCancel{
  background:#ffffff !important;
  color:#111111 !important;
  border:1px solid rgba(0,0,0,.12) !important;
}

/* =========================
   BADGE
========================= */
.bltz-order-state,
.bltz-plan-status,
.bltz-order-count,
.status-badge{
  background:#111111 !important;
  color:#ffffff !important;
  border:1px solid #111111 !important;
}

/* =========================
   SYSTEM STATUS
========================= */
.system-status,
#systemStatus{
  background:#050505 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}

.system-status *,
#systemStatus *{
  color:#ffffff !important;
}

/* =========================
   FOOTER
========================= */
footer,
.footer{
  background:transparent !important;
  color:#111111 !important;
}

footer *,
.footer *{
  color:#111111 !important;
}

/* =========================
   MOBILE
========================= */
@media (max-width:768px){
  .page{
    width:min(var(--page-max), calc(100% - 24px)) !important;
  }

  .topbar-inner{
    width:calc(100% - 24px) !important;
    min-height:68px !important;
  }

  .dashboard-banner{
    min-height:300px !important;
    margin-bottom:22px !important;
  }

  .dashboard-banner > *:not(img){
    width:calc(100% - 24px) !important;
    padding:46px 0 48px !important;
  }

  .dashboard-banner h1,
  .dashboard-banner h2{
    font-size:clamp(30px,8vw,46px) !important;
    line-height:1.08 !important;
  }

  .quick-card,
  .account-list,
  .bltz-order-panel,
  .bltz-plan-panel,
  [data-api-key-id]{
    border-radius:18px !important;
  }
}


/* BLTZ_BANNER_VISIBILITY_MENU_V3_START */

/* =========================================
   BANNER — GAMBAR LEBIH TERLIHAT
========================================= */

.dashboard-banner{
  background:#030303 !important;
}

/*
 * Gambar asli tetap digunakan.
 * Tidak ada image generation.
 */
.dashboard-banner > img{
  opacity:.58 !important;

  filter:
    brightness(.72)
    contrast(1.10)
    saturate(.90)
    !important;

  object-fit:cover !important;

  /*
   * Visual utama banner berada di kanan,
   * jadi jangan terlalu center.
   */
  object-position:
    72% center !important;
}


/*
 * Area kiri tetap gelap agar tulisan
 * putih terbaca, sedangkan sisi kanan
 * lebih terbuka agar gambar terlihat.
 */
.dashboard-banner::before{
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.88) 25%,
      rgba(0,0,0,.70) 48%,
      rgba(0,0,0,.38) 72%,
      rgba(0,0,0,.20) 100%
    ) !important;
}


/*
 * Hilangkan kemungkinan overlay kedua
 * yang membuat gambar terlalu gelap.
 */
.dashboard-banner::after{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.12) 100%
    ) !important;

  height:100% !important;

  pointer-events:none !important;
}


/* Pastikan tulisan banner tetap terang */

.dashboard-banner h1,
.dashboard-banner h2,
.dashboard-banner h3,
.dashboard-banner strong{
  color:#ffffff !important;
}

.dashboard-banner p{
  color:rgba(255,255,255,.82) !important;
}

.dashboard-banner .section-kicker,
.dashboard-banner span{
  color:rgba(255,255,255,.74) !important;
}


/* =========================================
   MENU — 3 TITIK -> 3 GARIS
========================================= */

.menu-button{
  width:44px !important;
  height:44px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  padding:0 !important;

  border:0 !important;
  background:transparent !important;

  border-radius:0 !important;
}


/*
 * Paksa setiap span menjadi garis,
 * bukan titik bulat.
 */
.menu-button span{
  display:block !important;

  width:21px !important;
  height:2px !important;

  margin:0 !important;

  border:0 !important;
  border-radius:999px !important;

  background:#ffffff !important;

  opacity:1 !important;

  transform:none !important;

  transition:
    width .18s ease,
    opacity .18s ease
    !important;
}


/*
 * Sedikit variasi panjang supaya
 * icon terasa lebih premium.
 */
.menu-button span:nth-child(1){
  width:21px !important;
}

.menu-button span:nth-child(2){
  width:16px !important;
}

.menu-button span:nth-child(3){
  width:21px !important;
}


.menu-button:active span:nth-child(2){
  width:21px !important;
}


/* MOBILE */

@media(max-width:768px){

  .dashboard-banner > img{
    opacity:.62 !important;

    filter:
      brightness(.76)
      contrast(1.08)
      saturate(.92)
      !important;

    object-position:
      72% center !important;
  }


  .dashboard-banner::before{
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.93) 0%,
        rgba(0,0,0,.82) 33%,
        rgba(0,0,0,.55) 62%,
        rgba(0,0,0,.26) 100%
      ) !important;
  }


  .menu-button{
    width:40px !important;
    height:40px !important;
  }


  .menu-button span{
    height:2px !important;
  }

}

/* BLTZ_BANNER_VISIBILITY_MENU_V3_END */