/* ------------------------------------------------------------------
   UI3 form controls - the single place every field is styled from.

   The login dialog, the account pages (register / profile / password)
   and the panel forms (business wizard, new business) all used to
   carry their own copy of these declarations, so they drifted apart.
   They are defined once here and the other UI3 stylesheets only add
   what is genuinely specific to them (the login icon padding, the
   captcha box sizes, the legacy id-scoped re-assertions).

   Change a field's height, radius or colour in the tokens below and
   every form in the app follows.

   Loaded from _Layout_UI3.cshtml after the tenant stylesheets, so the
   !important on border/border-radius still beats newDesign.css's
   `input[type=text] { border: ... !important }`.
   ------------------------------------------------------------------ */

:root {
    /* field box */
    --field-height: 46px;
    --field-radius: 10px;
    --field-padding-x: 14px;
    --field-font-size: 15px;
    /* field colours - all resolved from palette.css */
    --field-bg: var(--surface-alt, #F1F5F9);
    --field-bg-focus: var(--surface, #FFFFFF);
    --field-bg-disabled: #EEF2F7;
    --field-border: var(--border, #E5E7EB);
    --field-border-focus: var(--primary, #C1122F);
    --field-ring: 0 0 0 3px rgba(193, 18, 47, .12);
    --field-text: var(--text, #374151);
    --field-placeholder: var(--text-muted, #9CA3AF);
    /* label */
    --label-font-size: 14px;
    --label-weight: 600;
    --label-gap: 7px;
    /* multi-line */
    --textarea-min-height: 110px;
    /* captcha row: [answer box] [400x96 image] [refresh]. The image and
       the button are fixed, so this caps how far the answer box may
       stretch on a wide card. */
    --captcha-max-width: 520px;
}

/* ===================== text inputs / selects ====================== */
/*  Contexts: .ac-page = account + panel pages, .we-page = panel form
    skin, #login = the login dialog rendered by the layout.           */
.ac-page input[type="text"],
.ac-page input[type="password"],
.ac-page input[type="email"],
.ac-page input[type="tel"],
.ac-page input[type="number"],
.ac-page input[type="search"],
.ac-page select,
.ac-page textarea,
.ac-page .form-control,
.we-page input[type="text"],
.we-page input[type="password"],
.we-page input[type="email"],
.we-page input[type="tel"],
.we-page input[type="number"],
.we-page select,
.we-page textarea,
.we-page .form-control,
#login #loginContent .lg-input input[type="text"],
#login #loginContent .lg-input input[type="password"],
#login #loginContent .lg-input input[type="email"] {
    display: block;
    width: 100%;
    height: var(--field-height);
    margin: 0;
    padding: 0 var(--field-padding-x);
    background: var(--field-bg);
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius) !important;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--field-font-size);
    line-height: var(--field-height);
    color: var(--field-text);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

    .ac-page input:focus,
    .ac-page select:focus,
    .ac-page textarea:focus,
    .ac-page .form-control:focus,
    .we-page input:focus,
    .we-page select:focus,
    .we-page textarea:focus,
    .we-page .form-control:focus,
    #login #loginContent .lg-input input:focus {
        outline: 0;
        background: var(--field-bg-focus);
        border-color: var(--field-border-focus) !important;
        box-shadow: var(--field-ring);
    }

    .ac-page input::placeholder,
    .ac-page textarea::placeholder,
    .ac-page .form-control::placeholder,
    .we-page input::placeholder,
    .we-page textarea::placeholder,
    .we-page .form-control::placeholder,
    #login #loginContent .lg-input input::placeholder {
        color: var(--field-placeholder);
    }

    .ac-page input[disabled],
    .ac-page select[disabled],
    .ac-page textarea[disabled],
    .ac-page input[readonly],
    .we-page input[disabled],
    .we-page select[disabled],
    .we-page textarea[disabled],
    .we-page input[readonly] {
        background: var(--field-bg-disabled);
        color: var(--text-secondary, #6B7280);
        cursor: not-allowed;
    }

/* ---------------------------- textarea --------------------------- */
.ac-page textarea,
.ac-page textarea.form-control,
.we-page textarea,
.we-page textarea.form-control {
    height: auto;
    min-height: var(--textarea-min-height);
    padding: 12px var(--field-padding-x);
    line-height: 1.9;
    resize: vertical;
}

/* ------------------------------ file ----------------------------- */
.ac-page input[type="file"],
.ac-page input[type="file"].form-control,
.we-page input[type="file"],
.we-page input[type="file"].form-control {
    height: auto;
    min-height: var(--field-height);
    padding: 9px var(--field-padding-x);
    line-height: 1.7;
    cursor: pointer;
}

/* ----------------------------- select ---------------------------- */
/* smeNewPages.css ships `select { height:auto; width:auto; padding:initial }` */
.ac-page select.form-control,
.we-page select.form-control {
    width: 100%;
    height: var(--field-height) !important;
    padding: 0 12px !important;
}

/* ------------------------ checkbox / radio ----------------------- */
.ac-page input[type="checkbox"],
.ac-page input[type="radio"],
.we-page input[type="checkbox"],
.we-page input[type="radio"] {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    accent-color: var(--primary, #C1122F);
    cursor: pointer;
}

/* ----------------------------- labels ---------------------------- */
.ac-label,
.ac-page .ac-field > label,
.ac-page .form-group > label,
.we-page .ac-field > label,
#login .lg-label {
    display: block;
    margin: 0 0 var(--label-gap);
    font-size: var(--label-font-size);
    line-height: 1.8;
    font-weight: var(--label-weight);
    color: var(--field-text);
}

/* required marker */
.ac-req {
    color: var(--error, #DC2626);
    margin-left: 3px;
    font-weight: 700;
}

/* latin-only values keep their own direction */
.ac-page .ltrField,
.we-page .ltrField {
    direction: ltr;
    text-align: left;
}

/* --------------------------- date fields ------------------------- */
/*  Wrap a text input in .ui3-datefield before handing it to
    AMIB.persianCalendar (Scripts/js-persian-cal.min.js). The plugin
    injects its own <a class="pcalBtn"> as the input's next sibling, so
    without a wrapper the button lands in whatever layout the field sits
    in - in a flex column it becomes a row of its own and pushes the
    field out of alignment with the rest of the form.

    The wrapper pins the button inside the input instead, and the input
    reserves room for it. Everything else about the field - height,
    border, focus ring - still comes from the rules above.            */
.ui3-datefield {
    position: relative;
    display: block;
}

    /*  the button is pinned to the right edge below, so the room has to
        be reserved on that same side - these fields carry .ltrField and
        print their digits left-aligned, which would otherwise run under
        the icon on a full 8-digit value.                             */
    .ac-page .ui3-datefield input[type="text"],
    .we-page .ui3-datefield input[type="text"] {
        padding-right: 34px;
    }

    /*  parsley پیام خطا را به شکل <ul> کنار خود input می‌گذارد، یعنی داخل
        همین wrapper. با آمدن خطا wrapper بلندتر می‌شود و top:50% دکمه را
        وسط «input + پیام خطا» می‌برد، نه وسط input. پس به جای نصفِ wrapper،
        نصف ارتفاع خود فیلد ملاک است تا دکمه سر جایش بماند. */
    .ui3-datefield a.pcalBtn {
        position: absolute;
        top: calc(var(--field-height, 46px) / 2);
        right: 10px;
        margin: 0;
        transform: translateY(-50%);
        opacity: .75;
    }

        .ui3-datefield a.pcalBtn:hover {
            opacity: 1;
            box-shadow: none;
        }

    /*  the plugin marks an unparsable value with .invalid; keep that
        signal but in the palette's colours, not its own pink.        */
    .ac-page .ui3-datefield input.invalid,
    .we-page .ui3-datefield input.invalid {
        border-color: var(--error, #DC2626) !important;
        background: rgba(220, 38, 38, .05);
    }

/* inline tooltip hint images next to some labels */
.ac-page img.imgInfo,
.we-page img.imgInfo,
.ac-page img.imgFileInfo,
.we-page img.imgFileInfo {
    width: 15px;
    height: auto;
    margin-right: 4px;
    vertical-align: -2px;
    cursor: help;
}

/* --------------------------- date picker ------------------------- */
/* EditorTemplates/CulturalDateTime.cshtml emits three selects with bare
   "/" text nodes between them. font-size:0 collapses those separators
   (they cannot be targeted by a selector) while the selects reset it. */
.ac-page .date-picker,
.we-page .date-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0;
}

    .ac-page .date-picker select,
    .we-page .date-picker select {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 8px !important;
        font-size: var(--field-font-size);
    }

/* ------------------------- parsley states ------------------------ */
.ac-page .parsley-errors-list,
.we-page .parsley-errors-list,
#login .parsley-errors-list {
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.85;
}

    .ac-page .parsley-errors-list li,
    .we-page .parsley-errors-list li,
    #login .parsley-errors-list li {
        color: var(--error, #DC2626);
        list-style: none;
    }

.ac-page input.parsley-error,
.ac-page select.parsley-error,
.ac-page textarea.parsley-error,
.ac-page .form-control.parsley-error,
.we-page input.parsley-error,
.we-page select.parsley-error,
.we-page textarea.parsley-error,
.we-page .form-control.parsley-error,
#login #loginContent .lg-input input.parsley-error {
    background: rgba(220, 38, 38, .05);
    border-color: var(--error, #DC2626) !important;
    color: var(--field-text);
}

.ac-page input.parsley-success,
.ac-page select.parsley-success,
.ac-page .form-control.parsley-success,
.we-page input.parsley-success,
.we-page select.parsley-success,
.we-page .form-control.parsley-success,
#login #loginContent .lg-input input.parsley-success {
    background: var(--field-bg);
    border-color: var(--field-border) !important;
    color: var(--field-text);
}