* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: #0f1419; color: #e7e9ea; min-height: 100vh; }
#app { min-height: 100vh; }

/* Login / Register */
.screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.screen.hidden { display: none; }

.card {
  width: 100%; max-width: 380px;
  background: #1a1f26; border-radius: 16px; padding: 2rem; box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.card h1 { margin: 0 0 .5rem; font-size: 1.5rem; }
.card .sub { color: #8b98a5; margin: 0 0 1.5rem; font-size: .95rem; }

input, button { padding: .75rem 1rem; border-radius: 8px; border: 1px solid #38444d; font-size: 1rem; }
input { background: #0f1419; color: #e7e9ea; width: 100%; margin-bottom: .75rem; }
input::placeholder { color: #6e767d; }
button { background: #1d9bf0; color: #fff; border: none; cursor: pointer; font-weight: 600; }
button:hover { background: #1a8cd8; }
.link-btn { background: none; color: #1d9bf0; width: 100%; margin-bottom: 0; }
.link-btn:hover { background: rgba(29,155,240,.15); }
.error { color: #f4212e; font-size: .9rem; margin: .5rem 0 0; min-height: 1.2em; }

/* Dashboard layout: sidebar + main */
.layout-dashboard { display: flex; min-height: 100vh; padding: 0; align-items: stretch; }
.layout-dashboard.screen { justify-content: flex-start; }

.sidebar {
  width: 240px; min-width: 240px;
  background: #1a1f26; border-right: 1px solid #38444d;
  display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar-brand {
  padding: 1.25rem 1.5rem; font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid #38444d;
}
.sidebar-nav { flex: 1; padding: 1rem 0; }
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.5rem; color: #8b98a5; text-decoration: none; transition: background .15s, color .15s;
}
.sidebar-link:hover { background: #252b33; color: #e7e9ea; }
.sidebar-link.active { background: rgba(29,155,240,.15); color: #1d9bf0; font-weight: 500; }
.sidebar-icon { opacity: .85; font-size: 1.05rem; line-height: 1; display: inline-block; min-width: 1.2em; text-align: center; }
.sidebar-icon-doc { font-size: 1rem; opacity: .85; }
.sidebar-footer { padding: 1rem 1.5rem; border-top: 1px solid #38444d; }
.sidebar-user { font-size: .85rem; color: #8b98a5; word-break: break-all; }

.dashboard-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #0f1419; }
.dashboard-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid #38444d;
}
.dashboard-header h1 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.header-logout {
  padding: .5rem .75rem; font-size: .9rem; background: transparent; border: 1px solid #38444d;
  color: #e7e9ea; border-radius: 6px; cursor: pointer; flex-shrink: 0;
}
.header-logout:hover { background: #38444d; }
.dashboard-content { flex: 1; padding: 1.5rem; overflow-auto; }

.page { display: none; }
.page.active { display: block; }
.page.hidden { display: none; }

/* Overview page */
.welcome-block { margin-bottom: 1.5rem; }
.welcome-block h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.muted { color: #8b98a5; font-size: .95rem; margin: 0; }
.stats-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.stat-card {
  background: #1a1f26; border: 1px solid #38444d; border-radius: 12px; padding: 1.25rem 1.5rem; min-width: 160px;
}
.stat-value { display: block; font-size: 1.75rem; font-weight: 700; color: #e7e9ea; }
.stat-label { font-size: .85rem; color: #8b98a5; }
.dashboard-section h3 { margin: 0 0 1rem; font-size: 1rem; color: #8b98a5; font-weight: 500; }
.overview-list { list-style: none; padding: 0; margin: 0; }
.overview-list li {
  background: #1a1f26; border: 1px solid #38444d; border-radius: 8px; padding: 1rem; margin-bottom: .5rem;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.overview-list li .title { font-weight: 600; }
.overview-list li .meta { color: #6e767d; font-size: .8rem; margin-top: .25rem; }
.empty-hint { padding: 1rem 0; }
.hidden { display: none !important; }

/* Overview – kompakt, ohne Scrollen */
#page-overview .overview-welcome { margin-bottom: 1rem; }
.overview-filter-row { margin-bottom: 1rem; }
.overview-filter-row .overview-stunden-filter select {
  padding: .5rem .75rem; border-radius: 8px; border: 1px solid #38444d; background: #1a1f26; color: #e7e9ea; font-size: 1rem;
}
.overview-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.25rem; margin-bottom: 1rem; }
.overview-preview-card {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: 1.25rem 1.5rem; background: linear-gradient(145deg, #1e242b 0%, #1a1f26 100%);
  border: 1px solid #38444d; border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s;
  min-height: 100px;
}
.overview-preview-card:hover:not(:disabled) { border-color: #1d9bf0; background: #252b33; }
.overview-preview-card:disabled { cursor: not-allowed; }
.overview-preview-card.hidden { display: none !important; }
.overview-preview-label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #8b98a5; margin-bottom: .35rem;
}
.overview-preview-name {
  font-size: 1.35rem; font-weight: 700; color: #e7e9ea; line-height: 1.3; margin-bottom: .25rem;
}
.overview-preview-meta { font-size: .85rem; color: #1d9bf0; }

/* Overview – Overlays (Diagramm / Stunden im Detail) */
.overview-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  overflow: auto;
}
.overview-overlay.hidden { display: none !important; }
.overview-overlay-inner {
  background: #1a1f26; border: 1px solid #38444d; border-radius: 16px;
  max-width: 90vw; width: 640px; max-height: 85vh; min-height: 200px;
  display: flex; flex-direction: column; overflow: hidden;
}
#overview-overlay-detail .overview-overlay-inner { width: 720px; max-height: 88vh; }
.overview-overlay-head {
  display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem;
  border-bottom: 1px solid #38444d; flex-shrink: 0;
}
.overview-overlay-head h2 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.overview-overlay-close {
  width: 2.25rem; height: 2.25rem; border: none; background: #252b33; color: #e7e9ea;
  font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 8px; padding: 0; display: flex; align-items: center; justify-content: center;
}
.overview-overlay-close:hover { background: #38444d; color: #fff; }
.overview-overlay-content {
  padding: 1.25rem; overflow: auto; flex: 1; min-height: 120px;
}
#overview-overlay-detail-content .overview-employee-card { margin-bottom: .5rem; }
#overview-overlay-detail-content .overview-employee-details { padding: 0 1rem 1rem; }
body.overview-overlay-open { overflow: hidden; }

/* Overview – Stat-Karten & Diagramm */
.overview-stats-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.overview-stats-row .overview-stat {
  flex: 1; min-width: 120px; max-width: 200px;
  background: linear-gradient(145deg, #1e242b 0%, #1a1f26 100%);
  border: 1px solid #38444d; border-radius: 12px;
  padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .25rem;
}
.overview-stats-row .overview-stat .stat-value { font-size: 1.75rem; font-weight: 700; color: #1d9bf0; }
.overview-stats-row .overview-stat .stat-label { font-size: .8rem; color: #8b98a5; text-transform: uppercase; letter-spacing: .03em; }
.overview-chart-wrap {
  background: #1a1f26; border: 1px solid #38444d; border-radius: 12px;
  padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.overview-overlay-content .overview-chart { padding: 0; }
.overview-chart-title { margin: 0 0 1rem; font-size: .95rem; font-weight: 600; color: #e7e9ea; }
.overview-chart { display: flex; flex-direction: column; gap: .65rem; }
.overview-chart-row { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.overview-chart-name { min-width: 140px; color: #e7e9ea; }
.overview-chart-bar-wrap {
  flex: 1; min-width: 0; height: 1.5rem; background: #252b33; border-radius: 6px;
  overflow: hidden; display: flex; align-items: center;
}
.overview-chart-bar {
  height: 100%; background: linear-gradient(90deg, #1d9bf0 0%, #1a8cd8 100%);
  border-radius: 6px; min-width: 2px; transition: width .3s ease;
}
.overview-chart-value { flex-shrink: 0; width: 4.5rem; text-align: right; font-size: .85rem; color: #1d9bf0; font-weight: 600; }

/* Overview – Stunden */
.overview-stunden-section { margin-bottom: 2rem; }
.overview-stunden-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.overview-stunden-head h3 { margin: 0; }
.overview-stunden-filter { display: flex; align-items: center; gap: .5rem; }
.overview-stunden-filter select {
  padding: .4rem .6rem; border-radius: 6px; border: 1px solid #38444d; background: #1a1f26; color: #e7e9ea; font-size: .9rem; cursor: pointer;
}
.overview-stunden-list { display: flex; flex-direction: column; gap: .5rem; }
.overview-employee-card {
  background: #1a1f26; border: 1px solid #38444d; border-radius: 10px; overflow: hidden;
}
.overview-employee-header {
  width: 100%; display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem;
  background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .15s;
}
.overview-employee-header:hover { background: rgba(255,255,255,.04); }
.overview-employee-name { font-weight: 600; flex: 1; min-width: 0; }
.overview-employee-summary { color: #1d9bf0; font-weight: 500; white-space: nowrap; }
.overview-employee-chevron { color: #8b98a5; font-size: .75rem; transition: transform .2s; }
.overview-employee-details { padding: 0 1rem 1rem; }
.overview-day-table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.overview-day-table th, .overview-day-table td { padding: .4rem .6rem; text-align: left; border-top: 1px solid #38444d; }
.overview-day-table th { color: #8b98a5; font-weight: 500; }
.overview-day-table .num { color: #1d9bf0; font-weight: 500; }

/* Items page */
.section h2 { margin: 0 0 .5rem; }
.hint { color: #8b98a5; font-size: .9rem; margin: 0 0 1rem; }
#add-item-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
#add-item-form input { flex: 1; min-width: 140px; margin-bottom: 0; }
#add-item-form button { width: auto; }

#items-list { list-style: none; padding: 0; margin: 0; }
#items-list li {
  background: #1a1f26; border: 1px solid #38444d; border-radius: 8px; padding: 1rem; margin-bottom: .5rem;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
#items-list li .text { flex: 1; }
#items-list li .title { font-weight: 600; }
#items-list li .content { color: #8b98a5; font-size: .9rem; margin-top: .25rem; }
#items-list li .meta { color: #6e767d; font-size: .8rem; }
#items-list li button { width: auto; padding: .4rem .75rem; font-size: .85rem; background: #f4212e; margin: 0; border: none; border-radius: 6px; color: #fff; cursor: pointer; }
#items-list li button:hover { background: #d11b27; }

/* Stunden eintragen */
.dropzone {
  border: 2px dashed #38444d; border-radius: 12px; padding: 2rem; text-align: center;
  background: #1a1f26; cursor: pointer; transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.dragover { border-color: #1d9bf0; background: rgba(29,155,240,.08); }
.dropzone-text { margin: 0; color: #8b98a5; }
.stunden-status { margin-top: .75rem; min-height: 1.2em; }
.stunden-list-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 .75rem; }
.stunden-list-title { margin: 0; font-size: 1rem; color: #8b98a5; font-weight: 500; }
.btn-delete-all { padding: .5rem .75rem; font-size: .85rem; background: transparent; border: 1px solid #f4212e; color: #f4212e; border-radius: 6px; cursor: pointer; }
.btn-delete-all:hover { background: rgba(244,33,46,.15); }
.stunden-table-wrap { overflow-x: auto; border: 1px solid #38444d; border-radius: 8px; background: #1a1f26; }
.stunden-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.stunden-table th, .stunden-table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #38444d; }
.stunden-table th { color: #8b98a5; font-weight: 500; white-space: nowrap; }
.stunden-table tbody tr:last-child td { border-bottom: none; }
.stunden-table tbody tr:hover { background: rgba(255,255,255,.03); }
.stunden-table .stunden-name { font-weight: 600; min-width: 140px; }
.stunden-table .stunden-datum { color: #8b98a5; white-space: nowrap; }
.stunden-table .stunden-start, .stunden-table .stunden-ende { white-space: nowrap; }
.stunden-table .stunden-pause { color: #8b98a5; }
.stunden-table .stunden-stunden { color: #1d9bf0; font-weight: 600; }
.stunden-table .stunden-delete { padding: .35rem .6rem; font-size: .8rem; background: #f4212e; border: none; border-radius: 4px; color: #fff; cursor: pointer; }
.stunden-table .stunden-delete:hover { background: #d11b27; }

/* Rechnung */
.rechnung-form { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.rechnung-label { display: flex; align-items: center; gap: .5rem; }
.rechnung-label span { color: #8b98a5; white-space: nowrap; }
.rechnung-label select {
  padding: .5rem .75rem; border-radius: 8px; border: 1px solid #38444d; background: #1a1f26; color: #e7e9ea; font-size: 1rem; min-width: 220px;
}
.btn-secondary { background: #38444d; color: #e7e9ea; padding: .5rem 1rem; border: 1px solid #38444d; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.btn-secondary:hover { background: #4a5560; }
.btn-primary { background: #1d9bf0; color: #fff; padding: .6rem 1.25rem; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; font-weight: 600; margin-top: .75rem; }
.btn-primary:hover { background: #1a8cd8; }
.rechnung-summary-wrap { margin-top: 1rem; }
.rechnung-summary-wrap h3 { margin: 0 0 .75rem; font-size: 1rem; color: #8b98a5; font-weight: 500; }
.rechnung-table { max-width: 400px; }
.rechnung-table .num { font-weight: 600; color: #1d9bf0; }

/* Einstellungen mit Reitern */
.settings-tabs { display: flex; gap: 0; margin-bottom: 1.25rem; border-bottom: 1px solid #38444d; }
.settings-tab {
  padding: .6rem 1.25rem; font-size: .95rem; background: transparent; border: none; border-bottom: 2px solid transparent;
  color: #8b98a5; cursor: pointer; margin-bottom: -1px; border-radius: 0;
}
.settings-tab:hover { color: #e7e9ea; }
.settings-tab.active { color: #1d9bf0; border-bottom-color: #1d9bf0; font-weight: 500; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-panel.hidden { display: none !important; }
.settings-panel .hint { margin-bottom: 1rem; }
.einstellungen-form { max-width: 420px; }
.einstellungen-form .form-group { margin-bottom: 1.25rem; }
.einstellungen-form .form-group label { display: block; margin-bottom: .35rem; color: #8b98a5; font-size: .9rem; }
.einstellungen-form .form-group input { margin-bottom: 0; }
.einstellungen-form .form-hint { font-size: .85rem; color: #8b98a5; margin: 0 0 .5rem; }
.settings-contacts-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.settings-contact-row {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.settings-contact-row .settings-contact-name { flex: 1; min-width: 140px; margin-bottom: 0; }
.settings-contact-row .settings-contact-id { flex: 2; min-width: 200px; margin-bottom: 0; }
.settings-contact-remove {
  width: 2rem; height: 2rem; padding: 0; border: 1px solid #38444d; background: #252b33;
  color: #8b98a5; font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 6px; flex-shrink: 0;
}
.settings-contact-remove:hover { background: #f4212e; color: #fff; border-color: #f4212e; }
.btn-add-contact { margin-top: 0; }
.rechnung-contact-row { margin-bottom: 1rem; }
.rechnung-contact-label { display: flex; align-items: center; gap: .5rem; }
.rechnung-contact-label span { color: #8b98a5; white-space: nowrap; }
.rechnung-contact-label select {
  padding: .5rem .75rem; border-radius: 8px; border: 1px solid #38444d; background: #1a1f26; color: #e7e9ea;
  min-width: 220px;
}
.einstellungen-form button[type="submit"] { margin-top: .5rem; }

@media (max-width: 640px) {
  .layout-dashboard { flex-direction: column; }
  .sidebar { width: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar-brand { border-bottom: none; padding-right: .5rem; }
  .sidebar-nav { flex: none; padding: 0; display: flex; }
  .sidebar-link { padding: .75rem 1rem; }
  .sidebar-footer { width: 100%; border-top: 1px solid #38444d; padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: center; }
  .sidebar-user { margin-bottom: 0; margin-right: .5rem; }
  .sidebar-logout { width: auto; }
}