/*
 * EWER UI Control & Icon System v1
 * Presentation-only SSOT for clear inputs, search fields and action icons.
 */
:root {
    --ui-control-height: 46px;
    --ui-touch-target: 44px;
    --ui-control-radius: 12px;
    --ui-control-border: #cfd8e6;
    --ui-control-border-hover: #aebbd0;
    --ui-control-focus: #2563eb;
    --ui-control-surface: #ffffff;
    --ui-control-surface-soft: #f7f9fc;
    --ui-control-text: #172033;
    --ui-control-placeholder: #7b879b;
    --ui-icon-surface: #eef4ff;
    --ui-icon-color: #53637a;
    --ui-icon-focus: #1d4ed8;
    --ui-focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.12);
    --ui-control-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

/* Clear placeholders across authentication and data-entry forms. */
.auth-form .form-input::placeholder,
.auth-recovery-modal .form-input::placeholder,
.pfs-form .form-input::placeholder,
.pfs-form textarea::placeholder,
.ui-search-input::placeholder,
.form-input.ui-search-input::placeholder {
    color: var(--ui-control-placeholder) !important;
    opacity: 1 !important;
    font-weight: 450;
}

/* Authentication fields: reserve a real icon lane so text never overlaps. */
.auth-input-shell {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

.auth-input-shell > .auth-input-icon {
    position: absolute !important;
    inset-inline-start: 0.72rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 1.9rem !important;
    height: 1.9rem !important;
    min-width: 1.9rem !important;
    border-radius: 9px !important;
    background: var(--ui-icon-surface) !important;
    color: var(--ui-icon-color) !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease !important;
}

.auth-input-shell > .form-input {
    width: 100% !important;
    min-height: var(--ui-control-height) !important;
    padding-inline-start: 3.28rem !important;
    padding-inline-end: 1rem !important;
    text-indent: 0 !important;
    border-color: var(--ui-control-border) !important;
    background: var(--ui-control-surface) !important;
    color: var(--ui-control-text) !important;
}

.auth-input-shell.password-wrapper > .form-input,
.auth-input-shell > input[type="password"] {
    padding-inline-end: 3.75rem !important;
}

.auth-input-shell:focus-within > .auth-input-icon {
    color: var(--ui-icon-focus) !important;
    background: #dfeaff !important;
    transform: translateY(-50%) scale(1.04) !important;
}

.auth-input-shell:focus-within > .form-input {
    border-color: var(--ui-control-focus) !important;
    box-shadow: var(--ui-focus-ring) !important;
}

.auth-password-toggle {
    inset-inline-end: 0.45rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    min-width: var(--ui-touch-target) !important;
    min-height: var(--ui-touch-target) !important;
    z-index: 4 !important;
}

/* Reusable search component used throughout cases, incidents, risks, users and logs. */
.ui-search-field {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 260px;
    width: 100%;
    min-width: min(100%, 230px);
    max-width: 100%;
    container-type: inline-size;
}

.ui-search-field > .ui-field-icon,
.ui-search-field > i.fa-search,
.ui-search-field > i.fa-magnifying-glass,
.ui-search-field > i.fas.fa-search {
    position: absolute !important;
    inset-inline-start: 0.72rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 1.9rem !important;
    height: 1.9rem !important;
    min-width: 1.9rem !important;
    border-radius: 9px !important;
    background: var(--ui-icon-surface) !important;
    color: var(--ui-icon-color) !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.ui-search-field > .ui-search-input,
.ui-search-field > input[type="search"],
.ui-search-field > input[type="text"] {
    width: 100% !important;
    max-width: none !important;
    min-height: var(--ui-control-height) !important;
    padding: 0.72rem 1rem 0.72rem 3.28rem !important;
    text-indent: 0 !important;
    border: 1px solid var(--ui-control-border) !important;
    border-radius: var(--ui-control-radius) !important;
    background: var(--ui-control-surface) !important;
    color: var(--ui-control-text) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
}

.ui-search-field:hover > .ui-search-input,
.ui-search-field:hover > input {
    border-color: var(--ui-control-border-hover) !important;
}

.ui-search-field:focus-within > .ui-search-input,
.ui-search-field:focus-within > input {
    border-color: var(--ui-control-focus) !important;
    background: #fff !important;
    box-shadow: var(--ui-focus-ring) !important;
    outline: none !important;
}

.ui-search-field:focus-within > .ui-field-icon,
.ui-search-field:focus-within > i.fa-search,
.ui-search-field:focus-within > i.fa-magnifying-glass {
    color: var(--ui-icon-focus) !important;
    background: #dfeaff !important;
}

/* Standard action/icon alignment. No text can sit underneath an icon. */
.ui-icon-action,
.ui-action-button,
.ui-add-action,
.btn:has(> i),
.btn:has(> span > i) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.52rem !important;
    line-height: 1.2 !important;
}

.ui-icon-action > i,
.ui-action-button > i,
.ui-add-action > i,
.btn > i {
    flex: 0 0 auto !important;
    width: 1em;
    min-width: 1em;
    text-align: center;
    pointer-events: none;
}

.ui-add-action {
    min-height: var(--ui-touch-target) !important;
    padding-inline: clamp(0.9rem, 2vw, 1.2rem) !important;
    border-radius: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.ui-add-action > i {
    display: grid !important;
    place-items: center !important;
    width: 1.65rem !important;
    height: 1.65rem !important;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.17);
}

.ui-close-button {
    display: inline-grid !important;
    place-items: center !important;
    width: var(--ui-touch-target) !important;
    height: var(--ui-touch-target) !important;
    min-width: var(--ui-touch-target) !important;
    min-height: var(--ui-touch-target) !important;
    padding: 0 !important;
    border-radius: 11px !important;
    line-height: 1 !important;
}

.ui-close-button > i {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Consistent control clarity in all create/edit forms. */
.pfs-form .form-input,
.pfs-form .form-select,
.pfs-form textarea,
.user-admin-workspace .form-input,
.user-admin-workspace .form-select,
.user-admin-workspace textarea {
    color: var(--ui-control-text) !important;
    caret-color: var(--ui-control-focus);
}

.pfs-form .form-input:focus-visible,
.pfs-form .form-select:focus-visible,
.pfs-form textarea:focus-visible,
.user-admin-workspace .form-input:focus-visible,
.user-admin-workspace .form-select:focus-visible,
.user-admin-workspace textarea:focus-visible {
    outline: none !important;
    border-color: var(--ui-control-focus) !important;
    box-shadow: var(--ui-focus-ring) !important;
}

@container (max-width: 360px) {
    .ui-search-field > .ui-field-icon,
    .ui-search-field > i.fa-search,
    .ui-search-field > i.fa-magnifying-glass {
        inset-inline-start: 0.55rem !important;
    }

    .ui-search-field > .ui-search-input,
    .ui-search-field > input {
        padding-inline-start: 3rem !important;
    }
}

@media (pointer: coarse) {
    .auth-input-shell > .form-input,
    .ui-search-field > input,
    .ui-add-action,
    .ui-close-button,
    .ui-icon-action {
        min-height: 48px !important;
    }
}

@media (max-width: 640px) {
    .ui-search-field {
        flex-basis: 100%;
        min-width: 100%;
    }

    .ui-add-action {
        min-width: 44px;
    }
}

html.dark,
body.dark-mode {
    --ui-control-border: #3b465b;
    --ui-control-border-hover: #59657a;
    --ui-control-surface: #172033;
    --ui-control-surface-soft: #111827;
    --ui-control-text: #eef2f7;
    --ui-control-placeholder: #a9b3c4;
    --ui-icon-surface: #24324a;
    --ui-icon-color: #c4cee0;
}

html.dark .ui-search-field:focus-within > input,
body.dark-mode .ui-search-field:focus-within > input,
html.dark .auth-input-shell:focus-within > .form-input,
body.dark-mode .auth-input-shell:focus-within > .form-input {
    background: #172033 !important;
}

@media (prefers-reduced-motion: reduce) {
    .auth-input-shell > .auth-input-icon,
    .auth-input-shell > .form-input,
    .ui-search-field > input,
    .ui-search-field > i,
    .ui-add-action {
        transition: none !important;
    }
}