:root{--bg:#f7fafc; --panel:#ffffff; --panel-2:#f3f6fb; --muted:#6b7280; --text:#0f172a; --accent:#2563eb; --accent-strong:#1d4ed8; --accent-2:#16a34a; --warning:#f59e0b; --info:#3b82f6; --violet:#8b5cf6; --teal:#0891b2; --danger:#dc2626; --chip:#eef2f7; --border:#e5e7eb; --shadow:0 10px 24px rgba(2,6,23,.08)}
[data-theme="dark"]{--bg:#0b0e13; --panel:#121826; --panel-2:#0f1626; --muted:#9aa4b2; --text:#e6ecf5; --accent:#6ea8ff; --accent-strong:#4f8cff; --accent-2:#22c55e; --warning:#f59e0b; --info:#3b82f6; --violet:#8b5cf6; --teal:#06b6d4; --danger:#ef4444; --chip:#0f1422; --border:#1f2937; --shadow:0 10px 30px rgba(0,0,0,.35)}
html{transition:background-color .2s ease,color .2s ease}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--bg);color:var(--text)}

.page-header{padding:14px 16px 6px;position:relative}
.page-header h1{margin:0;font-size:18px;letter-spacing:.2px;color:var(--muted)}
.page-header .sub{margin:2px 0 0 0;color:var(--muted);font-size:11px;opacity:.7}
.icon-btn{position:absolute;top:12px;right:12px;background:transparent;border:none;font-size:18px;opacity:.8;cursor:pointer}
.icon-btn:hover{opacity:1}

.controls{background:var(--panel);backdrop-filter:saturate(120%) blur(6px);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 16px;position:sticky;top:0;z-index:3}
.controls .row{display:flex;flex-wrap:wrap;gap:12px}
.control{display:flex;flex-direction:column;gap:6px;min-width:200px}
.filter-collapse{margin:8px 0}
.filter-collapse > summary{cursor:pointer;list-style:none;font-weight:600;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:inline-flex;gap:8px;align-items:center}
.filter-collapse[open] > summary{background:var(--panel)}
 .filter-collapse > summary::-webkit-details-marker{display:none}
 .filter-collapse > summary::after{content:'▾';margin-left:6px;opacity:.7;transition:transform .15s ease}
 .filter-collapse[open] > summary::after{transform:rotate(180deg)}
