/* tournament.css — Practice Tournament UI polish (Task 9).
   Purpose: make the tournament surfaces visually INDISTINGUISHABLE from legacy
   QuizVidya pages by reusing the exact values already defined in the legacy CSS.
   Every value below is copied from an existing legacy rule (file:line noted) so
   the tournament cards/badges/buttons inherit the app's visual identity rather
   than looking like bare Bootstrap.

   Reused sources:
     index.css            .dashboard-section (:1037), .child-card (:1147),
                          .plan-badge (:1074), .btn-primary (:1195)
     student_dashboard.css .competition-card (:39), .btn-start-quiz (:237)
     parent_dashboard.css  .dashboard-section h2 (:62, orange underline accent)

   Scope: only .tour-* classes and elements inside .tour-scope, so it never
   affects legacy pages. Additive + reversible. Works in BOTH Bootstrap 4
   (student/home/onboarding) and Bootstrap 5 (parent) contexts.
*/

/* ---------- section wrapper: matches index.css .dashboard-section ---------- */
.tour-section {
    background: #ffffff;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Heading: matches parent_dashboard.css .dashboard-section h2 (orange underline)
   so the strip heading reads like the sibling "Your Students" heading. */
.tour-section-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #2c3e50;
    border-bottom: 2px solid #f39c12;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
}
.tour-section-title .tour-viewall {
    font-size: 0.9rem;
    font-weight: 600;
    color: #007bff;
    text-decoration: none;
    border-bottom: none;
    white-space: nowrap;
}
.tour-section-title .tour-viewall:hover { color: #0056b3; text-decoration: underline; }

/* Page hero title on /tournaments — matches student_dashboard.css .dashboard-title
   feel but sized as a page heading (Fredoka One, brand navy). */
.tour-page-title {
    font-family: 'Fredoka One', cursive;
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 6px;
}

/* ---------- card: matches index.css .child-card ---------- */
.tour-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.tour-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}
.tour-card .tour-card-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.tour-card-name {
    font-size: 1.3rem;
    color: #2c3e50;
    margin: 0 0 6px 0;
    font-weight: 600;
    line-height: 1.2;
}
.tour-card-meta {
    color: #666;
    margin: 0 0 4px 0;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tour-card-meta i { color: #007bff; }
.tour-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Empty state card — quieter, centered, no hover lift. */
.tour-card.tour-empty { text-align: center; }
.tour-card.tour-empty:hover { transform: none; border-color: #e9ecef; box-shadow: 0 3px 6px rgba(0,0,0,0.1); }
.tour-empty-icon { font-size: 1.75rem; color: #f39c12; display: block; margin-bottom: 8px; }
.tour-empty-text { color: #666; font-weight: 500; margin: 0; }

.tour-card.tour-pre { opacity: .72; }
.tour-card.tour-pre:hover { transform: none; }

/* ---------- badges: matches index.css .plan-badge (pill) ---------- */
.tour-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.tour-badge.registered { background: #e8f5e8; color: #388e3c; }   /* mirrors .plan-badge.pro */
.tour-badge.live       { background: #e8f5e8; color: #2e7d32; }
.tour-badge.live::before { content: "\25CF"; margin-right: 5px; color: #2ecc71; }
.tour-badge.closed     { background: #f1f3f5; color: #6c757d; }
.tour-badge.upcoming   { background: #eef4ff; color: #1c5bb8; }   /* not-yet-open (was collapsed into 'closed') */
.tour-badge.status     { background: #e8f5e8; color: #388e3c; text-transform: capitalize; }

/* ---------- buttons ---------- */
/* Primary register/manage — matches index.css .btn-primary + hover lift. */
.tour-scope .btn-tour-primary {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}
.tour-scope .btn-tour-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.tour-scope .btn-tour-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.tour-scope .btn-tour-primary:disabled,
.tour-scope .btn-tour-primary.disabled {
    background: #adb5bd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Play button — matches student_dashboard.css .btn-start-quiz (coral gradient). */
.btn-tour-play {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 22px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(238, 90, 111, 0.3);
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-tour-play:hover {
    background: linear-gradient(135deg, #ee5a6f 0%, #e74c5e 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 90, 111, 0.4);
    color: #fff;
    text-decoration: none;
}
.btn-tour-play:disabled,
.btn-tour-play.disabled {
    background: #e0e6ed;
    color: #9aa5b1;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ---------- register form (shared BS4 + BS5) ---------- */
/* Scope spacing here instead of relying on .form-group / .mb-3 which differ
   between BS4 and BS5, so the form looks identical in both the parent modal
   and the BS4 onboarding block. */
.tour-scope .tour-field { margin-bottom: 16px; }
.tour-scope .tour-field > label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #2c3e50;
    margin-bottom: 6px;
}
.tour-scope .tour-field .form-control,
.tour-scope .tour-field select.form-control {
    border-radius: 5px;
    border: 1px solid #ced4da;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tour-scope .tour-field .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    outline: none;
}
.tour-scope .tour-hint {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 6px;
    display: block;
}
/* Register button balanced full-width for a clean modal footer feel. */
.tour-scope .tour-submit-row { margin-top: 4px; }
.tour-scope .btn-tour-primary.btn-tour-block {
    width: 100%;
    padding: 11px 22px;
    font-size: 1rem;
}
.tour-scope .btn-tour-primary[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* Inline form result — reuse Bootstrap alert look without depending on a JS
   toast. Rendered by the form script into #tourRegMsg. */
.tour-scope .tour-msg { margin-top: 14px; }
.tour-scope .tour-alert {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.tour-scope .tour-alert.ok  { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.tour-scope .tour-alert.err { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }

/* ---------- table: matches app table rhythm ---------- */
.tour-scope .tour-table { width: 100%; margin-bottom: 0; }
.tour-scope .tour-table thead th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    font-weight: 600;
    border-bottom: 2px solid #e0e6ed;
    padding: 10px 12px;
}
.tour-scope .tour-table tbody td {
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid #eef1f5;
    color: #2c3e50;
    font-size: 0.95rem;
}
.tour-scope .tour-table tbody tr:last-child td { border-bottom: none; }

/* ---------- responsive ---------- */
@media (max-width: 576px) {
    .tour-section { padding: 20px; }
    .tour-card .tour-card-body { flex-direction: column; align-items: stretch; }
    .tour-card-actions { align-items: stretch; }
    .tour-card-actions .btn-tour-primary,
    .tour-card-actions .btn-tour-play { width: 100%; text-align: center; }
    .tour-section-title { font-size: 1.5rem; }
}