@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== FIX: Natural page scroll (override perfect-scrollbar) ===== */
html.perfect-scrollbar-off .wrapper,
html.perfect-scrollbar-off .main-panel {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
/* Fallback jika class belum ter-apply */
.wrapper { overflow: visible; }
.main-panel { overflow-x: hidden; overflow-y: visible; }

/* ===== TABLE ACTION BUTTONS ===== */
.table td .btn,
.table td a.btn {
    padding: 4px 8px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    min-width: 28px;
    min-height: 28px;
}
.table td .btn .material-icons,
.table td a.btn .material-icons {
    font-size: 15px !important;
    line-height: 1 !important;
    display: block;
}
.table td .btn-group {
    display: inline-flex !important;
    vertical-align: middle !important;
}
.table td {
    vertical-align: middle !important;
}

/* ===== SIDEBAR LOGO ===== */
.sidebar .logo {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    overflow: hidden;
}
.sidebar .logo a.logo-normal {
    display: block !important;
    opacity: 1 !important;
    padding: 18px 20px 16px !important;
    background: linear-gradient(135deg, #7b1fa2 0%, #ab47bc 100%);
    text-decoration: none !important;
}
.sidebar .logo a.logo-normal:hover {
    background: linear-gradient(135deg, #6a1b9a 0%, #9c27b0 100%);
}
/* Teks putih di atas background ungu */
.sidebar .logo .simple-text,
.sidebar .logo .simple-text * {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ===== CARD HEADER PRIMARY ===== */
.card .card-header-primary .card-icon,
.card .card-header-primary .card-text,
.card .card-header-primary:not(.card-header-icon):not(.card-header-text),
.card.bg-primary,
.card.card-rotate.bg-primary .front,
.card.card-rotate.bg-primary .back {
    background: linear-gradient(60deg, #ab47bc, #8e24aa) !important;
    box-shadow: 0 4px 20px rgba(156,39,176,.4) !important;
}
.card .card-header-primary.card-header-icon,
.card .card-header-primary.card-header-text {
    background: transparent !important;
    box-shadow: none !important;
}
.card .card-header-primary.card-header-icon .card-icon {
    background: linear-gradient(60deg, #ab47bc, #8e24aa) !important;
    box-shadow: 0 4px 20px rgba(156,39,176,.4) !important;
    border-radius: 10px !important;
}

/* ===== CARD STATS ===== */
.card-stats .card-header.card-header-icon .card-title,
.card-stats .card-header.card-header-text .card-title {
    color: #3c4858 !important;
}
.card-stats .card-header .card-category:not([class*="text-"]) {
    color: #999 !important;
}
.card-stats .card-footer .stats {
    color: #999 !important;
    font-size: .8rem !important;
}

/* ===== TYPOGRAPHY ===== */
body {
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', 'Roboto', sans-serif !important;
}
.table thead th {
    font-family: 'Inter', sans-serif !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
}
.table tbody td {
    font-family: 'Inter', sans-serif !important;
    font-size: .875rem !important;
}
.sidebar .nav-link p {
    font-family: 'Inter', sans-serif !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
}
.btn {
    font-family: 'Inter', sans-serif !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
}
.badge {
    font-family: 'Inter', sans-serif !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
    color: #fff !important; border: none !important;
}
.btn-primary:hover { background: linear-gradient(135deg, #4F46E5, #6366F1) !important; color: #fff !important; }
.btn-success { background: linear-gradient(135deg, #10B981, #059669) !important; color: #fff !important; border: none !important; }
.btn-success:hover { background: linear-gradient(135deg, #059669, #10B981) !important; color: #fff !important; }
.btn-danger  { background: linear-gradient(135deg, #EF4444, #DC2626) !important; color: #fff !important; border: none !important; }
.btn-danger:hover  { background: linear-gradient(135deg, #DC2626, #EF4444) !important; color: #fff !important; }
.btn-info    { background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important; color: #fff !important; border: none !important; }
.btn-info:hover    { background: linear-gradient(135deg, #1D4ED8, #3B82F6) !important; color: #fff !important; }
.btn-warning { background: linear-gradient(135deg, #F59E0B, #D97706) !important; color: #fff !important; border: none !important; }

/* ===== MISC ===== */
.btn-file-upload { position: relative; color: #fff !important; }
.btn-file-upload input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 2; opacity: 0; cursor: pointer;
}
.btn-table-delete { display: none; }
.card-data {
    position: relative; min-height: 200px;
    display: flex; align-items: center;
    justify-content: center; flex-direction: column;
}
.spinner {
    border: 8px solid rgba(0,0,0,.08);
    border-left-color: #6366F1;
    border-radius: 50%;
    width: 50px; height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto; display: block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-bounce { margin: 0 auto; width: 70px; text-align: center; }
.spinner-bounce > div {
    width: 18px; height: 18px;
    background: #6366F1;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner-bounce .bounce1 { animation-delay: -.32s; }
.spinner-bounce .bounce2 { animation-delay: -.16s; }
@keyframes sk-bouncedelay {
    0%, 80%, 100% { transform: scale(0); }
    40%           { transform: scale(1); }
}

/* ===== RESPONSIVE GRID xxl ===== */
.col-xxl,.col-xxl-auto,.col-xxl-1,.col-xxl-2,.col-xxl-3,.col-xxl-4,
.col-xxl-5,.col-xxl-6,.col-xxl-7,.col-xxl-8,.col-xxl-9,.col-xxl-10,
.col-xxl-11,.col-xxl-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
@media (min-width: 1400px) {
    .col-xxl   { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-xxl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-xxl-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .col-xxl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xxl-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-xxl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xxl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xxl-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-xxl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xxl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xxl-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xxl-12 { flex: 0 0 100%;       max-width: 100%; }
}