/* aw-v4 — Rollenportal: Ergänzungen zu style.css + ci.css (DEMO) */

.small { font-size: .82rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn-sm { padding: 7px 12px; min-height: 36px; font-size: .86rem; }
.narrow-card { max-width: 620px; margin: 0 auto; }
.eyebrow {
  margin: 0 0 4px; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent-ink);
}

/* Rollen-Kennzeichnung */
.role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; background: #e8eef6; color: #1b3661;
  border: 1px solid #c3d3e6; white-space: nowrap;
}
.role-teacher { background: #e6f2f6; color: #15779b; border-color: #bcdbe4; }
.role-admin_school { background: #eef2f5; color: #44525e; border-color: #d5dee2; }
.role-admin_tech { background: #fbe9ea; color: #b00410; border-color: #f0c2c6; }

/* Navigation: mobil horizontal scrollbar, kein Umbruch der Seite */
.topnav {
  display: flex; flex-wrap: nowrap; gap: 2px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  max-width: 100%; padding-bottom: 2px;
}
.topnav .navlink { flex: 0 0 auto; }

/* KPI-Raster */
.kpi-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.kpi-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.kpi-label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kpi-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--accent); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-hint { font-size: .8rem; color: var(--muted); }

/* Ampel: Farbe + Icon + Text */
.amp {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 3px 10px 3px 8px; font-size: .78rem; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
.amp-icon { font-size: .72em; line-height: 1; }
.amp-green { color: #14532d; background: #e6f6ec; border-color: #bfe3cd; }
.amp-amber { color: #7a4400; background: #fdf3dd; border-color: #eed49a; }
.amp-red { color: #a01a1a; background: #fbe9e9; border-color: #f0c3c3; }

/* Kartenraster */
.grid-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
.split { display: grid; gap: 14px; grid-template-columns: 1fr; }
.course-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.course-head h2 { margin: 0 0 2px; }

/* Kennzahlen-Liste */
.kv { margin: 0; display: grid; gap: 0; }
.kv-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv-row:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); font-size: .85rem; }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Verteilungen */
.dist-list { display: grid; gap: 14px; }
.dist-row { display: grid; gap: 6px; }
.dist-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.dist-figures { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dist-figures strong { color: var(--ink); font-size: 1rem; }
.dist-track { height: 10px; border-radius: 999px; background: #e9eff4; border: 1px solid var(--line); overflow: hidden; }
.dist-fill { display: block; height: 100%; border-radius: 999px; }
.fill-red { background: #c62828; }
.fill-amber { background: #d99100; }
.fill-green { background: #1b3661; }

/* Sparkline */
.spark {
  margin: 12px 0 0; font-size: 1.15rem; letter-spacing: .12em; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.spark-label { margin: 4px 0 0; font-size: .72rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

/* Tabellen-Wrapper: verhindert Seiten-Overflow auf 390 px */
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.units.compact { font-size: .86rem; }
.units.compact thead th, .units.compact tbody td { padding: 7px 8px; }
.units .num, .units th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-input { width: 5.5em; font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; }
.rules-table select { font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; max-width: 12em; }

/* Formulare inline */
.form-inline { display: grid; gap: 12px; margin-top: 10px; }
.form-inline .field { min-width: 0; }

/* Alert OK */
.alert-ok { background: #e9f6ee; color: #14532d; border-color: #bfe3cd; margin-bottom: 14px; }
.alert-ok .alert-icon { background: #14532d; }

/* Benachrichtigungen */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.notif:last-child { border-bottom: 0; }
.notif-main { display: grid; gap: 4px; }
.notif-main p { margin: 0; }
.badge-status {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 2px 9px; font-size: .74rem; font-weight: 700; border: 1px solid transparent;
  white-space: nowrap;
}
.status-ok { color: #14532d; background: #e6f6ec; border-color: #bfe3cd; }
.status-warn { color: #7a4400; background: #fdf3dd; border-color: #eed49a; }
.status-info { color: #14387f; background: #e8eef6; border-color: #c3d3e6; }
.status-off { color: #5b6b78; background: #eef2f5; border-color: #d5dee2; }

/* Wochenkarten */
.week-card { margin-bottom: 12px; }
.week-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 8px; }
.week-head h2 { margin: 0; font-size: 1.05rem; }
.week-kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.week-quote { font-size: 1.35rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Statuskacheln */
.tile-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.tile { border-left: 4px solid var(--line-strong); padding: 14px 16px; }
.tile-ok { border-left-color: #1b3661; }
.tile-warn { border-left-color: #d99100; }
.tile-error { border-left-color: #c62828; }
.tile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tile-status { font-size: .8rem; }
.tile-ok .tile-status { color: #1b3661; }
.tile-warn .tile-status { color: #b37300; }
.tile-error .tile-status { color: #c62828; }
.tile-label { font-weight: 700; font-size: .9rem; flex: 1 1 auto; }
.tile-badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tile-value { margin: 8px 0 2px; font-size: 1.12rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.tile-detail { margin: 0; font-size: .82rem; color: var(--muted); }
.tile-meta { margin: 10px 0 0; font-size: .74rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.src { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.src-live { color: #14532d; }
.src-demo { color: #7a4400; }

/* Demo-Logins */
.demo-logins { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.demo-logins summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--accent-ink); }
.demo-logins .table-wrap { margin-top: 8px; }

/* Login-Layout */
.login-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.login-aside .card { height: 100%; }

/* Bericht: Werkzeugleiste + Vorschau */
.report-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.report-sheet {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 2px 6px rgba(22,32,46,.06), 0 18px 40px rgba(22,32,46,.08);
  padding: 22px 18px; width: 100%; max-width: 210mm; margin: 0 auto;
  font-size: .92rem;
}

/* Berichtsinhalt (Bildschirmdarstellung) */
.rep-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 3px solid #1b3661; padding-bottom: 10px; }
.rep-brand { display: flex; align-items: center; gap: 12px; }
.rep-logo { height: 34px; width: auto; }
.rep-school { margin: 0; font-weight: 700; color: #1b3661; font-size: 1rem; }
.rep-sub { margin: 0; font-size: .78rem; color: #5b6b78; }
.rep-demo { font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: #e30514; border: 1px solid #e30514; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.rep-title { margin: 14px 0 2px; font-size: 1.35rem; color: #1b3661; }
.rep-scope { margin: 0 0 12px; font-size: .86rem; color: #5b6b78; }
.rep-meta { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 14px; }
.rep-meta div { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; border-bottom: 1px dotted #d8e0e6; padding-bottom: 3px; }
.rep-meta span { color: #5b6b78; }
.rep-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.rep-kpi { border: 1px solid #d8e0e6; border-radius: 8px; padding: 8px 10px; display: grid; gap: 1px; }
.rep-kpi-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6b78; }
.rep-kpi-value { font-size: 1.02rem; font-weight: 700; color: #1b3661; }
.rep-kpi-hint { font-size: .7rem; color: #5b6b78; }
.rep-section { margin-top: 16px; }
.rep-section h2 { font-size: 1rem; margin: 0 0 6px; color: #1b3661; }
.rep-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rep-table th { text-align: left; background: #eef2f7; color: #1b3661; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 6px 7px; border-bottom: 1px solid #c3cdd6; }
.rep-table td { padding: 6px 7px; border-bottom: 1px solid #e4eaef; vertical-align: top; }
.rep-table tbody tr:nth-child(even) { background: #f7f9fb; }
.rep-notes { margin-top: 18px; font-size: .78rem; color: #44525e; }
.rep-notes h2 { font-size: .9rem; color: #1b3661; margin: 0 0 4px; }
.rep-notes ul { margin: 0; padding-left: 18px; }
.rep-foot { margin-top: 18px; border-top: 2px solid #e30514; padding-top: 8px; font-size: .72rem; color: #5b6b78; }
.rep-foot p { margin: 0 0 4px; }
.rep-foot-meta { font-variant-numeric: tabular-nums; }

/* Mobiler Feinschliff */
@media (max-width: 560px) {
  .wrap { padding: 16px 12px 48px; }
  .card { padding: 16px 14px; }
  .kpi-value { font-size: 1.5rem; }
  .report-sheet { padding: 16px 14px; }
  .tile { padding: 12px 14px; }
  .userbox { width: 100%; justify-content: flex-start; text-align: left; }
}

@media (min-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cards, .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-inline { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
  .login-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .rep-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .rep-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print {
  .no-print, .topbar, .footer, .demo-ribbon { display: none !important; }
}