/* =========================
   ACTION GROUP (TABLE)
   Always visible (subtle)
========================= */

.office-table .action-group {
    display: flex;
    align-items: center;
    gap: var(--ms-space-xs);

    opacity: 0.4; /* 🔥 subtle default */
    transition: opacity var(--ms-motion-fast) var(--ms-ease);
}

/* saat hover row → full */
.office-table tbody tr:hover .action-group {
    opacity: 1;
}

/* =========================
   ACTION BUTTON BASE
========================= */

.fluent-action-button {
    position: relative;
    z-index: 1;

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

    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    border-radius: var(--ms-radius-sm);
    border: 1px solid transparent;

    background-color: transparent;

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

    cursor: pointer;

    transition:
        background-color var(--ms-motion-fast) var(--ms-ease),
        border-color var(--ms-motion-fast) var(--ms-ease),
        color var(--ms-motion-fast) var(--ms-ease),
        transform var(--ms-motion-fast) var(--ms-ease),
        opacity var(--ms-motion-fast) var(--ms-ease);

    user-select: none;
}

/* =========================
   ICON FIX
========================= */

.fluent-action-button .fluent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* =========================
   HOVER (BUTTON)
========================= */

.fluent-action-button:hover {
    background-color: var(--ms-color-neutral-100);
    border-color: var(--ms-color-border-default);
    color: var(--ms-color-text-primary);
}

/* =========================
   ACTIVE (PRESS)
========================= */

.fluent-action-button:active {
    background-color: var(--ms-color-neutral-200);
    transform: scale(0.96);
}

/* =========================
   FOCUS (ACCESSIBILITY)
========================= */

.fluent-action-button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--ms-color-bg-canvas),
        0 0 0 4px var(--ms-color-primary);
}

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

.fluent-action-button:disabled {
    opacity: var(--ms-opacity-disabled);
    cursor: not-allowed;
}

/* =========================
   VARIANTS
========================= */

/* primary */
.fluent-action-button-primary {
    color: var(--ms-color-primary);
}

.fluent-action-button-primary:hover {
    background-color: var(--ms-color-primary-subtle);
    border-color: var(--ms-color-primary-light);
}

/* danger */
.fluent-action-button-danger {
    color: var(--ms-color-danger);
}

.fluent-action-button-danger:hover {
    background-color: var(--ms-color-danger-subtle);
    border-color: var(--ms-color-danger-light);
}

/* success */
.fluent-action-button-success {
    color: var(--ms-color-success);
}

.fluent-action-button-success:hover {
    background-color: var(--ms-color-success-subtle);
    border-color: var(--ms-color-success-light);
}

/* =========================
   TABLE FIX (IMPORTANT)
========================= */

.office-table td {
    position: relative;
}

/* =========================
   BUTTON MODE (AUTO WIDTH)
========================= */

.fluent-action-button--flex {
    width: auto;
    height: auto;
    flex: unset;

    padding: 0 12px;
    gap: 6px;
}

/* kalau ada icon + text */
.fluent-action-button--flex .fluent-icon {
    margin-right: 4px;
}