/* common/css/forms.css - Underground Theme + Modern Enhancements */



/* === UNDERGROUND THEME FORM VARIABLES === */

:root {

    /* Form-specific spacing - Mobile optimized */

    --form_spacing: var(--gap_md);

    --form_group_spacing: var(--gap_lg);

    --label_spacing: var(--gap_xs);

    

    /* Form sizing - Better touch targets */

    --input_height_sm: 36px;

    --input_height_md: 44px;

    --input_height_lg: 52px;

    

    /* Form colors - Underground theme */

    --input_bg: rgba(255, 255, 255, 1);

    --input_border: rgba(226, 232, 240, 1);

    --input_text: rgba(15, 23, 42, 1);

    --input_placeholder: rgba(100, 116, 139, 0.7);

    --input_focus_border: rgba(168, 85, 247, 1); /* Punk purple */

    --input_focus_shadow: rgba(168, 85, 247, 0.2);

    --input_disabled_bg: rgba(241, 245, 249, 1);

    --input_disabled_text: rgba(100, 116, 139, 1);

    --input_error_border: rgba(239, 68, 68, 1); /* Rebellious red */

    --input_error_text: rgba(239, 68, 68, 1);

    --input_success_border: rgba(34, 197, 94, 1); /* Electric green */

    --label_text: rgba(17, 24, 39, 1);

    --help_text: rgba(100, 116, 139, 1);

    --error_text: rgba(239, 68, 68, 1);

    --success_text: rgba(34, 197, 94, 1);

    

    /* Button variables */

    --btn_primary_bg: rgba(168, 85, 247, 1);

    --btn_primary_hover: rgba(147, 51, 234, 1);

    --btn_secondary_bg: rgba(14, 165, 233, 1);

    --btn_secondary_hover: rgba(2, 132, 199, 1);

    --btn_accent_bg: rgba(239, 68, 68, 1);

    --btn_accent_hover: rgba(220, 38, 38, 1);

    

    /* Typography */

    --text_xs: 0.75rem;

    --text_sm: 0.875rem;

    --text_base: 1rem;

    --text_lg: 1.125rem;

    

    /* Spacing */

    --gap_xs: 6px;

    --gap_sm: 10px;

    --gap_md: 15px;

    --gap_lg: 20px;

    --pad_xs: 4px;

    --pad_sm: 8px;

    --pad_md: 12px;

    --pad_lg: 15px;

    

    /* Border radius */

    --radius_sm: 6px;

    --radius_md: 10px;

    --radius_lg: 15px;

}



/* Dark mode form variables */

@media (prefers-color-scheme: dark) {

    :root {

        --input_bg: rgba(30, 41, 59, 1);

        --input_border: rgba(51, 65, 85, 1);

        --input_text: rgba(248, 250, 252, 1);

        --input_placeholder: rgba(160, 174, 192, 0.6);

        --input_disabled_bg: rgba(15, 23, 42, 1);

        --input_disabled_text: rgba(100, 116, 139, 0.8);

        --label_text: rgba(203, 213, 224, 1);

        --help_text: rgba(160, 174, 192, 0.8);

    }

}



/* Mobile-first responsive adjustments */

@media (max-width: 480px) {

    :root {

        --form_spacing: var(--gap_sm);

        --form_group_spacing: var(--gap_md);

    }

}



/* === FORM LAYOUT CONTAINERS === */

.form {

    display: flex;

    flex-direction: column;

    gap: var(--form_group_spacing);

    width: 100%;

}



.form_horizontal {

    display: grid;

    grid-template-columns: 1fr 2fr;

    gap: var(--form_group_spacing) var(--form_spacing);

    align-items: start;

}



.form_inline {

    display: flex;

    flex-wrap: wrap;

    gap: var(--form_spacing);

    align-items: flex-end;

}



.form_group {

    display: flex;

    flex-direction: column;

    gap: var(--label_spacing);

    width: 100%;

}



.form_row {

    display: flex;

    flex-wrap: wrap;

    gap: var(--form_spacing);

    width: 100%;

}



.form_row > .form_group {

    flex: 1 1 0;

    min-width: 200px;

}



/* === LABELS === */

.form_label {

    display: block;

    font-weight: 600;

    color: var(--label_text);

    margin-bottom: var(--label_spacing);

    font-size: var(--text_sm);

    line-height: 1.4;

}



.form_label.required::after {

    content: "*";

    color: var(--input_error_border);

    margin-left: 4px;

    font-weight: 700;

}



/* === HELP & ERROR TEXT === */

.form_text {

    margin-top: var(--label_spacing);

    font-size: var(--text_xs);

    color: var(--help_text);

    line-height: 1.4;

}



