:root {
  --bg: #05060a;
  --bg-elevated: #0d0d0f;
  --bg-elevated-2: #17171a;
  --text: #edf0fb;
  --text-muted: #8790ac;
  --text-faint: #545c78;
  --border: #1e1e22;
  --border-strong: #323236;
  --accent: #f2f2f5;
  --accent-2: #c9cad2;
  --accent-ink: #0a0a0c;
  --accent-soft: rgba(242, 242, 245, 0.10);
  --accent-glow: rgba(242, 242, 245, 0.25);
  --neutral-soft: rgba(255, 255, 255, 0.06);
  --fill: #1c1c1f;
  --fill-hover: #28282c;
  --danger: #ff5c7a;
  --danger-soft: rgba(255, 92, 122, 0.14);
  --warning: #ffb238;
  --warning-soft: rgba(255, 178, 56, 0.14);
  /* Tightened across the board (was 8/12/18) — ClickUp's own corners run
     close-fitting and small everywhere, not the bubbly/pill look the
     bigger values gave cards, modals and buttons before. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Disable the double-tap-to-zoom gesture (mobile Safari/Chrome) everywhere in
   the app. touch-action is NOT inherited in CSS, so setting it only on
   html/body has no effect on taps that land on any of their descendants
   (i.e. virtually every tap) — it has to be set on every element directly.
   Pinch-zoom is blocked separately via the viewport meta tag in index.html
   (maximum-scale=1, user-scalable=no) so the page can't be zoomed at all. */
*, *::before, *::after {
  touch-action: manipulation;
}

/* Hide scrollbars everywhere (the app itself, and any scrollable panel like
   the customer dropdown) so nothing reads as a "web page" scrollbar. Content
   still scrolls normally via touch/trackpad/wheel — only the visible bar is
   suppressed. */
*, *::before, *::after {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge (Chromium) */
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255, 255, 255, 0.035), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  /* Only relevant inside the Mac desktop app (frameless window, no native
     title bar) — a no-op in a normal browser tab, so safe to ship on the
     website too. The app's content column (.shell) is centered and often
     narrower than the window, so the .topbar-only drag region left the
     wide empty side margins (and everything above the content on a short
     window) ungrabbable — exactly where someone instinctively grabs a
     window. Making the whole page draggable by default, then carving
     "no-drag" back out for the actual content (.shell) and the login card,
     fixes that; .topbar then re-enables dragging just for its own header
     strip within the content column (see below). */
  -webkit-app-region: drag;
}

.shell,
.auth-card {
  -webkit-app-region: no-drag;
}

.hidden { display: none !important; }

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
}

button {
  font-size: 15px;
}

/* Inputs, textareas and selects must never render below 16px: iOS Safari
   auto-zooms the whole page on focus of any text field under that size. */
input, textarea, select {
  font-size: 16px;
}

::selection {
  background: var(--accent-glow);
  color: #fff;
}

/* ---------- Shell ---------- */

.shell {
  max-width: 720px;
  margin: 0 auto;
  /* Top padding adds the device's safe-area inset (status bar / notch) on
     top of the normal spacing, instead of just the normal spacing alone —
     otherwise, in the installed PWA / fullscreen mobile web view, the phone's
     status bar clock overlaps the logo and title in the topbar below. On a
     normal desktop browser the inset is 0, so this is identical to before. */
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 20px 140px;
}

/* On a real desktop window the narrow mobile-width column left huge empty
   margins on either side. Widen it in steps as the viewport grows, capped
   so line lengths stay reasonable on very large/ultrawide monitors. Mobile
   (the default rule above, and the max-width queries further down) is
   untouched. */
@media (min-width: 900px) {
  .shell {
    max-width: min(92vw, 1180px);
    padding: 36px 48px 140px;
  }
}

@media (min-width: 1400px) {
  .shell {
    max-width: min(88vw, 1440px);
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  /* .shell (above) carved dragging back out for the whole content column —
     re-enable it just for this header strip. The buttons/links inside stay
     clickable via the no-drag rule below. */
  -webkit-app-region: drag;
}

.topbar button,
.topbar a,
.topbar input,
.topbar select,
.menu-dropdown {
  -webkit-app-region: no-drag;
}

/* The logo/wordmark button is exactly where someone instinctively grabs a
   window to move it (it sits where a native title bar's title would be) —
   confirmed live: dragging from anywhere else in the topbar moves the Mac
   app's window fine, but dragging from the logo itself did nothing, because
   the blanket ".topbar button { no-drag }" rule above covers it too.
   Chromium still delivers a normal click to a "drag" region as long as the
   pointer doesn't move between mousedown/mouseup, so making this one button
   draggable again keeps "click logo -> Übersicht" working while also
   letting people grab/move the window from it, like a real title bar. Needs
   higher specificity than ".topbar button" above (one extra class) to win. */
.topbar button.wordmark-link {
  -webkit-app-region: drag;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.wordmark img {
  height: 1.3em;
  width: 1.3em;
  border-radius: 6px;
  display: block;
  flex: none;
}

.wordmark .dot { color: var(--accent); }

.wordmark-link {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  display: inline-flex;
}

.top-nav {
  display: flex;
  gap: 4px;
}

.nav-link {
  background: var(--fill);
  border: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
}

.nav-link:hover { color: var(--text); background: var(--fill-hover); }

.nav-link.active {
  color: var(--accent-ink);
  background: var(--accent);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.topbar-user button {
  background: none;
  border: none;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  font-size: 13px;
}

.topbar-user button:hover { color: var(--text); }

.push-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none !important;
  background: var(--fill) !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600;
}

.push-toggle-btn:hover { background: var(--fill-hover) !important; color: var(--text) !important; }

.push-toggle-btn.active {
  background: var(--fill-hover) !important;
  color: var(--text) !important;
}

.api-token-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none !important;
  background: var(--fill) !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600;
}

.api-token-btn:hover { background: var(--fill-hover) !important; color: var(--text) !important; }

.delete-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none !important;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600;
}

.delete-account-btn:hover { background: var(--danger) !important; color: #fff !important; }

.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none !important;
  background: var(--fill) !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600;
}

