/* ═══════════════════════════════════════════════════════════════
   BaxxusOS — App Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Akzent */
  --accent: #0D9488;
  --accent-hover: #0B7D72;

  /* Shell (dunkel) */
  --dock-bg: #1A2435;
  --sidebar-bg: #1E2A3B;

  /* Content (hell) */
  --content-bg: #F0F2F5;
  --card-bg: #FFFFFF;
  --card-hover: #F4F5F8;

  /* Text */
  --text-primary: #3A3F4A;
  --text-secondary: #626874;
  --text-muted: #8E939E;
  --text-very-muted: #B2B7BF;

  /* Semantisch */
  --success: #0D9488;
  --danger: #E5534B;
  --warning: #D97706;

  /* Shell-Text */
  --shell-text: rgba(255,255,255,.72);
  --shell-text-active: rgba(255,255,255,.92);
  --shell-text-muted: rgba(255,255,255,.45);
  --shell-border: rgba(255,255,255,.07);
  --shell-hover: rgba(255,255,255,.06);
  --dock-active-bg: rgba(13,148,136,.22);

  /* Maße */
  --dock-w: 52px;
  --sidebar-w: 220px;
  --topbar-h: 48px;

  /* Radien */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 5px;

  /* Schatten */
  --shadow-subtle: 0 1px 2px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.06);
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);

  /* Topbar-Border */
  --topbar-border: rgba(60,66,80,.10);
}

/* ─── Base ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--dock-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, .mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ─── Utility-Klassen ───────────────────────────────────────── */
.hidden { display: none !important; }
.visible { display: block !important; }

/* ─── Extracted Utility Classes (Phase 03) ──────────────────── */

/* Icon-Größen */
.icon-sm { width: 14px; height: 14px; }
.icon-xs { width: 12px; height: 12px; }
.icon-xxs { width: 11px; height: 11px; }

/* Flex-Utilities */
.flex-1 { flex: 1 1 0%; min-width: 0; }
.flex-row { display: flex; align-items: center; gap: 8px; }

/* Spacing */
.mb-section { margin-bottom: 16px; }
.mb-group { margin-bottom: 12px; }

/* Text */
.text-secondary { color: var(--text-secondary); }

/* Form-Input */
.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--card-bg);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.08);
}

/* Cell-Padding */
.pad-cell { padding: 10px 14px; }

/* ─── Splash Screen ─────────────────────────────────────────── */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--dock-bg);
  opacity: 0;
  animation: splash-fade-in 300ms ease forwards;
}

#splash-screen.fade-out {
  animation: splash-fade-out 200ms ease forwards;
}

#splash-screen .splash-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
}

#splash-screen .splash-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes splash-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes splash-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

/* ─── App Shell Layout ──────────────────────────────────────── */
#app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ─── Dock ──────────────────────────────────────────────────── */
#dock {
  width: var(--dock-w);
  min-width: var(--dock-w);
  height: 100vh;
  background: var(--dock-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  z-index: 50;
}

.dock-logo {
  width: 28px;
  height: 28px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}

.dock-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 0 6px;
}

.dock-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--shell-text);
  transition: background 120ms, color 120ms;
}

.dock-item:hover {
  background: var(--shell-hover);
}

.dock-item.active {
  background: var(--dock-active-bg);
  color: var(--accent);
}

.dock-item.loading svg {
  animation: dock-pulse .6s ease-in-out infinite;
}

@keyframes dock-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.dock-item svg {
  width: 18px;
  height: 18px;
}

.dock-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  width: 100%;
}

.dock-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shell-text);
  font-size: 11px;
  font-weight: 600;
  margin-top: 8px;
}

/* ─── Sidebar ───────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--shell-border);
}

.sec-header {
  padding: 16px 16px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--shell-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.sec-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
}

.sec-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--shell-text);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  user-select: none;
}

.sec-nav-item:hover {
  background: var(--shell-hover);
}

.sec-nav-item.active {
  color: var(--shell-text-active);
  background: rgba(255,255,255,.08);
}

.sec-nav-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sec-divider {
  height: 1px;
  background: var(--shell-border);
  margin: 8px 8px;
}

/* ─── Main Content ──────────────────────────────────────────── */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

