/* public/css/app.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:    #0f1b35;
  --navy2:   #1a2744;
  --blue:    #2251cc;
  --blue2:   #1a3d99;
  --accent:  #e8b14f;
  --green:   #3ecf8e;
  --red:     #f05252;
  --text:    #e8eaf2;
  --text-dim:#8890aa;
  --card:    #1e2f52;
  --card2:   #243663;
  --border:  #2d3f6b;
  --font-h:  'Syne', sans-serif;
  --font-m:  'DM Mono', monospace;
  --sidebar: 240px;
}

html, body { height:100%; background:var(--navy); color:var(--text); font-family:var(--font-h); }

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(34,81,204,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,81,204,.05) 1px,transparent 1px);
  background-size:40px 40px;
}

#app { position:relative; z-index:1; height:100%; }

/* ── VIEWS ── */
.view { display:none; height:100vh; overflow:hidden; }
.view.active { display:flex; height:100vh; overflow:hidden; }

/* ── LOGIN ── */
#view-login { align-items:center; justify-content:center; padding:24px; }
.login-wrap { width:100%; max-width:380px; }
.logo-area { text-align:center; margin-bottom:32px; }
.logo-badge { display:inline-flex; align-items:center; justify-content:center;
  width:72px; height:72px; background:var(--blue); border-radius:20px;
  font-size:32px; margin-bottom:12px; box-shadow:0 8px 32px rgba(34,81,204,.4); }
.logo-area h1 { font-size:26px; font-weight:800; letter-spacing:-.5px; }
.logo-sub { font-family:var(--font-m); font-size:12px; color:var(--text-dim); margin-top:4px; }
.login-note { font-size:12px; color:var(--text-dim); text-align:center; margin-top:16px; line-height:1.6; }

/* ── CARD ── */
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; }

/* ── INPUTS ── */
.field-group { margin-bottom:16px; }
label { display:block; font-size:11px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:7px; }
input[type=text], input[type=password], input[type=url], input[type=date], textarea, select {
  width:100%; background:var(--card2); border:1.5px solid var(--border);
  border-radius:9px; padding:11px 14px; color:var(--text);
  font-family:var(--font-m); font-size:13px; transition:border-color .2s; outline:none; }
input:focus, textarea:focus, select:focus { border-color:var(--blue); }
textarea { resize:vertical; min-height:80px; }
select { cursor:pointer; }

/* ── BUTTONS ── */
.btn-primary { width:100%; background:var(--blue); color:#fff; border:none; border-radius:9px;
  padding:13px; font-family:var(--font-h); font-size:14px; font-weight:700;
  cursor:pointer; transition:opacity .15s,transform .1s; }
.btn-primary:hover { opacity:.9; }
.btn-primary:active { transform:scale(.98); }
.btn-primary.btn-sm { width:auto; padding:8px 16px; font-size:13px; }
.btn-secondary { background:transparent; color:var(--text-dim); border:1.5px solid var(--border);
  border-radius:9px; padding:11px 18px; font-family:var(--font-h); font-size:13px;
  font-weight:600; cursor:pointer; transition:border-color .2s,color .2s; }
.btn-secondary:hover { border-color:var(--blue); color:var(--text); }
.btn-secondary.btn-sm { padding:7px 14px; font-size:12px; }
.btn-icon { background:var(--card); border:1px solid var(--border); border-radius:8px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; transition:background .2s; }
.btn-icon:hover { background:var(--card2); }
.btn-danger { background:rgba(240,82,82,.15); color:var(--red); border:1px solid rgba(240,82,82,.3);
  border-radius:8px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; }

.error-msg { background:rgba(240,82,82,.12); border:1px solid var(--red); border-radius:8px;
  padding:10px 14px; font-size:13px; color:var(--red); margin-top:8px; }

/* ── APP LAYOUT ── */
#view-app { display:flex; flex-direction:column; }
@media(min-width:768px) { #view-app { flex-direction:row; } }

/* ── SIDEBAR ── */
.sidebar { width:var(--sidebar); background:var(--navy2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto;
  position:fixed; left:0; top:0; bottom:0; z-index:50;
  transform:translateX(-100%); transition:transform .25s ease; }
.sidebar.open { transform:translateX(0); }
@media(min-width:768px) { .sidebar { position:relative; transform:none; } }

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:49; }
.sidebar-overlay.show { display:block; }
@media(min-width:768px) { .sidebar-overlay { display:none !important; } }

.sidebar-header { padding:20px 16px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--border); }
.sidebar-avatar { width:40px; height:40px; background:var(--blue); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0; }
.sidebar-name { font-size:14px; font-weight:700; }
.sidebar-role { font-size:11px; color:var(--text-dim); font-family:var(--font-m); }

