/* KN Eltern-Tools — Design abgestimmt auf kinderarzt.net (Theme „Extra"). */

.kn-et {
	--kn-primary:        #8e4baf;
	--kn-primary-dark:   #8021af;
	--kn-primary-light:  #d8d1e3;
	--kn-primary-soft:   #f5f0fa;
	--kn-success:        #4CAF50;
	--kn-success-soft:   #e8f5e9;
	--kn-success-dark:   #2e7d32;
	--kn-danger:         #c53030;
	--kn-danger-soft:    #fff5f5;
	--kn-warning:        #d69e2e;
	--kn-warning-soft:   #fefcbf;
	--kn-warning-dark:   #744210;
	--kn-text:           #000000;
	--kn-text-muted:     #4a5568;
	--kn-text-subtle:    #718096;
	--kn-border:         #e3d6ee;
	--kn-border-strong:  #c4a8d9;
	--kn-bg:             #ffffff;
	--kn-bg-alt:         #faf7fc;
	--kn-shadow:         0 2px 18px rgba(142, 75, 175, 0.18);
	--kn-shadow-modal:   0 20px 50px rgba(0, 0, 0, 0.25);
	--kn-radius:         5px;
	--kn-radius-lg:      10px;
	--kn-radius-pill:    999px;
	--kn-font:           'Arial', Helvetica, Lucida, sans-serif;

	box-sizing: border-box;
	max-width: 760px;
	margin: 1.5rem 0;
	padding: 1.5rem;
	border: 1px solid var(--kn-border);
	border-radius: var(--kn-radius-lg);
	background: var(--kn-bg);
	color: var(--kn-text);
	font-family: var(--kn-font);
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: var(--kn-shadow);
}
.kn-et *, .kn-et *::before, .kn-et *::after { box-sizing: border-box; }

.kn-et h1, .kn-et h2, .kn-et h3, .kn-et h4, .kn-et h5, .kn-et h6 {
	font-family: var(--kn-font);
	color: var(--kn-text);
}

/* ── Forms ─────────────────────────────────────────── */
.kn-et__form fieldset { border: 0; padding: 0; margin: 0 0 1rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.kn-et__form legend { font-weight: 600; margin-bottom: 0.4rem; color: var(--kn-primary); }

.kn-et__row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.kn-et__row label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 500; flex: 1 1 180px; }
.kn-et__row input,
.kn-et__row select { padding: 0.5rem 0.7rem; border: 1px solid var(--kn-border-strong); border-radius: var(--kn-radius); font-size: 1rem; background: var(--kn-bg); font-family: var(--kn-font); }
.kn-et__row input:focus,
.kn-et__row select:focus { outline: 2px solid var(--kn-primary); outline-offset: 1px; border-color: var(--kn-primary); }

.kn-et__advanced { margin: 0.5rem 0 1rem; }
.kn-et__advanced summary { cursor: pointer; color: var(--kn-primary); font-weight: 500; }

.kn-et__hint { font-size: 0.92rem; color: var(--kn-text-muted); margin-top: 0.35rem; }

/* ── Buttons ───────────────────────────────────────── */
/* Theme „Extra" setzt globale Regeln auf #page-container button mit ID-Spezifität —
   wir müssen text-transform/padding/font-size/background gezielt zurücksetzen. */