/* ─── Topbar ────────────────────────────────────────────────── */
#topbar {
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

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

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.topbar-breadcrumb {
  font-size: 12px;
  color: var(--text-muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Content Area ──────────────────────────────────────────── */
#content-area {
  flex: 1;
  overflow-y: auto;
  background: var(--content-bg);
  padding: 20px;
}

.view-container {
  display: none;
  height: 100%;
}

.view-container.active {
  display: block;
}

/* ─── Mobile Bottom Nav ─────────────────────────────────────── */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--card-bg);
  border-top: 1px solid var(--topbar-border);
  z-index: 100;
}

.mobile-nav-items {
  display: flex;
  height: 100%;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: var(--text-muted);
  position: relative;
  min-width: 44px;
  min-height: 44px;
}

.mobile-nav-item.active {
  color: var(--accent);
}

.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}

.mobile-nav-item svg {
  width: 18px;
  height: 18px;
}

.mobile-nav-label {
  font-size: 9px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 0 2px;
}

/* ─── Scrollbar (Shell — dunkel) ────────────────────────────── */
#sidebar ::-webkit-scrollbar {
  width: 4px;
}
#sidebar ::-webkit-scrollbar-track {
  background: transparent;
}
#sidebar ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 2px;
}
#sidebar ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.20);
}

/* ─── Scrollbar (Content — hell) ────────────────────────────── */
#content-area::-webkit-scrollbar {
  width: 6px;
}
#content-area::-webkit-scrollbar-track {
  background: transparent;
}
#content-area::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 3px;
}
#content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.20);
}

