/* Music Rooster 8.22.1 — DB migration fixes + swap icon in lesson */
:root{
  --mr-slot-height: 20px; /* 15 min == 20px */
  --mr-gap: 2px;
}
.mr-wrapper{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; width:100%; }
.mr-wrapper.mr-fullwidth{ width:100vw; margin-left: calc(50% - 50vw); }

/* Header with left-aligned actions */
.mr-header{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:8px; margin-bottom:8px; padding:0 4px; }
.mr-actions-left{ justify-self:start; display:flex; gap:6px; }
.mr-actions-right{ justify-self:end; }
.mr-header h3{ margin:0; text-align:center; font-weight:600; }

.mr-grid{ position:relative; border:1px solid #ddd; border-radius:10px; overflow:hidden; width:100%; }
.mr-grid-top{ position:sticky; top:0; z-index:5; display:grid; grid-template-columns: 80px repeat(7, minmax(120px, 1fr)); background:#fafafa; border-bottom:1px solid #eee; }
.mr-cell{ padding:8px; border-right:1px solid #eee; }
.mr-timecorner{ background:#f3f3f3; font-weight:600; }
.mr-day{ text-align:center; font-weight:600; }

.mr-grid-body{ position:relative; max-height:70vh; overflow:auto; }
.mr-rows{
  position:relative;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(240,240,240,0.9) 0,
    rgba(240,240,240,0.9) 1px,
    transparent 1px,
    transparent var(--mr-slot-height)
  );
}
.mr-row{ display:grid; grid-template-columns: 80px repeat(7, minmax(120px, 1fr)); height: var(--mr-slot-height); }
.mr-time{ background:#fff; color:#666; font-size:12px; position:sticky; left:0; z-index:2; border-right:1px solid #f4f4f4; }
.mr-slot{ background:transparent; }

/* Lessons layer */
.mr-lessons-layer{ position:absolute; top:0; left:80px; right:0; bottom:0; pointer-events:none; transition: background .08s ease; }
.mr-lesson{ position:absolute; width: calc((100%)/7 - var(--mr-gap)); pointer-events:auto; background:linear-gradient(180deg,#e7f0ff,#d9eaff); border:1px solid #bcd4ff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.05); padding:6px 8px 10px; cursor:grab; user-select:none; touch-action:none; transition: box-shadow .15s ease; }
.mr-lesson:active, .mr-lesson.is-dragging, .mr-lesson.is-resizing{ cursor:grabbing; box-shadow:0 6px 18px rgba(0,0,0,.15); z-index:10; }

/* Swap icon in lesson */
.mr-swap-icon{ position:absolute; top:4px; right:4px; width:22px; height:22px; border:none; border-radius:6px; background:rgba(0,0,0,.06); font-size:14px; line-height:22px; text-align:center; cursor:pointer; }
.mr-swap-icon:hover{ background:rgba(0,0,0,.12); }
.swap-mode .mr-swap-icon{ background:rgba(0,123,255,.12); }

/* Resize handle at bottom */
.mr-resize-handle{ position:absolute; left:8px; right:8px; bottom:2px; height:8px; border-radius:4px; background:rgba(0,0,0,.12); cursor:ns-resize; }
.mr-lesson.is-resizing .mr-resize-handle{ background:rgba(0,0,0,.25); }

/* Column highlight */
.mr-lessons-layer[data-hover-day="0"]{ background: linear-gradient(to right, rgba(0,123,255,.06) 0, rgba(0,123,255,.06) calc(100%/7), transparent calc(100%/7)); }
.mr-lessons-layer[data-hover-day="1"]{ background: linear-gradient(to right, transparent calc(100%/7 * 1), rgba(0,123,255,.06) calc(100%/7 * 1), rgba(0,123,255,.06) calc(100%/7 * 2), transparent calc(100%/7 * 2)); }
.mr-lessons-layer[data-hover-day="2"]{ background: linear-gradient(to right, transparent calc(100%/7 * 2), rgba(0,123,255,.06) calc(100%/7 * 2), rgba(0,123,255,.06) calc(100%/7 * 3), transparent calc(100%/7 * 3)); }
.mr-lessons-layer[data-hover-day="3"]{ background: linear-gradient(to right, transparent calc(100%/7 * 3), rgba(0,123,255,.06) calc(100%/7 * 3), rgba(0,123,255,.06) calc(100%/7 * 4), transparent calc(100%/7 * 4)); }
.mr-lessons-layer[data-hover-day="4"]{ background: linear-gradient(to right, transparent calc(100%/7 * 4), rgba(0,123,255,.06) calc(100%/7 * 4), rgba(0,123,255,.06) calc(100%/7 * 5), transparent calc(100%/7 * 5)); }
.mr-lessons-layer[data-hover-day="5"]{ background: linear-gradient(to right, transparent calc(100%/7 * 5), rgba(0,123,255,.06) calc(100%/7 * 5), rgba(0,123,255,.06) calc(100%/7 * 6), transparent calc(100%/7 * 6)); }
.mr-lessons-layer[data-hover-day="6"]{ background: linear-gradient(to right, transparent calc(100%/7 * 6), rgba(0,123,255,.06) calc(100%/7 * 6), rgba(0,123,255,.06) 100%); }

/* Swap mode */
.swap-mode .mr-lesson{ outline: 2px dashed rgba(0,0,0,.15); cursor: pointer; }
.mr-lesson.swap-selected{ outline-color: rgba(0,123,255,.5); }

/* Live indicator */
.mr-live-indicator{ position:fixed; z-index:9999; padding:6px 8px; background:#111; color:#fff; font-size:12px; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.2); pointer-events:none; }

/* Modals */
.mr-modal[hidden]{ display:none; }
.mr-modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:10000; }
.mr-modal-dialog{ background:#fff; border-radius:10px; width:min(680px, 96vw); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.mr-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eee; }
.mr-modal-body{ padding:16px; }
.mr-modal-close{ border:none; background:transparent; font-size:20px; cursor:pointer; }
.mr-modal-row{ display:flex; gap:12px; margin-top:10px; }
.mr-modal-row > *{ flex:1; }
.mr-modal-actions{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.mr-form-msg{ font-size:12px; color:#555; }