.logout-btn:hover { background: var(--fill-hover) !important; color: var(--text) !important; }

/* Einstellungen modal — same four actions that used to live in the sidebar's
   inline accordion, now laid out as a simple stacked list inside a proper
   ku-modal so it matches every other modal in the app. */
.settings-modal-list { display: flex; flex-direction: column; gap: 8px; margin: 1rem 0; }

.settings-modal-list button {
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  text-decoration: none !important;
  text-align: left;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
}

/* Small tucked-away "⚙" menu holding Erinnerungen / Claude verbinden /
   Wechseln, instead of three separate buttons sitting in the topbar all
   the time. */
.settings-menu-wrap { position: relative; }

.settings-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.settings-menu-btn:hover,
.settings-menu-btn.active { background: var(--fill-hover); color: var(--text); }

.settings-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.settings-menu-dropdown button {
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  text-decoration: none !important;
}

/* ---------- Morning briefing ---------- */

.briefing-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 20px;
}

.briefing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.briefing-title {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 600;
  margin: 0;
}

.briefing-dismiss-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  padding: 4px 2px;
}

.briefing-dismiss-btn:hover { color: var(--text-muted); }

.briefing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.briefing-item {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
}

button.briefing-item:hover { border-color: var(--border-strong); color: var(--text); }

.briefing-item-danger { border-color: rgba(255, 92, 122, 0.35); color: var(--danger); }

.briefing-item-urgent { border-color: rgba(255, 178, 56, 0.35); color: var(--warning); }

/* ---------- Capture ---------- */

.capture {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 30px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.01) inset;
}

.capture:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px var(--neutral-soft);
}

.capture textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 52px;
  max-height: 260px;
}

.capture textarea::placeholder { color: var(--text-faint); }

.capture-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  height: 26px;
}

.capture-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.capture-hint {
  font-size: 12px;
  color: var(--text-faint);
}

.mic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  flex: none;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mic-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.mic-btn.listening {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  animation: mic-pulse 1.4s ease-in-out infinite;
}

/* Shown instead of a working mic button inside the Mac app (Electron), where
   the browser's built-in speech recognition silently fails — see the
   isElectron() check around the mic button's setup in app.js. Struck-through
   icon + dimmed so it visibly reads as "not available here" rather than
   looking like a normal, working button. */
.mic-btn-unavailable {
  opacity: 0.4;
  cursor: help;
  position: relative;
}

.mic-btn-unavailable::after {
  content: "";
  position: absolute;
  left: 15%;
  top: 15%;
  width: 70%;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
}

.mic-btn-unavailable:hover { opacity: 0.7; }

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

.capture-save {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 20px rgba(242, 242, 245, 0.3);
}

.capture.has-content .capture-save {
  opacity: 1;
  pointer-events: auto;
}

.capture-save:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Filters ---------- */

.filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 26px;
}

.filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 140px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: 8px 2px;
  color: var(--text);
  outline: none;
}

.search-input:focus { border-bottom-color: var(--border-strong); }
.search-input::placeholder { color: var(--text-faint); }

.toggle-chip {
  border: none;
  background: var(--fill);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.toggle-chip.active {
  color: var(--text);
  background: var(--fill-hover);
}

/* ---------- Feed ---------- */

.feed {
  display: flex;
  flex-direction: column;
}

.entry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Thinner than before so more rows fit on screen without scrolling —
     was 16px top/bottom, most of a row's height was just this padding. */
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.entry-body { flex: 1; min-width: 0; }

/* Left-side done/open toggle for tasks — an empty ring while open, filled
   solid accent-blue with a white checkmark once done, same look as
   ClickUp/Todoist-style task lists. Sits before .entry-body so it reads as
   the row's leading control. Notes don't get one (see buildEntryRow).
   A tap no longer toggles instantly — it opens the one-button confirm
   popover below instead (see .entry-checkbox-confirm), since this exact
   spot is where a thumb lands while scrolling and instant-toggle kept
   marking tasks done by accident. */
.entry-checkbox-wrap {
  position: relative;
  flex: none;
  align-self: flex-start;
}

.entry-checkbox {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.entry-checkbox:hover,
.entry-checkbox.active { border-color: var(--accent); }

.entry.done .entry-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}

.entry.done .entry-checkbox::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #05060a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* The confirm popover itself — one button, opens directly under the
   checkbox. Left-anchored (not right-anchored like .entry-menu-dropdown)
   because the checkbox sits at the row's left edge; a right-anchored
   popover here would run the same off-screen-to-the-left risk that the
   "⋯ Optionen" dropdown had. */
.entry-checkbox-confirm {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: 168px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.entry-checkbox-confirm button {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.entry-checkbox-confirm button:hover { background: var(--fill); }

/* "Aufgaben"/"Notizen" section label inside a mixed feed (see
   renderGroupedFeed in app.js) — deliberately smaller/quieter than
   .section-title so it reads as a sub-grouping, not a new page section.
   The first one sits flush with the feed's top edge, later ones get a gap
   from the group above. */
.entry-group-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 4px 4px;
}

.entry-group-label:first-child { padding-top: 4px; }

/* Every row is a single compact ClickUp-style line by default — the whole
   .entry-body is one big click target (see .entry-body-clickable below)
   that expands it in place, so the cursor reads as clickable everywhere,
   not just on the text itself like before. */
.entry-body-clickable { cursor: pointer; }

.entry-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.entry-content {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Collapsed state: force the single line the whole redesign is about,
   overriding the pre-wrap above just for this state. Expanding (see
   applyExpandedState in app.js) removes this class and the full text
   wraps normally again. */
.entry-content-truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry.done .entry-content {
  color: var(--text-faint);
  text-decoration: line-through;
}

/* ---------- Compact glance badges (collapsed row only) ---------- */

.entry-meta-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.entry-due-compact { white-space: nowrap; }

.entry-assignee-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--fill);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--display);
  letter-spacing: 0.02em;
}

.entry-clickup-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 10px;
  text-decoration: none;
  flex: none;
}