/* ─── Skeleton Loader ───────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #e8eaed 25%, #f0f2f5 50%, #e8eaed 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, opacity 120ms;
  user-select: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: rgba(0,0,0,.05);
}

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

.btn svg {
  width: 14px;
  height: 14px;
}

/* ─── Toast-Container ─────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
}

/* ─── Table Mobile (Card-View + Scroll) ───────────────────── */
.tbl-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--card-bg, #fff) 30%, transparent),
    linear-gradient(to right, transparent, var(--card-bg, #fff) 70%),
    linear-gradient(to right, rgba(0,0,0,.08), transparent),
    linear-gradient(to left, rgba(0,0,0,.08), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
}

.tbl-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tbl-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tbl-card-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.tbl-card-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

.tbl-card-value {
  color: var(--text-primary);
  text-align: right;
}

.tbl-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 2px;
}

/* ─── Mobile Sidebar Overlay ────────────────────────────────── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 80;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #dock {
    display: none;
  }

  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    width: 260px;
    min-width: 260px;
  }

  #sidebar.open {
    transform: translateX(0);
  }

  #sidebar-overlay.open {
    display: block;
  }

  #mobile-nav {
    display: block;
  }

  #content-area {
    padding-bottom: 64px; /* Platz für Mobile Nav */
  }

  #main-content {
    width: 100vw;
  }

  /* Dashboard: 2-Spalten-Grid → 1 Spalte auf Mobile, kompakteres Spacing */
  .dash-widgets-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .dash-widgets-grid > div {
    gap: 16px !important;
  }

  /* Readlist: kein 2-Spalten auf Mobile */
  .rl-columns {
    flex-direction: column;
    overflow-y: auto;
  }
  .rl-col-bookmarks,
  .rl-col-videos {
    overflow-y: visible;
  }
  .rl-col-videos {
    display: none;
  }

  /* KI-Bibliothek: Prompt/Notizen untereinander auf Mobile */
  .ai-wb-prompt-notes-split {
    flex-direction: column;
    overflow-y: auto;
  }
  .ai-wb-prompt-notes-split > div:last-child {
    border-left: none;
    border-top: 1px solid rgba(0,0,0,.06);
  }

  /* Toast-Container: zentriert über der Bottom-Bar */
  .toast-container {
    bottom: 72px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    width: max-content;
    max-width: 90vw;
  }

  /* KI-Bibliothek: Workbench-Layout → vertikal auf Mobile (MOD-06) */
  .ai-wb-layout {
    flex-direction: column !important;
    height: auto !important;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
  }
  .ai-wb-prompt-list {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 35vh;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .ai-wb-launcher {
    min-height: 50vh;
  }
  .ai-wb-copy-btn {
    color: var(--text-muted) !important;
  }
  .ai-wb-add-form > div {
    flex-wrap: wrap;
  }

  /* Topbar kompakt auf Mobile (SHELL-02) */
  #topbar {
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
  }
  .topbar-title {
    font-size: 13px;
  }
  .topbar-breadcrumb {
    font-size: 11px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions {
    gap: 2px;
  }
  .topbar-actions .btn {
    padding: 4px;
    min-width: 32px;
    min-height: 32px;
  }

  /* Notes: ToC und Print auf Mobile ausblenden (D-01) */
  #ni-toc-panel { display: none !important; }
  #ni-toc-toggle { display: none; }
  #ni-print-btn { display: none; }

  /* Notes: Editor-Header kompakter auf Mobile */
  #notes-view .ni-editor-header {
    padding: 8px 12px;
    gap: 6px;
  }
  #notes-view .ni-editor-header input[type="text"] {
    font-size: 14px;
  }

  /* Notes: Quill-Toolbar Touch-optimiert (D-02) */
  #notes-view .ql-toolbar.ql-snow {
    padding: 4px 8px;
  }
  #notes-view .ql-toolbar .ql-formats {
    margin-right: 4px;
  }
  #notes-view .ql-toolbar button {
    width: 28px;
    height: 28px;
  }
  #notes-view .ql-toolbar .ql-picker-label {
    padding: 4px 8px;
  }

  /* Notes: Editor fullscreen auf Mobile — weniger Padding */
  #notes-view {
    padding: 0;
  }
  #notes-view .ql-container.ql-snow {
    border: none;
  }

  /* Todos: Delete-Button immer sichtbar auf Mobile (kein Hover) */
  .todo-delete-btn {
    opacity: 1 !important;
  }

  /* Todos: Add-Form responsive auf Mobile */
  #todo-add-form {
    flex-wrap: wrap;
  }
  #todo-add-text {
    width: 100%;
    flex: none;
  }
  #todo-add-form .btn {
    flex: 1;
  }

  /* Todos: Fullscreen auf Mobile — kein extra Padding */
  #todos-view .card {
    border-radius: 0;
    margin: 0;
  }

  /* Finance: Grid-Layouts → 1 Spalte auf Mobile (MOD-03) */
  .fin-dash-main-grid {
    grid-template-columns: 1fr !important;
  }
  .fin-dash-charts-grid {
    grid-template-columns: 1fr !important;
  }
  .fin-loans-grid {
    grid-template-columns: 1fr !important;
  }
  .fin-accounts-grid {
    grid-template-columns: 1fr !important;
  }
  .fin-realestate-grid {
    grid-template-columns: 1fr !important;
  }
  .fin-nk-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  }
  .fin-income-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }

  /* Finance: KPI-Werte Text-Overflow Safety (D-01) */
  .bx-kpi-value-lg {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─── KI-Bibliothek ────────────────────────────────────────── */
.ai-lib-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ai-lib-dropdown-panel { display: none; }
.ai-lib-dropdown.open .ai-lib-dropdown-panel { display: block; }

/* Notiz-Editor (kompakter Quill) */
#ai-lib-note-editor .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 4px 8px;
}
#ai-lib-note-editor .ql-toolbar .ql-formats { margin-right: 8px; }
#ai-lib-note-editor .ql-container.ql-snow { border: none; }
#ai-lib-note-editor .ql-editor {
  min-height: 120px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
}

/* ─── Quill Editor Overrides (für Phase 4) ──────────────────── */
.ql-editor {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}

.ql-editor blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  color: var(--text-secondary);
  margin: 8px 0;
}

.ql-editor pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 12px;
  border-radius: var(--radius);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  overflow-x: auto;
}

.ql-editor hr {
  border: none;
  border-top: 2px solid rgba(0,0,0,.10);
  margin: 16px 0;
}

