/* Custom CSS untuk navbar gradient di AdminLTE 3.2.0 */
/* Gradient untuk navbar */
.main-header.navbar {
    background: linear-gradient(-45deg, #00bcd4, #f44336, #4caf50, #ffeb3b);
    background-size: 300% 300%;
    animation: gradientFlow 8s ease infinite;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  @keyframes gradientFlow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  /* Biar teks di navbar tetep kelihatan */
  .navbar .nav-link,
  .navbar .navbar-brand,
  .navbar .form-control {
    color: #fff !important;
  }

  /* gradient untuk footer */
  .main-footer {
    background: linear-gradient(-45deg, #00bcd4, #f44336, #4caf50, #ffeb3b);
    background-size: 300% 300%;
    animation: gradientFooter 8s ease infinite;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  @keyframes gradientFooter {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  /* Gradient untuk Sidebar */
.main-sidebar {
    background: linear-gradient(-45deg, #03dffc, #f8b6b0, #abf1a6, #f1e99d);
    background-size: 400% 400%;
    animation: gradientSidebarFlow 15s ease infinite;
    color: black !important;
  }
  
  /* Animasi gerakan gradient */
  @keyframes gradientSidebarFlow {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }
  
  /* Warna teks dan icon di sidebar */
  .sidebar a {
    color: #000 !important;
  }
  
  .sidebar a:hover {
    color: #f53c04 !important;
  }
  
  /* Gradient untuk tombol besar dan kecil */
.btn, .btn-sm {
    background: linear-gradient(135deg, #0000001a, #ffffff21);
    background-size: 200% 200%;
    animation: btnGradientMove 6s ease infinite;
    color: #000 !important;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  @keyframes btnGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* Hover effect */
  .btn:hover, .btn-sm:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
  }
  
  /* Gradient untuk tombol outline */
  .btn-outline {
    background: transparent;
    border: 2px solid;
    border-image: linear-gradient(135deg, #a1c4fd, #c2e9fb, #d4fc79) 1;
    color: #a1c4fd;
    transition: all 0.3s ease;
  }
  
  .btn-outline:hover {
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb, #d4fc79);
    color: black;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  }
/* btn-primary: biru + putih */
.btn-primary {
    background: linear-gradient(-45deg, #0d6efd, #ffffff) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* btn-warning: kuning + abu muda */
  .btn-warning {
    background: linear-gradient(-45deg, #ffc107, #f8f9fa) !important;
    color: #212529 !important;
    border: none !important;
  }
  
  /* btn-danger: merah + putih */
  .btn-danger {
    background: linear-gradient(-45deg, #dc3545, #ffffff) !important;
    color: #000 !important;
    border: none !important;
  }
  
  /* btn-info: biru muda + putih */
  .btn-info {
    background: linear-gradient(-45deg, #0dcaf0, #ffffff) !important;
    color: #000 !important;
    border: none !important;
  }
  
  /* btn-success: hijau + putih */
.btn-success {
    background: linear-gradient(-45deg, #198754, #ffffff) !important;
    color: #000 !important;
    border: none !important;
  }
  
  /* btn-secondary: abu gelap + abu muda */
  .btn-secondary {
    background: linear-gradient(-45deg, #6c757d, #f1f1f1) !important;
    color: #000 !important;
    border: none !important;
  }
  
  /* Hover efek */
  .btn-primary:hover,
  .btn-warning:hover,
  .btn-danger:hover,
  .btn-info:hover,
  .btn-success:hover,
  .btn-secondary:hover {
    opacity: 0.9;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    transform: translateY(-1px);
    transition: all 0.3s ease;
  }

/* Semua card di halaman akan otomatis punya gradient */
  .card {
    background: linear-gradient(to bottom, #00000010, #fff);
    color: rgb(19, 1, 1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 15px;
  }
  /* Hover effect */
  .card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
  }

  /* backgroud color */
  /* bg-primary: biru + putih */
.bg-primary {
    background: linear-gradient(-45deg, #0d6efd, #ffffff) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* bg-warning: kuning + abu muda */
  .bg-warning {
    background: linear-gradient(-45deg, #ffc107, #f8f9fa) !important;
    color: #212529 !important;
    border: none !important;
  }
  
  /* bg-danger: merah + putih */
  .bg-danger {
    background: linear-gradient(-45deg, #dc3545, #ffffff) !important;
    color: #000 !important;
    border: none !important;
  }
  
  /* bg-info: biru muda + putih */
  .bg-info {
    background: linear-gradient(-45deg, #0dcaf0, #ffffff) !important;
    color: #000 !important;
    border: none !important;
  }
  
  /* bg-success: hijau + putih */
.bg-success {
    background: linear-gradient(-45deg, #198754, #ffffff) !important;
    color: #000 !important;
    border: none !important;
  }
  
  /* bg-secondary: abu gelap + abu muda */
  .bg-secondary {
    background: linear-gradient(-45deg, #6c757d, #f1f1f1) !important;
    color: #000 !important;
    border: none !important;
  }
  
  /* Hover efek */
  .bg-primary:hover,
  .bg-warning:hover,
  .bg-danger:hover,
  .bg-info:hover,
  .bg-success:hover,
  .bg-secondary:hover {
    opacity: 0.9;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    transform: translateY(-1px);
    transition: all 0.3s ease;
  }
  /* form kontrol */
  .form-control {
    background: linear-gradient(to right, #92919121, #fff);
    color: rgb(19, 1, 1) !important;
    border-radius: 5px;
  }

  .dropdown-menu {
    background: linear-gradient(-135deg, #b3e9f0, #ecaba5) !important;
    color: rgb(19, 1, 1) !important;
    border-radius: 5px;
  }