@import "../../node_modules/flatpickr/dist/flatpickr.min.css";
@import "../../node_modules/quill/dist/quill.core.css";
@import "../../node_modules/quill/dist/quill.bubble.css";
@import "../../node_modules/quill/dist/quill.snow.css";
@import "./wp-tabs";

.date-time {
    /* Add calendar icon styling for the flatpickr control */
    .flatpickr-input:not([disabled]) {
        background-color: var(--sp-white, #ffffff);
        background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%271em%27 height=%271em%27 fill=%27%23605e5c%27 class=%27bi bi-calendar%27 viewBox=%270 0 16 16%27><path d=%27M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z%27/></svg>");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 16px;
    }
    
    /* Fix styling for the flatpickr calendar control */
    .flatpickr-input[readonly] {
        color: var(--sp-neutral-dark, #201f1e);
        background-color: var(--sp-white, #ffffff);
        border-color: var(--sp-info-icon, #605e5c);
    }
    
    /* Fix hover styling for the flatpickr calendar control */
    .flatpickr-input[readonly]:hover {
        border-color: var(--sp-theme-light, #c7e0f4);
    }
    
    /* Fix focus styling for the flatpickr calendar control */
    .flatpickr-input[readonly]:focus {
        border-color: var(--sp-theme-secondary, #2b88d8);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
        color: var(--sp-primary-text, #333333);
    }
    
    /* Fix flatpickr validation styling */
    .flatpickr-input:not([disabled]).is-invalid {
        background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%271em%27 height=%271em%27 fill=%27%23605e5c%27 class=%27bi bi-calendar%27 viewBox=%270 0 16 16%27><path d=%27M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z%27/></svg>"),url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23a80000%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23a80000%27 stroke=%27none%27/%3e%3c/svg%3e");
        background-position: right 0.75rem center,center right 2.25rem;
        background-size: 16px 16px,calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        border-color: var(--sp-error-icon, #a80000);
    }
    .flatpickr-input:not([disabled]).is-valid {
        background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%271em%27 height=%271em%27 fill=%27%23605e5c%27 class=%27bi bi-calendar%27 viewBox=%270 0 16 16%27><path d=%27M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z%27/></svg>"),url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23107c10%27 d=%27M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e");
        background-position: right 0.75rem center,center right 2.25rem;
        background-size: 16px 16px,calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        border-color: var(--sp-success-icon, #107c10);
    }
    .flatpickr-input:not([disabled]).is-invalid:hover {
        border-color: var(--sp-error-icon, #a80000);
    }
    .flatpickr-input:not([disabled]).is-valid:hover {
        border-color: var(--sp-success-icon, #107c10);
    }
    .flatpickr-input:not([disabled]).is-invalid:focus {
        border-color: var(--sp-error-icon, #a80000);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-error-icon, #a80000), transparent 25%);
    }
    .flatpickr-input:not([disabled]).is-valid:focus {
        border-color: var(--sp-success-icon, #107c10);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-success-icon, #107c10), transparent 25%);
    }
}

/* Cannot live inside the date-time div */
/* Color match the selected flatpickr calendar control */
.flatpickr-day.selected {
    background-color: var(--sp-theme-primary, #0078d4);
    border-color: var(--sp-theme-primary, #0078d4);
}

/** List Form Dialog */
.listformdialog {
    .modal-dialog {
        max-width: 60vw;
        .modal-body {
            max-height: 75vh;
            overflow-y: auto;
        }
    }
}

/** List Fields Pop-Up Menus */
#calendarFields.dropdown-menu {
    display: block;
    max-height: 250px;
    position: relative;
    overflow-y: auto;
}
#selectedFields.dropdown-menu {
    border: none;
    display: block;
    position: relative;
}

/** People Picker */
.badge.people-picker-x {
    background-color: var(--sp-white, #ffffff) !important;
    color: var(--sp-black, #000000);
    margin-bottom: 0.15rem;
    padding-top: 0.1rem;
    text-decoration: none;
}

.people-picker {
    input.form-control {
        background-color: var(--sp-white, #ffffff);
        background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%271em%27 height=%271em%27 fill=%27%23605e5c%27 class=%27bi bi-person-fill%27 viewBox=%270 0 16 16%27><path d=%27M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z%27/></svg>");
        background-repeat: no-repeat;
        background-position: right 0.65rem center;
        background-size: 20px 20px;
        border-bottom-right-radius: .375rem !important;
        border-top-right-radius: .375rem !important;
    }
    input.form-control.is-invalid {
        background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%271em%27 height=%271em%27 fill=%27%23605e5c%27 class=%27bi bi-person-fill%27 viewBox=%270 0 16 16%27><path d=%27M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z%27/></svg>"),url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23a80000%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23a80000%27 stroke=%27none%27/%3e%3c/svg%3e");
        background-position: right 0.65rem center,center right 2.25rem;
        background-size: 20px 20px,calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
    input.form-control.is-valid {
        background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%271em%27 height=%271em%27 fill=%27%23605e5c%27 class=%27bi bi-person-fill%27 viewBox=%270 0 16 16%27><path d=%27M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z%27/></svg>"),url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23107c10%27 d=%27M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e");
        background-position: right 0.65rem center,center right 2.25rem;
        background-size: 20px 20px,calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
}

/** Rich Text Editor */
.rich-textbox {
    .ql-formats > button {
        min-width: auto;
    }
    .ql-container.ql-snow, .ql-toolbar.ql-snow {
        border-color: var(--sp-info-icon, #605e5c);
    }
    .ql-container.ql-disabled {
        background-color: var(--sp-theme-lighter-alt, #eff6fc);
        border-color: var(--sp-neutral-light, #edebe9);
        color: var(--sp-neutral-tertiary, #a19f9d);
        opacity: 1;
    }
}