/* 
* Input Border Styling 
* Adds a subtle 1px border with soft color to improve visual appearance
*/

.input-border {
    border: 1px solid var(--primary-color, rgba(66, 133, 244, 0.3));
    transition: border-color 0.2s ease-in-out;
}

.input-border:focus, 
.input-border:hover {
    border-color: var(--primary-color, rgba(66, 133, 244, 0.7));
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.15);
}

/* Dark theme support */
[data-theme="dark"] .input-border {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--light-color);
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .input-border:focus,
[data-theme="dark"] .input-border:hover {
    border-color: rgba(66, 133, 244, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25);
}

/* Dark theme support for select elements */
[data-theme="dark"] select.input-border option {
    background-color: var(--dark-color);
    color: var(--light-color);
}

/* Dark theme support for form-check elements */
[data-theme="dark"] .form-check-input.input-border {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .form-check-input.input-border:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Make sure form labels are visible in dark mode */
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-floating > label {
    color: var(--light-color);
    background-color: transparent !important;
}

/* Fix floating label in dark mode to eliminate light background */
[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-theme="dark"] .form-floating > .form-select ~ label {
    background-color: transparent !important;
    opacity: 1;
    z-index: 1;
}

/* Override the Bootstrap background-color for form-floating labels */
[data-theme="dark"] .form-floating > .form-control:focus ~ label::after,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after, 
[data-theme="dark"] .form-floating > .form-select ~ label::after {
    background-color: transparent !important;
    content: "";
}

/* Remove background from form floating when focused/filled */
[data-theme="dark"] .form-floating > .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--dark-color) inset !important;
    -webkit-text-fill-color: var(--light-color) !important;
}

/* Fix accordion styles in dark mode */
[data-theme="dark"] .accordion-item {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: var(--dark-color);
}

[data-theme="dark"] .accordion-button {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--light-color);
}

[data-theme="dark"] .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(66, 133, 244, 0.25);
    border-color: rgba(66, 133, 244, 0.5);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: rgba(66, 133, 244, 0.1);
}

[data-theme="dark"] .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-theme="dark"] .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234285f4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Improve modal styling in dark mode */
[data-theme="dark"] .modal-content {
    background-color: var(--dark-color);
    color: var(--light-color);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Add dark theme styling for floating inputs */
[data-theme="dark"] .form-floating > .form-control,
[data-theme="dark"] .form-floating > .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--light-color);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .form-floating > .form-control:focus,
[data-theme="dark"] .form-floating > .form-select:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-color);
}

/* Improve dropdown menus in dark mode */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dark-color);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .dropdown-item {
    color: var(--light-color);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(66, 133, 244, 0.1);
    color: var(--light-color);
}

[data-theme="dark"] .dropdown-item.active {
    background-color: var(--primary-color);
}

/* Fix tooltips and popovers in dark mode */
[data-theme="dark"] .tooltip-inner,
[data-theme="dark"] .popover-body {
    background-color: #495057;
    color: var(--light-color);
}

[data-theme="dark"] .popover-header {
    background-color: #343a40;
    color: var(--light-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, 
[data-theme="dark"] .bs-popover-top>.popover-arrow::after {
    border-top-color: #495057;
}

/* Fix text colors in dark mode */
[data-theme="dark"] .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .text-body-tertiary {
    color: rgba(255, 255, 255, 0.6) !important;
}