/*
 * GLOBAL DASHBOARD PAGE
 *
 * Mengikuti struktur Dashboard Outgoing:
 * - margin-top 20px
 * - background putih
 * - padding 30px
 * - radius 16px
 * - shadow ringan
 */

.shared-dashboard-page{

  width:
    100%;

  margin-top:
    20px;

  padding:
    30px;

  border:
    0;

  border-radius:
    16px;

  background:
    #ffffff;

  box-shadow:
    0 2px 10px rgba(0,0,0,.08);

  box-sizing:
    border-box;

}


/*
 * GLOBAL DASHBOARD HEADER
 */

.shared-dashboard-header{

  width:
    100%;

  margin:
    0 0 20px;

  padding:
    0;

  border:
    0;

  box-sizing:
    border-box;

}


.shared-dashboard-header-left{

  text-align:
    left;

}


.shared-dashboard-header-center{

  text-align:
    center;

}


/*
 * GLOBAL DASHBOARD TITLE
 */

.shared-dashboard-title{

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  margin:
    0 0 20px;

  color:
    #111827;

  font-size:
    24px;

  font-weight:
    700;

  line-height:
    1.3;

}


.shared-dashboard-header-left
.shared-dashboard-title{

  justify-content:
    flex-start;

}


.shared-dashboard-title-icon{

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

}


/*
 * OPTIONAL DASHBOARD DESCRIPTION
 */

.shared-dashboard-description{

  margin:
    -12px 0 20px;

  color:
    #6b7280;

  font-size:
    14px;

  line-height:
    1.5;

  text-align:
    center;

}


.shared-dashboard-header-left
.shared-dashboard-description{

  text-align:
    left;

}


/*
 * DASHBOARD BODY
 *
 * Tidak memakai gap otomatis supaya setiap komponen
 * dapat mengikuti pola margin dashboard lama seperti
 * Dashboard Outgoing.
 */

.shared-dashboard-content{

  display:
    block;

  width:
    100%;

}


@media (max-width: 640px){

  .shared-dashboard-page{

    margin-top:
      16px;

    padding:
      18px;

    border-radius:
      12px;

  }


  .shared-dashboard-header{

    margin-bottom:
      16px;

  }


  .shared-dashboard-title{

    margin-bottom:
      16px;

    font-size:
      20px;

  }


  .shared-dashboard-description{

    margin:
      -8px 0 16px;

  }

}


.shared-dashboard-summary-section{

  margin-top:
    25px;

  margin-bottom:
    20px;

}