.form_error {

    margin-top: var(--label_spacing);

    font-size: var(--text_xs);

    color: var(--error_text);

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 4px;

}



.form_error::before {

    content: "?";

    font-size: var(--text_sm);

}



.form_success {

    margin-top: var(--label_spacing);

    font-size: var(--text_xs);

    color: var(--success_text);

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 4px;

}



.form_success::before {

    content: "?";

    font-size: var(--text_sm);

}



/* === BASIC INPUTS STYLING === */

.form_control {

    display: block;

    width: 100%;

    height: var(--input_height_md);

    padding: 0 var(--pad_md);

    color: var(--input_text);

    background-color: var(--input_bg);

    border: 2px solid var(--input_border);

    border-radius: var(--radius_md);

    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 

                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    font-size: var(--text_base);

    line-height: 1.5;

    min-height: 44px; /* iOS touch target minimum */

    touch-action: manipulation;

}



/* Input sizes */

.form_control_sm {

    height: var(--input_height_sm);

    padding: 0 var(--pad_sm);

    font-size: var(--text_sm);

    border-radius: var(--radius_sm);

    min-height: 36px;

}



.form_control_lg {

    height: var(--input_height_lg);

    padding: 0 var(--pad_lg);

    font-size: var(--text_lg);

    min-height: 52px;

}



/* Text areas */

textarea.form_control {

    height: auto;

    min-height: 100px;

    padding: var(--pad_sm) var(--pad_md);

    resize: vertical;

    line-height: 1.6;

}



/* Select styling with modern dropdown arrow */

select.form_control {

    padding-right: 2.5em;

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right var(--pad_sm) center;

    background-size: 16px;

    cursor: pointer;

}



/* Multiple select */

select[multiple].form_control {

    height: auto;

    min-height: 120px;

    padding: var(--pad_sm);

    background-image: none;

}



/* Placeholder styling */

.form_control::placeholder {

    color: var(--input_placeholder);

    opacity: 1;

    font-style: italic;

}



/* Focus states with underground theme */

.form_control:focus {

    outline: none;

    border-color: var(--input_focus_border);

    box-shadow: 0 0 0 3px var(--input_focus_shadow);

    transform: translateY(-1px);

}



/* Disabled state */

.form_control:disabled,

.form_control[readonly] {

    background-color: var(--input_disabled_bg);

    color: var(--input_disabled_text);

    cursor: not-allowed;

    opacity: 0.8;

    border-style: dashed;

}



/* Validation states */

.form_control.is_invalid {

    border-color: var(--input_error_border);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right var(--pad_md) center;

    padding-right: 2.5em;

}



.form_control.is_invalid:focus {

    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);

}



.form_control.is_valid {

    border-color: var(--input_success_border);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20,6 9,17 4,12'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right var(--pad_md) center;

    padding-right: 2.5em;

}



.form_control.is_valid:focus {

    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);

}



/* === CHECKBOXES AND RADIO BUTTONS === */

.form_check {

    display: flex;

    align-items: center;

    gap: var(--pad_sm);

    margin-bottom: var(--label_spacing);

    cursor: pointer;

    min-height: 44px; /* Touch target */

    padding: var(--pad_xs) 0;

}



.form_check_input {

    width: 20px;

    height: 20px;

    margin: 0;

    cursor: pointer;

    accent-color: var(--btn_primary_bg);

}



.form_check_input[type="checkbox"] {

    border-radius: 4px;

}



.form_check_input[type="radio"] {

    border-radius: 50%;

}



.form_check_label {

    display: inline-block;

    cursor: pointer;

    font-size: var(--text_sm);

    font-weight: 500;

    color: var(--label_text);

    line-height: 1.4;

    user-select: none;

}



/* Custom styled checkbox and radio */

.custom_checkbox,

.custom_radio {

    position: relative;

    display: flex;

    align-items: center;

    gap: var(--pad_sm);

    margin-bottom: var(--label_spacing);

    cursor: pointer;

    min-height: 44px;

    padding: var(--pad_xs) 0;

}



.custom_checkbox input,

.custom_radio input {

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

}



.checkmark {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    background-color: var(--input_bg);

    border: 2px solid var(--input_border);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    flex-shrink: 0;

}



.custom_checkbox .checkmark {

    border-radius: 6px;

}



.custom_radio .checkmark {

    border-radius: 50%;

}



.custom_checkbox input:checked ~ .checkmark,

.custom_radio input:checked ~ .checkmark {

    background-color: var(--btn_primary_bg);

    border-color: var(--btn_primary_bg);

    transform: scale(1.1);

}



.custom_checkbox input:focus ~ .checkmark,

