/*=========================================================
    BERBAGEHOST DESIGN SYSTEM
    Version : 2.0
=========================================================*/

:root{

/* Primary */

--bh-primary:#6c3baa;
--bh-primary-dark:#6938EF;
--bh-primary-light:#F4F0FF;

/* Secondary */

--bh-success:#16A34A;
--bh-warning:#F59E0B;
--bh-danger:#DC2626;
--bh-info:#2563EB;

/* Neutral */

--bh-bg:#F5F7FB;
--bh-surface:#FFFFFF;
--bh-border:#E9EDF5;

--bh-text:#1F2937;
--bh-text-light:#6B7280;
--bh-text-muted:#9CA3AF;
--bh-muted:#667085;
--bh-light-muted: #dde3ef;

/* Radius */

--bh-radius:20px;
--bh-radius-xs:8px;
--bh-radius-sm:12px;
--bh-radius-md:16px;
--bh-radius-lg:20px;
--bh-radius-xl:28px;

}

.bh-text-muted {
    color: var(--bh-text-muted) !important;
}
.bh-text-dark-gray {
    color: #4b4f58 !important;
}
.bh-light-gray {
    background-color: var(--bh-light-muted);
}

/* ==========================================
   BREAKPOINT SM (Small / Tablet ≥ 576px)
   ========================================== */
@media (min-width: 0px) {
  .fs-sm-1 { font-size: 1.75rem !important; }
  .fs-sm-2 { font-size: 1.50rem !important; }
  .fs-sm-3 { font-size: 1.25rem !important; }
  .fs-sm-4 { font-size: 1rem !important; }
  .fs-sm-5 { font-size: 0.75rem !important; }
  .fs-sm-6 { font-size: 0.50rem !important; }

}

/* ==========================================
   BREAKPOINT MD (Medium / Laptop ≥ 768px)
   ========================================== */
@media (min-width: 768px) {
  .fs-md-1 { font-size: 2.5rem !important; }
  .fs-md-2 { font-size: 2rem !important; }
  .fs-md-3 { font-size: 1.75rem !important; }
  .fs-md-4 { font-size: 1.5rem !important; }
  .fs-md-5 { font-size: 1.25rem !important; }
  .fs-md-6 { font-size: 1rem !important; }
}

/* ==========================================
   BREAKPOINT LG (Large / Desktop ≥ 992px)
   ========================================== */
@media (min-width: 992px) {
  .fs-lg-1 { font-size: 2.5rem !important; }
  .fs-lg-2 { font-size: 2rem !important; }
  .fs-lg-3 { font-size: 1.75rem !important; }
  .fs-lg-4 { font-size: 1.5rem !important; }
  .fs-lg-5 { font-size: 1.25rem !important; }
  .fs-lg-6 { font-size: 1rem !important; }
}

/* Warna icon box */
.purple{
    background:#f3ecff;
    color:#7b4dff;
}

.green{
    background:#e8fbf2;
    color:#18a058;
}

.orange{
    background:#fff5e9;
    color:#f59e0b;
}

.gray {
    background: #f7f8fc;
    color: #6b7280;
}
.blue {
    background:#eef5ff;
    color:#2563eb;
}
.blue:hover {
    background:#2563eb;
    color:#fff;
}

/* Efek icon hover */
.bh-list-item:hover .bh-number {
    background:#7b4dff;
    color:#fff;
    transform:scale(1.05);
}

/* Shadow */

--bh-shadow-sm:
0 4px 12px rgba(0,0,0,.05);

--bh-shadow:
0 12px 35px rgba(15,23,42,.08);

--bh-shadow-hover:
0 18px 45px rgba(15,23,42,.12);

/* Transition */

--bh-speed:.25s;

}

/* Global Style  */

.mt-sm-4 {
    margin-top: 1.5rem;
}

*{

transition:
background var(--bh-speed),
border var(--bh-speed),
box-shadow var(--bh-speed),
color var(--bh-speed),
transform var(--bh-speed);

}

body {
    background:var(--bh-bg);
    font-family:
    Inter,
    "Segoe UI",
    sans-serif;
    color:var(--bh-text);
}

a {
    text-decoration:none;
}

.card {
    border:none;
    border-radius:var(--bh-radius-lg);
    box-shadow:var(--bh-shadow);
}

.card:hover {
    box-shadow:var(--bh-shadow-hover);
}

/* Standard Button
.btn {
    border-radius:14px;
    font-weight:600;
    padding:.7rem 1.3rem;
}

.btn-primary {
    background:var(--bh-primary);
    border:none;
}

.btn-primary:hover {
    background:var(--bh-primary-dark);
}

/* Standar Badge */
.badge{
    padding:8px 14px;
    border-radius:999px;
    font-weight:600;
    font-size:13px;
}

