/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */



@import url("/assets/custom_framework-2eb9a63b.css");
@import url("/assets/homepage-1747d465.css");
@import url("/assets/devise-5aa94f20.css");
@import url("/assets/application_form-a271aa35.css");
@import url("/assets/auth-6eb55585.css");
@import url("/assets/apply-9c363869.css");
@import url("/assets/legal-5635dbad.css");
@import url("/assets/get_started-4cb79d87.css");
@import url("/assets/ai_agents-734631f3.css");
@import url("/assets/admin-6656abdf.css");
@import url("/assets/admin/email_workflows-bfabc565.css");
@import url("/assets/agent_lifecycle-e2ae733b.css");
@import url("/assets/demo_webapp-4d9aae0e.css");

/* HTML theme styles - moved from inline to fix CSP */
html.theme-light {
  color-scheme: light;
  background-color: transparent;
}

/* Alert styles */
.alert {
  position: relative;
  padding: 12px 40px 12px 16px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-dismiss {
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out;
}

.alert-dismiss:hover {
  opacity: 0.8;
}

.alert-dismiss:focus {
  outline: none;
  opacity: 1;
}

/* Restore default font size for main application */
body {
  font-size: 14px; /* Standard web app font size */
}

/* IMPROVED STEP INDICATOR STYLES - Override application_form.css */
.step-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 120px !important;
    max-width: 140px !important;
}

.step-number {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    font-weight: 700;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.step-label {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center;
    opacity: 1 !important;
    line-height: 1.3;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    hyphens: none !important;
    min-width: 100px !important;
}

.step-connector {
    flex: 1;
    height: 3px !important;
    margin: 0 20px;
    margin-top: -24px !important; /* Align with larger step numbers */
    transition: all 0.3s ease;
}

.step-item.active .step-label {
    opacity: 1 !important;
    font-weight: 700 !important;
}

/* Additional overrides to ensure step styling takes effect */
.application-header .step-indicator .step-progress .step-item .step-number {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.application-header .step-indicator .step-progress .step-item .step-label {
    font-size: 15px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    hyphens: none !important;
    min-width: 100px !important;
}

.application-header .step-indicator .step-progress .step-item.active .step-label {
    font-weight: 800 !important;
    opacity: 1 !important;
    color: white !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
    font-size: 16px !important;
}

/* Reverse checkbox layout - text first, checkbox second */
.checkbox-group-reverse {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-direction: row !important;
}

.checkbox-group-reverse .checkbox-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.checkbox-group-reverse .form-checkbox {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--primary-color) !important;
}