@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Karla', sans-serif;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

main a {
  color: #369;
  text-decoration: underline;
}

/* Modern Onboarding Styles */
.modern-button {
  @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
}

.modern-button:hover {
  @apply from-indigo-700 to-purple-700;
}

.modern-button:active {
  @apply transform translate-y-0;
}

.cta-button {
  background: white !important;
  color: #4f46e5 !important;
  border: 2px solid white !important;
  font-weight: 600 !important;
  padding: 16px 32px !important;
  font-size: 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
}

.cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  background: #f8fafc !important;
}

.cta-button:active {
  transform: translateY(0) !important;
}

/* Enhanced Form Styling */
.form-section {
  @apply bg-gradient-to-br from-gray-50 to-white border border-gray-200 rounded-xl p-6 shadow-sm;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  @apply ring-2 ring-indigo-500 border-indigo-500 shadow-sm;
}

.form-group label {
  @apply text-gray-700 font-semibold flex items-center;
}

/* Step Progress Enhancement */
.step-circle {
  @apply transition-all duration-300 ease-in-out;
}

.step-circle.active {
  @apply bg-indigo-600 text-white shadow-lg ring-4 ring-indigo-100;
}

.step-circle.completed {
  @apply bg-green-600 text-white shadow-lg;
}

.step-connector {
  @apply transition-all duration-500 ease-in-out;
}

.step-connector.completed {
  @apply bg-gradient-to-r from-green-500 to-indigo-500;
}

/* Benefit Cards */
.benefit-card {
  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

.benefit-card:hover {
  @apply bg-gradient-to-br from-white to-gray-50;
}

/* Info Box Enhancement */
.info-box {
  @apply bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 shadow-sm;
}

/* Progress Bar Enhancement */
sl-progress-bar {
  --indicator-color: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
  --track-color: #e5e7eb;
  --height: 8px;
}

/* Alert Styling */
.alert {
  @apply flex items-center space-x-3 p-4 rounded-lg border shadow-sm;
}

.alert.success {
  @apply bg-green-50 border-green-200 text-green-800;
}

.alert.error {
  @apply bg-red-50 border-red-200 text-red-800;
}

.alert.info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}

.form-card {
  @apply xl:w-2/3 mx-auto p-4;

  ::placeholder {
    @apply text-gray-400 font-normal;
  }

  sl-card {
    @apply w-full;

    .header {
    }

    label:not(.radio-option label, .checkbox-option label) {
      display: block;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: bold;
    }

  }
}

.dt-button {
  @apply px-4 py-2 rounded-md text-sm font-medium;
}

@media (max-width: 1024px) {
  .sidebar-hidden {
    display: none;
  }
  #sidebarToggle {
    display: block;
  }
}

.flash {
  @apply p-4 mb-4 rounded-lg border;
  sl-input::part(base) {
    border-color: #dc2626;
  }
}

@keyframes flash-ani {
  0% {
    background-color: #fef2f2;
    border-color: #fecaca;
  }
  50% {
    background-color: #fee2e2;
    border-color: #fca5a5;
  }
  100% {
    background-color: #fef2f2;
    border-color: #fecaca;
  }
}

.dock-form {
  [multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], select, textarea {
    @apply border-none outline-none shadow-none;
  }

  [multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {
    @apply border-none outline-none shadow-none;
  }
}

.form {
  @apply space-y-6;

  .field-group {
    input:not([type="checkbox"]), textarea, select {
      @apply w-full px-4 py-3 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors;
    }

    input:not([type="checkbox"]):focus, textarea:focus, select:focus {
      @apply ring-2 ring-indigo-500 border-indigo-500 shadow-sm;
    }

    input:disabled, textarea:disabled, select:disabled {
      @apply bg-gray-100 text-gray-500 cursor-not-allowed;
    }

    label {
      @apply block text-sm font-semibold text-gray-700 mb-2;
    }

    .field_with_errors {
      input {
        @apply border-red-500 focus:border-red-500 focus:ring-red-500;
      }

      sl-input::part(base) {
        border-color: #dc2626;
      }

      label {
        @apply text-red-700;
      }

      label {
        @apply text-red-700;
      }
    }
  }

  textarea {
    @apply min-h-[120px] resize-y;
  }

  .field-group {
    @apply space-y-2;
  }

  sl-button[type="submit"] {
    input {
      @apply w-full;
    }
  }
}
body {
  font-family: 'Karla', sans-serif;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 2em
}

main a {
  color: #369;
  text-decoration: underline;
}
/* line 1, app/assets/stylesheets/table.scss */
.table {
  border: 1px solid #000;
  margin: 10px 0;
}

/* line 5, app/assets/stylesheets/table.scss */
.table th {
  background: #f0f0f0;
  border-bottom: 1px solid #000;
  padding: 5px;
  text-align: left;
}

/* line 12, app/assets/stylesheets/table.scss */
.table td {
  border-bottom: 1px solid #000;
  padding: 5px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* Template Preview Table Styles */
/* line 18, app/assets/stylesheets/application.scss */
.template-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  border: 1px solid #d1d5db;
}

/* line 25, app/assets/stylesheets/application.scss */
.template-preview table th,
.template-preview table td {
  border: 1px solid #d1d5db;
  padding: 0.75rem;
  text-align: left;
}

/* line 32, app/assets/stylesheets/application.scss */
.template-preview table th {
  background-color: #f9fafb;
  font-weight: 600;
}

/* line 37, app/assets/stylesheets/application.scss */
.template-preview table tr:nth-child(even) {
  background-color: #f9fafb;
}

/* Ensure prose tables are styled properly */
/* line 42, app/assets/stylesheets/application.scss */
.prose table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1rem 0 !important;
  border: 1px solid #d1d5db !important;
}

/* line 49, app/assets/stylesheets/application.scss */
.prose table th,
.prose table td {
  border: 1px solid #d1d5db !important;
  padding: 0.75rem !important;
  text-align: left !important;
}

/* line 56, app/assets/stylesheets/application.scss */
.prose table th {
  background-color: #f9fafb !important;
  font-weight: 600 !important;
}

/* line 61, app/assets/stylesheets/application.scss */
.prose table tr:nth-child(even) {
  background-color: #f9fafb !important;
}