/* <Schedule /> — ported from the v5 plugin stylesheet (lm-schedule-*) */

.lm-schedule {
    /* Own surface + text color: the grid must not depend on the host
       page's colors, or dark mode leaves a light page showing through */
    background-color: var(--lm-background-color, #fff);
    color: var(--lm-font-color, #313131);
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lm-border-color-highlight, #aaa) var(--lm-border-color-light, #e9e9e9);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    max-height: calc(100vh - 100px);
    position: relative;
    border-bottom: 1px solid var(--lm-border-color-light, #e9e9e9);
    outline: none;
    box-sizing: border-box;
}

/* Keyboard focus on the grid root: the base rule suppresses the default
   outline (the selection ring marks the active event), but 2.4.7 needs a
   visible indicator on the focused container itself */
.lm-schedule:focus-visible {
    outline: 2px solid var(--lm-main-color, #2563eb);
    outline-offset: -2px;
}

.lm-schedule table {
    table-layout: fixed;
    font-size: 0.8em;
    border-collapse: collapse;
    white-space: nowrap;
    empty-cells: show;
    width: 100%;
}

/* Narrow screens: 7 day columns cannot compress forever — below ~640px
   the grid keeps a usable column width and pans horizontally instead
   (no effect on wider hosts, where 100% already exceeds the minimum) */
.lm-schedule[data-type="week"] table,
.lm-schedule[data-type="weekdays"] table {
    min-width: 640px;
}

/* While panning, the hour rail stays pinned left (headers already pin
   top). EVERY row's first cell is rail — only hour-boundary rows carry
   .lm-schedule-hour, so selecting via that class left the sub-rows
   unpinned and events showed through. Layering: items 1 < selected 3 <
   rail 4 < hour rail 5 < thead 6 < corner 7. The hour-boundary cell sits
   ABOVE plain rail cells because its time label overflows downward into
   the next row's (opaque) cell, which is later in the DOM and would
   otherwise paint over the label. */
.lm-schedule table tbody td:first-child {
    position: sticky;
    left: 0;
    background-color: var(--lm-background-color, #fff);
    z-index: 4;
}

.lm-schedule tbody .lm-schedule-hour > td:first-child {
    z-index: 5;
}

.lm-schedule thead td:first-child {
    position: sticky;
    left: 0;
    z-index: 7;
}

.lm-schedule thead td {
    background-color: var(--lm-background-color, #fff);
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 2.2em;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 6;
}

.lm-schedule thead td:first-child {
    width: 50px;
}

.lm-schedule[data-type="day"] thead td {
    text-align: center;
}

.lm-schedule .lm-schedule-hour > td {
    width: auto;
    border-top: 1px solid var(--lm-border-color-light, #e9e9e9);
}

.lm-schedule .lm-schedule-index {
    position: absolute;
    font-size: 0.9em;
    margin-top: 5px;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.lm-schedule td {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    position: relative;
}

.lm-schedule tbody td {
    border-top: 1px solid transparent;
    padding: 0;
}

.lm-schedule .lm-schedule-hour > td:first-child {
    width: 50px;
}

/* Today (Outlook-style): accent header with a 2px underline, and the
   whole column body gets a faint accent wash */
.lm-schedule thead td[data-selected='true'] {
    background-color: var(--lm-background-color-header, #ececec);
    color: var(--lm-main-color, #2563eb);
}

/* a slight neutral wash — mixed from the font color so it grays correctly
   in dark mode too (a fixed light gray would glow on a dark surface) */
.lm-schedule tbody td[data-today='true'] {
    background-color: color-mix(in srgb, var(--lm-font-color, #000) 4%, transparent);
}

.lm-schedule thead td:before {
    content: attr(data-weekday);
    font-size: 0.5em;
    text-transform: uppercase;
    padding-bottom: 6px;
    display: block;
}

.lm-schedule thead td:after {
    content: '';
    border-bottom: 1px solid var(--lm-border-color, #e4e4e7);
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
}

.lm-schedule thead td[data-selected='true']:after {
    border-bottom: 2px solid var(--lm-main-color, #2563eb);
}

.lm-schedule table tbody td:first-child {
    border-right: 1px solid var(--lm-border-color, #e4e4e7);
}

.lm-schedule-item {
    position: absolute;
    height: 10px;
    top: 0;
    color: var(--lm-schedule-color, white);
    background-color: var(--lm-schedule-background, #66b244);
    z-index: 1;
    border: 1px solid var(--lm-background-color, #fff);
    box-sizing: border-box;
    border-radius: var(--lm-radius, 6px);
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    flex-wrap: wrap;
    -webkit-font-smoothing: antialiased;
    width: 100%;
}

.lm-schedule-item[data-readonly="true"] {
    opacity: 0.8;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #ffffff11 0, #ffffff11 1px, #ffffff33 0, #ffffff33 50%);
}

.lm-schedule-item:not([data-readonly="true"]) {
    opacity: var(--entries-opacity, 1);
}

/* Warning flag: ring sits OUTSIDE the item with a 1px gap (the grid shows
   through), so it still reads when the item itself is red; the ⚠ glyph
   inherits the contrast-aware text color as a second, color-proof signal */
.lm-schedule-item[data-warning="true"] {
    outline: 2px solid var(--lm-color-danger, #dc2626);
    outline-offset: 1px;
}

.lm-schedule-item[data-warning="true"]:before {
    content: '\26A0\FE0E  ' attr(data-title);
}

.lm-schedule-item[data-warning="true"][data-description]:not([data-description=""]):before {
    content: '\26A0\FE0E  ' attr(data-title) '\A' attr(data-description);
}

.lm-schedule-item[data-visible="false"] {
    display: none;
}

.lm-schedule-item[data-height="1"],
.lm-schedule-item[data-height="2"],
.lm-schedule-item[data-height="3"] {
    font-size: 0.7em;
    padding: 1px 4px 0 4px;
    flex-wrap: nowrap;
}

.lm-schedule-large .lm-schedule-item[data-height="1"] {
    font-size: 0.7em;
    padding: 1px 4px 0 4px;
    flex-wrap: nowrap;
}

.lm-schedule-large .lm-schedule-item[data-height="2"] {
    font-size: 0.9em;
    padding: 4px;
    flex-wrap: nowrap;
}

.lm-schedule-large .lm-schedule-item[data-height="3"] {
    font-size: 1em;
    padding: 6px;
    flex-wrap: nowrap;
}

.lm-schedule-item:before {
    content: attr(data-title);
    font-size: 0.9em;
    margin-left: 2px;
    margin-bottom: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    height: 16px;
}

.lm-schedule-item[data-description]:not([data-description=""]):before {
    content: attr(data-title) '\A' attr(data-description);
    white-space: pre-line;
    height: auto;
}

.lm-schedule-item:after {
    content: attr(data-start) ' - ' attr(data-end);
    font-size: 0.7em;
    margin-left: 2px;
    display: block;
    margin-top: 1px;
    margin-right: 2px;
}

/* The drag ghost: pointer-events off so cells under the cursor receive
   the mousemove (v5 reached them via elementsFromPoint instead) */
.lm-schedule-dragging {
    pointer-events: none;
    opacity: 0.85;
    z-index: 3;
}

/* The "now" line — red like Outlook/Google, deliberately NOT the accent:
   today's column is accent-tinted, so an accent line would sink into it */
.lm-schedule-pointer {
    position: absolute;
    background-color: var(--lm-color-danger, #dc2626);
    height: 2px;
    width: 100%;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.lm-schedule-pointer:before {
    content: '';
    position: absolute;
    background-color: var(--lm-color-danger, #dc2626);
    border-radius: var(--lm-radius, 6px);
    border: 1px solid var(--lm-background-color, #fff);
    width: 10px;
    height: 10px;
    margin: -5px;
}

.lm-schedule-disabled {
    background: repeating-linear-gradient(
        90deg,
        var(--lm-background-color, #fff),
        var(--lm-background-color, #fff) 5px,
        var(--lm-background-color-highlight, #f4f4f4) 5px,
        var(--lm-background-color-highlight, #f4f4f4) 10px
    );
}

.lm-schedule-disabled.lm-schedule-hour {
    color: var(--lm-font-grayout, #aaa);
}

.lm-schedule-selected {
    opacity: 1;
    z-index: 3;
    outline: 2px solid var(--lm-border-outline, #000);
    outline-offset: -2px;
    box-shadow: 0 0 0 2px var(--lm-background-color, #fff), 0 3px 10px rgba(0, 0, 0, 0.3);
    filter: brightness(1.06);
}

.lm-schedule::-webkit-scrollbar {
    width: 8px;
}

.lm-schedule::-webkit-scrollbar-track {
    background: var(--lm-background-color-highlight, #eee);
}

.lm-schedule::-webkit-scrollbar-thumb {
    background: var(--lm-border-color-highlight, #888);
}

/* ---- the built-in event editor (v5 dist/event.js form) ---- */

.lm-schedule-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    font-size: 14px;
}

.lm-schedule-form input[type="text"],
.lm-schedule-form input[type="date"],
.lm-schedule-form select {
    padding: 8px;
    border: 1px solid var(--lm-border-input, var(--lm-border-color, #e4e4e7));
    border-radius: var(--lm-radius, 6px);
    background-color: var(--lm-background-color-input, #fff);
    color: var(--lm-font-color, inherit);
    font: inherit;
    box-sizing: border-box;
    width: 100%;
}

.lm-schedule-editor-when {
    display: flex;
    gap: 8px;
}

.lm-schedule-editor-when > input,
.lm-schedule-editor-when > select {
    min-width: 0;
}

.lm-schedule-editor-palette {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.lm-schedule-editor-palette button {
    border: 1px solid transparent;
    border-radius: var(--lm-radius, 6px);
    height: 24px;
    cursor: pointer;
}

.lm-schedule-editor-palette button[data-selected="true"] {
    outline: 2px solid var(--lm-border-outline, #000);
    outline-offset: 1px;
}

.lm-schedule-editor-save {
    padding: 10px;
    border: 0;
    border-radius: var(--lm-radius, 6px);
    background-color: var(--lm-main-color, #2196f3);
    color: #fff;
    font: inherit;
    cursor: pointer;
}