@import "tailwindcss";

body {
  @apply bg-gradient-to-br from-blue-50 to-indigo-100;
}

@media (prefers-color-scheme: dark) {
  body {
    @apply bg-gradient-to-br from-gray-900 to-gray-800;
  }
}

/* Navbar theme classes */
.theme-navbar {
  @apply bg-white/90 backdrop-blur-sm shadow-xl;
}
.theme-navbar-text {
  @apply text-gray-700 hover:text-gray-900;
}
.theme-navbar-accent {
  @apply text-blue-600 hover:text-blue-700;
}
.theme-navbar-button {
  @apply text-blue-600 hover:text-blue-700;
}

@media (prefers-color-scheme: dark) {
  .theme-navbar {
    @apply bg-black/80 backdrop-blur-sm shadow-xl;
  }
  .theme-navbar-text {
    @apply text-cyan-400 hover:text-cyan-300;
  }
  .theme-navbar-accent {
    @apply text-cyan-400 hover:text-cyan-300;
  }
  .theme-navbar-button {
    @apply text-blue-400 hover:text-cyan-300;
  }
}

/* Card theme classes */
.theme-card {
  @apply bg-white/90 shadow-md;
}
.theme-card-input {
  @apply bg-white/80 text-gray-900 border-gray-300 focus:ring-blue-500;
}
.theme-card-button {
  @apply bg-blue-500/80 text-white hover:bg-blue-600/80;
}

@media (prefers-color-scheme: dark) {
  .theme-card {
    @apply bg-gray-800/90 shadow-md;
  }
  .theme-card-input {
    @apply bg-gray-700/80 text-white border-gray-600 focus:ring-blue-400;
  }
  .theme-card-button {
    @apply bg-blue-600/80 text-white hover:bg-blue-700/80;
  }
}

/* Dashboard theme classes - auto-switch based on system preference */
.theme-container {
  @apply bg-white/95 text-gray-900 backdrop-blur-xl;
}
.theme-secondary-container {
  @apply bg-gray-100/80 text-gray-900;
}
.theme-border {
  @apply border-gray-200;
}
.theme-button-text {
  @apply text-gray-900;
}
.theme-icon-button {
  @apply text-gray-600 hover:text-gray-800;
}
.theme-question-text {
  @apply text-black bg-white/70 rounded px-2 py-1 inline;
}
.theme-admin-button {
  @apply bg-blue-500 hover:bg-blue-600 text-white;
}
.theme-button {
  @apply bg-blue-500 hover:bg-blue-600 text-white;
}
.theme-input {
  @apply bg-white/90 text-gray-900 border-gray-300;
}
.theme-text {
  @apply text-gray-900;
}
.theme-select {
  @apply bg-white text-gray-900 border-gray-300;
}

@media (prefers-color-scheme: dark) {
  .theme-container {
    @apply bg-gray-800/95 text-white backdrop-blur-xl;
  }
  .theme-secondary-container {
    @apply bg-gray-700/80 text-white;
  }
  .theme-border {
    @apply border-gray-600;
  }
  .theme-button-text {
    @apply text-white;
  }
  .theme-icon-button {
    @apply text-gray-300 hover:text-white;
  }
  .theme-question-text {
    @apply text-white bg-gray-800/70 rounded px-2 py-1 inline;
  }
  .theme-admin-button {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
  }
  .theme-button {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
  }
  .theme-input {
    @apply bg-gray-700/90 text-white border-gray-600;
  }
  .theme-text {
    @apply text-white;
  }
  .theme-select {
    @apply bg-gray-700 text-white border-gray-600;
  }
}

/* Popup theme classes */
.theme-popup-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-[1000];
}
.theme-popup-container {
  @apply bg-white/95 text-gray-900 backdrop-blur-xl p-8 rounded-lg w-[300px]
    min-h-[100px] shadow-xl;
}
.theme-popup-button {
  @apply bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-md
    cursor-pointer text-base font-bold transition-colors duration-200;
}

@media (prefers-color-scheme: dark) {
  .theme-popup-container {
    @apply bg-gray-800/95 text-white backdrop-blur-xl;
  }
  .theme-popup-button {
    @apply bg-blue-600 hover:bg-blue-700;
  }
}

/* Image generator overlay classes */
.theme-image-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-[1000];
}
.theme-image-container {
  @apply relative bg-white/95 backdrop-blur-xl rounded-lg shadow-xl
    overflow-hidden;
}
.theme-image-input {
  @apply w-full p-2 border rounded bg-white/90 text-gray-900 border-gray-300;
}
.theme-image-button {
  @apply px-0 py-2 rounded-md bg-blue-500 hover:bg-blue-600 text-white
    font-medium transition-colors duration-200;
  white-space: nowrap;
  font-size: 0.95rem;
  width: 120px;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .theme-image-container {
    @apply bg-gray-800/95 backdrop-blur-xl;
  }
  .theme-image-input {
    @apply bg-gray-700/90 text-white border-gray-600;
  }
  .theme-image-button {
    @apply bg-blue-600 hover:bg-blue-700;
  }
}