.entry-clickup-dot:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- Expanded detail (full text already shown above; this is the
   links + full meta block, hidden until the row is clicked open) ---------- */

.entry-detail { margin-top: 6px; }

.entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.entry-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-link-chip:hover { color: var(--text); background: var(--border-strong); }

.entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.entry-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.entry-tag {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: 10px;
  padding: 2px 8px;
}

.entry-space-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 2px 8px;
}

.entry-assignee-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 2px 8px;
}

.entry-time {
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: var(--display);
}

.entry-due {
  font-size: 11px;
  font-family: var(--display);
  font-weight: 500;
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
}

.entry-due.due-today {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.entry-due.due-overdue {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(255, 92, 122, 0.35);
}

.entry-urgent-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid rgba(255, 178, 56, 0.35);
  border-radius: 10px;
  padding: 2px 8px;
}

.entry.urgent {
  border-left: 2px solid var(--warning);
  padding-left: 6px;
}

.entry-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.12s ease;
  flex: none;
}

.entry:hover .entry-actions,
.entry:focus-within .entry-actions { opacity: 1; }

.entry-actions button {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 13px;
  padding: 2px 4px;
}

.entry-actions button:hover { color: var(--danger); }

.entry-actions button.clickup-push-btn {
  color: var(--text-muted);
  background: var(--fill);
  border: none;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.entry-actions button.clickup-push-btn:hover {
  color: var(--text);
  background: var(--fill-hover);
}

.entry-actions button.clickup-push-btn:disabled { opacity: 0.6; pointer-events: none; }

.entry-actions button.entry-done-btn {
  color: var(--text);
  background: var(--fill);
  border: none;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.entry-actions button.entry-done-btn:hover {
  color: var(--accent-ink);
  background: var(--accent);
}

.entry.done .entry-actions button.entry-done-btn {
  color: var(--text-muted);
  background: var(--fill);
}

.entry.done .entry-actions button.entry-done-btn:hover {
  color: var(--text);
  background: var(--fill-hover);
}

.entry-actions button.entry-edit-btn:hover { color: var(--text); }

.entry-edit-body { display: flex; flex-direction: column; gap: 8px; }

.entry-edit-textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  padding: 10px 12px;
  outline: none;
}

.entry-edit-textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--neutral-soft); }

.entry-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }

.entry-edit-actions button {
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: var(--fill);
  color: var(--text-muted);
}

.entry-edit-save-btn { color: #05060a; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.entry-edit-save-btn:hover { opacity: 0.9; }
.entry-edit-save-btn:disabled { opacity: 0.6; pointer-events: none; }
.entry-edit-cancel-btn:hover { color: var(--text); background: var(--fill-hover); }

.clickup-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.clickup-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: 10px;
  padding: 2px 8px;
  text-decoration: none;
}

.clickup-badge:hover { color: var(--text); background: var(--border-strong); }

.clickup-unlink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--bg-elevated-2);
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

.clickup-unlink-btn:hover { color: #fff; background: var(--danger); }

.entry.clickup-picking .entry-actions { opacity: 1; }

.clickup-inline-label {
  font-size: 12px;
  color: var(--text-faint);
}

.clickup-inline-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.clickup-inline-form select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  font-size: 16px;
  background: var(--bg-elevated-2);
  color: var(--text);
  outline: none;
  max-width: 150px;
}

.clickup-inline-form select:focus { border-color: var(--border-strong); }

.clickup-inline-form input[type="date"],
.clickup-inline-form input[type="time"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  font-size: 16px;
  background: var(--bg-elevated-2);
  color: var(--text);
  outline: none;
}

.clickup-inline-form input[type="time"] { max-width: 100px; }

.clickup-inline-form input[type="date"]:focus,
.clickup-inline-form input[type="time"]:focus { border-color: var(--border-strong); }

.due-date-clear-btn {
  border: 1px solid var(--border);
  background: none;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 11.5px;
}

.due-date-clear-btn:hover { color: var(--danger); border-color: var(--danger-soft); }

.clickup-inline-send {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
}

.clickup-inline-send:disabled { opacity: 0.6; pointer-events: none; }

.clickup-inline-cancel {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
}

.clickup-inline-cancel:hover { color: var(--text); }

.assignee-picker-form { flex-wrap: wrap; }

.assignee-picker-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.assignee-picker-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-elevated-2);
  cursor: pointer;
}

.assignee-picker-option input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
}

.empty-state {
  text-align: center;
  color: var(--text-faint);
  padding: 60px 20px;
  font-size: 14px;
}

/* ---------- Boot splash ----------
   Shown while all app data (spaces + entries + per-customer details) is
   preloaded up front, so that once it disappears every view can render
   instantly from cache with no per-click loading/stutter afterwards. */

.boot-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
}

.boot-loading .wordmark { font-size: 28px; }

.boot-loading-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--text);
  animation: boot-spin 0.8s linear infinite;
}

@keyframes boot-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Auth ---------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Guarantees at least a status-bar's worth of clearance above the card
     even though it's vertically centered — on a short mobile viewport the
     centered card's top (the logo + title) would otherwise land right
     under, and visually overlap, the phone's status bar clock. */
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
}

.auth-card {
  width: 100%;
  max-width: 380px;
}

.auth-card .wordmark {
  display: flex;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 8px;
}

.auth-tagline {
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  margin-bottom: 32px;
}

.auth-remembered {
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  margin-bottom: 16px;
}

.auth-remembered b { color: var(--text); }

.auth-reset-btn {
  display: block;
  margin: 14px auto 0;
  background: none !important;
  border: none !important;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 12.5px;
  padding: 0;
}

.auth-reset-btn:hover { color: var(--text-muted); }

.auth-field {
  margin-bottom: 14px;
}

.auth-field label {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.auth-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  background: var(--bg-elevated);
  color: var(--text);
  outline: none;
}

.auth-field input:focus { border-color: var(--border-strong); }

.auth-submit {
  width: 100%;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
  box-shadow: 0 0 24px rgba(242, 242, 245, 0.22);
}

.auth-submit:disabled { opacity: 0.6; box-shadow: none; }

