/* =============================================================================
   Warp Buttons
   FileMaker-inspired button styles
   ============================================================================= */

/* Color the leading icon on toolbar buttons (label text stays default).
   Plus = success/green for "Ny", X/trash = danger/red for "Radera". */
.warp-btn-toolbar .fa-plus {
    color: var(--warp-color-success-500);
}
.warp-btn-toolbar .fa-trash,
.warp-btn-toolbar .fa-trash-alt,
.warp-btn-toolbar .fa-times {
    color: var(--warp-color-danger-500);
}

/* Base button */
.warp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--warp-spacing-2);
    min-height: var(--warp-control-height);
    padding: 0 var(--warp-spacing-3);
    font-family: var(--warp-font-family-sans);
    font-size: var(--warp-font-size-sm);
    font-weight: var(--warp-font-weight-medium);
    line-height: var(--warp-line-height-tight);
    text-decoration: none;
    border-radius: var(--warp-radius-default);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--warp-transition-default);
    white-space: nowrap;

    &:focus {
        outline: 2px solid var(--warp-color-primary-500);
        outline-offset: 2px;
    }

    &:disabled,
    &.warp-disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Icon sizing */
    & i,
    & svg {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
    }
}

/* Size variants */
.warp-btn-xs {
    min-height: calc(var(--warp-control-height) * 0.75);
    padding: 0 var(--warp-spacing-1-5);
    font-size: var(--warp-font-size-xs);
    gap: var(--warp-spacing-1);
}

.warp-btn-sm {
    min-height: calc(var(--warp-control-height) * 0.875);
    padding: 0 var(--warp-spacing-2);
    font-size: var(--warp-font-size-sm);
}

.warp-btn-lg {
    min-height: calc(var(--warp-control-height) * 1.33);
    padding: 0 var(--warp-spacing-4);
    font-size: var(--warp-font-size-md);
}

/* Primary button (terracotta) */
.warp-btn-primary {
    background-color: var(--warp-color-primary-600);
    color: white;
    border-color: var(--warp-color-primary-600);

    &:hover {
        background-color: var(--warp-color-primary-700);
        border-color: var(--warp-color-primary-700);
    }

    &:active {
        background-color: var(--warp-color-primary-800);
        border-color: var(--warp-color-primary-800);
    }
}

/* Secondary button (outline) */
.warp-btn-secondary {
    background-color: white;
    color: var(--warp-color-gray-700);
    border-color: var(--warp-color-control-border);

    &:hover {
        background-color: var(--warp-color-gray-50);
        border-color: var(--warp-color-gray-600);
    }

    &:active {
        background-color: var(--warp-color-gray-100);
    }
}

/* Success button */
.warp-btn-success {
    background-color: var(--warp-color-success-500);
    color: white;
    border-color: var(--warp-color-success-500);

    &:hover {
        background-color: var(--warp-color-success-600);
        border-color: var(--warp-color-success-600);
    }
}

/* Danger button */
.warp-btn-danger {
    background-color: var(--warp-color-danger-500);
    color: white;
    border-color: var(--warp-color-danger-500);

    &:hover {
        background-color: var(--warp-color-danger-600);
        border-color: var(--warp-color-danger-600);
    }
}

/* Warning button */
.warp-btn-warning {
    background-color: var(--warp-color-warning-500);
    color: var(--warp-color-gray-900);
    border-color: var(--warp-color-warning-500);

    &:hover {
        background-color: var(--warp-color-warning-600);
        border-color: var(--warp-color-warning-600);
    }
}

/* Ghost button (no background) */
.warp-btn-ghost {
    background-color: transparent;
    color: var(--warp-color-gray-600);
    border-color: transparent;

    &:hover {
        background-color: var(--warp-color-gray-100);
        color: var(--warp-color-gray-800);
    }

    &:active {
        background-color: var(--warp-color-gray-200);
    }
}

/* Link-style button */
.warp-btn-link {
    background-color: transparent;
    color: var(--warp-color-primary-500);
    border-color: transparent;
    padding: 0;

    &:hover {
        color: var(--warp-color-primary-600);
        text-decoration: underline;
    }
}

/* Icon-only button */
.warp-btn-icon {
    padding: var(--warp-spacing-2);
    width: 36px;
    height: 36px;

    &.warp-btn-xs {
        width: 24px;
        height: 24px;
        padding: var(--warp-spacing-1);
    }

    &.warp-btn-sm {
        width: 32px;
        height: 32px;
        padding: var(--warp-spacing-1-5);
    }

    &.warp-btn-lg {
        width: 44px;
        height: 44px;
        padding: var(--warp-spacing-2-5);
    }
}

/* Pill button (rounded) */
.warp-btn-pill {
    border-radius: var(--warp-radius-full);
    padding-left: var(--warp-spacing-4);
    padding-right: var(--warp-spacing-4);
}

/* Button group */
.warp-btn-group {
    display: inline-flex;

    & .warp-btn {
        border-radius: 0;

        &:first-child {
            border-radius: var(--warp-radius-default) 0 0 var(--warp-radius-default);
        }

        &:last-child {
            border-radius: 0 var(--warp-radius-default) var(--warp-radius-default) 0;
        }

        &:not(:last-child) {
            border-right-width: 0;
        }
    }
}

/* Toolbar button (like "+ Ny", "Sök", etc.) */
.warp-btn-toolbar {
    background-color: transparent;
    color: var(--warp-color-gray-700);
    border-color: transparent;
    padding: var(--warp-spacing-1-5) var(--warp-spacing-2);
    font-size: var(--warp-font-size-sm);

    &:hover {
        background-color: var(--warp-color-gray-100);
        color: var(--warp-color-gray-900);
    }

    &.warp-active {
        background-color: var(--warp-color-gray-200);
    }
}

/* Action buttons (small icon buttons in tables) */
.warp-btn-action {
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: transparent;
    color: var(--warp-color-gray-500);
    border: none;
    border-radius: var(--warp-radius-default);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &:hover {
        background-color: var(--warp-color-gray-100);
        color: var(--warp-color-gray-700);
    }

    /* Danger variant — always rendered red so the affordance reads as
       "this removes data". Hover paints the full background red and turns
       the icon white for a unmistakable confirm-prompt cue. */
    &.warp-btn-action-danger {
        color: var(--warp-color-danger-500);

        &:hover {
            background-color: var(--warp-color-danger-500);
            color: white;
        }

        &:focus-visible {
            outline: 2px solid var(--warp-color-danger-500);
            outline-offset: 1px;
        }
    }
}

/* Floating action button */
.warp-fab {
    position: fixed;
    bottom: var(--warp-spacing-6);
    right: var(--warp-spacing-6);
    width: 56px;
    height: 56px;
    border-radius: var(--warp-radius-full);
    background-color: var(--warp-color-primary-500);
    color: white;
    border: none;
    box-shadow: var(--warp-shadow-lg);
    cursor: pointer;
    transition: all var(--warp-transition-default);

    &:hover {
        background-color: var(--warp-color-primary-600);
        transform: translateY(-2px);
        box-shadow: var(--warp-shadow-xl);
    }
}

/* Edit buttons container - stable width to prevent layout shift */
.warp-edit-buttons {
    display: flex;
    gap: var(--warp-spacing-2);
    min-width: 180px;
    justify-content: flex-end;
}