@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Quarkie.Frontend.Web.Module.Scheduling/Quarkie.Frontend.Web.Module.Scheduling.3x3uvkbwty.bundle.scp.css';
@import '_content/Quarkie.Frontend.Web.Shared/Quarkie.Frontend.Web.Shared.0uttf37u6y.bundle.scp.css';

/* /BlazorSortable/SortableList.razor.rz.scp.css */
/* 
  you need the ::deep identifier if you are using scoped styles like this
  because scoped styles are only applied to markup in the component, not
  to the markup inside the render fragment.
*/

[b-wnsowf1a92] .sortable-ghost {
  visibility: hidden;
}

[b-wnsowf1a92] .sortable-fallback {
  opacity: 1 !important
}
/* /Pages/Calendar.razor.rz.scp.css */
.calendar-page[b-v7y051y0q4] {
    display: flex;
    height: 100vh;
    background-color: var(--use-background-100);
}

/* ===================================
   Sidebar Styles
   =================================== */
.calendar-sidebar[b-v7y051y0q4] {
    width: 240px;
    background-color: var(--use-background-100);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
}

/* Create Button */
.create-button[b-v7y051y0q4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--use-button-primary-idle);
    color: var(--use-text-negative-loud);
    border: none;
    border-radius: 8px;
    font-size: var(--size-b2);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.create-button:hover[b-v7y051y0q4] {
    background-color: var(--use-button-primary-hover);
}

.create-icon[b-v7y051y0q4] {
    font-size: 18px;
    line-height: 1;
}

.create-text[b-v7y051y0q4] {
    flex: 1;
}

.create-arrow[b-v7y051y0q4] {
    font-size: 10px;
}

/* Mini Calendar */
.mini-calendar[b-v7y051y0q4] {
    display: flex;
    flex-direction: column;
}

.mini-calendar:focus-visible[b-v7y051y0q4] {
   
}

[b-v7y051y0q4] :focus-visible {
    outline: 1px solid var(--use-action-2);
}

/* Search Box */
.search-box[b-v7y051y0q4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--main-gray-solid-1);
    border: 1px solid var(--use-stroke-neutral-2);
    border-radius: 6px;
}

.search-icon[b-v7y051y0q4] {
    font-size: 14px;
    color: var(--use-text-positive-placeholder);
}

.search-box input[b-v7y051y0q4] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--size-b2);
    color: var(--use-text-positive-loud);
    max-width: none;
    width: 100%;
}

.search-box input[b-v7y051y0q4]::placeholder {
    color: var(--use-text-positive-placeholder);
}

.search-shortcut[b-v7y051y0q4] {
    font-size: var(--size-b3);
    color: var(--use-text-positive-placeholder);
    background-color: var(--use-stroke-neutral-1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Time Off Section */
.time-off-section[b-v7y051y0q4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.time-off-header[b-v7y051y0q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--size-b2);
    font-weight: 600;
    color: var(--use-text-positive-loud);
}

.expand-icon[b-v7y051y0q4] {
    font-size: 10px;
    color: var(--use-text-positive-quiet);
}

.time-off-summary[b-v7y051y0q4] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.time-off-number[b-v7y051y0q4] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--use-text-positive-loud);
}

.time-off-label[b-v7y051y0q4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.label-title[b-v7y051y0q4] {
    font-size: var(--size-b2);
    font-weight: 600;
    color: var(--use-text-positive-loud);
}

.label-subtitle[b-v7y051y0q4] {
    font-size: var(--size-b3);
    color: var(--use-text-positive-quiet);
}

.time-off-requests[b-v7y051y0q4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.time-off-item[b-v7y051y0q4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--size-b2);
}

.time-off-icon[b-v7y051y0q4] {
    font-size: 16px;
}

.time-off-days[b-v7y051y0q4] {
    flex: 1;
    color: var(--use-text-positive-loud);
}

.time-off-status[b-v7y051y0q4] {
    font-size: var(--size-b3);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.time-off-status.pending[b-v7y051y0q4] {
    background-color: var(--main-accent-yellow-1);
    color: var(--use-text-accent-yellow-loud);
}

.time-off-status.approved[b-v7y051y0q4] {
    background-color: var(--main-accent-green-1);
    color: var(--use-text-accent-green-loud);
}

/* Time Insights */
.time-insights[b-v7y051y0q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--size-b2);
    font-weight: 600;
    color: var(--use-text-positive-loud);
    padding: 8px 0;
    border-top: 1px solid var(--use-stroke-neutral-2);
    border-bottom: 1px solid var(--use-stroke-neutral-2);
}

.insights-icon[b-v7y051y0q4] {
    font-size: 16px;
}

/* My Calendars */
.my-calendars[b-v7y051y0q4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calendars-header[b-v7y051y0q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--size-b2);
    font-weight: 600;
    color: var(--use-text-positive-loud);
}

.calendar-item[b-v7y051y0q4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--size-b2);
    padding: 4px 0;
}

.calendar-item input[type="checkbox"][b-v7y051y0q4] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.calendar-color[b-v7y051y0q4] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.calendar-name[b-v7y051y0q4] {
    flex: 1;
    color: var(--use-text-positive-loud);
}

/* ===================================
   Main Calendar Area
   =================================== */
.calendar-main[b-v7y051y0q4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===================================
   Custom Toolbar Styles
   =================================== */
.custom-toolbar[b-v7y051y0q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: var(--scheduler-toolbar-border-width, 1px) solid var(--use-stroke-neutral-2);
    background-color: var(--use-background-100);
}

.toolbar-left[b-v7y051y0q4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-right[b-v7y051y0q4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-v7y051y0q4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--use-stroke-neutral-2);
    background-color: var(--use-background-100);
    color: var(--use-text-positive-loud);
    border-radius: 6px;
    font-size: var(--size-b2);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-btn:hover[b-v7y051y0q4] {
    background-color: var(--use-action-1);
    border-color: var(--use-stroke-neutral-3);
}

.toolbar-btn-today[b-v7y051y0q4] {
    font-weight: 600;
}

.toolbar-btn-nav[b-v7y051y0q4] {
    padding: 8px 12px;
}

.nav-icon[b-v7y051y0q4] {
    font-size: 18px;
    line-height: 1;
}

.toolbar-range[b-v7y051y0q4] {
    font-size: var(--size-h5);
    font-weight: 600;
    color: var(--use-text-positive-loud);
    margin-left: 8px;
}

.toolbar-dropdown[b-v7y051y0q4] {
    min-width: 100px;
    justify-content: space-between;
}

.dropdown-icon[b-v7y051y0q4] {
    font-size: 10px;
    color: var(--use-text-positive-quiet);
}

.toolbar-icon-btn[b-v7y051y0q4] {
    padding: 8px 12px;
}

.toolbar-icon-btn .icon[b-v7y051y0q4] {
    font-size: var(--size-b2);
}
/* /Pages/Development/SampleQuillzor/Chat.razor.rz.scp.css */

.mention-blot[b-xuih9eznu2]{
    display: inline-flex;
    position: relative;
    vertical-align: baseline;
    gap: 0.25em;
}
.mention-image[b-xuih9eznu2]{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    transform: translateY(-2px);
}
.mention-text[b-xuih9eznu2]{
    display: inline-flex;
    align-items: center;
}