.auth-error {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* ---------- Home / navigation ---------- */

.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.count-badge {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: 10px;
  padding: 1px 8px;
}

.capture-slot { margin-bottom: 30px; }

/* ---------- Clarify ---------- */

.clarify-section { margin-bottom: 34px; }

#clarify-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clarify-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.clarify-item .entry-body { margin-bottom: 10px; }

.clarify-item.stale {
  border-color: rgba(255, 178, 56, 0.35);
}

.clarify-age-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--warning);
  background: var(--warning-soft);
  border-radius: 10px;
  padding: 3px 9px;
  margin-bottom: 10px;
}

.clarify-age-badge.very-stale {
  color: var(--danger);
  background: var(--danger-soft);
}

.clarify-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.clarify-label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-right: 2px;
}

.clarify-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.clarify-chip {
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
}

.clarify-chip:hover { border-color: var(--border-strong); color: var(--text); }

.clarify-chip-new {
  border-style: dashed;
  color: var(--text-muted);
}

.clarify-new-form,
.area-add-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.clarify-new-form input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 16px;
  background: var(--bg-elevated-2);
  color: var(--text);
  outline: none;
  min-width: 160px;
}

.clarify-new-form input:focus { border-color: var(--border-strong); }

.clarify-new-form button {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Customer menu (top-left dropdown) ---------- */

.menu-wrap {
  position: relative;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--fill);
  color: var(--text);
  font-size: 16px;
  padding: 0;
  flex: none;
}

.menu-btn:hover, .menu-btn.open {
  background: var(--fill-hover);
  color: var(--text);
}

/* Slide-in drawer from the left, ClickUp-style — a fixed-width panel with a
   dimmed backdrop behind it, NOT a full-screen takeover. Below 900px this is
   the only way to reach navigation (toggled by the ☰ button); at 900px+ it's
   overridden further down into a permanently-docked sidebar instead, and the
   backdrop is hidden for good since there's nothing left to dim. */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.5);
}

.menu-dropdown {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: min(84vw, 300px);
  height: 100%;
  max-height: none;
  overflow-y: auto;
  /* Noticeably lighter than the page background (not the ~1% difference
     --bg-elevated gave it before) so the panel reads as a distinct surface
     at a glance, the way ClickUp's own sidebar does. */
  background: #111116;
  border-right: 1px solid var(--border-strong);
  padding: max(16px, env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.menu-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

/* Workspace mark pinned to the top of the docked desktop sidebar (hidden
   here, revealed by the desktop media query further down) — mobile keeps
   using .menu-dropdown-header's plain "Menü" title instead. */
.menu-brand {
  display: none;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  color: var(--text);
  text-align: left;
  width: 100%;
  padding: 2px 6px 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.menu-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex: none;
}

.menu-brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.menu-dropdown-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
}

.menu-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--fill);
  color: var(--text);
  font-size: 18px;
  padding: 0;
  flex: none;
}

.menu-close-btn:hover { background: var(--fill-hover); color: var(--text); }

.menu-dropdown-loading {
  font-size: 13px;
  color: var(--text-faint);
  padding: 10px 4px;
}

.menu-customer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-customer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--fill);
  color: var(--text);
  text-align: left;
}

.menu-customer-item:hover { background: var(--fill-hover); }

.menu-customer-item.private { color: var(--text); }

.menu-customer-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.menu-customer-item-avatar {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
  box-sizing: border-box;
}

img.menu-customer-item-avatar {
  object-fit: contain;
  background: #fff;
  padding: 3px;
}

.menu-customer-item-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fill);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--display);
  letter-spacing: 0.02em;
}

.menu-customer-item-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-customer-item-meta {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  font-family: var(--display);
}

.menu-add-row { padding: 2px; margin-top: 10px; }

/* ---------- Desktop: permanently-docked sidebar (ClickUp-style) ----------
   Below 900px the block above stays a toggled slide-in drawer. At 900px+,
   the exact same #menu-dropdown element (no separate markup) is pinned to
   the left edge for good — no ☰ click, no overlay, nothing to close — and
   everything inside it shrinks down to a real sidebar's scale (small type,
   tight rows) instead of the roomy mobile-drawer sizing above. Overriding
   the "hidden" utility class needs matching specificity (id+class) since
   JS still toggles that class harmlessly in the background. */
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .menu-backdrop { display: none !important; }

  #menu-dropdown,
  #menu-dropdown.hidden {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    width: 232px;
    z-index: 10;
    border-right: 1px solid var(--border-strong);
    background: #111116;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 12px 18px;
  }

  .menu-dropdown-header { display: none; }
  .menu-brand { display: flex; }

  /* The main topbar (☰ + wordmark) only existed to reach navigation that
     now lives permanently in the sidebar's own brand mark above — showing
     both read as a duplicated, slapped-on header. Each view's own <h1>
     (e.g. "Reportings") becomes the de-facto page title instead, same as
     it already was below the old topbar. */
  .topbar { display: none; }

  /* Owns .shell's max-width from here on (later in the cascade than the
     two vw-based rules near the top of this file, so this wins at every
     width ≥900px) — the content column has to fit beside the 232px
     sidebar, not just within a fraction of the full viewport anymore. */
  .shell {
    margin-left: 232px;
    max-width: min(calc(100vw - 232px - 64px), 1180px);
    padding-top: calc(env(safe-area-inset-top, 0px) + 40px);
  }

  .menu-nav-item,
  .menu-subnav-item,
  .menu-section-header {
    font-size: 13px;
    padding: 7px 8px;
    border-radius: 6px;
  }

  /* Tighter, less "pill"-like rounding for the whole sidebar at this size —
     ClickUp's own selected/hover rows are a close-fitting rounded rect, not
     the bigger var(--radius-md) rounding the roomier mobile drawer uses. */
  .menu-nav-item, .menu-subnav-item { border-radius: 6px; }

  .menu-customer-item {
    padding: 7px 9px;
    border-radius: 6px;
  }

  .menu-customer-item-name { font-size: 12.5px; }
  .menu-customer-item-avatar { width: 20px; height: 20px; border-radius: 6px; }
  .menu-customer-item-avatar-fallback { font-size: 9px; }
  .menu-customer-item-meta { font-size: 11px; }
  .menu-group-label { font-size: 10px; padding: 8px 6px 2px; }
  .menu-footer-user-name { font-size: 12.5px; }
}

