/* ==========================================================================
   Admin UX enhancements — loaded after styles.css so these overrides win.
   Covers: sidebar readability, password show/hide toggle, required-* spacing,
   and lightweight client-side validation feedback.
   ========================================================================== */

/* ---- Sidebar readability (theme defaults are too small) ---- */
.app-sidebar .side-menu__label {
    font-size: 0.95rem;
    line-height: 1.25;
    font-weight: 500;
}
.app-sidebar .slide__category {
    font-size: 0.72rem;
    opacity: 0.75;
    letter-spacing: 0.04rem;
}
.app-sidebar .side-menu__icon {
    font-size: 1.15rem;
}
.app-sidebar .side-menu__item {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* ---- Required field marker (added by admin-ux.js) ---- */
.req-star {
    font-weight: 700;
}

/* ---- Password show/hide toggle ---- */
.ux-pass-wrap {
    position: relative;
}
.ux-pass-wrap > input {
    padding-inline-end: 2.6rem;
}
.ux-pass-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.6rem;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0.15rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    z-index: 4;
}
.ux-pass-toggle:hover {
    color: #343a40;
}
.ux-pass-toggle i {
    font-size: 1.1rem;
    vertical-align: middle;
}
/* When inside a Bootstrap .input-group, the toggle is a normal input-group button */
.ux-pass-ig {
    display: inline-flex;
    align-items: center;
}

/* ---- Client validation feedback ---- */
.ux-fb {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    font-size: 0.85em;
    color: #dc3545;
}
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545 !important;
}
.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2) !important;
}