/**
 * WP Exam Pro — Public Styles
 *
 * Clean, responsive, accessible exam interface.
 */

/* ================================================================ */
/*  VARIABLES & BASE                                                  */
/* ================================================================ */
.aem-wrap {
    --aem-primary: #4f46e5;
    --aem-primary-hover: #4338ca;
    --aem-danger: #dc2626;
    --aem-danger-hover: #b91c1c;
    --aem-success: #16a34a;
    --aem-warning: #f59e0b;
    --aem-bg: #ffffff;
    --aem-bg-alt: #f8fafc;
    --aem-border: #e2e8f0;
    --aem-text: #1e293b;
    --aem-text-muted: #64748b;
    --aem-radius: 8px;
    --aem-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --aem-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    font-family: var(--aem-font);
    color: var(--aem-text);
    line-height: 1.6;
    box-sizing: border-box;
}
.aem-wrap *, .aem-wrap *::before, .aem-wrap *::after {
    box-sizing: border-box;
}

/* ================================================================ */
/*  LOADING                                                           */
/* ================================================================ */
.aem-loading {
    text-align: center;
    padding: 40px;
    color: var(--aem-text-muted);
}
.aem-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--aem-border);
    border-top-color: var(--aem-primary);
    border-radius: 50%;
    animation: aem-spin 0.7s linear infinite;
}
@keyframes aem-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================ */
/*  EXAM LISTING                                                      */
/* ================================================================ */
.aem-grid {
    display: grid;
    gap: 20px;
}
.aem-grid--grid.aem-cols-2 { grid-template-columns: repeat(2, 1fr); }
.aem-grid--grid.aem-cols-3 { grid-template-columns: repeat(3, 1fr); }
.aem-grid--grid.aem-cols-4 { grid-template-columns: repeat(4, 1fr); }
.aem-grid--list { grid-template-columns: 1fr; }

.aem-exam-card {
    background: var(--aem-bg);
    border: 1px solid var(--aem-border);
    border-radius: var(--aem-radius);
    box-shadow: var(--aem-shadow);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.aem-exam-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.aem-exam-card__header {
    padding: 20px 20px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.aem-exam-card__header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--aem-text);
}
.aem-exam-card__body {
    padding: 0 20px 16px;
    flex: 1;
}
.aem-exam-card__body p {
    margin: 0 0 12px;
    color: var(--aem-text-muted);
    font-size: 14px;
}
.aem-exam-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--aem-text-muted);
}
.aem-exam-meta li {
    display: flex;
    align-items: center;
    gap: 4px;
}
.aem-exam-card__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--aem-border);
    background: var(--aem-bg-alt);
}

/* ================================================================ */
/*  BUTTONS                                                           */
/* ================================================================ */
.aem-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
}
.aem-btn:active { transform: scale(0.97); }
.aem-btn--primary {
    background: var(--aem-primary);
    color: #fff;
}
.aem-btn--primary:hover { background: var(--aem-primary-hover); }
.aem-btn--secondary {
    background: var(--aem-bg-alt);
    color: var(--aem-text);
    border: 1px solid var(--aem-border);
}
.aem-btn--secondary:hover { background: var(--aem-border); }
.aem-btn--danger {
    background: var(--aem-danger);
    color: #fff;
}
.aem-btn--danger:hover { background: var(--aem-danger-hover); }
.aem-btn--disabled {
    background: var(--aem-bg-alt);
    color: var(--aem-text-muted);
    cursor: not-allowed;
}

.aem-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--aem-bg-alt);
    border: 1px solid var(--aem-border);
    color: var(--aem-text-muted);
}
.aem-badge--success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.aem-badge--fail { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.aem-badge--pending { background: #fefce8; color: #854d0e; border-color: #fef08a; }

/* ================================================================ */
/*  EXAM OVERLAY (TAKING THE EXAM)                                    */
/* ================================================================ */
body.aem-exam-active { overflow: hidden; }

.aem-exam-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999999;
    background: var(--aem-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.aem-exam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--aem-text);
    color: #fff;
    flex-shrink: 0;
}
.aem-exam-title {
    font-size: 16px;
    font-weight: 600;
}
.aem-timer {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 4px 16px;
    background: rgba(255,255,255,.1);
    border-radius: 6px;
}
.aem-timer--warning { color: var(--aem-warning); background: rgba(245,158,11,.15); }
.aem-timer--urgent {
    color: var(--aem-danger);
    background: rgba(220,38,38,.15);
    animation: aem-pulse 1s ease-in-out infinite;
}
@keyframes aem-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.aem-save-status {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    min-width: 60px;
    text-align: right;
}

/* Body */
.aem-exam-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.aem-question-area {
    flex: 1;
    padding: 32px 40px;
    overflow-y: auto;
}
.aem-question-nav {
    width: 220px;
    padding: 20px;
    background: var(--aem-bg-alt);
    border-left: 1px solid var(--aem-border);
    overflow-y: auto;
    flex-shrink: 0;
}

/* Footer */
.aem-exam-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-top: 1px solid var(--aem-border);
    background: var(--aem-bg-alt);
    flex-shrink: 0;
}
.aem-exam-footer .aem-btn:last-child { margin-left: auto; }

