@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Modern Thin White Custom Scrollbars */
html, body, * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.35);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Mirror camera video feeds for candidate, interviewer, panelist, and admin */
#webcam,
#interviewer-video-default,
#interviewer-cand-video,
#interviewer-self-video,
video[id^="panelist-video-"],
.camera-video {
    transform: scaleX(-1);
}

/* Ensure screen sharing is NEVER mirrored */
#interviewer-screen-video {
    transform: scaleX(1) !important;
}

/* Ensure datetime-local, date, and time picker icons are bright pure white on dark backgrounds */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1 !important;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1 !important;
}