.custom_radio input:focus ~ .checkmark {

    box-shadow: 0 0 0 3px var(--input_focus_shadow);

}



.custom_checkbox .checkmark:after {

    content: "";

    display: none;

    width: 6px;

    height: 10px;

    border: solid white;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

}



.custom_radio .checkmark:after {

    content: "";

    display: none;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: white;

}



.custom_checkbox input:checked ~ .checkmark:after,

.custom_radio input:checked ~ .checkmark:after {

    display: block;

}



/* === RANGE SLIDERS === */

.form_range {

    width: 100%;

    height: 8px;

    padding: 0;

    background-color: transparent;

    appearance: none;

    cursor: pointer;

    margin: var(--pad_sm) 0;

}



.form_range::-webkit-slider-thumb {

    appearance: none;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background-color: var(--btn_primary_bg);

    border: 0;

    cursor: pointer;

    margin-top: -6px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.form_range::-webkit-slider-thumb:hover {

    transform: scale(1.2);

}



.form_range::-moz-range-thumb {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background-color: var(--btn_primary_bg);

    border: 0;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



.form_range::-webkit-slider-runnable-track {

    width: 100%;

    height: 8px;

    background: linear-gradient(90deg, var(--btn_primary_bg) 0%, var(--input_border) 0%);

    border-radius: 4px;

}



.form_range::-moz-range-track {

    width: 100%;

    height: 8px;

    background-color: var(--input_border);

    border-radius: 4px;

}



/* === FILE INPUTS === */

.form_file {

    position: relative;

    display: inline-block;

    width: 100%;

}



.form_file_input {

    position: relative;

    z-index: 2;

    width: 100%;

    height: var(--input_height_md);

    margin: 0;

    opacity: 0;

    cursor: pointer;

}



.form_file_label {

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    z-index: 1;

    display: flex;

    align-items: center;

    height: var(--input_height_md);

    padding: 0 var(--pad_md);

    color: var(--input_text);

    background-color: var(--input_bg);

    border: 2px solid var(--input_border);

    border-radius: var(--radius_md);

    overflow: hidden;

    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.form_file_label:hover {

    border-color: var(--input_focus_border);

}



.form_file_text {

    flex-grow: 1;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

    font-size: var(--text_sm);

    color: var(--input_placeholder);

}



.form_file_button {

    display: inline-block;

    padding: var(--pad_xs) var(--pad_md);

    margin-left: var(--pad_sm);

    color: white;

    background-color: var(--btn_primary_bg);

    border-radius: var(--radius_sm);

    font-size: var(--text_sm);

    font-weight: 600;

    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.form_file_button:hover {

    background-color: var(--btn_primary_hover);

}



/* === INPUT GROUPS === */

.input_group {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

    width: 100%;

}



.input_group > .form_control {

    position: relative;

    flex: 1 1 auto;

    width: 1%;

    min-width: 0;

}



.input_group_text {

    display: flex;

    align-items: center;

    padding: 0 var(--pad_md);

    background-color: rgba(241, 245, 249, 1);

    border: 2px solid var(--input_border);

    color: var(--label_text);

    white-space: nowrap;

    font-weight: 600;

    font-size: var(--text_sm);

    min-height: var(--input_height_md);

}



.input_group > .input_group_text:first-child {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

    border-right: 0;

}



.input_group > .form_control:not(:first-child) {

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

}



.input_group > .input_group_text:last-child {

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

    border-left: 0;

}



.input_group > .form_control:not(:last-child) {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

    border-right: 0;

}



/* === FLOATING LABELS === */

.form_floating {

    position: relative;

}



.form_floating > .form_control {

    height: var(--input_height_lg);

    padding: var(--pad_lg) var(--pad_md) var(--pad_sm);

}



.form_floating > label {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    padding: var(--pad_sm) var(--pad_md);

    pointer-events: none;

    border: 2px solid transparent;

    transform-origin: 0 0;

    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), 

                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    color: var(--input_placeholder);

    font-size: var(--text_base);

    line-height: 1.25;

}



.form_floating > .form_control:focus,

.form_floating > .form_control:not(:placeholder-shown) {

    padding-top: var(--pad_lg);

    padding-bottom: var(--pad_sm);

}



.form_floating > .form_control:focus ~ label,

.form_floating > .form_control:not(:placeholder-shown) ~ label {

    transform: scale(0.8) translateY(-0.5rem);

    opacity: 0.8;

    color: var(--btn_primary_bg);

    font-weight: 600;

}



/* === TOGGLE SWITCHES === */

.form_switch {

    display: inline-flex;

    align-items: center;

    gap: var(--pad_sm);

    cursor: pointer;

    min-height: 44px;

    padding: var(--pad_xs) 0;

}



.switch {

    position: relative;

    display: inline-block;

    width: 50px;

    height: 28px;

    flex-shrink: 0;

}



.switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.switch_slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: var(--input_border);

    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    border-radius: 34px;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

}



.switch_slider:before {

    position: absolute;

    content: "";

    height: 22px;

    width: 22px;

    left: 3px;

    bottom: 3px;

    background-color: white;

    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    border-radius: 50%;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



.switch input:checked + .switch_slider {

    background-color: var(--btn_primary_bg);

}



.switch input:checked + .switch_slider:before {

    transform: translateX(22px);

}



.switch input:focus + .switch_slider {

    box-shadow: 0 0 0 3px var(--input_focus_shadow);

}



/* === FORM ACTIONS SECTION === */

.form_actions {

    display: flex;

    gap: var(--pad_md);

    margin-top: var(--form_group_spacing);

    padding-top: var(--pad_md);

    border-top: 1px solid var(--input_border);

    flex-wrap: wrap;

}



.form_actions_end {

    justify-content: flex-end;

}



.form_actions_between {

    justify-content: space-between;

}



.form_actions_center {

    justify-content: center;

}



/* === BUTTONS === */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: var(--input_height_md);

    padding: 0 var(--pad_lg);

    font-weight: 600;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    cursor: pointer;

    user-select: none;

    border: 2px solid transparent;

    border-radius: var(--radius_md);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    font-size: var(--text_base);

    text-decoration: none;

    min-height: 44px;

    touch-action: manipulation;

}



.btn_sm {

    height: var(--input_height_sm);

    padding: 0 var(--pad_md);

    font-size: var(--text_sm);

    border-radius: var(--radius_sm);

    min-height: 36px;

}



.btn_lg {

    height: var(--input_height_lg);

    padding: 0 calc(var(--pad_lg) * 1.5);

    font-size: var(--text_lg);

    min-height: 52px;

}



.btn_primary {

    color: white;

    background-color: var(--btn_primary_bg);

    border-color: var(--btn_primary_bg);

}



.btn_primary:hover {

    background-color: var(--btn_primary_hover);

    border-color: var(--btn_primary_hover);

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(168, 85, 247, 0.3);

}



.btn_secondary {

    color: white;

    background-color: var(--btn_secondary_bg);

    border-color: var(--btn_secondary_bg);

}



.btn_secondary:hover {

    background-color: var(--btn_secondary_hover);

    border-color: var(--btn_secondary_hover);

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3);

}



.btn_accent {

    color: white;

    background-color: var(--btn_accent_bg);

    border-color: var(--btn_accent_bg);

}



.btn_accent:hover {

    background-color: var(--btn_accent_hover);

    border-color: var(--btn_accent_hover);

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);

}



