/* Lifted verbatim from assignment-ai-results.blade.php.
   Inline it was 29,525 bytes of HTML on every render;
   as a file the browser fetches it once. */
/* ══════════════════════════════════════════════════════════════════
   AI RESULTS PAGE - CLEAN VERCEL-STYLE DESIGN
   ══════════════════════════════════════════════════════════════════ */

.ai-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

/* ═══════════════════════════════════════════
   HEADER - CLEAN MINIMAL
   ═══════════════════════════════════════════ */
/* ── AI disclaimer panel ─────────────────────────────────
   Plain, restrained card. Not alarmist (red banner would feel
   accusatory), not dismissable forever (users need this each visit). */
.ai-disclaimer {
    margin: 0 0 1.5rem;
    padding: 14px 16px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 10px;
    font-size: 0.8125rem;
    line-height: 1.55;
}
.ai-disclaimer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.825rem;
    color: var(--foreground, #0a0a0a);
}
.ai-disclaimer-icon {
    display: inline-flex;
    color: #2563eb;
}
.ai-disclaimer-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
    white-space: nowrap;
}
.ai-disclaimer-meta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
}
.ai-disclaimer-toggle {
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted-foreground, #6b7280);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ai-disclaimer-toggle:hover {
    background: var(--muted, #f3f4f6);
    color: var(--foreground, #0a0a0a);
}
.ai-disclaimer-toggle svg {
    transition: transform 0.18s;
}
.ai-disclaimer.collapsed .ai-disclaimer-toggle svg {
    transform: rotate(180deg);
}
.ai-disclaimer-body {
    margin-top: 10px;
    color: var(--foreground, #0a0a0a);
    max-width: 78ch;
}
.ai-disclaimer-body p {
    margin: 0 0 8px;
}
.ai-disclaimer-body p:last-child { margin-bottom: 0; }
.ai-disclaimer-body em { font-style: italic; color: var(--muted-foreground, #6b7280); }
.ai-disclaimer.collapsed .ai-disclaimer-body {
    display: none;
}
@media (max-width: 640px) {
    .ai-disclaimer-meta { display: none; }
}

.ai-header {
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.ai-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.ai-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--foreground, #0a0a0a);
    margin: 0;
}

.ai-divider {
    color: var(--muted-foreground, #6b7280);
    opacity: 0.4;
}

.ai-assignment-name {
    font-size: 1rem;
    font-weight: 400;
    color: var(--muted-foreground, #6b7280);
}

.ai-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Buttons */
.ai-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--foreground, #0a0a0a);
    cursor: pointer;
    transition: all 0.15s;
}

.ai-btn-secondary:hover {
    background: var(--muted, #f3f4f6);
    border-color: var(--muted-foreground, #6b7280);
}

.ai-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--foreground, #0a0a0a);
    border: 1px solid var(--foreground, #0a0a0a);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--background, #ffffff);
    cursor: pointer;
    transition: all 0.15s;
}

.ai-btn-primary:hover {
    opacity: 0.9;
}

/* Export Dropdown */
.ai-export-wrap { position: relative; }

.ai-export-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 140px;
    background: var(--card, var(--background, #ffffff));
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s;
    z-index: 100;
}

.ai-export-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ai-export-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: var(--foreground, #0a0a0a);
    text-decoration: none;
}

.ai-export-menu a:hover {
    background: var(--muted, #f3f4f6);
}

/* ═══════════════════════════════════════════
   STATS SECTION - CLEAN GRID
   ═══════════════════════════════════════════ */
.ai-stats-section {
    margin-bottom: 2.5rem;
}

.ai-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border, #e5e7eb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .ai-stats-row {
        grid-template-columns: 1.5fr repeat(4, 1fr);
    }
}

.ai-metric-card {
    padding: 1.25rem 1rem;
    background: var(--card, var(--background, #ffffff));
}

.ai-metric-main {
    grid-column: span 2;
}

@media (min-width: 768px) {
    .ai-metric-main {
        grid-column: span 1;
    }
}

.ai-metric-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--foreground, #0a0a0a);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ai-metric-main .ai-metric-value {
    font-size: 2.5rem;
}

.ai-metric-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.ai-metric-sub {
    font-size: 0.75rem;
    color: var(--muted-foreground, #6b7280);
    margin-top: 0.25rem;
}

.text-red { color: #ef4444; }
.text-amber { color: #f59e0b; }
.text-green { color: #22c55e; }

/* Distribution */
.ai-distribution {
    background: var(--card, var(--background, #ffffff));
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.ai-dist-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ai-dist-basis {
    font-size: 0.6875rem;
    color: var(--muted-foreground, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* Band range printed next to each label so the buckets are self-documenting. */
.ai-dist-band {
    margin-left: 0.375rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: 4px;
    background: var(--muted, #f3f4f6);
    color: var(--muted-foreground, #6b7280);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.ai-dist-item-muted .ai-dist-name,
.ai-dist-item-muted .ai-dist-count {
    color: var(--muted-foreground, #6b7280);
}

.ai-dist-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-dist-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-dist-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ai-dist-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-dist-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ai-dist-name {
    font-size: 0.8125rem;
    color: var(--foreground, #0a0a0a);
    flex: 1;
}

.ai-dist-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground, #0a0a0a);
    font-variant-numeric: tabular-nums;
}

.ai-dist-bar {
    height: 6px;
    background: var(--muted, #f3f4f6);
    border-radius: 3px;
    overflow: hidden;
}

.ai-dist-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.ai-fill-green { background: #22c55e; }
.ai-fill-amber { background: #f59e0b; }
.ai-fill-red { background: #ef4444; }
.ai-fill-grey { background: #cbd5e1; }

/* ═══════════════════════════════════════════
   SUBMISSIONS TABLE
   ═══════════════════════════════════════════ */
.ai-submissions {
    margin-top: 0;
}

.ai-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.ai-section-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground, #0a0a0a);
    margin: 0;
}

.ai-filter-group {
    display: flex;
    gap: 0.25rem;
    background: var(--muted, #f3f4f6);
    padding: 0.25rem;
    border-radius: 6px;
}

.ai-filter-btn {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
}

.ai-filter-btn:hover {
    color: var(--foreground, #0a0a0a);
}

.ai-filter-btn.ai-filter-active {
    background: var(--card, var(--background, #ffffff));
    color: var(--foreground, #0a0a0a);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Table */
.ai-table-wrap {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}

.ai-table {
    width: 100%;
    border-collapse: collapse;
}

.ai-table thead {
    background: var(--muted, #f3f4f6);
}

.ai-table th {
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.ai-table th:last-child {
    width: 48px;
}

.ai-row {
    cursor: pointer;
    transition: background 0.1s;
}

.ai-row:hover {
    background: var(--muted, #f3f4f6);
}

.ai-row td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-size: 0.8125rem;
}

.ai-row:last-child td {
    border-bottom: none;
}

/* Risk rail — colored left edge so the eye can scan severity instantly */
.ai-table th:first-child,
.ai-row td:first-child { border-left: 3px solid transparent; }
.ai-row-safe td:first-child { border-left-color: #22c55e; }
.ai-row-warning td:first-child { border-left-color: #f59e0b; }
.ai-row-danger td:first-child { border-left-color: #ef4444; }

.ai-cell-name {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ai-filename {
    font-weight: 500;
    color: var(--foreground, #0a0a0a);
}

.ai-time {
    font-size: 0.75rem;
    color: var(--muted-foreground, #6b7280);
}

.ai-score {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ai-score-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* don't stretch children to the full column width */
    gap: 0.3125rem;
    min-width: 80px;
}

/* The details-modal score card also uses .ai-score-{status} and adds a tinted
   background; null it out here so the table score stays a clean number, not a box. */
.ai-score-cell .ai-score {
    background: none !important;
    padding: 0 !important;
    align-self: flex-start;
    width: auto;
}

.ai-score-safe { color: #16a34a; }
.ai-score-warning { color: #d97706; }
.ai-score-danger { color: #dc2626; }

/* Mini score bar — lets instructors visually compare risk down the list */
.ai-score-bar {
    display: block;
    width: 68px;
    height: 4px;
    border-radius: 999px;
    background: var(--muted, #eef0f3);
    overflow: hidden;
}
.ai-score-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.ai-fill-safe { background: #22c55e; }
.ai-fill-warning { background: #f59e0b; }
.ai-fill-danger { background: #ef4444; }

.ai-score-pending,
.ai-range-pending {
    color: var(--muted-foreground, #6b7280);
}

.ai-range {
    color: var(--muted-foreground, #6b7280);
    font-variant-numeric: tabular-nums;
}

.ai-files {
    color: var(--muted-foreground, #6b7280);
    font-variant-numeric: tabular-nums;
}

.ai-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.4375rem;
    border-radius: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ai-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ai-status-safe {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.ai-status-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.ai-status-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Submissions the engine never scored — deliberately neutral, so they read
   as "no data" rather than as a clean result. */
.ai-status-pending {
    background: var(--muted, #f3f4f6);
    color: var(--muted-foreground, #6b7280);
}

/* Marks a flagged submission the code-perfection detector agrees with. */
.ai-status-corroborated {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: help;
}

.ai-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted-foreground, #6b7280);
    cursor: pointer;
    transition: all 0.1s;
}

.ai-row:hover .ai-view-btn {
    background: var(--background, #ffffff);
    color: var(--foreground, #0a0a0a);
}

/* Empty State */
.ai-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted-foreground, #6b7280);
}

.ai-empty-state p {
    margin: 0 0 1rem;
}

/* Legacy support for old classes */
.ai-dot-green { background: #22c55e; }
.ai-dot-amber { background: #f59e0b; }
.ai-dot-red { background: #ef4444; }
.ai-dot-grey { background: #cbd5e1; }

/* ═══════════════════════════════════════════
   UPGRADE SECTION - CLEAN
   ═══════════════════════════════════════════ */
.ai-upgrade-premium {
    padding: 4rem 2rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    margin: 2rem 0;
    text-align: center;
}

.ai-upgrade-bg { display: none; }
.ai-upgrade-blur-1, .ai-upgrade-blur-2 { display: none; }

.ai-upgrade-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ai-upgrade-icon-wrap { margin-bottom: 1.5rem; }

.ai-upgrade-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--muted, #f3f4f6);
    color: var(--muted-foreground, #6b7280);
}

.ai-upgrade-content h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground, #0a0a0a);
    margin: 0 0 0.5rem;
}

.ai-upgrade-content p {
    font-size: 0.875rem;
    color: var(--muted-foreground, #6b7280);
    margin: 0 0 1.5rem;
}

.ai-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--foreground, #0a0a0a);
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--background, #ffffff);
    cursor: pointer;
    transition: opacity 0.15s;
}

.ai-upgrade-btn:hover { opacity: 0.9; }

.ai-upgrade-benefits {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.ai-upgrade-benefits span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--muted-foreground, #6b7280);
}

.ai-upgrade-benefits svg { color: #22c55e; }

/* Features Section */
.ai-features-premium { margin-top: 2rem; }

.ai-features-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ai-features-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--muted, #f3f4f6);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.ai-features-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground, #0a0a0a);
    margin: 0 0 0.25rem;
}

.ai-features-header p {
    font-size: 0.8125rem;
    color: var(--muted-foreground, #6b7280);
    margin: 0;
}

.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .ai-features-grid { grid-template-columns: repeat(3, 1fr); }
}

.ai-feature-card {
    padding: 1.25rem;
    background: var(--card, var(--background, #ffffff));
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
}

.ai-feature-card:hover {
    border-color: var(--muted-foreground, #6b7280);
}

.ai-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--muted, #f3f4f6);
    color: var(--muted-foreground, #6b7280);
    margin-bottom: 0.75rem;
}

.ai-feature-card h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground, #0a0a0a);
    margin: 0 0 0.375rem;
}

.ai-feature-card p {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted-foreground, #6b7280);
    margin: 0;
}

/* ═══════════════════════════════════════════
   MODAL - CLEAN
   ═══════════════════════════════════════════ */
.ai-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--muted, #f3f4f6);
    color: var(--foreground, #0a0a0a);
}

.ai-modal-title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground, #0a0a0a);
    margin: 0;
}

.dark .ai-modal-title h3,
[data-kt-theme-mode="dark"] .ai-modal-title h3 {
    color: #f9fafb;
}

.ai-modal-title span {
    font-size: 0.8125rem;
    color: #6b7280;
}

.dark .ai-modal-title span,
[data-kt-theme-mode="dark"] .ai-modal-title span {
    color: #9ca3af;
}

.ai-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f3f4f6;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
}

.dark .ai-modal-close,
[data-kt-theme-mode="dark"] .ai-modal-close {
    background: #374151;
    color: #9ca3af;
}

.ai-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.dark .ai-modal-close:hover,
[data-kt-theme-mode="dark"] .ai-modal-close:hover {
    background: #4b5563;
    color: #f9fafb;
}

.ai-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: #f9fafb;
}

.dark .ai-modal-body,
[data-kt-theme-mode="dark"] .ai-modal-body {
    background: #111827;
}

/* Modal body styling for cq-modal version */
.ai-details-modal-body {
    background: #f9fafb;
}

.dark .ai-details-modal-body,
[data-kt-theme-mode="dark"] .ai-details-modal-body {
    background: #111827;
}

.ai-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: #6b7280;
}

.ai-loader {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border, #e5e7eb);
    border-top-color: var(--foreground, #0a0a0a);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Modal Content Styles */
.ai-details-content { }

.ai-details-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .ai-details-summary { grid-template-columns: repeat(4, 1fr); }
}

.ai-details-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
}

.dark .ai-details-stat,
[data-kt-theme-mode="dark"] .ai-details-stat {
    background: #1f2937;
    border-color: #374151;
}

.ai-details-stat-value {
    font-size: 1.5rem;
    font-weight: 750;
    color: #111827;
}

.dark .ai-details-stat-value,
[data-kt-theme-mode="dark"] .ai-details-stat-value {
    color: #f9fafb;
}

.ai-details-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

.text-red { color: #EF4444; }
.text-amber { color: #F59E0B; }
.text-green { color: #10B981; }

.ai-details-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground, #0a0a0a);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.ai-details-section-title svg { color: var(--muted-foreground, #6b7280); }

.ai-details-empty {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

.ai-details-file {
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 1rem;
}

.dark .ai-details-file,
[data-kt-theme-mode="dark"] .ai-details-file {
    background: #1f2937;
    border-color: #374151;
}

.ai-details-file:last-child { margin-bottom: 0; }

.ai-details-file-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ai-details-file-info { min-width: 0; flex: 1; }

.ai-details-file-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    word-break: break-all;
}

.dark .ai-details-file-name,
[data-kt-theme-mode="dark"] .ai-details-file-name {
    color: #f9fafb;
}

.ai-details-file-class {
    display: inline-block;
    margin-top: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.ai-details-file-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    text-align: center;
    min-width: 80px;
}

/* These tinted backgrounds are for the details-modal score card only.
   :not(.ai-score) keeps them off the table's score number so it never
   renders as a filled box. */
.ai-score-safe:not(.ai-score) { background: rgba(16, 185, 129, 0.1); }
.ai-score-warning:not(.ai-score) { background: rgba(245, 158, 11, 0.1); }
.ai-score-danger:not(.ai-score) { background: rgba(239, 68, 68, 0.1); }

.ai-details-score-value {
    font-size: 1.25rem;
    font-weight: 750;
}

.ai-score-safe .ai-details-score-value { color: #059669; }
.ai-score-warning .ai-details-score-value { color: #D97706; }
.ai-score-danger .ai-details-score-value { color: #DC2626; }

.ai-details-score-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

.ai-score-safe .ai-details-score-label { color: #059669; }
.ai-score-warning .ai-details-score-label { color: #D97706; }
.ai-score-danger .ai-details-score-label { color: #DC2626; }

.ai-details-file-bars {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.ai-details-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 50px;
    align-items: center;
    gap: 0.75rem;
}

.ai-details-bar-label {
    font-size: 0.75rem;
    color: #6b7280;
}

.ai-details-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.dark .ai-details-bar,
[data-kt-theme-mode="dark"] .ai-details-bar {
    background: #374151;
}

.ai-details-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.ai-bar-safe { background: linear-gradient(90deg, #10B981, #34D399); }
.ai-bar-warning { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.ai-bar-danger { background: linear-gradient(90deg, #EF4444, #F87171); }

.ai-details-bar-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

.dark .ai-details-bar-value,
[data-kt-theme-mode="dark"] .ai-details-bar-value {
    color: #f9fafb;
}

.ai-details-indicators {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.dark .ai-details-indicators,
[data-kt-theme-mode="dark"] .ai-details-indicators {
    border-top-color: #374151;
}

.ai-indicator-category { }

.ai-indicator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.ai-indicator-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
}

.dark .ai-indicator-name,
[data-kt-theme-mode="dark"] .ai-indicator-name {
    color: #f9fafb;
}

.ai-indicator-score {
    font-size: 0.75rem;
    font-weight: 700;
}

.ai-indicator-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ai-indicator-tag {
    padding: 0.25rem 0.5rem;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.6875rem;
    color: #4b5563;
}

.dark .ai-indicator-tag,
[data-kt-theme-mode="dark"] .ai-indicator-tag {
    background: #374151;
    color: #9ca3af;
}

.ai-indicator-more {
    padding: 0.25rem 0.5rem;
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.ai-details-recommendation {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid #3B82F6;
    border-radius: 0 8px 8px 0;
    font-size: 0.8125rem;
    color: #1f2937;
    line-height: 1.5;
}

.dark .ai-details-recommendation,
[data-kt-theme-mode="dark"] .ai-details-recommendation {
    background: rgba(59, 130, 246, 0.15);
    color: #e5e7eb;
}

/* Print Styles */
@media print {
    /* Hide interactive chrome that doesn't belong on a printed report.
       Also drop the AI Score Range and trailing action arrow columns so
       the submissions table compacts into 4 columns + status pill instead
       of 6 — that's what cuts ~100 submissions from ~9 pages down to ~3. */
    .no-print,
    .ai-hero-right,
    .ai-filter-group,
    .ai-sub-action,
    .ai-card-action,
    .ai-modal { display: none !important; }

    /* Hide last column (action arrow) and the Range column to give the
       Submission name + Files + Status columns room to breathe at 10pt. */
    .ai-table th:nth-child(3),
    .ai-table td:nth-child(3),
    .ai-table th:nth-child(6),
    .ai-table td:nth-child(6) { display: none !important; }

    @page { margin: 0.4in 0.45in; size: letter; }

    html, body { background: #fff !important; }

    .ai-page { max-width: 100%; padding: 0; }

    .ai-hero-premium {
        background: none;
        border: none;
        padding: 0.4rem 0 0.6rem;
        margin: 0 0 0.5rem;
        page-break-after: avoid;
    }

    /* Headline-ish elements shrunk for density. */
    .ai-hero-title { font-size: 16pt !important; margin: 0 0 0.2rem !important; }
    .ai-hero-subtitle, .ai-hero-meta { font-size: 9pt !important; }

    /* KPI tiles stay but use minimal padding. */
    .ai-metric-card {
        padding: 0.35rem 0.5rem !important;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
        break-inside: avoid;
    }
    .ai-metric-value { font-size: 14pt !important; }
    .ai-metric-label { font-size: 8pt !important; }

    /* Submissions table: tight rows, small font, repeated header on every
       page so multi-page printouts stay readable. */
    .ai-section-title { font-size: 11pt !important; margin: 0.5rem 0 0.25rem !important; }
    .ai-table { font-size: 9pt !important; page-break-inside: auto; }
    .ai-table thead { display: table-header-group; }
    .ai-table tfoot { display: table-footer-group; }
    .ai-table th { padding: 4px 8px !important; font-size: 7.5pt !important; }
    .ai-table tr { page-break-inside: avoid; }
    .ai-row td {
        padding: 3px 8px !important;
        font-size: 9pt !important;
        line-height: 1.25 !important;
    }
    .ai-filename { font-size: 9pt !important; }
    .ai-time { display: none !important; }
    .ai-score, .ai-score-pending { font-size: 9pt !important; padding: 0 !important; background: none !important; }
    .ai-status { font-size: 8pt !important; padding: 1px 6px !important; }

    /* Removed/legacy card layouts kept compact in case any view falls back. */
    .ai-sub-card,
    .ai-card-v2 {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e5e7eb;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        padding: 0.3rem 0.5rem !important;
    }

    .ai-card-v2::before { display: none !important; }
}