/* === Global Styles === */
body {
    font-family: "Inter", "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    color: #151b2a;
    margin: 0;
}

.main-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    padding: 2.8rem 2.2rem;
    max-width: 900px;
    margin: 40px auto 64px auto;
}

/* === Header === */
.header-title {
    text-align: center;
    font-weight: 900;
    color: #182142;
    margin-bottom: 0.5rem;
    font-size: 2.4rem;
    letter-spacing: 0.04em;
}

#authArea {
    background: #eef2f5;
    border-radius: 10px;
    padding: 1rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

#welcomeMsg {
    font-size: 0.95rem;
    color: #fff;
    background-color: #0cbb6f !important;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}

/* === Sessions List === */
#sessionsList {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.list-group-item {
    border: none !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 3px 10px rgba(25, 53, 92, 0.08);
    margin-bottom: 1.4rem;
    padding: 2.2rem 2.1rem 1.7rem 2.1rem !important;
    transition: box-shadow 0.2s, transform 0.18s;
}

.list-group-item:hover {
    box-shadow: 0 10px 32px rgba(24, 33, 66, 0.13);
    transform: translateY(-3px);
    border-left: 6px solid #1a73e8;
    padding-left: 2rem !important;
}

.list-group-item-light {
    opacity: 0.44;
}

/* === Session Grid: aligns vertically for all screens === */
.session-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* === Session Details === */
.session-details-col {
    width: 100%;
    margin-bottom: 0.6rem;
}
.session-details strong {
    display: block;
    font-size: 1.14rem;
    color: #151b2a;
    font-weight: 700;
    margin-bottom: 0.26rem;
}

.session-details small {
    display: block;
    margin-top: 3px;
    font-size: 0.96rem;
    color: #5e6784;
    line-height: 1.6;
}
.session-details em {
    font-style: normal;
    font-weight: 600;
    color: #ff911c;
}
.session-details small.speaker em {
    color: #512da8;
}
.session-details small.time em {
    color: #127aee;
}

/* === Status/Count Badges === */
.question-count-badge {
    background-color: #ffb700 !important;
    color: #212121 !important;
    font-weight: 700;
    padding: 0.38em 0.85em;
    font-size: 0.88rem;
    border-radius: 9999px;
    align-self: flex-start;
    box-shadow: 0 3px 8px rgba(248,177,34,0.13);
    margin-bottom: 0.25em;
}
.badge.bg-danger {
    background-color: #ef4444 !important;
    font-weight: 600;
    font-size: 0.9em;
    padding: 5px 12px;
    border-radius: 9999px;
}

/* === Action Area: Always below details === */
.session-actions-col {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 0.14rem;
    padding: 0;
}

/* === Buttons: Uniform structure, distinct colors === */
.btn {
    border: none;
    border-radius: 24px;
    font-weight: 700;
    padding: 0.62rem 1.6rem;
    font-size: 1rem;
    min-width: 104px;
    box-shadow: 0 2px 8px rgba(23, 36, 62, 0.06);
    cursor: pointer;
    text-align: center;
    transition: all 0.18s;
    opacity: 1;
}

.btn:focus {
    outline: 2.2px solid #3166d8;
    outline-offset: 3px;
    filter: brightness(1.10);
}

/* Primary: vivid blue */
.btn-primary {
    background-color: #1a73e8;
    color: #fff;
}
.btn-primary:hover { background-color: #134fbb; }

/* Ask: deep green for action */
.ask-btn {
    background-color: #20b586;
    color: #fff;
}
.ask-btn:hover { background-color: #127a5d; }

.btn-success {
    background-color: #7c3aed;
    color: white;
}
.btn-success:hover { background-color: #5b21b6; }

.btn-danger {
    background-color: #de425b;
    color: #fff;
}
.btn-danger:hover { background-color: #ad2831; }

.btn-secondary {
    background-color: #64748b;
    color: #fff;
}
.btn-secondary:hover { background-color: #374151; }
.btn-secondary[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    user-select: none;
    background-color: #6c757d;
    border-color: #6c757d;
}

.read-btn {
    background-color: #1e22df; /* Vibrant Indigo */
    color: #fff;
    box-shadow: 0 4px 10px rgba(61, 62, 150, 0.3); /* Added subtle shadow */
}

.read-btn:hover {
    background-color: #4f46e5; /* Deeper Indigo for hover */
    filter: none; /* Ensure brightness filter doesn't interfere */
}

.btn[disabled],
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* === History for Modal === */
#questionsHistory {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8f9fa;
    padding: 10px;
    margin-top: 15px;
    font-size: 0.95rem;
}
.history-item {
    border-bottom: 1px dotted #eee;
    padding: 5px 0;
    color: #555;
}

/* === Responsive: Stacked vertical on mobile === */
@media (max-width: 700px) {
    .main-card {
        padding: 1.2rem 0.6rem;
    }
    .list-group-item {
        padding: 1.1rem 0.9rem !important;
    }
    .session-details-col {
        margin-bottom: 0.5rem;
    }
    .session-actions-col {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }
    .btn {
        width: 100%;
    }
}