.ql-editor code {
  background: rgba(0,0,0,.06);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* ─── Spinner ───────────────────────────────────────────────── */
.spinner {
  border: 2px solid rgba(0,0,0,.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.spinner-sm { width: 16px; height: 16px; }
.spinner-md { width: 24px; height: 24px; }
.spinner-lg { width: 40px; height: 40px; }

/* ─── Skeleton (Shell / dunkel) ─────────────────────────────── */
.skeleton-dark {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}

/* ─── Focus ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Sidebar Mode Buttons ──────────────────────────────────── */
.ni-mode-btn {
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--shell-text-muted);
  display: flex;
  align-items: center;
}
.ni-mode-btn:hover {
  background: var(--shell-hover);
}
.ni-mode-btn.active {
  color: var(--accent);
  background: var(--dock-active-bg);
}
.ni-mode-btn svg {
  width: 14px;
  height: 14px;
}

/* ─── Login Container ───────────────────────────────────────── */
#login-container {
  position: fixed;
  inset: 0;
  background: var(--content-bg);
  z-index: 100;
  overflow-y: auto;
}

/* ─── Print ─────────────────────────────────────────────────── */
/* ─── Refactoring Plan D: wiederverwendbare Utility-Klassen ──── */

.bx-input {
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--card-bg);
}
.bx-input:focus {
  outline: none;
  border-color: var(--accent);
}

.bx-mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.bx-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bx-muted-sm {
  font-size: 11px;
  color: var(--text-muted);
}

.bx-kpi-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.bx-kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.bx-kpi-value-lg {
  font-size: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.bx-kpi-value-md {
  font-size: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.bx-kpi-value-sm {
  font-size: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.bx-th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bx-th-sm {
  text-align: left;
  padding: 4px 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bx-form-label {
  font-size: 11px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

/* ─── Print ─────────────────────────────────────────────────── */
@media print {
  body * { visibility: hidden; }
  #ni-editor,
  #ni-editor * {
    visibility: visible;
  }
  #ni-editor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .ql-toolbar { display: none !important; }
  .ql-editor {
    padding: 0;
    font-size: 11pt;
    line-height: 1.6;
    color: #000;
  }
  .ql-editor pre {
    background: #f0f0f0;
    color: #333;
  }
  .ql-editor img {
    max-width: 100%;
    height: auto;
  }

  /* Nebenkosten Druckansicht */
  #nk-print-area,
  #nk-print-area * {
    visibility: visible;
  }
  #nk-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block !important;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #1a1a1a;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #nk-print-area table { border-collapse: collapse; width: 100%; }
  @page { margin: 18mm 15mm; }
  #nk-print-area .nk-print-gutschrift { color: #16a34a; }
  #nk-print-area .nk-print-nachzahlung { color: #dc2626; }
}

@media screen {
  #nk-print-area { display: none !important; }
}

/* ─── Nebenkosten ───────────────────────────────────── */
.nk-row-actions { opacity: 0; transition: opacity 100ms; }
tr:hover .nk-row-actions { opacity: 1; }

/* ─── Readlist ──────────────────────────────────────── */
.rl-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:none; border-radius:var(--radius);
  background:transparent; color:var(--text-very-muted);
  cursor:pointer; transition:color 120ms, background 120ms;
}
.rl-icon-btn:hover { color:var(--text-secondary); background:rgba(0,0,0,.04); }
a.rl-title-link:hover { color:var(--accent); }

/* Kategorie-Dot */
.rl-cat-dot {
  display:inline-block; width:8px; height:8px;
  border-radius:50%; flex-shrink:0;
}

/* Farbpalette-Kreis (Sidebar, dunkel) */
.rl-color-circle {
  width:16px; height:16px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:border-color 120ms;
}
.rl-color-circle.active { border-color:var(--shell-text-active); }

/* Farbpalette-Kreis (Editor, hell) */
.rl-color-circle-light {
  width:16px; height:16px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:border-color 120ms;
}
.rl-color-circle-light.active { border-color:var(--text-primary); }

/* Icon-Grid-Zelle (Sidebar, dunkel) */
.rl-icon-cell {
  width:28px; height:28px; display:flex; align-items:center;
  justify-content:center; border-radius:var(--radius); cursor:pointer;
  color:var(--shell-text); transition:background 120ms;
}
.rl-icon-cell:hover { background:var(--shell-hover); }
.rl-icon-cell.active { background:var(--dock-active-bg); color:var(--accent); }

/* Icon-Grid-Zelle (Editor, hell) */
.rl-icon-cell-light {
  width:28px; height:28px; display:flex; align-items:center;
  justify-content:center; border-radius:var(--radius); cursor:pointer;
  color:var(--text-secondary); transition:background 120ms;
}
.rl-icon-cell-light:hover { background:rgba(0,0,0,.05); }
.rl-icon-cell-light.active { background:rgba(13,148,136,.12); color:var(--accent); }

/* ─── Readlist: 2-Spalten-Layout ─────────────────────────── */
.rl-columns {
  display: flex;
  gap: 20px;
  padding: 16px 20px;
  height: 100%;
  overflow: hidden;
}

.rl-col-bookmarks {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

.rl-col-videos {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

.rl-col-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Video-Panel */
.rl-video-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  font-size: 12px;
}

.rl-featured iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 5px;
  background: #000;
}

.rl-featured-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
  gap: 8px;
}

.rl-featured-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.rl-featured-title:hover { color: var(--accent); }

.rl-featured-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.rl-vid-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  border: none;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

/* Playlist */
.rl-playlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rl-playlist-item {
  display: flex;
  gap: 10px;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 100ms;
}

.rl-playlist-item:hover {
  background: var(--hover-bg);
}

.rl-playlist-item.active {
  border-left-color: #0D9488;
  background: rgba(13,148,136,.05);
}

.rl-playlist-thumb {
  width: 120px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  background: #1a1a1a;
}

.rl-playlist-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 4px;
}

