/* QScheduler Quarkie Theme */

/* ===================================
   Common Variables
   =================================== */
.qscheduler[theme=quarkie] {
    --scheduler-bg: var(--use-background-100);
    --scheduler-border-color: var(--use-stroke-neutral-2);
    --scheduler-border-radius: 12px;
    --scheduler-border-width: 0px;
    --scheduler-toolbar-border-width: 0px;

    /* Typography - Font Families */
    --scheduler-font-family-labels: var(--font-primary, 'Inter'), sans-serif;
    --scheduler-font-family-numbers: var(--font-secondary, 'Bricolage Grotesque'), sans-serif;
    --scheduler-font-family-body: var(--font-primary, 'Inter'), sans-serif;

    /* Typography - Font Sizes */
    --scheduler-font-size-day-label: var(--size-b3, 12px);
    --scheduler-font-size-day-number: 14px;
    --scheduler-font-size-month-header: var(--size-b2, 14px);
    --scheduler-font-size-event-title: var(--size-b3, 12px);
    --scheduler-font-size-event-time: var(--size-cap, 10px);

    /* Typography - Font Colors */
    --scheduler-font-color-day-label: var(--use-text-positive-placeholder, #8d8d8d);
    --scheduler-font-color-day-number: var(--use-text-positive-quiet, #646464);
    --scheduler-font-color-month-header: var(--use-text-positive-loud, #040404);
    --scheduler-font-color-event-title: var(--use-text-positive-loud, #040404);
    --scheduler-font-color-event-time: var(--use-text-positive-quiet, #646464);
    --scheduler-font-color-today-number: var(--use-text-negative-loud, #fcfcfc);
    --scheduler-font-color-other-month: var(--use-text-positive-disabled, #bdbdbd);

    /* Header colors */
    --scheduler-header-bg: var(--use-background-100);
    --scheduler-header-border: var(--use-stroke-neutral-1);
    --scheduler-day-name-color: var(--use-text-positive-quiet);
    --scheduler-day-number-color: var(--use-text-positive-loud);

    /* Time colors */
    --scheduler-time-color: var(--use-text-positive-placeholder);
    --scheduler-time-line-color: var(--use-stroke-neutral-1);

    /* Event colors */
    --scheduler-event-bg: var(--main-gray-solid-2);
    --scheduler-event-border: var(--use-stroke-neutral-2);
    --scheduler-event-title-color: var(--use-text-positive-loud);
    --scheduler-event-time-color: var(--use-text-positive-quiet);
    --scheduler-event-shadow: 0 1px 3px 0 var(--main-gray-alpha-4);
    --scheduler-event-hover-shadow: 0 4px 6px -1px var(--main-gray-alpha-5);

    /* Current time indicator */
    --scheduler-current-time-color: var(--main-accent-red-4);
    --scheduler-current-time-dot-size: 8px;

    /* Today highlight */
    --scheduler-today-bg: var(--main-accent-yellow-1);
    --scheduler-today-border: var(--main-accent-yellow-4);
    --scheduler-today-circle-bg: var(--main-accent-yellow-4);

    /* Hover states */
    --scheduler-cell-hover-bg: var(--main-gray-solid-2);
    --scheduler-day-hover-bg: var(--main-gray-solid-2);

    /* Selection */
    --scheduler-selection-bg: var(--use-action-1, rgba(0, 0, 0, 0.03));
    --scheduler-range-selected-bg: var(--use-action-1, rgba(0, 0, 0, 0.03));
    --scheduler-range-selected-border: var(--use-action-2, rgba(0, 0, 0, 0.06));
    --scheduler-range-selected-border-width: 2px;

    /* Focus states */
    --scheduler-focus-outline-color: var(--use-stroke-neutral-2, rgba(0, 0, 0, 0.1));
    --scheduler-focus-outline-width: 1px;
    --scheduler-focus-outline-offset: 2px;
    --scheduler-focus-outline-style: solid;

    /* Other month */
    --scheduler-other-month-bg: var(--main-gray-solid-1);
    --scheduler-other-month-color: var(--use-text-positive-disabled);

    /* Week numbers */
    --scheduler-week-number-bg: var(--main-gray-solid-2);
    --scheduler-week-number-color: var(--use-text-positive-placeholder);

    /* Resize handle */
    --scheduler-resize-handle-color: var(--main-accent-blue-4);

    /* Drop target */
    --scheduler-drop-target-bg: var(--main-accent-blue-1);
    --scheduler-drop-target-border: var(--main-accent-blue-4);

    /* Focus */
    --scheduler-focus-color: var(--main-accent-blue-4);

    /* More events */
    --scheduler-more-events-color: var(--main-accent-blue-4);
    --scheduler-more-events-hover-color: var(--use-text-accent-brand-loud);

    background-color: var(--scheduler-bg);
    border-radius: var(--scheduler-border-radius);
    overflow: hidden;

    --scheduler-header-border-bottom: 0;
    --scheduler-header-border-width: 0;
}

/* ===================================
   Daily View Specific
   =================================== */
.qscheduler[theme=quarkie].qscheduler-daily {
    /* box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);*/
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-daily-header {
    background-color: var(--scheduler-header-bg);
    border-bottom: var(--scheduler-border-width) solid var(--scheduler-header-border);
    padding: 1rem;
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-day-label {
    color: var(--scheduler-day-name-color);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-day-number {
    color: var(--scheduler-day-number-color);
    font-size: 1.5rem;
    font-weight: 600;
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-time-column {
    border-right: var(--scheduler-border-width) solid var(--scheduler-border-color);
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-time-label {
    color: var(--scheduler-time-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-time-slot {
    border-top: var(--scheduler-border-width) solid var(--scheduler-time-line-color);
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-event {
    background-color: var(--scheduler-event-bg);
    border: var(--scheduler-border-width) solid var(--scheduler-event-border);
    border-left-width: 3px;
    border-radius: 6px;
    box-shadow: var(--scheduler-event-shadow);
    padding: 0.5rem;
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-event:hover {
    box-shadow: var(--scheduler-event-hover-shadow);
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-event-time {
    color: var(--scheduler-event-time-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-event-title {
    color: var(--scheduler-event-title-color);
    font-size: 0.875rem;
    font-weight: 600;
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-current-time-indicator {
    border-top: 2px solid var(--scheduler-current-time-color);
}

.qscheduler[theme=quarkie].qscheduler-daily .scheduler-current-time-indicator::before {
    width: var(--scheduler-current-time-dot-size);
    height: var(--scheduler-current-time-dot-size);
    background-color: var(--scheduler-current-time-color);
    border-radius: 50%;
}

/* ===================================
   Weekly View Specific
   =================================== */
.qscheduler[theme=quarkie].qscheduler-weekly {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-week-header {
    background-color: var(--scheduler-header-bg);
    border-bottom: var(--scheduler-border-width) solid var(--scheduler-header-border);
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-day-header {
    border-right: var(--scheduler-border-width) solid var(--scheduler-border-color);
    padding: 1rem 0.5rem;
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-day-header:last-child {
    border-right: none;
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-day-name {
    color: var(--scheduler-day-name-color);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-day-date {
    color: var(--scheduler-day-number-color);
    font-size: 1.25rem;
    font-weight: 600;
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-day-date.today {
    background-color: var(--scheduler-today-circle-bg);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-time-gutter {
    border-right: var(--scheduler-border-width) solid var(--scheduler-border-color);
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-time-label {
    color: var(--scheduler-time-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-week-grid {
    border-top: var(--scheduler-border-width) solid var(--scheduler-time-line-color);
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-day-column {
    border-right: var(--scheduler-border-width) solid var(--scheduler-border-color);
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-day-column:last-child {
    border-right: none;
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-day-column.today {
    background-color: var(--scheduler-today-bg);
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-event {
    background-color: var(--scheduler-event-bg);
    border: var(--scheduler-border-width) solid var(--scheduler-event-border);
    border-left-width: 3px;
    border-radius: 6px;
    box-shadow: var(--scheduler-event-shadow);
}

.qscheduler[theme=quarkie].qscheduler-weekly .scheduler-event:hover {
    box-shadow: var(--scheduler-event-hover-shadow);
}

/* ===================================
   Monthly View Specific
   =================================== */
.qscheduler[theme=quarkie].qscheduler-monthly {
    /* box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);*/
    border: none;
}

/* ===================================
   Normal Size Variant
   =================================== */
.qscheduler[theme=quarkie].qscheduler-normal {
    /* Container border configuration - disabled by default */
    --scheduler-container-border-width: 0px;
    --scheduler-container-border-color: var(--use-stroke-neutral-2, rgba(0, 0, 0, 0.06));
    --scheduler-container-border-radius: 0px;
}

.qscheduler[theme=quarkie].qscheduler-monthly.qscheduler-normal {
    border: none;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-calendar-week {
    min-height: 120px;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-day-cell {
    min-height: 120px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid var(--use-stroke-neutral-2, rgba(0, 0, 0, 0.06)) !important;
    border-radius: 0.625rem;
    margin: 0.375rem;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-day-number {
    font-family: var(--scheduler-font-family-body);
    font-size: var(--size-b2, 14px);
    font-weight: 400;
    color: var(--scheduler-font-color-day-number);
    line-height: 1.5;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-day-cell.today {
    background-color: transparent;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-day-cell.today .scheduler-day-number {
    background-color: var(--use-button-primary-idle, #040404);
    color: var(--use-text-negative-loud, #fcfcfc);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

/* Multi-day event styling for Normal variant */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-week-multiday-layer {
    padding: 4px 0;
    gap: 4px;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-week-multiday-event {
    background-color: var(--event-bg-color, var(--main-accent-green-1));
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    min-height: 24px;
    display: flex;
    align-items: center;
    box-shadow: none;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-week-multiday-event:hover {
    opacity: 0.9;
    transform: none;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-week-multiday-title {
    font-family: var(--scheduler-font-family-body);
    font-size: var(--size-b3, 12px);
    font-weight: 400;
    color: var(--use-text-positive-loud, #040404);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qscheduler[theme=quarkie] .scheduler-monthly-header {
    background-color: var(--scheduler-header-bg);
    border-bottom: var(--scheduler-border-width) solid var(--scheduler-header-border);
}

.qscheduler[theme=quarkie] .scheduler-day-name-header {
    color: var(--scheduler-day-name-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 0.5rem;
    border-right: var(--scheduler-border-width) solid var(--scheduler-border-color);
}

.qscheduler[theme=quarkie] .scheduler-day-name-header:last-child {
    border-right: none;
}

.qscheduler[theme=quarkie] .scheduler-week-number-header,
.qscheduler[theme=quarkie] .scheduler-week-number {
    background-color: var(--scheduler-week-number-bg);
    color: var(--scheduler-week-number-color);
    border-right: var(--scheduler-border-width) solid var(--scheduler-border-color);
}

.qscheduler[theme=quarkie] .scheduler-calendar-week {
    border-bottom: var(--scheduler-border-width) solid var(--scheduler-border-color);
}

.qscheduler[theme=quarkie] .scheduler-day-cell {
    border-right: var(--scheduler-border-width) solid var(--scheduler-border-color);
    background-color: var(--scheduler-bg);
    padding: 4px;
}

.qscheduler[theme=quarkie] .scheduler-day-cell:last-child {
    border-right: none;
}

.qscheduler[theme=quarkie] .scheduler-day-cell.other-month {
    background-color: var(--scheduler-other-month-bg);
}

.qscheduler[theme=quarkie] .scheduler-day-cell.other-month .scheduler-day-number {
    color: var(--scheduler-other-month-color);
}

.qscheduler[theme=quarkie] .scheduler-day-cell.current-month:hover {
    background-color: var(--scheduler-day-hover-bg);
}

.qscheduler[theme=quarkie] .scheduler-day-cell.today {
    background-color: var(--scheduler-today-bg);
}

.qscheduler[theme=quarkie] .scheduler-day-cell.range-selected {
    background-color: var(--scheduler-range-selected-bg);
    outline: 2px solid var(--scheduler-range-selected-border);
    outline-offset: -2px;
}

.qscheduler[theme=quarkie] .scheduler-day-number {
    color: var(--scheduler-day-number-color);
    font-size: 0.875rem;
    font-weight: 600;
}

.qscheduler[theme=quarkie] .scheduler-day-cell.today .scheduler-day-number {
    background-color: var(--scheduler-today-circle-bg);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
}

.qscheduler[theme=quarkie] .scheduler-week-multiday-event,
.qscheduler[theme=quarkie] .scheduler-event-chip {
    border: var(--scheduler-border-width) solid var(--scheduler-event-border);
    border-left-width: 3px;
    border-radius: 6px;
    box-shadow: var(--scheduler-event-shadow);
    padding: 4px 8px;
}

/* Full day events background */
.qscheduler[theme=quarkie] .scheduler-week-multiday-event {
    background-color: var(--main-accent-yellow-1);
}

/* Regular event chips */
.qscheduler[theme=quarkie] .scheduler-event-chip {
    background-color: var(--scheduler-event-bg);
}

.qscheduler[theme=quarkie] .scheduler-week-multiday-event:hover,
.qscheduler[theme=quarkie] .scheduler-event-chip:hover {
    box-shadow: var(--scheduler-event-hover-shadow);
    transform: translateY(-1px);
    transition: all 0.15s ease;
}

.qscheduler[theme=quarkie] .scheduler-event-chip-time {
    color: var(--scheduler-event-time-color);
    font-weight: 500;
}

.qscheduler[theme=quarkie] .scheduler-event-chip-title {
    color: var(--scheduler-event-title-color);
    font-weight: 600;
}

.qscheduler[theme=quarkie] .scheduler-week-multiday-hidden {
    background-color: var(--use-stroke-neutral-1);
    border: 1px dashed var(--scheduler-border-color);
    color: var(--scheduler-more-events-color);
    font-weight: 600;
}

.qscheduler[theme=quarkie] .scheduler-week-multiday-hidden:hover {
    background-color: var(--use-stroke-neutral-2);
    color: var(--scheduler-more-events-hover-color);
}

.qscheduler[theme=quarkie] .scheduler-more-events {
    color: var(--scheduler-more-events-color);
    font-weight: 600;
    font-size: 0.8125rem;
}

.qscheduler[theme=quarkie] .scheduler-more-events:hover {
    color: var(--scheduler-more-events-hover-color);
}

/* ===================================
   Resize Handles
   =================================== */
.qscheduler[theme=quarkie] .scheduler-resize-handle::before {
    background-color: var(--scheduler-resize-handle-color);
}

/* ===================================
   Drop Target
   =================================== */
.qscheduler[theme=quarkie] .scheduler-day-drop-target {
    outline: 2px solid var(--scheduler-drop-target-border);
    outline-offset: -2px;
    background-color: var(--scheduler-drop-target-bg);
}

/* ===================================
   Focus States
   =================================== */
.qscheduler[theme=quarkie]:focus {
    outline: none;
}

.qscheduler[theme=quarkie]:focus-visible {
    outline: none;
}

.qscheduler[theme=quarkie]:focus-within {
    outline: none;
}

/* ===================================
   Tiny Size Variant
   =================================== */
.qscheduler[theme=quarkie].qscheduler-tiny {
    --scheduler-border-radius: 10px;

    /* Tiny size typography overrides */
    --scheduler-font-size-day-label: var(--size-b3, 12px);
    --scheduler-font-size-day-number: var(--size-b2, 14px);
    --scheduler-font-color-day-label: var(--use-text-positive-quiet, #040404);

    box-shadow: none;
    height: auto !important;
    min-height: unset !important;
}

/* Tiny Monthly View */
.qscheduler[theme=quarkie].qscheduler-tiny.qscheduler-monthly {
    box-shadow: none;
    height: auto !important;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-toolbar {
    display: none;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-content {
    padding: 8px;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-monthly-view {
    display: flex;
    flex-direction: column;
    height: auto;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-monthly-header {
    padding: 0;
    border: none;
    gap: 2px;
    flex-shrink: 0;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-day-name-header {
    font-family: var(--scheduler-font-family-labels);
    font-size: var(--scheduler-font-size-day-label);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.28px;
    color: var(--scheduler-font-color-day-label);
    padding: 0;
    height: 21px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-calendar-week {
    min-height: unset;
    max-height: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-bottom: none;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-week-grid {
    height: 28px;
    min-height: 28px;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-week-multiday-layer {
    display: none;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-monthly-grid {
    gap: 4px;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-day-cell {
    min-height: 28px;
    max-height: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-day-number {
    font-family: var(--scheduler-font-family-numbers);
    font-size: var(--scheduler-font-size-day-number);
    font-weight: 400;
    line-height: 1;
    color: var(--scheduler-font-color-day-number);
    padding: 0;
    text-align: center;
    width: auto;
}

/* Current day in tiny calendar - only the number has background */
.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-day-cell.today {
    background-color: transparent;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-day-cell.today .scheduler-day-number {
    background-color: var(--use-button-primary-idle, #040404);
    color: var(--use-text-negative-loud, #fcfcfc);
    border: 2.5px solid var(--use-stroke-neutral-1, rgba(0, 0, 0, 0.03));
    border-radius: 6px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

/* Show events as dots in tiny calendar */
.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-week-multiday-event,
.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-event-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4px;
    height: 4px;
    min-height: 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--main-accent-blue-4);
    box-shadow: none;
    margin: 2px auto;
    overflow: hidden;
    text-indent: -9999px;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-week-multiday-event:hover,
.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-event-chip:hover {
    box-shadow: none;
    transform: none;
}

.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-week-number-header,
.qscheduler[theme=quarkie].qscheduler-tiny .scheduler-week-number {
    display: none; /* Hide week numbers in tiny calendar */
}

/* ===================================
   Daily View - White Theme Normal Variant
   =================================== */
.qscheduler[theme=quarkie].qscheduler-normal.qscheduler-daily {
    background-color: var(--use-background-100, #ffffff);

    /* Daily view border variables */
    --scheduler-daily-border-width: 0.5px;
    --scheduler-daily-border-color: var(--use-action-2, rgba(0, 0, 0, 0.06));
    --scheduler-daily-time-column-border-width: 0px;
    --scheduler-daily-time-slot-border-width: 0px;
    --scheduler-daily-grid-cell-border-width: 1px;
}

/* Time column styling - 1.8125rem (29px) width from Figma spacer */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-time-column {
    width: 2.8125rem;
    background-color: transparent;
    border-right: var(--scheduler-daily-time-column-border-width, 0) solid var(--scheduler-daily-border-color);
}

/* Time slots - 5rem (80px) height (4.5625rem gap between labels + 0.4375rem label height) */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-time-slot {
    border-bottom: var(--scheduler-daily-time-slot-border-width, 0) solid var(--scheduler-daily-border-color);
    padding-top: 0;
    height: 5rem;
    display: flex;
    align-items: flex-start;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-time-label {
    font-family: var(--primary, 'Inter', sans-serif);
    font-size: var(--size-cap, 0.625rem);
    font-weight: 400;
    color: var(--use-text-positive-quiet, #646464);
    line-height: 1.3;
    letter-spacing: -0.0125rem;
    padding: 0;
    text-align: left;
    width: 100%;
    white-space: pre;
}

/* Events column styling - 0.75rem (12px) gap from content */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-events-column {
    background-color: var(--use-background-100, #ffffff);
    border-left: var(--scheduler-daily-time-column-border-width, 0) solid var(--scheduler-daily-border-color);
    border: 0.0625rem solid var(--use-stroke-neutral-1, rgba(0, 0, 0, 0.03));
    border-radius: 0.25rem;
    margin-left: 0.75rem;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-time-grid-cell {
    border-bottom: var(--scheduler-daily-grid-cell-border-width, 0.03125rem) solid var(--scheduler-daily-border-color);
    height: 5rem;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-time-grid-cell:hover {
    background-color: var(--use-action-1, rgba(0, 0, 0, 0.02));
}

/* Event styling - from Figma Slots/Events component */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-event {
    background-color: var(--event-bg-color, var(--main-accent-purple-1, #eff0fa));
    border: none;
    border-radius: 0.625rem;
    padding: 0.25rem;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-event:hover {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

/* Event content styling */

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-event-time {
    font-family: var(--primary, 'Inter', sans-serif);
    font-size: var(--size-b3, 0.75rem);
    font-weight: 400;
    color: var(--use-text-positive-quiet, #646464);
    line-height: 1;
    letter-spacing: -0.015rem;
    opacity: 0.8;
    padding: 0.25rem;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-event-title {
    font-family: var(--primary, 'Inter', sans-serif);
    font-size: var(--size-b3, 0.75rem);
    font-weight: 400;
    color: var(--use-text-positive-loud, #040404);
    line-height: 1.3;
    letter-spacing: -0.015rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Event icon styling */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-event-icon {
    background-color: var(--use-action-2, rgba(0, 0, 0, 0.06));
    border-radius: 0.375rem;
    padding: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Current time indicator */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-current-time-indicator {
    background-color: var(--use-alert-red-loud, #FF3B30);
    height: 0.125rem;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-current-time-indicator::before {
    background-color: var(--use-alert-red-loud, #FF3B30);
    width: 0.625rem;
    height: 0.625rem;
    left: -0.3125rem;
    top: -0.25rem;
}

/* Resize handles */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-resize-handle::after {
    background-color: var(--use-stroke-neutral-3, rgba(0, 0, 0, 0.12));
    height: 0.25rem;
    border-radius: 0.125rem;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-resize-handle:hover::after {
    background-color: var(--use-stroke-neutral-4, rgba(0, 0, 0, 0.18));
}

/* All-day events styling for Daily view */
.qscheduler[theme=quarkie].qscheduler-normal .scheduler-all-day-section {
    background-color: var(--use-background-100, #ffffff);
    border-bottom: var(--scheduler-daily-time-slot-border-width, 0) solid var(--scheduler-daily-border-color);
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-all-day-label {
    font-family: var(--scheduler-font-family-body);
    font-size: var(--size-b3, 0.75rem);
    font-weight: 400;
    color: var(--use-text-positive-quiet, #646464);
    text-transform: none;
    letter-spacing: 0;
}

.qscheduler[theme=quarkie].qscheduler-normal.qscheduler-daily .scheduler-all-day-header {
    /*margin-left: 1.425rem;*/
    margin-left: 1.425rem;
    background: none;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-all-day-event {
    background-color: var(--event-bg-color, var(--main-accent-yellow-1, #FFF9E6));
    border-left: 0.1875rem solid var(--event-border-color, var(--main-accent-yellow-4, #F5C563));
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-all-day-event:hover {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

.qscheduler[theme=quarkie].qscheduler-normal .scheduler-all-day-event-title {
    font-family: var(--scheduler-font-family-body);
    font-size: var(--size-b2, 0.875rem);
    font-weight: 500;
    color: var(--use-text-positive-loud, #040404);
}

/* ===================================
   Weekly View - White Theme Normal Variant
   =================================== */
.qscheduler[theme=quarkie].qscheduler-normal.qscheduler-weekly {
    background-color: var(--use-background-100, #ffffff);
    box-shadow: none;

    /* Weekly view border variables */
    --scheduler-weekly-border-width: 0px;
    --scheduler-weekly-border-color: var(--use-action-2, rgba(0, 0, 0, 0.06));
    --scheduler-weekly-time-column-border-width: 0px;
    --scheduler-weekly-time-slot-border-width: 1px;
    --scheduler-weekly-grid-cell-border-width: 1px;
    --scheduler-weekly-day-column-border-width: 1px;
    --scheduler-weekly-header-border-width: 0px;
}

/* Weekly grid borders */
.qscheduler[theme=quarkie].qscheduler-normal.qscheduler-weekly .scheduler-day-column {
    border-right: 1px solid var(--use-action-2, rgba(0, 0, 0, 0.06));
}

.qscheduler[theme=quarkie].qscheduler-normal.qscheduler-weekly .scheduler-day-column:last-child {
    border-right: none;
}

.qscheduler[theme=quarkie].qscheduler-normal.qscheduler-weekly .scheduler-time-grid-cell.alternate {
    border-top: 1px solid var(--use-action-2, rgba(0, 0, 0, 0.06));
}

.qscheduler[theme=quarkie].qscheduler-normal.qscheduler-weekly .scheduler-time-grid-cell.hour-boundary {
    border-bottom: 1px solid var(--use-action-2, rgba(0, 0, 0, 0.06));
}

.qscheduler[theme=quarkie].qscheduler-normal.qscheduler-weekly .scheduler-time-grid-cell:hover {
    background-color: var(--use-action-1, rgba(0, 0, 0, 0.02));
    border-bottom: 1px solid var(--use-action-2, rgba(0, 0, 0, 0.06));
}

/* ===================================
   Keyboard Shortcuts & Copy/Paste
   JavaScript Migration Features
   =================================== */

/* Event focused state (for keyboard navigation) */
.scheduler-event-focused {
    outline: 2px solid var(--use-stroke-accent-1, #3498db);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
    z-index: 10;
}

/* Event selected state (for copy operations) */
.scheduler-event-selected {
    outline: 2px solid var(--use-stroke-accent-1, #3498db);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.15);
    z-index: 10;
}

/* Event copied feedback animation */
.scheduler-event-copied {
    animation: pulse-copied 0.5s ease-out;
}

@keyframes pulse-copied {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Paste mode indicator */
.scheduler-paste-mode {
    cursor: crosshair;
}

.scheduler-paste-mode .scheduler-day-cell,
.scheduler-paste-mode .scheduler-time-slot {
    transition: background-color 0.15s ease;
}

.scheduler-paste-mode .scheduler-day-cell:hover,
.scheduler-paste-mode .scheduler-time-slot:hover {
    background-color: rgba(52, 152, 219, 0.08);
    cursor: pointer;
}

/* Event preview ghost (during paste) */
.scheduler-event-preview {
    opacity: 0.6;
    pointer-events: none;
    border: 2px dashed var(--use-stroke-accent-1, #3498db);
    background-color: rgba(52, 152, 219, 0.1) !important;
    animation: fade-in 0.2s ease-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 0.6;
        transform: scale(1);
    }
}

/* Toast notification animations */
@keyframes toast-slide-in {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateX(400px);
    }
}

/* Toast notification styles (base) */
.scheduler-toast {
    padding: 12px 20px;
    background: var(--use-background-100, #ffffff);
    border: 1px solid var(--use-stroke-neutral-2, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: var(--size-b2, 14px);
    color: var(--use-text-positive-loud, #111827);
    max-width: 300px;
    animation: toast-slide-in 0.3s ease-out;
}

/* Toast variants */
.scheduler-toast-success {
    border-left-width: 4px;
    border-left-color: var(--use-stroke-success-1, #10b981);
}

.scheduler-toast-warning {
    border-left-width: 4px;
    border-left-color: var(--use-stroke-warning-1, #f59e0b);
}

.scheduler-toast-info {
    border-left-width: 4px;
    border-left-color: var(--use-stroke-accent-1, #3498db);
}

.scheduler-toast-error {
    border-left-width: 4px;
    border-left-color: var(--use-stroke-error-1, #ef4444);
}

/* Keyboard shortcuts help text (if needed) */
.scheduler-keyboard-hint {
    font-size: var(--size-b3, 12px);
    color: var(--use-text-positive-quiet, #6b7280);
    font-family: var(--font-mono, 'Courier New', monospace);
    padding: 2px 6px;
    background: var(--use-background-200, #f3f4f6);
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--use-stroke-neutral-2, #e5e7eb);
}