:root {
  /* Base colors */
  --vscode-editor-bg: #1e1e1e;
  --vscode-sidebar-bg: #252526;
  --vscode-tab-active: #1e1e1e;
  --vscode-tab-inactive: #2d2d2d;
  --vscode-border: #3c3c3c;
  --vscode-highlight: #264f78;
  
  /* Text colors */
  --vscode-text-default: #cccccc;
  --vscode-text-muted: #969696;
  --vscode-text-bright: #ffffff;
  
  /* Syntax highlighting */
  --vscode-blue: #569cd6;      /* Keywords, types */
  --vscode-light-blue: #9cdcfe; /* Variables */
  --vscode-cyan: #4ec9b0;      /* Classes, types */
  --vscode-green: #6a9955;     /* Comments */
  --vscode-yellow: #dcdcaa;    /* Functions */
  --vscode-orange: #ce9178;    /* Strings */
  --vscode-red: #f44747;       /* Errors */
  --vscode-purple: #c586c0;    /* Control flow keywords */
  
  /* UI elements */
  --vscode-accent: #007acc;
  --vscode-button-bg: #0e639c;
  --vscode-button-hover: #1177bb;
  --vscode-scrollbar: #424242;
  --vscode-scrollbar-hover: #585858;
  
  /* Editor UI */
  --editor-bg: var(--vscode-editor-bg);
  --sidebar-bg: var(--vscode-sidebar-bg);
}

/* Apply base styles */
body {
  background-color: var(--vscode-editor-bg);
  color: var(--vscode-text-default);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

/* Terminal styles */
.terminal-text {
  font-family: 'Consolas', 'Courier New', monospace;
}

.terminal-cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--vscode-editor-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--vscode-scrollbar);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vscode-scrollbar-hover);
}