/* ================================================================ */
/*  QUESTION RENDERING                                                */
/* ================================================================ */
.aem-question__number {
    font-size: 13px;
    color: var(--aem-text-muted);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aem-question__text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 24px;
    line-height: 1.5;
}
.aem-question__media {
    max-width: 100%;
    height: auto;
    border-radius: var(--aem-radius);
    margin-bottom: 20px;
}
.aem-question__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Options */
.aem-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--aem-bg);
    border: 2px solid var(--aem-border);
    border-radius: var(--aem-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.aem-option:hover {
    border-color: var(--aem-primary);
    background: rgba(79,70,229,.03);
}
.aem-option--selected {
    border-color: var(--aem-primary);
    background: rgba(79,70,229,.06);
}
.aem-option input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--aem-primary);
}
.aem-option__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--aem-bg-alt);
    font-size: 13px;
    font-weight: 700;
    color: var(--aem-text-muted);
    flex-shrink: 0;
}
.aem-option--selected .aem-option__label {
    background: var(--aem-primary);
    color: #fff;
}
.aem-option__text {
    flex: 1;
    font-size: 15px;
}

/* Input types */
.aem-input, .aem-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--aem-border);
    border-radius: var(--aem-radius);
    font-size: 15px;
    font-family: var(--aem-font);
    transition: border-color 0.15s;
    color: var(--aem-text);
    background: var(--aem-bg);
}
.aem-input:focus, .aem-textarea:focus {
    outline: none;
    border-color: var(--aem-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.aem-word-count {
    margin-top: 6px;
    font-size: 12px;
    color: var(--aem-text-muted);
    text-align: right;
}

/* Matching */
.aem-matching { display: flex; flex-direction: column; gap: 10px; }
.aem-match-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--aem-bg-alt);
    border-radius: var(--aem-radius);
}
.aem-match-left { font-weight: 600; min-width: 120px; }
.aem-match-arrow { color: var(--aem-text-muted); }
.aem-match-select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--aem-border);
    border-radius: 6px;
    font-size: 14px;
}

/* Ordering */
.aem-ordering-hint { font-size: 13px; color: var(--aem-text-muted); margin: 0 0 10px; }
.aem-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--aem-bg);
    border: 2px solid var(--aem-border);
    border-radius: var(--aem-radius);
    cursor: grab;
    margin-bottom: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.aem-order-item:hover { border-color: var(--aem-primary); }
.aem-order-item--dragging { opacity: 0.4; border-style: dashed; }
.aem-order-handle { font-size: 16px; color: var(--aem-text-muted); cursor: grab; }