.rl-playlist-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.rl-playlist-status {
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Note-Links im Editor */
#ni-editor a[href^="#note:"] {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
  cursor: pointer;
}
#ni-editor a[href^="#note:"]:hover {
  border-bottom-style: solid;
}

/* ─── Finance & Table: Hover-Actions (CSS-only) ──────────── */
.fin-row-actions { opacity: 0; transition: opacity 120ms; }
.fin-row:hover .fin-row-actions,
.fin-bank-header:hover .fin-row-actions { opacity: 1; }
.fin-row:hover { background: var(--card-hover); }

.tbl-row-actions { opacity: 0; transition: opacity 120ms; }
.tbl-row:hover .tbl-row-actions { opacity: 1; }
.tbl-row:hover { background: #F4F5F8; }

/* ─── AI-Library Editor ─────────────────────────────────────── */
.ai-ed-icon-btn:hover { border-color: rgba(0,0,0,.12) !important; background: rgba(0,0,0,.02) !important; }
.ai-ed-del-btn:hover { border-color: var(--danger) !important; color: var(--danger) !important; background: rgba(229,83,75,.04) !important; }
.ai-ed-save-btn:hover { background: var(--accent-hover) !important; box-shadow: 0 2px 6px rgba(13,148,136,.3) !important; }
.ai-ed-focus-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(13,148,136,.06) !important; }
#ai-lib-title:focus { border-bottom-color: var(--accent) !important; }

/* ─── Dashboard Cards ────────────────────────────────────────── */
.dash-summary-card:hover,
.dash-todo-card:hover,
.dash-pinned-card:hover,
.dash-readlist-card:hover,
.dash-ai-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); transition: all 120ms; }

/* ─── Vault ────────────────────────────────────────────────────── */

/* Layout */
.vault-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--content-bg);
}
.vault-editor-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* File Header Bar */
.vault-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--card-bg);
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex-shrink: 0;
}
.vault-filepath {
  font-size: 11px;
  color: var(--text-very-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}
.vault-save-status {
  font-size: 10px;
  color: var(--text-very-muted);
  white-space: nowrap;
}
.vault-toolbar-actions {
  display: flex;
  gap: 2px;
}
.vault-toolbar-actions .btn {
  color: var(--text-muted);
}
.vault-toolbar-actions .btn:hover {
  color: var(--text-primary);
  background: rgba(0,0,0,.04);
}
#vault-editor-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--card-bg);
}

/* Empty State */
.vault-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--content-bg);
}
.vault-empty-state svg { color: var(--text-very-muted) !important; }
.vault-empty-state p { color: var(--text-muted); }

