/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #222; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.layout { display: flex; flex-direction: column; min-height: 100vh; }
.nav { background: #1e293b; color: #e2e8f0; padding: 0 1rem; display: flex; align-items: center; gap: 1rem; min-height: 52px; flex-wrap: wrap; }
.nav-brand { font-weight: 700; font-size: 1.1rem; color: #fff; white-space: nowrap; }
.nav a { color: #cbd5e1; padding: 0.4rem 0.6rem; border-radius: 4px; transition: background .15s; }
.nav a:hover, .nav a.active { background: #334155; color: #fff; text-decoration: none; }
.nav-spacer { flex: 1; }
.nav-user { color: #94a3b8; font-size: .85rem; }
.main { flex: 1; padding: 1.5rem; max-width: 1200px; margin: 0 auto; width: 100%; }

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-btn { background: none; border: none; cursor: pointer; color: #cbd5e1; padding: 0.4rem 0.6rem; border-radius: 4px; font: inherit; font-size: inherit; transition: background .15s; }
.nav-dropdown-btn:hover { background: #334155; color: #fff; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #1e293b; border: 1px solid #334155; border-radius: 6px; min-width: 180px; z-index: 100; padding: 0.25rem 0; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover { display: block; }
.nav-dropdown-menu a { display: block; padding: 0.4rem 0.75rem; color: #cbd5e1; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: #334155; color: #fff; }
.nav-dropdown-menu .menu-divider { border-top: 1px solid #334155; margin: 0.25rem 0; }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.1); width: 320px; }
.login-box h1 { margin-bottom: 1.5rem; font-size: 1.4rem; text-align: center; color: #1e293b; }
.login-box label { display: block; margin-bottom: 1rem; font-size: .9rem; color: #444; }
.login-box input { display: block; width: 100%; margin-top: 0.3rem; padding: 0.5rem 0.7rem; border: 1px solid #d1d5db; border-radius: 4px; font: inherit; }
.login-box button { width: 100%; margin-top: 0.5rem; padding: 0.6rem; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; font: inherit; font-weight: 600; }
.login-box button:hover { background: #1d4ed8; }

/* Alerts */
.alert { padding: 0.6rem 0.9rem; border-radius: 4px; margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

/* Page header */
.page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-header h2 { font-size: 1.3rem; color: #1e293b; }
.page-header-actions { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Quick-add */
.quick-add { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.quick-add input { flex: 1; padding: 0.5rem 0.7rem; border: 1px solid #d1d5db; border-radius: 4px; font: inherit; }
.quick-add button { padding: 0.5rem 1rem; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap; }
.quick-add button:hover { background: #1d4ed8; }

/* Search & filter bar */
.filter-bar { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 4px; font: inherit; background: #fff; }
.filter-bar input { flex: 1; min-width: 160px; }

/* Table */
.todo-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.todo-table th { background: #f1f5f9; text-align: left; padding: 0.55rem 0.75rem; font-size: .82rem; color: #64748b; font-weight: 600; white-space: nowrap; }
.todo-table td { padding: 0.55rem 0.75rem; border-top: 1px solid #e2e8f0; vertical-align: top; }
.todo-table tr:hover td { background: #f8fafc; }
.todo-table tr.done td { opacity: .55; }
.todo-table tr.done .todo-title { text-decoration: line-through; }
.todo-table tr.cancelled td { opacity: .4; }

/* Priority – Farbstreifen links */
.todo-row.prio-high   td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.todo-row.prio-normal td:first-child { box-shadow: inset 3px 0 0 #3b82f6; }
.todo-row.prio-low    td:first-child { box-shadow: inset 3px 0 0 #94a3b8; }

/* Status badges */
.status-badge { font-size: .8rem; padding: 0.15rem 0.4rem; border-radius: 3px; font-weight: 500; }
.status-open { background: #f1f5f9; color: #475569; }
.status-in_progress { background: #fff7ed; color: #c2410c; }
.status-done { background: #f0fdf4; color: #166534; }
.status-cancelled { background: #f9fafb; color: #9ca3af; }
.status-deferred { background: #e0e7ef; color: #4b6080; }

/* Deferred row */
.todo-table tr.status-deferred td { opacity: .55; }

/* Item type badges */
.type-badge { display: inline-block; font-size: .7rem; padding: .1rem .35rem; border-radius: 3px; font-weight: 600; margin-left: .3rem; vertical-align: middle; }
.type-info { background: #f0fdf4; color: #15803d; }
.type-decision { background: #fef9c3; color: #854d0e; }

/* Category header row in table */
.todo-table tr.cat-header td { background: #f8fafc; padding: .35rem .75rem; font-size: .78rem; font-weight: 700; color: #475569; letter-spacing: .03em; text-transform: uppercase; border-top: 2px solid #e2e8f0; }
.todo-table tr.deferred-header td { background: #e0e7ef; color: #4b6080; border-top: 2px solid #c4d0df; margin-top: .5rem; }

/* Kategorie-Hinzufügen-Zeile */
.cat-add-cell { padding: .2rem .75rem .35rem; border-top: none; text-align: right; }
.btn-cat-add { background: none; border: 1px dashed #d1d5db; color: #94a3b8; padding: .15rem .55rem; border-radius: 4px; font: inherit; font-size: .78rem; cursor: pointer; transition: all .15s; }
.btn-cat-add:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.cat-add-form { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.cat-add-input { padding: .3rem .5rem; border: 1px solid #93c5fd; border-radius: 4px; font: inherit; font-size: .85rem; width: 240px; outline: none; }
.cat-add-input:focus { border-color: #2563eb; }
.todo-table tr.cat-add-row:hover td { background: transparent; }

/* Titel-Zelle */
.todo-title-line { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.todo-title-link { font-weight: 600; color: #1e293b; font-size: .92rem; }
.todo-title-link:hover { color: #2563eb; text-decoration: underline; }
.todo-date-small { font-size: .8rem; color: #94a3b8; white-space: nowrap; margin-left: auto; }
.todo-date-small.stale { color: #c2410c; font-weight: 600; }

/* Alte, unbearbeitete Todos */
.todo-table tr.todo-stale td { background: #fff7ed; }
.todo-table tr.todo-stale:hover td { background: #ffedd5; }
.status-done .todo-title-link { color: #94a3b8; text-decoration: line-through; }
.status-cancelled .todo-title-link { color: #94a3b8; text-decoration: line-through; }

/* Inline-Edit (Beschreibung + Statustext) */
.inline-edit-wrap { margin-top: .3rem; }
.inline-display { font-size: .82rem; color: #6b7280; cursor: pointer; padding: .15rem .25rem; border-radius: 3px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.inline-display:hover { background: #f1f5f9; }
.inline-display em { color: #c4c9d4; }
.inline-textarea { width: 100%; padding: .35rem .5rem; border: 1px solid #93c5fd; border-radius: 4px; font: inherit; font-size: .82rem; resize: vertical; line-height: 1.45; }
.inline-actions { display: none; gap: .3rem; margin-top: .25rem; align-items: center; }

/* Status inline select */
.status-select { font: inherit; font-size: .8rem; border: 1px solid #d1d5db; border-radius: 3px; padding: 0.15rem 0.3rem; background: #fff; cursor: pointer; display: block; width: 100%; margin-bottom: .35rem; }

/* Action links */
.actions { vertical-align: top; }
.actions a { display: inline-block; margin-right: .4rem; font-size: .82rem; white-space: nowrap; }

/* Archive toggle */
.archive-toggle { margin-bottom: 0.75rem; }
.archive-toggle button { background: none; border: 1px solid #d1d5db; padding: 0.35rem 0.7rem; border-radius: 4px; cursor: pointer; font: inherit; font-size: .85rem; color: #475569; }
.archive-toggle button:hover { background: #f1f5f9; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 0.3rem; color: #374151; }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=date],
.form-group input[type=password],
.form-group textarea,
.form-group select { display: block; width: 100%; padding: 0.5rem 0.7rem; border: 1px solid #d1d5db; border-radius: 4px; font: inherit; background: #fff; }
.form-group textarea { min-height: 90px; resize: vertical; }
.attendees-checkboxes { display: flex; flex-direction: column; gap: .3rem; padding: .4rem 0; }
.attendees-checkboxes .checkbox-label { display: flex; align-items: center; gap: .5rem; font-weight: normal; font-size: .9rem; cursor: pointer; }
.attendees-checkboxes .checkbox-label input { width: auto; margin: 0; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 180px; }

/* Buttons */
.btn { display: inline-block; padding: 0.45rem 1rem; border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; border: none; transition: background .15s; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #e5e7eb; color: #374151; }
.btn-secondary:hover { background: #d1d5db; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: .82rem; }

/* Card */
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 1.25rem; margin-bottom: 1.25rem; }
.card h3 { font-size: 1rem; margin-bottom: 0.75rem; color: #1e293b; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem; }

/* History list */
.history-list { list-style: none; }
.history-list li { padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; font-size: .85rem; }
.history-list li:last-child { border-bottom: none; }
.history-meta { color: #94a3b8; font-size: .75rem; margin-bottom: 0.15rem; }
.history-change { color: #374151; }
.history-comment { color: #6b7280; font-style: italic; margin-top: 0.15rem; }
.old-value { color: #ef4444; text-decoration: line-through; }
.new-value { color: #22c55e; }

/* Jour Fixe */
.jf-block { margin-bottom: 1.5rem; }
.jf-block h3 { font-size: 1.05rem; margin-bottom: 0.5rem; color: #1e293b; }

/* Block 1 – Todo-Klappe */
.jf-todo { border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: .75rem; }
.jf-todo-header { display: flex; align-items: baseline; gap: 1rem; padding: .6rem .8rem; cursor: pointer; list-style: none; background: #f8fafc; border-radius: 6px; flex-wrap: wrap; }
.jf-todo-header::-webkit-details-marker { display: none; }
.jf-todo[open] > .jf-todo-header { border-radius: 6px 6px 0 0; border-bottom: 1px solid #e2e8f0; }
.jf-todo-title { font-weight: 600; flex: 1; font-size: .95rem; }
.jf-todo-link { color: inherit; text-decoration: none; }
.jf-todo-link:hover { text-decoration: underline; }
.jf-todo-list { font-size: .75rem; font-weight: normal; color: #64748b; background: #f1f5f9; border-radius: 3px; padding: .1rem .4rem; margin-left: .4rem; }
.jf-todo-meta { font-size: .8rem; color: #64748b; }
.jf-change-count { font-size: .75rem; color: #94a3b8; white-space: nowrap; }
.jf-erstellt { padding: .35rem .8rem; font-size: .82rem; color: #6b7280; font-style: italic; border-bottom: 1px solid #f1f5f9; }
.jf-todo .jf-status-note { padding: .4rem .8rem .2rem; font-style: italic; color: #6b7280; font-size: .9rem; }

/* Block 1 – Feld-Klappen */
.jf-fields-primary { padding: .3rem .8rem .4rem; }
.jf-field { margin: .15rem 0; }
.jf-field-header { display: flex; align-items: baseline; gap: .75rem; padding: .2rem .4rem; cursor: pointer; border-radius: 4px; list-style: none; }
.jf-field-header::-webkit-details-marker { display: none; }
details.jf-field > .jf-field-header:hover { background: #f1f5f9; }
.jf-field-label { width: 9rem; flex-shrink: 0; font-size: .8rem; color: #94a3b8; }
.jf-field-net { font-size: .85rem; color: #374151; }
.jf-net-zero { color: #94a3b8; font-style: italic; }
.jf-field-steps { padding: .1rem 0 .15rem 9.75rem; }
.jf-step { font-size: .78rem; color: #6b7280; padding: .08rem 0; }

/* Block 1 – Sekundäre Felder */
.jf-fields-secondary { margin: .2rem .8rem .5rem; border-radius: 4px; }
.jf-fields-secondary > summary { font-size: .8rem; color: #94a3b8; cursor: pointer; padding: .25rem .4rem; list-style: none; border-radius: 4px; }
.jf-fields-secondary > summary::-webkit-details-marker { display: none; }
.jf-fields-secondary > summary:hover { background: #f1f5f9; }
.jf-fields-secondary-list { padding-left: .2rem; }

/* Drucken: alles aufgeklappt */
@media print {
    details.jf-todo, details.jf-field, details.jf-fields-secondary { display: block !important; }
    .jf-todo-header, .jf-field-header, .jf-fields-secondary > summary { cursor: default; }
    .jf-fields-secondary > summary { display: none; }
}

/* Jour-Fixe-Protokolltabelle */
.jf-proto-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.jf-proto-table th { background: #f1f5f9; text-align: left; padding: .4rem .6rem; font-size: .82rem; color: #475569; border: 1px solid #e2e8f0; }
.jf-proto-table td { padding: .4rem .6rem; border: 1px solid #e2e8f0; font-size: .85rem; vertical-align: top; }
.jf-proto-table tr.jf-cat-header td { background: #f1f5f9; font-weight: 700; font-size: .85rem; }
.jf-proto-table .nr { width: 2.5rem; text-align: center; color: #64748b; font-size: .8rem; }
.jf-status-note { font-size: .78rem; font-style: italic; color: #6b7280; display: block; margin-top: .15rem; }
.jf-description { font-size: .78rem; color: #9ca3af; display: block; margin-top: .1rem; }

/* Jour-Fixe-Protokollkopf */
.jf-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem; margin-bottom: 1rem; font-size: .88rem; }
.jf-header-grid dt { font-weight: 600; color: #374151; }
.jf-header-grid dd { color: #222; }

/* Print */
@media print {
    .nav, .no-print { display: none !important; }
    body { background: #fff; }
    .main { padding: 0; max-width: none; }
    .card { box-shadow: none; border: 1px solid #e2e8f0; }
}

/* Responsive */
@media (max-width: 700px) {
    .todo-table th:nth-child(5),
    .todo-table td:nth-child(5),
    .todo-table th:nth-child(6),
    .todo-table td:nth-child(6) { display: none; }
    .form-row { flex-direction: column; }
}

/* Assignee initials */
.assignee-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #dbeafe; color: #1e40af; font-size: .72rem; font-weight: 700; cursor: default; }

/* Admin table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 0.5rem 0.75rem; background: #f1f5f9; font-size: .82rem; color: #64748b; font-weight: 600; }
.data-table td { padding: 0.5rem 0.75rem; border-top: 1px solid #e2e8f0; font-size: .88rem; }
.badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: .73rem; font-weight: 600; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f1f5f9; color: #64748b; }

/* Misc */
.text-muted { color: #9ca3af; font-size: .85rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.flex-gap { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
hr { border: none; border-top: 1px solid #e2e8f0; margin: 1rem 0; }