/* Admin area aggregate styles to prevent 404 on /assets/css/admin.css */
/* Imports of existing component styles (keep order: navigation, modals, panels) */
@import url('/assets/css/nav.css');
@import url('/assets/css/modal.css');
@import url('/assets/css/admin-panels.css');

/* Lightweight base styling specific to reports.html (can expand later) */
html, body { font-family: system-ui, Segoe UI, Arial, sans-serif; background:#fafafa; color:#222; max-width:100%; overflow-x:hidden; scroll-behavior:smooth; overscroll-behavior-y:none; }
#admin-app { min-height:40px; }
.reports-container h1 { margin:0 0 16px; font-size:20px; }
/* Buttons (shared look with admin pages) */
.btn { cursor:pointer; border:1px solid transparent; border-radius:8px; padding:0.6rem 1rem; font-size:0.95rem; font-weight:600; transition:all .15s ease; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary { background:#2563eb; color:#fff; border-color:#1d4ed8; }
.btn-primary:hover { background:#1d4ed8; }
.btn-outline { background:#fff; color:#111827; border-color:#d1d5db; }
.btn-outline:hover { background:#f3f4f6; }
.btn-danger { background:#dc2626; color:#fff; border-color:#b91c1c; }
.btn-danger:hover { background:#b91c1c; }
.btn-xs { padding:0.35rem 0.55rem; font-size:0.85rem; border-radius:6px; }

/* Inputs */
input, select { border:1px solid #d1d5db; border-radius:8px; padding:0.6rem .75rem; background:#fff; }
input[type="search"] { width:100%; box-shadow:0 1px 6px rgba(0,0,0,0.04); }

.table-loading { text-align:center; padding:30px; font-size:14px; color:#666; }
/* Utility pills present in page inline styles kept here for future extraction */
.pill { display:inline-block; padding:2px 6px; border-radius:4px; background:#eee; font-size:11px; }
.pill.kapitel { background:#d0eaff; }
.pill.quiz { background:#ffe6c7; }
.pill.scenario { background:#e6d7ff; }
.pill.overview { background:#d1ffd6; }
.pill.ovrigt { background:#ffe0f2; }
.pill.kalla { background:#e0f2ff; }
.pill.slutprov { background:#fff0cc; }
.pill.slutet { background:#f2ffe5; }

/* Admin hero + container (match other admin pages for this page) */
.admin-hero { position:relative; text-align:center; padding: clamp(2rem, 6vw, 3rem) clamp(1.25rem, 4vw, 2rem); padding-inline-start: clamp(2.75rem, 8vw, 3.75rem); background: linear-gradient(90deg, #ff3b30 0%, #ff5e13 45%, #ff8c00 100%); color:#111; margin-bottom:2rem; }
.admin-hero h1 { margin:0; font-size: clamp(1.8rem, 4vw, 2.5rem); color:#000; }
.admin-container { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0.75rem, 3vw, 2rem) clamp(2rem, 5vw, 3rem); box-sizing:border-box; }
.hamburger { position:absolute; top:1rem; left:1rem; background:rgba(255,255,255,.2); border:none; padding:.75rem; border-radius:8px; cursor:pointer; z-index:10; }
.admin-nav { background:#fff; border-radius:16px; padding:clamp(0.85rem, 2.5vw, 1.4rem); margin-bottom:2rem; display:flex; flex-wrap:wrap; gap:0.75rem; box-shadow:0 4px 16px rgba(0,0,0,0.15); width:100%; box-sizing:border-box; overflow:hidden; }
.admin-nav a { padding:clamp(0.65rem, 2.5vw, 1rem) clamp(0.9rem, 3vw, 1.5rem); border-radius:8px; text-decoration:none; color:#374151; font-weight:600; transition:all 0.2s; box-sizing:border-box; }
.admin-nav a:hover, .admin-nav a.active { background: linear-gradient(135deg, #ff5e13, #ff8c00); color:#fff; transform: translateY(-1px); }
/* Legacy hero back-link hidden now that scroll-top control replaces it */
.sj-backlink { display:none !important; }
.logout-btn { box-sizing:border-box; max-width:100%; }
.burger-lines { display:block; width:25px; height:2px; background:#000; position:relative; }
.burger-lines::before, .burger-lines::after { content:''; position:absolute; width:25px; height:2px; background:#000; left:0; }
.burger-lines::before { top:-8px; } .burger-lines::after { top:8px; }

.admin-scroll-top { display:flex; justify-content:center; margin: clamp(1.75rem, 5vw, 2.75rem) 0 clamp(1.25rem, 4vw, 2rem); }
.admin-scroll-top__btn { background: linear-gradient(135deg, #ff5e13, #ff8c00); color:#fff; border:none; border-radius:999px; width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(255,94,19,0.28); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; cursor:pointer; }
.admin-scroll-top__btn:hover { transform: translateY(-3px); box-shadow:0 14px 30px rgba(255,94,19,0.34); }
.admin-scroll-top__btn:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.admin-scroll-top__icon { font-size:1.4rem; line-height:1; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

@media (max-width: 640px) {
	.admin-scroll-top { margin: clamp(1.25rem, 6vw, 2rem) 0 clamp(1rem, 6vw, 1.75rem); }
	.admin-scroll-top__btn { width:46px; height:46px; box-shadow:0 6px 16px rgba(255,94,19,0.28); }
	.admin-scroll-top__icon { font-size:1.2rem; }
	.admin-container { padding-left: clamp(1.2rem, 7vw, 2.25rem); padding-right: clamp(1.2rem, 7vw, 2.25rem); }
}

/* Table styles unified with admin pages */
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; padding:0.75rem; border-bottom:2px solid #e5e7eb; color:#6b7280; font-weight:600; background:#fff; position:sticky; top:0; z-index:1; }
.table td { padding:0.75rem; border-bottom:1px solid #e5e7eb; vertical-align: top; word-break: normal; overflow-wrap: anywhere; }
.table tr:hover { background:#f9fafb; }
.table-container { overflow-x:auto; }
.table-responsive { max-width: 100%; }

/* Responsive stacked table: requires td[data-label] */
@media (max-width: 900px) {
	.table.table-stack { --stack-label-w: 38%; }
	.table.table-stack thead { display: none; }
	.table.table-stack tbody { display:block; width:100%; }
	.table.table-stack tr { display:block; margin-bottom:.85rem; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
	.table.table-stack td { display:block; border:none; border-bottom:1px solid #f3f4f6; padding:0.75rem 1rem; }
	.table.table-stack td:last-child { border-bottom:none; }
	.table.table-stack td[data-label] { display:grid; grid-template-columns:minmax(110px, var(--stack-label-w)) 1fr; gap:0.75rem; align-items:flex-start; }
	.table.table-stack td[data-label]::before { content: attr(data-label); font-weight:600; color:#6b7280; font-size:0.85rem; background:none; padding:0; border:none; }
	.table.table-stack td[data-label] > *:not(.actions) { min-width:0; }
}

/* Even narrower phones: give content more room */
@media (max-width: 420px) {
	.table.table-stack { --stack-label-w: 34%; }
}
@media (max-width: 360px) {
	.table.table-stack { --stack-label-w: 30%; }
}

/* Utility for wrapping long text in message column */
.msg, .cell-msg { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }

.badge { white-space: nowrap; }
.actions { display:flex; gap:.4rem; flex-wrap:wrap; }

/* Collapsible message block for mobile */
.cell-collapsible .cell-msg-full[hidden] { display: none; }
.cell-collapsible .cell-msg-preview { display:block; }
.collapse-toggle { margin-top:.35rem; }

@media (max-width: 900px) {
	.admin-nav { flex-direction: column; gap:0.6rem; }
	.admin-nav a { width:100%; text-align:center; }
	.logout-btn { margin-left:0; width:100%; }
	.actions { flex-direction: column; }
	.actions .btn,
	.actions button { width:100%; justify-content:center; }
	.table.table-stack td { padding-top:0.65rem; padding-bottom:0.65rem; }
}

@media (max-width: 640px) {
	.admin-hero { padding-inline-start: clamp(3rem, 12vw, 3.9rem); padding-inline-end: clamp(1.1rem, 5vw, 1.7rem); }
}