/* =========================================================
   FLUENT UI - BOOTSTRAP OVERRIDE LAYER (CLEAN VERSION)
   ========================================================= */

/* =========================
   FORM CONTROLS
========================= */

.form-control,
.form-select {
    border-radius: var(--ms-radius-md);
    border: 1px solid var(--ms-color-border-default);
    background-color: var(--ms-color-bg-canvas);
    box-shadow: none;
    transition:
        border-color var(--ms-motion-base) var(--ms-ease),
        box-shadow var(--ms-motion-base) var(--ms-ease);
}

/* Hover (Fluent: ONLY border change) */
.form-control:hover,
.form-select:hover {
    border-color: var(--ms-color-neutral-400);
}

/* Focus (ONLY ONE SYSTEM) */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
    border-color: var(--ms-color-border-focus);
    outline: none;
    box-shadow:
        0 0 0 1px var(--ms-color-bg-canvas),
        0 0 0 3px rgba(0, 120, 212, 0.25);
}

/* =========================
   AUTOFILL FIX (IMPORTANT)
========================= */

.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--ms-color-bg-canvas) inset;
    -webkit-text-fill-color: var(--ms-color-text-primary);
}

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

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--ms-color-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow:
        0 0 0 1px var(--ms-color-bg-canvas),
        0 0 0 3px rgba(209, 52, 56, 0.25);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--ms-color-success);
}

/* =========================
   DISABLED STATE
========================= */

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ms-color-bg-disabled);
    color: var(--ms-color-text-disabled);
    cursor: not-allowed;
    opacity: var(--ms-opacity-disabled);
}

/* =========================
   BUTTON OVERRIDE (FLUENT CLEAN)
========================= */

.btn {
    border-radius: var(--ms-radius-md);
    box-shadow: none;
    transition:
        background-color var(--ms-motion-fast) var(--ms-ease),
        border-color var(--ms-motion-fast) var(--ms-ease);
}

/* Remove ALL Bootstrap focus system */
.btn:focus,
.btn:active {
    outline: none;
    box-shadow: none;
}

/* Fluent focus ring ONLY */
.btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1px var(--ms-color-bg-canvas),
        0 0 0 3px rgba(0, 120, 212, 0.25);
}

/* Remove transform (NOT Fluent UI style) */
.btn:hover {
    filter: brightness(0.98);
}

/* =========================
   LINKS
========================= */

a,
a:visited,
a:focus,
a:active {
    color: var(--ms-color-primary);
}

a:hover {
    color: var(--ms-color-primary-hover);
}

/* =========================
   TABLE CLEAN FLUENT
========================= */

.table {
    background-color: transparent;
    border-color: var(--ms-color-border-subtle);
}

.table th {
    font-weight: var(--ms-font-weight-semi-bold);
    color: var(--ms-color-text-secondary);
}

/* =========================
   BADGE (FLUENT STYLE)
========================= */

.badge {
    border-radius: var(--ms-radius-pill);
    font-weight: var(--ms-font-weight-semi-bold);
}

/* =========================
   GLOBAL FOCUS SYSTEM (SAFE VERSION)
========================= */

/* ONLY remove default browser outline */
:focus {
    outline: none;
}

.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}