.kn-et .kn-et__btn,
.kn-et .kn-et__submit,
.kn-et .kn-et__actions button {
	display: inline-block;
	padding: 0.4rem 0.9rem !important;
	border: 1px solid var(--kn-border-strong);
	border-radius: var(--kn-radius);
	background: var(--kn-bg) !important;
	color: var(--kn-text) !important;
	font-family: var(--kn-font);
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kn-et .kn-et__btn:hover { background: var(--kn-primary-soft) !important; border-color: var(--kn-primary); }

.kn-et .kn-et__submit,
.kn-et .kn-et__btn--primary,
.kn-et .kn-et__actions button {
	background: var(--kn-primary) !important;
	color: #fff !important;
	border-color: var(--kn-primary);
}
.kn-et .kn-et__submit { padding: 0.6rem 1.3rem !important; font-size: 0.95rem !important; }

.kn-et .kn-et__submit:hover,
.kn-et .kn-et__btn--primary:hover,
.kn-et .kn-et__actions button:hover {
	background: var(--kn-primary-dark) !important;
	border-color: var(--kn-primary-dark);
	color: #fff !important;
}

.kn-et .kn-et__btn--small { padding: 0.22rem 0.6rem !important; font-size: 0.8rem !important; }
.kn-et .kn-et__btn--danger { color: var(--kn-danger) !important; border-color: var(--kn-danger); background: var(--kn-bg) !important; }
.kn-et .kn-et__btn--danger:hover { background: var(--kn-danger) !important; color: #fff !important; border-color: var(--kn-danger); }

/* ── Result-Panel ──────────────────────────────────── */
.kn-et__result { margin-top: 1.5rem; padding: 1.25rem; background: var(--kn-bg-alt); border-radius: var(--kn-radius-lg); }
.kn-et__result-title { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--kn-primary); }
.kn-et__context { margin: 0.75rem 0 0; padding: 0.75rem 1rem; background: var(--kn-primary-soft); border-left: 3px solid var(--kn-primary); border-radius: var(--kn-radius); font-size: 0.92rem; line-height: 1.55; color: var(--kn-text); }
.kn-et__context strong { color: var(--kn-primary-dark); }
.kn-et__chart { width: 100%; max-width: 100%; height: 360px !important; max-height: 60vh; margin-top: 0.75rem; background: #fff; border-radius: var(--kn-radius); }

.kn-et__actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.kn-et__plan-info { padding: 0.5rem 0.75rem; background: var(--kn-primary-soft); border-left: 3px solid var(--kn-primary); border-radius: var(--kn-radius); font-size: 0.88rem; color: var(--kn-text-muted); }

.kn-et__cta-wrap a { display: inline-block; margin-top: 0.75rem; padding: 0.6rem 1.2rem; background: var(--kn-success); color: #fff; border-radius: var(--kn-radius); text-decoration: none; font-weight: 600; }
.kn-et__cta-wrap a:hover { background: var(--kn-success-dark); }

.kn-et__pdf-wrap button { margin-top: 0.5rem; }

.kn-et__disclaimer { margin-top: 1rem; font-size: 0.88rem; color: var(--kn-text-muted); }
.kn-et__source { margin-top: 0.5rem; font-size: 0.82rem; color: var(--kn-text-muted); }
.kn-et__source a { color: var(--kn-primary); text-decoration: underline; }
.kn-et__source a:hover { color: var(--kn-primary-dark); }

/* ── Auth-Banner ──────────────────────────────────── */
.kn-et__auth-errors { color: var(--kn-danger); background: var(--kn-danger-soft); border-left: 3px solid var(--kn-danger); padding: 0.55rem 0.85rem; list-style: none; border-radius: var(--kn-radius); margin: 0.5rem 0; }
.kn-et__auth-success { color: var(--kn-success-dark); background: var(--kn-success-soft); border-left: 3px solid var(--kn-success); padding: 0.55rem 0.85rem; border-radius: var(--kn-radius); margin: 0.5rem 0; }
.kn-et__auth-info { color: var(--kn-primary-dark); background: var(--kn-primary-soft); border-left: 3px solid var(--kn-primary); padding: 0.55rem 0.85rem; border-radius: var(--kn-radius); margin: 0.5rem 0; }

.kn-et__consent { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.75rem 0; font-size: 0.92rem; }
.kn-et__consent input { margin-top: 0.25rem; }
.kn-et__honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Dashboard ────────────────────────────────────── */
.kn-et__dashboard { max-width: 1120px; }
.kn-et__dashboard-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: 0.85rem; border-bottom: 2px solid var(--kn-primary-light); }
.kn-et__dashboard-header h2 { margin: 0; color: var(--kn-primary); font-size: 1.6rem; }

.kn-et__visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Top-Level-Tabs: ein Tab pro Kind plus Impfplan-Übersicht */
.kn-et__child-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 -1px 0; border-bottom: 2px solid var(--kn-primary-light); align-items: flex-end; }
.kn-et .kn-et__child-tab {
	background: transparent !important;
	border: 1px solid transparent !important;
	border-bottom: 2px solid transparent !important;
	padding: 0.55rem 1.1rem !important;
	border-radius: var(--kn-radius) var(--kn-radius) 0 0;
	cursor: pointer;
	font-size: 0.98rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--kn-text-muted) !important;
	font-family: var(--kn-font);
	margin-bottom: -2px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kn-et .kn-et__child-tab:hover { background: var(--kn-primary-soft) !important; color: var(--kn-primary-dark) !important; }
.kn-et .kn-et__child-tab.is-active {
	background: var(--kn-bg) !important;
	color: var(--kn-primary) !important;
	border-color: var(--kn-primary-light) var(--kn-primary-light) var(--kn-bg) var(--kn-primary-light) !important;
	border-bottom-color: var(--kn-bg) !important;
}
.kn-et .kn-et__child-tab--impfplan { margin-left: auto; color: var(--kn-primary-dark) !important; }
.kn-et .kn-et__child-tab--impfplan.is-active { border-color: var(--kn-primary) var(--kn-primary) var(--kn-bg) var(--kn-primary) !important; border-bottom-color: var(--kn-bg) !important; }

.kn-et__child-panels { margin-top: 0; }
.kn-et__child-panels > [data-child-panel][hidden] { display: none; }

.kn-et__child-card { border: 1px solid var(--kn-primary-light); border-top: 0; border-radius: 0 0 var(--kn-radius-lg) var(--kn-radius-lg); padding: 1.25rem 1.4rem; background: var(--kn-bg); box-shadow: var(--kn-shadow); }
.kn-et__child-card header { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.85rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--kn-border); }
.kn-et__child-name { font-size: 1.25rem; font-weight: 700; color: var(--kn-primary); }
.kn-et__child-meta { color: var(--kn-text-muted); font-size: 0.92rem; flex: 1; }
.kn-et__child-card header .kn-et__btn { margin-left: 0.25rem; }