/* VSCode-like buttons */
.vscode-button {
  background-color: var(--vscode-button-bg);
  color: var(--vscode-text-bright);
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.vscode-button:hover {
  background-color: var(--vscode-button-hover);
} 

    /* Container dan grid */
    /* Pusatkan container secara horizontal */
    .container {
      max-width: 1200px;
      margin: 40px auto; /* Auto di sisi kiri dan kanan agar terpusat */
      padding: 20px;
      background-color: var(--vscode-editor-bg);
      border: 1px solid var(--vscode-border);
      border-radius: 5px;
      display: flex; /* Pastikan elemen dalam container terpusat */
      flex-direction: column;
      align-items: center;
    }

/* Jika layar lebih kecil dari container, beri margin kiri & kanan 10px */
@media (max-width: 1200px) {
  .container {
    margin-left: 10px;
    margin-right: 10px;
  }
}

    .grid-container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 1fr;
    }
    /* Untuk layar lebar, gunakan 3 kolom */
    @media (min-width: 768px) {
      .grid-container {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .grid-item {
      position: relative;
      padding: 15px;
      background-color: var(--vscode-tab-inactive);
      border: 1px solid var(--vscode-border);
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    /*
    .prompt-text {
      margin-bottom: 10px;
      color: var(--vscode-text-default);
      word-wrap: break-word;
      padding-right: 30px; 
    }
    */
    /* Pastikan prompt-text hanya menampilkan 8 baris dengan scroll jika lebih panjang */
    .prompt-text {
      max-height: 8em; /* Menyesuaikan dengan ukuran sekitar 8 baris */
      overflow-y: auto; /* Tambahkan scroll jika teks lebih panjang */
      padding-right: 10px; /* Memberikan ruang agar scroll tidak tumpang tindih */
      word-wrap: break-word;
      color: var(--vscode-text-default);
    }


    .prompt-category {
      font-size: 14px;
      color: var(--vscode-text-muted);
    }
    /* Icon Copy di pojok kanan atas */
    .copy-icon {
      position: absolute;
      top: 10px;
      right: 15px;
      cursor: pointer;
      width: 24px;
      height: 24px;
      fill: var(--vscode-text-muted);
      transition: 0.3s;
    }
    .copy-icon:hover {
      fill: var(--vscode-text-bright);
    }

        /* Tambahkan blur pada container dan grid-item saat modal aktif */
        .blurred {
          filter: blur(5px);
          pointer-events: none;
        }
    
        /* Tombol Add */
        .add-button {
          position: absolute;
          top: 15px;
          right: 15px;
          background-color: var(--vscode-button-bg);
          color: var(--vscode-text-bright);
          border: none;
          padding: 8px 12px;
          border-radius: 5px;
          cursor: pointer;
          transition: 0.3s;
        }
    
        .add-button:hover {
          background-color: var(--vscode-button-hover);
        }
    
        /* Modal */
    /* Tambahkan efek blur hanya pada latar belakang modal */
    .modal-container {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      z-index: 10; /* Pastikan modal berada di atas layer blur */
    }
    
    /* Efek blur hanya pada latar belakang */
    .modal-container::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(5px);
      pointer-events: none; /* Cegah interaksi di background */
    }
    
    /* Modal tetap jelas dan tidak terkena blur */
    .modal {
      position: relative;
      background-color: var(--vscode-editor-bg);
      padding: 20px;
      width: 400px;
      border-radius: 5px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
      text-align: center;
      z-index: 20; /* Pastikan modal tetap di atas blur */
    }
    
        /* Close button */
        .close-button {
          background-color: var(--vscode-red);
          color: var(--vscode-text-bright);
          border: none;
          padding: 5px 10px;
          border-radius: 5px;
          cursor: pointer;
          margin-top: 10px;
        }
    
        .close-button:hover {
          /* background-color: var(--vscode-orange); */
          color: var(--vscode-text-muted)
        }

        .save-button {
          background-color: var(--vscode-blue);
          color: var(--vscode-text-bright);
          border: none;
          padding: 5px 10px;
          border-radius: 5px;
          cursor: pointer;
          margin-top: 10px;
          margin-right: 10px;
        }
    
        .save-button:hover {
          color: var(--vscode-text-muted)
        }


.form-group {
  margin-bottom: 15px;
}

/* Perbesar input dan select */
/* Pastikan input tidak melebihi ukuran modal */
.vscode-input {
  width: 100%;
  max-width: 100%; /* Mencegah melebihi ukuran modal */
  padding: 12px;
  font-size: 14px;
  border: 1px solid var(--vscode-border);
  border-radius: 5px;
  background-color: var(--vscode-tab-inactive);
  color: var(--vscode-text-default);
  box-sizing: border-box; /* Pastikan padding tidak memperbesar elemen */
}

.input-filter {
  width: 100%;
  max-width: 100%; /* Mencegah melebihi ukuran modal */
  margin: 10px 10px;
  padding: 12px;
  font-size: 12px;
  border: 1px solid var(--vscode-border);
  border-radius: 5px;
  background-color: var(--vscode-tab-inactive);
  color: var(--vscode-text-default);
  box-sizing: border-box; /* Pastikan padding tidak memperbesar elemen */
}

/* Mengatur tombol agar sejajar */
.form-group.buttons {
  display: flex;
  justify-content: space-between;
}

/* Textarea untuk prompt input */
.textarea-box {
  width: 100%;
  height: 120px; /* Default tinggi sekitar 6-8 baris */
  resize: vertical; /* Memungkinkan pengguna memperbesar textarea */
  padding: 12px;
  font-size: 16px;
  border: 1px solid var(--vscode-border);
  border-radius: 5px;
  background-color: var(--vscode-tab-inactive);
  color: var(--vscode-text-default);
  box-sizing: border-box;
  overflow-y: auto; /* Scroll jika teks melebihi area */
}

/* Pastikan kategori dan teks "Copy" sejajar */
.prompt-category-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* Style teks Copy */
.copy-text {
  cursor: pointer;
  color: var(--vscode-editor-bg);
  font-weight: none;
  transition: 0.3s;

  border: 1px solid var(--vscode-border);
  border-radius: 5px;
  background-color: var(--vscode-purple);
  padding: 3px;
  box-sizing: border-box;
}

.copy-text:hover {
  color: var(--vscode-text-bright);
}

/* Style untuk Search dan Filter */
.search-filter-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Style Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}


/* daftar kategori modal */
#category-list {
  list-style-type: none;
  padding: 0;
  margin-top: 10px;
}

