/**
 * Tejovathi Consulting - Custom Brand Alignment Theme CSS
 * Compatible with LimeSurvey 7.0.5 (Bootstrap 5 / Fruity Core Stack)
 * Brand Colors: Deep Corporate Blue, Energetic Orange, Vibrant Green
 */

/* ==========================================================================
   1. GLOBAL VARIABLES & ROOT STYLING
   ========================================================================== */
:root {
    --brand-blue: #0A4B8F;       /* Deep Corporate Blue */
    --brand-blue-hover: #083D75; /* Darkened Blue for Hover States */
    --brand-orange: #FF6B35;     /* Energetic Orange CTA Accent */
    --brand-orange-hover: #E85A27;/* Darkened Orange for Primary CTA Hover */
    --brand-green: #52B788;      /* Vibrant Green Success Indicator */
    --bg-light: #F8F9FA;         /* Clean Off-White */
    --text-dark: #2B303A;        /* Charcoal for Readable Typography */
    --border-color: #E2E8F0;     /* Subtle Gray Container Borders */
}

body {
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ==========================================================================
   2. NAVBAR & HEADER ARCHITECTURE
   ========================================================================== */
.navbar-default, 
.navbar, 
#navbar, 
.header-container {
    background-color: var(--brand-blue) !important;
    border-bottom: 3px solid var(--brand-orange) !important;
    padding: 15px 0;
}

.navbar-brand, 
.navbar-text,
.header-container h1,
.sitename {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   3. QUESTION CONTAINERS & TYPOGRAPHY
   ========================================================================== */
.question-container {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-color) !important;
    border-left: 5px solid var(--brand-blue) !important; /* Blue brand highlight bar */
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 25px !important;
    padding: 25px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.question-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

.question-title, 
.question-text {
    color: var(--brand-blue) !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
}

.question-help {
    color: #64748B !important;
    border-left: 2px solid var(--brand-orange) !important;
    padding-left: 10px;
    font-style: italic;
}

/* ==========================================================================
   4. NAVIGATION BUTTON BALANCING (CTAs)
   ========================================================================== */
/* The Primary "Next" and "Submit" Actions - Orange to ensure Founder focus/conversion */
.ls-move-next-action, 
.ls-move-submit-action,
.btn-primary.ls-move-next-action {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px;
    transition: all 0.2s ease-in-out !important;
}

.ls-move-next-action:hover, 
.ls-move-submit-action:hover {
    background-color: var(--brand-orange-hover) !important;
    border-color: var(--brand-orange-hover) !important;
    transform: translateY(-1px);
}

/* The Secondary "Previous" or "Save" Actions - Deep Blue Minimalist Style */
.ls-move-prev-action, 
.btn-outline-secondary,
.ls-save-action {
    background-color: transparent !important;
    border: 2px solid var(--brand-blue) !important;
    color: var(--brand-blue) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease-in-out !important;
}

.ls-move-prev-action:hover, 
.ls-save-action:hover {
    background-color: var(--brand-blue) !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   5. PROGRESS BAR INTEGRATION
   ========================================================================== */
.progress {
    background-color: #E2E8F0 !important;
    border-radius: 20px !important;
    height: 16px !important;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}

.progress-bar, 
.progress-bar-success, 
.progress-bar-striped {
    background-color: var(--brand-green) !important; /* Safe completion indicator */
    background-image: none !important; 
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    line-height: 16px !important;
}

/* ==========================================================================
   6. FORM INPUT ELEMENTS & SELECTIONS
   ========================================================================== */
/* Active state changes for checkboxes and radios */
.form-check-input:checked {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
}

.form-control:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(10, 75, 143, 0.2) !important;
}

/* List group item styles for multiple choice items */
.list-group-item.active, 
.list-group-item.active:hover, 
.list-group-item.active:focus {
    background-color: rgba(10, 75, 143, 0.08) !important;
    color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    font-weight: 600;
}

/* ==========================================================================
   7. UTILITY FOOTER CUSTOMIZATION
   ========================================================================== */
.footer {
    background-color: #FFFFFF !important;
    border-top: 1px solid var(--border-color) !important;
    color: #64748B !important;
    padding: 20px 0 !important;
    font-size: 0.85rem;
}

.footer a {
    color: var(--brand-blue) !important;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}