/* BLTZMAIL_DASHBOARD_FINISHING_V1 */

/* ==========================================
   BANNER
========================================== */

.dashboard-banner > img{
  opacity:.32 !important;
  filter:
    brightness(.72)
    contrast(1.06)
    saturate(.90) !important;

  object-position:
    68% center !important;
}

.dashboard-banner::before{
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.72) 38%,
      rgba(0,0,0,.42) 67%,
      rgba(0,0,0,.22) 100%
    ) !important;
}

.dashboard-banner > *:not(img){
  width:
    min(
      1180px,
      calc(100% - 72px)
    ) !important;
}


/* ==========================================
   GLOBAL SPACING
========================================== */

.section{
  margin-bottom:
    22px !important;
}

.section-head{
  margin-bottom:
    15px !important;
}


/* ==========================================
   QUICK ACCESS
========================================== */

.quick-card{
  min-height:0 !important;
  padding:28px 34px !important;
}

.quick-card h3,
.quick-card h2{
  margin-top:
    22px !important;
}

.quick-card p{
  margin-bottom:
    20px !important;
}


/* ==========================================
   BILLING
========================================== */

.bltz-plan-panel{
  border-radius:
    20px !important;
}

.bltz-plan-head{
  padding:
    16px 18px !important;
}

.bltz-plan-stats{
  padding:
    10px !important;
}

.bltz-plan-stat{
  min-height:
    82px !important;

  padding:
    12px 14px !important;

  border-radius:
    14px !important;
}

.bltz-plan-stat strong{
  margin-top:
    9px !important;

  font-size:
    19px !important;
}

.bltz-plan-stat small{
  margin-top:
    4px !important;
}

.bltz-plan-detail{
  min-height:
    55px !important;

  padding:
    10px 13px !important;
}

.bltz-plan-footer{
  min-height:
    50px !important;

  padding:
    10px 13px !important;
}

.bltz-order-panel{
  margin-top:
    10px !important;

  padding:
    15px 18px !important;

  border-radius:
    20px !important;
}

.bltz-order-row{
  min-height:
    54px !important;

  padding:
    10px 0 !important;
}


/* ==========================================
   API KEY
========================================== */

#api-keys [data-api-key-id]{
  border-radius:
    18px !important;

  margin-bottom:
    14px !important;
}

#api-keys [data-api-key-id] button{
  min-height:
    44px !important;

  border-radius:
    13px !important;
}

#api-keys [data-api-key-id]
button + button{
  margin-top:
    0 !important;
}


/* API card text */
#api-keys [data-api-key-id] strong{
  line-height:
    1.2 !important;
}

#api-keys [data-api-key-id] p,
#api-keys [data-api-key-id] span{
  line-height:
    1.45 !important;
}


/* ==========================================
   ACCOUNT / SECURITY
========================================== */

#account .account-row{
  min-height:
    60px !important;

  padding-top:
    12px !important;

  padding-bottom:
    12px !important;
}

#account .account-list{
  border-radius:
    18px !important;
}


/* ==========================================
   SYSTEM
========================================== */

.system-status{
  min-height:
    94px !important;

  border-radius:
    18px !important;
}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

  .page{
    width:
      calc(100% - 32px) !important;
  }


  /* Banner tetap full */
  .dashboard-banner{
    min-height:
      430px !important;

    margin-bottom:
      24px !important;
  }

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

    object-position:
      72% center !important;
  }

  .dashboard-banner > *:not(img){
    width:
      calc(100% - 54px) !important;

    padding:
      48px 0 54px !important;
  }

  .dashboard-banner h1,
  .dashboard-banner h2{
    font-size:
      clamp(
        34px,
        8.5vw,
        48px
      ) !important;

    line-height:
      1.04 !important;
  }

  .dashboard-banner p{
    max-width:
      92% !important;

    line-height:
      1.6 !important;
  }


  /* section */
  .section{
    margin-bottom:
      18px !important;
  }


  /* quick access */
  .quick-card{
    padding:
      24px 36px !important;

    border-radius:
      18px !important;
  }


  /* billing */
  .bltz-plan-head{
    padding:
      15px 16px !important;
  }

  .bltz-plan-stats{
    padding:
      8px !important;

    gap:
      8px !important;
  }

  .bltz-plan-stat{
    min-height:
      80px !important;

    padding:
      11px 12px !important;
  }

  .bltz-plan-stat strong{
    font-size:
      18px !important;
  }

  .bltz-plan-detail{
    min-height:
      54px !important;
  }

  .bltz-order-panel{
    padding:
      14px 16px !important;
  }


  /* API key */
  #api-keys [data-api-key-id]{
    border-radius:
      17px !important;
  }

  #api-keys [data-api-key-id] button{
    min-height:
      42px !important;

    font-size:
      13px !important;
  }


  /* account */
  #account .account-row{
    min-height:
      56px !important;
  }


  .system-status{
    min-height:
      86px !important;
  }

}


@media(max-width:420px){

  .page{
    width:
      calc(100% - 24px) !important;
  }

  .dashboard-banner > *:not(img){
    width:
      calc(100% - 40px) !important;
  }

  .quick-card{
    padding:
      22px 32px !important;
  }

}