.menu-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 14px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--fill);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}

.menu-add-btn:hover { background: var(--fill-hover); }

.menu-add-form {
  display: flex;
  gap: 6px;
  padding: 4px 2px;
}

.menu-add-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  background: var(--bg-elevated-2);
  color: var(--text);
  outline: none;
}

.menu-add-form input:focus { border-color: var(--border-strong); }

.menu-add-form button {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  flex: none;
}

.add-icon {
  font-family: var(--display);
  font-size: 18px;
  color: var(--text);
}

/* ---------- Space detail ---------- */

.back-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: 0;
  margin-bottom: 14px;
}

.back-link:hover { color: var(--text); }

.space-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}

/* Secondary customer info (nicknames, notes, ClickUp, search) is tucked
   behind clean flat toggle buttons instead of always being on screen —
   keeps the view calm, and matches a normal app's toolbar rather than a
   cluster of rounded AI-chat chips. */
.space-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.toolbar-btn {
  border: none;
  background: var(--fill);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
}

.toolbar-btn:hover { background: var(--fill-hover); color: var(--text); }

.toolbar-btn.active {
  color: var(--text);
  background: var(--fill-hover);
}

.aliases-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.aliases-label {
  font-size: 12px;
  color: var(--text-faint);
}

.aliases-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.alias-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 3px 6px 3px 11px;
  font-size: 12px;
}

.alias-chip button {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1;
  padding: 0 3px;
}

.alias-chip button:hover { color: var(--danger); }

.alias-add-btn {
  background: var(--fill);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: 12px;
  padding: 4px 11px;
}

.alias-add-btn:hover { background: var(--fill-hover); color: var(--text); }

.alias-add-form {
  display: flex;
  gap: 6px;
}

.alias-add-form input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 16px;
  background: var(--bg-elevated-2);
  color: var(--text);
  outline: none;
  min-width: 120px;
}

.alias-add-form input:focus { border-color: var(--border-strong); }

.alias-add-form button {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Context notes (customer profile) ---------- */

.context-notes-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.context-notes-label {
  font-size: 12px;
  color: var(--text-faint);
  flex: none;
  padding-top: 2px;
}

.context-notes-text {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  min-width: 140px;
  line-height: 1.4;
}

.context-notes-text.empty {
  color: var(--text-faint);
  font-style: italic;
}

.context-notes-edit-btn {
  background: var(--fill);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: 12px;
  padding: 3px 10px;
  flex: none;
}

.context-notes-edit-btn:hover { background: var(--fill-hover); color: var(--text); }

.context-notes-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.context-notes-form textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--bg-elevated-2);
  color: var(--text);
  outline: none;
  font-family: var(--sans);
}

.context-notes-form textarea:focus { border-color: var(--border-strong); }

.context-notes-form-actions {
  display: flex;
  gap: 8px;
}

.context-notes-form-actions button {
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
}

.context-notes-form-actions button[type="submit"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.context-notes-form-actions button[type="button"] {
  background: var(--fill);
  border: none;
  color: var(--text-muted);
}

.clickup-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 18px;
  min-height: 22px;
}

.clickup-row-label {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-muted);
}

.clickup-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-right: 7px;
  flex: none;
}

.clickup-row-action {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.clickup-row-action:hover { color: var(--text); }

.clickup-row-connect {
  background: var(--fill);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  text-decoration: none;
}

.clickup-row-connect:hover { background: var(--fill-hover); color: var(--text); }

.clickup-row-error { color: var(--danger); }

.clickup-picker-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.clickup-picker-form select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-size: 16px;
  background: var(--bg-elevated-2);
  color: var(--text);
  outline: none;
  max-width: 260px;
}

.clickup-picker-form select:focus { border-color: var(--border-strong); }

.clickup-picker-form button[type="submit"] {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
}

.clickup-picker-form button[type="submit"]:disabled { opacity: 0.6; pointer-events: none; }

.clickup-row-cancel {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12.5px;
  padding: 6px 4px;
}

.clickup-row-cancel:hover { color: var(--text); }

.weekly-summary-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 18px;
}

.weekly-summary-label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.weekly-summary-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  white-space: pre-line;
}

.weekly-summary-error { color: var(--danger); font-weight: 400; }

.weekly-summary-refresh-btn {
  border: none;
  background: var(--fill);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
}

.weekly-summary-refresh-btn:hover { background: var(--fill-hover); color: var(--text); }

.space-delete-row {
  margin-bottom: 18px;
}

.space-delete-row:empty { margin-bottom: 0; }

.space-delete-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.space-delete-btn:hover { color: var(--danger); }

.calendar-toggle {
  display: inline-block;
  background: var(--fill);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 7px 14px;
  margin-bottom: 18px;
}

.calendar-toggle:hover { background: var(--fill-hover); color: var(--text); }

.calendar-toggle.expanded {
  color: var(--text);
  background: var(--fill-hover);
}

.space-calendar {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 26px;
  background: var(--bg-elevated);
}

.space-calendar .calendar-header { margin-bottom: 16px; }
.space-calendar .calendar-title { font-size: 17px; }
.space-calendar .calendar-grid { margin-bottom: 4px; }
.space-calendar .calendar-day-panel { padding-top: 16px; margin-top: 16px; }

.area-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.area-tab {
  border: none;
  background: var(--fill);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 15px;
  font-size: 13px;
}

.area-tab:hover { background: var(--fill-hover); color: var(--text); }

.area-tab.active {
  color: var(--text);
  background: var(--fill-hover);
  font-weight: 500;
}

.area-tab-add {
  border-style: dashed;
  color: var(--text-faint);
}

.area-add-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.area-add-form input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 16px;
  background: var(--bg-elevated-2);
  color: var(--text);
  outline: none;
  min-width: 140px;
}

.area-add-form input:focus { border-color: var(--border-strong); }