.kn-et__impfplan-overview { border: 1px solid var(--kn-primary-light); border-top: 0; border-radius: 0 0 var(--kn-radius-lg) var(--kn-radius-lg); padding: 1.25rem 1.4rem; background: var(--kn-bg); box-shadow: var(--kn-shadow); }
.kn-et__impfplan-overview h4 { margin: 0 0 0.75rem; color: var(--kn-primary); font-size: 1.15rem; }
.kn-et__impfplan-overview .kn-et__reminders { margin-top: 1.25rem; }

/* Tabs */
.kn-et__metric-tabs { display: flex; gap: 0.3rem; margin-bottom: 0.6rem; flex-wrap: wrap; align-items: center; }
.kn-et .kn-et__metric-tabs button[data-metric] {
	background: transparent !important;
	border: 1px solid var(--kn-border-strong);
	padding: 0.25rem 0.7rem !important;
	border-radius: var(--kn-radius);
	cursor: pointer;
	font-size: 0.82rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--kn-text-muted) !important;
	font-family: var(--kn-font);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kn-et .kn-et__metric-tabs button[data-metric]:hover { background: var(--kn-primary-soft) !important; color: var(--kn-primary-dark) !important; border-color: var(--kn-primary); }
.kn-et .kn-et__metric-tabs button[data-metric].is-active { background: var(--kn-primary) !important; color: #fff !important; border-color: var(--kn-primary); }
.kn-et__metric-tabs button[data-action="add-measurement"] { margin-left: auto; }

/* Tables */
.kn-et__history-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.9rem; }
.kn-et__history-table th, .kn-et__history-table td { padding: 0.45rem 0.55rem; text-align: left; border-bottom: 1px solid var(--kn-border); }
.kn-et__history-table th { color: var(--kn-primary); font-weight: 600; }
.kn-et__history-chart { max-height: 50vh; }

