/* ============================================================
   aziInputs.css
   Form input fields, labels, icon variants, textarea.

   All colour values come from tokens in aziBase.css.
   ============================================================ */


/* ============================================================
   FIELD WRAPPER
   ============================================================ */

.input-field {
    width:         100%;
    margin-bottom: 10px;
}


/* ============================================================
   LABEL
   ============================================================ */

.input-label {
    display:       block;
    margin-bottom: 3px;
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--color-text-muted);
}


/* ============================================================
   INPUT WRAPPER  (positioning context for icons)
   ============================================================ */

.input-wrapper {
    position: relative;
    width:    100%;
    display:  block;
}


/* ============================================================
   BASE INPUT BOX
   ============================================================ */

.input-box {
    display:          block;
    width:            100%;
    height:           32px;
    padding:          5px 10px;
    font-size:        0.85rem;
    font-family:      var(--font-body);
    color:            var(--input-text);
    background:       var(--input-bg);
    border:           1px solid var(--input-border);
    border-radius:    var(--input-radius);
    box-sizing:       border-box;
    transition:       border-color 0.2s ease, box-shadow 0.2s ease;
    outline:          none;
}

.input-box:focus {
    border-color: var(--input-focus-border);
    box-shadow:   0 0 0 3px rgba(2, 140, 197, 0.12);
}


/* ============================================================
   ICON PADDING VARIANTS
   ============================================================ */

.input-wrapper.has-left-icon  .input-box { padding-left:  32px; }
.input-wrapper.has-right-icon .input-box { padding-right: 32px; }


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

textarea.input-box {
    height:      auto !important;
    min-height:  90px;
    resize:      vertical;
    line-height: 1.5;
    padding-top: 7px;
}


/* ============================================================
   ICONS
   ============================================================ */

.icon-left,
.icon-right {
    position:       absolute;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      0.82rem;
    color:          var(--input-icon);
    pointer-events: none;
}

.icon-left  { left:  9px; }
.icon-right { right: 9px; pointer-events: auto; cursor: pointer; }

/* Align icon with top of textarea */
.input-wrapper.has-left-icon  textarea.input-box ~ .icon-left,
.input-wrapper.has-right-icon textarea.input-box ~ .icon-right {
    top:       12px;
    transform: none;
}


/* ============================================================
   SELECT / DROPDOWNLIST
   Needs explicit styling to match text inputs.
   ASP.NET DropDownList renders as <select>.
   ============================================================ */

select.input-box {
    height:      32px;
    padding-top: 0;
    padding-bottom: 0;
    cursor:      pointer;
    appearance:  none;
    -webkit-appearance: none;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7F8D'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

select.input-box:focus {
    border-color: var(--input-focus-border);
    box-shadow:   0 0 0 3px rgba(2, 140, 197, 0.12);
}

/* Icon padding for select inside has-left-icon wrapper */
.input-wrapper.has-left-icon select.input-box {
    padding-left: 32px;
}