/* Standar Tabel */
.table {
    margin-bottom:0;
}

.table thead {
    background:#fafbff;
}

.table th {
    font-weight:600;
    border-bottom:1px solid var(--bh-border);
    padding:18px;
}

.table td {
    padding:18px;
    vertical-align:middle;
    border-color:var(--bh-border);
}

/* Standar Form */
.form-control {
    border-radius:14px;
    border:1px solid var(--bh-border);
    padding:14px 18px;
    box-shadow:none;
}

.form-control:focus {
    border-color:var(--bh-primary);
    box-shadow: 0 0 0 4px rgba(123,77,255,.12);
}

/* Standar Dropdown */
.dropdown-menu {
    border:none;
    border-radius:16px;
    box-shadow:
    0 15px 35px rgba(0,0,0,.08);
    padding:10px;
}

.dropdown-item {
    border-radius:10px;
    padding:10px 14px;
}

.dropdown-item:hover {
    background:var(--bh-primary-light);
}

/* Standar Modal */
.modal-content {
    border:none;
    border-radius:22px;
    overflow:hidden;
}

/* Standar Alert */
.alert {
    border:none;
    border-radius:16px;
}

/* Standar Scrollbar */
::-webkit-scrollbar {
    width:5px;
}

::-webkit-scrollbar-track {
    background:#edf2f7;
}

::-webkit-scrollbar-thumb {
    background:#c5b5ff;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover {
    background:#7B4DFF;
}

/* Header */
.bh-hero {
    background: linear-gradient(135deg,#ffffff,#faf5ff);
    border-radius:22px;
    padding:35px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow: 0 10px 35px rgba(0,0,0,.05);
    margin-bottom:35px;
    overflow:hidden;
}
.transparan {
    background: transparent;
    box-shadow: 0px 0px 0px rgba(0,0,0,.0);
    border: none;
}

.bh-dashboard-left {
    display:flex;
    align-items:center;
    gap:25px;
}

.bh-avatar {
    width:72px;
    height:72px;
    border-radius:50%;
    background: linear-gradient(135deg,#7b4dff,#9f7aea);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:34px;
    box-shadow: 0 15px 30px rgba(123,77,255,.25);
}

.bh-hero h2{
    margin:0;
    font-size:34px;
    font-weight:700;
    color:#1c2333;
}

.bh-hero p{
    margin-top:8px;
    margin-bottom:0;
    font-size:16px;
    color:#7a8395;
}

.bh-dashboard-illustration {
    width:130px;
    height:130px;
    border-radius:25px;
    background: linear-gradient(135deg,#efe7ff,#ffffff);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:70px;
    color:#7b4dff;
}

.bh-card {
    border:none;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow: 0 12px 30px rgba(30,41,59,.06);
    transition:.30s;
}

.bh-card:hover {
    transform:translateY(-6px);
    box-shadow: 0 20px 40px rgba(30,41,59,.12);
}

.bh-card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 28px;
    border-bottom:1px solid #edf0f6;
    background:#fff;
}

.bh-card-title {
    display:flex;
    align-items:center;
    gap:16px;
}

.bh-card-title h5 {
    margin:0;
    font-size:22px;
    font-weight:700;
}

.bh-icon-box {
    width:48px;
    height:48px;
    background:#f3ecff;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#7b4dff;
    font-size:24px;
}

.bh-arrow {
    font-size:24px;
    color:#7b4dff;
    text-decoration:none;
    transition:.25s;
}

.bh-arrow:hover {
    transform:translateX(5px);
}

/*======================================================
    LIST COMPONENT
======================================================*/
.bh-list {
    display:flex;
    flex-direction:column;
}
.bh-list-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid var(--bh-border);
    transition:all .25s;
}
.bh-list-item:last-child{
    border-bottom:none;
}
.bh-list-item:hover{
    padding-left:8px;
}
.bh-item-left{
    display:flex;
    align-items:center;
    gap:16px;
}
.bh-item-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--bh-primary-light);
    color:var(--bh-primary);
    font-size:22px;
}
.bh-item-title{
    font-weight:600;
    font-size:15px;
    color:var(--bh-text);
}
.bh-item-subtitle{
    margin-top:3px;
    font-size:13px;
    color:var(--bh-text-light);
}
.bh-item-right{
    font-weight:600;
}

.bh-info-row {
    display:flex;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid #f0f2f8;
}

.bh-info-row:last-child {
    border:none;
}

