/* Whiteboard Specific Styles */
#whiteboard-toolbar .tool-btn {
  transition: background 0.3s ease;
}
#whiteboard-toolbar .tool-btn:hover,
#whiteboard-toolbar .tool-btn.active {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#whiteboard-toolbar .tool-btn.active {
  background: #333 !important;
}
#whiteboard-canvas {
  touch-action: none; /* Prevent default touch behaviors */
}
#text-cursor {
  pointer-events: none;
  min-width: 100px;
  min-height: 20px;
  z-index: 10;
}
@media (max-width: 768px) {
  #whiteboard-canvas {
    width: 100% !important;
    height: auto !important;
  }
  #whiteboard-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 5px;
    width: 100%;
  } 
  #whiteboard-toolbar label {
    justify-content: space-between;
  }
}

/* Tambahan: Responsive untuk portrait (layar sempit, tinggi > lebar) */
@media (orientation: portrait) and (max-width: 768px) {
  #whiteboard-toolbar {
    justify-content: center; /* Pusatkan elemen agar rapi */
    gap: 5px; /* Kurangi jarak untuk muat lebih banyak elemen */
    padding: 5px; /* Padding lebih kecil */
  }
  
  #whiteboard-toolbar .tool-btn {
    font-size: 12px;
    padding: 6px 8px;
    min-width: auto;
    height: 32px;
  }
  
  /* Khusus untuk input/select panjang (sesuai kode asal) */
  #whiteboard-toolbar input[type="color"],
  #whiteboard-toolbar input[type="text"],
  #whiteboard-toolbar select,
  #whiteboard-toolbar input[type="range"] {
    width: auto; /* Biarkan auto, tapi batasi jika perlu */
    max-width: 80px; /* Maksimal lebar agar tidak dominan */
    font-size: 12px;
    padding: 5px;
    height: 30px;
  }
}

/* Opsional: Untuk landscape atau desktop, pastikan tetap horizontal (sesuai kode asal) */
@media (orientation: landscape) or (min-width: 769px) {
  #whiteboard-toolbar {
    justify-content: flex-start; /* Rata kiri, sesuai kode asal */
    gap: 10px; /* Jarak asal */
  }
}

/* Perbaikan Fullscreen: Toolbar tetap visible dan fixed di atas saat fullscreen */
#whiteboard-container:-webkit-full-screen #whiteboard-toolbar,
#whiteboard-container:-moz-full-screen #whiteboard-toolbar,
#whiteboard-container:fullscreen #whiteboard-toolbar {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  width: 90% !important;
  max-width: 800px !important;
  background: rgba(245, 245, 245, 0.95) !important; /* Semi-transparent untuk tidak ganggu */
  backdrop-filter: blur(5px) !important; /* Blur background untuk modern look */
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  padding: 8px !important; /* Kurangi padding di fullscreen */
}

#whiteboard-container:-webkit-full-screen #canvas-wrapper,
#whiteboard-container:-moz-full-screen #canvas-wrapper,
#whiteboard-container:fullscreen #canvas-wrapper {
  margin-top: 80px !important; /* Offset untuk toolbar fixed */
  border: none !important; /* Hilangkan border di fullscreen */
  border-radius: 0 !important;
  height: calc(100vh - 100px) !important; /* Full height minus toolbar dan margin */
  width: 100% !important;
}

#whiteboard-container:-webkit-full-screen canvas,
#whiteboard-container:-moz-full-screen canvas,
#whiteboard-container:fullscreen canvas {
  width: 100% !important;
  height: 100% !important;
  cursor: crosshair !important;
}

/* Mobile adjustments di fullscreen */
@media (max-width: 768px) {
  #whiteboard-container:-webkit-full-screen #whiteboard-toolbar,
  #whiteboard-container:-moz-full-screen #whiteboard-toolbar,
  #whiteboard-container:fullscreen #whiteboard-toolbar {
    flex-direction: column !important;
    width: 95% !important;
    gap: 5px !important;
  }
  
  #whiteboard-container:-webkit-full-screen #canvas-wrapper,
  #whiteboard-container:-moz-full-screen #canvas-wrapper,
  #whiteboard-container:fullscreen #canvas-wrapper {
    margin-top: 120px !important; /* Lebih besar di mobile */
  }
}

.wb-intro {
  font-size: 14px;
  color: #444;
  margin-bottom: 10px;
}

.whiteboard-container {
  position: relative;
}

.whiteboard-toolbar {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 10;
}

.wb-tool-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
}

/* Variant warna tombol */
.wb-tool-pen,
.wb-tool-insert,
.wb-tool-undo,
.wb-tool-redo {
  background: #4CAF50;
}

.wb-tool-select,
.wb-tool-clear {
  background: #FF00FF;
}

.wb-tool-text,
.wb-tool-delete {
  background: #2196F3;
}

.wb-tool-eraser {
  background: #FF0000;
}

.wb-tool-reset {
  background: #F44336;
}

.wb-tool-save {
  background: #9C27B0;
}

.wb-tool-full {
  background: #607D8B;
}

/* Color picker */
.wb-color-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wb-color-select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.wb-color-input {
  width: 40px;
  height: 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Line width */
.wb-line-width {
  display: flex;
  align-items: center;
  gap: 1px;
  line-height: 0;
}

.wb-line-btn {
  width: 16px;
  height: 16px;
  margin-top: -1px;
  border: none;
  border-radius: 50%;
  background: #2f8a90fc;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.wb-line-range {
  width: 60px;
  margin: 0;
}

.wb-line-value {
  margin-left: 4px;
  line-height: 1;
}

/* Canvas wrapper & canvas */
.wb-canvas-wrapper {
  position: relative;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.wb-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

/* Text input & cursor overlay */
.wb-text-input {
  position: absolute;
  display: none;
  padding: 4px 8px;
  border-radius: 8px;
  border: 2px solid #000;
  background: #fff;
  width: 220px;
  box-sizing: border-box;
  z-index: 20;
}

.wb-text-cursor {
  position: absolute;
  display: none;
  border: none;
  background: transparent;
}

/* Instruksi */
.wb-instruction {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}