/* ==========================================================================
   LehrWerk UI – Modern Light (ohne Sidebar)
   - App-Bar Header + Main
   - Karten, Badges, Pill-Buttons, kompakte Tabellen, Progress Bars
   ========================================================================== */

:root{
  /* Flächen & Linien */
  --bg:            #f6f8fb;    /* Seitenhintergrund */
  --bg-elev:       #ffffff;    /* Karten, Paneele */
  --bg-hover:      #f1f4fa;    /* Hover-Flächen */
  --border:        #e7eaf0;    /* dezente Kanten */
  --shadow:        0 10px 30px rgba(16, 24, 40, .06);

  /* Text & Akzente */
  --text:          #0f172a;    /* Primärtext */
  --muted:         #475569;    /* Sekundär */
  --muted-2:       #64748b;    /* Tertiär */

  --primary:       #2563eb;    /* Blau 600 */
  --primary-2:     #3b82f6;    /* Blau 500 */
  --focus:         rgba(59,130,246,.28);

  /* Status */
  --success:       #16a34a;
  --danger:        #dc2626;
  --warning:       #d97706;
  --info:          #0284c7;

  /* Radius & Typo */
  --radius:        14px;
  --radius-sm:     10px;
  --font-sans:     ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Rhythmus */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
}

html, body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.45;
  margin: 0;
}
a{ color: var(--primary); text-decoration: none; }
a:hover{ color: var(--primary-2); text-decoration: underline; }
:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* App-Bar Header ---------------------------------------------------------- */
.stitch-header{
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 0 var(--space-5);
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1030;
  backdrop-filter: saturate(1.05) blur(2px);
}
.stitch-brand{
  display: flex; align-items: center; gap: 12px;
}
.stitch-brand .title{ font-weight: 700; letter-spacing: .2px; }
.stitch-brand .meta{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.stitch-actions{ display: flex; align-items: center; gap: 8px; }

/* Buttons ----------------------------------------------------------------- */
.btn, .btn-stitch{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid #dbe4ff; background: #eef2ff; color: #0f172a;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:hover, .btn-stitch:hover{ background: #e3e9ff; border-color: #cbd8ff; }
.btn:active, .btn-stitch:active{ transform: translateY(1px); }
.btn-primary{ background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover{ background: var(--primary-2); border-color: var(--primary-2); }
.btn-outline{ background: #fff; border-color: var(--border); color: var(--text); }

/* Main-Container ---------------------------------------------------------- */
.stitch-shell{ display: block; }           /* keine Sidebar mehr */
.stitch-main{
  padding: 28px;
  max-width: none;   /* Vollbreite */
  margin: 0;         /* keine Zentrierung */
}

/* Cards ------------------------------------------------------------------- */
.stitch-card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.stitch-card .card-header{
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  padding: 12px 16px;
}
.stitch-card .card-body{ padding: 16px; }
.stitch-title{ font-size: 20px; font-weight: 700; margin: 0; }

/* Tabellen – kompakt & modern -------------------------------------------- */
table.stitch-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table.stitch-table th, table.stitch-table td{
  border-bottom: 1px solid var(--border);
  padding: 10px 10px;
  vertical-align: middle;
}
table.stitch-table th{
  color: #334155;
  background: #f3f5fb;
  position: sticky; top: 0; z-index: 1;
}
table.stitch-table tr:hover td{ background: #f8fafc; transition: background .15s ease; }
.col-grade-narrow{ width: 84px; }
.col-final{ width: 120px; }

/* Progress-Balken (für Prozentwerte) ------------------------------------- */
.progress{
  width: 100%; height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden;
}
.progress .bar{
  height: 100%; background: var(--primary); width: 0%;
  transition: width .3s ease;
  border-radius: 999px;
}

/* Badges & Pills ---------------------------------------------------------- */
.badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: #f8fafc; color: var(--muted);
}

/* Status als „Pill Buttons“ (optional) ----------------------------------- */
.pills{ display: inline-flex; gap: 6px; }
.pill{
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--text); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pill[aria-pressed="true"]{ border-color: var(--primary); background: #eef2ff; }
.pill.success{ --pill: var(--success); }
.pill.warning{ --pill: var(--warning); }
.pill.danger { --pill: var(--danger); }

/* Formulare --------------------------------------------------------------- */
.form-control,
.form-select,
input[type="text"], input[type="number"], input[type="date"],
select, textarea{
  background: #ffffff; border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus{
  border-color: #cbd5e1; box-shadow: 0 0 0 .2rem var(--focus);
}
.form-select.form-select-sm.grade-select{ min-width: 64px; }

/* Floating Labels (optional – wenn Struktur passt) ----------------------- */
.field{ position: relative; }
.field .flabel{
  position: absolute; left: 12px; top: 10px; color: var(--muted-2); pointer-events: none;
  transition: all .12s ease; background: #fff; padding: 0 6px;
}
.field input:focus + .flabel,
.field input:not(:placeholder-shown) + .flabel,
.field textarea:focus + .flabel,
.field textarea:not(:placeholder-shown) + .flabel{
  top: -8px; font-size: 12px; color: var(--primary);
}

/* Alerts ------------------------------------------------------------------ */
.alert{
  border: 1px solid var(--border); background: #ffffff; border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: var(--space-4);
}
.alert-success{ border-color: #bbf7d0; background: #f0fdf4; }
.alert-danger { border-color: #fecaca; background: #fff1f2; }
.alert-info   { border-color: #bae6fd; background: #eff6ff; }
.alert-warning{ border-color: #fde68a; background: #fffbeb; }

/* Utilities --------------------------------------------------------------- */
.hint{ color: var(--muted-2); font-size: 12px; }
.border-dashed{ border-style: dashed !important; }
.hide-late-penalty{ display: none !important; }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1200px){ .grid-4{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 992px){
  .grid-4, .grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stitch-main { padding: 18px; }
  .col-grade-narrow{ width: 72px; }
}
.stitch-header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.stitch-brand{ display:flex; align-items:center; gap:.75rem; }
.stitch-context-badge{ font-size:.875rem; padding:.125rem .5rem; border-radius:.5rem; background:rgba(0,0,0,.06); }
.stitch-actions{ display:flex; gap:.5rem; align-items:center; }
.stitch-actions-left{ order:-1; } /* „Zur Übersicht“ links */
.stitch-breadcrumb{ width:100%; order:10; }
.stitch-breadcrumb ol{ display:flex; gap:.5rem; padding:0; margin:.25rem 0 0; list-style:none; }
.stitch-breadcrumb li::after{ content:"/"; margin:0 .5rem; opacity:.5; }
.stitch-breadcrumb li:last-child::after{ content:""; }
.stitch-nav .nav-link.active{ font-weight:600; text-decoration:underline; }
.stitch-badge-dot{ display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:#d9534f; margin-left:.375rem; vertical-align:middle; }
.stitch-badge-count{ display:inline-block; min-width:1.25rem; padding:0 .375rem; border-radius:999px; font-size:.75rem; background:#0d6efd; color:#fff; margin-left:.375rem; text-align:center; }
@media (max-width: 992px){
  .stitch-actions-right{ margin-left:auto; }
}
(function(){
  if (window.__stitch_applied__) return;
  window.__stitch_applied__ = true;

  function ready(fn){
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
      setTimeout(fn, 0);
    } else {
      document.addEventListener('DOMContentLoaded', fn, { once:true });
    }
  }

  ready(function(){
    var content = document.getElementById('__stitch_content');
    if (!content) return;
    if (document.querySelector('.stitch-shell')) return;

    /* ----------------- Helpers ----------------- */
    function pick(sel){
      var el = document.querySelector(sel);
      return el ? (el.textContent || '').trim() : '';
    }
    function pickAttr(sel, attr){
      var el = document.querySelector(sel);
      return el ? el.getAttribute(attr) : null;
    }
    function getQueryParam(name){
      var m = new RegExp('[?&]' + name + '=([^&]+)').exec(location.search);
      return m ? decodeURIComponent(m[1].replace(/\+/g, ' ')) : null;
    }
    function fileBase(){
      var p = location.pathname.split('/').filter(Boolean);
      return (p.pop() || '').toLowerCase();
    }
    function isBootstrapPresent(){
      return !!(window.bootstrap && typeof window.bootstrap.Dropdown === 'function');
    }
    function esc(s){
      return String(s==null?'':s).replace(/[&<>"']/g, function(c){
        return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
      });
    }
    function activeCls(targetFiles){ // ['class.php','kursbuch.php',...]
      var base = fileBase();
      return targetFiles.some(function(f){ return base === f.toLowerCase(); }) ? ' active' : '';
    }
    function badgeDotIf(cond){
      return cond ? '<span class="stitch-badge-dot" aria-label="Ungespeicherte Änderungen"></span>' : '';
    }
    function badgeCountIf(n){
      return (n && n > 0) ? '<span class="stitch-badge-count" aria-label="'+n+' neue Einträge">'+n+'</span>' : '';
    }

    /* ------------- Kontext auslesen ------------- */
    var clsName = pick('[data-class-name], .class-name, h1, .page-title') || 'LehrWerk';
    var subj    = pick('[data-class-subject], .class-subject') || '';
    var sctype  = pick('[data-class-schooltype], .class-schooltype') || '';
    var grade   = pick('[data-class-grade], .class-grade') || '';
    var year    = pick('[data-class-year], .class-year') || '';

    var classId = (pickAttr('[data-class-id]','data-class-id')
                || getQueryParam('class_id')
                || getQueryParam('id')
                || '').replace(/[^\d]/g, '');

    var base    = fileBase();
    var isClassPage = /^(class\.php|class_overview\.php|kursbuch\.php|grade_review\.php|scale_editor\.php|moodle_import\.php)$/i.test(base);
    var titleFromDoc = (document.title || '').trim();
    var pageTitle = pick('h1, .page-title') || titleFromDoc || 'Seite';

    // Dynamische Indikatoren (optional durch Seite gesetzt)
    var isDirty = !!window.__dirty__; // ungespeicherte Änderungen
    var counts  = window.__counts || {}; // z. B. { grade_review: 2 }
    var cntGradeReview = parseInt(counts.grade_review, 10) || 0;

    /* ---------------- Header bauen ---------------- */
    var header = document.createElement('header');
    header.className = 'stitch-header';

    // Kontext-Badge kompakt komponieren
    var ctxParts = [];
    if (clsName) ctxParts.push(esc(clsName));
    if (subj)    ctxParts.push(esc(subj));
    if (grade)   ctxParts.push('Jg. '+esc(grade));
    if (year)    ctxParts.push('SJ '+esc(year));
    var ctxBadge = ctxParts.length ? ('<span class="stitch-context-badge">'+ctxParts.join(' · ')+'</span>') : '';

    header.innerHTML =
      '<div class="stitch-brand">'
    +   '<div class="title">LehrWerk '+ctxBadge+'</div>'
    + '</div>';

    // Primär-Aktionen (links & rechts) – immer sichtbar
    var actionsLeft = document.createElement('div');
    actionsLeft.className = 'stitch-actions stitch-actions-left';
    actionsLeft.innerHTML = '<a class="btn-stitch" href="dashboard.php" title="Zur Übersicht">Zur Übersicht</a>';

    var actionsRight = document.createElement('div');
    actionsRight.className = 'stitch-actions stitch-actions-right';
    actionsRight.innerHTML = '<a class="btn-stitch btn-danger" href="logout.php" title="Logout">Logout</a>';

    header.appendChild(actionsLeft);
    header.appendChild(actionsRight);

    /* -------------- Breadcrumb (nur im Klassenkontext) -------------- */
    if (classId) {
      var bc = document.createElement('nav');
      bc.className = 'stitch-breadcrumb';
      bc.setAttribute('aria-label','Breadcrumb');
      var classShort = pick('[data-class-short], .class-short') || clsName;
      bc.innerHTML =
        '<ol>'
      +   '<li><a href="dashboard.php">Übersicht</a></li>'
      +   '<li><a href="class_overview.php?id='+classId+'">'+esc(classShort)+'</a></li>'
      +   '<li aria-current="page">'+esc(pageTitle)+'</li>'
      + '</ol>';
      header.appendChild(bc);
    }

    /* ------------ Klassen-Navigation (nur wenn classId) ------------ */
    function renderClassNavBootstrap(parent, classId, isClassPage){
  var items =
      '<li><a class="dropdown-item" href="class_overview.php?id='+classId+'"><i class="bi bi-list-ul"></i> Übersicht</a></li>'
    + '<li><a class="dropdown-item" href="kursbuch.php?class_id='+classId+'"><i class="bi bi-journal-text"></i> Kursbuch</a></li>'
    + '<li><a class="dropdown-item" href="class.php?id='+classId+'"><i class="bi bi-pencil-square"></i> Noteneingabe</a></li>'
    + '<li><a class="dropdown-item" href="grade_review.php?class_id='+classId+'"><i class="bi bi-chat-dots"></i> Notenbesprechung '+badgeCountIf(cntGradeReview)+'</a></li>';

  if (isClassPage) {
    items += '<li><hr class="dropdown-divider"></li>'
          +  '<li><a class="dropdown-item" href="scale_editor.php?class_id='+classId+'"><i class="bi bi-sliders"></i> Notenschlüssel verwalten</a></li>'
          +  '<li><a class="dropdown-item" href="moodle_import.php?class_id='+classId+'"><i class="bi bi-cloud-arrow-down"></i> Moodle-Import</a></li>';
  }

  var nav = document.createElement('nav');
  nav.className = 'stitch-nav navbar';
  nav.innerHTML =
    '<ul class="navbar-nav">'
  +   '<li class="nav-item dropdown">'
  +     '<a class="nav-link dropdown-toggle'+activeCls(["class.php","class_overview.php","kursbuch.php","grade_review.php","scale_editor.php","moodle_import.php"])+'" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">'
  +       '<i class="bi bi-people"></i> Klasse '+badgeDotIf(isDirty)
  +     '</a>'
  +     '<ul class="dropdown-menu">'+items+'</ul>'
  +   '</li>'
  + '</ul>';

  /* ==== A) BEGIN PATCH: Bootstrap-Dropdown explizit initialisieren ==== */
  if (!window.bootstrap || typeof window.bootstrap.Dropdown !== 'function') {
    console.warn('[stitch] Bootstrap JS nicht gefunden – prüfen Sie die Einbindung von bootstrap.bundle.min.js');
  } else {
    var toggles = nav.querySelectorAll('[data-bs-toggle="dropdown"]');
    toggles.forEach(function (t) {
      var dd = new window.bootstrap.Dropdown(t, {
        popperConfig: { strategy: 'fixed' }  // verhindert Layout-Shift
      });
      t.addEventListener('click', function (ev) {
        ev.preventDefault();     // verhindert # Navigation
        ev.stopPropagation();    // sauberes Toggeln
        dd.toggle();
      });
    });
  }
  /* ==== A) END PATCH ==== */

  parent.appendChild(nav);
}


    function renderClassNavDetails(parent, classId, isClassPage){
      var items =
          '<li><a class="dropdown-item'+activeCls(["class_overview.php"])+'" href="class_overview.php?id='+classId+'"><i class="bi bi-list-ul"></i> Übersicht</a></li>'
        + '<li><a class="dropdown-item'+activeCls(["kursbuch.php"])+'" href="kursbuch.php?class_id='+classId+'"><i class="bi bi-journal-text"></i> Kursbuch</a></li>'
        + '<li><a class="dropdown-item'+activeCls(["class.php"])+'" href="class.php?id='+classId+'"><i class="bi bi-pencil-square"></i> Noteneingabe '+badgeDotIf(isDirty)+'</a></li>'
        + '<li><a class="dropdown-item'+activeCls(["grade_review.php"])+'" href="grade_review.php?class_id='+classId+'"><i class="bi bi-chat-dots"></i> Notenbesprechung '+badgeCountIf(cntGradeReview)+'</a></li>';

      if (isClassPage) {
        items += '<li><hr class="dropdown-divider"></li>'
              +  '<li><a class="dropdown-item'+activeCls(["scale_editor.php"])+'" href="scale_editor.php?class_id='+classId+'"><i class="bi bi-sliders"></i> Notenschlüssel verwalten</a></li>'
              +  '<li><a class="dropdown-item'+activeCls(["moodle_import.php"])+'" href="moodle_import.php?class_id='+classId+'"><i class="bi bi-cloud-arrow-down"></i> Moodle-Import</a></li>';
      }

      var nav = document.createElement('nav');
      nav.className = 'stitch-nav';
      nav.innerHTML =
        '<details class="stitch-dropdown">'
      +   '<summary class="nav-link'+activeCls(["class.php","class_overview.php","kursbuch.php","grade_review.php","scale_editor.php","moodle_import.php"])+'"><i class="bi bi-people"></i> Klasse '+badgeDotIf(isDirty)+'</summary>'
      +   '<ul class="dropdown-menu">'+items+'</ul>'
      + '</details>';
      parent.appendChild(nav);
    }

    if (classId) {
      if (isBootstrapPresent()) {
        renderClassNavBootstrap(header, classId, isClassPage);
      } else {
        renderClassNavDetails(header, classId, isClassPage);
      }
    }

    /* ---------------- Main + Shell ---------------- */
    var main = document.createElement('main');
    main.className = 'stitch-main';
    while (content.firstChild) main.appendChild(content.firstChild);

    var shell = document.createElement('div');
    shell.className = 'stitch-shell';
    shell.append(main);

    // Stabiler Umbau: Header vor content, dann content ersetzen
    document.body.insertBefore(header, content);
    content.replaceWith(shell);
    document.body.setAttribute('data-stitch-mounted','1');

    /* ---------------- Polishing ---------------- */
    document.querySelectorAll('table').forEach(function(t){ t.classList.add('stitch-table'); });
    document.querySelectorAll('.card').forEach(function(c){ c.classList.add('stitch-card'); });

    // Optional: einfache Progress-Balken
    document.querySelectorAll('[data-progress]').forEach(function(el){
      var p = Math.max(0, Math.min(100, parseFloat(el.getAttribute('data-progress')) || 0));
      var wrap = document.createElement('div');
      wrap.className = 'progress';
      var bar = document.createElement('div');
      bar.className = 'bar';
      bar.style.width = p + '%';
      wrap.appendChild(bar);
      el.innerHTML = '';
      el.appendChild(wrap);
    });
  });
})();