/* 
 * Index Page Styles - Campaign Input Form
 * Phase 1: Basic layout and form structure matching Figma design
 */

/* ===== CUSTOM OVERRIDES FOR INDEX PAGE ===== */

/* ===== HEADING SIZE OVERRIDE ===== */

/* Match the figma-heading-1 size to methods-section-title (30px fixed) */
.figma-heading-1 {
    font-size: 30px !important;
}

/* ===== CUSTOM OVERRIDES FOR INDEX PAGE ===== */

/* ===== CUSTOM OVERRIDES FOR INDEX PAGE ===== */

/* ===== CONSISTENT MODULE PADDING ===== */

/* Set consistent padding for all module content */
.figma-module .module-content {
    padding: var(--spacing-xl) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top, reducing bottom whitespace */
}

/* ===== MODULE BACKGROUNDS ===== */

/* Apply light purple background to form modules */
.form-module,
.campaign-context-module {
    background: var(--color-light-purple);
}

/* Remove padding from introduction module content specifically */
.introduction-module .module-content {
    padding: 0 !important;
}

/* Limit width of introduction text for better readability */
.introduction-module .figma-body {
    max-width: 600px;
}

/* Override the base figma-module min-height for form modules */
.form-module,
.introduction-module,
.campaign-context-module {
    min-height: auto !important; /* Override the clamp(250px, 30vh, 400px) from base CSS */
    height: auto !important;
}

/* For form modules, make content fill naturally without excess bottom space */
.form-module .module-content {
    padding: var(--spacing-xl) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute content to reduce bottom space */
    min-height: fit-content; /* Let content determine height */
}

/* Remove border from introduction module only */
.introduction-module {
    border: none !important;
    margin-bottom: 2rem !important;
    min-height: auto !important;
    height: auto !important;
}

/* Add bottom spacing to figma-row in form context */
#campaign-form .figma-row {
    margin-bottom: 2rem;
}

.input-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

/* Archetype Selection Grid - Always 2x2 layout */
.archetype-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.archetype-grid-item {
    display: flex;
    flex-direction: column;
}

.input-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ===== FIELD LABELS ===== */

.field-label {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    color: var(--color-secondary); /* Blue #2b28c2 */
    margin: 0;
    padding: 0.5rem;
}

/* Campaign Context Header - Blue and larger than field labels */
.campaign-context-header {
    color: var(--color-secondary) !important; /* Blue #2b28c2 */
    font-size: 1.5rem !important; /* Bigger than field labels (1.25rem) */
}

/* Field titles - Blue and same size/style as other titles */
.field-title {
    color: var(--color-secondary) !important; /* Blue #2b28c2 */
    font-size: 1.25rem !important; /* Match field-label size (20px) */
    font-weight: 700 !important; /* Match field-label weight */
}

.required-asterisk {
    color: var(--color-primary); /* Red #fb4f46 */
}

/* ===== INPUT FIELD STRUCTURE ===== */

.starfish-input-field {
    background: #ffffff;
    border: 1.5px solid #000000;
    box-shadow: 4px 4px 0px 0px #000000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    min-height: 45px;
}

.starfish-input-field-with-button {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.starfish-input-field-with-button .starfish-input-field {
    flex: 1;
}

/* ===== INPUT STYLING ===== */

.starfish-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 0.875rem; /* 14px */
    color: #606060;
    flex: 1;
    padding: 0;
}

.starfish-input::placeholder {
    color: #606060;
}

/* ===== TOMSELECT INTEGRATION ===== */

/* Container for TomSelect within our input field design */
.starfish-input-field .ts-wrapper {
    flex: 1;
    border: none;
    background: transparent;
}

.starfish-input-field .ts-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: auto !important;
    font-family: 'Helvetica Neue', sans-serif !important;
}

.starfish-input-field .ts-control .ts-input {
    border: none !important;
    font-family: 'Helvetica Neue', sans-serif !important;
    font-size: 0.875rem !important;
    color: #606060 !important;
    padding: 0 !important;
}

/* Placeholder styling for empty selects */
.starfish-input-field .ts-control:not(.has-items):not(.focus) .ts-input::placeholder {
    color: transparent; /* Hide default placeholder */
}

/* Red placeholder token - default behavior */
.starfish-input-field::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-primary); /* Red #fb4f46 */
    color: #ffffff;
    padding: 2px 4px;
    font-size: 0.875rem;
    font-family: 'Helvetica Neue', sans-serif;
    pointer-events: none;
    z-index: 2;
}

/* Hide placeholder token when field has value or focus */
.starfish-input-field.has-value::before,
.starfish-input-field:focus-within::before {
    display: none;
}

/* Special case: Methods field with no red token - just gray placeholder */
.starfish-input-field--no-token::before {
    display: none; /* Never show red token */
}

.starfish-input-field--no-token .ts-control .ts-input {
    color: #606060 !important;
}