.kn-et__vaccine-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.kn-et__vaccine-table th, .kn-et__vaccine-table td { text-align: left; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--kn-border); vertical-align: top; }
.kn-et__vaccine-table th { background: var(--kn-primary); color: #fff; font-weight: 600; }
.kn-et__vaccine-table th:first-child { border-top-left-radius: var(--kn-radius); }
.kn-et__vaccine-table th:last-child { border-top-right-radius: var(--kn-radius); }

/* ── Modal ────────────────────────────────────────── */
.kn-et__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.kn-et__modal[hidden] { display: none; }
.kn-et__modal-backdrop { position: absolute; inset: 0; background: rgba(50, 25, 70, 0.55); cursor: pointer; }
.kn-et__modal-panel { position: relative; background: var(--kn-bg); padding: 1.5rem 1.75rem; border-radius: var(--kn-radius-lg); max-width: 520px; width: 100%; box-shadow: var(--kn-shadow-modal); max-height: 90vh; overflow-y: auto; z-index: 1; font-family: var(--kn-font); }
body.kn-et-modal-open { overflow: hidden; }

.kn-et__dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding-top: 0.75rem; margin-top: 1rem; border-top: 1px solid var(--kn-border); }

.kn-et__form-header { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--kn-primary-light); }
.kn-et__form-header h3 { margin: 0 0 0.35rem; font-size: 1.3rem; color: var(--kn-primary); }
.kn-et__form-intro { margin: 0; color: var(--kn-text-muted); font-size: 0.92rem; line-height: 1.5; }

