/* ============================================================
   ZeitFluss – Design-Tokens
   Idee: "Zeit als Material" – ruhige Tinte + warmer Bernstein-
   Akzent für den laufenden Timer. Große, taktile Mono-Ziffern
   für die Zeitanzeige (das Signature-Element der App).
   ============================================================ */
:root{
  --bg: #FAF9F5;
  --surface: #FFFFFF;
  --surface-soft: #F2F0E9;
  --ink: #1C2321;
  --ink-soft: #5B6560;
  --ink-faint: #8B948E;
  --line: #E6E2D8;

  --primary: #2D5C4D;
  --primary-dark: #234A3E;
  --primary-soft: #DCE8E2;

  --accent: #E8935A;
  --accent-dark: #CE7943;
  --accent-soft: #FBE7D6;

  --danger: #B5533C;
  --danger-soft: #F6E1DA;

  --info: #2F6FA6;
  --info-soft: #DCEAF5;
  --info-dark: #23557F;

  --sidebar-bg: #16211D;
  --sidebar-line: #26362F;
  --sidebar-text: #C9D3CD;
  --sidebar-text-dim: #7E8B84;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(28,35,33,.06), 0 8px 24px -12px rgba(28,35,33,.18);
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"]{
  --bg: #12181F;
  --surface: #1B2229;
  --surface-soft: #212A32;
  --ink: #E7EAE7;
  --ink-soft: #A3ADB5;
  --ink-faint: #6B7680;
  --line: #2C363F;
  --primary-soft: #1E332C;
  --primary-dark: #7FD9B9;
  --accent-soft: #3A2A1E;
  --accent-dark: #F0A96E;
  --danger-soft: #3A211D;
  --info-soft: #1D3548;
  --info-dark: #7FB8E8;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}
[data-theme="dark"] .auth-card{ background: var(--surface); }
[data-theme="dark"] .logo-chip{ background:#fff; }

.theme-toggle-btn{
  border:none; background:none; cursor:pointer; color: var(--sidebar-text-dim);
  font-size:16px; padding:6px; border-radius:6px; line-height:1;
}
.theme-toggle-btn:hover{ color:#fff; background: var(--sidebar-line); }

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; margin: 0 0 4px; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; }

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

.sidebar{
  width: 240px;
  flex-shrink:0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display:flex;
  flex-direction:column;
  padding: 22px 16px;
  position: sticky;
  top:0;
  height:100vh;
}
.sidebar-brand{
  padding: 4px 4px 22px;
}
.logo-chip{
  background:#fff; border-radius: 10px; padding: 8px 10px;
  display:flex; align-items:center; justify-content:center;
}
.logo-chip img{ display:block; width:100%; height:auto; max-width:170px; }
.brand-mark{ color: var(--accent); font-size: 20px; }

.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.sidebar-nav a{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text-dim);
  font-weight:500;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.sidebar-nav a:hover{ background: var(--sidebar-line); color:#fff; }
.sidebar-nav a.active{ background: var(--primary); color:#fff; }
.nav-icon{ width:18px; text-align:center; opacity:.9; }

.sidebar-footer{
  border-top: 1px solid var(--sidebar-line);
  padding-top: 14px;
  display:flex; align-items:center; justify-content:space-between;
}
.user-chip{ display:flex; align-items:center; gap:10px; min-width:0; }
.user-avatar{
  width:32px; height:32px; border-radius:50%;
  background: var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:13px; flex-shrink:0;
}
.user-meta{ min-width:0; }
.user-name{ font-size:13px; color:#fff; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role{ font-size:11.5px; color: var(--sidebar-text-dim); }
.logout-link{ color: var(--sidebar-text-dim); font-size:18px; padding:6px; border-radius:6px; }
.logout-link:hover{ color:#fff; background: var(--sidebar-line); }

.main-content{ flex:1; padding: 36px 44px 60px; max-width: 1180px; }
.main-content.is-wide{ max-width: 1900px; }

.page-header{ margin-bottom: 26px; }
.page-header h1{ font-size: 26px; }
.page-sub{ color: var(--ink-soft); margin:0; font-size:14px; }

/* ---------- Timer card (Signature-Element) ---------- */
.timer-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 26px 28px 22px;
  margin-bottom: 22px;
}
.timer-inputs{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;
}
.timer-inputs input[type=text]{ flex: 2 1 240px; }
.timer-inputs select{ flex: 1 1 150px; }
.timer-card input[type=text], .timer-card select{
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.timer-card input[disabled], .timer-card select[disabled]{ background: var(--surface-soft); color: var(--ink-faint); }

.billable-toggle{
  display:flex; align-items:center; gap:6px;
  font-size: 13.5px; color: var(--ink-soft);
  padding: 0 6px;
  white-space:nowrap;
}

.timer-display-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  padding-top: 6px;
}
.timer-display{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 46px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink);
}
.timer-card[data-running="1"] .timer-display{ color: var(--accent-dark); }

.btn-timer{
  background: var(--primary);
  color:#fff;
  border:none;
  padding: 15px 34px;
  border-radius: 999px;
  font-weight:600;
  font-size: 15px;
  cursor:pointer;
  transition: transform .1s, background .15s;
  box-shadow: 0 6px 16px -6px rgba(45,92,77,.55);
}
.btn-timer:hover{ transform: translateY(-1px); }
.btn-timer.is-running{
  background: var(--danger);
  box-shadow: 0 6px 16px -6px rgba(181,83,60,.5);
}
.btn-timer.is-running::before{
  content:"● "; font-size: 10px; vertical-align:2px;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.link-btn{
  background:none; border:none; color: var(--primary);
  font-size: 13px; font-weight:500; cursor:pointer; padding: 12px 2px 0;
}
.link-btn:hover{ text-decoration: underline; }

.manual-form{
  margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--line);
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
}
.manual-form.hidden{ display:none; }
.manual-form .field{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-soft); }
.manual-form input, .manual-form select{
  padding: 9px 10px; border:1px solid var(--line); border-radius: var(--radius-sm);
}

/* ---------- Favoriten ---------- */
.favorites-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center; }
.favorite-chip{
  display:flex; align-items:stretch; border:1px solid var(--line); border-radius:999px;
  overflow:hidden; background: var(--surface); transition: border-color .15s;
}
.favorite-chip:hover{ border-color: var(--primary); }
.favorite-btn{
  display:flex; align-items:center; gap:7px; padding:8px 12px; border:none; background:none;
  cursor:pointer; font-size:13px; font-weight:500; color: var(--ink); white-space:nowrap;
}
.favorite-btn:hover{ background: var(--primary-soft); }
.fav-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.favorite-rename, .favorite-remove{
  border:none; background: var(--surface-soft); color: var(--ink-faint);
  padding:0 9px; cursor:pointer; font-size:11px; border-left:1px solid var(--line);
}
.favorite-rename:hover{ background: var(--primary-soft); color: var(--primary-dark); }
.favorite-remove:hover{ background: var(--danger-soft); color: var(--danger); }
.favorite-add{
  border:1px dashed var(--line); background:none; border-radius:999px;
  padding:8px 14px; font-size:13px; color: var(--primary); cursor:pointer; font-weight:500;
}
.favorite-add:hover{ background: var(--primary-soft); border-color: var(--primary); }

/* ---------- Tastenkürzel-Hinweis ---------- */
.shortcut-hint{ font-size:12.5px; color: var(--ink-faint); margin-top:10px; }
kbd{
  background: var(--surface-soft); border:1px solid var(--line); border-radius:4px;
  padding:1px 6px; font-family: var(--font-mono); font-size:11px; box-shadow: 0 1px 0 var(--line);
}

/* ---------- Tag-Picker ---------- */
.tag-picker{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px; background: var(--surface); }
.tag-picker-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.tag-chip{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid; border-radius:999px; padding: 3px 8px; font-size:12px; font-weight:500;
}
.tag-chip button{ border:none; background:none; cursor:pointer; color:inherit; font-size:11px; opacity:.7; padding:0; }
.tag-chip button:hover{ opacity:1; }
.tag-picker-input-wrap{ position:relative; flex:1; min-width:120px; }
.tag-picker-input{ border:none; outline:none; padding:4px 2px; width:100%; font-size:13px; background:transparent; }
.tag-picker-menu{
  position:absolute; top: calc(100% + 4px); left:0; min-width:200px; max-width:min(280px, 88vw); z-index:20;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding:4px; max-height:220px; overflow-y:auto;
}
.tag-menu-item{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:6px; font-size:13px; cursor:pointer; }
.tag-menu-item:hover{ background: var(--surface-soft); }
.tag-menu-create{ color: var(--primary); font-weight:500; }
.tag-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.entry-tags{ display:flex; gap:4px; flex-wrap:wrap; margin-top:2px; }
.tag-pill{ font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; border:1px solid; }

.static-tags{ display:flex; gap:5px; flex-wrap:wrap; padding: 2px 0; }

/* ---------- Summary stats ---------- */
.today-summary{ display:flex; gap:14px; margin-bottom: 22px; }
.summary-stat{
  background: var(--primary-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  flex:1;
}
.summary-value{ display:block; font-family: var(--font-mono); font-size: 22px; font-weight:600; color: var(--primary-dark); }
.summary-label{ font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Entries list ---------- */
.entries-list h2{ font-size: 16px; margin-bottom: 10px; }
.empty-state{ color: var(--ink-faint); font-size: 14px; padding: 18px 0; }

.entry-row{
  display:flex; align-items:center; gap:12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.entry-color{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.entry-main{ flex:1; min-width:0; }
.entry-desc{ font-weight:500; font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry-meta{ font-size: 12.5px; color: var(--ink-soft); }
.entry-time{ font-size: 12.5px; color: var(--ink-faint); font-family: var(--font-mono); white-space:nowrap; }
.entry-duration{ font-family: var(--font-mono); font-weight:600; font-size: 14px; min-width: 78px; text-align:right; }
.badge-billable{
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 11px; font-weight:700; padding: 2px 6px; border-radius: 999px;
}
.overrun-banner{
  background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; margin-bottom: 14px; font-weight:500;
}
.entry-edit, .entry-delete{
  border:none; background:none; cursor:pointer; color: var(--ink-faint);
  font-size: 14px; padding: 4px 6px; border-radius:6px;
}
.entry-edit:hover{ color: var(--primary); background: var(--primary-soft); }
.entry-delete:hover{ color: var(--danger); background: var(--danger-soft); }

/* ---------- Dashboard ---------- */
.dashboard-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:16px; }
.chart-wrap svg{ width:100%; height:auto; display:block; }
.dist-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; }
.dist-label{ flex: 0 0 130px; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--ink-soft); }
.dist-bar-track{ flex:1; height:8px; background: var(--surface-soft); border-radius:999px; overflow:hidden; }
.dist-bar{ height:100%; border-radius:999px; }
.dist-value{ flex: 0 0 60px; text-align:right; font-family: var(--font-mono); font-size:12.5px; }
@media (max-width: 860px){ .dashboard-grid{ grid-template-columns: 1fr; } }

/* ---------- Kalender / Wochenansicht ---------- */
.calendar-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.calendar-nav{ display:flex; align-items:center; gap:8px; }
.calendar-nav a, .calendar-nav button{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 12px; font-size:13px; color: var(--ink); cursor:pointer;
}
.calendar-nav a:hover, .calendar-nav button:hover{ background: var(--surface-soft); }
.calendar-range{ font-weight:600; font-family: var(--font-display); font-size:16px; }
.calendar-total{ font-family: var(--font-mono); font-size:14px; color: var(--ink-soft); }

.calendar-wrap{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
.calendar-days-header{ display:grid; grid-template-columns: 56px repeat(7, 1fr); border-bottom:1px solid var(--line); }
.calendar-day-head{ padding:10px 6px; text-align:center; border-left:1px solid var(--line); }
.calendar-day-head .dow{ font-size:11px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.calendar-day-head .dom{ font-family: var(--font-display); font-size:16px; margin-top:2px; }
.calendar-day-head.is-today .dom{ color: var(--primary); }
.calendar-day-head .day-total{ font-size:11px; color: var(--ink-soft); font-family: var(--font-mono); margin-top:2px; }

.calendar-body{ display:grid; grid-template-columns: 56px repeat(7, 1fr); max-height: 620px; overflow-y:auto; position:relative; }
.calendar-hours{ display:flex; flex-direction:column; }
.calendar-hour-label{ height: 44px; text-align:right; padding-right:8px; font-size:10.5px; color: var(--ink-faint); transform: translateY(-6px); }
.calendar-day-col{ position:relative; border-left:1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 44px); cursor: crosshair; }
.calendar-entry{
  position:absolute; border-radius:6px; padding:3px 6px; overflow:hidden;
  font-size:11px; line-height:1.3; border-left:3px solid; cursor:pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.calendar-entry .ce-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar-entry .ce-time{ opacity:.8; font-family: var(--font-mono); font-size:10px; }
.calendar-entry.is-running{ animation: pulse-border 1.6s ease-in-out infinite; }
@keyframes pulse-border{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,147,90,.4);} 50%{ box-shadow:0 0 0 4px rgba(232,147,90,0);} }

.view-switch{ display:flex; background: var(--surface-soft); border-radius: var(--radius-sm); padding:3px; gap:2px; }
.view-switch a{ padding:6px 14px; border-radius:6px; font-size:13px; color: var(--ink-soft); font-weight:500; }
.view-switch a.active{ background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.month-grid-head{ display:grid; grid-template-columns: repeat(7, 1fr); text-align:center; font-size:11px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; padding: 0 1px 8px; }
.month-grid{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:6px;
}
.month-day{
  aspect-ratio: 1.15 / 1; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:8px; display:flex; flex-direction:column; justify-content:space-between; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.month-day:hover{ border-color: var(--primary); background: var(--primary-soft); }
.month-day.is-outside{ opacity:.4; }
.month-day.is-today{ border-color: var(--accent); border-width:2px; }
.month-day-num{ font-family: var(--font-display); font-size:15px; font-weight:600; }
.month-day-hours{ font-family: var(--font-mono); font-size:11.5px; color: var(--primary-dark); font-weight:600; align-self:flex-start; background: var(--primary-soft); padding:2px 6px; border-radius:999px; }

@media (max-width: 860px){
  .calendar-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .calendar-days-header, .calendar-body{ min-width: 660px; }
  .calendar-body{ max-height: 460px; }
  .calendar-hour-label{ height:36px; }
  .calendar-day-col{ background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 36px); }
}

/* ---------- Buttons (general) ---------- */
.btn-primary{
  background: var(--primary); color:#fff; border:none;
  padding: 10px 18px; border-radius: var(--radius-sm); font-weight:600; cursor:pointer;
}
.btn-primary:hover{ background: var(--primary-dark); }
.btn-secondary{
  background: var(--surface-soft); color: var(--ink); border: 1px solid var(--line);
  padding: 10px 18px; border-radius: var(--radius-sm); font-weight:500; cursor:pointer;
}
.btn-secondary:hover{ background: var(--line); }
.btn-danger-outline{
  background:#fff; color: var(--danger); border:1px solid var(--danger-soft);
  padding: 7px 12px; border-radius: var(--radius-sm); font-weight:500; cursor:pointer; font-size:13px;
}
.btn-danger-outline:hover{ background: var(--danger-soft); }

/* ---------- Forms / cards (Kunden, Benutzer) ---------- */
.card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.card h2{ font-size: 16px; margin-bottom: 14px; }
.form-grid{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.form-grid .field{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-soft); }
.form-grid input, .form-grid select{
  padding: 9px 11px; border:1px solid var(--line); border-radius: var(--radius-sm); min-width: 140px;
}
.form-grid input[type=color]{ padding:3px; width:48px; min-width:unset; }

.entity-list{ display:flex; flex-direction:column; gap:8px; margin-top: 6px; }
.entity-row{
  display:flex; align-items:center; gap:12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.entity-row.is-archived{ opacity:.55; }
.entity-dot{ width:12px; height:12px; border-radius:4px; flex-shrink:0; }
.entity-title{ font-weight:600; font-size:14px; }
.entity-sub{ font-size:12.5px; color: var(--ink-soft); }
.entity-row form{ margin:0; }
.entity-actions{ margin-left:auto; display:flex; gap:6px; align-items:center; }

.projects-inline{ margin: 8px 0 0 24px; display:flex; flex-wrap:wrap; gap:6px; }
.project-chip{
  background: var(--surface-soft); border:1px solid var(--line); border-radius:999px;
  font-size: 12px; padding: 4px 10px; color: var(--ink-soft); display:flex; align-items:center; gap:6px;
}
.project-chip.is-archived{ text-decoration: line-through; opacity:.6; }
.project-chip button{ border:none; background:none; cursor:pointer; color: var(--ink-faint); font-size:11px; }

/* ---------- Tables (Berichte) ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 18px;
}
.filter-bar .field{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-soft); }
.filter-bar input, .filter-bar select{ padding: 8px 10px; border:1px solid var(--line); border-radius: var(--radius-sm); }
.filter-actions{ margin-left:auto; display:flex; gap:8px; }

.client-summary{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 20px; }
.client-summary-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; min-width: 160px; flex:1;
}
.client-summary-card .entity-dot{ display:inline-block; margin-right:6px; }
.client-summary-card .value{ font-family: var(--font-mono); font-size: 17px; font-weight:600; }

table.report-table{ width:100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow:hidden; border: 1px solid var(--line); }
table.report-table th, table.report-table td{ padding: 10px 12px; text-align:left; font-size: 13.5px; border-bottom: 1px solid var(--line); }
table.report-table th{ background: var(--surface-soft); font-weight:600; color: var(--ink-soft); font-size:12px; text-transform: uppercase; letter-spacing:.03em; }
table.report-table tbody tr:last-child td{ border-bottom:none; }
table.report-table tbody tr:hover{ background: var(--surface-soft); }
.report-total{ text-align:right; font-family: var(--font-mono); font-weight:600; padding: 14px 4px; font-size:15px; }

.row-overlap td{
  position: relative;
  animation: pulse-overlap-cell 1.5s ease-in-out infinite;
}
.row-overlap td:first-child{ border-left: 3px solid var(--danger); }
@keyframes pulse-overlap-cell{
  0%, 100%{ box-shadow: inset 0 0 0 2px rgba(181,83,60,.95); background-color: rgba(181,83,60,.12); }
  50%{ box-shadow: inset 0 0 0 2px rgba(181,83,60,.2); background-color: rgba(181,83,60,.02); }
}
.row-overlap-flat{
  animation: pulse-overlap-flat 1.5s ease-in-out infinite;
}
@keyframes pulse-overlap-flat{
  0%, 100%{ box-shadow: inset 0 0 0 2px rgba(181,83,60,.95); background-color: rgba(181,83,60,.10); }
  50%{ box-shadow: inset 0 0 0 2px rgba(181,83,60,.2); background-color: transparent; }
}

.overlap-flag{
  display:inline-flex; align-items:center; gap:4px; color: var(--danger); font-size:11px; font-weight:700;
  cursor:help;
}
.overlap-banner{
  background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; margin-bottom: 14px; font-weight:500;
}

.core-hours-bar{
  display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap;
}
#toggle-core-hours.is-active{
  background: var(--info); color:#fff; border-color: var(--info);
}

/* Nur sichtbar, wenn #report-table die Klasse "show-core-hours" trägt (JS-Toggle) */
.report-table.show-core-hours .row-core-hours td{
  position: relative;
  animation: pulse-core-cell 1.5s ease-in-out infinite;
}
.report-table.show-core-hours .row-core-hours td:first-child{ border-left: 3px solid var(--info); }
@keyframes pulse-core-cell{
  0%, 100%{ box-shadow: inset 0 0 0 2px rgba(47,111,166,.95); background-color: rgba(47,111,166,.14); }
  50%{ box-shadow: inset 0 0 0 2px rgba(47,111,166,.2); background-color: rgba(47,111,166,.03); }
}

/* ---------- Auth pages (Login/Setup) ---------- */
.auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 20% 20%, #234A3E 0%, #16211D 55%, #101815 100%);
  padding: 24px;
}
.auth-card{
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 38px 36px; width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
}
.auth-brand{ display:flex; align-items:center; justify-content:center; margin-bottom: 22px; }
.auth-brand img{ display:block; max-width: 220px; width:100%; height:auto; }
.auth-card h1{ font-size: 20px; margin-bottom: 4px; }
.auth-sub{ color: var(--ink-soft); font-size: 13.5px; margin: 0 0 22px; }
.auth-card .field{ display:flex; flex-direction:column; gap:5px; margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); }
.auth-card input{ padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; }
.auth-error{ background: var(--danger-soft); color: var(--danger); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.auth-success{ background: var(--primary-soft); color: var(--primary-dark); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.auth-card .btn-primary{ width:100%; padding: 12px; margin-top: 4px; }
.auth-foot{ margin-top:18px; font-size: 12.5px; color: var(--ink-faint); text-align:center; }
.auth-foot a{ color: var(--primary); font-weight:500; }
.auth-foot a:hover{ text-decoration:underline; }

/* ---------- Modal ---------- */
.entry-modal{
  border:none; border-radius: var(--radius-lg); padding:0; width: 580px; max-width: 94vw;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.4);
}
.entry-modal::backdrop{ background: rgba(22,33,29,.55); }
.entry-modal form{ padding: 24px 26px; }
.entry-modal h3{ font-size:17px; margin-bottom: 16px; }
.entry-modal .field{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-soft); margin-bottom:12px; }
.entry-modal input, .entry-modal select{ padding: 9px 11px; border:1px solid var(--line); border-radius: var(--radius-sm); }
.entry-modal .modal-row{ display:flex; gap:10px; flex-wrap:wrap; }
.entry-modal .modal-row .field{ flex:1 1 100px; min-width:100px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top: 16px; }
.modal-error{ color: var(--danger); font-size: 13px; background: var(--danger-soft); padding:8px 10px; border-radius: var(--radius-sm); }
.modal-overlap-warning{
  color: var(--danger); font-size: 12.5px; background: var(--danger-soft);
  padding:8px 10px; border-radius: var(--radius-sm); margin: -4px 0 12px; line-height:1.5;
}

.debug-output{
  background: var(--ink); color: #C9D3CD; font-family: var(--font-mono); font-size:12px;
  padding:12px 14px; border-radius: var(--radius-sm); white-space:pre-wrap; word-break:break-word;
  max-height:260px; overflow-y:auto; line-height:1.5;
}

/* ---------- Toast ---------- */
#toast{
  position: fixed; bottom: 22px; right: 22px;
  background: var(--ink); color:#fff; padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; box-shadow: var(--shadow); opacity:0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; pointer-events:none; z-index: 50;
}
#toast.show{ opacity:1; transform: translateY(0); }
#toast.is-error{ background: var(--danger); }

/* ---------- Responsive ---------- */

/* Tablet & kleiner: Sidebar wird zur horizontalen Topbar */
@media (max-width: 860px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; flex-direction:row; align-items:center; padding: 10px 14px; gap:10px; }
  .sidebar-brand{ padding: 0; flex-shrink:0; }
  .logo-chip{ padding:6px 8px; }
  .logo-chip img{ max-width:120px; }
  .sidebar-nav{ flex-direction:row; flex:1; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:2px; }
  .sidebar-nav a{ white-space:nowrap; padding:8px 10px; }
  .sidebar-footer{ border-top:none; flex-shrink:0; gap:6px; }
  .main-content{ padding: 20px 14px 40px; }

  .timer-display{ font-size: 34px; }
  .timer-display-row{ flex-wrap:wrap; gap:14px; }

  .dashboard-grid{ grid-template-columns: 1fr; }

  h1{ font-size: 22px; }
  .page-header{ margin-bottom:18px; }
}

/* Handy: weitergehende Anpassungen */
@media (max-width: 600px){
  .main-content{ padding: 16px 12px 36px; }

  /* Sidebar: Nutzername ausblenden, nur Avatar + Icons, spart Platz */
  .user-meta{ display:none; }
  .sidebar-footer{ margin-left:auto; }
  .logo-chip img{ max-width:96px; }

  /* Formulare & Filterleisten: untereinander statt nebeneinander */
  .form-grid, .filter-bar{ flex-direction:column; align-items:stretch; }
  .form-grid .field, .filter-bar .field{ width:100%; }
  .form-grid input:not([type="color"]):not([type="checkbox"]),
  .form-grid select,
  .filter-bar input:not([type="checkbox"]),
  .filter-bar select{ width:100%; }
  .filter-actions{ margin-left:0; flex-wrap:wrap; width:100%; }
  .filter-actions > *{ flex:1 1 auto; text-align:center; }

  /* Timer-Karte: Felder untereinander, leichter zu bedienen */
  .timer-inputs{ flex-direction:column; }
  .timer-inputs input[type=text], .timer-inputs select{ flex:none; width:100%; }
  .billable-toggle{ padding:6px 0; }
  .manual-form{ flex-direction:column; align-items:stretch; }
  .manual-form .field, .manual-form select, .manual-form input{ width:100%; }

  .btn-timer{ width:100%; }
  .timer-display-row{ flex-direction:column; align-items:stretch; text-align:center; }
  .timer-display{ text-align:center; }

  /* Kacheln/Summen: zweispaltig statt gequetscht in einer Zeile */
  .today-summary{ flex-wrap:wrap; }
  .summary-stat{ flex: 1 1 calc(50% - 7px); }
  .client-summary{ flex-wrap:wrap; }
  .client-summary-card{ flex: 1 1 calc(50% - 5px); min-width:0; }

  /* Listen-Einträge: Beschreibung bekommt eigene Zeile, Rest bleibt kompakt darunter */
  .entry-row{ flex-wrap:wrap; row-gap:6px; }
  .entry-main{ flex-basis:100%; }
  .entry-duration{ text-align:left; }

  /* Kunden/Projekte/Tags/Benutzer: Aktionen unter den Titel, nicht daneben gequetscht */
  .entity-row{ flex-wrap:wrap; }
  .entity-actions{ flex-basis:100%; margin-left:0; margin-top:8px; flex-wrap:wrap; }
  .projects-inline{ margin-left:0; }

  /* Modal: Datum/Start/Ende untereinander statt nebeneinander */
  .entry-modal{ width:94vw; }
  .entry-modal .modal-row{ flex-direction:column; gap:0; }
  .modal-actions{ flex-direction:column-reverse; }
  .modal-actions button{ width:100%; }

  /* Tabellen: kompakter, damit mehr in den scrollbaren Bereich passt */
  table.report-table th, table.report-table td{ padding:8px 8px; font-size:12.5px; }

  .month-grid{ gap:4px; }
  .month-day{ padding:5px; }
  .month-day-num{ font-size:12.5px; }
  .month-day-hours{ font-size:9.5px; padding:1px 4px; }
  .month-grid-head{ font-size:9.5px; }
  .calendar-header{ flex-direction:column; align-items:flex-start; }
  .calendar-nav{ flex-wrap:wrap; }

  .card{ padding:16px 14px; }
  h1{ font-size: 20px; }
  .page-sub{ font-size:13px; }
}

/* Sehr schmale Screens */
@media (max-width: 380px){
  .summary-stat{ flex: 1 1 100%; }
  .client-summary-card{ flex: 1 1 100%; }
  .sidebar-nav a{ padding:8px; }
  .sidebar-nav .nav-icon{ margin:0; }
}