/* ============================================================
   Y2SQUARE CMS
   DYNAMIC CONTROLS

   Global visual styling for form controls.
   Layout rules are opt-in via .dynamic-form so legacy pages
   with complex control groups are not broken.
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */


/* ============================================================
   GLOBAL LABEL VISUALS
   No width / grid / positioning here.
   ============================================================ */

label,
label.leading_Label,
span.leading_Label {
    color: var(--dc-text);

    background: transparent;
    background-image: none;

    border: 0;
    outline: 0;

    box-shadow: none;
    text-shadow: none;

    font-weight: 500;

    line-height: 1.4;
}


/* ============================================================
   GLOBAL TEXT-LIKE CONTROLS

   Important:
   No width:100%, no float, no grid placement globally.
   Those belong to layout containers, not visual styling.
   ============================================================ */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
select,
textarea,
.form-control {
    box-sizing: border-box;

    min-height: 48px;
    height: 52px;

    color: var(--dc-text);

    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, .055),
                    rgba(70, 120, 190, .025)
            ),
            var(--dc-bg);

    border: 1px solid var(--dc-border);
    border-radius: 11px;

    outline: none;

    font-family: inherit;
    font-weight: 400;

    line-height: 1.4;

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .035);

    transition:
            border-color .2s ease,
            background .2s ease,
            box-shadow .2s ease;
}


/* Inputs / textareas can safely use internal padding */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
textarea {
    padding: 11px 14px;
}



/* Select padding stays compact so small date selects remain usable */

select {
    padding: 8px 10px;
    cursor: pointer;
}


/* ============================================================
   HOVER
   ============================================================ */

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input[type="search"]:hover,
select:hover,
textarea:hover {
    border-color: var(--dc-border-hover);
}


/* ============================================================
   FOCUS
   ============================================================ */

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus{
    color: var(--dc-focus-text);

    background:
            linear-gradient(
                    145deg,
                    rgba(83, 145, 235, .10),
                    rgba(255, 255, 255, .04)
            ),
            var(--dc-bg-focus);

    border-color: var(--dc-border-focus);

    box-shadow:
            0 0 0 3px rgba(80, 145, 240, .10),
            0 8px 25px rgba(20, 70, 140, .08);
}


/* ============================================================
   TEXTAREA
   ============================================================ */

textarea {
    min-height: 110px;
    resize: vertical;
}


/* ============================================================
   PLACEHOLDERS
   ============================================================ */

input::placeholder,
textarea::placeholder {
    color: #717d8b;
    opacity: 1;
}


/* ============================================================
   CHECKBOX / RADIO
   Includes ASP.NET / Bootstrap form-check markup.
   ============================================================ */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;

    width: 22px;
    height: 22px;
    min-width: 22px;

    margin: 0;

    vertical-align: middle;

    cursor: pointer;
}


/* ASP.NET CheckBox commonly renders:
   .complete_checkbox > .form-check > input.form-check-input + label
*/

.complete_checkbox {
    display: inline-flex;
    align-items: center;
}

.complete_checkbox .form-check {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-height: 32px;

    margin: 0;
    padding: 0;
}

.complete_checkbox .form-check-input {
    position: relative;

    flex: 0 0 22px;

    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;

    margin: 0 !important;

    float: none !important;

    -webkit-appearance: none;
    appearance: none;

    background-color: #171b22 !important;
    background-image: none !important;

    border: 1px solid rgba(135, 175, 230, .42) !important;
    border-radius: 6px !important;

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .05),
            0 0 0 1px rgba(0, 0, 0, .08);

    opacity: 1 !important;

    cursor: pointer;

    transition:
            background-color .18s ease,
            border-color .18s ease,
            box-shadow .18s ease;
}

.complete_checkbox .form-check-input:hover {
    border-color: rgba(125, 180, 255, .70) !important;
}

