/* Additional CSS Fixes for Visibility and Functionality */

/* Ensure all buttons are clickable */
button,
.btn {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* Ensure disabled buttons show cursor not-allowed */
.btn-square.disabled,
.btn-square:disabled,
button.disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

/* Make sure voucher cards don't block buttons */
.voucher-card {
    position: relative;
}

/* Make sure modal backgrounds are dark */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Ensure input text is visible in modals */
.modal input,
.modal select,
.modal textarea {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 1px solid rgba(255, 99, 71, 0.3);
}

.modal input::placeholder,
.modal textarea::placeholder {
    color: var(--gray-400);
}

/* Dropdown options in modals - dark grey on white */
.modal select option {
    background: #ffffff;
    color: #333333;
}

/* Make sure text in dark areas is visible */
.text-muted {
    color: var(--gray-400) !important;
}

/* Alert and validation text */
.invalid-feedback,
.valid-feedback {
    color: var(--white);
}

/* Table text visibility */
table {
    color: var(--off-white);
}

thead {
    color: var(--white);
}

/* Card text visibility */
.card-body {
    color: var(--off-white);
}

/* List group items */
.list-group-item {
    background: var(--gray-100);
    color: var(--off-white);
    border-color: rgba(255, 99, 71, 0.2);
}

/* Badge visibility */
.badge {
    font-weight: 600;
}

/* Ensure all text inputs are visible */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255, 99, 71, 0.3) !important;
}

/* Dropdown options - make sure they're visible */
select option {
    background: #ffffff !important;
    color: #333333 !important;
}

/* Fix any white-on-white issues */
option {
    background-color: white !important;
    color: #333 !important;
    padding: 8px !important;
}

/* Ensure focus states are clear */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--tomato) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 99, 71, 0.25) !important;
    outline: none;
}

/* Loading spinner visibility */
.spinner-border {
    border-color: var(--tomato);
    border-right-color: transparent;
}

/* Toast notifications */
.toast {
    background: var(--gray-100);
    color: var(--white);
    border: 1px solid rgba(255, 99, 71, 0.3);
}

/* Popover and tooltip visibility */
.popover {
    background: var(--gray-100);
    border-color: rgba(255, 99, 71, 0.3);
}

.popover-body {
    color: var(--off-white);
}

.tooltip-inner {
    background: var(--gray-200);
    color: var(--white);
}

/* Ensure all paragraphs are visible */
p {
    color: inherit;
}

/* Make sure links are visible */
a {
    color: var(--tomato-light);
}

a:hover {
    color: var(--tomato);
}

/* Breadcrumb visibility */
.breadcrumb {
    background: var(--gray-100);
}

.breadcrumb-item {
    color: var(--gray-400);
}

.breadcrumb-item.active {
    color: var(--white);
}

/* Pagination visibility */
.page-link {
    background: var(--gray-100);
    color: var(--white);
    border-color: rgba(255, 99, 71, 0.3);
}

.page-link:hover {
    background: var(--tomato);
    color: var(--white);
}

.page-item.active .page-link {
    background: var(--tomato);
    border-color: var(--tomato);
}

/* Progress bar */
.progress {
    background: var(--gray-100);
}

.progress-bar {
    background: var(--tomato);
}

/* Alert boxes */
.alert {
    border-radius: var(--border-radius);
}

.alert-info {
    background: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.3);
    color: #7dd3fc;
}

.alert-warning {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #fcd34d;
}

.alert-danger {
    background: rgba(255, 99, 71, 0.1);
    border-color: rgba(255, 99, 71, 0.3);
    color: var(--tomato-light);
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}