.kn-et__child-form .kn-et__field { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.kn-et__child-form .kn-et__field label { font-weight: 600; color: var(--kn-text); margin-bottom: 0.4rem; display: flex; gap: 0.5rem; align-items: center; }
.kn-et__child-form .kn-et__field input,
.kn-et__child-form .kn-et__field select { padding: 0.55rem 0.75rem; border: 1px solid var(--kn-border-strong); border-radius: var(--kn-radius); font-size: 1rem; background: var(--kn-bg); font-family: var(--kn-font); }
.kn-et__child-form .kn-et__field input:focus,
.kn-et__child-form .kn-et__field select:focus { outline: 2px solid var(--kn-primary); outline-offset: 1px; border-color: var(--kn-primary); }

.kn-et__field-hint { color: var(--kn-text-muted); font-size: 0.85rem; margin-top: 0.4rem; line-height: 1.45; }
.kn-et__field-hint--block { display: block; background: var(--kn-primary-soft); border-left: 3px solid var(--kn-primary); padding: 0.6rem 0.85rem; margin: 0.5rem 0 1rem; border-radius: var(--kn-radius); color: var(--kn-text); }
.kn-et__field-optional { font-weight: 500; font-size: 0.72rem; color: var(--kn-primary-dark); padding: 0.1rem 0.55rem; border: 1px solid var(--kn-primary-light); border-radius: var(--kn-radius-pill); background: var(--kn-primary-soft); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Sektionen: Reminder, Upcoming, Save, Danger ──── */
.kn-et__upcoming-events { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.kn-et__upcoming-events li { background: var(--kn-primary-soft); padding: 0.55rem 0.85rem; border-radius: var(--kn-radius); font-size: 0.92rem; border-left: 3px solid var(--kn-primary); }

.kn-et__reminders { margin: 1rem 0; padding: 0.85rem 1.1rem; background: var(--kn-success-soft); border: 1px solid #c8e6c9; border-radius: var(--kn-radius-lg); }
.kn-et__toggle { display: flex; gap: 0.6rem; align-items: center; cursor: pointer; font-weight: 500; }
.kn-et__toggle input { transform: scale(1.15); accent-color: var(--kn-success); }

.kn-et__vaccination-pane { margin-top: 0.75rem; }
.kn-et__vaccination-pane .kn-et__vacc-action input[type="date"] { padding: 0.3rem 0.45rem; border: 1px solid var(--kn-border-strong); border-radius: var(--kn-radius); font-size: 0.88rem; font-family: var(--kn-font); }
.kn-et__vaccination-pane .kn-et__vacc-date { font-weight: 600; color: var(--kn-success-dark); }

.kn-et__dialog-error { color: var(--kn-danger); background: var(--kn-danger-soft); border-left: 3px solid var(--kn-danger); padding: 0.45rem 0.8rem; margin: 0.5rem 0 0; font-size: 0.92rem; border-radius: var(--kn-radius); }

.kn-et__danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--kn-border); }
.kn-et__danger-zone summary { cursor: pointer; color: var(--kn-danger); font-weight: 600; }

.kn-et__save { background: var(--kn-success-soft); border: 1px solid #c8e6c9; border-radius: var(--kn-radius-lg); padding: 0.85rem 1rem; margin-top: 0.75rem; }
.kn-et__save label { display: block; font-weight: 500; font-size: 0.9rem; margin-top: 0.5rem; }
.kn-et__save select,
.kn-et__save input[type="text"] { width: 100%; padding: 0.45rem 0.65rem; border: 1px solid var(--kn-border-strong); border-radius: var(--kn-radius); font-size: 0.95rem; margin-top: 0.25rem; font-family: var(--kn-font); }
.kn-et__save-status { margin-top: 0.5rem; font-size: 0.92rem; }
.kn-et__save-hint { margin-top: 0.75rem; padding: 0.5rem 0.8rem; background: var(--kn-primary-soft); border-left: 3px solid var(--kn-primary); border-radius: var(--kn-radius); font-size: 0.92rem; color: var(--kn-text-muted); }
.kn-et__save-cta { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--kn-primary-soft); border: 1px solid var(--kn-primary-light); border-radius: var(--kn-radius-lg); display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.kn-et__save-cta-text { margin: 0; color: var(--kn-text); font-size: 0.95rem; line-height: 1.5; }
.kn-et__save-cta .kn-et__btn { align-self: flex-start; }

/* ── Status-Pills ─────────────────────────────────── */
.kn-et__status { display: inline-block; padding: 0.18rem 0.65rem; border-radius: var(--kn-radius-pill); font-size: 0.85rem; font-weight: 600; }
.kn-et__status--done    { background: var(--kn-success-soft); color: var(--kn-success-dark); }
.kn-et__status--due     { background: var(--kn-warning-soft); color: var(--kn-warning-dark); }
.kn-et__status--soon    { background: var(--kn-primary-soft); color: var(--kn-primary-dark); }
.kn-et__status--urgent  { background: var(--kn-danger-soft);  color: var(--kn-danger); }
.kn-et__status--missed  { background: #ede4f5; color: var(--kn-text-muted); }
.kn-et__status--future  { background: #f5f0fa; color: var(--kn-text-muted); }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
	.kn-et { padding: 1.1rem; margin: 1rem 0; }
	.kn-et__row label { flex: 1 1 100%; }
	.kn-et__vaccine-table { font-size: 0.92rem; }
	.kn-et__vaccine-table th, .kn-et__vaccine-table td { padding: 0.4rem 0.45rem; }
	.kn-et__chart { height: 300px !important; }
	.kn-et__dashboard-header h2 { font-size: 1.3rem; }
}

/* ── flatpickr-Theming (Lila-Akzente, passend zum Theme) ──── */
.flatpickr-calendar {
	font-family: 'Arial', Helvetica, Lucida, sans-serif !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 30px rgba(142, 75, 175, 0.25) !important;
	border: 1px solid #d8d1e3 !important;
}
.flatpickr-months .flatpickr-month {
	background: #8e4baf !important;
	color: #fff !important;
	border-radius: 10px 10px 0 0 !important;
	height: 42px !important;
}
.flatpickr-current-month { padding-top: 6px !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: #fff !important; font-weight: 600 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: #8021af !important; }
.flatpickr-prev-month, .flatpickr-next-month { color: #fff !important; fill: #fff !important; padding: 8px 10px !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #fff !important; opacity: 0.85; }
.flatpickr-weekdays { background: #f5f0fa !important; }
.flatpickr-weekday { color: #8021af !important; font-weight: 600 !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected.inRange {
	background: #8e4baf !important;
	border-color: #8e4baf !important;
	color: #fff !important;
}
.flatpickr-day.today { border-color: #8e4baf !important; color: #8021af; }
.flatpickr-day.today:hover { background: #d8d1e3 !important; color: #8021af !important; }
.flatpickr-day:hover { background: #f5f0fa !important; }
.numInputWrapper span.arrowUp:after { border-bottom-color: #fff !important; }
.numInputWrapper span.arrowDown:after { border-top-color: #fff !important; }

/* ── Print ────────────────────────────────────────── */
@media print {
	body * { visibility: hidden; }
	.kn-et, .kn-et * { visibility: visible; }
	.kn-et { position: absolute; left: 0; top: 0; max-width: 100%; box-shadow: none; border: 0; }
	.kn-et__form, .kn-et__submit, .kn-et__advanced, .kn-et__pdf-wrap { display: none; }
}