/* ================================================================ */
/*  NAVIGATION PANEL                                                  */
/* ================================================================ */
.aem-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.aem-nav-item {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--aem-border);
    border-radius: 6px;
    background: var(--aem-bg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.aem-nav-item:hover { border-color: var(--aem-primary); }
.aem-nav-item--current { border-color: var(--aem-primary); background: rgba(79,70,229,.1); color: var(--aem-primary); }
.aem-nav-item--answered { background: var(--aem-success); color: #fff; border-color: var(--aem-success); }
.aem-nav-item--flagged { border-color: var(--aem-warning); background: #fefce8; }
.aem-nav-item--answered.aem-nav-item--flagged { background: var(--aem-warning); color: #fff; }

.aem-nav-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    font-size: 11px;
    color: var(--aem-text-muted);
}
.aem-legend-item { display: flex; align-items: center; gap: 4px; }
.aem-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--aem-border);
}
.aem-legend-dot--answered { background: var(--aem-success); border-color: var(--aem-success); }
.aem-legend-dot--unanswered { background: var(--aem-bg); }
.aem-legend-dot--flagged { background: #fefce8; border-color: var(--aem-warning); }

/* ================================================================ */
/*  TIMER WARNINGS                                                    */
/* ================================================================ */
.aem-timer-warning {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: var(--aem-radius);
    font-weight: 600;
    font-size: 15px;
    z-index: 1000000;
    animation: aem-slide-down 0.3s ease;
}
.aem-timer-warning--warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.aem-timer-warning--urgent { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; animation: aem-slide-down 0.3s ease, aem-pulse 1s ease infinite; }
@keyframes aem-slide-down {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ================================================================ */
/*  PROCTORING WARNING                                                */
/* ================================================================ */
.aem-proctor-warning {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #fef2f2;
    color: #991b1b;
    border: 2px solid #fca5a5;
    padding: 16px 28px;
    border-radius: var(--aem-radius);
    font-weight: 600;
    font-size: 14px;
    z-index: 1000001;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    max-width: 90%;
    text-align: center;
}
.aem-proctor-warning--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ================================================================ */
/*  POST-EXAM SCREEN                                                  */
/* ================================================================ */
.aem-post-exam {
    max-width: 560px;
    margin: 60px auto;
    text-align: center;
    padding: 40px;
}
.aem-post-exam__icon { font-size: 56px; margin-bottom: 16px; }
.aem-post-exam h2 { font-size: 24px; margin: 0 0 12px; }
.aem-post-exam p { color: var(--aem-text-muted); margin: 0 0 12px; }
.aem-post-exam__details {
    background: var(--aem-bg-alt);
    border: 1px solid var(--aem-border);
    border-radius: var(--aem-radius);
    padding: 16px 20px;
    margin: 24px 0;
    text-align: left;
}
.aem-post-detail {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--aem-border);
    font-size: 14px;
}
.aem-post-detail:last-child { border-bottom: none; }
.aem-post-detail span:first-child { font-weight: 600; }
.aem-post-exam__note {
    font-size: 13px;
    color: var(--aem-text-muted);
    margin-top: 20px;
}

/* ================================================================ */
/*  RESULTS TABLE                                                     */
/* ================================================================ */
.aem-results-table {
    width: 100%;
    border-collapse: collapse;
}
.aem-results-table th, .aem-results-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--aem-border);
    font-size: 14px;
}
.aem-results-table th {
    background: var(--aem-bg-alt);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--aem-text-muted);
}
.aem-results-table tr:hover td { background: rgba(79,70,229,.02); }
.aem-link { color: var(--aem-primary); text-decoration: none; font-weight: 600; }
.aem-link:hover { text-decoration: underline; }

/* ================================================================ */
/*  ERROR & EMPTY                                                     */
/* ================================================================ */
.aem-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 20px;
    border-radius: var(--aem-radius);
}
.aem-empty {
    text-align: center;
    color: var(--aem-text-muted);
    padding: 40px;
}

/* ================================================================ */
/*  RESPONSIVE                                                        */
/* ================================================================ */
@media (max-width: 768px) {
    .aem-grid--grid { grid-template-columns: 1fr !important; }
    .aem-exam-body { flex-direction: column; }
    .aem-question-area { padding: 20px; }
    .aem-question-nav {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--aem-border);
        max-height: 140px;
    }
    .aem-exam-header { padding: 8px 12px; }
    .aem-exam-title { font-size: 14px; }
    .aem-timer { font-size: 18px; padding: 4px 10px; }
    .aem-question__text { font-size: 16px; }
    .aem-exam-footer { flex-wrap: wrap; gap: 8px; }
    .aem-exam-footer .aem-btn { font-size: 13px; padding: 8px 14px; }
}

@media (max-width: 480px) {
    .aem-option { padding: 10px 12px; }
    .aem-nav-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ================================================================ */
/*  LOGIN CARD                                                        */
/* ================================================================ */
.aem-login-card {
    max-width: 420px;
    margin: 40px auto;
    background: var(--aem-bg);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
    overflow: hidden;
}
.aem-login-header {
    text-align: center;
    padding: 32px 28px 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: #fff;
}
.aem-login-icon {
    font-size: 40px;
    margin-bottom: 8px;
}
.aem-login-header h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.aem-login-msg {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,.85);
}
.aem-login-body {
    padding: 28px;
}
.aem-login-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--aem-text);
    margin-bottom: 5px;
}
.aem-login-body input[type="text"],
.aem-login-body input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--aem-border);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
    transition: border-color .15s;
    color: var(--aem-text);
}
.aem-login-body input[type="text"]:focus,
.aem-login-body input[type="password"]:focus {
    outline: none;
    border-color: var(--aem-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.aem-login-body .login-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--aem-text-muted);
}
.aem-login-body .login-remember input {
    accent-color: var(--aem-primary);
}
.aem-login-body input[type="submit"],
.aem-login-body .button-primary {
    width: 100%;
    padding: 12px;
    background: var(--aem-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.aem-login-body input[type="submit"]:hover {
    background: #1d4ed8;
}
.aem-login-footer {
    text-align: center;
    padding: 14px 28px 20px;
    border-top: 1px solid var(--aem-border);
}
.aem-login-footer a {
    color: var(--aem-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.aem-login-footer a:hover {
    text-decoration: underline;
}

/* Style the WP login form inside our card */
#aem-loginform {
    margin: 0;
    padding: 0;
}
#aem-loginform p {
    margin-bottom: 14px;
}
#aem-loginform .login-submit {
    margin: 0;
}