/* Setiap kategori dalam daftar */
.category-item {
  display: flex;
  justify-content: space-between; /* Nama kategori rata kiri, tombol Edit rata kanan */
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--vscode-border);
}

/* Nama kategori rata kiri */
.category-name {
  font-size: 16px;
  color: var(--vscode-text-default);
}

/* Tombol Edit rata kanan */
.edit-button {
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  background-color: var(--vscode-button-bg);
  color: var(--vscode-text-bright);
  border: none;
  border-radius: 5px;
  transition: 0.3s;
}

.edit-button:hover {
  background-color: var(--vscode-button-hover);
}

/* Tombol Logout */
.logout-button {
  background-color: var(--vscode-red);
  color: var(--vscode-text-bright);
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.logout-button:hover {
  background-color: var(--vscode-orange);
}

/* ----- Login ------------- */
/* Container login responsif */
.login-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  background-color: var(--vscode-editor-bg);
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  text-align: center;
}


/* Heading */
.login-container h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--vscode-text-bright);
}

/* Error message */
.login-error {
  background-color: rgba(255, 0, 0, 0.1);
  color: red;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-weight: bold;
}

/* Input fields */
.login-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  margin-bottom: 15px;
  border: 1px solid var(--vscode-border);
  border-radius: 5px;
  background-color: var(--vscode-tab-inactive);
  color: var(--vscode-text-default);
}


/* Tombol Login */
.login-button {
  width: 50%;
  padding: 12px;
  font-size: 16px;
  background-color: var(--vscode-button-bg);
  color: var(--vscode-text-bright);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.login-button:hover {
  background-color: var(--vscode-button-hover);
}

/* Link Register */
.login-text-muted {
  font-size: 14px;
  color: var(--vscode-text-muted);
}

.login-text-bright {
  font-weight: bold;
  text-decoration: none;
  color: var(--vscode-text-bright);
}

.login-text-bright:hover {
  text-decoration: underline;
}

/* Responsif untuk layar kecil */
@media (max-width: 1200px) {
  .login-container {
    width: 80%;
    padding: 20px;
  }
  
  .login-input, .login-button {
    width: 90%;
    font-size: 14px;
    padding: 10px;
  }
}


/* Tombol Edit Prompt */
.edit-prompt-button, .delete-prompt-button {
  padding: 6px 12px;
  font-size: 11px;
  cursor: pointer;
  background-color: var(--vscode-scrollbar-hover);
  color: var(--vscode-text-muted);
  border: none;
  border-radius: 5px;
  transition: 0.3s;
}

.edit-prompt-button:hover, .delete-prompt-button:hover {
  background-color: var(--vscode-button-hover);
}

/* Container utama registrasi */
.register-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  background-color: var(--vscode-editor-bg);
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* Input dan tombol lebih nyaman untuk layar kecil */
.register-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  margin-bottom: 15px;
  border: 1px solid var(--vscode-border);
  border-radius: 5px;
  background-color: var(--vscode-tab-inactive);
  color: var(--vscode-text-default);
}

.register-button {
  width: 50%;
  padding: 12px;
  font-size: 16px;
  background-color: var(--vscode-button-bg);
  color: var(--vscode-text-bright);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.register-button:hover {
  background-color: var(--vscode-button-hover);
}


/* Pesan Error */
.register-error {
  background-color: rgba(255, 0, 0, 0.1);
  color: red;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-weight: bold;
}

/* Link Login */
.register-text-muted {
  font-size: 14px;
  color: var(--vscode-text-muted);
}

.register-text-bright {
  font-weight: bold;
  text-decoration: none;
  color: var(--vscode-text-bright);
}

.register-text-bright:hover {
  text-decoration: underline;
}

.prompt-images img {
    transition: transform 0.2s;
}
.prompt-images img:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


#modal-image {
  animation: zoomIn 0.2s;
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
#close-modal:hover {
  color: #ccc;
}