/* ─── Vault Sidebar (dunkle Shell) ─────────────────────────────── */
.vault-tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: var(--radius);
  font-size: 11.5px;
  color: var(--shell-text);
  user-select: none;
  transition: background 120ms, color 120ms;
}
.vault-tree-item:hover {
  background: var(--shell-hover);
  color: var(--shell-text-active);
}
.vault-tree-item.active {
  background: var(--dock-active-bg);
  color: #fff;
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.vault-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.vault-tree-count {
  font-size: 9px;
  color: var(--shell-text-muted);
  margin-left: auto;
  flex-shrink: 0;
}
.vault-search-snippet {
  font-size: 10px;
  color: var(--shell-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* ─── Backlinks & Tags Side Panel (helle Content-Area) ─────────── */
.vault-backlinks-panel {
  width: 220px;
  background: var(--card-bg);
  border-left: 1px solid rgba(0,0,0,.06);
  overflow-y: auto;
  padding: 16px;
  flex-shrink: 0;
}
.vault-backlinks-title,
.vault-tags-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-very-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 8px;
}
.vault-backlink-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 120ms;
}
.vault-backlink-item:hover {
  background: var(--card-hover);
  color: var(--accent);
}
.vault-backlink-empty {
  font-size: 10px;
  color: var(--text-very-muted);
  font-style: italic;
}

/* ─── Wikilinks & Tags (Inline Rendering) ──────────────────────── */
.vault-wikilink {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
  transition: border-color 120ms;
}
.vault-wikilink:hover { border-bottom-style: solid; }
.vault-tag {
  color: var(--accent);
  font-size: .9em;
  cursor: pointer;
}
.vault-tag:hover { text-decoration: underline; }
.vault-tag-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(13,148,136,.08);
  border-radius: 10px;
  margin: 2px 4px 2px 0;
  cursor: pointer;
  transition: background 120ms;
}
.vault-tag-badge:hover { background: rgba(13,148,136,.16); }

/* ─── Kontextmenü ──────────────────────────────────────────────── */
.vault-ctx-menu {
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg, 5px);
  padding: 4px;
  min-width: 150px;
  box-shadow: var(--shadow-card);
}
.vault-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 120ms;
}
.vault-ctx-item:hover { background: var(--card-hover); }

/* ─── Viewer Content (gerenderte Markdown-Vorschau) ────────────── */
.vault-viewer-content {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}
.vault-viewer-content h1 { font-size: 1.5em; font-weight: 700; margin: 1.2em 0 .5em; color: var(--text-primary); }
.vault-viewer-content h2 { font-size: 1.25em; font-weight: 600; margin: 1em 0 .4em; color: var(--text-primary); }
.vault-viewer-content h3 { font-size: 1.05em; font-weight: 600; margin: .8em 0 .3em; color: var(--text-primary); }
.vault-viewer-content code {
  background: rgba(0,0,0,.05);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .85em;
  font-family: 'JetBrains Mono', monospace;
}
.vault-viewer-content pre {
  background: #1e293b;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: .8em 0;
}
.vault-viewer-content pre code {
  display: block;
  padding: 12px 16px;
  background: transparent;
  color: #e2e8f0;
  font-size: 12px;
}
.vault-viewer-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  color: var(--text-secondary);
  margin: .8em 0;
}
.vault-viewer-content img { max-width: 100%; border-radius: var(--radius); }
.vault-viewer-content a { color: var(--accent); }
.vault-viewer-content hr {
  border: none;
  border-top: 2px solid rgba(0,0,0,.06);
  margin: 20px 0;
}
.vault-viewer-content table { border-collapse: collapse; margin: .8em 0; width: 100%; }
.vault-viewer-content th,
.vault-viewer-content td {
  border: 1px solid rgba(0,0,0,.08);
  padding: 6px 10px;
  font-size: 13px;
  text-align: left;
}
.vault-viewer-content th { background: rgba(0,0,0,.02); font-weight: 600; }

/* ─── EasyMDE — helles Theme passend zu BaxxusOS ──────────────── */
#vault-view .EasyMDEContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none !important;
}

/* CodeMirror Editor */
#vault-view .EasyMDEContainer .CodeMirror {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  border: none !important;
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  padding: 4px 16px;
}
#vault-view .CodeMirror-cursor { border-left-color: var(--accent) !important; border-left-width: 2px; }
#vault-view .CodeMirror-scroll { min-height: 0 !important; }
#vault-view .CodeMirror-selected { background: rgba(13,148,136,.12) !important; }
#vault-view .CodeMirror-gutters { background: transparent !important; border: none !important; }
#vault-view .CodeMirror-linenumber { color: var(--text-very-muted) !important; }

