/* Denemeler (views/exams.js). Everything is prefixed ex-. */

.ex-seg { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.ex-seg button { white-space: nowrap; }
.ex-flash { padding: 12px 16px; border-radius: var(--r-md); background: var(--success-surface); }
.ex-flash.bad { background: var(--danger-surface); }
.ex-del { color: var(--danger); }
.ex-danger { background: var(--danger); color: #fff; }
.ex-note { padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); font: 500 13px/20px var(--font); color: var(--ink-muted); }
.ex-back { align-self: flex-start; }
.ex-title { overflow-wrap: anywhere; }
.ex-head-text { min-width: 0; flex: 1 1 320px; }

/* Latest scores */
.ex-latest { display: flex; flex-direction: column; gap: 8px; }
.ex-latest:empty { display: none; }
.ex-latest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ex-last { gap: 4px; }
.ex-clip { font: 500 14px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Score list */
.ex-empty { align-items: flex-start; }
.ex-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 230px auto; align-items: center; gap: 8px 20px; padding: 16px 20px; border-radius: var(--r-lg); background: var(--surface-raised); }
.ex-date { font: 500 14px/20px var(--font); color: var(--ink-muted); }
.ex-main { display: flex; flex-direction: column; min-width: 0; }
.ex-pub { font: 500 15px/22px var(--font); overflow-wrap: anywhere; }
.ex-dyb { display: flex; gap: 12px; font: 500 14px/20px var(--font); color: var(--ink-muted); white-space: nowrap; }
.ex-dyb b { font-weight: 800; color: var(--ink); }
.ex-score { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.ex-score .delta { align-self: center; }
.ex-actions { display: flex; align-items: center; gap: 16px; }
.ex-more { align-self: center; }

/* Dialogs */
.ex-dialog { border: 0; padding: 0; border-radius: var(--r-xl); background: var(--surface-raised); color: var(--ink); width: min(760px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.ex-dialog.ex-confirm { width: min(480px, calc(100% - 24px)); }
.ex-dialog::backdrop { background: rgb(40 40 40 / .55); }
.ex-dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; background: var(--surface-raised); }
.ex-dialog-body { padding: 4px 24px 24px; gap: 16px; }
.ex-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface); font: 500 22px/1 var(--font); }
.ex-form-body { gap: 16px; }
.ex-buttons { gap: 8px; }

/* Form fields */
.ex-field, .ex-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ex-cell-label { font: 500 12px/18px var(--font); color: var(--ink-muted); }
.ex-input { width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-md); background: var(--surface); font: 500 16px/24px var(--font); color: var(--ink); }
.ex-hint { font: 500 12px/18px var(--font); color: var(--ink-muted); }
.ex-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) minmax(0, .8fr) minmax(0, .9fr); gap: 12px; align-items: start; }
.ex-combo { position: relative; }
.ex-options { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 3; max-height: 240px; overflow-y: auto; padding: 4px; border-radius: var(--r-md); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border), 0 10px 30px rgb(40 40 40 / .16); }
.ex-options li { padding: 10px 12px; border-radius: 8px; font: 500 14px/20px var(--font); cursor: pointer; }
.ex-options li:hover, .ex-options li.is-active { background: var(--surface); }
.ex-options li.is-none { color: var(--ink-muted); cursor: default; }
.ex-lines { gap: 8px; }
.ex-line { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 84px); gap: 4px 8px; align-items: end; padding: 12px; border-radius: var(--r-lg); background: var(--surface); }
.ex-line .ex-input { background: var(--surface-raised); text-align: center; padding: 8px 4px; }
.ex-line.is-bad .ex-input { box-shadow: inset 0 0 0 2px var(--danger); }
.ex-line-name { display: flex; flex-direction: column; align-self: center; min-width: 0; }
.ex-line-name strong { font: 500 15px/22px var(--font); }
.ex-net { min-height: 44px; display: grid; place-items: center; font: 800 18px/24px var(--font); }
.ex-line-error { grid-column: 1 / -1; font: 500 13px/18px var(--font); color: var(--danger); }
.ex-line-error:empty, .ex-tstate:empty { display: none; }
.ex-total { padding: 0 12px; }

