/* ============================================================
   EasyErgo Dashboard — Reusable component primitives
   Opt-in classes extracted from the login page's design language.
   ============================================================ */

/* ── Floating-label field ────────────────────────────────── */
/* Usage: <div class="ee-field">
             <input class="form-control" placeholder=" " />
             <label>Field name</label>
             <i class="bi bi-something ee-field-icon"></i>
           </div>
   The input MUST have placeholder=" " (a single space) for the
   :not(:placeholder-shown) trick to work. */
.ee-field {
    position: relative;
    margin-bottom: 1rem;
}

.ee-field label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .875rem;
    color: #94a3b8;
    pointer-events: none;
    transition: top .15s, transform .15s, font-size .15s, color .15s;
}

.ee-field input,
.ee-field select {
    width: 100% !important;
    height: 52px !important;
    padding: 1.1rem 2.75rem 0.3rem 1rem !important;
}

.ee-field input:focus ~ label,
.ee-field input:not(:placeholder-shown) ~ label,
.ee-field select:focus ~ label,
.ee-field select.ee-filled ~ label {
    top: .58rem;
    transform: none;
    font-size: .63rem;
    font-weight: 700;
    color: var(--ee-accent);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ee-field-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95rem;
    color: #94a3b8;
    pointer-events: none;
}