/* Voice recorder overlay classes */
.theme-recorder-container {
  @apply bg-white/95 text-gray-900 backdrop-blur-xl p-8 rounded-lg w-[364px]
    min-h-[220px] flex flex-col justify-center items-center relative shadow-xl;
}
.theme-recorder-close {
  @apply absolute top-3 right-3 bg-transparent border-none text-gray-600
    hover:text-gray-900 text-2xl cursor-pointer z-10 p-0 leading-none;
}
.theme-recorder-button {
  @apply w-[100px] h-12 rounded-full text-base font-bold border-none
    cursor-pointer transition-all duration-200 flex items-center justify-center;
}
.theme-recorder-start {
  @apply bg-blue-500 hover:bg-blue-600 text-white;
}
.theme-recorder-stop {
  @apply bg-red-500 hover:bg-red-600 text-white;
}
.theme-recorder-save {
  @apply bg-green-500 hover:bg-green-600 text-white;
}

@media (prefers-color-scheme: dark) {
  .theme-recorder-container {
    @apply bg-gray-800/95 text-white backdrop-blur-xl;
  }
  .theme-recorder-close {
    @apply text-gray-300 hover:text-white;
  }
  .theme-recorder-start {
    @apply bg-blue-600 hover:bg-blue-700;
  }
  .theme-recorder-stop {
    @apply bg-red-600 hover:bg-red-700;
  }
  .theme-recorder-save {
    @apply bg-green-600 hover:bg-green-700;
  }
}

/* Financial Calendar theme classes */
.theme-calendar-form {
  @apply bg-gray-50 border-gray-300 shadow-sm;
}
.theme-calendar-label {
  @apply text-gray-900;
}
.theme-calendar-input {
  @apply bg-white text-gray-900 border-gray-300;
}
.theme-calendar-nav-button {
  background: rgba(0, 0, 0, 0.15);
}
.theme-calendar-title {
  @apply text-gray-900;
}
.theme-calendar-table {
  @apply text-gray-900;
}
.theme-calendar-cell {
  @apply border-gray-300 bg-white;
}
.theme-calendar-day {
  @apply text-gray-900;
}
.theme-calendar-list-container {
  @apply bg-white border-gray-200 shadow-sm;
}
.theme-calendar-list-empty {
  @apply text-gray-500;
}
.theme-calendar-list-item {
  @apply border-gray-200;
}
.theme-calendar-list-frequency {
  @apply text-gray-500;
}
.theme-calendar-close-button {
  @apply bg-gray-500 hover:bg-gray-600 text-white;
}
.theme-calendar-today {
  @apply border-2 border-blue-500 bg-blue-50;
}

/* Dialog form theme classes */
.theme-dialog-overlay {
  @apply fixed inset-0 flex items-start justify-center bg-black/40 z-50;
}
.theme-dialog-container {
  @apply bg-white text-gray-900 p-4 rounded-xl shadow-2xl w-full max-w-md;
}
.theme-dialog-title {
  @apply text-xl font-bold text-center mb-2 text-gray-900;
}
.theme-dialog-input {
  @apply w-full border border-gray-300 rounded-md px-3 py-2 text-base bg-white
    text-gray-900;
}
.theme-dialog-select {
  @apply w-full border border-gray-300 rounded-md px-3 py-2 text-base bg-white
    text-gray-900;
}
.theme-dialog-cancel-button {
  @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-md font-semibold
    hover:bg-gray-300 transition-colors;
}
.theme-dialog-submit-button {
  @apply bg-green-600 text-white px-4 py-2 rounded-md font-semibold
    hover:bg-green-700 transition-colors;
}

@media (prefers-color-scheme: dark) {
  .theme-dialog-container {
    @apply bg-gray-800 text-white shadow-2xl;
  }
  .theme-dialog-title {
    @apply text-white;
  }
  .theme-dialog-input {
    @apply border-gray-600 bg-gray-700 text-white;
  }
  .theme-dialog-select {
    @apply border-gray-600 bg-gray-700 text-white;
  }
  .theme-dialog-cancel-button {
    @apply bg-gray-600 text-white hover:bg-gray-500;
  }
  .theme-dialog-submit-button {
    @apply bg-green-600 text-white hover:bg-green-500;
  }
}

@media (prefers-color-scheme: dark) {
  .theme-calendar-form {
    @apply bg-gray-800 border-gray-600 shadow-md;
  }
  .theme-calendar-label {
    @apply text-white;
  }
  .theme-calendar-input {
    @apply bg-gray-700 text-white border-gray-600;
  }
  .theme-calendar-nav-button {
    background: rgba(255, 255, 255, 0.15);
  }
  .theme-calendar-title {
    @apply text-white;
  }
  .theme-calendar-table {
    @apply text-white;
  }
  .theme-calendar-cell {
    @apply border-gray-600 bg-gray-800;
  }
  .theme-calendar-day {
    @apply text-white;
  }
  .theme-calendar-list-container {
    @apply bg-gray-800 border-gray-600 shadow-md;
  }
  .theme-calendar-list-empty {
    @apply text-gray-400;
  }
  .theme-calendar-list-item {
    @apply border-gray-600;
  }
  .theme-calendar-list-frequency {
    @apply text-gray-400;
  }
  .theme-calendar-close-button {
    @apply bg-gray-600 hover:bg-gray-500 text-white;
  }
  .theme-calendar-today {
    @apply border-2 border-cyan-400 bg-cyan-900/30;
  }
}