/* 컴퓨터실 화면 모니터링 — 교수 격자 화면과 학생 공유 화면.
   스코프 CSS(*.razor.css)는 운영(Production)에서 서빙되지 않으므로 여기에 둔다.
   (Program.cs 의 UseStaticWebAssets 주석 참고) */

/* ── 교수: 상단 바 ─────────────────────────────────────────── */

.monitor-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: .75rem;
}

.monitor-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: .6rem;
    background: var(--primary, #4761FF);
    color: #fff;
}

.monitor-code-label {
    font-size: .7rem;
    opacity: .85;
    line-height: 1;
}

/* 강의실 뒤에서도 읽히도록 크게. 교수가 이 숫자를 불러 준다. */
.monitor-code-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.1;
}

.monitor-counters {
    display: flex;
    gap: .5rem;
}

.counter {
    display: flex;
    border: 0;                  /* 질문·화장실 카운터는 <button> 이라 기본 테두리를 지운다 */
    font: inherit;
    flex-direction: column;
    align-items: center;
    min-width: 3.2rem;
    padding: .3rem .4rem;
    border-radius: .5rem;
    background: var(--light, #F1F3FA);
    line-height: 1.1;
}

    .counter b { font-size: 1.15rem; }
    .counter small { font-size: .68rem; color: var(--secondary, #555); }

    .counter.ok b { color: #12a150; }
    .counter.warn b { color: #c98a00; }
    .counter.stop b { color: #d2691e; }
    .counter.down b { color: #d33; }

.monitor-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--secondary, #555);
    border: 1px dashed #dfe3ee;
    border-radius: .75rem;
}

/* ── 교수: 격자 ────────────────────────────────────────────── */

/* 한 화면에 30명 정도가 들어가는 것을 기준으로 잡는다.
   1920x1080 전체 화면에서 실측한 값:
       6열 → 타일 306x198 → 4행 → 24명   (6x5 는 세로가 모자라 물리적으로 안 된다)
       7열 → 타일 261x173 → 5행 → 35명   ← 이쪽을 쓴다
   예전에는 auto-fill(최소 230px)이라 폭에 따라 8~9열까지 벌어져 타일이 너무 작았다.
   화면이 좁아지면 단계적으로 줄여 세로로 흐르게 한다. */
.monitor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}

@media (min-width: 700px) {
    .monitor-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
    .monitor-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1400px) {
    .monitor-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1550px) {
    .monitor-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1850px) {
    .monitor-grid { grid-template-columns: repeat(7, 1fr); }
}

.tile {
    border: 2px solid #e3e6f0;
    border-radius: .5rem;
    overflow: hidden;
    background: #10131c;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

    .tile:hover {
        transform: translateY(-2px);
        border-color: var(--primary, #4761FF);
    }

    /* 상태별 테두리 — 40명을 훑을 때 색만 보고 걸러낼 수 있게 */
    .tile.is-ok { border-color: #d7e6dc; }
    .tile.is-stopped { border-color: #e08a45; }
    .tile.is-down { border-color: #dd4444; }

.tile-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #10131c;
}

    .tile-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* 아직 한 장도 못 받았을 때는 빈 img 를 숨겨 깨진 이미지 아이콘이 뜨지 않게 한다 */
    .tile-media img.tile-empty {
        visibility: hidden;
    }

.tile-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: .8rem;
}

.tile-bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .45rem;
    background: #fff;
    font-size: .75rem;
    line-height: 1.2;
}

.tile-state {
    flex: 0 0 auto;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #bbb;
}

.tile.is-ok .tile-state { background: #12a150; }
.tile.is-stopped .tile-state { background: #e08a45; }
.tile.is-down .tile-state { background: #dd4444; }

.tile-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-id {
    color: var(--secondary, #555);
    white-space: nowrap;
}

/* 전체화면이 아닌 학생을 눈에 띄게 — 40명 썸네일을 눈으로 확인하는 것보다 빠르다 */
.tile-surface {
    margin-left: auto;
    flex: 0 0 auto;
    padding: .05rem .35rem;
    border-radius: .3rem;
    font-size: .68rem;
    white-space: nowrap;
}

    .tile-surface.ok { background: #e8f5ec; color: #12a150; }
    .tile-surface.warn { background: #fdecec; color: #d33; font-weight: 700; }

/* 화면이 마지막으로 바뀐 때. 상태(색)를 오염시키지 않도록 옅은 회색 글자로만 둔다.
   변화 감지 스킵 때문에 "프레임이 안 온다" 는 정상 동작이라 배지로 경고하지 않는다.
   다만 이 값만 오래 멈춰 있으면 잠금 화면·UAC 창처럼 실제로 굳은 경우일 수 있다. */
.tile-age {
    margin-left: auto;
    flex: 0 0 auto;
    color: #9aa0ae;
    font-size: .68rem;
    white-space: nowrap;
}

    .tile-age.is-stale { color: #c98a00; font-weight: 600; }

/* 마지막 갱신이 들어오면 그쪽이 오른쪽 정렬을 맡는다 */
.tile-age + .tile-surface { margin-left: .3rem; }

/* ── 교수: 확대 보기 ───────────────────────────────────────── */

.screen-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(10, 12, 20, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.screen-overlay-inner {
    width: min(1280px, 96vw);
    background: #10131c;
    border-radius: .6rem;
    overflow: hidden;
}

.screen-overlay-bar {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    background: #fff;
}

.screen-overlay img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

/* ── 학생 화면 ─────────────────────────────────────────────── */

.share-page .join-code-input {
    width: 7rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: .3em;
}

/* 공유 중임을 학생이 늘 알 수 있게 (명세 §10) */
.share-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: .75rem;
    background: #d33;
    color: #fff;
}

.share-dot {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: #fff;
    animation: share-blink 1.2s ease-in-out infinite;
}

@keyframes share-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.share-guide li + li {
    margin-top: .4rem;
}

/* ── 상태 설명 · 설정 · 요청 (2차 추가) ────────────────────── */

.state-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    padding: .5rem .9rem;
    margin-bottom: .75rem;
    background: #fbfbfd;
    border: 1px solid #e9ecf5;
    border-radius: .5rem;
    font-size: .74rem;
    color: var(--secondary, #555);
}

    .state-legend .dot {
        display: inline-block;
        width: .55rem;
        height: .55rem;
        border-radius: 50%;
        margin-right: .3rem;
        vertical-align: middle;
    }

    .state-legend .dot.ok { background: #12a150; }
        .state-legend .dot.stop { background: #e08a45; }
    .state-legend .dot.down { background: #dd4444; }


.settings-panel {
    padding: .75rem .9rem;
    margin-bottom: .75rem;
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: .5rem;
}

/* 부트스트랩 그리드(col-md-2)로 잡았더니 119px 까지 좁아져
   "1280px · 기본" 같은 글자가 화살표 뒤로 잘려 빈칸처럼 보였다.
   칸마다 최소 폭을 주고 남으면 늘어나게 한다. */
.settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem .8rem;
    align-items: flex-end;
}

.settings-field {
    flex: 1 1 11rem;
    min-width: 11rem;
}

    .settings-field .form-label {
        color: var(--secondary, #555);
        display: block;
    }

    /* 선택된 값이 화살표에 가리지 않도록 오른쪽 여백을 확보한다 */
    .settings-field .form-select {
        padding-right: 2.1rem;
        text-overflow: ellipsis;
    }

.settings-field.settings-check {
    flex: 2 1 18rem;
    min-width: 15rem;
}

.monitor-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.counter.q b { color: #4761FF; }
.counter.h b { color: #c98a00; }
.counter.wc b { color: #0d9488; }

.request-counters { margin-left: .25rem; }

/* 눌러서 목록을 여는 카운터 */
button.counter { cursor: pointer; }
button.counter:hover { filter: brightness(.95); }

/* 요청이 0 이면 다른 카운터와 같은 모습, 1 이상이면 바탕을 채워 눈에 띄게 한다.
   40~50개 타일을 훑기 전에 상단만 보고도 알아채도록. */
.counter.is-lit {
    color: #fff;
    animation: req-pulse 1.6s ease-in-out infinite;
}

    .counter.is-lit b,
    .counter.is-lit small { color: #fff; }

.counter.q.is-lit { background: var(--primary, #4761FF); }
.counter.h.is-lit { background: #ff2d2d; }   /* 손들기 타일 테두리와 같은 색 */
.counter.wc.is-lit { background: #0d9488; }

/* 조치가 필요한 상태도 같은 방식으로 눈에 띄게 한다.
   끊김은 가장 급하므로 조금 더 진하게. */
.counter.stop.is-lit { background: #d2691e; }
.counter.down.is-lit { background: #d33; }

.tile-surface.none { background: #f1f3fa; color: #8a8fa3; }

/* ── 학생 요청 ─────────────────────────────────────────────── */

/* 상단 띠 — 40개 타일을 훑지 않아도 요청한 학생이 바로 보이게 */
.request-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .6rem .75rem;
    margin-bottom: .75rem;
    background: #fffdf5;
    border: 1px solid #f0e3b8;
    border-radius: .5rem;
}

.req-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid transparent;
    border-radius: 50rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    animation: req-pulse 1.6s ease-in-out infinite;
}

    .req-chip.is-q { background: #e8ecff; color: #2b3fd0; border-color: #c3ccff; }
    .req-chip.is-h { background: #fff3d6; color: #9a6b00; border-color: #f2dca6; }
    .req-chip.is-wc { background: #ddf5f2; color: #0b7a70; border-color: #b3e6df; }

    .req-chip:hover { filter: brightness(.96); }

.req-time { font-weight: 400; opacity: .7; font-size: .72rem; }

@keyframes req-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 160, 0, .0); }
    50% { box-shadow: 0 0 0 .22rem rgba(220, 160, 0, .18); }
}

/* 손들기 타일 — 노란색은 눈에 잘 안 들어와 빨강으로 바꿨다.
   끊김 타일도 빨강(#dd4444)이지만 그쪽은 정적이고 이쪽은 깜박여서 구분된다. */
.tile.has-hand {
    border-color: #ff2d2d;
    box-shadow: 0 0 0 .12rem rgba(255, 45, 45, .35);
    animation: hand-pulse 1.2s ease-in-out infinite;
}

@keyframes hand-pulse {
    0%, 100% { box-shadow: 0 0 0 .12rem rgba(255, 45, 45, .30); }
    50% { box-shadow: 0 0 0 .3rem rgba(255, 45, 45, .12); }
}

.tile-req {
    position: absolute;
    top: .3rem;
    right: .3rem;
    display: flex;
    gap: .1rem;
    padding: .15rem .4rem;
    border: 0;
    border-radius: 50rem;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .25);
    font-size: .85rem;
    line-height: 1.2;
    cursor: pointer;
    animation: req-pulse 1.6s ease-in-out infinite;
}

.request-modal {
    width: min(560px, 94vw);
    background: #fff;
    border-radius: .6rem;
    overflow: hidden;
}

.request-body { padding: 1rem; }

.req-block + .req-block {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid #eef0f6;
}

.req-label { font-weight: 700; margin-bottom: .35rem; }

.req-time-label {
    color: #8a8fa3;
    font-size: .75rem;
    margin-bottom: .25rem;
}

.req-text {
    white-space: pre-wrap;
    word-break: break-word;
    padding: .6rem .7rem;
    margin-bottom: .6rem;
    background: var(--light, #F1F3FA);
    border-radius: .4rem;
}

/* ── 전체 화면 보기 ────────────────────────────────────────── */

/* 브라우저 전체화면 API 는 실제 클릭이 있어야 열리고, 정책상 막힐 수도 있다.
   그래서 이 클래스만으로도 화면을 다 쓰도록 만들어 둔다 —
   API 가 열리면 그 위에 얹혀 사이트 머리말·꼬리말까지 사라지고,
   막히더라도 격자는 뷰포트를 가득 채운다. */
.monitor-page.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: #fff;
    padding: .6rem;
    overflow-y: auto;
}

/* ── 학생 질문 상자 ────────────────────────────────────────── */

.share-page .question-box {
    flex: 1 1 20rem;
    min-width: 14rem;
    /* 몇 줄짜리 질문을 적기에 rows=2 는 너무 좁았다. 필요하면 더 늘려 쓸 수 있게 둔다. */
    min-height: 7.5rem;
    resize: vertical;
}