/* Wrapper */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    box-sizing: border-box;

    font-family: var(--ms-font);

    border: 1px solid var(--ms-color-border-default);
    border-radius: var(--ms-radius-sm);
    background-color: var(--ms-color-bg-canvas);

    overflow: hidden;

    transition: border-color var(--ms-motion-fast) var(--ms-ease),
                box-shadow var(--ms-motion-fast) var(--ms-ease);
}

/* =========================
   INPUT
========================= */
.input-group .form-control {
    flex: 1 1 0%;
    min-width: 0;
    height: 100%;

    border: none;
    outline: none;
    box-shadow: none;

    background-color: transparent;

    padding: 0 var(--ms-space-sm);

    /* default tanpa icon */
    padding-left: var(--ms-space-sm);

    font-family: var(--ms-font);

    /* 🔥 FIX bootstrap conflict */
    width: auto !important;
}

/* remove bootstrap focus */
.input-group .form-control:focus {
    box-shadow: none;
}

/* =========================
   ICON (LEFT)
========================= */
.input-prefix {
    width: 36px;
    min-width: 36px;
    height: 100%;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none !important;
    background-color: var(--ms-color-bg-canvas);
    color: var(--ms-color-text-primary);

    z-index: 2;

    transition: background-color var(--ms-motion-fast) var(--ms-ease);
}

.input-group:focus-within .input-prefix {
    color: var(--ms-color-primary);
}

/* =========================
   BUTTON (RIGHT)
========================= */
.input-group .btn,
.input-group .clear-value-btn,
.input-group .toggle-password {
    width: 36px;
    min-width: 36px;
    height: 100%;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none !important;
    background-color: var(--ms-color-bg-canvas);
    color: var(--ms-color-text-primary);

    z-index: 2;

    transition: background-color var(--ms-motion-fast) var(--ms-ease);
}

/* Hover */
.input-group .btn:hover {
    background-color: var(--ms-color-bg-hover);
}

/* Active */
.input-group .btn:active {
    background-color: var(--ms-color-bg-active);
}

/* =========================
   STATES
========================= */

/* Hover */
.input-group:hover {
    background: var(--ms-color-bg-subtle);
}

/* Focus (Fluent ring) */
.input-group:focus-within {
    border-color: var(--ms-color-border-focus);
    box-shadow:
        0 0 0 1px var(--ms-color-bg-canvas),
        0 0 0 2px rgba(0, 120, 212, 0.25);
}

/* Invalid */
.input-group.is-invalid {
    border-color: var(--ms-color-danger);
}

.input-group.is-invalid:focus-within {
    border-color: var(--ms-color-danger);
    box-shadow:
        0 0 0 1px var(--ms-color-bg-canvas),
        0 0 0 2px rgba(209, 52, 56, 0.25);
}

/* Disabled */
.input-group:has(input:disabled) {
    background-color: var(--ms-color-bg-disabled);
    opacity: var(--ms-opacity-disabled);
    cursor: not-allowed;
}

.input-group:has(input:disabled) .btn {
    cursor: not-allowed;
}

/* =========================
   PASSWORD ICON TOGGLE
========================= */
.input-group .icon-eye {
    display: none;
}

.input-group .icon-eye-off {
    display: inline-flex;
}

.input-group.show-password .icon-eye {
    display: inline-flex;
}

.input-group.show-password .icon-eye-off {
    display: none;
}

.fluent-input-wrapper {
    display: flex;
    flex-direction: column;
}

.fluent-input-error {
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 16px;
}

.fluent-input-error-item {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: var(--ms-font-size-caption, 12px);
    color: var(--ms-color-danger);
    line-height: 1.1;
}