/* Tailwind-inspired button styles */

/* Base button styles */
.btn {
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Primary blue button */
.btn-primary {
    background-color: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6;
}

.btn-primary:hover {
    background-color: #2563eb !important;
    border-color: #2563eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-primary:active {
    background-color: #1d4ed8 !important;
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Secondary grey button */
.btn-secondary {
    background-color: #6b7280 !important;
    color: white !important;
    border-color: #6b7280;
}

.btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-secondary:active {
    background-color: #374151 !important;
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Dark grey button */
.btn-dark {
    background-color: #374151 !important;
    color: white !important;
    border-color: #374151;
}

.btn-dark:hover {
    background-color: #1f2937 !important;
    border-color: #1f2937;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-dark:active {
    background-color: #111827 !important;
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Success green button */
.btn-success {
    background-color: #10b981 !important;
    color: white !important;
    border-color: #10b981;
}

.btn-success:hover {
    background-color: #059669 !important;
    border-color: #059669;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-success:active {
    background-color: #047857 !important;
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Select dropdown styles */
.select-input {
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-color: #d1d5db !important;
}

.select-input:hover {
    border-color: #9ca3af !important;
}

.select-input:focus {
    outline: none;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Override W3.CSS defaults when btn class is present */
.w3-button.btn {
    padding: 8px 16px;
}

.w3-button.btn.w3-small {
    padding: 6px 12px;
    font-size: 14px;
}

.w3-button.btn.w3-large {
    padding: 12px 24px;
    font-size: 16px;
}