/* Markdown Syntax Highlighting */
#vault-view .cm-header { color: var(--text-primary) !important; font-weight: 700; }
#vault-view .cm-header-1 { font-size: 1.4em; }
#vault-view .cm-header-2 { font-size: 1.2em; }
#vault-view .cm-header-3 { font-size: 1.05em; }
#vault-view .cm-link { color: var(--accent) !important; }
#vault-view .cm-url { color: var(--text-muted) !important; }
#vault-view .cm-strong { color: var(--text-primary) !important; font-weight: 700; }
#vault-view .cm-em { color: var(--text-secondary) !important; font-style: italic; }
#vault-view .cm-comment { color: var(--text-muted) !important; }
#vault-view .cm-quote { color: var(--text-secondary) !important; font-style: italic; }
#vault-view .cm-keyword { color: #9333ea !important; }
#vault-view .cm-string { color: #16a34a !important; }
#vault-view .cm-formatting { color: var(--text-very-muted) !important; }

/* EasyMDE Toolbar */
#vault-view .editor-toolbar {
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  background: var(--card-bg) !important;
  opacity: 1 !important;
  padding: 6px 8px !important;
}
#vault-view .editor-toolbar::before,
#vault-view .editor-toolbar::after { display: none !important; }
#vault-view .editor-toolbar button {
  color: var(--text-muted) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  width: 30px !important;
  height: 30px !important;
}
#vault-view .editor-toolbar button:hover {
  background: rgba(0,0,0,.05) !important;
  color: var(--text-primary) !important;
}
#vault-view .editor-toolbar button.active {
  background: rgba(13,148,136,.1) !important;
  color: var(--accent) !important;
}
#vault-view .editor-toolbar i.separator {
  border-left: 1px solid rgba(0,0,0,.08) !important;
  border-right: none !important;
  margin: 0 4px !important;
}

/* Preview Panes */
#vault-view .editor-preview,
#vault-view .editor-preview-side {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border: none !important;
  padding: 16px 20px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
#vault-view .editor-preview-active-side {
  border-left: 1px solid rgba(0,0,0,.06) !important;
}
/* Preview code blocks */
#vault-view .editor-preview pre,
#vault-view .editor-preview-side pre {
  background: #1e293b !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
}
#vault-view .editor-preview pre code,
#vault-view .editor-preview-side pre code {
  color: #e2e8f0 !important;
  font-size: 12px !important;
}
/* Fullscreen */
#vault-view .EasyMDEContainer .CodeMirror-fullscreen,
#vault-view .editor-toolbar.fullscreen {
  background: var(--card-bg) !important;
}

/* Refresh-Spin */
@keyframes vault-spin { to { transform: rotate(360deg); } }

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .vault-backlinks-panel { display: none; }
  .vault-layout { flex-direction: column; }

  /* Mobile Liste→Detail: Sidebar-Content im View-Container */
  .mobile-list-view {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 8px;
    background: var(--content-bg);
  }
  /* Farben umschalten: Shell-dunkel → Content-hell */
  .mobile-list-view .sec-header {
    color: var(--text-muted);
  }
  .mobile-list-view .sec-nav-item {
    color: var(--text-secondary);
  }
  .mobile-list-view .sec-nav-item:hover {
    background: rgba(60,66,80,0.06);
  }
  .mobile-list-view .sec-nav-item.active {
    color: var(--text-primary);
    background: rgba(13,148,136,0.08);
  }
  .mobile-list-view .sec-nav-item svg {
    color: var(--text-muted);
  }
  .mobile-list-view .sec-nav-item.active svg {
    color: var(--accent);
  }
  .mobile-list-view .sec-divider {
    border-color: rgba(60,66,80,0.08);
  }
  .mobile-list-view input,
  .mobile-list-view input::placeholder {
    color: var(--text-primary);
  }
  .mobile-list-view input::placeholder {
    color: var(--text-muted);
  }
  .mobile-list-view .btn {
    color: var(--text-secondary);
  }
  .mobile-list-view .btn-primary,
  .mobile-list-view .btn-accent {
    color: #fff;
  }
}