/* Operator console (/#admin) + session dashboard. Neutral operator UI,
   deliberately not themed — kept from the EscapeRoomTemplate framework. */
/* ─────────────────────────────────────────────────────────────────────
   ADMIN CONSOLE
   /#admin route. Login card matches the .auth-card aesthetic from the
   regular login screen. Panel itself is a wider clean white card with
   per-phase sections, per-puzzle toggle buttons, and a sticky header.
   ───────────────────────────────────────────────────────────────────── */
#admin-screen {
    /* same .auth-overlay base as login — full-screen light backdrop */
    background: #f6f5f0;
    overflow: auto;
}
/* Once auth succeeds and admin-panel is rendered, drop the centered-
   overlay flex layout (the panel is much taller than the viewport;
   centering would push its header above the top edge). Switch to a
   top-aligned scrollable container. */
#admin-screen.admin-panel-mode {
    align-items: flex-start;
    justify-content: stretch;
    overflow-y: auto;
    padding: 0;
}
#admin-screen.admin-panel-mode #admin-panel {
    width: 100%;
}
#admin-screen .auth-card {
    /* match login: clean rounded white card */
    text-align: left;
}
#admin-screen .auth-title {
    text-align: center;
    color: #ff6c1f;
    letter-spacing: 4px;
    text-transform: uppercase;
}
#admin-screen .auth-body {
    text-align: center;
    color: #ff8c44;
    font-size: 14px !important;
    letter-spacing: 2px;
}

/* Admin control panel (post-auth) */
#admin-panel {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 28px 32px 60px;
}
.adm-panel-shell {
    width: min(1320px, 96vw);
    margin: 0 auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    color: #1b2340;
    font-family: 'Share Tech Mono', monospace;
}
.adm-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 18px 26px;
    border-bottom: 2px solid #f0eee8;
    gap: 12px;
}
.adm-h-left { display: flex; flex-direction: column; }
.adm-h-tag {
    font-size: 11px;
    color: #ff6c1f;
    letter-spacing: 5px;
    font-weight: 700;
}
.adm-h-title {
    font-size: 22px;
    color: #1b2340;
    letter-spacing: 4px;
    font-weight: 700;
    margin-top: 2px;
}
.adm-h-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.adm-h-stat {
    font-size: 11px;
    color: #6b78ff;
    letter-spacing: 4px;
    font-weight: 700;
}
.adm-current-phase {
    font-size: 28px;
    color: #1b2340;
    font-weight: 700;
    padding: 0 14px;
    background: #fff5e6;
    border-radius: 8px;
    border: 1px solid #ffd9a8;
    line-height: 1.1;
    min-width: 38px;
    text-align: center;
}

