/* Instructor / university dashboard demo. Builds on /static/demo-theme.css. */

.id-subhead { background: var(--ec-surface); border-bottom: 1px solid var(--ec-line); }
.id-subhead-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ec-s4); padding: var(--ec-s3) 0; flex-wrap: wrap; }
.id-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ec-muted); font-size: .9rem; }
.id-crumbs strong { color: var(--ec-ink); }
.id-crumbs i { color: var(--ec-line-strong); font-style: normal; }

/* Sticky section tabs */
.id-tabs { position: sticky; top: 76px; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ec-line); }
.id-tabs-inner { display: flex; gap: 4px; overflow-x: auto; }
.id-tabs a { padding: 14px 14px; font-size: .9rem; font-weight: 560; color: var(--ec-ink-soft); border-bottom: 2px solid transparent; white-space: nowrap; }
.id-tabs a:hover { color: var(--ec-ink); }
.id-tabs a.is-active { color: var(--ec-primary); border-bottom-color: var(--ec-primary); }

.id-main { padding-top: var(--ec-s6); padding-bottom: var(--ec-s8); }
.id-section { scroll-margin-top: 150px; margin-bottom: var(--ec-s8); }
.id-intro .ec-lead { max-width: 70ch; margin-top: 0; }
.id-walkthrough { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: var(--ec-s4) 0; }
.id-walkthrough li { display: flex; align-items: center; gap: 8px; background: var(--ec-surface, #fff); border: 1px solid var(--ec-line, #dde2e8); border-radius: 999px; padding: 7px 14px 7px 8px; font-size: .86rem; font-weight: 600; color: var(--ec-ink, #1c2733); }
.id-walkthrough .id-wn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ec-primary, #0c3b4a); color: #fff; font-size: .78rem; }
.id-techdetail { margin-top: 10px; }
.id-techdetail summary { cursor: pointer; font-size: .84rem; color: var(--ec-primary, #0c3b4a); font-weight: 600; }
@media (max-width: 560px) { .id-walkthrough li { width: 100%; } }
.id-section-head { margin-bottom: var(--ec-s5); }
.id-section-head h2 { margin-bottom: 4px; }
.id-section-head p { margin: 0; }
.id-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ec-s4); flex-wrap: wrap; }

/* Metric cards */
.id-metrics { grid-template-columns: repeat(4, 1fr); }
.id-metric { background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); padding: var(--ec-s5); box-shadow: var(--ec-shadow-sm); }
.id-metric .v { font-size: 1.8rem; font-weight: 720; letter-spacing: -0.03em; color: var(--ec-ink); }
.id-metric .l { color: var(--ec-muted); font-size: .86rem; margin-top: 2px; }
.id-metric .d { font-size: .8rem; margin-top: 8px; }
@media (max-width: 900px) { .id-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .id-metrics { grid-template-columns: 1fr; } }

/* Hierarchy */
.id-hierarchy { display: flex; flex-direction: column; gap: 0; }
.id-hier-node { position: relative; background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-r-md); padding: 12px 16px; box-shadow: var(--ec-shadow-sm); margin-bottom: 22px; font-weight: 600; }
.id-hier-node:last-child { margin-bottom: 0; }
.id-hier-node::after { content: ""; position: absolute; left: 28px; bottom: -22px; width: 2px; height: 22px; background: var(--ec-line-strong); }
.id-hier-node:last-child::after { display: none; }
.id-hier-k { display: inline-block; min-width: 96px; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700; color: var(--ec-accent); margin-right: 12px; }
.id-l1 { margin-left: 0; } .id-l2 { margin-left: 28px; } .id-l3 { margin-left: 56px; }
.id-l4 { margin-left: 84px; } .id-l5 { margin-left: 112px; } .id-l6 { margin-left: 140px; }
.id-l2::after, .id-l3::after, .id-l4::after, .id-l5::after { left: 28px; }
@media (max-width: 640px) { .id-l1,.id-l2,.id-l3,.id-l4,.id-l5,.id-l6 { margin-left: 0; } .id-hier-node::after { display: none; } }

