/* Krankmeldung Plugin – Frontend Styles */
:root {
    --km-primary:   #1a3a5c;
    --km-accent:    #e74c3c;
    --km-success:   #27ae60;
    --km-warn:      #f39c12;
    --km-bg:        #f8f9fa;
    --km-border:    #dee2e6;
    --km-radius:    10px;
    --km-shadow:    0 2px 12px rgba(0,0,0,.08);
    --km-font:      'Segoe UI', system-ui, -apple-system, sans-serif;
}

.km-wrap { max-width: 720px; margin: 0 auto; font-family: var(--km-font); }
.km-card { background: #fff; border: 1px solid var(--km-border); border-radius: var(--km-radius); box-shadow: var(--km-shadow); margin-bottom: 24px; overflow: hidden; }
.km-card--secondary { background: var(--km-bg); }
.km-card__header { background: var(--km-primary); color: #fff; padding: 20px 24px; display: flex; align-items: center; gap: 16px; }
.km-card__header .km-icon { flex-shrink: 0; width: 32px; height: 32px; }
.km-card__title { margin: 0; font-size: 1.2rem; font-weight: 700; }
.km-card__sub { margin: 4px 0 0; font-size: .875rem; opacity: .8; }
.km-card__meta { margin-left: auto; }

/* Notices */
.km-notice { padding: 12px 16px; border-radius: 6px; margin: 0 24px 0; border-left: 4px solid; }
.km-notice + .km-form, .km-notice + .km-notice { margin-top: 12px; }
.km-notice--info    { background: #e8f4fd; border-color: #3498db; color: #1a5276; }
.km-notice--success { background: #e8f8ee; border-color: var(--km-success); color: #145a32; }
.km-notice--error   { background: #fde8e8; border-color: var(--km-accent); color: #922b21; }
.km-notice--warn    { background: #fef9e7; border-color: var(--km-warn); color: #784212; }

/* Form */
.km-form { padding: 24px; }
.km-form__group { margin-bottom: 20px; }
.km-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .km-form__row { grid-template-columns: 1fr; } }
.km-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: 6px; color: #333; }
.km-req { color: var(--km-accent); }
.km-opt { font-weight: 400; color: #888; font-size: .8rem; }
.km-input, .km-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--km-border); border-radius: 6px; font-size: .9375rem; font-family: inherit; transition: border-color .2s, box-shadow .2s; box-sizing: border-box; }
.km-input:focus, .km-textarea:focus { outline: none; border-color: var(--km-primary); box-shadow: 0 0 0 3px rgba(26,58,92,.12); }
.km-textarea { resize: vertical; min-height: 90px; }
.km-hint { font-size: .8rem; color: #888; margin-top: 4px; }
.km-hint--privacy { display: flex; align-items: center; gap: 6px; margin: 0; }
.km-icon-sm { width: 14px; height: 14px; }

/* Toggle */
.km-toggle-group { display: flex; border: 1.5px solid var(--km-border); border-radius: 6px; overflow: hidden; }
.km-toggle { flex: 1; padding: 8px 16px; border: none; background: #fff; cursor: pointer; font-size: .875rem; transition: background .15s, color .15s; }
.km-toggle.active { background: var(--km-primary); color: #fff; font-weight: 600; }
.km-form__group--row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 12px; }

/* Button */
.km-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 6px; border: none; cursor: pointer; font-size: 1rem; font-weight: 600; font-family: inherit; transition: opacity .2s; }
.km-btn--primary { background: var(--km-primary); color: #fff; }
.km-btn--primary:hover { opacity: .9; }
.km-btn__spinner { display: flex; }
.km-spin { width: 18px; height: 18px; animation: km-rotate 1s linear infinite; }
@keyframes km-rotate { to { transform: rotate(360deg); } }
.km-form__footer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--km-border); margin-top: 4px; }

/* Badges */
.km-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.km-badge--aktiv      { background: #e8f8ee; color: #27ae60; }
.km-badge--beendet    { background: #eee; color: #666; }
.km-badge--count      { background: rgba(255,255,255,.2); color: #fff; }
.km-badge--erstmeldung  { background: #fde8e8; color: #c0392b; }
.km-badge--folgemeldung { background: #fef3e2; color: #d35400; }

/* Table */
.km-table-wrap { overflow-x: auto; padding: 0 24px 24px; }
.km-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.km-table th { background: var(--km-bg); padding: 10px 12px; text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #666; border-bottom: 2px solid var(--km-border); }
.km-table td { padding: 12px 12px; border-bottom: 1px solid var(--km-border); }
.km-table tr:last-child td { border-bottom: none; }
.km-td--name { display: flex; align-items: center; gap: 10px; }
.km-avatar { width: 32px; height: 32px; background: var(--km-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.km-muted { color: #aaa; }
.km-dauer { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-size: .875rem; }
.km-dauer--kurz   { background: #e8f8ee; color: #27ae60; }
.km-dauer--mittel { background: #fef3e2; color: #d35400; }
.km-dauer--lang   { background: #fde8e8; color: #c0392b; }

/* Empty state */
.km-empty-state { padding: 40px 24px; text-align: center; color: #27ae60; }
.km-empty-state svg { display: block; margin: 0 auto 12px; }
.km-empty-state p { margin: 0; font-size: 1rem; }

/* Meine Krankmeldungen */
.km-badge--beendet   { background: #f0f0f0; color: #666; }
.km-badge--storniert { background: #fde8e8; color: #999; text-decoration: line-through; }
.km-privacy-note { font-size: .75rem; color: #aaa; margin-top: 8px; text-align: center; }