.nav-items { padding:12px 10px; flex:1; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  cursor:pointer; font-size:14px; font-weight:600; color:var(--text-dim);
  transition:background .15s,color .15s; position:relative; margin-bottom:2px; }
.nav-item:hover { background:var(--card); color:var(--text); }
.nav-item.active { background:var(--blue); color:#fff; }
.nav-icon { font-size:18px; width:22px; text-align:center; }
.nav-divider { height:1px; background:var(--border); margin:10px 4px; }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; border-radius:20px;
  padding:1px 7px; font-size:10px; font-family:var(--font-m); font-weight:500; }

/* ── MOBILE HEADER ── */
.mobile-header { display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--navy2); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40; }
@media(min-width:768px) { .mobile-header { display:none; } }
.menu-btn, .refresh-btn { background:none; border:none; color:var(--text); font-size:20px; cursor:pointer; padding:4px; }
.mobile-title { font-size:16px; font-weight:700; }

/* ── CONTENT ── */
.content-area { flex:1; overflow-y:auto; display:flex; flex-direction:column; min-width:0; }
@media(min-width:768px) { .content-area { margin-left:0; } }

.page { display:none; flex-direction:column; padding:24px; flex:1; }
.page.active { display:flex; }

.page-header { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.page-header h2 { font-size:22px; font-weight:800; }
.page-actions { display:flex; gap:8px; }

/* ── STATUS BANNER ── */
.status-banner { background:var(--card); border:1px solid var(--border); border-radius:11px;
  padding:12px 16px; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--text-dim); flex-shrink:0; }
.status-dot.ok  { background:var(--green); box-shadow:0 0 6px var(--green); }
.status-dot.warn { background:var(--accent); box-shadow:0 0 6px var(--accent); }
.status-dot.err  { background:var(--red);   box-shadow:0 0 6px var(--red); }
.status-text { flex:1; font-size:13px; color:var(--text-dim); }
.status-time { font-family:var(--font-m); font-size:11px; color:var(--text-dim); }

/* ── SECTION HEADER ── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.section-title { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); }
.count-badge { background:var(--card2); border-radius:20px; padding:3px 10px;
  font-family:var(--font-m); font-size:11px; color:var(--accent); }

/* ── VERTRETUNG CARDS ── */
.vplan-card { background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:16px; margin-bottom:10px; position:relative; overflow:hidden;
  animation:fadeUp .25s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.vplan-card::before { content:''; position:absolute; left:0;top:0;bottom:0;
  width:3px; border-radius:3px 0 0 3px; }
.vplan-card.t-ausfall::before   { background:var(--red); }
.vplan-card.t-vertretung::before{ background:var(--accent); }
.vplan-card.t-raumwechsel::before{ background:var(--blue); }
.vplan-card.t-default::before   { background:var(--text-dim); }

.vcard-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.vcard-stunde { font-family:var(--font-m); font-size:24px; line-height:1; }
.vcard-stunde-sub { font-family:var(--font-m); font-size:10px; color:var(--text-dim); margin-top:2px; }
.vcard-badge { font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; }
.t-ausfall    .vcard-badge { background:rgba(240,82,82,.15); color:var(--red); }
.t-vertretung .vcard-badge { background:rgba(232,177,79,.15); color:var(--accent); }
.t-raumwechsel .vcard-badge { background:rgba(34,81,204,.2); color:#7ba3ff; }
.t-default    .vcard-badge { background:var(--card2); color:var(--text-dim); }

.vcard-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vcard-field-label { font-family:var(--font-m); font-size:10px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.8px; margin-bottom:2px; }
.vcard-field-value { font-size:14px; font-weight:600; }
.vcard-old { font-size:11px; color:var(--text-dim); margin-left:4px; font-weight:400; }
.vcard-notice { margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-dim); font-style:italic; }

/* ── STUNDENPLAN ── */
.sp-row { background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; margin-bottom:8px; display:flex; align-items:center; gap:14px;
  animation:fadeUp .2s ease both; }
.sp-row.changed { border-color:rgba(232,177,79,.5); background:rgba(232,177,79,.05); }
.sp-period { font-family:var(--font-m); font-size:20px; min-width:24px; text-align:center; }
.sp-divider { width:1px; height:32px; background:var(--border); flex-shrink:0; }
.sp-fach { font-size:15px; font-weight:700; }
.sp-meta { font-family:var(--font-m); font-size:11px; color:var(--text-dim); margin-top:2px; }
.sp-changed-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px;
  background:rgba(232,177,79,.15); color:var(--accent); margin-left:6px; vertical-align:middle; }

