/* =========================================
   Modern Bootstrap 3 Overrides - Purple Theme
   ========================================= */

:root {
  /* Ubah kode warna ini jika ingin nuansa ungu yang berbeda */
  --primary-color: #6c5ce7;       /* Ungu Modern (Soft) */
  --primary-dark: #5043b5;        /* Ungu Gelap untuk Hover */
  --primary-light: #a29bfe;       /* Ungu Terang */
  --text-color: #2d3436;          /* Abu-abu gelap (bukan hitam pekat) */
  --bg-light: #f9f9f9;
  --border-radius: 8px;           /* Sudut lebih membulat */
  --transition: all 0.2s ease-in-out;
  /* WARNA WARNING (Orange Modern) */
  --warning-color: #ff9f43;       /* Orange cerah tapi tidak sakit mata */
  --warning-dark:  #ee5a24;       /* Orange lebih gelap untuk hover */

  /* WARNA DANGER (Soft Red) */
  --danger-color:  #ff6b6b;       /* Merah modern (sedikit pinkish/coral) */
  --danger-dark:   #ee5253;
}

/* 1. TYPOGRAPHY & BASE
   Menggunakan font stack modern (San Francisco, Segoe UI, Roboto) */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #111;
  margin-bottom: 20px;
}

/* 2. BUTTONS
   Menghilangkan gradasi 3D, membuatnya flat & modern */
.btn {
  background-image: none !important; /* Hapus gradasi bawaan B3 */
  box-shadow: none !important;       /* Hapus shadow inset bawaan */
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  padding: 10px 20px;
  font-weight: 500;
  transition: var(--transition);
  text-shadow: none !important;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  transform: translateY(-1px); /* Efek angkat sedikit saat hover */
}

/* 2. STYLE BUTTON WARNING (Override B3) */
.btn-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: #fff;
  opacity: 1;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  background-color: var(--warning-dark) !important;
  border-color: var(--warning-dark) !important;
  color: #fff;
  opacity: 1;
  transform: translateY(-1px); /* Efek naik dikit */
  box-shadow: 0 4px 10px rgba(255, 159, 67, 0.4); /* Glow orange halus */
}


/* 4. MENGHAPUS STYLE BAWAAN BOOTSTRAP 3 YANG MEMBANDEL */
.btn-warning, .btn-danger {
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none; /* Shadow default mati, ganti dengan shadow hover di atas */
  transition: all 0.2s ease-in-out;
}

.btn-default {
  background-color: #fff;
  border-color: #e0e0e0;
  color: var(--text-color);
}

.btn-default:hover {
  background-color: #f1f2f6;
  color: var(--primary-color);
}

/* 3. FORMS
   Input yang lebih luas, border halus, dan fokus warna ungu */
.form-control {
  box-shadow: none !important;
  border-radius: var(--border-radius);
  border: 1px solid #dfe6e9;
  height: 45px; /* Lebih tinggi agar mudah di-tap di mobile */
  padding: 10px 15px;
  font-size: 14px;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2) !important; /* Glow ungu transparan */
}

.input-group-addon {
  background-color: #f1f2f6;
  border-color: #dfe6e9;
}

/* 5. PANELS (Card Modern)
   Mengubah panel B3 menjadi 'Card' modern */
.panel {
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: none;
  border-radius: var(--border-radius);
}

.panel-heading {
  background-image: none !important;
  background-color: #fff !important;
  border-bottom: 1px solid #f1f1f1;
  padding: 20px;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.panel-title {
  font-weight: 700;
  color: var(--text-color);
}

.panel-body {
  padding: 20px;
}

.panel-primary > .panel-heading {
  background-color: var(--primary-color) !important;
  color: #fff;
}

/* 6. ALERTS & BADGES */
.alert {
  border-radius: var(--border-radius);
  box-shadow: none;
  border: none;
}

.label, .badge {
  text-shadow: none;
  font-weight: 600;
  padding: 0.4em 0.8em;
}

.label-primary {
  background-color: var(--primary-color);
}

/*--------------*/
/*      Login    */
/*-------------*/

/* Styling Khusus Login & Profile Widget */

.login-card, .profile-card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    /* Border atas warna ungu (Primary) agar senada */
    border-top: 4px solid var(--primary-color); 
    background: #fff;
    margin-bottom: 20px;
}

.login-card .panel-heading {
    background: #fff;
    border-bottom: 1px solid #f1f2f6;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
}

.login-card .panel-title {
    font-weight: 600;
    color: var(--text-color);
}

/* Mempercantik Input Group */
.input-group-addon {
    background-color: #f8f9fa;
    border-color: #dfe6e9;
    color: #b2bec3;
}

/* Tabel Profile yang bersih */
.table-borderless td, .table-borderless th {
    border: none !important;
    padding: 5px 0 !important; /* Rapatkan baris */
}

/* Foto Profil Bulat */
.img-circle {
    border-radius: 50%;
    border: 3px solid rgba(108, 92, 231, 0.1); /* Border ungu transparan */
}

/*----------------------*/
/*ADMIN*/
/*---------------------*/
#page-inner {
    /* 1. Hapus Border Biru Lama */
    border: none; 
    /* Gunakan border sangat tipis abu-abu jika ingin batas halus, 
       tapi 'none' lebih bersih untuk style card */
    
    /* 2. Dimensi & Ruang */
    width: 100%;
    margin: 20px 0;          /* Jarak vertikal yang proporsional */
    padding: 30px;           /* Padding lebih besar (sebelumnya 18px) agar konten lega */
    background-color: #ffffff !important;
    min-height: 600px;       /* Pastikan card selalu punya tinggi minimal */
    
    /* 3. Estetika Modern (Radius & Shadow) */
    border-radius: 12px;     /* Sudut membulat (sebelumnya cuma 4px) */
    
    /* Shadow ganda untuk efek kedalaman 3D (Levitation) */
    box-shadow: 
        0 10px 40px -10px rgba(0,0,0,0.05), /* Bayangan ambient luas */
        0 2px 10px -2px rgba(0,0,0,0.05);   /* Bayangan tajam dekat */
        
    /* 4. Aksen Warna (Opsional - Pemanis) 
       Memberikan garis ungu tipis di bagian paling atas card 
       agar senada dengan tema Ungu Anda */
    border-top: 4px solid var(--primary-color); 
}

/* Responsif untuk layar kecil (HP) */
@media (max-width: 768px) {
    #page-inner {
        padding: 15px;      /* Kurangi padding di HP */
        margin: 10px 0;
        border-radius: 8px;
    }
}


/*----------*/
/* DATATABLES*/
/*----------*/

.dataTable .column-detail.sorting_1 {
    display: flex;
    gap: 4px;
    flex-direction: column;
    align-items: center;
}