/**
 * Admin Quizzes Page Styles
 * ==========================
 * Reuses admin-collections patterns + quiz-specific styles
 */

/* Page Container */
.main-content.admin-quizzes-page {
    padding: var(--space-6);
    max-width: 100% !important;
    width: 100% !important;
}

.main-content.admin-quizzes-page > * {
    max-width: 1000px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================
   QUIZ DETAILS (inside expanded quiz)
   ============================================= */

.aq-quiz-details {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.aq-quiz-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.aq-quiz-meta-row {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* =============================================
   TYPE BADGES
   ============================================= */

.aq-type-badge {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.aq-type-badge--checkBox {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.aq-type-badge--radio {
    background: rgba(147, 51, 234, 0.15);
    color: #9333ea;
}

/* =============================================
   RESPONSES LIST (read-only view)
   ============================================= */

.aq-responses-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.aq-response-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.aq-response-item--correct {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.aq-response-indicator {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.aq-response-item--correct .aq-response-indicator {
    color: #22c55e;
}

.aq-response-text {
    flex: 1;
    min-width: 0;
}

.aq-no-responses {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: var(--space-2);
    font-style: italic;
}

.aq-explanation {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(212, 175, 125, 0.08);
    border-left: 3px solid var(--accent-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* =============================================
   EDIT FORMS
   ============================================= */

.aq-editing {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.aq-edit-form {
    padding: var(--space-5);
}

.aq-edit-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
}

.aq-edit-row {
    margin-bottom: var(--space-3);
}

.aq-edit-row > label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.aq-edit-row-inline {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.aq-edit-row-inline .aq-edit-row {
    margin-bottom: 0;
    flex: 1;
    min-width: 140px;
}

/* Inputs */
.aq-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    transition: border-color var(--duration-fast) var(--ease-default);
    box-sizing: border-box;
}

.aq-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-softer);
}

.aq-input--small {
    max-width: 100px;
}

select.aq-input {
    appearance: auto;
    cursor: pointer;
}

.aq-input--flex {
    flex: 1;
    min-width: 0;
}

.aq-textarea {
    resize: vertical;
    min-height: 48px;
}

/* Toggle labels */
.aq-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.aq-toggle-label input[type="checkbox"],
.aq-toggle-label input[type="radio"] {
    accent-color: var(--accent-primary);
    width: 16px;
    height: 16px;
}

.aq-radio-group {
    display: flex;
    gap: var(--space-4);
}

/* Edit Actions */
.aq-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

/* Buttons */
.aq-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--duration-fast) var(--ease-default);
}

.aq-btn--primary {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.aq-btn--primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.aq-btn--secondary {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-default);
}

.aq-btn--secondary:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.aq-btn--ghost {
    background: transparent;
    border: 1px dashed var(--border-default);
    color: var(--text-tertiary);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    margin-top: var(--space-2);
    width: 100%;
    text-align: center;
    border-radius: var(--radius-md);
}

.aq-btn--ghost:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-softer);
}

/* Icon buttons */
.aq-btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--ease-default);
}

.aq-btn-icon--danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

/* =============================================
   RESPONSE EDIT ROWS
   ============================================= */

.aq-responses-edit {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.aq-response-edit-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.aq-response-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aq-response-check input[type="checkbox"] {
    accent-color: #22c55e;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* =============================================
   ADD FORM (inline)
   ============================================= */

.aq-add-form {
    padding: var(--space-4);
    background: var(--bg-card);
    border: 2px solid var(--accent-tertiary);
    border-radius: var(--radius-xl);
    margin-top: var(--space-3);
}

/* =============================================
   LIGHT MODE
   ============================================= */

[data-theme="light"] .aq-response-item {
    background: #FAF8F5;
}

[data-theme="light"] .aq-response-item--correct {
    background: rgba(34, 197, 94, 0.08);
}

[data-theme="light"] .aq-input {
    background: #fff;
    border-color: #d4cfc5;
}

[data-theme="light"] .aq-add-form {
    background: #FAF8F5;
}

[data-theme="light"] .aq-explanation {
    background: rgba(200, 170, 130, 0.12);
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
    .main-content.admin-quizzes-page {
        padding: var(--space-4);
    }

    .aq-edit-row-inline {
        flex-direction: column;
        gap: var(--space-3);
    }

    .aq-edit-row-inline .aq-edit-row {
        min-width: 100%;
    }

    .aq-response-edit-row {
        flex-wrap: nowrap;
    }

    .aq-response-edit-row .aq-input--flex {
        min-width: 0;
    }
}