/* Exam builder */
.id-builder { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--ec-s5); align-items: start; }
.id-field { display: block; margin-bottom: var(--ec-s4); }
.id-field span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ec-muted); margin-bottom: 6px; font-weight: 700; }
.id-input { border: 1px solid var(--ec-line); border-radius: var(--ec-r-md); padding: 10px 12px; background: var(--ec-surface-alt); color: var(--ec-ink); }
.id-input-area { min-height: 64px; }
.id-code { font-family: var(--ec-mono); font-size: .82rem; background: #0c2c37; color: #cfe6ee; padding: 14px; border-radius: var(--ec-r-md); overflow-x: auto; margin: 0; }
.id-build-card { margin-bottom: var(--ec-s4); }
.id-build-card h3 { margin-bottom: var(--ec-s3); font-size: .95rem; }
.id-kv { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--ec-line); font-size: .9rem; }
.id-kv:first-of-type { border-top: 0; }
.id-chips { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 800px) { .id-builder { grid-template-columns: 1fr; } }

/* Autograding tests */
.id-tests { list-style: none; padding: 0; margin: 0; }
.id-test { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ec-line); }
.id-test:first-child { border-top: 0; }
.id-test-name { font-size: .94rem; }
.id-test-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.id-test-pts { font-family: var(--ec-mono); font-size: .82rem; color: var(--ec-muted); }

/* Monitoring table */
.id-filters { display: inline-flex; gap: 4px; background: var(--ec-surface-alt); padding: 4px; border-radius: var(--ec-r-pill); }
.id-filter { border: 0; background: transparent; padding: 6px 14px; border-radius: var(--ec-r-pill); font-size: .86rem; font-weight: 560; color: var(--ec-ink-soft); cursor: pointer; }
.id-filter.is-active { background: var(--ec-surface); color: var(--ec-primary); box-shadow: var(--ec-shadow-sm); }
.id-table-wrap { padding: 0; overflow-x: auto; }
.id-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.id-table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ec-muted); padding: 14px 16px; border-bottom: 1px solid var(--ec-line); }
.id-table td { padding: 12px 16px; border-bottom: 1px solid var(--ec-line); font-size: .92rem; }
.id-table tr:last-child td { border-bottom: 0; }
.id-prog { height: 8px; width: 120px; background: var(--ec-surface-alt); border-radius: var(--ec-r-pill); overflow: hidden; }
.id-prog > i { display: block; height: 100%; background: var(--ec-primary); }

/* Analytics — CSS/SVG charts */
.id-bars { display: flex; align-items: flex-end; gap: 14px; height: 160px; padding-top: var(--ec-s3); }
.id-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.id-bar > i { width: 100%; max-width: 46px; background: linear-gradient(180deg, var(--ec-primary-600), var(--ec-primary)); border-radius: 6px 6px 0 0; }
.id-bar .cap { font-size: .72rem; color: var(--ec-muted); }
.id-bar .val { font-size: .78rem; font-weight: 700; color: var(--ec-ink); }
.id-rows { display: flex; flex-direction: column; gap: 12px; }
.id-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.id-row .meter { grid-column: 1 / -1; height: 8px; background: var(--ec-surface-alt); border-radius: var(--ec-r-pill); overflow: hidden; }
.id-row .meter > i { display: block; height: 100%; background: var(--ec-accent); }
.id-row .name { font-size: .9rem; } .id-row .pct { font-size: .82rem; font-weight: 700; color: var(--ec-ink); font-family: var(--ec-mono); }
.id-spark { width: 100%; height: 90px; }
.id-queue { list-style: none; padding: 0; margin: 0; }
.id-queue li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ec-line); font-size: .9rem; }
.id-queue li:first-child { border-top: 0; }
.id-queue .who { font-weight: 600; } .id-queue .why { color: var(--ec-muted); font-size: .84rem; }

/* Review flow */
.id-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ec-s4); }
.id-flow-step { position: relative; }
.id-flow-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ec-primary); color: #fff; font-weight: 700; margin-bottom: var(--ec-s3); }
.id-flow-step h3 { font-size: 1rem; margin-bottom: 4px; } .id-flow-step p { margin: 0; font-size: .9rem; }
@media (max-width: 800px) { .id-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .id-flow { grid-template-columns: 1fr; } }

/* Admin */
.id-admin-list { list-style: none; padding: 0; margin: 0; }
.id-admin-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--ec-line); font-size: .92rem; }
.id-admin-list li:first-child { border-top: 0; }

.id-foot { padding: var(--ec-s6) 0; color: var(--ec-muted); font-size: .86rem; border-top: 1px solid var(--ec-line); background: var(--ec-surface); }