/* dashboard-games.css */
/* ============================================================
   Showdown games (v2.75.2, dashboard-games.js + dashboard-games-questions.js).
   The games list and the editor: a sticky title row, a left RAIL (name,
   count, Add Question, import, category for all, Teams collapsed) beside
   the QUESTION CARDS. The question sheet and the Math panel are in
   dashboard-games-editor.css.
   ============================================================ */

/* ------------------------------------------------------------ the editor */
.gm-editor{
  border:1px solid var(--line,#1F2733);border-radius:12px;
  background:var(--bg-2,#0B0F16);padding:14px 16px;margin-top:14px;
}
/* v2.75.1 — the editor's title row STICKS under the page's own bar
   (header.nav, sticky at 0) while the teacher scrolls the question list,
   so Save / Close and the status are always in reach. */
.gm-ed-head{
  position:sticky;top:65px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:-14px -16px 12px;padding:12px 16px;border-radius:12px 12px 0 0;
  background:var(--bg-2,#0B0F16);border-bottom:1px solid var(--line,#1F2733);
}
.gm-ed-head h3{font-size:15px;font-weight:700}
.gm-ed-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gm-ed-status{font-size:13px;color:var(--muted,#A7B0BE)}
.gm-status-ok{color:var(--green,#3DD68C) !important;font-weight:600}
/* Close with unsaved changes — the are-you-sure strip. */
.gm-confirm{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 14px;border:1px solid rgba(232,67,31,.45);border-radius:10px;background:rgba(232,67,31,.08);
}
.gm-confirm-text{font-size:14px;color:var(--ink,#F4F6FA)}
/* v2.75.3 — the "unsaved work found" strip: green, not red — good news */
.gm-restore{margin:0 0 16px;border-color:rgba(61,214,140,.45);background:rgba(61,214,140,.08)}
.gm-confirm-actions{display:flex;gap:8px}
.gm-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.gm-field label,.gm-h{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#909AAB);
}
.gm-field input{
  width:100%;max-width:520px;padding:9px 11px;border:1px solid var(--line-2,#2B3543);border-radius:9px;
  background:var(--card,#131926);color:var(--ink,#F4F6FA);font:inherit;font-size:15px;
}
.gm-field input:focus,.gm-team input:focus,.gm-groups-bar select:focus,.gm-groups-bar input:focus{outline:2px solid var(--accent,#E8431F);outline-offset:1px}
.gm-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line,#1F2733)}
.gm-h-sub{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted,#A7B0BE)}
.gm-row-editing td{color:var(--ink,#F4F6FA)}
.gm-name{color:var(--ink,#F4F6FA);font-weight:600}
.gm-del{margin-left:6px}
.gm-del-arm{border-color:var(--red,#E8431F) !important;color:var(--red-2,#FF6A45) !important}

/* ------------------------------------------------------------ the teams */
.gm-groups-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.gm-groups-lab{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted,#A7B0BE)}
.gm-groups-bar select,.gm-groups-bar input{
  padding:7px 9px;border:1px solid var(--line-2,#2B3543);border-radius:9px;
  background:var(--panel,#10151F);color:var(--ink,#F4F6FA);font:inherit;font-size:14px;
}
.gm-groups-bar input[type="number"]{width:78px}
.gm-groups{display:flex;flex-direction:column;gap:8px}
.gm-groups-none{margin:0}
.gm-team{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;
  border:1px solid var(--line,#1F2733);border-radius:10px;background:var(--panel,#10151F);
}
.gm-team-n{flex:1 0 100%;font-size:12.5px;font-weight:800;color:var(--faint,#909AAB);text-transform:uppercase;letter-spacing:.04em}
.gm-team input{
  padding:8px 10px;border:1px solid var(--line-2,#2B3543);border-radius:9px;
  background:var(--card,#131926);color:var(--ink,#F4F6FA);font:inherit;font-size:14px;
}
.gm-team-name{flex:1 1 100%;min-width:0}
.gm-team-nums{flex:1 1 100%;min-width:0;font-variant-numeric:tabular-nums}
.gm-groups-err{color:var(--red-2,#FF6A45);font-size:13px;font-weight:600;margin:8px 0 0;min-height:0}
.gm-groups-err:empty{display:none}

/* ------------------------------------------------------------ rail + cards */
.gm-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.gm-rail{position:sticky;top:132px;display:flex;flex-direction:column;gap:14px}
.gm-rail .gm-field{margin:0}
.gm-rail-count{font-size:13px;color:var(--muted,#A7B0BE)}
.gm-rail-count span{font-weight:700;color:var(--ink,#F4F6FA)}
.gm-add{
  width:100%;padding:13px 16px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#8B5CF6,#6D3FE0);color:#fff;font:inherit;font-size:15px;font-weight:700;
  box-shadow:0 8px 22px rgba(109,63,224,.35);transition:transform .12s,filter .12s;
}
.gm-add:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.gm-add:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.gm-rail-sec{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line,#1F2733)}
.gm-rail-btn{width:100%;justify-content:center;text-align:center}
.gm-rail-lab{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#909AAB)}
.gm-rail-row{display:flex;gap:8px;align-items:center}
.gm-rail-grow{flex:1 1 auto;min-width:0}
.gm-rail-grow .quiz-cat{width:100%}
.gm-teams summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#909AAB);
}
.gm-teams summary::-webkit-details-marker{display:none}
.gm-teams summary::before{content:'▸';font-size:12px;transition:transform .15s}
.gm-teams[open] summary::before{transform:rotate(90deg)}
.gm-teams-note{margin:0}
.gm-teams .gm-groups-bar{flex-direction:column;align-items:stretch;gap:8px}
.gm-teams .gm-groups-bar select{width:100%}

.gq-listbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.gq-listbar-title{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#909AAB)}
.gq-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted,#A7B0BE);cursor:pointer;user-select:none}
.gq-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.gq-toggle-track{width:36px;height:20px;border-radius:999px;background:var(--line-2,#2B3543);position:relative;transition:background .15s}
.gq-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.gq-toggle input:checked + .gq-toggle-track{background:#8B5CF6}
.gq-toggle input:checked + .gq-toggle-track .gq-toggle-thumb{left:18px}
.gq-toggle input:focus-visible + .gq-toggle-track{outline:2px solid var(--accent,#E8431F);outline-offset:2px}

.gq-cards{display:flex;flex-direction:column;gap:10px}
.gq-empty{margin:0}
.gq-card{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:12px 14px 12px 8px;border:1px solid var(--line,#1F2733);border-radius:14px;background:var(--panel,#10151F);
  position:relative;transition:border-color .12s,box-shadow .12s;
}
.gq-card:hover{border-color:#3a4654}
.gq-card.gq-dragging{opacity:.45}
.gq-card.gq-over-before::before,.gq-card.gq-over-after::after{
  content:'';position:absolute;left:8px;right:8px;height:3px;border-radius:2px;background:#8B5CF6;
}
.gq-card.gq-over-before::before{top:-7px}
.gq-card.gq-over-after::after{bottom:-7px}
.gq-grip{color:var(--faint,#909AAB);font-size:14px;letter-spacing:-3px;cursor:grab;text-align:center;user-select:none}
.gq-card:active .gq-grip{cursor:grabbing}
.gq-card-mid{min-width:0;display:flex;flex-direction:column;gap:3px}
.gq-card-n{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#A78BFA}
.gq-card-q{
  font-size:15px;font-weight:600;color:var(--ink,#F4F6FA);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
}
.gq-card-a{font-size:13px;color:var(--muted,#A7B0BE);display:flex;gap:8px;align-items:baseline;overflow-wrap:anywhere}
.gq-card-a-lab{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#3DD68C}
.gq-card-right{display:flex;align-items:center}
.gq-card-thumb{
  position:relative;width:104px;height:64px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-2,#2B3543);background:var(--card,#131926);
}
.gq-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gq-card-thumb-none{background:linear-gradient(135deg,#1a2233,#0f1420)}
.gq-card-badge{
  position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:3px 8px;border-radius:999px;
  background:rgba(7,9,14,.82);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gq-cat-science{background:#2F63D8}.gq-cat-math{background:#E8431F}.gq-cat-english{background:#B5308F}
.gq-cat-art{background:#D97706}.gq-cat-language{background:#0E9F6E}.gq-cat-elective{background:#6D3FE0}
.gq-card-acts{display:flex;flex-direction:column;gap:6px}
.gq-act{
  padding:6px 10px;border:1px solid var(--line-2,#2B3543);border-radius:8px;background:var(--card,#131926);
  color:var(--ink,#F4F6FA);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;line-height:1.2;
}
.gq-act:hover{border-color:#3a4654;background:rgba(255,255,255,.05)}
.gq-act-edit{background:#8B5CF6;border-color:#8B5CF6;color:#fff}
.gq-act-edit:hover{background:#9D74F8;border-color:#9D74F8}
.gq-act-del{color:#FF8A6B}
.gq-act-arm{border-color:var(--red,#E8431F) !important;background:rgba(232,67,31,.15) !important;color:#FF8A6B !important}

/* The category dropdowns (rail + sheet). */
.quiz-cat{
  padding:9px 11px;border:1px solid var(--line-2,#2B3543);border-radius:9px;
  background:var(--card,#131926);color:var(--ink,#F4F6FA);font:inherit;font-size:13px;
}
.quiz-cat:focus{outline:2px solid var(--accent,#E8431F);outline-offset:1px}
.quiz-importlab{cursor:pointer}

@media (max-width:900px){
  .gm-body{grid-template-columns:1fr}
  .gm-rail{position:static}
  .gq-card{grid-template-columns:22px minmax(0,1fr) auto}
  .gq-card-right{display:none}
}