.area-add-form button {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Done section ---------- */

.done-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  padding: 16px 4px;
  margin-top: 4px;
}

.done-toggle:hover { color: var(--text); }

#space-done-feed { margin-top: 4px; }

/* ---------- Calendar ---------- */

.calendar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

/* Calendar day view: same header rhythm as the calendar's own header (see
   .calendar-header above), just with a single back arrow instead of the
   month nav — this view takes over the whole screen in place of the
   calendar grid, so it needs its own way back rather than a close button. */
.calendar-day-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.calendar-title {
  flex: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.01em;
}

.cal-nav-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--fill);
  color: var(--text-muted);
  border-radius: 50%;
  font-size: 15px;
}

.cal-nav-btn:hover { color: var(--text); background: var(--fill-hover); }

.cal-today-btn {
  border: none;
  background: var(--fill);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
}

.cal-today-btn:hover { color: var(--text); background: var(--fill-hover); }

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.calendar-weekday {
  text-align: center;
  font-size: 11.5px;
  font-family: var(--display);
  color: var(--text-faint);
  padding: 4px 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 26px;
}

.calendar-cell {
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 4px;
}

.calendar-cell:hover:not(.outside) { border-color: var(--border-strong); }

.calendar-cell.outside {
  background: transparent;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.calendar-cell-num {
  font-family: var(--display);
  font-size: 13.5px;
}

.calendar-cell.today {
  border-color: var(--border-strong);
}

.calendar-cell.today .calendar-cell-num { color: var(--text); font-weight: 700; }

.calendar-cell.selected {
  background: var(--accent);
  border-color: var(--accent);
}

.calendar-cell.selected .calendar-cell-num { color: var(--accent-ink); }

.calendar-cell-dot {
  font-size: 10px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: 8px;
  padding: 1px 6px;
  line-height: 1.4;
}

.calendar-cell.selected .calendar-cell-dot {
  color: var(--accent-ink);
  background: #fff;
}

.calendar-cell-dot.done {
  color: var(--text-faint);
  background: var(--bg-elevated-2);
}

.calendar-day-panel {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

/* Kalender nav view: was a white card floating inside the otherwise all-dark
   app (a leftover from before the ClickUp pass) — now just uses the same
   dark surfaces as the rest of the app, like the small per-customer mini
   calendar already did, so nothing looks bolted on. */
#calendar-view {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
}

#calendar-view .calendar-grid { gap: 5px; }

#calendar-view .calendar-cell { min-height: 36px; }

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .shell {
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px 120px;
  }

  .topbar {
    margin-bottom: 26px;
    padding-bottom: 14px;
    gap: 10px;
  }

  .topbar-left { gap: 14px; }

  .wordmark { font-size: 19px; }

  .top-nav { gap: 2px; }

  .nav-link { padding: 6px 10px; font-size: 12.5px; }

  .topbar-user { font-size: 12px; gap: 10px; }

  .capture { padding: 14px 16px; }

  .space-title { font-size: 22px; margin-bottom: 18px; }

  .calendar-title { font-size: 18px; }

  .calendar-cell { min-height: 38px; }

  .calendar-cell-num { font-size: 12px; }

  .calendar-cell-dot { font-size: 9px; padding: 1px 5px; }

  .entry {
    padding: 8px 2px;
    flex-wrap: wrap;
  }

  /* The buttons row (Erledigen/ClickUp/Bearbeiten/Löschen) doesn't shrink
     (flex: none), so on narrow phones it used to squeeze the text column
     down to almost nothing, forcing the entry text to wrap one character
     per line. Wrapping the row and giving the actions their own full-width
     line below fixes that instead of fighting for the same row. */
  .entry-actions {
    opacity: 1;
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-top: 6px;
  }

  .filters-row { gap: 8px; }

  .toggle-chip, .area-tab { padding: 7px 12px; font-size: 12px; }

  .clickup-picker-form select { max-width: 100%; flex: 1 1 100%; }

  .clickup-inline-form { flex-wrap: wrap; }
  .clickup-inline-form select { max-width: 130px; }
}

@media (max-width: 380px) {
  .calendar-cell-dot { display: none; }
}

/* ============================================================
   Steuerrechner (tx-*) & Kunden-Übersicht (ku-*)
   Reuses Denkzettel's own tokens (--bg-elevated, --accent, --border, …);
   Sascha and Lino each get their own small identity color here (blue/green)
   to tell their figures apart at a glance — unrelated to the app's own
   (now neutral black/white) --accent.
   ============================================================ */
:root {
  --tx-l: #35b788;
  --tx-l-bg: rgba(53, 183, 136, 0.14);
  --tx-l-text: #7edcb8;
  --tx-s-text: #9fb8ff;
}

.tx-slabel, .ku-hint { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .75rem; margin-top: 1.5rem; }
.tx-slabel.tx-nt { margin-top: 0; }
.ku-hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; margin: 0; }

.tx-month-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 12px 16px; margin: 1rem 0 1.25rem; }
.tx-month-status { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 20px; background: var(--bg-elevated-2); color: var(--text-faint); }
.tx-month-status.tx-saved { background: rgba(62, 207, 142, 0.14); color: #3ecf8e; }
.tx-month-status.tx-unsaved { background: var(--warning-soft); color: var(--warning); }

.tx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }
.tx-tab { padding: 10px 4px; margin-right: 18px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: none; color: var(--text-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tx-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tx-tab:hover { color: var(--text-muted); }
.tx-page { display: none; }
.tx-page.active { display: block; }

.tx-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; }
.tx-card.tx-s-top { border-top: 3px solid var(--accent); }
.tx-card.tx-l-top { border-top: 3px solid var(--tx-l); }
.tx-card-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
.tx-person-head { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); font-size: 15px; }
.tx-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tx-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tx-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tx-pg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1rem; }
@media (max-width: 640px) { .tx-g2, .tx-g3, .tx-g4, .tx-pg { grid-template-columns: 1fr; } }

