/**
 * Standardized Button Styles for FourPercentRule Application
 * Based on the clean Table tab button design
 *
 * Usage: Apply class "app-button" to any button element
 * For active/selected state, add class "active"
 */

/* Base button style */
.app-button {
    padding: clamp(1px, .7vw, 6px) clamp(1px, .7vw, 10px);
    background: white;
    border: 1px solid #ddd;
    border-radius: clamp(3px, 0.4vw, 5px);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: clamp(8px, 1.2vw, 14px);
    font-weight: 500;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: clamp(2px, 0.3vw, 4px);
    text-decoration: none;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
    user-select: none;
}

/* Hover state */
.app-button:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active/Selected state */
.app-button.active,
.app-button.selected {
    background: var(--blue-600);  /* Using unified primary blue */
    color: white;
    border-color: var(--blue-700);
}

.app-button.active:hover,
.app-button.selected:hover {
    background: var(--blue-700);  /* Darker blue on hover */
}

/* Disabled state */
.app-button:disabled,
.app-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Size variations */
.app-button.btn-sm {
    padding: clamp(1px, 0.5vw, 4px) clamp(1px, 0.6vw, 8px);
    font-size: clamp(7px, 1vw, 12px);
}

.app-button.btn-lg {
    padding: clamp(2px, 0.9vw, 8px) clamp(2px, 1.3vw, 16px);
    font-size: clamp(10px, 1.5vw, 16px);
}

/* Color variations */
.app-button.btn-primary {
    background: var(--blue-600);  /* Unified primary blue */
    color: white;
    border-color: var(--blue-600);
}

.app-button.btn-primary:hover {
    background: var(--blue-700);  /* Darker shade on hover */
    border-color: var(--blue-700);
}

.app-button.btn-success {
    background: var(--green-600);  /* New success green */
    color: white;
    border-color: var(--green-600);
}

.app-button.btn-success:hover {
    background: #218838;
    border-color: #218838;
}

.app-button.btn-danger {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.app-button.btn-danger:hover {
    background: #c82333;
    border-color: #c82333;
}

.app-button.btn-warning {
    background: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

.app-button.btn-warning:hover {
    background: #e0a800;
    border-color: #e0a800;
}

/* Icon support */
.app-button i,
.app-button .icon {
    font-size: clamp(6px, 1.3vw, 13px);
}

/* Button groups with spacing */
.app-button-group {
    display: inline-flex;
    gap: 4px;  /* Add 4px gap between buttons */
    align-items: center;
}

.app-button-group .app-button {
    /* Keep individual button border radius */
}

/* For connected button groups without gaps */
.app-button-group.connected {
    gap: 0;
}

.app-button-group.connected .app-button {
    border-radius: 0;
    margin-left: -1px;
}

.app-button-group.connected .app-button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-left: 0;
}

.app-button-group.connected .app-button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.app-button-group .app-button.active {
    z-index: 1;
}

/* Ensure button text and icons stay aligned */
.app-button > * {
    vertical-align: middle;
}

/* Remove default button focus outline and add custom */
.app-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Transition for all interactive states */
.app-button,
.app-button * {
    transition: all 0.2s ease;
}

/* Mobile-friendly touch targets - clamp() handles most responsive sizing */
@media (max-width: 768px) {
    .app-button {
        min-height: clamp(36px, 5vw, 44px);
    }
}