/* Topic rows of one score */
.ex-trow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 84px 84px auto; gap: 8px 12px; align-items: end; padding: 12px; border-radius: var(--r-lg); background: var(--surface); }
.ex-trow .select, .ex-trow .ex-input { width: 100%; min-height: 44px; background: var(--surface-raised); font-weight: 500; }
.ex-trow .ex-input { text-align: center; }
.ex-tactions { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.ex-tstate { grid-column: 1 / -1; }
.ex-ttotal { text-align: right; }

/* Analysis */
.ex-analysis { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.ex-goal + .ex-goal { padding-top: 16px; border-top: 2px solid var(--surface); }
.ex-goal { gap: 8px; }
.ex-bars { display: grid; gap: 6px; }
.ex-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ex-plot { height: 200px; padding-top: 20px; display: flex; justify-content: center; gap: 3px; border-bottom: 2px solid var(--surface); }
.ex-one { position: relative; flex: 1; max-width: 34px; }
.ex-one > .ex-bar, .ex-stack { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px 6px 0 0; }
.ex-stack { display: flex; flex-direction: column; overflow: hidden; }
.ex-stack .ex-bar { display: block; width: 100%; }
.ex-val { position: absolute; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font: 500 11px/14px var(--font); white-space: nowrap; }
.ex-month { text-align: center; font: 500 12px/18px var(--font); color: var(--ink-muted); white-space: nowrap; }
.ex-col.is-now .ex-month { font-weight: 800; color: var(--ink); }
.ex-tone-level { background: var(--level-accent); }
.ex-tone-ink, .ex-tone-0 { background: var(--ink); }
.ex-tone-1 { background: var(--gray-400); }
.ex-tone-2 { background: var(--gray-200); }
.ex-tone-3 { background: var(--level-accent); }
.ex-legend { gap: 8px 16px; }
.ex-key { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font); color: var(--ink-muted); }
.ex-key i { width: 10px; height: 10px; border-radius: 3px; }

@media (max-width: 1100px) {
  .ex-item { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .ex-item .ex-dyb { grid-column: 1 / 3; }
  .ex-item .ex-score { grid-column: 3; grid-row: 1; }
  .ex-item .ex-actions { grid-column: 3; justify-content: flex-end; }
}
@media (max-width: 900px) {
  .ex-latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-last .mid { font-size: 28px; line-height: 34px; }
  .ex-analysis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ex-title { font-size: 26px; line-height: 32px; }
  .ex-trow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-trow > :nth-child(1), .ex-trow > :nth-child(2), .ex-tactions { grid-column: 1 / -1; }
  .ex-ttotal { text-align: left; }
}
@media (max-width: 600px) {
  .ex-seg button { padding: 8px 14px; }
  .ex-last > .muted.num { display: none; }
  .ex-item { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .ex-item .ex-date { grid-column: 1; grid-row: 1; }
  .ex-item .ex-score { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .ex-item .ex-main { grid-column: 1; grid-row: 2; }
  .ex-item .ex-dyb, .ex-item .ex-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ex-item .ex-score .mid { font-size: 28px; line-height: 34px; }
  .ex-dialog-head { padding: 16px 16px 8px; }
  .ex-dialog-body { padding: 4px 16px 16px; }
  .ex-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-fields > :nth-child(1), .ex-fields > :nth-child(2) { grid-column: 1 / -1; }
  .ex-line { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ex-line-name { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; }
  .ex-buttons .btn { flex: 1; }
  .ex-buttons .grow { display: none; }
  .ex-plot { height: 160px; }
  #view-denemeler .table th { letter-spacing: 0; padding: 8px 4px; }
  #view-denemeler .table td { padding: 10px 4px; }
}

/* Score list: rows of one card. */
.ex-list { gap: 0; padding: 4px; border-radius: var(--r-xl); background: var(--surface-raised); }
.ex-list > .ex-item { border-radius: 0; background: none; }
.ex-list > .ex-item + .ex-item { border-top: 1px solid var(--border); }

/* Net chart: which nets it shows (all, or one lesson group) */
.ex-chart-head { flex-wrap: nowrap; gap: 12px; }
.ex-chart-pick { flex: none; min-height: 36px; padding: 6px 10px; font-size: 13px; line-height: 18px; }
.ex-chart-box.is-loading .chart { opacity: .4; transition: opacity .15s; }