/* =========================
   BUTTONS
   ========================= */
.btn {
    border-radius: 1rem;
    transition: background-color 0.3s ease-in-out;
    font-weight: 400;
    min-height: 48px;
    font-size: 1rem;
}

.btn-sm {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-focus);
}

/* Enhanced focus for accessibility */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--color-primary, #086973);
    outline-offset: 2px;
}

.btn-primary {
    background: linear-gradient(135deg, #086973, #0891b2);
    border: none;
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #023d43, #086973);
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

.btn-success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-hover));
    border: none;
    color: white;
}

    .btn-success:hover {
        background: linear-gradient(135deg, var(--color-success-hover), #064e3b);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

.btn-danger {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-hover));
    border: none;
    color: white;
}

    .btn-danger:hover {
        background: linear-gradient(135deg, var(--color-danger-hover), #991b1b);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

.btn-warning {
    background: linear-gradient(135deg, var(--color-warning), var(--color-warning-hover));
    border: none;
    color: white;
}

    .btn-warning:hover {
        background: linear-gradient(135deg, var(--color-warning-hover), #a16207);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

.btn-secondary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover));
    border: none;
    color: white;
}

    .btn-secondary:hover {
        background: linear-gradient(135deg, var(--color-secondary-hover), #334155);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

    .btn-outline-primary:hover {
        color: white !important;
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

.btn-outline-success {
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

    .btn-outline-success i,
    .btn-outline-success .fas,
    .btn-outline-success .far,
    .btn-outline-success .fab {
        color: var(--color-success) !important;
    }

    .btn-outline-success:hover {
        color: white !important;
        background-color: var(--color-success) !important;
        border-color: var(--color-success) !important;
    }

        .btn-outline-success:hover i,
        .btn-outline-success:hover .fas,
        .btn-outline-success:hover .far,
        .btn-outline-success:hover .fab {
            color: white !important;
        }

.btn-outline-danger {
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

    .btn-outline-danger i,
    .btn-outline-danger .fas,
    .btn-outline-danger .far,
    .btn-outline-danger .fab {
        color: var(--color-danger) !important;
    }

    .btn-outline-danger:hover {
        color: white !important;
        background-color: var(--color-danger) !important;
        border-color: var(--color-danger) !important;
    }

        .btn-outline-danger:hover i,
        .btn-outline-danger:hover .fas,
        .btn-outline-danger:hover .far,
        .btn-outline-danger:hover .fab {
            color: white !important;
        }

.btn-outline-secondary {
    color: #6b7280 !important;
    border-color: #d1d5db !important;
    background-color: transparent !important;
}

    .btn-outline-secondary i,
    .btn-outline-secondary .fas,
    .btn-outline-secondary .far,
    .btn-outline-secondary .fab {
        color: #6b7280 !important;
    }

    .btn-outline-secondary:hover {
        color: white !important;
        background-color: #4b5563 !important;
        border-color: #4b5563 !important;
    }

        .btn-outline-secondary:hover .fas,
        .btn-outline-secondary:hover .far,
        .btn-outline-secondary:hover .fab {
            color: white !important;
        }

.btn-outline-light {
    color: var(--color-light-gray) !important;
    border-color: var(--color-light-gray) !important;
}

/* =========================
   MOBILE BUTTON ENHANCEMENTS
   ========================= */

@media (max-width: 767.98px) {
    /* Better spacing for touch */
    .btn + .btn {
        margin-left: 0.5rem;
    }

    /* Action buttons - stack vertically */
    .d-flex.justify-content-between {
        gap: 1rem;
    }

        .d-flex.justify-content-between > div {
            display: flex;
            justify-content: center;
            width: 100%;
        }

            .d-flex.justify-content-between > div:last-child {
                order: -1; /* Move primary actions to top */
            }

    .btn {
        flex: 1;
        margin: 0 0.25rem;
    }

    /* Input groups */
    .input-group .form-control,
    .input-group .form-select,
    .input-group .btn {
        min-height: 48px;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor !important;
    }
}

.btn-outline-primary {
    color: var(--color-black) !important;
    border-color: var(--color-primary) !important;
}

    .btn-outline-primary:hover {
        color: white;
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

.btn-danger {
    color: white;
}

/* Fix for btn-outline-primary dropdown toggle show state */
.btn-outline-primary.dropdown-toggle.show {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

    .btn-outline-primary.dropdown-toggle.show:focus {
        box-shadow: 0 0 0 0.2rem rgba(8, 105, 115, 0.25);
    }

/* =========================
   DROPDOWN BUTTON TEXT ALIGNMENT & TRUNCATION
   ========================= */

/* Dropdown toggle button improvements */
.dropdown-toggle {
    text-align: left;
}

    .dropdown-toggle.w-100 {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

/* Button text container for proper text alignment */
.button-text,
.dropdown-button-text-truncate {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 1rem;
    line-height: 1.2;
    display: inline-block;
}

/* Ensure dropdown arrow stays in place */
.dropdown-toggle::after {
    flex-shrink: 0;
    margin-left: auto;
}

/* Fix text alignment for all dropdown toggle variants */
.btn-outline-secondary.dropdown-toggle,
.btn-primary.dropdown-toggle,
.btn-secondary.dropdown-toggle {
    text-align: left;
}

    .btn-outline-secondary.dropdown-toggle .button-text,
    .btn-primary.dropdown-toggle .button-text,
    .btn-secondary.dropdown-toggle .button-text {
        text-align: left;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 0.5rem;
    }

/* Placeholder text styling */
.button-text[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #6b7280;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .dropdown-toggle .button-text,
    .dropdown-toggle .dropdown-button-text-truncate {
        font-size: 0.9rem;
        padding-right: 0.75rem;
    }
}

/* =========================
   FIX FOR WHITE CORNERS ON ROUND BUTTONS (MOBILE)
   ========================= */
@media (max-width: 576px) {
    /* Ensure outline round buttons have transparent backgrounds - no white corners */
    .btn-outline-primary.rounded-circle,
    .btn-outline-secondary.rounded-circle,
    .btn-outline-danger.rounded-circle,
    .btn-outline-success.rounded-circle,
    .btn-outline-warning.rounded-circle,
    .btn-outline-info.rounded-circle {
        background-color: transparent !important;
    }

    /* Outline buttons should always be transparent */
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-danger,
    .btn-outline-success,
    .btn-outline-warning,
    .btn-outline-info {
        background-color: transparent !important;
    }

    /* Only add background on hover for outline buttons */
    .btn-outline-primary:hover,
    .btn-outline-secondary:hover,
    .btn-outline-danger:hover,
    .btn-outline-success:hover,
    .btn-outline-warning:hover,
    .btn-outline-info:hover {
        background-color: var(--color-primary) !important;
    }

    .btn-outline-secondary:hover {
        background-color: #4b5563 !important;
    }

    .btn-outline-danger:hover {
        background-color: var(--color-danger) !important;
    }

    .btn-outline-success:hover {
        background-color: var(--color-success) !important;
    }

    /* Fix white corners on buttons with border-radius */
    .btn {
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        /* Prevent white corner artifacts on mobile */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
    }

    /* Ensure all outline buttons have truly transparent backgrounds */
    .btn[class*="btn-outline-"] {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* Fix for summary toggle button and similar small buttons */
    #toggleSummaryCards,
    .btn-sm.btn-outline-secondary,
    .btn-sm.btn-outline-primary {
        background: transparent !important;
        background-color: transparent !important;
        /* Additional fix for white corners */
        isolation: isolate;
    }
}

/* Fixed bottom action bar styling */
.fixed-bottom {
    z-index: 1030;
}

/* On mobile, add padding to the page content to prevent fixed buttons from hiding form fields */
@media (max-width: 767.98px) {
    /* Add bottom padding to main content containers when fixed-bottom buttons are present */
    .p-2.mb-7:has(.fixed-bottom),
    .card-body:has(.fixed-bottom) {
        padding-bottom: 5rem !important;
    }
    
    /* Fallback for browsers that don't support :has() - add a class manually */
    .has-fixed-bottom-buttons {
        padding-bottom: 5rem !important;
    }
    
    /* Make fixed bottom buttons more compact on mobile */
    .fixed-bottom {
        padding: 0.75rem 1rem !important;
    }
    
    .fixed-bottom .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    /* Even more compact on very small screens */
    .fixed-bottom {
        padding: 0.5rem 0.75rem !important;
    }
    
    .fixed-bottom .btn {
        min-height: 40px;
        padding: 0.375rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Stack buttons vertically on very small screens if needed */
    .fixed-bottom.flex-wrap {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}