/* ============================================================
   teacher.css — Styles specific to teacher.php only
   
   This file is loaded AFTER styles.css, so it can override
   shared styles where the teacher panel needs different
   behavior. Everything in here is unique to the teacher
   control panel and not needed on any student-facing page.
   ============================================================ */


/* ============================================================
   TEACHER BODY LAYOUT
   
   The teacher panel is wider than the play page (900px vs
   600px) because it needs to show tables with more columns.
   ============================================================ */

body.page-teacher {
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}


/* ============================================================
   GAME STATE INDICATORS
   
   Small colored labels that show whether a question is
   currently open or closed. Used in the Game State card.
   ============================================================ */

/* Green dot + text — question is accepting answers */
.status-open {
    color: #4ade80;
    font-weight: bold;
}

/* Red text — question is closed, no more submissions */
.status-closed {
    color: #f87171;
}


/* ============================================================
   ANSWER JUDGING
   
   After the teacher awards points, the award buttons are
   replaced with a "judged" label showing the result.
   Muted and italic so it recedes visually — the action
   is done, no need to draw attention to it.
   ============================================================ */

.judged {
    color: #aaa;
    font-style: italic;
}


/* ============================================================
   ANSWERS LIST
   
   The submitted answers section can get tall when many teams
   answer. We cap the height and let it scroll so it doesn't
   push the rest of the page down too far.
   ============================================================ */

#answers-list {
    max-height: 400px;
    overflow-y: auto;   /* scrollable when answers exceed the max height */
}


/* ============================================================
   FIXED POINTS ROW
   
   The point value input that appears when the teacher selects
   "I set the point value" mode. Hidden by default — shown
   and hidden by the toggleFixedPoints() JS function.
   ============================================================ */

#fixed-points-row {
    display: none;        /* JS sets this to 'flex' when needed */
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

#fixed-points-row label {
    color: #aaa;
    font-size: 0.9rem;
}

/* The number input inside the fixed points row is narrower
   than the full-width inputs elsewhere */
#fixed-points-row input[type=number] {
    width: 80px;
}


/* ============================================================
   LOGIN BOX

   The password form shown before the teacher authenticates.
   Centered on the page, narrow, minimal.
   ============================================================ */

.login-box {
    max-width: 340px;
    margin: 10vh auto;
    text-align: center;
}

.login-box h2 {
    color: #e94560;
    font-size: 1.8rem;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 1.5rem;
}

/* Stack the password input and button vertically */
.login-box input {
    width: 100%;
    margin-bottom: 0.75rem;
    display: block;
}

.login-box button {
    width: 100%;
}


/* ============================================================
   TEACHER HEADER BAR
   ============================================================ */

.teacher-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.teacher-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.teacher-nav a {
    color: #aaa;
    font-size: 0.85rem;
    text-decoration: none;
}

.teacher-nav a:hover {
    color: #e94560;
}


/* ============================================================
   GAME STATE CARD
   ============================================================ */

.question-preview {
    margin-top: 0.5rem;
}


/* ============================================================
   EMPTY STATE
   Placeholder text shown when a list has no items yet.
   ============================================================ */

.empty-state {
    color: #aaa;
    font-style: italic;
}


/* ============================================================
   ANSWER AWARD FORMS
   Two inline forms (Correct / Wrong) that sit side by side.
   ============================================================ */

.award-form {
    display: inline;
}

.award-form + .award-form {
    margin-left: 4px;
}


/* ============================================================
   ADJUST POINTS FORM
   Inline form in the teams table for manual point changes.
   ============================================================ */

.adjust-form {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.adjust-form input[type=number],
.delta-input {
    width: 65px;
    padding: 0.25rem 0.4rem;
}


/* ============================================================
   TEACHER CARD OVERRIDE
   
   The teacher page cards use a slightly darker background
   than the play page cards (#1a1a2e vs #16213e) and slightly
   smaller border radius to feel more like a dashboard than
   a game interface.
   ============================================================ */

body.page-teacher .card {
    background: #1a1a2e;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}


/* ============================================================
   DANGER ZONE CARD
   
   The reset game card gets a red border to visually signal
   that the action inside is destructive and irreversible.
   Applied inline in the HTML as style="border-color:#4a1a1a"
   but defined here as a reusable class for clarity.
   ============================================================ */

.card-danger {
    border-color: #4a1a1a !important;
}

.card-danger h2 {
    color: #f87171;
}


/* ============================================================
   TEACHER TABLE OVERRIDES
   
   The teams table and answers table on the teacher page need
   slightly tighter padding than the shared table styles
   because they have more columns to fit.
   ============================================================ */

body.page-teacher table {
    font-size: 0.9rem;
}

body.page-teacher th {
    font-size: 0.8rem;
}