:root {
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-border: #e2e4e9;
    --color-text: #1f2430;
    --color-muted: #6b7280;
    --color-primary: #2f6fed;
    --color-danger: #d64545;
    --radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
}

/* Login-Seite */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.auth-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%;
    max-width: 360px;
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.auth-form input {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
}

button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.65rem 1rem;
    font-size: 1rem;
    cursor: pointer;
}

.alert { padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: 0.9rem; }
.alert-error { background: #fdecec; color: var(--color-danger); }

/* App-Rahmen */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 230px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
}

.sidebar-brand { font-weight: 600; padding: 0 1.25rem 1.25rem; }

.sidebar-nav { list-style: none; margin: 0; padding: 0; flex: 1; }
.sidebar-nav li a {
    display: block;
    padding: 0.6rem 1.25rem;
    color: var(--color-text);
    text-decoration: none;
}
.sidebar-nav li a:hover { background: var(--color-bg); }

.sidebar-user {
    padding: 1rem 1.25rem 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.sidebar-user a { color: var(--color-primary); text-decoration: none; }

.content { flex: 1; padding: 2rem; }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.card h2 { margin-top: 0; font-size: 1rem; }
.muted { color: var(--color-muted); font-size: 0.9rem; }
.big-number { font-size: 2rem; font-weight: 600; margin: 0; }

.backup-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.backup-table th, .backup-table td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.backup-table th { background: var(--color-bg); font-weight: 600; }
.backup-table tr:last-child td { border-bottom: none; }

/* Seitenkopf mit Aktionen */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-header h1, .page-header h2 { margin: 0; }
.page-header-actions { display: flex; gap: 0.5rem; }

.btn, .btn-secondary, .btn-danger, button {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}
.btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-danger { background: #fdecec; color: var(--color-danger); border: 1px solid #f3c9c9; }
.btn-link { background: none; border: none; color: var(--color-primary); padding: 0.2rem 0; cursor: pointer; font-size: 0.85rem; text-decoration: underline; }
.btn-link-danger { color: var(--color-danger); }

.toolbar { margin: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.toolbar input[type="search"] {
    width: 100%; max-width: 360px; padding: 0.55rem 0.8rem;
    border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.95rem;
}
.sort-toggle { display: flex; gap: 0.25rem; background: var(--color-bg); border-radius: var(--radius); padding: 0.2rem; }
.sort-toggle a {
    padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.85rem; text-decoration: none; color: var(--color-muted);
}
.sort-toggle a.active { background: var(--color-surface); color: var(--color-text); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Ordner / Kundenliste */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.chevron { display: inline-block; color: var(--color-muted); transition: transform 0.15s ease; }
details[open] > summary .chevron { transform: rotate(90deg); }

details.folder { margin-bottom: 1.5rem; }
details.folder summary {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.1rem 0.5rem;
    border-bottom: 2px solid var(--color-border);
    font-weight: 700; font-size: 0.95rem; color: var(--color-text);
}
.folder-name { flex: 0 0 auto; }
.folder-edit { margin-left: auto; font-weight: 400; font-size: 0.8rem; color: var(--color-primary); text-decoration: none; }

.client-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.client-row a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 0.75rem 1rem; text-decoration: none; color: var(--color-text);
}
.client-row a:hover { border-color: var(--color-primary); }
.client-row-name { font-weight: 500; }
.client-row-domain { font-weight: 400; margin-left: 0.6rem; }
.client-row-meta { display: flex; align-items: center; gap: 0.6rem; }
.row-arrow { color: var(--color-muted); }


.badge { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.badge-maintenance { background: #eafaf1; color: #1e8449; }
.badge-no-maintenance { background: #fdecec; color: #c0392b; }
.badge-priority-gering { background: #eef2f7; color: #4b5563; }
.badge-priority-mittel { background: #fff3c4; color: #8a6d00; }
.badge-priority-hoch { background: #fdecec; color: #c0392b; }
.badge-status-offen { background: #eef2f7; color: #4b5563; }
.badge-status-in_klaerung { background: #dbe3f7; color: #1e3a70; }
.badge-status-in_bearbeitung { background: #e6f0fd; color: #2f6fed; }
.badge-status-gestoppt { background: #fdecec; color: #c0392b; }
.badge-status-fertig { background: #eafaf1; color: #1e8449; }

/* Formulare */
.form { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; }
.form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.form input, .form select, .form textarea {
    padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; font-family: inherit;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
.checkbox-row input { width: auto; }
.form-actions { display: flex; align-items: center; gap: 1rem; }
.form-actions a { color: var(--color-primary); text-decoration: none; }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; margin-top: 1rem; }
.client-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.dashboard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.dashboard-list a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.dashboard-list a:hover { color: var(--color-primary); }

/* Todo-Listen als aufklappbare Abschnitte mit Tabelle */
.list-board { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.todo-list-section {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 0.75rem 1rem;
}
.todo-list-section.dragging { opacity: 0.4; }
.todo-list-section summary.list-drag-handle {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem;
}
.list-color-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--list-color, #ccc); flex-shrink: 0; }
.list-title { font-weight: 600; }
.list-edit { margin-left: auto; color: var(--color-muted); text-decoration: none; font-size: 0.9rem; }

.todo-table { display: flex; flex-direction: column; margin-top: 0.75rem; width: 100%; }
.todo-table-header, .todo-row {
    display: grid;
    grid-template-columns: 28px minmax(110px, 1.2fr) minmax(110px, 1.2fr) 118px 130px 140px 130px 76px 32px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    box-sizing: border-box;
    min-height: 46px;
}
.todo-table-header { color: var(--color-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; min-height: auto; }
.todo-container { display: flex; flex-direction: column; }
.todo-container .todo-row:last-child { border-bottom: none; }
.row-drag-handle { cursor: grab; color: var(--color-muted); }
.todo-row { cursor: pointer; font-size: 0.88rem; }
.todo-row:hover { background: var(--color-bg); }
.todo-row.dragging { opacity: 0.4; }
.subtask-count { color: var(--color-muted); }
.col-name, .col-notes, .col-priority, .col-person, .col-status, .col-date { min-width: 0; }
.row-delete { color: var(--color-muted); text-decoration: none; font-size: 0.85rem; opacity: 0.6; }
.row-delete:hover { opacity: 1; color: var(--color-danger); }
.todo-empty-row { padding: 0.75rem 0.6rem; }

.todo-expand-btn {
    background: none; border: none; padding: 0; color: var(--color-muted); cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.15rem; flex-shrink: 0; font-size: 0.85rem; font-family: inherit;
}
.chevron-small { font-size: 0.75rem; transition: transform 0.15s ease; }
.todo-expand-btn.expanded .chevron-small { transform: rotate(90deg); }

/* Name/Notizen: direkt in der Zeile editierbar */
input.inline-field.name-field, input.inline-field.notes-field {
    border: 1px solid var(--color-border); background: var(--color-surface); padding: 0.3rem 0.5rem; border-radius: 6px;
    font-size: 0.85rem; font-family: inherit; color: var(--color-text); width: 100%; box-sizing: border-box; height: 32px;
}
input.inline-field.name-field { font-weight: 500; }
input.inline-field.notes-field { color: var(--color-muted); }
input.inline-field.name-field:hover, input.inline-field.notes-field:hover { border-color: var(--color-primary); }
input.inline-field.name-field:focus, input.inline-field.notes-field:focus { border-color: var(--color-primary); outline: none; color: var(--color-text); }

/* Person/Datum: dezente Felder mit sichtbarem Rahmen */
select.inline-field[data-field="assigned_user_id"],
input.inline-field[data-field="due_date"] {
    border: 1px solid var(--color-border); background: var(--color-surface); padding: 0.3rem 0.5rem; border-radius: 6px;
    font-size: 0.82rem; font-family: inherit; color: var(--color-text); cursor: pointer; width: 100%; box-sizing: border-box;
    height: 32px;
}
select.inline-field[data-field="assigned_user_id"]:hover, input.inline-field[data-field="due_date"]:hover { border-color: var(--color-primary); }
select.inline-field[data-field="assigned_user_id"]:focus, input.inline-field[data-field="due_date"]:focus { border-color: var(--color-primary); outline: none; }

/* Priorität/Status: farbige Pills */
select.inline-field[data-field="priority"], select.inline-field[data-field="status"] {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: 1px solid transparent; border-radius: 999px; padding: 0.3rem 1.6rem 0.3rem 0.75rem;
    font-size: 0.76rem; font-weight: 600; font-family: inherit; cursor: pointer; height: 30px; box-sizing: border-box;
    width: 100%;
    background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 9px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
select.inline-field[data-field="priority"]:hover, select.inline-field[data-field="status"]:hover { border-color: rgba(0,0,0,0.15); }
select.inline-field[data-field="priority"]:focus, select.inline-field[data-field="status"]:focus { border-color: var(--color-primary); outline: none; }

select.inline-field.badge-priority-gering { background-color: #eef2f7; color: #4b5563; }
select.inline-field.badge-priority-mittel { background-color: #fff3c4; color: #8a6d00; }
select.inline-field.badge-priority-hoch { background-color: #fdecec; color: #c0392b; }
select.inline-field.badge-status-offen { background-color: #eef2f7; color: #4b5563; }
select.inline-field.badge-status-in_klaerung { background-color: #dbe3f7; color: #1e3a70; }
select.inline-field.badge-status-in_bearbeitung { background-color: #e6f0fd; color: #2f6fed; }
select.inline-field.badge-status-gestoppt { background-color: #fdecec; color: #c0392b; }
select.inline-field.badge-status-fertig { background-color: #eafaf1; color: #1e8449; }

.add-todo-link { display: block; text-align: left; margin-top: 0.5rem; padding: 0.4rem 0.25rem; color: var(--color-muted); text-decoration: none; font-size: 0.9rem; }
.add-todo-link:hover { color: var(--color-primary); }

.quick-add-form { margin-top: 0.5rem; }
.quick-add-form input {
    width: 100%; border: 1px dashed var(--color-border); background: none; padding: 0.5rem 0.6rem;
    border-radius: var(--radius); font-size: 0.9rem; color: var(--color-text);
}
.quick-add-form input:focus { border-style: solid; border-color: var(--color-primary); outline: none; }

/* Aufklappbarer Detailbereich pro Todo (nur Unteraufgaben) */
.todo-detail-row { background: var(--color-bg); padding: 1rem 0.75rem; border-bottom: 1px solid var(--color-border); }
.detail-subheading { font-size: 0.85rem; margin: 0 0 0.4rem; }

.subtask-list-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.subtask-list-inline li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.subtask-done { text-decoration: line-through; color: var(--color-muted); }
.subtask-delete { color: var(--color-muted); text-decoration: none; }
.subtask-add-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.subtask-add-form input { flex: 1; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); }

.trash-actions { display: flex; gap: 0.75rem; }

@media (max-width: 720px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
    .sidebar-nav { display: flex; }
    .sidebar-user { display: none; }
}