.starfish-input-field--no-token .ts-control .ts-input::placeholder {
    color: #606060 !important; /* Show gray placeholder */
}

/* ===== INPUT STATUS INDICATORS ===== */

.input-status {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 0.875rem; /* 14px */
    white-space: nowrap;
    margin-left: auto;
    padding-left: 1rem;
}

.input-status.required {
    color: var(--color-primary); /* Red #fb4f46 */
}

.input-status.optional {
    color: var(--color-secondary); /* Blue #2b28c2 */
}

/* ===== TOMSELECT ITEM STYLING ===== */

.ts-control .ts-item {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 2px 8px !important;
    margin: 2px !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
}

.ts-control .ts-item .remove {
    color: #ffffff !important;
    margin-left: 4px !important;
}

/* ===== DROPDOWN STYLING ===== */

.ts-dropdown {
    border: 1.5px solid #000000 !important;
    box-shadow: 4px 4px 0px 0px #000000 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    z-index: 1000 !important; /* Ensure dropdown appears above other elements */
    overflow: visible !important; /* Allow content to extend beyond container */
    max-height: 200px !important; /* Set reasonable max height */
    overflow-y: auto !important; /* Add scroll when needed */
}

.ts-dropdown .ts-option {
    padding: 8px 12px !important;
    font-family: 'Helvetica Neue', sans-serif !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ts-dropdown .ts-option:hover,
.ts-dropdown .ts-option.active {
    background: var(--color-light-purple) !important;
    color: var(--color-secondary) !important;
}

.ts-dropdown .ts-option:last-child {
    border-bottom: none !important;
}

/* Remove max-height for groups and opponent dropdowns to show all options */
.input-field:has(#opponent_type) .ts-dropdown,
.input-field:has(#groups) .ts-dropdown {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Also target the dropdown content specifically */
.input-field:has(#opponent_type) .ts-dropdown .ts-dropdown-content,
.input-field:has(#groups) .ts-dropdown .ts-dropdown-content {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Fix double scroll bar issue for country dropdown */
.input-field:has(#country) .ts-dropdown {
    overflow-y: hidden !important;
}

.input-field:has(#country) .ts-dropdown .ts-dropdown-content {
    overflow-y: auto !important;
}

/* Ensure parent containers don't clip dropdown */
.figma-module,
.input-field,
.input-grid {
    overflow: visible !important;
    position: relative !important;
}

.starfish-input-field {
    overflow: visible !important;
    position: relative !important;
}

/* ===== CTA BUTTON ===== */

.cta-container {
    display: flex;
    justify-content: flex-start; /* Changed from center to left alignment */
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.figma-button-cta {
    background: var(--color-primary); /* Red #fb4f46 */
    color: #ffff00; /* Yellow text as per Figma */
    border: none;
    padding: 1rem 1.25rem;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 1.5rem; /* 24px */
    box-shadow: 4px 4px 0px 0px #000000;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.figma-button-cta:hover {
    opacity: 0.9;
}

/* ===== BROWSE BUTTON ===== */

.browse-methods-btn {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: none;
    padding: 0.5rem 0.75rem;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    box-shadow: 4px 4px 0px 0px #000000;
    cursor: pointer;
    white-space: nowrap;
    height: 45px; /* Match input field height */
}

.browse-methods-btn:hover {
    opacity: 0.9;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
    
    .input-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
    }
    
    /* Archetype grid stacks vertically on mobile */
    .archetype-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        gap: 1rem;
    }
    
    .starfish-input-field-with-button {
        flex-direction: column;
        align-items: stretch;
    }
    
    .browse-methods-btn {
        height: auto;
        padding: 0.75rem;
    }
}

/* ===== FORM VALIDATION STYLING ===== */

.starfish-input:invalid {
    border-color: var(--color-primary);
}

.starfish-input:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* TomSelect focus styling */
.ts-control.focus {
    outline: 2px solid var(--color-secondary) !important;
    outline-offset: 2px !important;
}

/* ===== SECTION SPACING ===== */

.figma-section {
    margin-bottom: 0; /* Remove default margin for tight layout */
    overflow: visible !important; /* Ensure dropdowns can extend outside section */
}

.figma-module {
    margin-bottom: 2rem;
    overflow: visible !important; /* Ensure dropdowns can extend outside module */
}

.figma-module:last-child {
    margin-bottom: 0;
}

/* Ensure all containers allow dropdown overflow */
.section-content,
.module-content {
    overflow: visible !important;
}

/* Make sure form doesn't clip dropdowns */
#campaign-form {
    overflow: visible !important;
}

/* ===== TOMSELECT DROPDOWN OVERFLOW FIX ===== */

/* Ensure TomSelect dropdowns can overflow their containers */
.ts-dropdown {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Ensure parent containers don't clip the dropdowns */
.input-grid,
.input-field,
.starfish-input-field {
    overflow: visible !important;
}