#schedulePreviewDialog.ui-modal { --ui-modal-width: 1100px; width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; scrollbar-gutter: auto; background: var(--ui-surface); color: var(--ui-text); }
.schedule-preview-panel { box-sizing: border-box; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 14px; height: min(760px, calc(100dvh - 36px)); padding: 22px; }
.schedule-preview-header { grid-row: 1; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.schedule-preview-art { width: 54px; height: 54px; object-fit: contain; }
.schedule-preview-identity { min-width: 0; }
.schedule-preview-identity h2 { margin: 3px 0; font-size: 1.4rem; line-height: 1.15; }
.schedule-preview-identity p { margin: 0; font-size: .82rem; }
.schedule-preview-actions { display: inline-flex; }
#schedulePreviewDialog .schedule-preview-icon-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 42px; height: 42px; min-width: 42px; min-height: 42px; margin: 0; padding: 0; border: 1px solid var(--ui-border); background: var(--ui-surface-subtle); color: var(--ui-text); cursor: pointer; }
.schedule-preview-icon-button > svg { width: 22px; height: 22px; fill: currentColor; }
.schedule-preview-year select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.schedule-preview-icon-button:has(select:disabled), .schedule-preview-icon-button:disabled { opacity: .5; cursor: default; }
.schedule-preview-icon-button:focus-visible, .schedule-preview-year:focus-within { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.schedule-preview-icon-button.is-loading > svg { animation: schedule-preview-spin 1s linear infinite; }
.schedule-preview-classrooms { grid-row: 2; display: flex; align-self: start; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
#schedulePreviewDialog .schedule-preview-classrooms button { flex: 1 0 auto; min-height: 40px; padding: 8px 14px; font-family: var(--font-body); font-size: .82rem; text-align: center; }
#schedulePreviewDialog .schedule-preview-classrooms button.is-selected { background: var(--ui-primary); color: var(--ui-on-primary, #fff); }
.schedule-preview-message { grid-row: 3; margin: 0; color: var(--ui-danger); font-size: .85rem; }
.schedule-preview-stage { grid-row: 4; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#schedulePreviewDialog [hidden] { display: none !important; }
.schedule-preview-empty { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--ui-text-muted); }
.schedule-preview-empty p { max-width: 480px; margin: 0; }
.schedule-preview-spinner { width: 30px; height: 30px; border: 3px solid var(--ui-primary-soft); border-top-color: var(--ui-primary); border-radius: 50%; animation: schedule-preview-spin .8s linear infinite; }
#schedulePreviewDialog .schedule-preview-table { --schedule-grid-border: color-mix(in srgb, var(--ui-text) 35%, var(--ui-border-strong)); position: absolute; top: 0; left: 50%; transform-origin: top center; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: 0; border: 2px solid var(--schedule-grid-border); border-radius: 12px; overflow: hidden; background: var(--ui-surface); color: var(--ui-text); font-family: var(--font-body); }
#schedulePreviewDialog .schedule-preview-table th { height: 40px; padding: 8px; background: var(--ui-primary); color: var(--ui-on-primary, #fff); font-family: var(--font-body); font-size: .8rem; font-weight: 700; text-align: center; }
#schedulePreviewDialog .schedule-preview-table td { height: 64px; padding: 8px; border-top: 2px solid var(--schedule-grid-border); background-color: var(--ui-surface); vertical-align: middle; text-align: center; font-family: var(--font-body); font-size: .82rem; line-height: 1.3; overflow-wrap: anywhere; }
#schedulePreviewDialog .schedule-preview-table :is(th, td) + :is(th, td) { border-left: 2px solid var(--schedule-grid-border); }
#schedulePreviewDialog .schedule-preview-table :is(th, td) { border-right: 0; border-bottom: 0; }
.schedule-preview-cell-title { display: block; font-weight: 700; }
.schedule-preview-table small { display: block; margin-top: 4px; color: var(--ui-text-muted); font-family: var(--font-body); font-size: .75rem; }
#schedulePreviewDialog .schedule-preview-table :is(.schedule-preview-area, .schedule-preview-break) td { height: 40px; font-weight: 700; background: color-mix(in srgb, var(--ui-accent) 24%, var(--ui-surface)); color: var(--ui-text); }
.schedule-preview-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes schedule-preview-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .schedule-preview-panel { padding: 14px; gap: 10px; }
  .schedule-preview-header { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; }
  .schedule-preview-art { width: 40px; height: 40px; }
  .schedule-preview-identity h2 { font-size: 1.12rem; }
  .schedule-preview-actions { grid-column: 2; grid-row: 2; justify-self: start; }
  .schedule-preview-header > .dialog-icon-close { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .schedule-preview-spinner, .schedule-preview-icon-button.is-loading > svg { animation: none; } }