/* Lesson-Request UI — bottom-sheet, Drum picker, hall-load grid.
   Uses system tokens from app.theme.css. */

.lr-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
}
.lr-overlay.lr-visible { opacity: 1; pointer-events: all; }

.lr-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 90vh;
    background: var(--card-bg);
    color: var(--list-item-name);
    border: 1px solid var(--list-divider);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 201;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex; flex-direction: column;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--shadow-modal);
}
.lr-sheet.lr-open { transform: translateY(0); }
.lr-handle {
    width: 40px; height: 4px;
    background: var(--list-divider);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

.lr-steps    { padding: 0 16px 16px; overflow-y: auto; flex: 1; }
.lr-step     { display: none; flex-direction: column; }
.lr-step-active { display: flex; }

.lr-title { font-size: var(--font-xl); font-weight: 700; text-align: center; margin: 14px 0 8px; }
.lr-sub   { font-size: var(--font-sm);  color: var(--list-item-sub); text-align: center; margin-bottom: 12px; }

.lr-footer { padding: 12px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.lr-btn {
    width: 100%; padding: 12px 16px;
    border: none; border-radius: var(--radius-sm);
    font-size: var(--font-base); font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
}
.lr-btn:active   { transform: scale(0.97); opacity: 0.85; }
.lr-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.lr-btn-primary {
    background: var(--accent);
    color: var(--text-button);
    box-shadow: var(--shadow-btn);
}
.lr-btn-link {
    background: transparent;
    color: var(--list-item-sub);
    text-decoration: underline;
}

/* DateSwiper — horizontal date strip */
.lr-ds {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 12px;
}
.lr-ds-track { display: flex; gap: 6px; padding: 0 2px; }
.lr-ds-item {
    flex-shrink: 0;
    width: 64px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    background: var(--list-bg);
    border: 1px solid var(--list-divider);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.lr-ds-item .lr-ds-top {
    font-size: var(--font-xs); color: var(--list-item-sub);
    text-transform: uppercase; letter-spacing: .03em;
}
.lr-ds-item .lr-ds-num { font-size: var(--font-xl); font-weight: 700; color: var(--list-item-name); line-height: 1.1; }
.lr-ds-item .lr-ds-mon { font-size: var(--font-xs); color: var(--list-item-sub); }
.lr-ds-item.lr-ds-active {
    background: var(--accent);
    border-color: var(--accent);
}
.lr-ds-item.lr-ds-active .lr-ds-top,
.lr-ds-item.lr-ds-active .lr-ds-num,
.lr-ds-item.lr-ds-active .lr-ds-mon { color: var(--text-button); }

/* Drum picker */
.lr-drum {
    height: 180px;
    position: relative;
    overflow: hidden;
    touch-action: none;
    background: var(--list-bg);
    border-radius: var(--radius-sm);
}
.lr-drum::before,
.lr-drum::after {
    content: ''; position: absolute; left: 0; right: 0;
    height: 38%; pointer-events: none; z-index: 2;
}
.lr-drum::before { top: 0;    background: linear-gradient(to bottom, var(--list-bg) 0%, transparent 100%); }
.lr-drum::after  { bottom: 0; background: linear-gradient(to top,    var(--list-bg) 0%, transparent 100%); }
.lr-drum-wrap {
    padding-top: 72px;
    padding-bottom: 72px;
    will-change: transform;
    user-select: none;
    position: relative; z-index: 1;
}
.lr-drum-item {
    height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-lg); color: var(--list-item-name);
    cursor: pointer;
    transition: opacity .12s, font-weight .12s;
}
.lr-drum-item[data-dist="0"] { font-weight: 700; opacity: 1; }
.lr-drum-item[data-dist="1"] { font-weight: 400; opacity: .55; }
.lr-drum-item[data-dist="2"] { font-weight: 400; opacity: .25; }
.lr-drum-item[data-dist="3"] { font-weight: 400; opacity: .1; }
.lr-drum-disabled { opacity: .2 !important; cursor: default; pointer-events: none; }

/* Step 2 — ranges */
.lr-ranges        { display: flex; flex-direction: column; gap: 12px; }
.lr-range-card {
    background: var(--list-bg);
    border: 1px solid var(--list-divider);
    border-radius: var(--radius-md);
    padding: 12px;
}
.lr-range-date    { font-size: var(--font-base); font-weight: 600; color: var(--list-item-name); margin-bottom: 8px; }
.lr-range-row     { display: flex; gap: 12px; }
.lr-range-col     { flex: 1; display: flex; flex-direction: column; }
.lr-range-col label {
    font-size: var(--font-xs); color: var(--list-item-sub);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 6px;
}
.lr-range-err     { color: var(--balance-negative); font-size: var(--font-sm); margin-top: 6px; min-height: 14px; }

/* Step 3 — summary */
.lr-summary {
    margin-top: 12px;
    padding: 12px;
    background: var(--list-bg);
    border: 1px solid var(--list-divider);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm); line-height: 1.6;
    color: var(--list-item-name);
}

/* Confirm — counter + grid */
.lr-counter {
    text-align: center;
    font-size: var(--font-base); color: var(--list-item-sub);
    margin-bottom: 10px;
}
.lr-counter span { font-weight: 700; color: var(--list-item-name); }

.lr-grid-wrap     { display: flex; flex-direction: column; gap: 14px; }
.lr-grid-day {
    background: var(--list-bg);
    border: 1px solid var(--list-divider);
    border-radius: var(--radius-sm);
    padding: 10px;
}
.lr-grid-day-h    { font-size: var(--font-sm); font-weight: 600; color: var(--list-item-name); margin-bottom: 8px; }
.lr-hall-row      { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lr-hall-name     { width: 60px; font-size: var(--font-sm); font-weight: 600; color: var(--list-item-name); }
.lr-hall-cells    { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.lr-cell {
    min-width: 52px;
    text-align: center;
    padding: 6px 4px;
    font-size: var(--font-xs);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--accent-bg);
    border: 1px solid var(--accent-bg-hover);
    border-radius: 6px;
    cursor: pointer;
    color: var(--list-item-name);
}
.lr-cell:hover    { background: var(--accent-bg-hover); }
.lr-cell-full {
    background: var(--card-bg);
    border-color: var(--list-divider);
    color: var(--list-item-sub);
    cursor: not-allowed;
    text-decoration: line-through;
}
.lr-cell-mine {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-button);
    font-weight: 700;
}

.lr-err           { color: var(--balance-negative); text-align: center; padding: 16px; }
.lr-empty         { text-align: center; color: var(--list-item-sub);    padding: 16px; }

/* List view */
.lr-list-empty    { text-align: center; color: var(--list-item-sub); padding: 24px 16px; }
.lr-list-item {
    background: var(--card-bg);
    border: 1px solid var(--list-divider);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 10px;
}
.lr-list-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.lr-list-count {
    font-size: var(--font-lg); font-weight: 700;
    color: var(--accent);
}
.lr-list-name {
    flex: 1; min-width: 0;
    font-weight: 600;
    color: var(--list-item-name);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lr-list-status {
    font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .05em;
    padding: 3px 8px; border-radius: 10px;
    background: var(--list-bg);
    color: var(--list-item-sub);
}
.lr-status-confirmed .lr-list-status { background: var(--accent);            color: var(--text-button); }
.lr-status-cancelled .lr-list-status { background: var(--balance-negative);  color: #fff; }
.lr-status-expired   .lr-list-status { background: var(--list-divider);     color: var(--list-item-name); }
.lr-list-slots    { font-size: var(--font-sm); color: var(--list-item-sub); line-height: 1.5; }
.lr-list-actions  { display: flex; gap: 8px; margin-top: 10px; }
.lr-list-actions button {
    flex: 1; padding: 8px 12px;
    border: none; border-radius: var(--radius-sm);
    font-size: var(--font-sm); font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
}
.lr-list-actions button:active { transform: scale(0.97); opacity: 0.85; }
.lr-list-confirm-btn { background: var(--accent); color: var(--text-button); }
.lr-list-cancel-btn  { background: var(--list-bg); color: var(--list-item-name); }

/* Toast — success/info banner */
.lr-toast {
    position: fixed;
    left: 50%; bottom: 80px;
    transform: translateX(-50%) translateY(20px);
    background: var(--card-bg);
    color: var(--list-item-name);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    font-size: var(--font-base);
    box-shadow: var(--shadow-modal);
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    max-width: 90vw;
    text-align: center;
}
.lr-toast.lr-toast-in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Teacher's incoming-requests block (rendered inside Files/Watch tab) */
.watch-lr-incoming {
    margin: 14px 0;
    padding: 12px;
    background: var(--list-bg);
    border: 1px solid var(--list-divider);
    border-radius: var(--radius-md);
}
.watch-lr-heading {
    font-size: var(--font-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--list-item-sub);
    margin-bottom: 10px;
}
.watch-lr-empty, .watch-lr-loading {
    text-align: center; color: var(--list-item-sub);
    padding: 8px; font-size: var(--font-sm);
}
.watch-lr-item {
    background: var(--card-bg);
    border: 1px solid var(--list-divider);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 8px;
}
.watch-lr-item:last-child { margin-bottom: 0; }
.watch-lr-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
    font-size: var(--font-sm);
}
.watch-lr-count {
    font-weight: 700; color: var(--accent); font-size: var(--font-lg);
}
.watch-lr-from { color: var(--list-item-sub); }
.watch-lr-slots {
    font-size: var(--font-sm); color: var(--list-item-sub);
    line-height: 1.5; margin-bottom: 8px;
}
.watch-lr-open { width: 100%; }