/* calendar-common.css - v1.0.26 */
/* Keep applied highlight colors visible through the live text selection. */
.text-editor-content::selection,
.text-editor-content *::selection,
.top-notes-box::selection,
.top-notes-box *::selection,
.notes-column::selection,
.notes-column *::selection {
    background-color: rgba(59, 130, 246, 0.28);
    color: inherit;
}

[data-note-checkbox-button][aria-pressed="true"] {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 0 0 1px #93c5fd;
}

input[type="checkbox"][data-note-checkbox] {
    width: 18px;
    height: 18px;
    /* Center the control on the text, including its ascenders and descenders. */
    vertical-align: calc(0.4em - 9px);
}

.text-note-cols input[type="checkbox"][data-note-checkbox],
.compact-notes-editor input[type="checkbox"][data-note-checkbox] {
    width: 14px;
    height: 14px;
    vertical-align: calc(0.4em - 7px);
}

.inspection-pill-row,
.break-pill-row {
    position: absolute;
    bottom: -6px;
    left: var(--inspection-inset, 8px);
    right: var(--inspection-inset, 8px);
    z-index: 20;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    min-width: 0;
}
.inspection-pill-row--before,
.break-pill-row--before {
    top: -6px;
    bottom: auto;
}
.inspection-border-pill {
    position: static;
    height: 10px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--inspection-shadow, 0 2px 4px rgba(0, 0, 0, 0.15));
    overflow: visible;
}
.inspection-border-pill--button { cursor: pointer; font: inherit; }
.inspection-border-pill--expanded { opacity: 0; }
.inspection-border-pill--button:focus-visible { outline: 2px solid #1e5799; outline-offset: 2px; }
.inspection-pill-text {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
}
.break-border-pill {
    position: absolute;
    bottom: -6px;
    left: var(--inspection-inset, 8px);
    right: var(--inspection-inset, 8px);
    height: 10px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 19;
    background-color: #6b7280;
    color: #ffffff;
    box-shadow: var(--inspection-shadow, 0 2px 4px rgba(0, 0, 0, 0.15));
    overflow: visible;
}
.break-border-pill--before { top: -6px; bottom: auto; }
.break-pill-row { z-index: 19; }
.break-pill-row > .break-border-pill {
    position: static;
    flex: 1 1 0;
    min-width: 0;
}
.inspection-detail {
    display: block;
    min-width: min(180px, calc(100vw - 24px));
    max-width: min(420px, calc(100vw - 24px));
    max-height: min(420px, calc(100dvh - 32px));
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.inspection-detail__text {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    line-height: 1.4;
}
.inspection-grow-transition-enter-active { transition: transform 180ms ease-out, opacity 180ms ease-out; }
.inspection-grow-transition-leave-active { transition: transform 140ms ease-in, opacity 140ms ease-in; }
.inspection-grow-transition-enter-from,
.inspection-grow-transition-leave-to { transform: scale(0.35, 0.15); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .inspection-grow-transition-enter-active,
    .inspection-grow-transition-leave-active { transition: none; }
}

.right-menu-wrapper { position: absolute; right: -20px; top: var(--header-actions-top, -16px); }
.right-menu-hover-zone { display: flex; align-items: center; padding: 8px; position: relative; }
.profile-popover {
    position: absolute;
    top: calc(100% + 2px);
    right: 8px;
    z-index: 1200;
    width: min(292px, calc(100vw - 24px));
    /* Leave room for the header trigger and a viewport gutter on short screens. */
    max-height: calc(100dvh - 112px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.12);
}
.profile-popover__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}
.profile-popover__avatar {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #2b579a;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.profile-popover__identity-copy { min-width: 0; }
.profile-popover__name,
.profile-popover__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-popover__name { font-size: 0.95rem; font-weight: 700; }
.profile-popover__email { margin-top: 2px; color: #64748b; font-size: 0.78rem; }
.profile-popover__actions { padding: 6px; }
.profile-popover__action {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.profile-popover__action:hover { background: #eef2f7; }
.profile-popover__action:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.profile-popover__icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: invert(52%) sepia(93%) saturate(382%) hue-rotate(182deg) brightness(92%) contrast(86%);
}
.profile-popover__status {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.profile-popover__action--signout { color: #b42318; }
.profile-popover__separator { height: 1px; margin: 5px 8px; background: #e5e7eb; }
.profile-popover .share-indicator-inline { display: flex; width: 100%; margin: 0; }
.profile-popover .share-badge {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

@media (max-width: 600px) {
    .right-menu-wrapper { right: -16px; }
    .profile-popover { right: 4px; }
}

/* Plain-text calendar notes carry literal newlines; rich notes carry HTML blocks.
   Preserve both when opening the same content in the subject planner or a column. */
.text-editor-content,
.text-note-cols .text-note-top,
.text-note-cols .note-col,
.compact-top-text,
.compact-column,
.compact-other-note-body,
.top-notes-box,
.notes-column,
.lp-other-note-body {
    white-space: pre-wrap;
}

/* Lesson notes stay compact in the timetable. The shared focus helper promotes
   only the live editor to the top layer, where long text can grow without being
   clipped by table cells or horizontal calendar scrollers. */
.lesson-note-popout {
    position: fixed !important;
    inset: auto !important;
    top: var(--lesson-note-popout-top) !important;
    left: var(--lesson-note-popout-left) !important;
    width: var(--lesson-note-popout-width) !important;
    height: var(--lesson-note-popout-height) !important;
    max-width: 100vw !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    z-index: 2147482000 !important;
    background-color: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28), 0 6px 14px rgba(15, 23, 42, 0.16) !important;
}
.lesson-note-popout.subject-note-textarea { resize: none !important; }
.lesson-note-popout--anchored { position-anchor: --lesson-note-origin !important; }
.lesson-note-popout,
.lesson-note-popout-heading { transition: none !important; }
.lesson-note-popout.lesson-note-popout--measuring {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}
.lesson-note-popout--measuring.subject-note-textarea { height: 0 !important; }
.lesson-note-popout.compact-notes-editor .compact-columns { flex: 1 0 auto; }
.lesson-note-popout-heading {
    position: fixed !important;
    inset: auto !important;
    top: var(--lesson-note-heading-top) !important;
    left: var(--lesson-note-heading-left) !important;
    width: var(--lesson-note-heading-width) !important;
    height: auto !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    font-size: var(--lesson-note-heading-font-size) !important;
    line-height: 1.25 !important;
    z-index: 2147482001 !important;
}
.lesson-note-popout-cell { overflow: visible !important; z-index: 700 !important; }

/* Calendar opts into compact note previews on its body. The marker lives on a
   stable Vue-owned wrapper, so no extra editable nodes are inserted into notes. */
body[data-compact-note-overflow] .calendar-note-overflow-host {
    position: relative;
    min-height: 0;
}
body[data-compact-note-overflow] :is(.subject-note-textarea, .text-note-cols):not(.lesson-note-popout) {
    overflow: hidden !important;
    scrollbar-width: none;
}
body[data-compact-note-overflow] :is(.subject-note-textarea, .text-note-cols):not(.lesson-note-popout)::-webkit-scrollbar {
    display: none;
}
body[data-compact-note-overflow] .calendar-note-overflow-host--clipped::after {
    content: "...";
    position: absolute;
    right: 4px;
    bottom: 2px;
    z-index: 2;
    padding: 0 2px 1px 7px;
    border-radius: 2px;
    background: var(--note-overflow-background, transparent);
    color: #4b5563;
    font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 1px;
    pointer-events: none;
}
body[data-compact-note-overflow] .calendar-note-overflow-host--clipped:has(.lesson-note-popout)::after {
    content: none;
}

/* Personal calendar rows stay compact regardless of note length. SharedCalendar
   intentionally keeps its contents in table flow so default boxes grow with text. */
@media screen {
    .calendar-cell > .text-lesson-content {
        position: absolute;
        inset: 0;
        box-sizing: border-box;
        min-width: 0;
        min-height: 0;
    }
    .calendar-cell > .text-lesson-content { overflow: hidden; }
}

@media print {
    body[data-compact-note-overflow] .calendar-note-overflow-host--clipped::after { content: none; }
    .lesson-note-popout {
        position: static !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }
    .lesson-note-popout-heading {
        position: static !important;
        width: auto !important;
        font-size: inherit !important;
    }
    .inspection-detail { display: none !important; }
    .inspection-border-pill--expanded { opacity: 1; }
}

.calendar-sync-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 4px;
    font-size: 13px;
}
.calendar-sync-status button {
    padding: 4px 8px;
    color: #175ca5;
    text-decoration: underline;
    cursor: pointer;
}

.note-checkbox-selection-overlay {
    position: fixed;
    z-index: 2147483000;
    box-sizing: border-box;
    background: rgba(51, 103, 209, 0.35);
    outline: 1px solid rgba(51, 103, 209, 0.65);
    outline-offset: -1px;
    pointer-events: none;
}