.btn_outline {

    color: var(--btn_primary_bg);

    background-color: transparent;

    border-color: var(--btn_primary_bg);

}



.btn_outline:hover {

    color: white;

    background-color: var(--btn_primary_bg);

    transform: translateY(-1px);

}



.btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none !important;

    box-shadow: none !important;

}



.btn:focus {

    outline: none;

    box-shadow: 0 0 0 3px var(--input_focus_shadow);

}



/* === RESPONSIVE ADJUSTMENTS === */

@media (max-width: 768px) {

    .form_horizontal {

        display: flex;

        flex-direction: column;

        gap: var(--form_spacing);

    }

    

    .form_row {

        flex-direction: column;

    }

    

    .form_row > .form_group {

        width: 100%;

        min-width: auto;

    }

    

    .form_actions {

        flex-direction: column;

    }

    

    .form_actions .btn {

        width: 100%;

    }

    

    .input_group {

        flex-direction: column;

    }

    

    .input_group > .input_group_text,

    .input_group > .form_control {

        border-radius: var(--radius_md) !important;

        border: 2px solid var(--input_border) !important;

    }

}



@media (max-width: 480px) {

    .form_control,

    .btn {

        font-size: var(--text_base);

    }

    

    .form_control_sm,

    .btn_sm {

        font-size: var(--text_sm);

    }

    

    .form_control_lg,

    .btn_lg {

        font-size: var(--text_lg);

    }

}



/* === DARK MODE SUPPORT === */

@media (prefers-color-scheme: dark) {

    .input_group_text {

        background-color: rgba(30, 41, 59, 1);

        border-color: var(--input_border);

        color: var(--label_text);

    }

    

    .form_file_label {

        background-color: var(--input_bg);

        border-color: var(--input_border);

        color: var(--input_text);

    }

    

    .form_file_text {

        color: var(--input_placeholder);

    }

    

    .checkmark {

        background-color: var(--input_bg);

        border-color: var(--input_border);

    }

}