/*
 * St. Cloud State University - Custom Button Styles
 * Centralized button styling
 * 
 * SCSU Brand Colors:
 * - Red: #b31b34
 * - Black: #000000
 * - Gray: #2b2b2b
 */

/* ============================================
   PRIMARY SCSU RED BUTTON
   Main call-to-action buttons
   ============================================ */

/* Higher specificity to override Bootstrap .btn class */
.btn.btn-scsu-red,
.btn.btn-scsu-primary,
button.btn-scsu-red,
button.btn-scsu-primary,
a.btn-scsu-red,
a.btn-scsu-primary {
    background-color: #b31b34 !important;
    border-color: #b31b34 !important;
    color: #ffffff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    border-radius: 0.25rem;
    border-width: 2px;
    border-style: solid;
    text-decoration: none;
}

.btn.btn-scsu-red:hover,
.btn.btn-scsu-primary:hover,
.btn.btn-scsu-red:focus,
.btn.btn-scsu-primary:focus,
button.btn-scsu-red:hover,
button.btn-scsu-primary:hover,
a.btn-scsu-red:hover,
a.btn-scsu-primary:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    text-decoration: none;
}

.btn.btn-scsu-red:active,
.btn.btn-scsu-primary:active,
button.btn-scsu-red:active,
button.btn-scsu-primary:active {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(179, 27, 52, 0.5) !important;
}

.btn.btn-scsu-red:disabled,
.btn.btn-scsu-primary:disabled,
.btn.btn-scsu-red.disabled,
.btn.btn-scsu-primary.disabled {
    background-color: #d8d8d8 !important;
    border-color: #d8d8d8 !important;
    color: #6c757d !important;
    cursor: not-allowed;
    opacity: 0.65;
}

/* ============================================
   BUTTON SIZE VARIANTS
   ============================================ */
.btn.btn-scsu-red.btn-sm,
.btn.btn-scsu-primary.btn-sm {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.btn.btn-scsu-red.btn-lg,
.btn.btn-scsu-primary.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
}

/* ============================================
   OUTLINE VARIANT
   Red outline that fills on hover
   ============================================ */
.btn.btn-outline-scsu-red,
button.btn-outline-scsu-red,
a.btn-outline-scsu-red {
    background-color: transparent !important;
    border: 2px solid #b31b34 !important;
    color: #b31b34 !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    border-radius: 0.25rem;
    text-decoration: none;
}

.btn.btn-outline-scsu-red:hover,
.btn.btn-outline-scsu-red:focus,
button.btn-outline-scsu-red:hover,
a.btn-outline-scsu-red:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    text-decoration: none;
}

.btn.btn-outline-scsu-red:active {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(179, 27, 52, 0.5) !important;
}

/* ============================================
   SECONDARY SCSU GRAY BUTTON
   For cancel/back actions
   ============================================ */
.btn.btn-scsu-secondary,
button.btn-scsu-secondary,
a.btn-scsu-secondary {
    background-color: #2b2b2b !important;
    border-color: #2b2b2b !important;
    color: #ffffff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    border-radius: 0.25rem;
    border-width: 2px;
    border-style: solid;
    text-decoration: none;
}

.btn.btn-scsu-secondary:hover,
.btn.btn-scsu-secondary:focus,
button.btn-scsu-secondary:hover,
a.btn-scsu-secondary:hover {
    background-color: #404040 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* ============================================
   LINK-STYLE BUTTON
   Matches SCSU red
   ============================================ */
.btn-link-scsu {
    color: #b31b34 !important;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-weight: 600;
}

.btn-link-scsu:hover,
.btn-link-scsu:focus {
    color: #000000 !important;
    text-decoration: underline;
}

/* ============================================
   ICON BUTTON SPACING
   Maintains proper spacing with icons
   ============================================ */
.btn-scsu-red i,
.btn-scsu-primary i,
.btn-outline-scsu-red i,
.btn-scsu-secondary i {
    margin-left: 0.5rem;
}

.btn-scsu-red i:first-child,
.btn-scsu-primary i:first-child,
.btn-outline-scsu-red i:first-child,
.btn-scsu-secondary i:first-child {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* ============================================
   BUTTON GROUPS
   ============================================ */
.btn-group-scsu {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-group-scsu .btn-scsu-red,
.btn-group-scsu .btn-scsu-primary,
.btn-group-scsu .btn-scsu-secondary,
.btn-group-scsu .btn-outline-scsu-red {
    margin: 0;
}

/* ============================================
   RESPONSIVE DESIGN
   Full-width buttons on mobile
   ============================================ */
@media (max-width: 768px) {
    .btn.btn-scsu-red,
    .btn.btn-scsu-primary,
    .btn.btn-outline-scsu-red,
    .btn.btn-scsu-secondary {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-group-scsu {
        flex-direction: column;
    }
}