/* ── DAY HEADER ── */
.day-header { font-family:var(--font-m); font-size:12px; color:var(--text-dim);
  background:var(--card2); border-radius:8px; padding:6px 12px; display:inline-block;
  margin-bottom:10px; margin-top:4px; }
.day-group { margin-bottom:20px; }

/* ── ABSENCES ── */
.absence-card { background:var(--card); border:1px solid var(--border); border-radius:11px;
  padding:16px; margin-bottom:10px; display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px; animation:fadeUp .2s ease both; }
.absence-dates { font-family:var(--font-m); font-size:13px; font-weight:500; }
.absence-reason { font-size:13px; color:var(--text-dim); margin-top:4px; }
.absence-note { font-size:12px; color:var(--text-dim); margin-top:4px; font-style:italic; }
.absence-actions { display:flex; gap:6px; flex-shrink:0; }

/* ── NOTES ── */
.notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.note-card { border-radius:12px; padding:16px; position:relative; cursor:pointer;
  animation:fadeUp .2s ease both; border:1px solid rgba(255,255,255,.08); }
.note-pin { position:absolute; top:10px; right:10px; font-size:14px; }
.note-title { font-size:15px; font-weight:700; margin-bottom:8px; }
.note-content { font-size:13px; opacity:.8; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.note-date { font-family:var(--font-m); font-size:10px; opacity:.6; margin-top:10px; }
.note-actions { display:flex; gap:6px; margin-top:10px; }

/* ── NOTIFICATIONS ── */
.notif-item { background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; margin-bottom:8px; display:flex; align-items:flex-start;
  gap:12px; animation:fadeUp .2s ease both; }
.notif-item.unread { border-color:rgba(34,81,204,.4); background:rgba(34,81,204,.06); }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--blue);
  margin-top:5px; flex-shrink:0; }
.notif-item:not(.unread) .notif-dot { background:var(--border); }
.notif-body { flex:1; }
.notif-title { font-size:14px; font-weight:700; }
.notif-text { font-size:12px; color:var(--text-dim); margin-top:3px; }
.notif-time { font-family:var(--font-m); font-size:10px; color:var(--text-dim); margin-top:5px; }
.notif-del { background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:16px; padding:2px 4px; }

/* ── SETTINGS ── */
.settings-wrap { max-width:560px; }
.settings-section { background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:20px; margin-bottom:16px; }
.settings-section-title { font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; }
.settings-row { display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; }
.settings-label { font-size:14px; font-weight:600; }
.settings-sub { font-size:12px; color:var(--text-dim); font-family:var(--font-m); margin-top:2px; }

/* ── TOGGLE ── */
.toggle { width:44px; height:24px; background:var(--border); border-radius:12px;
  position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.toggle.on { background:var(--blue); }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  background:#fff; border-radius:50%; transition:transform .2s; }
.toggle.on::after { transform:translateX(20px); }

/* ── ADMIN TABLE ── */
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { text-align:left; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-dim); padding:8px 12px; border-bottom:1px solid var(--border); }
.admin-table td { padding:12px; border-bottom:1px solid rgba(45,63,107,.5); font-size:13px; vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }
.user-status { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.user-status.active { background:var(--green); }
.user-status.inactive { background:var(--red); }
.role-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; font-family:var(--font-m); }
.role-badge.admin { background:rgba(232,177,79,.15); color:var(--accent); }
.role-badge.teacher { background:rgba(34,81,204,.15); color:#7ba3ff; }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:200; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--navy2); border:1px solid var(--border); border-radius:16px;
  width:100%; max-width:440px; overflow:hidden; animation:fadeUp .2s ease; }
.modal-header { display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:17px; font-weight:700; }
.modal-close { background:none; border:none; color:var(--text-dim); font-size:20px;
  cursor:pointer; padding:2px 6px; }
.modal-body { padding:20px; }

/* ── LOADER / EMPTY ── */
.loader { display:flex; align-items:center; gap:12px; padding:40px 20px;
  color:var(--text-dim); font-size:14px; justify-content:center; }
.spinner { width:28px; height:28px; border:3px solid var(--border);
  border-top-color:var(--blue); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { text-align:center; padding:48px 20px; color:var(--text-dim); }
.empty-emoji { font-size:44px; margin-bottom:14px; }
.empty-state h3 { font-size:17px; font-weight:700; color:var(--text); margin-bottom:8px; }
.empty-state p { font-size:13px; line-height:1.6; }

/* ── TOAST ── */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--card2); border:1px solid var(--border); border-radius:10px;
  padding:11px 20px; font-size:13px; z-index:300; transition:transform .3s ease;
  white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.error { border-color:var(--red); color:var(--red); }
.toast.success { border-color:var(--green); color:var(--green); }