@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@100..900&display=swap');
@import "react-datepicker/dist/react-datepicker.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --primary: 29 78 216;
        /* blue-700 - dark blue */
        --primary-foreground: 255 255 255;

        /* Background */
        --background: 255 255 255;
        /* white */
        --foreground: 24 24 27;
        /* zinc-900 */

        /* Accent colors */
        --accent: 244 244 245;
        /* zinc-100 */
        --accent-foreground: 24 24 27;
        /* zinc-900 */

        /* Destructive (red) colors for delete buttons */
        --destructive: 220 38 38;
        /* red-600 */
        --destructive-foreground: 255 255 255;

        /* Sidebar colors - shadcn style gray */
        --sidebar: 250 250 250;
        /* neutral-50 */
        --sidebar-foreground: 24 24 27;
        /* zinc-900 */
        --sidebar-border: 228 228 231;
        /* zinc-200 */
        --sidebar-accent: 244 244 245;
        /* zinc-100 */
        --sidebar-accent-foreground: 24 24 27;
        /* zinc-900 */
        --sidebar-primary: 29 78 216;
        /* blue-700 */
        --sidebar-primary-foreground: 255 255 255;
        --sidebar-ring: 161 161 170;
        /* zinc-400 */
    }
}

/* React DatePicker Custom Styles */
.react-datepicker-wrapper {
    width: 100%;
}

.react-datepicker__input-container input {
    width: 100%;
}

.react-datepicker {
    font-family: 'Google Sans Flex', sans-serif;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.react-datepicker__header {
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    padding-top: 0.75rem;
}

.react-datepicker__current-month {
    font-weight: 600;
    font-size: 0.875rem;
    color: #111827;
    margin-bottom: 0.5rem;
}

.react-datepicker__day-name {
    color: #6b7280;
    font-weight: 500;
    font-size: 0.75rem;
    width: 2rem;
    line-height: 2rem;
    margin: 0.166rem;
}

.react-datepicker__day {
    width: 2rem;
    line-height: 2rem;
    margin: 0.166rem;
    border-radius: 0.375rem;
    color: #111827;
}

.react-datepicker__day:hover {
    background-color: #f3f4f6;
    border-radius: 0.375rem;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
    background-color: rgb(29, 78, 216);
    color: white;
    font-weight: 500;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--keyboard-selected:hover {
    background-color: rgb(29, 78, 216);
    opacity: 0.9;
}

.react-datepicker__day--today {
    font-weight: 600;
    background-color: #f3f4f6;
}

.react-datepicker__day--disabled {
    color: #d1d5db;
    cursor: not-allowed;
}

.react-datepicker__navigation {
    top: 0.75rem;
}

.react-datepicker__navigation-icon::before {
    border-color: #6b7280;
    border-width: 2px 2px 0 0;
}

.react-datepicker__navigation:hover *::before {
    border-color: #111827;
}

.react-datepicker__time-container {
    border-left: 1px solid #e5e7eb;
}

.react-datepicker__time-container .react-datepicker__time {
    background-color: white;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    width: 100%;
}

.react-datepicker__time-list-item {
    height: 2rem;
    line-height: 2rem;
    padding: 0 0.5rem;
}

.react-datepicker__time-list-item:hover {
    background-color: #f3f4f6;
}

.react-datepicker__time-list-item--selected {
    background-color: rgb(29, 78, 216);
    color: white;
    font-weight: 500;
}

.react-datepicker__time-list-item--selected:hover {
    background-color: rgb(29, 78, 216);
    opacity: 0.9;
}