.complete_checkbox .form-check-input:focus {
    outline: none !important;

    border-color: rgba(108, 168, 255, .78) !important;

    box-shadow:
            0 0 0 3px rgba(80, 145, 240, .12) !important;
}

.complete_checkbox .form-check-input:checked {
    background-color: #6698e2 !important;
    border-color: #7eb0f4 !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M3 8.5 6.4 12 13 4.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}

.complete_checkbox .form-check-input:disabled {
    opacity: .72 !important;
    cursor: default;
}

.complete_checkbox .form-check-input:disabled:not(:checked) {
    background-color: rgba(255, 255, 255, .035) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}

.complete_checkbox .form-check-input:disabled:checked {
    background-color: #547fbf !important;
    border-color: rgba(126, 176, 244, .60) !important;
}

.complete_checkbox .form-check-label {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    color: #aeb9c7;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-weight: 500;
    line-height: 1.35;
}


/* Standalone radios keep native rendering but use the CMS accent. */

input[type="radio"] {
    accent-color: #6698e2;
}


/* ============================================================
   FILE UPLOAD
   ============================================================ */

input[type="file"] {
    box-sizing: border-box;

    max-width: 100%;

    padding: 8px;

    color: #b9c3cf;

    background: var(--dc-bg);

    border: 1px solid var(--dc-border);
    border-radius: 11px;

    font-family: inherit;

}


input[type="file"]::file-selector-button {
    margin-right: 12px;

    padding: 9px 15px;

    color: #dcecff;

    background:
            linear-gradient(
                    145deg,
                    rgba(87, 150, 242, .22),
                    rgba(54, 104, 181, .16)
            );

    border: 1px solid rgba(125, 183, 255, .30);
    border-radius: 8px;

    font-family: inherit;

    cursor: pointer;

    transition:
            background .2s ease,
            border-color .2s ease;
}


input[type="file"]::file-selector-button:hover {
    background:
            linear-gradient(
                    145deg,
                    rgba(99, 165, 255, .32),
                    rgba(55, 112, 200, .22)
            );

    border-color: rgba(130, 190, 255, .52);
}


/* ============================================================
   BROWSER AUTOFILL
   Safari / Chrome / Edge
   ============================================================ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--dc-text) !important;
    caret-color: var(--dc-text);

    -webkit-box-shadow:
            0 0 0 1000px var(--dc-bg) inset !important;

    box-shadow:
            0 0 0 1000px var(--dc-bg) inset !important;

    border-color: rgba(108, 168, 255, .45) !important;

    transition: background-color 9999s ease-out 0s;
}


/* ============================================================
   DISABLED
   ============================================================ */

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
input[type="search"]:disabled,
textarea:disabled,
select:disabled {
    color: #77818d;

    background: rgba(255, 255, 255, .02);

    border-color: rgba(255, 255, 255, .05);

    cursor: not-allowed;

    opacity: .65;
}


/* ============================================================
   OPT-IN DYNAMIC FORM LAYOUT

   Use:
   <div class="dynamic-form"> ... generated controls ... </div>

   Layout:
   LABEL | helper / >> | CONTROL
   ============================================================ */

.dynamic-form .TB_GROUP,
.dynamic-form .leading_Label_GROUP {
    display: grid !important;

    align-items: center;

    column-gap: 8px;

    box-sizing: border-box;

    margin: 0 !important;
    padding: 5px 0 !important;
}


/* Labels: fixed first column */

.dynamic-form .TB_GROUP > label,
.dynamic-form .TB_GROUP > label.leading_Label,
.dynamic-form .TB_GROUP > span.leading_Label,
.dynamic-form .leading_Label_GROUP > label,
.dynamic-form .leading_Label_GROUP > label.leading_Label,
.dynamic-form .leading_Label_GROUP > span.leading_Label {
    grid-column: 1;

    display: block !important;

    box-sizing: border-box;

    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    color: var(--dc-text) !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-weight: 500 !important;

    line-height: 1.35 !important;

    letter-spacing: .02em;

    text-align: left !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Helper / speech / >> controls use second column.
   No visual redesign here. */

.dynamic-form .TB_GROUP > input[type="button"],
.dynamic-form .TB_GROUP > button,
.dynamic-form .leading_Label_GROUP > input[type="button"],
.dynamic-form .leading_Label_GROUP > button {
    grid-column: 2;

    margin: 0 !important;
    float: none !important;
}


/* Main controls use third column and full available width */

.dynamic-form .TB_GROUP > input[type="text"],
.dynamic-form .TB_GROUP > input[type="password"],
.dynamic-form .TB_GROUP > input[type="email"],
.dynamic-form .TB_GROUP > input[type="number"],
.dynamic-form .TB_GROUP > input[type="tel"],
.dynamic-form .TB_GROUP > input[type="url"],
.dynamic-form .TB_GROUP > input[type="date"],
.dynamic-form .TB_GROUP > input[type="time"],
.dynamic-form .TB_GROUP > input[type="datetime-local"],
.dynamic-form .TB_GROUP > input[type="search"],
.dynamic-form .TB_GROUP > select,
.dynamic-form .TB_GROUP > textarea,
.dynamic-form .leading_Label_GROUP > input[type="text"],
.dynamic-form .leading_Label_GROUP > input[type="password"],
.dynamic-form .leading_Label_GROUP > input[type="email"],
.dynamic-form .leading_Label_GROUP > input[type="number"],
.dynamic-form .leading_Label_GROUP > input[type="tel"],
.dynamic-form .leading_Label_GROUP > input[type="url"],
.dynamic-form .leading_Label_GROUP > input[type="date"],
.dynamic-form .leading_Label_GROUP > input[type="time"],
.dynamic-form .leading_Label_GROUP > input[type="datetime-local"],
.dynamic-form .leading_Label_GROUP > input[type="search"],
.dynamic-form .leading_Label_GROUP > select,
.dynamic-form .leading_Label_GROUP > textarea {
    grid-column: 3;

    box-sizing: border-box;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    float: none !important;
}


.dynamic-form .complete_checkbox {
    grid-column: 3;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    float: none !important;
}

.dynamic-form .ImageRow {
    grid-column: 3;

    width: auto !important;
    height: auto !important;

    margin: 10px 0 !important;

    float: none !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    /* Prevent iOS zoom on text controls */

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }


    .dynamic-form .TB_GROUP,
    .dynamic-form .leading_Label_GROUP {
        grid-template-columns:
            125px 34px minmax(0, 1fr);

        column-gap: 6px;

        padding: 6px 0 !important;
    }


    .dynamic-form .TB_GROUP > label,
    .dynamic-form .TB_GROUP > label.leading_Label,
    .dynamic-form .TB_GROUP > span.leading_Label,
    .dynamic-form .leading_Label_GROUP > label,
    .dynamic-form .leading_Label_GROUP > label.leading_Label,
    .dynamic-form .leading_Label_GROUP > span.leading_Label {
        width: 125px !important;
        min-width: 125px !important;
        max-width: 125px !important;

        font-size: 12px !important;

        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .dynamic-form .TB_GROUP,
    .dynamic-form .leading_Label_GROUP {
        grid-template-columns:
            100px 32px minmax(0, 1fr);

        column-gap: 5px;
    }


    .dynamic-form .TB_GROUP > label,
    .dynamic-form .TB_GROUP > label.leading_Label,
    .dynamic-form .TB_GROUP > span.leading_Label,
    .dynamic-form .leading_Label_GROUP > label,
    .dynamic-form .leading_Label_GROUP > label.leading_Label,
    .dynamic-form .leading_Label_GROUP > span.leading_Label {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;

        font-size: 11px !important;
    }
}

.form-control, .input-group-text, .dynamic-form, textarea, input, select {
    font-size: var(--dc-text-size) !important;
}