/* ============================================================
   Lilly Knowledge — Base-Styles (generisch, ueberall gueltig)
   Design-Token + Reset + Button-/Form-/Utility-/Toast-System.
   Wird VOR app.css geladen und von allen Komponenten/Dokumenten
   genutzt (lernmat.css, winman.css, doc-toolbar.css, …).
   Shell-spezifische Styles bleiben in app.css.
   ============================================================ */

:root {
	--bg: #f6f8fb;
	--paper: #ffffff;
	--ink: #1f2733;
	--ink-soft: #4a5568;
	--muted: #7a869a;
	--line: #e3e9f2;
	--primary: #0d6b6e;
	--primary-dark: #0a5557;
	--primary-soft: #e6f2f2;
	--accent: #b8860b;
	--accent-soft: #fbf3df;
	--blue: #2563eb;
	--green: #1f8a4c;
	--green-soft: #e6f5ec;
	--red: #c0392b;
	--red-soft: #fdecea;
	--radius: 10px;
	--radius-sm: 7px;
	--shadow: 0 2px 14px rgba(13, 107, 110, .10);
	--shadow-lg: 0 12px 40px rgba(13, 38, 59, .22);
	/* Gemeinsame Header-/Topbar-Hoehe: app.css nutzt --topbar-h,
	   lernmat.css nutzt --header-h — beide hier zentral definiert. */
	--topbar-h: 62px;
	--header-h: 62px;
	--font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.lk-body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink);
	line-height: 1.55;
	font-size: 15px;
	min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.lk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font: inherit; font-weight: 600; font-size: 14px;
	padding: 9px 16px; border-radius: var(--radius-sm);
	border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
	cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.lk-btn:hover { border-color: var(--primary); color: var(--primary); }
.lk-btn:disabled { opacity: .55; cursor: not-allowed; }
.lk-btn-primary {
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	border-color: transparent; color: #fff;
}
.lk-btn-primary:hover { color: #fff; filter: brightness(1.07); }
.lk-btn-ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.lk-btn-ghost:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: #fff; }
.lk-btn-danger { color: var(--red); border-color: #f0c5c0; }
.lk-btn-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.lk-btn-sm { padding: 6px 11px; font-size: 13px; }
.lk-btn-block { width: 100%; }

/* ---------- Forms ---------- */
.lk-form { display: flex; flex-direction: column; gap: 14px; }
.lk-field { display: flex; flex-direction: column; gap: 5px; }
.lk-field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.lk-field input, .lk-field select {
	font: inherit; font-size: 14.5px; padding: 10px 12px;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--paper); color: var(--ink); outline: none; width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lk-field input:focus, .lk-field select:focus {
	border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.lk-hint { font-weight: 400; font-size: 12px; color: var(--muted); }
.lk-form-intro { font-size: 14px; color: var(--ink-soft); }
.lk-form-foot { text-align: center; font-size: 13.5px; margin-top: 2px; }
.lk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lk-field-wide { grid-column: 1 / -1; }
.lk-pw-row { display: flex; gap: 8px; align-items: stretch; }
.lk-pw-row input { flex: 1; }
.lk-pw-row .lk-input-wrap { flex: 1; }

/* Passwort ein-/ausblenden (Auge) */
.lk-input-wrap { position: relative; display: block; }
.lk-input-wrap > input { padding-right: 44px; }
.lk-pw-toggle {
	position: absolute; top: 0; right: 0; height: 100%; width: 42px;
	border: 0; padding: 0; cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2364748b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 21px 21px;
}
.lk-pw-toggle:hover { background-color: rgba(13, 107, 110, .07); }
.lk-pw-toggle.is-on {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230d6b6e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17.94%2017.94A10.07%2010.07%200%200%201%2012%2020c-7%200-10-7-10-7a18.45%2018.45%200%200%201%205.06-5.94M9.9%204.24A9.12%209.12%200%200%201%2012%204c7%200%2010%207%2010%207a18.5%2018.5%200%200%201-2.16%203.19m-6.72-1.07a3%203%200%201%201-4.24-4.24'/%3E%3Cline%20x1='1'%20y1='1'%20x2='23'%20y2='23'/%3E%3C/svg%3E");
}

.lk-form-msg { font-size: 13.5px; min-height: 0; }
.lk-form-msg:empty { display: none; }
.lk-form-msg.is-error { color: var(--red); background: var(--red-soft); padding: 9px 12px; border-radius: var(--radius-sm); }
.lk-form-msg.is-success { color: var(--green); background: var(--green-soft); padding: 9px 12px; border-radius: var(--radius-sm); }

/* ---------- Utilities ---------- */
.lk-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.lk-badge-admin { background: var(--accent-soft); color: var(--accent); }
.lk-badge-leser { background: var(--primary-soft); color: var(--primary-dark); }
.lk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.lk-dot-on { background: var(--green); }
.lk-dot-off { background: var(--muted); }
.lk-muted { color: var(--muted); }

.lk-deflist { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 14.5px; }
.lk-deflist dt { color: var(--muted); font-weight: 600; }

.lk-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; }
.lk-card-pad { padding: 20px 22px; }
.lk-card-title { font-size: 16px; color: var(--primary-dark); margin-bottom: 14px; }

.lk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lk-table th {
	text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--muted); font-weight: 700; padding: 12px 14px; border-bottom: 2px solid var(--line);
	white-space: nowrap;
}
.lk-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lk-table tr:last-child td { border-bottom: 0; }
.lk-table tbody tr:hover { background: var(--primary-soft); }

/* ---------- Toast ---------- */
.lk-toast {
	position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
	z-index: 80; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px;
	font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease; max-width: 90vw;
}
.lk-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.lk-toast.is-error { background: var(--red); }
.lk-toast.is-success { background: var(--green); }