/* Admin buttons */
.adm-btn {
    background: #ffffff;
    border: 1.5px solid #cfd6f0;
    color: #1b2340;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.adm-btn:hover { background: #f4f6ff; border-color: #6b78ff; color: #6b78ff; }
.adm-btn-warn { border-color: #ffb46b; color: #ff6c1f; }
.adm-btn-warn:hover { background: #fff3e6; border-color: #ff6c1f; color: #ff6c1f; }
.adm-btn-danger { border-color: #ff7979; color: #c92a2a; background: #fff5f5; }
.adm-btn-danger:hover { background: #ffe3e3; border-color: #c92a2a; color: #a51616; }
.adm-btn-end { border-color: #9b6bff; color: #6433d8; background: #f5f0ff; }
.adm-btn-end:hover { background: #ebdfff; border-color: #6433d8; color: #4019a8; }
.adm-h-divider {
    width: 1px;
    height: 26px;
    background: #cfd6f0;
    margin: 0 4px;
}

/* ── Players section ── */
.adm-players-section {
    border-top: 2px solid #f0eee8;
    padding: 18px 26px;
    background: #fbfaf6;
}
.adm-players-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.adm-players-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #6b78ff;
}
.adm-players-count {
    font-size: 14px;
    font-weight: 700;
    color: #1b2340;
    padding: 2px 10px;
    background: #eef0ff;
    border: 1px solid #cfd6f0;
    border-radius: 999px;
    min-width: 26px;
    text-align: center;
}
.adm-players-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 8px;
}
.adm-players-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #9ba0b8;
    font-style: italic;
    padding: 12px;
    letter-spacing: 2px;
    font-size: 12px;
}
.adm-player-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #cfd6f0;
    border-radius: 8px;
    min-width: 0;
}
.adm-player-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    align-self: center;
}
.adm-player-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
.adm-player-name {
    font-size: 14px;
    font-weight: 700;
    color: #1b2340;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-player-meta {
    font-size: 11px;
    color: #6b78a0;
    letter-spacing: 1px;
    font-family: 'Share Tech Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-player-meta-k {
    color: #9aa3b2;
    font-weight: 700;
    margin-left: 6px;
    margin-right: 2px;
}
.adm-player-meta-k:first-child { margin-left: 0; }
.adm-player-ready {
    color: #00a86b;
    font-weight: 700;
    margin-left: 8px;
}
.adm-btn-kick {
    font-size: 11px;
    padding: 7px 14px;
    letter-spacing: 2px;
}

.adm-phases {
    padding: 8px 0;
}
.adm-phase-group {
    border-top: 1px solid #f0eee8;
    padding: 18px 26px;
    transition: background 0.2s;
}
.adm-phase-group.adm-phase-current {
    background: linear-gradient(180deg, rgba(107,120,255,0.06), rgba(107,120,255,0.02));
}
.adm-phase-group.adm-phase-locked .adm-puzzles { opacity: 0.7; }

.adm-phase-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}
.adm-btn-jump {
    margin-left: auto;
    border-color: #6b78ff;
    color: #6b78ff;
    font-size: 12px;
    padding: 7px 12px;
    letter-spacing: 1.5px;
}
.adm-btn-jump:hover {
    background: #eef0ff;
    color: #4a55cc;
    border-color: #4a55cc;
}
.adm-phase-num {
    background: #1b2340;
    color: #fff;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: 1px;
    min-width: 36px;
    text-align: center;
}
.adm-phase-current .adm-phase-num { background: #ff6c1f; }
.adm-phase-titles { display: flex; flex-direction: column; line-height: 1.2; }
.adm-phase-title {
    font-size: 16px;
    font-weight: 700;
    color: #1b2340;
    letter-spacing: 1.5px;
}
.adm-phase-sub {
    font-size: 12px;
    color: #6b78a0;
    letter-spacing: 2px;
}
.adm-phase-flag {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #cfd6f0;
    color: #6b78a0;
}
.adm-phase-flag.adm-flag-done    { color: #00a86b; border-color: #b6efce; background: #e8f9ee; }
.adm-phase-flag.adm-flag-current { color: #ff6c1f; border-color: #ffd9a8; background: #fff5e6; }
.adm-phase-flag.adm-flag-locked  { color: #6b78a0; border-color: #cfd6f0; background: #f7f9ff; }

.adm-puzzles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
}
.adm-puz-row {
    display: grid;
    /* button | info (flexes) | answer (capped). The info column has
       min-width so long answer strings don't squash labels into single
       columns of 1 char per line. */
    grid-template-columns: 56px minmax(150px, 1fr) minmax(0, 220px);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #f9f8f3;
    border: 1px solid #efeadd;
    border-radius: 10px;
    transition: all 0.15s;
    min-width: 0; /* allow children to shrink below their intrinsic width */
}
.adm-phase-current .adm-puz-row {
    background: #ffffff;
    border-color: #cfd6f0;
}
.adm-puz-row:hover {
    box-shadow: 0 2px 8px rgba(107,120,255,0.12);
}

.adm-puz-info { display: flex; flex-direction: column; min-width: 0; gap: 4px; overflow: hidden; }
.adm-puz-label {
    font-size: 14px;
    font-weight: 700;
    color: #1b2340;
    letter-spacing: 1px;
    /* keep on one line — wrapping mid-word looks broken */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-puz-progress {
    font-size: 12px;
    color: #6b78a0;
    letter-spacing: 1px;
    font-family: 'Share Tech Mono', monospace;
    /* allow wrapping at spaces but never split a token across lines */
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
}
.adm-puz-progress b { color: #00a86b; font-weight: 700; }

.adm-puz-answer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    border-left: 1px dashed #cfd6f0;
    padding-left: 12px;
    min-width: 0;
    overflow: hidden;
}
.adm-puz-answer-tag {
    font-size: 9px;
    letter-spacing: 3px;
    color: #ff6c1f;
    font-weight: 700;
}
.adm-puz-answer-val {
    font-size: 13px;
    color: #1b2340;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: 'Share Tech Mono', monospace;
    text-align: right;
    /* wrap on space, never inside a word */
    overflow-wrap: normal;
    word-break: normal;
    max-width: 100%;
    line-height: 1.35;
}

/* Solve toggle button: red X by default, green ✓ when solved */
.adm-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border: 2px solid #ff4444;
    background: #ffeaea;
    color: #ff4444;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    transition: all 0.18s;
    line-height: 1;
}
.adm-toggle:hover { transform: scale(1.05); }
.adm-toggle .adm-toggle-x-mark { display: block; }
.adm-toggle .adm-toggle-v-mark { display: none; }
.adm-toggle.adm-toggle-on {
    border-color: #00a86b;
    background: #e8f9ee;
    color: #00a86b;
}
.adm-toggle.adm-toggle-on .adm-toggle-x-mark { display: none; }
.adm-toggle.adm-toggle-on .adm-toggle-v-mark { display: block; }
/* Milestones can be force-solved in any phase. */
.adm-code-section .adm-create-row { border-bottom: 0; }
#adm-code-select { flex: 1 1 260px; }

.adm-footer {
    padding: 14px 26px;
    border-top: 2px solid #f0eee8;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: 3px;
    color: #6b78a0;
}
.adm-foot-conn {
    color: #00a86b;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   Session dashboard (admin /#admin — level above the room console)
   ══════════════════════════════════════════════════════════════════ */
.adm-create-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 18px 26px;
    border-bottom: 2px solid #f0eee8;
    background: #fbfaf6;
}
.adm-create-row > .adm-input { flex: 2 1 200px; }
.adm-create-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    color: #6b78a0;
    letter-spacing: 2px;
    font-weight: 700;
}
.adm-create-field .adm-input { width: 110px; }
.adm-input {
    background: #ffffff;
    border: 1.5px solid #cfd6f0;
    color: #1b2340;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 14px;
    border-radius: 8px;
    box-sizing: border-box;
}
.adm-input:focus { outline: none; border-color: #6b78ff; }

.adm-sess-list { padding: 14px 26px 22px; display: flex; flex-direction: column; gap: 10px; }
.adm-sess-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border: 1.5px solid #e7e4da;
    border-radius: 10px;
    padding: 12px 16px;
    background: #ffffff;
}
.adm-sess-code {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 5px;
    color: #1b2340;
    background: #fff5e6;
    border: 1px solid #ffd9a8;
    border-radius: 8px;
    padding: 4px 12px;
}
.adm-sess-code-small { font-size: 15px; letter-spacing: 3px; padding: 3px 10px; }
.adm-h-session { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.adm-btn-back { padding: 5px 10px; font-size: 11px; }

.adm-chip {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 20px;
    padding: 4px 12px;
    border: 1px solid #cfd6f0;
    color: #6b78a0;
    background: #f7f9ff;
}
.adm-chip-created   { color: #2b6cb0; border-color: #bcd8f5; background: #ebf5ff; }
.adm-chip-active    { color: #00a86b; border-color: #b6efce; background: #e8f9ee; }
.adm-chip-completed { color: #6433d8; border-color: #d9c8ff; background: #f5f0ff; }
.adm-chip-expired   { color: #c92a2a; border-color: #ffc9c9; background: #fff5f5; }
.adm-chip-cancelled { color: #6b78a0; border-color: #cfd6f0; background: #f2f4fa; }

.adm-sess-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.adm-sess-label { font-size: 14px; color: #1b2340; font-weight: 700; letter-spacing: 1px; }
.adm-sess-meta { font-size: 11px; color: #6b78a0; letter-spacing: 1px; }
.adm-sess-live { color: #00a86b; font-weight: 700; }
.adm-sess-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-sess-actions .adm-btn { padding: 7px 12px; font-size: 11px; }