/* Calendar Icon Visibility Fix */
/* This is a fallback approach if the SVG method doesn't work */

/* Reset all calendar picker styles */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    position: relative;
    color: #333;
    opacity: 1 !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    font-family: "Bootstrap Icons" !important;
}

/* Use Bootstrap Icons font instead of SVG if possible */
input[type="date"]::-webkit-calendar-picker-indicator::before,
input[type="datetime-local"]::-webkit-calendar-picker-indicator::before {
    content: "\F1F5" !important; /* Bootstrap calendar3 icon */
    font-family: "Bootstrap Icons" !important;
    font-size: 16px !important;
    color: #333 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Dark theme */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator::before,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator::before {
    color: #fff !important;
}

/* Alternative approach: Use a solid background with icon */
.date-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.date-input-wrapper input[type="date"],
.date-input-wrapper input[type="datetime-local"] {
    width: 100%;
    padding-right: 40px;
}

.date-input-wrapper::after {
    content: "\F1F5";
    font-family: "Bootstrap Icons";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-primary);
    font-size: 16px;
}

/* Hide native picker if custom icon is used */
.date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator,
.date-input-wrapper input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}