.tx-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.tx-field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.tx-iw { position: relative; }
.tx-iw .tx-pfx { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-faint); pointer-events: none; }
.tx-iw input, .tx-select { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated-2); color: var(--text); font-size: 14px; height: 38px; padding: 0 10px 0 28px; outline: none; font-family: inherit; appearance: none; -moz-appearance: textfield; }
.tx-select { padding-left: 10px; height: 36px; }
.tx-iw input:focus, .tx-select:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--neutral-soft); }
.tx-iw input::-webkit-outer-spin-button, .tx-iw input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tx-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; margin-top: 4px; }
.tx-checkbox-label input { width: auto; height: auto; margin: 0; }

.tx-add-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 4px 0; font-family: inherit; font-weight: 500; }
.tx-add-btn:hover { text-decoration: underline; }
.tx-income-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tx-income-row .tx-desc-inp { flex: 1.4; height: 34px; font-size: 13px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated-2); color: var(--text); outline: none; font-family: inherit; }
.tx-income-row .tx-iw { flex: 1; }
.tx-income-row input[type=number] { height: 34px; font-size: 13px; }
.tx-rm-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--fill); color: var(--text-faint); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tx-rm-btn:hover { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.tx-rr { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font-size: 14px; gap: 1rem; }
.tx-rl { color: var(--text-muted); }
.tx-rv { font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-rv.tx-red { color: var(--danger); }
.tx-rv.tx-green { color: #3ecf8e; }
.tx-rsep { border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.tx-rr.tx-total .tx-rl { font-weight: 600; color: var(--text); }
.tx-rr.tx-total .tx-rv { font-size: 15px; }

.tx-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; letter-spacing: .5px; }
.tx-av-s { background: var(--accent-soft); color: var(--tx-s-text); }
.tx-av-l { background: var(--tx-l-bg); color: var(--tx-l-text); }
.tx-av-sm { width: 26px; height: 26px; font-size: 10px; }

.tx-tile { background: var(--bg-elevated-2); border-radius: var(--radius-sm); padding: 1rem; border: 1px solid var(--border); }
.tx-tile-label { font-size: 11px; color: var(--text-faint); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.tx-tile-val { font-size: 22px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.tx-tile-val.tx-red { color: var(--danger); }

.tx-tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; }
.tx-tag-amber { background: var(--warning-soft); color: var(--warning); }
.tx-tag-blue { background: var(--accent-soft); color: var(--tx-s-text); }
.tx-tag-green { background: var(--tx-l-bg); color: var(--tx-l-text); }

.tx-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.tx-ruck-box { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1rem; }
.tx-ruck-box h2 { font-size: 15px; font-weight: 600; margin-bottom: 1.25rem; color: var(--text); }
.tx-hint { font-size: 12px; color: var(--text-faint); line-height: 1.6; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.tx-info-box { background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; }

.tx-month-entry { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 10px 4px; margin-bottom: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tx-month-entry:last-child { border-bottom: none; }
.tx-month-entry:hover { background: var(--fill-hover); }
.tx-me-date { font-size: 13px; font-weight: 600; color: var(--text); min-width: 90px; }
.tx-me-vals { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.tx-me-item { font-size: 12px; color: var(--text-muted); }
.tx-me-item span { font-weight: 600; color: var(--text); }

.tx-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tx-bar-label { min-width: 32px; color: var(--text-muted); font-size: 12px; }
.tx-bar-track { flex: 1; height: 10px; background: var(--bg-elevated-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.tx-bar-fill { height: 100%; border-radius: 99px; transition: width .5s ease; }
.tx-bar-val { min-width: 80px; text-align: right; font-weight: 600; color: var(--text); font-size: 12px; }
.tx-year-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1rem; }
.tx-year-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 8px; color: var(--text); }

/* Kunden overview */
.ku-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 1rem 0; }
/* Flat list rows, not boxed cards — ClickUp's customer/list rows are a
   plain divider between rows plus a subtle hover fill, never their own
   bordered box. */
.ku-list { display: flex; flex-direction: column; }
.ku-card { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 10px 4px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ku-list .ku-card:last-child { border-bottom: none; }
.ku-card:hover { background: var(--fill-hover); }
.ku-name { font-size: 14px; font-weight: 600; flex: 1; color: var(--text); }
.ku-contact { font-size: 12px; color: var(--text-faint); }
.ku-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.ku-pill-open { background: var(--fill-hover); color: var(--text-muted); }
.ku-pill-none { background: var(--bg-elevated-2); color: var(--text-faint); border: 1px solid var(--border-strong); }

.ku-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 1rem; }
.ku-modal-overlay.hidden { display: none; }
.ku-modal { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border-strong); }
.ku-modal h2 { font-size: 16px; font-weight: 600; margin-bottom: .25rem; color: var(--text); }
.ku-modal-meta { font-size: 12px; color: var(--text-faint); margin-bottom: 1rem; }
.ku-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ku-ai-box { background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--text); margin-bottom: 12px; white-space: pre-wrap; }
.ku-activity-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ku-activity-item:last-child { border-bottom: none; }
.ku-activity-meta { font-size: 11px; color: var(--text-faint); margin-bottom: 3px; display: flex; gap: 6px; align-items: center; }
.ku-activity-text { font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }

/* Per-Reporting download/delete icons (rpRenderModal in app.js) — a single
   Reporting can now be pulled out on its own or removed, instead of only
   ever exporting/keeping the whole filtered range at once. */
.rp-report-actions { flex: none; display: flex; gap: 2px; align-self: flex-start; }

.rp-report-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.rp-report-actions button:hover { background: var(--fill); color: var(--text); }

.rp-report-actions .rp-report-delete-btn:hover { color: var(--danger); background: var(--danger-soft); }
.ku-tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; margin-right: 4px; display: inline-block; }
.ku-tag-grey { background: var(--bg-elevated-2); color: var(--text-faint); border: 1px solid var(--border-strong); }
.ku-tag-green { background: rgba(62, 207, 142, 0.14); color: #3ecf8e; }
.ku-tag-amber { background: var(--warning-soft); color: var(--warning); }
.ku-tag-blue { background: var(--bg-elevated-2); color: var(--text-muted); border: 1px solid var(--border-strong); }

/* ---------- Planung: Intern/Extern segmented tabs inside the customer modal ---------- */

.pl-tabs { display: flex; gap: 4px; background: var(--bg-elevated-2); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 1rem; }
.pl-tab { flex: 1; border: none; background: none; color: var(--text-faint); font-size: 12.5px; font-weight: 600; padding: 7px 10px; border-radius: calc(var(--radius-sm) - 2px); }
.pl-tab.active { background: var(--bg-elevated); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

.pl-plan-item { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.pl-plan-item:last-child { border-bottom: none; }
.pl-plan-meta { font-size: 11px; color: var(--text-faint); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl-plan-text { font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.pl-plan-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-plan-actions button {
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: var(--fill);
  color: var(--text-muted);
}
.pl-plan-actions button:hover { color: var(--text); background: var(--fill-hover); }
.pl-plan-actions button.pl-approve-btn { color: #05060a; background: #3ecf8e; font-weight: 600; }
.pl-plan-actions button.pl-approve-btn:hover { opacity: 0.9; }
.pl-plan-actions button.pl-danger-btn { color: var(--danger); }
.pl-plan-actions button.pl-danger-btn:hover { background: var(--danger-soft); }

@media (max-width: 640px) {
  .tx-month-banner { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Left sidebar (extends the full-screen .menu-dropdown drawer):
   direct nav items, an expandable "Kunden" section (Privat + Kunden
   spaces, plus a link to the merged Kunden-Übersicht), a "Reportings"
   nav item, and a bottom-pinned footer with the user name + an
   expandable "Einstellungen" section (Erinnerungen / Claude verbinden /
   Wechseln, moved out of the old topbar gear menu).
   ============================================================ */

.menu-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-nav-item,
.menu-subnav-item {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  padding: 13px 10px;
  border-radius: var(--radius-md);
}

.menu-nav-item:hover,
.menu-subnav-item:hover { background: var(--fill); }

.menu-nav-item.active {
  color: var(--text);
  background: var(--fill-hover);
}

.menu-subnav-item {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 10px;
}

.menu-subnav-item.active { color: var(--accent-2); }

.menu-section { margin: 4px 0; }

.menu-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  padding: 13px 10px;
  border-radius: var(--radius-md);
}

.menu-section-header:hover { background: var(--fill); }

.menu-section-chevron {
  color: var(--text-faint);
  font-size: 15px;
  transition: transform 0.15s ease;
  flex: none;
}

.menu-section-header.expanded .menu-section-chevron { transform: rotate(90deg); }

.menu-section-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px 10px 10px;
}

.menu-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 6px 2px;
}

.menu-group-label:first-child { padding-top: 2px; }

.menu-empty-hint {
  font-size: 12.5px;
  color: var(--text-faint);
  padding: 6px 6px 2px;
}

.menu-footer {
  flex: none;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.menu-footer-user-row {
  padding: 6px 10px 10px;
}

.menu-footer-user-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
}

.menu-footer .menu-section-body button {
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  text-decoration: none !important;
  text-align: left;
}

/* ---------- Entry-row actions dropdown (Erledigen / → ClickUp /
   → Notiz|Aufgabe / Bearbeiten / Löschen consolidated behind a single
   "⋯" trigger instead of a whole row of buttons) ---------- */

.entry-menu-wrap {
  position: relative;
  flex: none;
  align-self: flex-start;
}

.entry-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

.entry-menu-btn:hover,
.entry-menu-btn.active { background: var(--fill); color: var(--text); }

.entry-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 175px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.entry-menu-dropdown button {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
}

.entry-menu-dropdown button:hover { background: var(--fill); }

.entry-menu-dropdown button.entry-menu-danger { color: var(--danger); }

.entry-menu-dropdown button.entry-menu-danger:hover { background: var(--danger-soft); }

.entry-inline-panel { flex: 1 1 100%; margin-top: 8px; }

.entry-inline-panel.hidden { display: none; }

/* ---------- Space detail "⋯ Optionen" dropdown (Spitznamen / Notizen /
   ClickUp / Wochenrückblick / Suchen / Kunde löschen, consolidated
   behind one trigger instead of five separate toolbar buttons) --------- */

.space-options-wrap { position: relative; }

.space-options-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.space-options-dropdown .toolbar-btn {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: none;
}

.space-options-dropdown .toolbar-btn:hover { background: var(--fill); }

.space-options-dropdown .toolbar-btn.active { background: var(--fill); color: var(--text); }

.space-options-dropdown #space-delete-row:not(:empty) {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ---------- Reportings (rp-*): reuses the ku-* customer list/modal
   look, adds a date-range row and a PDF-export button. ---------- */

/* Quick-add box: lets Lino/Sascha jot a single Reporting/Planung entry
   directly in the app (e.g. "Popup bei Unico angepasst") instead of going
   through Claude/MCP every time — see reports.mts / plans.mts. */
.rp-quickadd, .pl-quickadd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated-2);
  padding: 10px;
  margin-bottom: 1rem;
}

.rp-quickadd-row, .pl-quickadd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.rp-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.rp-date-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated-2);
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 8px;
  font-family: var(--sans);
}

.rp-date-input:focus { border-color: var(--border-strong); outline: none; }

.rp-range-sep { color: var(--text-faint); font-size: 12px; }

@media (max-width: 640px) {
  .menu-nav-item, .menu-subnav-item, .menu-section-header { font-size: 14.5px; }
  /* No unconditional "left: auto; right: 0" here anymore — that used to force
     the dropdown to hug the *wrap's* right edge on every phone-width screen,
     regardless of where the "⋯ Optionen" button actually sits. Since the
     button lives near the left edge of the toolbar, that flipped the ~200px
     dropdown mostly off-screen to the left (its right edge pinned to a
     ~140px-wide button, its left edge landing at a negative x). The JS
     open-handler below already does a proper per-open overflow check via
     getBoundingClientRect() and only flips to right-aligned when the
     dropdown would actually overflow the right edge — that's the one source
     of truth now, for every viewport width, not just desktop. */
  .rp-range-row { gap: 6px; }
}