/* =========================
   FLUENT HEADER (EDGE-TO-EDGE)
========================= */

.fluent-header {
    position: sticky;
    top: 0;
    z-index: var(--ms-z-sticky);

    height: 48px;
    width: 100%;

    display: flex;
    align-items: stretch; /* 🔥 penting */
    justify-content: space-between;

    /* ❌ HAPUS padding */
    padding: 0;

    background-color: var(--ms-color-bg-canvas);
    border-bottom: 1px solid var(--ms-color-border-subtle);

    backdrop-filter: blur(6px);

    box-sizing: border-box;
}

/* =========================
   LEFT / CENTER / RIGHT
========================= */

.fluent-header-left,
.fluent-header-center,
.fluent-header-right {
    display: flex;
    align-items: center;
    height: 100%; /* 🔥 full height */
}

/* spacing dipindah ke sini */
.fluent-header-left {
    padding-left: var(--ms-space-0);
    gap: var(--ms-space-sm);
}

.fluent-header-right {
    padding-right: var(--ms-space-sm);
    gap: var(--ms-space-xs);
}

/* center tetap */
.fluent-header-center {
    flex: 1;
    justify-content: center;
}

/* right tetap ke kanan */
.fluent-header-right {
    margin-left: auto;
}

/* =========================
   TITLE
========================= */

.fluent-header-title {
    font-size: var(--ms-font-size-h4);
    font-weight: var(--ms-font-weight-semi-bold);

    color: var(--ms-color-text-primary);

    white-space: nowrap;
}

/* =========================
   TOGGLE BUTTON (FULL HEIGHT)
========================= */

.fluent-header-toggle {
    height: 100%; /* 🔥 dari 36px -> full */
    min-width: 44px;

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

    border: none;
    border-radius: 0; /* 🔥 edge-to-edge */

    background-color: transparent;
    cursor: pointer;

    flex-shrink: 0;

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

/* Hover full area */
.fluent-header-toggle:hover {
    background-color: var(--ms-color-overlay-subtle);
}

/* Active */
.fluent-header-toggle:active {
    background-color: var(--ms-color-overlay);
}

/* Focus (Fluent ring) */
.fluent-header-toggle:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1px var(--ms-color-bg-canvas),
        0 0 0 2px rgba(0, 120, 212, 0.25);
}

/* =========================
   HAMBURGER ICON
========================= */

.fluent-header-hamburger {
    position: relative;
    width: 16px;
    height: 2px;

    background-color: var(--ms-color-text-primary);
}

.fluent-header-hamburger::before,
.fluent-header-hamburger::after {
    content: "";
    position: absolute;
    left: 0;

    width: 16px;
    height: 2px;

    background-color: var(--ms-color-text-primary);
}

.fluent-header-hamburger::before {
    top: -5px;
}

.fluent-header-hamburger::after {
    top: 5px;
}

/* =========================
   INVERSE MODE
========================= */

.fluent-header.is-inverse {
    color: var(--ms-color-text-inverse);
}

/* Title */
.fluent-header.is-inverse .fluent-header-title {
    color: var(--ms-color-text-inverse);
}

/* Icon */
.fluent-header.is-inverse .fluent-header-hamburger,
.fluent-header.is-inverse .fluent-header-hamburger::before,
.fluent-header.is-inverse .fluent-header-hamburger::after {
    background-color: var(--ms-color-text-inverse);
}

/* Button */
.fluent-header.is-inverse .fluent-header-toggle {
    color: var(--ms-color-text-inverse);
}

/* Hover (dark mode) */
.fluent-header.is-inverse .fluent-header-toggle:hover {
    background-color: rgba(255,255,255,0.12);
}

.fluent-header.is-inverse .fluent-header-toggle:active {
    background-color: rgba(255,255,255,0.18);
}

/* Link */
.fluent-header.is-inverse a {
    color: var(--ms-color-text-inverse);
}