label{font-size:12px;color:var(--muted)}
input[type="text"],input[type="date"],select,button{height:40px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;padding:0 12px}
button{cursor:pointer;transition:transform .04s ease, background .2s ease, box-shadow .2s ease}
button.primary{background:var(--accent);color:#ffffff;border-color:transparent;box-shadow:var(--shadow)}
button.primary:hover{background:var(--accent-strong)}
button:disabled{opacity:.6;cursor:not-allowed}

.weekday-buttons{display:flex;gap:10px;padding:6px;background:var(--chip);border:2px solid var(--accent);border-radius:16px;overflow:auto;box-shadow:var(--shadow)}
.weekday-buttons button{padding:10px 16px;border-radius:14px;background:transparent;border:none;color:var(--text);font-weight:700;letter-spacing:.2px}
.weekday-buttons button:hover{background:var(--panel-2)}
.weekday-buttons button.active{background:var(--accent);color:#ffffff;border-color:transparent;box-shadow:0 2px 8px rgba(37,99,235,.35)}
.weekday-buttons button.today{outline:2px dashed var(--accent);outline-offset:2px}

.meta{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:var(--muted);font-size:12px}
.meta a{color:var(--accent)}
.status{color:var(--muted)}

.table-wrap{padding:12px 16px;overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);min-width:720px}
thead th{position:sticky;top:0;background:var(--panel-2);color:var(--muted);text-align:left;font-weight:700;padding:14px;border-bottom:1px solid var(--border);font-size:13px}
tbody td{padding:14px;border-bottom:1px solid var(--border);font-size:14px}
tbody tr:nth-child(even){background:var(--panel-2)}
tbody tr:hover{background:var(--chip)}

.page-footer{padding:16px;color:var(--muted);font-size:12px}

.empty{padding:16px;color:var(--muted)}
.error{color:#fecaca}
.loading{opacity:.7}

/* Tabs */
.tabs{display:flex;gap:8px;padding:0 16px 8px 16px;overflow:auto}
.tab-button{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-weight:600;flex:0 0 auto}
.tab-button.active{background:var(--accent);color:#fff;border-color:transparent}
.tab-panel{margin-top:8px}

/* Info banner */
.info-banner{margin:8px 16px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:var(--shadow);font-size:13px}
.info-banner.info{border-color:#bfdbfe;background:#eff6ff}
.info-banner.warn{border-color:#e5e7eb;background:#f8fafc}

/* Stundenplan Styles */
.stundenplan-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;margin:16px;padding:16px;box-shadow:var(--shadow)}
.stundenplan-header h2{margin:0 0 16px 0;font-size:18px}
.stundenplan-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.stundenplan-controls .control{min-width:200px}
.button-row{display:flex;gap:8px;flex-wrap:wrap}

.stundenplan-grid{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:16px}
.grid-header{display:grid;grid-template-columns:80px repeat(5,1fr);background:var(--panel-2);border-bottom:1px solid var(--border)}
.time-header,.day-header{padding:8px;text-align:center;font-weight:600;font-size:12px;color:var(--muted)}
.day-header{border-left:1px solid var(--border)}

.grid-body{display:grid;grid-template-columns:80px repeat(5,1fr)}
.grid-row{display:contents}
.time-cell{background:var(--panel-2);padding:10px;text-align:center;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.schedule-cell{border-left:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px;min-height:40px;position:relative}
 .schedule-cell input{width:100%;border:1px solid transparent;background:transparent;color:var(--text);font-size:12px;padding:4px;border-radius:8px}
 .schedule-cell input:focus{outline:none;border-color:var(--accent);background:#f2f6ff}

/* Change indicators */
.schedule-cell.changed{background:#ecfdf5;border:1px solid #22c55e}
.schedule-cell.changed::after{content:'⚠️';position:absolute;top:2px;right:2px;font-size:10px}

/* Specific change types */
.schedule-cell.entfall{background:#fef2f2 !important;border:1px solid #dc2626 !important}
.schedule-cell.entfall::after{content:'❌';position:absolute;top:2px;right:2px;font-size:10px}

.schedule-cell.raum{background:#fff7ed !important;border:1px solid #f59e0b !important}
.schedule-cell.raum::after{content:'🏠';position:absolute;top:2px;right:2px;font-size:10px}

.schedule-cell.vertretung{background:#ecfdf5 !important;border:1px solid #16a34a !important}
.schedule-cell.vertretung::after{content:'👤';position:absolute;top:2px;right:2px;font-size:10px}

.schedule-cell.veranstaltung{background:#eff6ff !important;border:1px solid #3b82f6 !important}
.schedule-cell.veranstaltung::after{content:'🎤';position:absolute;top:2px;right:2px;font-size:10px}

.schedule-cell.lernzeit{background:#f5f3ff !important;border:1px solid #8b5cf6 !important}
.schedule-cell.lernzeit::after{content:'📚';position:absolute;top:2px;right:2px;font-size:10px}

.schedule-cell.lehrer{background:#fefce8 !important;border:1px solid #eab308 !important}
.schedule-cell.lehrer::after{content:'👨‍🏫';position:absolute;top:2px;right:2px;font-size:10px}

.schedule-cell.art{background:#ecfeff !important;border:1px solid #06b6d4 !important}
.schedule-cell.art::after{content:'📋';position:absolute;top:2px;right:2px;font-size:10px}

/* Matches panel */
.stundenplan-matches{margin-top:16px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px;box-shadow:var(--shadow)}
.stundenplan-matches h3{margin:0 0 8px 0;font-size:14px;color:var(--muted)}

.table-row.changed{background:#1a2d1a}
.table-row.changed td{border-color:#22c55e}

/* Dark theme adjustments for better text contrast on change highlights */
[data-theme="dark"] .schedule-cell.changed{background:#0e1a12;border-color:#16a34a;color:var(--text)}
[data-theme="dark"] .schedule-cell.entfall{background:#1c0e0e !important;border-color:#b91c1c !important;color:var(--text)}
[data-theme="dark"] .schedule-cell.raum{background:#1c160b !important;border-color:#b45309 !important;color:var(--text)}
[data-theme="dark"] .schedule-cell.vertretung{background:#0e1a12 !important;border-color:#16a34a !important;color:var(--text)}
[data-theme="dark"] .schedule-cell.veranstaltung{background:#0d1729 !important;border-color:#2563eb !important;color:var(--text)}
[data-theme="dark"] .schedule-cell.lernzeit{background:#171033 !important;border-color:#7c3aed !important;color:var(--text)}
[data-theme="dark"] .schedule-cell.lehrer{background:#1b1a0a !important;border-color:#eab308 !important;color:var(--text)}
[data-theme="dark"] .schedule-cell.art{background:#0a1e22 !important;border-color:#0891b2 !important;color:var(--text)}

/* Art badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--border);background:#f8fafc}
.badge.green{background:#ecfdf5;border-color:#bbf7d0;color:#047857}
.badge.orange{background:#fff7ed;border-color:#fde68a;color:#b45309}
.badge.blue{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.badge.violet{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}
.badge.teal{background:#ecfeff;border-color:#a5f3fc;color:#0e7490}
.badge.gray{background:#f1f5f9;color:#64748b}

/* Login Screen Styles */
.login-screen{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

.login-container{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  width:100%;
  max-width:400px;
  margin:16px;
}

.login-header{
  text-align:center;
  margin-bottom:24px;
}

.login-header h1{
  margin:0 0 8px 0;
  font-size:24px;
  color:var(--text);
}

.login-header .sub{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-group label{
  font-size:14px;
  color:var(--text);
  font-weight:500;
}

.form-group input{
  height:44px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:8px;
  padding:0 12px;
  font-size:16px;
}
/* Dark theme background for login input */
[data-theme="dark"] .form-group input{
  background:#0e1422;
}

.form-group input:focus{
  outline:none;
  border-color:var(--accent);
}

.login-btn{
  height:44px;
  background:var(--accent);
  border:none;
  color:white;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:background-color 0.2s;
}

.login-btn:hover{
  background:#3d7ae6;
}

.login-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.error-message{
  color:var(--danger);
  font-size:14px;
  text-align:center;
  padding:8px;
  background:#2d1a1a;
  border:1px solid var(--danger);
  border-radius:8px;
}

.main-app{
  min-height:100vh;
}

@media (max-width: 720px){
  .control{min-width:unset;flex:1}
  thead th:nth-child(7),tbody td:nth-child(7){display:none}
  .stundenplan-controls{flex-direction:column;align-items:stretch}
  .stundenplan-controls .control{min-width:unset}
  .grid-header,.grid-body{grid-template-columns:60px repeat(5,1fr)}
  .time-header,.day-header{font-size:10px;padding:4px}
  .schedule-cell input{font-size:10px}
  .login-container{
    margin:8px;
    padding:24px;
  }
  .tab-button{padding:10px 12px}
  .controls{padding:12px}
  .table-wrap{padding:8px 12px}
}