.bh-info-icon {
    width:42px;
    height:42px;
    border-radius:12px;
    background:#f7f8fc;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:18px;
    color:#6b7280;
    font-size:20px;

}

.bh-info-label{
    width:130px;
    color:#6b7280;
    font-weight:500;
}

.bh-info-value{
    flex:1;
    font-weight:600;
    font-size:16px;
    color:#1f2937;
}

/*=================================
STAT CARD
=================================*/

.bh-stat-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid #eef2f7;
}

.bh-stat-row:last-child {
    border-bottom:none;
}

.bh-stat-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.bh-stat-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
}

.bh-stat-text{
    font-size:16px;
    font-weight:500;
    color:#4b5563;
}

.bh-number{
    min-width:68px;
    height:38px;
    padding:0 18px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#f5efff;
    border-radius:12px;
    font-weight:700;
    font-size:16px;
    color:#6d28d9;
    transition:.25s;
}

.bh-stat-row:hover .bh-number{
    background:#7b4dff;
    color:#fff;
    transform:scale(1.05);
}


/*======================================
SUMMARY CARD
======================================*/

.bh-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:25px;
}
.bh-summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px;
    border-radius:18px;
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(10px);
    text-decoration:none;
    color:inherit;
    border:1px solid rgba(255,255,255,.45);
    transition:.3s;
}
.bh-summary-card:hover{
    transform:translateY(-6px);
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}
.bh-summary-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bh-primary-light);
    color:var(--bh-primary);
    font-size:28px;
}
.bh-summary-card strong{
    display:block;
    font-size:28px;
    line-height:1;
    margin-bottom:6px;
}

.bh-summary-card small{
    color:#6b7280;
    font-size:14px;
}
@media (max-width:991px){
    .bh-summary-grid {
        grid-template-columns:repeat(2,1fr);
    }
}
@media (max-width:576px){
    .bh-summary-grid{
     grid-template-columns:1fr;
    }
}
/*========================================
SUPPORT CARD EFFECT
=========================================*/
.bh-card .bh-stat-row{
    transition:all .25s ease;
}
.bh-card .bh-stat-row:hover{
padding-left:8px;
}
.bh-card .bh-stat-row:hover .bh-stat-text{
    color:#6d28d9;
    font-weight:600;
}
.bh-card .bh-stat-row:hover .bh-stat-icon{
    transform:scale(1.08);
}

/*=================================
ACTIVITY CARD
==================================*/
.bh-list-card{
    overflow:hidden;
}
.bh-activity-item{
    display:flex;
    align-items:center;
    padding:22px 26px;
    text-decoration:none;
    color:inherit;
    transition:.25s;
    border-bottom:1px solid #eef2f7;
}
.bh-activity-item:last-child{
    border-bottom:none;
}
.bh-activity-item:hover{
    background:#faf8ff;
    padding-left:34px;
}
.bh-activity-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    background:#f2ebff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    color:#7b4dff;
    margin-right:18px;
    transition:.25s;
}
.bh-activity-item:hover .bh-activity-icon{
    transform:scale(1.08) rotate(-8deg);
}
.bh-activity-content{
    flex:1;
}
.bh-activity-title{
    font-weight:600;
    font-size:16px;
    color:#1f2937;
    margin-bottom:4px;
}
.bh-activity-time{
    font-size:13px;
    color:#8a94a6;
}
.bh-activity-status{
    margin-left:15px;
}
.bh-empty{
    padding:55px 20px;
    text-align:center;
}
.bh-empty span{
    font-size:70px;
    color:#d4c6ff;
    margin-bottom:15px;
    display:block;
}
.bh-empty h5{
    font-weight:700;
    margin-bottom:10px;
}
.bh-empty p{
    color:#8a94a6;
    margin-bottom:25px;
}

/*=========================================
SUPPORT LIST
=========================================*/
.bh-activity-icon.support{
    background:#eef5ff;
    color:#2563eb;
}

.bh-activity-item:hover .bh-activity-icon.support {
    background:#2563eb;
    color:#fff;
}
/*=========================================
HERO MINI CARD
=========================================*/
.bh-hero-stats{
    display:flex;
    gap:18px;
}

.bh-mini-card{
    width:110px;
    height:110px;
    background:#fff;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.25s;
}

.bh-mini-card:hover{
    transform:translateY(-6px);
}

.bh-mini-card span{
    font-size:28px;
    color:#7b4dff;
    margin-bottom:8px;
}

.bh-mini-card strong{
    font-size:28px;
    font-weight:700;
    line-height:1;
}

.bh-mini-card small{
    margin-top:8px;
    font-size:13px;
    color:#6b7280;
}