/* ===========================
   KOTO DARK THEME TOKENS
   Bootstrap 5 compatible
=========================== */
html[data-bs-theme="dark"] {
  --primary-color: #0d6efd;
  --background-color: #121212;
  --text-color: #ffffff;

  --navbar-bg-color: #1f1f1f;
  --hover-bg-color: #333333;

  --surface-1: var(--navbar-bg-color);

  --border-1: rgba(255, 255, 255, 0.34);

  /* Chat tokens */
  --chat-control-btn-bg: #121212;
  --chat-control-btn-shadow: rgba(0,0,0,0.45);
  --chat-tts-icon-url: url("/static/chat/icons/tts_dark.03e78e2867e4.png");
  --chat-send-triangle-color: #ffffff;

  --chat-voice-overlay-bg: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), rgba(255,255,255,0.12));
  --chat-voice-overlay-ring: rgba(255,255,255,0.28);
  --chat-voice-overlay-shadow: rgba(0,0,0,0.55);

  /* Surfaces for cards/panels (distinct from navbar surface) */
  --surface-2: rgba(255, 255, 255, 0.06);

  /* Shadows derived for dark UI */
  --shadow-1: rgba(0,0,0,0.55);
  --shadow-2: rgba(0,0,0,0.35);

  /* Primary ring */
  --ring-1: rgba(13,110,253,0.25);

}

/* Global */
html[data-bs-theme="dark"] body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Header / nav */
html[data-bs-theme="dark"] .koto-header,
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--navbar-bg-color);
  color: var(--text-color);
}

/* Links */
html[data-bs-theme="dark"] .nav-link,
html[data-bs-theme="dark"] .dropdown-item {
  color: var(--text-color);
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .nav-link:hover {
  background-color: var(--hover-bg-color);
  color: var(--primary-color);
}

/* Forms: keep inputs readable in dark */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] textarea.form-control,
html[data-bs-theme="dark"] select.form-select {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid rgba(0,0,0,0.45);
  box-shadow: none;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* Tables */
html[data-bs-theme="dark"] table {
  border-color: var(--border-1);
}

/* Force readable placeholder on white inputs in dark theme */
html[data-bs-theme="dark"] input.form-control::placeholder,
html[data-bs-theme="dark"] textarea.form-control::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
}

html[data-bs-theme="dark"] input.form-control::-webkit-input-placeholder,
html[data-bs-theme="dark"] textarea.form-control::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}

html[data-bs-theme="dark"] input.form-control::-moz-placeholder,
html[data-bs-theme="dark"] textarea.form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
}

html[data-bs-theme="dark"] input.form-control:-ms-input-placeholder,
html[data-bs-theme="dark"] textarea.form-control:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}