/* Menggunakan font Inter untuk tampilan yang lebih modern */
    body {
      font-family: 'Inter', sans-serif;
    }
    /* Font untuk kode */
    .code-font {
      font-family: 'JetBrains Mono', monospace;
    }
    
    /* Animasi untuk kartu dan modal */
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    .fade-in {
      animation: fadeIn 0.3s ease-out forwards;
    }
    @keyframes fadeOut {
      from { opacity: 1; transform: scale(1); }
      to { opacity: 0; transform: scale(0.95); }
    }
    .fade-out {
      animation: fadeOut 0.3s ease-in forwards;
    }
    
    /* Animasi untuk elemen muncul dari bawah */
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .slide-up {
      animation: slideUp 0.4s ease-out forwards;
    }
    
    /* Styling untuk placeholder saat drag-and-drop */
    .drag-placeholder {
      background-color: rgba(71, 85, 105, 0.2);
      border: 2px dashed #4a5568;
      border-radius: 12px;
      min-height: 100px;
      transition: all 0.2s ease;
    }
    
    /* Styling scrollbar agar sesuai dengan tema gelap */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #1e293b;
    }
    ::-webkit-scrollbar-thumb {
      background: #475569;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #64748b;
    }
    
    /* Efek bayangan saat card di-drag */
    .dragging {
      opacity: 0.5;
      transform: rotate(3deg) scale(1.05);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      z-index: 1000;
    }
    
    /* Efek hover pada card */
    .card-hover {
      transition: all 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(0.8);
    }
    
    /* Custom toggle switch */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 24px;
    }
    
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #475569;
      transition: .4s;
      border-radius: 24px;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .slider {
      background-color: #38bdf8;
    }
    
    input:checked + .slider:before {
      transform: translateX(24px);
    }
    
    /* Background animasi */
    .animated-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.05;
      background-image: 
        radial-gradient(circle at 10% 20%, #38bdf8 0%, transparent 20%),
        radial-gradient(circle at 90% 30%, #8b5cf6 0%, transparent 20%),
        radial-gradient(circle at 50% 70%, #ec4899 0%, transparent 20%),
        radial-gradient(circle at 20% 80%, #10b981 0%, transparent 20%);
      background-size: 100% 100%;
      animation: bgAnimation 15s ease infinite;
    }
    
    @keyframes bgAnimation {
      0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%; }
      50% { background-position: 100% 0%, 0% 100%, 100% 100%, 0% 0%; }
      100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%; }
    }
    
    /* Badge & Tag colors */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.5rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
    }
    .tag-blue { background-color: rgba(56, 189, 248, 0.2); color: #38bdf8; }
    .tag-purple { background-color: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
    .tag-pink { background-color: rgba(236, 72, 153, 0.2); color: #ec4899; }
    .tag-green { background-color: rgba(16, 185, 129, 0.2); color: #10b981; }
    .tag-yellow { background-color: rgba(250, 204, 21, 0.2); color: #facc15; }
    .tag-red { background-color: rgba(248, 113, 113, 0.2); color: #f87171; }
    
    /* Notification */
    .notification {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 16px;
      background-color: #1e293b;
      color: #f8fafc;
      border-radius: 8px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 1000;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s ease;
    }
    
    .notification.show {
      transform: translateY(0);
      opacity: 1;
    }
    
    /* Floating action button */
    .fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #38bdf8, #8b5cf6);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 100;
    }
    
    .fab:hover {
      transform: scale(1.1);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    /* Stats card */
    .stats-card {
      background: linear-gradient(135deg, #1e293b, #334155);
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
    }
    
    .stats-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* Error state */
    .error-state-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem;
      text-align: center;
      height: calc(100vh - 200px); /* Adjust height as needed */
    }
    
    .error-icon {
      width: 64px;
      height: 64px;
      background-color: rgba(248, 113, 113, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }