/* Global custom colors stylesheets. to use:
 @import ./colors.css;
*/


:root {
    --Neutral-Soft-gray: #E1E1E1;
    --Neutral-White: #FFF;
    --Primary-Light-Green: #E9F1F0;
    --Primary-Standard-Green: #1F7067;
    --Neutral-Md-Gray: #767575;
    --Neutral-Dark-gray: #4A4A4A;
    --Neutral-Text-gray: #898989;
    --Brand-Teal: #356A72;
    --Primary-Highlight-Green: #A0CAC6;
    --Primary-Red: #c62828;
}


#survey-rule-designer {
    width: 50%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    padding: 1rem;
}


/* .project-wizard-navigator { */


/*     display: inline-flex; */


/*         width: 100vw; */


/*     overflow: hidden; */


/*     display: flex; */


/*     flex-direction: column; */


/* } */


/* 1. ROOT CONTAINER - Lock down page bounce */


.project-wizard-container {
    background-color: var(--Primary-Light-Green);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* 2. LAYOUT WRAPPER - Rigid workspace window minus main header components */


.wizard-layout-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
}


/* 3. STEP BODY - Eliminating min-height to provide clean percentage targets */


.wizard-step-body {
    flex: 1;
    width: 100%;
    background-color: var(--Primary-Light-Green);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 112px;
    padding-bottom: 70px;
    box-sizing: border-box;
}


/* 4. STEP LAYOUT - Standardized split container */


.wizard-step-layout {
    display: flex;
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}


/* WIZARD PREVIEW */


.wizard-preview-body {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: var(--Primary-Light-Green);
}


/* 5. SIDEBAR - The only place where scrolling is allowed */


.wizard-sidebar {
    flex: 0 0 45%;
    min-width: 350px;
    height: 100%; 
    overflow-y: auto;
    padding: 20px;
    display: block;
    box-sizing: border-box;
}


/* 6. CARDS - Clean up widths for sidebar usage */


.wizard-card {
    border-radius: 4px;
    border: 1px solid var(--Primary-Highlight-Green);
    background: var(--Neutral-White);
    display: flex;
    width: 720px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    box-sizing: border-box;
}


/* Specific override: Cards inside sidebars must be 100% width */


.wizard-sidebar .card {
    width: 100% !important;
    max-width: 100%;
    align-self: stretch;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--Primary-Highlight-Green);
    background: var(--Neutral-White);
}


/* 7. MAP AREA - Lock to container height */


.map-area {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
}


/* 8. NAV BUTTONS - Pin to the bottom */


.nav-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100vw;
    height: 64px;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--Neutral-Soft-gray);
    background: var(--Neutral-White);
    padding: 0 24px;
    z-index: 1000;
    box-sizing: border-box;
}


/* --- UI HELPERS --- */


.project-wizard-navigator {
    flex: 0 0 auto;
    display: inline-flex;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
    background: var(--Neutral-White);
    box-shadow: 1px 4px 3px 0 var(--Neutral-Dark-gray);
    box-sizing: border-box;
    position: fixed;
    top: 112px;
    left: 0;
    z-index: 80;
}


.project-wizard-navigator span {
    border-radius: 50%;
    background-color: var(--Neutral-Soft-gray);
    width: 24px;
    height: 24px;
    color: var(--Neutral-Text-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;

    /* Label/Top-level */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px; /* 100% */
    text-transform: uppercase;
    margin-right: 8px;
}


.project-wizard-navigator .selected {
    background-color: var(--Neutral-White);
    color: var(--Brand-Teal);
    border: 2px solid var(--Brand-Teal);
}


.project-wizard-container {
    background-color: var(--Primary-Light-Green);
    /* height: 100vh; */
}


.radio-selection-button {
    /*    display: flex;
    flex-direction: column;	*/
    padding: 16px 12px;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--Neutral-Soft-gray);
    background: var(--Neutral-White);
}


.radio-selected-button{
    /*display: flex;*/
    padding: 16px 12px;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--Primary-Standard-Green);
    background: var(--Primary-Light-Green);
}


.inputs {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}


.radio-button-labeled {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
}


.radio-button-description {
    color: var(--Neutral-Md-Gray);
    font-feature-settings: 'liga' off, 'clig' off;
    flex: 1 0 0;
    /* Small Paragraph */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
}


.radio-button-checked{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: var(--Primary-Standard-Green);
}


.radio-button-unchecked{
    width: 16.667px;
    height: 16.667px;
    fill: var(--Neutral-Dark-gray);
}


.projectWizardCard {
    border-radius: 4px;
    border: 1px solid var(--Primary-Highlight-Green);
    background: var(--Neutral-White);
    display: flex;
    width: 720px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    margin: 4px auto;}


.project-wizard {
    padding: 40px 0px;
}


.text-input {
    display: flex;
    width: 688px;
    height: 50px;
    padding: 14px;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--Neutral-Soft-gray);
    background: var(--Neutral-White);
}


.text-label .bold {
    font-weight: bold !important;
}


.text-label {
    color: var(--Neutral-Dark-gray);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Standard Input Label/Small */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 157.143% */}


.labeled-input {
    gap: 8px;
    cursor: pointer;
}


.checkbox {
    cursor: pointer;
}


.card-title {
    font-weight: bold;
}


.nav-buttons {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100vw;
    flex-direction: row;
    justify-content: right;
    align-items: flex-end;
    gap: 8px;
    flex: 1 0 0;
    border-top: 1px solid var(--Neutral-Soft-gray);
    background: var(--Neutral-White);
    padding: 16px;
}


.survey-rules-container {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--Primary-Light-Green, #E9F1F0);
    box-shadow: 6px 0 8px 0 rgba(0, 0, 0, 0.12);}


.survey-rules-card
{
    display: inline-flex;   
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--Neutral-White);
    box-shadow: 6px 0 8px 0 rgba(0, 0, 0, 0.12);
}


.survey-rules-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;}


.survey-search-rules {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: 16px;
}


.survey-rules-header p{
    color: var(--Neutral-Black, #000);

    /* Label/Top-level */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px; /* 100% */
    text-transform: uppercase;}


.search-input {
    display: flex;
    width: 300px;
    height: 42px;
    padding: 10px 213px 10px 16px;
    align-items: center;
}


.new-rule-card {
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
    border: 1px solid var(--Primary-Highlight-Green, #A0CAC6);
    background: var(--Neutral-White, #FFF);
}


.new-rule-button {
    display: flex;
    height: 44px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--Primary-Standard-Green);
    gap: 1rem;
    padding: 1rem;

    color: var(--Neutral-White, #FFF);

    /* Buttons/Light */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 114.286% */
    text-transform: capitalize;
}


.new-rule-input {
    display: flex;
    flex-direction: column;
    padding: 14px;
    width: 50%;
}


.search-bar {
    display: flex;
    height: 42px;
    padding: 10px;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--Neutral-Soft-gray, #E1E1E1);
    background: var(--Neutral-Light-gray, #F6F6F6);

}


.search-bar input {
    background: inherit;
    border: none;
}


.rule-card {
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    border-radius: 4px;
    border: 1px solid var(--Primary-Highlight-Green, #A0CAC6);
    background: var(--Neutral-White, #FFF);
    gap: 12px;
}


.rule-filters {
    display: flex;
    gap: 16px;
    flex: 1 0 0;
    margin-top: 1rem;
}


.filter-text {
    color: var(--Neutral-Dark-gray, #4A4A4A);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Label/xs */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;}


.filter-header {
    color: var(--Neutral-Black, #000);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Label/xs */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 100% */}


.select-bar {
    display: flex;
    height: 50px;
    padding: 14px;
    justify-content: center;
    align-items: flex-start;
    gap: 213px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--Neutral-Soft-gray, #E1E1E1);
    background: var(--Neutral-White, #FFF);
}


.rule-input {
    display: flex;
    height: 50px;
    padding: 14px;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--Neutral-Soft-gray, #E1E1E1);
    background: var(--Neutral-White, #FFF);}


.question-card {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-bottom: 1px solid var(--Neutral-Soft-gray, #E1E1E1);
}


.question-preview-container {
    display: flex;
    width: 50%;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    background: var(--Neutral-White, #FFF);
}


.project-wizard.overview-step {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    height: 100%;
}


.text-input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--Neutral-Soft-gray);
    margin-top: 4px;
    margin-bottom: 12px;
    box-sizing: border-box;
}


.labeled-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
}


.coord-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.coord-input {
    width: 160px !important;
    height: 36px !important;
    font-size: 13px !important;
    text-align: center;
}


.text-label-sm {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
}


.map-title-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 12px;
    font-weight: bold;
    font-size: 12px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


.question-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    width: 100%;
    border-top: 1px solid #e2e8f0;
}


.footer-actions-center {
    display: flex;
    gap: 25px;
    align-items: center;
}


.btn-outline-teal {
    background: white;
    border: 1px solid #2d6f74;
    color: #2d6f74;
    padding: 6px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}


.btn-text-action {
    background: none;
    border: none;
    color: #2d6f74;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}


.btn-delete-card {
    background: white;
    border: 1px solid #f61313;
    color: #f61313;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}