/* ═══════════════════════════════════════════════════════════════
   ProjectManager – Main Stylesheet
   Light & Dark mode via CSS custom properties
═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --color-primary:       #4f46e5;
  --color-primary-dark:  #4338ca;
  --color-primary-light: #ede9fe;
  --color-secondary:     #7c3aed;
  --color-success:       #059669;
  --color-warning:       #d97706;
  --color-danger:        #dc2626;
  --color-info:          #0284c7;

  --bg-base:       #f1f5f9;
  --bg-card:       #ffffff;
  --bg-sidebar:    #1e1b4b;
  --bg-topbar:     #ffffff;
  --bg-input:      #ffffff;
  --bg-hover:      #f8fafc;
  --bg-table-head: #f8fafc;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-sidebar:   #c7d2fe;
  --text-sidebar-active: #ffffff;

  --border-color:  #e2e8f0;
  --border-radius: 8px;
  --border-radius-sm: 6px;
  --border-radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);

  --sidebar-width: 220px;
  --topbar-height: 56px;
  --transition: 150ms ease;

  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
}

[data-theme="dark"] {
  --bg-base:       #0f172a;
  --bg-card:       #1e293b;
  --bg-sidebar:    #0f172a;
  --bg-topbar:     #1e293b;
  --bg-input:      #1e293b;
  --bg-hover:      #334155;
  --bg-table-head: #1e293b;

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-sidebar:   #94a3b8;

  --border-color: #334155;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow:    0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.4);
}

/* ── Sepia: warm light theme, easy on the eyes ─────────────── */
[data-theme="sepia"] {
  --color-primary:       #b85c38;
  --color-primary-dark:  #9a4929;
  --color-primary-light: #f5e6dc;
  --color-secondary:     #a16207;
  --color-success:       #4d7c0f;
  --color-warning:       #b45309;
  --color-danger:        #b91c1c;
  --color-info:          #0e7490;

  --bg-base:       #f4ecd8;
  --bg-card:       #fbf6e9;
  --bg-sidebar:    #3e2c1e;
  --bg-topbar:     #fbf6e9;
  --bg-input:      #fbf6e9;
  --bg-hover:      #efe4c5;
  --bg-table-head: #efe4c5;

  --text-primary:   #3e2c1e;
  --text-secondary: #6b5340;
  --text-muted:     #a39378;
  --text-sidebar:   #d4c5a9;
  --text-sidebar-active: #fbf6e9;

  --border-color: #d6c5a4;
}

/* ── Midnight: deep dark with indigo accents ───────────────── */
[data-theme="midnight"] {
  --color-primary:       #818cf8;
  --color-primary-dark:  #6366f1;
  --color-primary-light: #312e81;
  --color-secondary:     #a78bfa;

  --bg-base:       #0a0a16;
  --bg-card:       #14142a;
  --bg-sidebar:    #050510;
  --bg-topbar:     #14142a;
  --bg-input:      #1a1a35;
  --bg-hover:      #252548;
  --bg-table-head: #14142a;

  --text-primary:   #e0e0ff;
  --text-secondary: #a8a8cc;
  --text-muted:     #6e6e8f;
  --text-sidebar:   #a8a8cc;
  --text-sidebar-active: #ffffff;

  --border-color: #2a2a52;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.5);
}

/* ── Ocean: dimmed blue, softer than dark ──────────────────── */
[data-theme="ocean"] {
  --color-primary:       #38bdf8;
  --color-primary-dark:  #0ea5e9;
  --color-primary-light: #075985;
  --color-secondary:     #06b6d4;

  --bg-base:       #0d1b2a;
  --bg-card:       #15293f;
  --bg-sidebar:    #0a141f;
  --bg-topbar:     #15293f;
  --bg-input:      #15293f;
  --bg-hover:      #1e3a5f;
  --bg-table-head: #15293f;

  --text-primary:   #e1e7ef;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-sidebar:   #94c5e8;
  --text-sidebar-active: #ffffff;

  --border-color: #1e3a5f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow:    0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.4);
}

/* ── Matrix: pure black with phosphor-green text ──────────── */
[data-theme="matrix"] {
  --color-primary:       #22ff66;
  --color-primary-dark:  #16cc4d;
  --color-primary-light: #062810;
  --color-secondary:     #4ade80;
  --color-success:       #4ade80;
  --color-warning:       #fbbf24;
  --color-danger:        #f87171;
  --color-info:          #67e8f9;

  --bg-base:       #000000;
  --bg-card:       #050a05;
  --bg-sidebar:    #000000;
  --bg-topbar:     #050a05;
  --bg-input:      #050a05;
  --bg-hover:      #0a1f0a;
  --bg-table-head: #050a05;

  --text-primary:   #41ff5e;
  --text-secondary: #22c55e;
  --text-muted:     #4d7a4d;
  --text-sidebar:   #22c55e;
  --text-sidebar-active: #41ff5e;

  --border-color: #0a3a18;
  --shadow-sm: 0 0 4px rgba(34,255,102,.15);
  --shadow:    0 0 8px rgba(34,255,102,.2);
  --shadow-md: 0 0 12px rgba(34,255,102,.25);
  --shadow-lg: 0 0 18px rgba(34,255,102,.3);
}

/* ── Forest: forest-green sidebar, light content ──────────── */
[data-theme="forest"] {
  --color-primary:       #15803d;
  --color-primary-dark:  #166534;
  --color-primary-light: #dcfce7;
  --color-secondary:     #ca8a04;
  --color-success:       #16a34a;
  --color-warning:       #d97706;
  --color-danger:        #dc2626;
  --color-info:          #0284c7;

  --bg-base:       #f7faf6;
  --bg-card:       #ffffff;
  --bg-sidebar:    #14532d;
  --bg-topbar:     #ffffff;
  --bg-input:      #ffffff;
  --bg-hover:      #ecfccb;
  --bg-table-head: #f0fdf4;

  --text-primary:   #14532d;
  --text-secondary: #5b7565;
  --text-muted:     #9ca3af;
  --text-sidebar:   #bbf7d0;
  --text-sidebar-active: #ffffff;

  --border-color: #d4e3d8;
}

/* ── Crimson: burgundy sidebar, near-white content ────────── */
[data-theme="crimson"] {
  --color-primary:       #be123c;
  --color-primary-dark:  #9f1239;
  --color-primary-light: #ffe4e6;
  --color-secondary:     #c2410c;
  --color-success:       #16a34a;
  --color-warning:       #d97706;
  --color-danger:        #dc2626;
  --color-info:          #0284c7;

  --bg-base:       #fafaf9;
  --bg-card:       #ffffff;
  --bg-sidebar:    #4c0519;
  --bg-topbar:     #ffffff;
  --bg-input:      #ffffff;
  --bg-hover:      #fff1f2;
  --bg-table-head: #fafaf9;

  --text-primary:   #18181b;
  --text-secondary: #52525b;
  --text-muted:     #a1a1aa;
  --text-sidebar:   #fda4af;
  --text-sidebar-active: #ffffff;

  --border-color: #e7e5e4;
}

/* ── Bluescreen: classic BSOD blue with white text ────────── */
[data-theme="bluescreen"] {
  --color-primary:       #ffffff;
  --color-primary-dark:  #d0d0d0;
  --color-primary-light: #001d80;
  --color-secondary:     #ffff55;
  --color-success:       #55ff55;
  --color-warning:       #ffff55;
  --color-danger:        #ff5555;
  --color-info:          #55ffff;

  --bg-base:       #0000aa;
  --bg-card:       #0000aa;
  --bg-sidebar:    #000088;
  --bg-topbar:     #0000aa;
  --bg-input:      #000088;
  --bg-hover:      #0033cc;
  --bg-table-head: #000088;

  --text-primary:   #ffffff;
  --text-secondary: #d0d0ff;
  --text-muted:     #8888cc;
  --text-sidebar:   #d0d0ff;
  --text-sidebar-active: #ffff55;

  --border-color: #4040cc;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 6px rgba(0,0,0,.5);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.5);
}

/* ── Slate: steel-grey sidebar, sky-blue accent ───────────── */
[data-theme="slate"] {
  --color-primary:       #0284c7;
  --color-primary-dark:  #0369a1;
  --color-primary-light: #e0f2fe;
  --color-secondary:     #6366f1;
  --color-success:       #059669;
  --color-warning:       #d97706;
  --color-danger:        #dc2626;
  --color-info:          #0891b2;

  --bg-base:       #f8fafc;
  --bg-card:       #ffffff;
  --bg-sidebar:    #1e293b;
  --bg-topbar:     #ffffff;
  --bg-input:      #ffffff;
  --bg-hover:      #f1f5f9;
  --bg-table-head: #f8fafc;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-sidebar:   #cbd5e1;
  --text-sidebar-active: #ffffff;

  --border-color: #e2e8f0;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
/* HTML5's `hidden` attribute is supposed to set display:none, but a class
   like `.form-row { display: flex }` outranks the implicit element-level
   default. Force it globally so toggling `el.hidden = true` in JS reliably
   removes the element from the layout. */
[hidden] { display: none !important; }
body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; }

/* ── App Layout ────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform var(--transition);
  box-shadow: var(--shadow-md);
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.sidebar-logo-text {
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: -.01em;
}
.sidebar-toggle { display: none; color: #fff; padding: 4px; }
.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--border-radius-sm);
  color: var(--text-sidebar);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.nav-item.active { background: rgba(255,255,255,.15); color: var(--text-sidebar-active); }
.nav-separator { height: 1px; background: rgba(255,255,255,.1); margin: 8px 4px; }
.nav-subitems {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px 22px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.nav-subitem {
  display: block;
  padding: 6px 10px;
  border-radius: var(--border-radius-sm);
  color: var(--text-sidebar);
  font-size: .8rem;
  font-weight: 400;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.nav-subitem:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-subitem.active { background: rgba(255,255,255,.12); color: var(--text-sidebar-active); }
#healthCheckCard,
#systemInfoCard,
#appSettingsCard,
#domainLanguagesCard,
#securitySettingsCard,
#mailSettingsCard,
#aiSettingsCard,
#scheduledUpdatesCard,
#profileInfoCard,
#changePasswordCard,
#twoFactorCard,
#deleteAccountCard { scroll-margin-top: calc(var(--topbar-height) + 16px); }
.nav-label {
  padding: 4px 12px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.sidebar-user {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 8px;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition);
}
.sidebar-user-info:hover { background: rgba(255,255,255,.1); }
.sidebar-user-text { flex: 1; min-width: 0; }
.sidebar-user-name {
  display: block;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role { display: block; color: var(--text-muted); font-size: .72rem; }

/* ── Main Wrapper ──────────────────────────────────────────── */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  /* "clip" instead of "hidden": prevents horizontal overflow without creating
     a new scrolling context, so the sticky topbar can still stick to the
     viewport edge. Supported in all browsers ≥ 2022. */
  overflow-x: clip;
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-height);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
.topbar-menu-btn { display: none; color: var(--text-secondary); }
.topbar-spacer { flex: 1; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Notifications */
.notif-wrapper { position: relative; }
.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  background: var(--color-danger);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 200;
}
.notif-dropdown.open { display: block; }
.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: .875rem;
}
.notif-all { font-size: .75rem; color: var(--color-primary); font-weight: 400; }
.notif-header-actions { display: flex; gap: 6px; align-items: center; }
.notif-bulk-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 500; color: var(--text-secondary);
  background: none; border: 1px solid var(--border-color); border-radius: 4px;
  padding: 2px 7px; cursor: pointer; white-space: nowrap;
}
.notif-bulk-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.notif-bulk-del:hover { color: var(--color-danger); border-color: var(--color-danger); }
.notif-list { max-height: 480px; overflow-y: auto; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px 9px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: .8rem;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--color-primary-light); }
[data-theme-mode="dark"] .notif-item.unread { background: rgba(79,70,229,.15); }
.notif-item-body { flex: 1; min-width: 0; cursor: pointer; }
.notif-item-body:hover .notif-item-title { text-decoration: underline; }
.notif-item-title { font-weight: 600; line-height: 1.3; }
.notif-item-msg { color: var(--text-secondary); margin-top: 1px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-time { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
.notif-item-invite { flex-direction: column; }
.notif-item-invite .notif-item-body { cursor: default; width: 100%; }
.notif-item-invite .notif-item-body:hover .notif-item-title { text-decoration: none; }
.notif-invite-actions { display: flex; gap: .375rem; padding-top: 6px; }
.notif-invite-actions .btn { padding: 3px 12px; font-size: .75rem; }
.notif-actions { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.notif-item:hover .notif-actions { opacity: 1; }
.notif-act-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px; border: none;
  background: none; cursor: pointer; color: var(--text-muted);
}
.notif-act-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.notif-act-btn.del:hover { color: var(--color-danger); }
.notif-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: .875rem; }

/* User dropdown */
.user-menu-wrapper { position: relative; }
.user-menu-btn { border-radius: 50%; display: flex; align-items: center; }
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 200;
  padding: 4px;
}
.user-dropdown.open { display: block; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  font-size: .875rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition);
}
.dropdown-item:hover { background: var(--bg-hover); text-decoration: none; }
.dropdown-item-danger { color: var(--color-danger); }
.dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }

/* ── Main Content ──────────────────────────────────────────── */
.main-content { padding: 24px; flex: 1; }
.app-footer {
  padding: 10px 24px;
  font-size: .78rem;
  /* Explicit solid colors — independent of theme tokens that resolve to
     near-white. The dashboard sets its own dark radial gradient as the
     surrounding background, against which a translucent footer becomes
     unreadable. Hardcoding a near-black bar with light text guarantees
     contrast on every page. */
  color: #cbd5e1;
  background: #0f172a;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  z-index: 50;
}
.app-footer-left, .app-footer-right { display: flex; gap: 10px; align-items: center; }
.app-footer a { color: #94a3b8; text-decoration: none; }
.app-footer a:hover { color: #fff; text-decoration: underline; }
.footer-sep { color: rgba(255,255,255,.18); }
.footer-version { color: #e2e8f0; font-weight: 500; letter-spacing: .02em; }
.auth-footer {
  margin-top: 16px;
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-footer-left, .auth-footer-right { display: flex; gap: 8px; align-items: center; }
.auth-footer a { color: var(--text-muted); text-decoration: none; }
.auth-footer a:hover { color: var(--text-primary); text-decoration: underline; }
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;
}
.section-title { font-size: 1rem; font-weight: 600; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-table-head);
}
.card-title { font-size: .875rem; font-weight: 600; }
.card-badge { font-size: .75rem; color: var(--text-muted); }
.card-body { padding: 16px; }
.card-body.p-0 { padding: 0; }
.card-danger { border-color: rgba(220,38,38,.3); }
.card-danger .card-header { background: rgba(220,38,38,.05); }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
  font-size: .875rem;
  position: relative;
}
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
[data-theme-mode="dark"] .alert-success { background: rgba(5,150,105,.15); color: #34d399; border-color: rgba(5,150,105,.3); }
[data-theme-mode="dark"] .alert-error   { background: rgba(220,38,38,.15);  color: #f87171; border-color: rgba(220,38,38,.3);  }
[data-theme-mode="dark"] .alert-info    { background: rgba(59,130,246,.15);  color: #60a5fa; border-color: rgba(59,130,246,.3);  }
.alert-close {
  position: absolute;
  top: 8px; right: 8px;
  color: currentColor;
  opacity: .6;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--border-radius-sm);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary  { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-ghost  { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-warning { background: var(--color-warning); color: #fff; }
.btn-danger  { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm  { padding: 5px 10px; font-size: .8rem; }
.btn-xs  { padding: 3px 8px; font-size: .75rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-file { position: relative; overflow: hidden; }
.btn + .btn, .btn + form { margin-left: 4px; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: .875rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.form-input-lg { font-size: 1rem; padding: 10px 14px; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select { cursor: pointer; }
.form-select-sm { padding: 4px 8px; font-size: .8rem; width: auto; }
.form-file {
  display: block;
  width: 100%;
  font-size: .8rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.form-help { color: var(--text-muted); font-size: .75rem; margin-top: 4px; display: block; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-actions { display: flex; gap: 8px; padding-top: 4px; }
.form-actions-vertical { display: flex; flex-direction: column; gap: 8px; }
.form-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px; box-shadow: var(--shadow-sm); max-width: 560px; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.required-star { color: var(--color-danger); }
.form-fieldset { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 12px; margin-top: 8px; }
.form-fieldset legend { padding: 0 6px; font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: .85rem; cursor: pointer; }
.checkbox-label input { accent-color: var(--color-primary); }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-label { display: flex; align-items: center; gap: 6px; font-size: .875rem; cursor: pointer; }
.radio-label input { accent-color: var(--color-primary); }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.inline-form .form-input { flex: 1; }
.input-with-toggle { position: relative; }
.input-with-toggle .form-input { padding-right: 36px; }
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  cursor: pointer;
}

/* Color picker */
.color-picker-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.color-input { width: 40px; height: 36px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; padding: 2px; }
.color-input-lg { width: 60px; height: 40px; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; }
.color-input-sm { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-color); cursor: pointer; padding: 1px; flex-shrink: 0; }
.color-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.color-preset {
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--transition), border-color var(--transition);
}
.color-preset:hover, .color-preset.active { transform: scale(1.2); border-color: white; box-shadow: 0 0 0 2px var(--color-primary); }

/* Label checkboxes */
.label-checkboxes { display: flex; flex-wrap: wrap; gap: 6px; }
.label-check { cursor: pointer; }
.label-check input { display: none; }
.label-badge-check {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  opacity: .5;
  transition: opacity var(--transition);
}
.label-check input:checked + .label-badge-check { opacity: 1; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border-color);
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.table-row-link { cursor: pointer; }
.task-link { color: var(--text-primary); font-weight: 500; }
.task-link:hover { color: var(--color-primary); text-decoration: none; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge-success { background: #d1fae5; color: var(--color-success); }
.badge-danger  { background: #fee2e2; color: var(--color-danger); }
.badge-secondary { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-color); }
.badge-info    { background: #dbeafe; color: var(--color-info); }
[data-theme-mode="dark"] .badge-primary  { background: rgba(79,70,229,.2); }
[data-theme-mode="dark"] .badge-success  { background: rgba(5,150,105,.2); color: #34d399; }
[data-theme-mode="dark"] .badge-danger   { background: rgba(220,38,38,.2); color: #f87171; }
[data-theme-mode="dark"] .badge-info     { background: rgba(2,132,199,.2); color: #38bdf8; }

/* Priority badges */
.priority-badge { border: 1px solid; }
.badge-low    { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.badge-medium { background: #fefce8; color: #ca8a04; border-color: #fef08a; }
.badge-high   { background: #fff7ed; color: #ea580c; border-color: #fed7aa; }
.badge-urgent { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
[data-theme-mode="dark"] .badge-low    { background: rgba(22,163,74,.15); color: #4ade80; border-color: rgba(22,163,74,.3); }
[data-theme-mode="dark"] .badge-medium { background: rgba(202,138,4,.15); color: #facc15; border-color: rgba(202,138,4,.3); }
[data-theme-mode="dark"] .badge-high   { background: rgba(234,88,12,.15); color: #fb923c; border-color: rgba(234,88,12,.3); }
[data-theme-mode="dark"] .badge-urgent { background: rgba(220,38,38,.15); color: #f87171; border-color: rgba(220,38,38,.3); }

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--status-color, #6b7280) 15%, transparent);
  color: var(--status-color, #6b7280);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* Label badges */
.label-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
}

/* ── Avatar ─────────────────────────────────────────────────── */
.avatar { border-radius: 50%; display: block; object-fit: cover; }
.avatar-initials {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
/* Wenn KEIN Avatar-Bild da ist: neutrale SVG-Silhouette statt Initial.
   Hintergrund + Icon-Farbe deutlich gedeckter als der bunte Initial-Kreis,
   damit klar erkennbar als Placeholder (kein bunter Badge-Eindruck). */
.avatar-placeholder { color: var(--text-secondary, #94a3b8); }
.avatar-placeholder svg { display: block; }
.user-cell { display: flex; align-items: center; gap: 8px; }
.avatar-section { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }

/* ── Dashboard ─────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--border-radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon-blue   { background: #dbeafe; color: var(--color-info); }
.stat-icon-indigo { background: var(--color-primary-light); color: var(--color-primary); }
.stat-icon-amber  { background: #fef3c7; color: var(--color-warning); }
.stat-icon-red    { background: #fee2e2; color: var(--color-danger); }
[data-theme-mode="dark"] .stat-icon-blue   { background: rgba(2,132,199,.15); }
[data-theme-mode="dark"] .stat-icon-indigo { background: rgba(79,70,229,.15); }
[data-theme-mode="dark"] .stat-icon-amber  { background: rgba(217,119,6,.15); }
[data-theme-mode="dark"] .stat-icon-red    { background: rgba(220,38,38,.15); }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }

/* ── Task lists ─────────────────────────────────────────────── */
.task-list { display: flex; flex-direction: column; }
.task-list.scrollable { max-height: 570px; overflow-y: auto; }
.task-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--transition);
}
.task-list-item:last-child { border-bottom: none; }
.task-list-item:hover { background: var(--bg-hover); text-decoration: none; }
.task-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.task-list-body { flex: 1; min-width: 0; }
.task-list-title { font-size: .875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-list-meta { display: flex; gap: 8px; margin-top: 2px; font-size: .75rem; color: var(--text-muted); align-items: center; }
.empty-state-small { padding: 24px; text-align: center; color: var(--text-muted); font-size: .875rem; }

/* Due dates */
.task-due { font-size: .75rem; color: var(--text-muted); }
.task-due.overdue   { color: var(--color-danger); font-weight: 600; }
.task-due.due-today { color: var(--color-warning); font-weight: 600; }
.task-due-sm { font-size: .7rem; }

/* ── Activity ─────────────────────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; }
.activity-list.scrollable { max-height: 520px; overflow-y: auto; }
.activity-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
}
.activity-item:last-child { border-bottom: none; }
.activity-avatar { flex-shrink: 0; }
.activity-body { flex: 1; font-size: .8rem; color: var(--text-secondary); line-height: 1.5; }
.activity-user { font-weight: 600; color: var(--text-primary); }
.activity-task { font-style: italic; }
.activity-time { color: var(--text-muted); display: block; font-size: .72rem; }

/* ── Projects Grid ─────────────────────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.projects-grid-full { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-primary);
  transition: box-shadow var(--transition), transform var(--transition);
}
.project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }
.project-card-accent { height: 4px; flex-shrink: 0; }
.project-card-body { padding: 14px; flex: 1; }
.project-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.project-card-name { font-weight: 700; font-size: .95rem; color: var(--text-primary); flex: 1; }
.project-card-name:hover { color: var(--color-primary); }
.project-card-desc { font-size: .8rem; color: var(--text-secondary); margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-card-meta { display: flex; gap: 12px; font-size: .75rem; color: var(--text-muted); margin-top: 8px; align-items: center; }
.project-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.project-card-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 12px;
  background: var(--bg-table-head);
}
.project-view-link { font-size: .75rem; color: var(--text-muted); font-weight: 500; }
.project-view-link:hover { color: var(--color-primary); text-decoration: none; }
.project-card-new {
  border-style: dashed;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
  min-height: 120px;
  cursor: pointer;
}
.project-card-new:hover { color: var(--color-primary); border-color: var(--color-primary); }
.project-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.project-badge { padding: 1px 6px; border-radius: 999px; font-size: .7rem; font-weight: 600; background: color-mix(in srgb, var(--project-color, #4f46e5) 15%, transparent); color: var(--project-color, #4f46e5); }

/* ── View Switcher ─────────────────────────────────────────── */
.view-switcher {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  width: fit-content;
}
.view-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.view-tab:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; }
.view-tab.active { background: var(--color-primary); color: #fff; }
.project-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.project-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.project-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Kanban ─────────────────────────────────────────────────── */
.kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}
.kanban-column {
  flex: 0 0 280px;
  background: var(--bg-table-head);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
}
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.kanban-column-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-secondary);
}
.kanban-count {
  background: var(--border-color);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: .7rem;
  padding: 1px 6px;
  font-weight: 700;
}
.kanban-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 4px;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.kanban-add-btn:hover { background: var(--bg-hover); color: var(--color-primary); text-decoration: none; }
.kanban-column-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}
.kanban-column-body.drag-over { background: rgba(79,70,229,.06); border-radius: 6px; }
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 10px;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.kanban-card:hover { box-shadow: var(--shadow-md); }
.kanban-card.dragging { opacity: .5; transform: scale(.98); cursor: grabbing; }
.kanban-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 4px; }
.kanban-card-header-right { display: flex; align-items: center; gap: 6px; }
.kanban-card-delete-form { display: inline-flex; margin: 0; }
.kanban-card-delete {
  background: transparent;
  border: none;
  padding: 2px;
  margin: 0;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.kanban-card:hover .kanban-card-delete { opacity: .5; }
.kanban-card-delete:hover { opacity: 1; color: var(--color-danger); background: rgba(220, 38, 38, .1); }
.kanban-card-delete:focus-visible { opacity: 1; outline: 2px solid var(--color-primary); outline-offset: 1px; }
.kanban-card-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 8px;
  text-decoration: none;
  line-height: 1.4;
}
.kanban-card-title:hover { color: var(--color-primary); text-decoration: none; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.kanban-card-meta { display: flex; gap: 6px; align-items: center; }
.meta-badge { display: flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--text-muted); }
.kanban-empty { text-align: center; color: var(--text-muted); font-size: .75rem; padding: 16px; border: 1px dashed var(--border-color); border-radius: 4px; }

/* ── Filter Bar ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-search { max-width: 240px; }
.filter-select { width: auto; }

/* ── Tab Bar ─────────────────────────────────────────────────── */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.tab {
  padding: 8px 16px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text-primary); text-decoration: none; }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── Gantt ─────────────────────────────────────────────────── */
.gantt-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.gantt-range-label { font-size: .875rem; font-weight: 600; min-width: 180px; text-align: center; }
.gantt-zoom { display: flex; gap: 4px; margin-left: auto; }
.gantt-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  overflow: hidden;
  min-height: 200px;
}
.gantt-sidebar {
  flex: 0 0 280px;
  min-width: 120px;
  max-width: 480px;
  border-right: none;
  background: var(--bg-table-head);
  overflow: hidden;
  position: relative;
}
.gantt-resize-handle {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 30;
  background: transparent;
  border-right: 1px solid var(--border-color);
  transition: background .15s;
}
.gantt-resize-handle:hover,
.gantt-resize-handle.dragging {
  background: var(--color-primary);
  opacity: .35;
}
.gantt-header-cell {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}
.gantt-task-label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-color);
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
}
.gantt-task-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.gantt-task-label:hover { color: var(--color-primary); background: var(--bg-hover); text-decoration: none; }
.gantt-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gantt-chart { flex: 1; overflow-x: auto; overflow-y: hidden; position: relative; }

/* ── Task Detail ─────────────────────────────────────────────── */
.task-detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: start;
}
.task-detail-title { font-size: 1.2rem; }
.task-detail-main { min-width: 0; }
.task-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
}
.task-meta-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
  font-size: .85rem;
}
.task-meta-item:last-child { border-bottom: none; }
.task-meta-label { color: var(--text-muted); font-size: .78rem; white-space: nowrap; padding-top: 2px; }
.task-meta-labels { flex-direction: column; align-items: flex-start; }
.task-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.task-description { font-size: .875rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.status-change-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--border-radius-sm);
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--transition);
  margin-bottom: 3px;
  cursor: pointer;
  text-align: left;
}
.status-change-btn:hover { background: var(--bg-hover); }
.status-change-btn.active { background: var(--color-primary-light); color: var(--color-primary); }
[data-theme-mode="dark"] .status-change-btn.active { background: rgba(79,70,229,.2); }
.status-select-row { display: flex; gap: 6px; align-items: center; }
.status-select-row .form-select { flex: 1; }

/* Dependency multi-select */
.dep-select { min-height: 80px; }
.dep-select option { padding: 4px 6px; }
.form-hint { display: block; margin-top: 4px; font-size: .75rem; color: var(--text-muted); }

/* Dependency display (detail sidebar) */
.dep-card { padding: 12px 14px !important; }
.dep-section { display: flex; flex-direction: column; gap: 4px; }
.dep-section--sep { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.dep-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 2px; }
.dep-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--border-radius-sm);
  font-size: .8rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--transition);
}
.dep-item:hover { background: var(--bg-hover); color: var(--color-primary); }
.dep-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Inline meta selects (status / priority) */
.meta-inline-form { display: contents; }
.meta-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px 20px 2px 8px;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  color: inherit;
  max-width: 140px;
}
.meta-select:hover { border-color: var(--border-color); background-color: var(--bg-hover); }
.meta-select:focus { border-color: var(--color-primary); outline: none; background-color: var(--bg-base); }
.status-meta-select {
  color: var(--status-color, #6b7280);
  background-color: color-mix(in srgb, var(--status-color, #6b7280) 12%, transparent);
  border-color: color-mix(in srgb, var(--status-color, #6b7280) 30%, transparent);
}
.status-meta-select:hover { background-color: color-mix(in srgb, var(--status-color, #6b7280) 20%, transparent); }
.priority-meta-select.priority-low    { color: #6b7280; background-color: #6b728015; }
.priority-meta-select.priority-medium { color: #2563eb; background-color: #2563eb15; }
.priority-meta-select.priority-high   { color: #d97706; background-color: #d9770615; }
.priority-meta-select.priority-urgent { color: #dc2626; background-color: #dc262615; }

/* Inline date editing in sidebar */
.date-inline-form { display: contents; }
.date-inline-input {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: .82rem;
  padding: 1px 4px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  max-width: 130px;
}
.date-inline-input:hover { border-color: var(--border-color); background: var(--bg-hover); }
.date-inline-input:focus { border-color: var(--color-primary); outline: none; background: var(--bg-base); }
.date-inline-input.overdue { color: var(--color-danger); }
.date-save-row { padding-top: 2px; }
.btn-xs { font-size: .72rem; padding: 2px 8px; height: auto; line-height: 1.6; }

/* ── AI Assistant ───────────────────────────────────────────────────────────── */
.view-tab--ai { margin-left: auto; border-left: 1px solid var(--border-color); padding-left: 12px; }
.ai-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  height: calc(100vh - 180px);
}
.ai-layout.has-panel { grid-template-columns: 1fr 340px; }
.ai-chat-wrap {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
}
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
  padding: 40px 20px;
}
.ai-empty svg { opacity: .4; margin-bottom: 8px; }
.ai-example-label { font-size: .8rem; margin-top: 12px; font-weight: 600; color: var(--text-secondary); }
.ai-example-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.ai-example-chip {
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .78rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: background .15s;
}
.ai-example-chip:hover { background: var(--bg-active); border-color: var(--color-primary); color: var(--color-primary); }
.ai-msg { display: flex; flex-direction: column; max-width: 85%; }
.ai-msg--user { align-self: flex-end; }
.ai-msg--ai   { align-self: flex-start; }
.ai-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .87rem;
  line-height: 1.55;
  word-break: break-word;
}
.ai-msg--user .ai-msg-bubble {
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg--ai .ai-msg-bubble {
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}
.ai-msg--error .ai-msg-bubble { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.ai-msg-time { font-size: .7rem; color: var(--text-muted); margin-top: 3px; padding: 0 4px; }
.ai-msg--user .ai-msg-time { text-align: right; }
/* AI markdown rendering */
.ai-msg-bubble .ai-h { margin: 8px 0 4px; font-size: .95rem; font-weight: 600; }
.ai-msg-bubble .ai-ul { margin: 4px 0 4px 18px; padding: 0; }
.ai-msg-bubble .ai-ul li { margin-bottom: 2px; }
.ai-code { background: var(--bg-base); border: 1px solid var(--border-color); border-radius: 6px; padding: 10px 12px; font-size: .8rem; overflow-x: auto; margin: 6px 0; }
.ai-inline-code { background: var(--bg-base); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px; font-size: .82em; }
/* Thinking dots */
.ai-thinking { display: flex; gap: 5px; padding: 12px 16px; align-items: center; }
.ai-thinking span {
  width: 7px; height: 7px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: aiBounce .9s ease-in-out infinite;
}
.ai-thinking span:nth-child(2) { animation-delay: .15s; }
.ai-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes aiBounce { 0%,80%,100% { transform: scale(0); opacity:.4; } 40% { transform: scale(1); opacity:1; } }
/* Input */
.ai-input-form { border-top: 1px solid var(--border-color); padding: 12px; }
.ai-input-row { display: flex; gap: 8px; align-items: flex-end; }
.ai-input {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 180px;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: .875rem;
  line-height: 1.5;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.ai-input:focus { border-color: var(--color-primary); }
.ai-send-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.ai-send-btn:hover { background: var(--color-primary-dark, #4338ca); }
.ai-send-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Task panel */
.ai-task-panel { overflow-y: auto; }
.ai-task-item { padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.ai-task-item:last-child { border-bottom: none; }
.ai-task-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.ai-task-check input { margin-top: 2px; flex-shrink: 0; }
.ai-task-title { font-size: .85rem; font-weight: 500; }
.ai-task-meta { display: flex; gap: 8px; margin-top: 2px; padding-left: 20px; }
.ai-task-priority { font-size: .75rem; font-weight: 500; text-transform: capitalize; }
.ai-task-due { font-size: .75rem; color: var(--text-muted); }
.ai-task-desc { font-size: .78rem; color: var(--text-secondary); margin-top: 4px; padding-left: 20px; }
.ai-task-num { font-size: .72rem; color: var(--text-muted); font-weight: 600; flex-shrink: 0; min-width: 20px; }
.ai-task-pred { font-size: .72rem; color: var(--color-primary); opacity: .8; }

.dep-none {
  font-size: .8rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition);
}
.dep-none:hover { background: var(--bg-hover); color: var(--color-primary); font-style: normal; }

/* Dependency edit form */
.dep-toggle-btn {
  font-size: .75rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition), color var(--transition);
}
.dep-toggle-btn:hover { background: var(--bg-hover); color: var(--color-primary); }
.dep-edit-view { padding: 12px 14px; border-top: 1px solid var(--border-color); }
.dep-form-body { display: flex; flex-direction: column; gap: 10px; }
.dep-form-group { display: flex; flex-direction: column; gap: 4px; }
.dep-form-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.dep-form-hint { font-size: .72rem; color: var(--text-muted); margin-top: 6px; }
.dep-form-actions { display: flex; gap: 6px; margin-top: 10px; }
.dep-none-opt { font-style: italic; color: var(--text-muted); }

/* Multi-assignee UI */
.assignee-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.assignee-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--text-secondary); }
.assignee-chip--ext { color: var(--text-secondary); }
.badge-ext { font-size: .65rem; background: #f59e0b22; color: #d97706; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.avatar-ext { background: #d97706 !important; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }

.assignee-member-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.assignee-member-check { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: var(--border-radius-sm); transition: background var(--transition); font-size: .85rem; color: var(--text-secondary); }
.assignee-member-check:hover { background: var(--bg-hover); }
.assignee-member-check input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }

.ext-assignee-section { border-top: 1px solid var(--border-color); padding-top: 8px; margin-top: 4px; }
.ext-assignee-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-hover); border-radius: 20px; padding: 2px 8px 2px 4px; margin: 2px; font-size: .8rem; color: var(--text-secondary); }
.ext-tag-remove { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.ext-tag-remove:hover { color: var(--color-danger); }
.ext-add-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.ext-add-row .form-input-sm { flex: 1; font-size: .82rem; padding: 4px 8px; height: 30px; }
.task-meta-assignees { align-items: flex-start; }

.kanban-assignees { display: flex; flex-direction: row; gap: 2px; margin-top: 4px; }
.assignee-more { font-size: .7rem; color: var(--text-muted); display: flex; align-items: center; }

/* Subtasks */
.subtask-list { display: flex; flex-direction: column; }
.subtask-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-primary);
  font-size: .875rem;
  transition: background var(--transition);
}
.subtask-item:last-child { border-bottom: none; }
.subtask-item:hover { background: var(--bg-hover); text-decoration: none; }
.subtask-title { flex: 1; font-weight: 500; }
.subtask-assignee { font-size: .75rem; color: var(--text-muted); }

/* Comments */
.comments-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.comment { display: flex; gap: 10px; }
.comment-avatar { flex-shrink: 0; padding-top: 2px; }
.comment-body { flex: 1; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: .8rem; }
.comment-time { color: var(--text-muted); }
.comment-edited { color: var(--text-muted); font-style: italic; }
.comment-content { font-size: .875rem; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; }
.comment-form { border-top: 1px solid var(--border-color); padding-top: 14px; }
.comment-input-row { display: flex; gap: 10px; align-items: flex-start; }
.comment-input-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.comment-delete-btn { margin-left: auto; }

/* Time entries */
.time-form { margin-bottom: 14px; }
.time-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.time-entries { display: flex; flex-direction: column; gap: 4px; }
.time-entry {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-hover);
  border-radius: 4px;
  font-size: .8rem;
}
.time-hours { font-weight: 700; color: var(--color-primary); min-width: 40px; }
.time-user { font-weight: 500; }
.time-date { color: var(--text-muted); }
.time-note { color: var(--text-secondary); flex: 1; font-style: italic; }

/* Attachments */
.attachment-grid { display: flex; flex-direction: column; gap: 8px; }
.attachment-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-hover); border-radius: var(--border-radius-sm); }
.file-type-icon {
  width: 36px; height: 36px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff;
}
.icon-img    { background: var(--color-info); }
.icon-pdf    { background: var(--color-danger); }
.icon-doc    { background: #2563eb; }
.icon-sheet  { background: var(--color-success); }
.icon-file   { background: var(--text-muted); }
.attachment-info { flex: 1; min-width: 0; }
.attachment-name { font-size: .8rem; font-weight: 500; color: var(--color-primary); }
.attachment-meta { font-size: .72rem; color: var(--text-muted); display: block; }

/* ── Impersonate Banner ──────────────────────────────────────── */
.impersonate-banner {
  background: #f97316;
  color: #fff;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  font-weight: 500;
  flex-shrink: 0;
}
.impersonate-banner strong { font-weight: 700; }
.impersonate-banner form { margin-left: auto; display: inline; }
.impersonate-stop-btn {
  margin-left: auto;
  background: rgba(0,0,0,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  padding: 4px 14px;
  border-radius: 6px;
  text-decoration: none;
  font: inherit;
  font-size: .8rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
}
.impersonate-stop-btn:hover { background: rgba(0,0,0,.3); color: #fff; }

/* ── Settings Layout ─────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.settings-col { display: flex; flex-direction: column; gap: 16px; }
.settings-grid .card { margin-bottom: 0; }
.settings-form-actions { padding: 4px 0 8px; }
.smtp-info-box {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: var(--border-radius-sm);
  font-size: .8rem;
  color: #1e40af;
  margin-bottom: 14px;
}
[data-theme-mode="dark"] .smtp-info-box { background: rgba(2,132,199,.1); border-color: rgba(2,132,199,.3); color: #38bdf8; }

/* Danger zone */
.danger-action { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.danger-action:last-child { border-bottom: none; }
.danger-action p { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }

/* Status/Label list */
.status-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.status-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.status-item-name { flex: 1; font-size: .875rem; }
.label-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.label-item { display: flex; align-items: center; gap: 6px; }

/* Inline role form */
.inline-role-form { display: inline; }

/* ── Modals ─────────────────────────────────────────────────── */
.modal { display: none; position: fixed; inset: 0; z-index: 500; }
.modal.open { display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); }
.modal-box {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: 440px;
  max-width: 94vw;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.modal-header h3 { font-size: 1rem; font-weight: 700; }
.modal-close { font-size: 1.4rem; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.modal-body { padding: 20px; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Misc ─────────────────────────────────────────────────── */
.icon-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 4px;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  border: none;
  background: none;
}
.icon-btn-sm:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-btn-sm.danger:hover { background: #fee2e2; color: var(--color-danger); }
.action-btns { display: flex; gap: 4px; align-items: center; }
.text-muted { color: var(--text-muted); font-size: .875rem; }
.mt-2 { margin-top: 8px; }

/* Notifications full list */
.notif-full-list { display: flex; flex-direction: column; }
.notif-full-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}
.notif-full-item:last-child { border-bottom: none; }
.notif-full-item.unread { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.notif-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); margin-top: 6px; flex-shrink: 0; opacity: 0; }
.notif-full-item.unread .notif-indicator { opacity: 1; }
.notif-body { flex: 1; }
.notif-title { font-weight: 600; font-size: .875rem; }
.notif-message { font-size: .8rem; color: var(--text-secondary); margin-top: 2px; }
.notif-time { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }

/* Task form layout */
.task-form-layout { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }
.task-form-sidebar > .card { position: sticky; top: calc(var(--topbar-height) + 16px); margin-bottom: 0; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.empty-state h3 { font-size: 1.1rem; color: var(--text-secondary); }
.empty-state p { font-size: .875rem; }

/* Auth layout */
.auth-body { background: var(--bg-base); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-wrapper { width: 100%; max-width: 420px; padding: 20px; }
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.auth-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; }
.auth-subtitle { color: var(--text-muted); font-size: .875rem; margin-bottom: 24px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.notif-fieldset { border: 1px solid var(--border-color); border-radius: 6px; padding: 12px 16px; }
.notif-legend { font-size: .8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; }
.auth-footer-link { text-align: center; margin-top: 16px; font-size: .875rem; color: var(--text-muted); }
.auth-footer-link a { color: var(--primary); text-decoration: none; }
.auth-footer-link a:hover { text-decoration: underline; }

/* Sidebar overlay (mobile) */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .task-detail-layout { grid-template-columns: 1fr; }
  .task-form-layout { grid-template-columns: 1fr; }
  .task-detail-sidebar { position: static; max-height: none; overflow-y: visible; }
  .task-form-sidebar > .card { position: static; }
}
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 260px;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: flex; }
  .sidebar-overlay.open { display: block; }
  .main-wrapper { margin-left: 0; }
  .topbar-menu-btn { display: flex; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .main-content { padding: 16px; }
  .form-row { flex-direction: column; }
  .kanban-board { padding-bottom: 16px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .filter-bar { flex-direction: column; }
  .filter-search, .filter-select { max-width: 100%; width: 100%; }
}

/* My Tasks view */
.my-tasks-group { margin-bottom: 24px; }
.my-tasks-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-bottom: none;
}
.my-tasks-project-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .875rem;
  color: var(--text-primary);
  text-decoration: none;
}
.my-tasks-project-link:hover { color: var(--color-primary); }
.task-count-badge {
  font-size: .72rem;
  background: var(--bg-hover);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 500;
}
.task-row-done td { opacity: .55; }
.task-link-done { text-decoration: line-through; color: var(--text-muted) !important; }
.subtask-indicator { color: var(--text-muted); font-size: .85rem; margin-left: 4px; }

/* TOTP / 2FA */
.totp-input {
  font-size: 1.5rem;
  letter-spacing: .35em;
  text-align: center;
  max-width: 220px;
  font-variant-numeric: tabular-nums;
}
.totp-qr {
  display: flex;
  justify-content: center;
  margin: 1rem 0 1.25rem;
}
.totp-qr img,
.totp-qr canvas { border-radius: 8px; border: 4px solid #fff; }
.totp-secret-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: .75rem;
}
.totp-secret-code {
  font-family: monospace;
  font-size: .95rem;
  letter-spacing: .15em;
  color: var(--text-primary);
  word-break: break-all;
}
.totp-back-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--text-muted);
  text-decoration: none;
}
.totp-back-link:hover { color: var(--color-primary); }
.auth-icon {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: .5rem;
}
.badge { display: inline-flex; align-items: center; border-radius: 20px; padding: 2px 10px; font-size: .75rem; font-weight: 600; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-neutral { background: var(--bg-hover); color: var(--text-muted); }
[data-theme-mode="dark"] .badge-success { background: #064e3b; color: #6ee7b7; }

/* TOTP forced setup wizard */
.totp-wizard-step { background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem 1.25rem; }
.totp-wizard-step-label { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--text-secondary); margin-bottom: .75rem; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .72rem; font-weight: 700; }
.totp-enforce-note { font-size: .78rem; color: var(--text-muted); text-align: center; margin-top: 1rem; padding: 0 .5rem; }

/* ── External access layout ─────────────────────────────────── */
.ext-body { background: var(--bg-secondary); min-height: 100vh; margin: 0; }
.ext-header { background: var(--bg-primary); border-bottom: 1px solid var(--border-color); padding: 0 1.5rem; height: 52px; display: flex; align-items: center; position: sticky; top: 0; z-index: 50; }
.ext-header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 900px; margin: 0 auto; }
.ext-logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; color: var(--text-primary); text-decoration: none; }
.ext-header-meta { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-secondary); }
.ext-project-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ext-project-name { font-weight: 600; color: var(--text-primary); }
.ext-user-name::before { content: '·'; margin-right: .5rem; }
.ext-main { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
.ext-content {}
.ext-page-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; }
.ext-subtitle { color: var(--text-secondary); margin: 0 0 1.5rem; }
.ext-task-list { display: flex; flex-direction: column; gap: .75rem; }
.ext-task-card { display: block; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem 1.25rem; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.ext-task-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); border-color: var(--color-primary); }
.ext-task-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.ext-task-title { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.ext-task-desc { font-size: .85rem; color: var(--text-secondary); margin-top: .25rem; }
.ext-breadcrumb { margin-bottom: 1.25rem; }
.ext-task-detail { display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem; }
.ext-task-main {}
.ext-task-sidebar {}
.ext-task-title-lg { font-size: 1.4rem; font-weight: 700; margin: 0 0 1rem; }
@media (max-width: 640px) { .ext-task-detail { grid-template-columns: 1fr; } }

/* External participants in project settings */
.ext-member-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.ext-member-item { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; background: var(--bg-secondary); border-radius: 8px; }
.ext-member-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ext-member-info strong { font-size: .875rem; }
.ext-member-info .text-muted { font-size: .78rem; }
.ext-member-actions { display: flex; align-items: center; gap: .5rem; }
.ext-section-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; padding: .25rem 0; }

/* AI model selector */
.model-selector-wrap { display: flex; flex-direction: column; gap: .35rem; }
.model-selector-row { display: flex; align-items: center; gap: .5rem; }
.model-selector-row select { flex: 1; }
.model-selector-status { font-size: .78rem; color: var(--text-muted); min-height: 1em; }

/* ── MoniMoo: progress bars + sparklines ───────────────────────────────── */
.monimoo-bar { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.monimoo-bar-label { font-weight: 500; min-width: 38px; color: var(--text-secondary); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.monimoo-bar-track {
    flex: 1; min-width: 80px; height: 8px; border-radius: 999px;
    background: rgba(127,127,127,.15); overflow: hidden;
}
.monimoo-bar-fill {
    display: block; height: 100%; border-radius: 999px;
    transition: width .35s ease;
    background: linear-gradient(90deg, #16a34a, #65a30d);
}
.monimoo-bar-fill--ok   { background: linear-gradient(90deg, #16a34a, #65a30d); }
.monimoo-bar-fill--warn { background: linear-gradient(90deg, #d97706, #f59e0b); }
.monimoo-bar-fill--bad  { background: linear-gradient(90deg, #dc2626, #ef4444); }
.monimoo-bar-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--text-primary); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.monimoo-bar--sm { font-size: .8rem; }
.monimoo-bar--sm .monimoo-bar-track { height: 6px; }
.monimoo-bar--sm .monimoo-bar-value { font-size: .78rem; min-width: 56px; }
.monimoo-bar--lg .monimoo-bar-track { height: 12px; }
.monimoo-bar--empty .monimoo-bar-track { background: rgba(127,127,127,.08); }
.monimoo-bar--empty .monimoo-bar-value { color: var(--text-tertiary); }

.monimoo-spark { display: block; width: 100%; max-width: 260px; }
.monimoo-chart { display: block; width: 100%; color: var(--text-primary); }

/* MoniMoo: chart tabs */
.monimoo-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--border-color, rgba(127,127,127,.18));
    margin-bottom: 8px;
    overflow-x: auto;
}
.monimoo-tab {
    background: transparent; border: 0; cursor: pointer;
    padding: 8px 14px; font-size: .85rem; font-weight: 500;
    color: var(--text-secondary); font: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.monimoo-tab:hover { color: var(--text-primary); }
.monimoo-tab.is-active {
    color: var(--text-primary);
    border-bottom-color: #65a30d;
    font-weight: 600;
}
.monimoo-chart-frame[hidden] { display: none; }

/* ── MoniMoo: dark monitoring dashboard ───────────────────────────────── */
/* Scoped to .monimoo-dashboard so the rest of the app keeps its theme. */
.monimoo-dashboard {
    --md-bg-1: #0b1020;
    --md-bg-2: #131a35;
    --md-surface: rgba(255,255,255,.04);
    --md-surface-hi: rgba(255,255,255,.07);
    --md-border: rgba(255,255,255,.08);
    --md-border-strong: rgba(255,255,255,.16);
    --md-text: #e8eaf2;
    --md-text-dim: #9aa0bd;
    --md-text-mute: #6b7194;
    --md-good: #34d399;
    --md-warn: #fbbf24;
    --md-bad: #f87171;
    --md-accent: #7c8cff;

    margin: -16px;                       /* break out of the main-content padding */
    padding: 24px 24px 60px;
    color: var(--md-text);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(124,140,255,.18), transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, rgba(167,139,250,.15), transparent 60%),
        linear-gradient(180deg, var(--md-bg-1), var(--md-bg-2));
    border-radius: 12px;
    min-height: calc(100vh - 96px);
}
.monimoo-dashboard .md-page-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.monimoo-dashboard .md-page-title { color: var(--md-text); font-size: 1.4rem; font-weight: 600; }
.monimoo-dashboard .md-page-subtitle { color: var(--md-text-dim); font-size: .9rem; margin-top: 4px; }

.monimoo-dashboard .md-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 22px; }
.monimoo-dashboard .md-stat {
    background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 12px;
    padding: 14px 16px;
}
.monimoo-dashboard .md-stat-label { font-size: .7rem; color: var(--md-text-mute); text-transform: uppercase; letter-spacing: .08em; }
.monimoo-dashboard .md-stat-value { font-size: 1.4rem; font-weight: 600; margin-top: 4px; }
.monimoo-dashboard .md-stat-value.is-good { color: var(--md-good); }
.monimoo-dashboard .md-stat-value.is-warn { color: var(--md-warn); }
.monimoo-dashboard .md-stat-value.is-bad  { color: var(--md-bad); }

/* Column header — the fixed labels above the host card list. */
.monimoo-dashboard .md-list-head {
    display: grid;
    grid-template-columns: 24px minmax(220px, 1.6fr) 1fr 1fr 1fr 200px;
    gap: 22px;
    padding: 6px 22px 4px;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    color: var(--md-text-mute); text-transform: uppercase;
}

/* Remote-Admin live-console */
.task-console-wrap {
    background: #0f172a;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.task-console-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px;
    background: rgba(255,255,255,.04);
    color: #e2e8f0;
    font-size: .82rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.task-console-live {
    color: #facc15;
    font-weight: 600;
    animation: tc-pulse 1.6s ease-in-out infinite;
}
@keyframes tc-pulse { 50% { opacity: .35; } }
.task-console {
    margin: 0; padding: 14px 16px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
    max-height: 60vh; overflow-y: auto;
}

/* OS picker tiles on the agent-install card (after token creation) */
.agent-os-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 22px 18px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .12s;
    text-align: center;
}
.agent-os-tile:hover { background: rgba(255,255,255,.04); transform: translateY(-1px); }
.agent-os-tile.is-active {
    border-color: var(--color-primary);
    background: rgba(101,163,13,.08);
}
.agent-os-tile .agent-os-icon { font-size: 2.4rem; line-height: 1; }
.agent-os-tile .agent-os-name { font-size: 1.05rem; font-weight: 600; }
.agent-os-tile .agent-os-hint { font-size: .78rem; color: var(--text-secondary); }

/* MoniMoo dashboard: tenant blocks (admin-only, ≥ 2 tenants) */
.monimoo-dashboard .md-tenant-block {
    margin-bottom: 28px;
    border: 1px solid var(--md-border);
    border-radius: 16px;
    padding: 4px 14px 14px;
    background: linear-gradient(180deg, rgba(124,140,255,.04), transparent 80px);
}
.monimoo-dashboard .md-tenant-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 6px 10px;
    border-bottom: 1px dashed var(--md-border); margin-bottom: 14px;
}
.monimoo-dashboard .md-tenant-head .icon { font-size: 1.2rem; opacity: .85; }
.monimoo-dashboard .md-tenant-head .name {
    font-size: 1.05rem; font-weight: 600; color: var(--md-text);
}
.monimoo-dashboard .md-tenant-head .md-tenant-count {
    font-size: .72rem; font-weight: 600; letter-spacing: .12em;
    color: var(--md-text-mute); text-transform: uppercase;
}
.monimoo-dashboard .md-tenant-head .md-tenant-link {
    margin-left: auto; font-size: .8rem; color: var(--md-text-mute);
    text-decoration: none;
}
.monimoo-dashboard .md-tenant-head .md-tenant-link:hover { color: var(--md-text); }

.monimoo-dashboard .md-section { margin-bottom: 22px; }
.monimoo-dashboard .md-section-head {
    display: flex; align-items: center; gap: 14px; margin: 8px 8px 10px;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    color: var(--md-text-dim); text-transform: uppercase;
}
.monimoo-dashboard .md-section-head .md-count { color: var(--md-text-mute); font-weight: 500; letter-spacing: .08em; }
.monimoo-dashboard .md-section-head .md-line { flex: 1; height: 1px; background: var(--md-border); }
.monimoo-dashboard .md-section-head.is-ungrouped { color: var(--md-text-mute); }

.monimoo-dashboard .md-card-list { display: flex; flex-direction: column; gap: 8px; }

.monimoo-dashboard .md-card {
    display: grid;
    grid-template-columns: 24px minmax(220px, 1.6fr) 1fr 1fr 1fr 200px;
    gap: 22px; align-items: center;
    background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 14px;
    padding: 14px 22px; cursor: pointer; text-decoration: none; color: inherit;
    backdrop-filter: blur(10px);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.monimoo-dashboard .md-card:hover { background: var(--md-surface-hi); border-color: var(--md-border-strong); }
.monimoo-dashboard .md-card.is-offline { opacity: .65; }
.monimoo-dashboard .md-card.is-offline .md-bar > span { background: rgba(255,255,255,.16) !important; }
/* Externe Hosts behalten dasselbe 6-Spalten-Grid wie Agent-Hosts, damit der
   Tabellenkopf (CPU/RAM/DISK/Status) mit der Karte fluchtet. Das Info-Pill
   ersetzt die drei Metrik-Spalten in einem einzigen Span, die Status-Spalte
   bleibt am gewohnten Platz rechts. Auf Mobile (siehe Media-Query weiter
   unten) wird der Span gestreckt, damit die Karte das schmalere 3-Spalten-
   Grid nicht ueber den Rand schiebt. */
.monimoo-dashboard .md-card.is-external .md-external-info {
    grid-column: 3 / span 3;
}

/* ── List/Tiles view toggle (segmented control next to the search bar) ──── */
.monimoo-dashboard .md-view-toggle {
    display: inline-flex; flex-shrink: 0;
    border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden;
}
.monimoo-dashboard .md-view-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    background: var(--bg-input); border: 0; cursor: pointer;
    color: var(--md-text-mute); font-size: 1.05rem; line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.monimoo-dashboard .md-view-btn + .md-view-btn { border-left: 1px solid var(--border-color); }
.monimoo-dashboard .md-view-btn:hover { color: var(--md-text); }
.monimoo-dashboard .md-view-btn.is-active { background: var(--color-primary); color: #fff; }

/* ── Tile (Kachel) view: compact, status-grouped grid ──────────────────── */
.monimoo-dashboard .md-tiles { display: flex; flex-direction: column; gap: 20px; }
.monimoo-dashboard .md-tiles-group-head {
    display: flex; align-items: center; gap: 10px; margin: 0 4px 10px;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--md-text-dim);
}
.monimoo-dashboard .md-tiles-group-head .count { color: var(--md-text-mute); font-weight: 500; letter-spacing: .08em; }
.monimoo-dashboard .md-tiles-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.monimoo-dashboard .md-tile {
    display: flex; align-items: center; gap: 11px; min-width: 0;
    background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 12px;
    padding: 11px 14px; text-decoration: none; color: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.monimoo-dashboard .md-tile:hover { background: var(--md-surface-hi); border-color: var(--md-border-strong); }
.monimoo-dashboard .md-tile.is-down { opacity: .6; }
/* Im dichten Raster pulsieren sonst zig gruene Punkte gleichzeitig -- statisch. */
.monimoo-dashboard .md-tile .md-dot { animation: none; }
.monimoo-dashboard .md-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.monimoo-dashboard .md-tile-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--md-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.monimoo-dashboard .md-tile-sub {
    font-size: .68rem; color: var(--md-text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.monimoo-dashboard .md-tile-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
/* RustDesk-ID-Chip in der Kachel: Klick kopiert (Handler unterbindet Navigation). */
.monimoo-dashboard .md-tile-rd {
    display: inline-flex; align-items: center; gap: 5px; width: fit-content;
    margin-top: 3px; margin-left: -4px; padding: 1px 5px; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem;
    color: var(--md-text-dim); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.monimoo-dashboard .md-tile-rd:hover,
.monimoo-dashboard .md-tile-rd:focus-visible { background: rgba(255,255,255,.06); color: var(--md-text); outline: none; }
.monimoo-dashboard .md-tile-rd.is-copied { color: var(--md-good); }
.monimoo-dashboard .md-tile-rd .rd-ic { font-size: .72rem; opacity: .7; }
.monimoo-dashboard .md-tile-rd .rd-val { font-variant-numeric: tabular-nums; white-space: nowrap; }

.monimoo-dashboard .md-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--md-good); justify-self: center; flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(52,211,153,.18);
    animation: md-pulse 2.4s ease-in-out infinite;
}
.monimoo-dashboard .md-dot.is-warn    { background: var(--md-warn); box-shadow: 0 0 0 4px rgba(251,191,36,.18); animation: none; }
.monimoo-dashboard .md-dot.is-offline { background: var(--md-bad);  box-shadow: 0 0 0 4px rgba(248,113,113,.18); animation: none; }
.monimoo-dashboard .md-dot.is-unknown { background: var(--md-text-mute); box-shadow: 0 0 0 4px rgba(107,113,148,.18); animation: none; }
@keyframes md-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
    50%     { box-shadow: 0 0 0 6px rgba(52,211,153,.06); }
}

.monimoo-dashboard .md-name-block { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.monimoo-dashboard .md-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md-text); }
.monimoo-dashboard .md-meta { font-size: .72rem; color: var(--md-text-mute); }

.monimoo-dashboard .md-metric { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.monimoo-dashboard .md-metric-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.monimoo-dashboard .md-metric-label { font-size: .63rem; font-weight: 700; letter-spacing: .12em; color: var(--md-text-mute); text-transform: uppercase; }
.monimoo-dashboard .md-metric-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--md-text); font-variant-numeric: tabular-nums; }
.monimoo-dashboard .md-bar {
    height: 5px; border-radius: 999px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
}
.monimoo-dashboard .md-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--md-good), #22d3ee);
    transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.monimoo-dashboard .md-bar.is-warn > span { background: linear-gradient(90deg, var(--md-warn), #fb923c); }
.monimoo-dashboard .md-bar.is-bad  > span { background: linear-gradient(90deg, var(--md-bad),  #fb7185); }

/* Per-mount disk cards (host overview) */
.monimoo-dashboard .md-disks { display: flex; flex-direction: column; gap: 8px; }
.monimoo-dashboard .md-disk-block {
    background: var(--md-surface); border: 1px solid var(--md-border);
    border-radius: 12px; overflow: hidden;
    transition: border-color .2s ease;
}
.monimoo-dashboard .md-disk-block.is-open { border-color: rgba(124,140,255,.4); }
.monimoo-dashboard .md-disk-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) 2fr 80px 130px 22px;
    gap: 14px; align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background .15s ease;
}
.monimoo-dashboard .md-disk-row:hover  { background: rgba(255,255,255,.04); }
.monimoo-dashboard .md-disk-row:focus-visible {
    outline: 2px solid var(--md-text-mute); outline-offset: -2px;
}
.monimoo-dashboard .md-disk-expander {
    color: var(--md-text-mute); font-size: 1rem; text-align: right;
    transition: transform .2s ease;
}
.monimoo-dashboard .md-disk-block.is-open .md-disk-expander { transform: rotate(180deg); }
.monimoo-dashboard .md-disk-body {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--md-border);
    background: rgba(0,0,0,.12);
}
.monimoo-dashboard .md-disk-tf-bar { margin-bottom: 12px; }
/* Chart.js needs a parent with a fixed height when responsive=true +
   maintainAspectRatio=false; otherwise the canvas's intrinsic-height feedback
   loop with the ResizeObserver causes the chart to grow on every redraw. */
.monimoo-dashboard .md-disk-chart-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}
.monimoo-dashboard .md-disk-chart  {
    position: absolute; inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.monimoo-dashboard .md-disk-chart-empty {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    background: rgba(15,23,42,.85);
    color: var(--md-text-mute);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .82rem;
    text-align: center;
    pointer-events: none;
}
.monimoo-dashboard .md-disk-mount {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem; font-weight: 500;
    color: var(--md-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.monimoo-dashboard .md-disk-bar {
    height: 6px; border-radius: 999px;
    background: rgba(255,255,255,.07); overflow: hidden;
}
.monimoo-dashboard .md-disk-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--md-good), #22d3ee);
    transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.monimoo-dashboard .md-disk-bar.is-warn > span { background: linear-gradient(90deg, var(--md-warn), #fb923c); }
.monimoo-dashboard .md-disk-bar.is-bad  > span { background: linear-gradient(90deg, var(--md-bad),  #fb7185); }
.monimoo-dashboard .md-disk-pct {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem; font-weight: 600; text-align: right;
    color: var(--md-text); font-variant-numeric: tabular-nums;
}
.monimoo-dashboard .md-disk-size {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem; text-align: right;
    color: var(--md-text-mute); font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .monimoo-dashboard .md-disk-row { grid-template-columns: 1fr; gap: 6px; }
    .monimoo-dashboard .md-disk-pct, .monimoo-dashboard .md-disk-size { text-align: left; }
}

.monimoo-dashboard .md-status-col { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.monimoo-dashboard .md-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap;
    background: rgba(248,113,113,.14); color: var(--md-bad); border: 1px solid rgba(248,113,113,.25);
}
.monimoo-dashboard .md-badge.is-good { background: rgba(52,211,153,.12); color: var(--md-good); border-color: rgba(52,211,153,.22); }
.monimoo-dashboard .md-badge.is-mute { background: rgba(255,255,255,.05); color: var(--md-text-dim); border-color: var(--md-border); }
.monimoo-dashboard .md-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600;
    font-family: ui-monospace, monospace;
    background: rgba(255,255,255,.04); color: var(--md-text-dim); border: 1px solid var(--md-border);
}
.monimoo-dashboard .md-pill.is-good { background: rgba(52,211,153,.10); color: var(--md-good); border-color: rgba(52,211,153,.22); }
.monimoo-dashboard .md-pill.is-warn { background: rgba(251,191,36,.10); color: var(--md-warn); border-color: rgba(251,191,36,.25); }
.monimoo-dashboard .md-pill.is-bad  { background: rgba(248,113,113,.10); color: var(--md-bad);  border-color: rgba(248,113,113,.25); }

.monimoo-dashboard .md-external-info {
    display: flex; align-items: center; gap: 12px;
    font-size: .85rem; color: var(--md-text-dim);
    padding: 10px 14px; border-radius: 10px;
    background: rgba(124,140,255,.06); border: 1px solid rgba(124,140,255,.15);
}
.monimoo-dashboard .md-external-info .icon { font-size: 1.1rem; }
.monimoo-dashboard .md-external-info .meta { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--md-text-mute); margin-left: auto; }

.monimoo-dashboard .md-empty {
    text-align: center; padding: 60px 20px;
    background: var(--md-surface); border: 1px dashed var(--md-border); border-radius: 18px;
    color: var(--md-text-dim);
}

@media (max-width: 900px) {
    .monimoo-dashboard .md-list-head { display: none; }
    .monimoo-dashboard .md-card {
        grid-template-columns: 24px 1fr 130px;
        grid-template-areas:
            "dot name badge"
            "cpu cpu  cpu"
            "ram ram  ram"
            "disk disk disk";
        gap: 10px 14px; padding: 14px 16px;
    }
    .monimoo-dashboard .md-card > .md-dot { grid-area: dot; }
    .monimoo-dashboard .md-card > .md-name-block { grid-area: name; }
    .monimoo-dashboard .md-card > .md-status-col { grid-area: badge; }
    .monimoo-dashboard .md-card > .md-cpu { grid-area: cpu; }
    .monimoo-dashboard .md-card > .md-ram { grid-area: ram; }
    .monimoo-dashboard .md-card > .md-disk { grid-area: disk; }
    .monimoo-dashboard .md-card.is-external {
        grid-template-columns: 24px 1fr 130px;
        grid-template-areas:
            "dot name badge"
            "info info info";
    }
    .monimoo-dashboard .md-card.is-external .md-external-info {
        grid-area: info;
        grid-column: 1 / -1;
    }
}

/* ── MoniMoo: host detail page (mon-style) ────────────────────────────── */
.monimoo-dashboard .md-section {
    background: var(--md-surface); border: 1px solid var(--md-border);
    border-radius: 18px; padding: 22px 26px; backdrop-filter: blur(14px);
    margin-bottom: 18px;
}
.monimoo-dashboard .md-section-h {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.monimoo-dashboard .md-section-h h2 { font-size: 1.05rem; font-weight: 600; color: var(--md-text); }
.monimoo-dashboard .md-section-h .meta-line { color: var(--md-text-dim); font-size: .84rem; }

.monimoo-dashboard .md-host-info { display: flex; flex-wrap: wrap; gap: 18px 28px; font-size: .92rem; }
.monimoo-dashboard .md-host-info .item { display: flex; flex-direction: column; gap: 3px; }
.monimoo-dashboard .md-host-info .lbl { font-size: .68rem; font-weight: 700; letter-spacing: .10em; color: var(--md-text-mute); text-transform: uppercase; }
.monimoo-dashboard .md-host-info .val { font-family: ui-monospace, monospace; color: var(--md-text); }

.monimoo-dashboard .md-status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: rgba(52,211,153,.12); color: var(--md-good); border: 1px solid rgba(52,211,153,.25);
}
.monimoo-dashboard .md-status-pill.is-bad  { background: rgba(248,113,113,.12); color: var(--md-bad);  border-color: rgba(248,113,113,.25); }
.monimoo-dashboard .md-status-pill.is-warn { background: rgba(251,191,36,.12); color: var(--md-warn); border-color: rgba(251,191,36,.25); }
.monimoo-dashboard .md-status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.monimoo-dashboard .md-toolbar {
    display: flex; gap: 8px; padding: 6px;
    background: var(--md-surface); border: 1px solid var(--md-border);
    border-radius: 14px; width: fit-content; margin-bottom: 14px;
}
.monimoo-dashboard .md-seg {
    padding: 7px 14px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: var(--md-text-dim); font: inherit;
    font-weight: 500; font-size: .85rem; transition: all .2s;
}
.monimoo-dashboard .md-seg:hover { color: var(--md-text); background: var(--md-surface-hi); }
.monimoo-dashboard .md-seg.is-active {
    color: #fff; background: linear-gradient(135deg, var(--md-accent), #a78bfa);
    box-shadow: 0 4px 12px rgba(124,140,255,.3);
}

.monimoo-dashboard .md-metric-tabs {
    display: flex; gap: 6px; padding: 4px;
    background: rgba(255,255,255,.04); border-radius: 10px;
    width: fit-content; margin-bottom: 14px;
}
.monimoo-dashboard .md-metric-tab {
    padding: 6px 12px; border: 0; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--md-text-dim); font: inherit;
    font-size: .8rem; font-weight: 500; transition: all .2s;
}
.monimoo-dashboard .md-metric-tab:hover { color: var(--md-text); }
.monimoo-dashboard .md-metric-tab.is-active { background: var(--md-surface-hi); color: var(--md-text); }

.monimoo-dashboard canvas.md-chart { max-height: 340px; display: block; width: 100%; }

/* Sensor rows */
.monimoo-dashboard .md-sensor-row {
    background: rgba(255,255,255,.025); border: 1px solid var(--md-border);
    border-radius: 12px; margin-bottom: 8px; overflow: hidden;
}
.monimoo-dashboard .md-sensor-row.is-disabled { opacity: .55; }
.monimoo-dashboard .md-sensor-head {
    display: grid; grid-template-columns: 32px 1fr 130px 1fr 110px 24px;
    gap: 14px; align-items: center; padding: 14px 18px; cursor: pointer;
    transition: background .2s ease;
}
.monimoo-dashboard .md-sensor-head:hover { background: var(--md-surface-hi); }
.monimoo-dashboard .md-sensor-icon { font-size: 1.1rem; text-align: center; }
.monimoo-dashboard .md-sensor-icon.ok       { color: var(--md-good); }
.monimoo-dashboard .md-sensor-icon.warning  { color: var(--md-warn); }
.monimoo-dashboard .md-sensor-icon.critical { color: var(--md-bad); }
.monimoo-dashboard .md-sensor-icon.unknown  { color: var(--md-text-mute); }
.monimoo-dashboard .md-sensor-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.monimoo-dashboard .md-sensor-name { font-weight: 500; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md-text); }
.monimoo-dashboard .md-sensor-type { font-size: .72rem; color: var(--md-text-mute); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.monimoo-dashboard .md-sensor-tag {
    display: inline-block; padding: 3px 9px; border-radius: 6px;
    font-size: .7rem; font-weight: 600; background: rgba(255,255,255,.05);
    color: var(--md-text-dim); font-family: ui-monospace, monospace;
    text-align: center; white-space: nowrap;
}
.monimoo-dashboard .md-sensor-msg { font-size: .85rem; color: var(--md-text); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monimoo-dashboard .md-sensor-time { font-size: .78rem; color: var(--md-text-mute); text-align: right; }
.monimoo-dashboard .md-expander { color: var(--md-text-mute); transition: transform .2s ease; text-align: center; }
.monimoo-dashboard .md-sensor-row.is-open .md-expander { transform: rotate(180deg); }
.monimoo-dashboard .md-sensor-body { padding: 0 18px 18px; border-top: 1px solid var(--md-border); background: rgba(0,0,0,.15); }
.monimoo-dashboard .md-sensor-body[hidden] { display: none; }
.monimoo-dashboard .md-sensor-body canvas { max-height: 220px; display: block; width: 100%; margin: 14px 0 8px; }

.monimoo-dashboard .md-results-head { margin-top: 6px; margin-bottom: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .10em; color: var(--md-text-mute); text-transform: uppercase; }
.monimoo-dashboard .md-results-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.monimoo-dashboard .md-results-table th { text-align: left; font-size: .68rem; font-weight: 700; color: var(--md-text-mute); text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px; border-bottom: 1px solid var(--md-border); }
.monimoo-dashboard .md-results-table td { padding: 8px 10px; border-bottom: 1px solid var(--md-border); font-family: ui-monospace, monospace; color: var(--md-text); }
.monimoo-dashboard .md-results-table tr:last-child td { border-bottom: 0; }
.monimoo-dashboard .md-results-table .status.ok       { color: var(--md-good); }
.monimoo-dashboard .md-results-table .status.warning  { color: var(--md-warn); }
.monimoo-dashboard .md-results-table .status.critical { color: var(--md-bad); }
.monimoo-dashboard .md-results-table .status.unknown  { color: var(--md-text-mute); }

.monimoo-dashboard .md-back-link { color: var(--md-text-dim); text-decoration: none; font-size: .85rem; }
.monimoo-dashboard .md-back-link:hover { color: var(--md-text); }
.monimoo-dashboard .md-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.monimoo-dashboard .md-btn {
    padding: 7px 14px; border: 1px solid var(--md-border); border-radius: 9px;
    background: var(--md-surface); color: var(--md-text-dim); font: inherit;
    font-size: .82rem; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, color .15s;
}
.monimoo-dashboard .md-btn:hover { background: var(--md-surface-hi); color: var(--md-text); }
.monimoo-dashboard .md-btn.is-primary { background: linear-gradient(135deg, var(--md-accent), #a78bfa); border-color: transparent; color: #fff; }
.monimoo-dashboard .md-btn.is-danger  { color: var(--md-bad); border-color: rgba(248,113,113,.28); }

@media (max-width: 800px) {
    .monimoo-dashboard .md-sensor-head {
        grid-template-columns: 32px 1fr 24px;
        grid-template-areas: "icon title chev" "tag tag tag" "msg msg msg" "time time time";
        gap: 6px 12px;
    }
    .monimoo-dashboard .md-sensor-head .md-sensor-icon { grid-area: icon; }
    .monimoo-dashboard .md-sensor-head .md-sensor-title { grid-area: title; }
    .monimoo-dashboard .md-sensor-head > :nth-child(3) { grid-area: tag; width: fit-content; }
    .monimoo-dashboard .md-sensor-head .md-sensor-msg { grid-area: msg; white-space: normal; }
    .monimoo-dashboard .md-sensor-head .md-sensor-time { grid-area: time; text-align: left; }
    .monimoo-dashboard .md-sensor-head .md-expander { grid-area: chev; }
}

/* ── MoniMoo: GLOBAL THEME OVERRIDE ─────────────────────────────────────── */
/* This block wins over every [data-theme="…"] declaration above because it
 * comes later in the cascade. Result: regardless of which theme the user
 * picked in their profile, every MoniMoo page renders with the same dark,
 * monochrome look — sidebar, topbar, cards, tables, forms.
 *
 * If you ever want Plenvo-style multi-theme back, delete this block.
 */
:root,
[data-theme="light"], [data-theme="sepia"],   [data-theme="forest"],
[data-theme="crimson"], [data-theme="slate"], [data-theme="dark"],
[data-theme="midnight"], [data-theme="ocean"], [data-theme="matrix"],
[data-theme="bluescreen"], [data-theme="monimoo"] {
    --color-primary:        #65a30d;
    --color-primary-dark:   #4d7c0f;
    --color-primary-light:  rgba(101,163,13,.18);
    --color-secondary:      #a78bfa;
    --color-success:        #34d399;
    --color-warning:        #fbbf24;
    --color-danger:         #f87171;
    --color-info:           #7c8cff;

    --bg-base:        #0b1020;
    --bg-page:        #0b1020;
    --bg-card:        rgba(255,255,255,.04);
    --bg-card-strong: rgba(255,255,255,.07);
    --bg-sidebar:     #0a0e1f;
    --bg-topbar:      rgba(11,16,32,.85);
    --bg-input:       rgba(255,255,255,.05);
    --bg-hover:       rgba(255,255,255,.06);
    --bg-table-head:  rgba(255,255,255,.04);
    --bg-secondary:   rgba(255,255,255,.06);

    --text-primary:        #e8eaf2;
    --text-secondary:      #9aa0bd;
    --text-muted:          #6b7194;
    --text-tertiary:       #6b7194;
    --text-sidebar:        #9aa0bd;
    --text-sidebar-active: #ffffff;

    --border-color:    rgba(255,255,255,.08);
    --border-strong:   rgba(255,255,255,.16);
    --shadow-card:     0 10px 30px rgba(0,0,0,.35);
    color-scheme: dark;
}

html, body {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(124,140,255,.18), transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, rgba(167,139,250,.15), transparent 60%),
        linear-gradient(180deg, #0b1020, #131a35);
    color: var(--text-primary);
    min-height: 100vh;
}
body { background-attachment: fixed; }

/* App layout chrome */
.app-layout, .main-wrapper, .main-content { background: transparent; }
.sidebar { background: var(--bg-sidebar) !important; border-right: 1px solid var(--border-color); }
.sidebar-logo, .sidebar-logo-text { color: var(--text-primary) !important; }
.sidebar-logo-text { color: #fff; }
.sidebar-nav .nav-item { color: var(--text-sidebar); }
.sidebar-nav .nav-item.active,
.sidebar-nav .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav .nav-label { color: var(--text-muted); }
.sidebar-nav .nav-separator { border-color: var(--border-color); }
.sidebar-nav .nav-subitem { color: var(--text-sidebar); }
.sidebar-nav .nav-subitem:hover, .sidebar-nav .nav-subitem.active { color: #fff; }
.sidebar-user { border-top-color: var(--border-color); }
.sidebar-user-info, .sidebar-user-info:hover { color: var(--text-sidebar); }
.sidebar-user-name { color: var(--text-primary); }
.sidebar-user-role { color: var(--text-muted); }

.topbar {
    background: var(--bg-topbar) !important;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
}
.topbar-search {
    background: rgba(255,255,255,.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary);
}
.topbar-search:hover { background: rgba(255,255,255,.08) !important; }
.topbar-search-text, .topbar-search-kbd { color: var(--text-secondary); border-color: var(--border-color); background: transparent; }
.icon-btn, .topbar-menu-btn, .user-menu-btn { color: var(--text-secondary); }
.icon-btn:hover, .topbar-menu-btn:hover, .user-menu-btn:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.user-dropdown, .notif-dropdown {
    background: #161c33 !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
}

/* Modals -- ohne diesen Override erbt .modal-box den theme-eigenen
   --bg-card (rgba(255,255,255,.04)), wodurch der Dialog praktisch
   transparent ist und der Inhalt (z.B. die Mail-Warteschlange) auf der
   dahinterliegenden Seite kaum lesbar bleibt. Solider Hintergrund analog
   .user-dropdown. */
.modal-box {
    background: #161c33 !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
}
.dropdown-item, .dropdown-item:visited { color: var(--text-primary); }
.dropdown-item:hover { background: rgba(255,255,255,.06); }
.dropdown-divider { background: var(--border-color); }

/* Cards / sections */
.card, .section, .ext-section, .auth-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-card);
}
.card-header, .card-body { background: transparent; color: var(--text-primary); }
.card-header { border-bottom-color: var(--border-color); }
.card-title { color: var(--text-primary); }
.card-meta { color: var(--text-secondary); }

/* Page header */
.page-header { color: var(--text-primary); }
.page-title { color: var(--text-primary); }
.page-subtitle { color: var(--text-secondary); }

/* Tables */
.data-table, table.data-table { background: transparent; color: var(--text-primary); }
.data-table th { background: var(--bg-table-head); color: var(--text-muted); border-color: var(--border-color); }
.data-table td { border-color: var(--border-color); color: var(--text-primary); }
.data-table tr:hover td { background: rgba(255,255,255,.025); }

/* Forms */
.form-input, .form-select, .form-textarea, input[type=text], input[type=email],
input[type=password], input[type=number], input[type=url], textarea, select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(101,163,13,.18) !important;
    outline: none;
}
.form-input::placeholder, textarea::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-secondary); }
.form-hint { color: var(--text-muted); }
option { background: #161c33; color: var(--text-primary); }
.checkbox-label { color: var(--text-secondary); }
.checkbox-label input { accent-color: var(--color-primary); }

/* Buttons */
.btn { color: var(--text-primary); }
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), #84cc16);
    border-color: transparent; color: #fff;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.btn-ghost {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); color: var(--text-primary); }
.btn-ghost.danger, .btn-danger {
    color: var(--color-danger); border-color: rgba(248,113,113,.28);
    background: rgba(248,113,113,.08);
}
.btn-ghost.danger:hover, .btn-danger:hover { background: rgba(248,113,113,.18); }

/* Badges */
.badge { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); }
.badge-primary  { background: rgba(124,140,255,.14); color: #c5cfff; border-color: rgba(124,140,255,.28); }
.badge-success  { background: rgba(52,211,153,.12); color: var(--color-success); border-color: rgba(52,211,153,.25); }
.badge-warning  { background: rgba(251,191,36,.12); color: var(--color-warning); border-color: rgba(251,191,36,.25); }
.badge-danger   { background: rgba(248,113,113,.12); color: var(--color-danger);  border-color: rgba(248,113,113,.25); }
.badge-secondary{ background: rgba(255,255,255,.06); color: var(--text-secondary); border-color: var(--border-color); }

/* Alerts */
.alert { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); }
.alert-success { background: rgba(52,211,153,.10); color: var(--color-success); border-color: rgba(52,211,153,.25); }
.alert-error,
.alert-danger  { background: rgba(248,113,113,.10); color: var(--color-danger);  border-color: rgba(248,113,113,.25); }
.alert-warning { background: rgba(251,191,36,.10); color: var(--color-warning); border-color: rgba(251,191,36,.25); }

/* Footer — keep the opaque dark bar from the base definition; only refine
   the muted text/border tokens here. Transparent override removed because
   it made the footer unreadable on dashboard pages with a radial-gradient
   background. */
.app-footer { color: var(--text-muted); border-top: 1px solid var(--border-color); }

/* Auth (login / install) layout */
.auth-body { background: transparent; }
.auth-wrapper { color: var(--text-primary); }
.auth-card { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }
.auth-title, .auth-subtitle, .auth-form label { color: var(--text-primary); }
.auth-subtitle, .auth-footer, .auth-footer a { color: var(--text-secondary); }
.auth-form .form-input { background: var(--bg-input); }

/* Empty / hint blocks */
.empty-state, .empty-state-small { color: var(--text-secondary); border-color: var(--border-color); background: rgba(255,255,255,.02); }

/* The progress bar in the global helper now reads cleanly on dark too. */
.monimoo-bar-track { background: rgba(255,255,255,.08); }

/* Scrollbar — subtle, dark */
* { scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
*::-webkit-scrollbar-track { background: transparent; }

/* The dashboard wrapper used to break out of the main-content padding for
 * its dark background. Now that the whole app is dark, that breakout is no
 * longer needed; reset the negative margin so content lines up nicely with
 * sidebar/topbar gutters across all pages. The .md-* classes still style
 * the dashboard's grid layout, just without the visual island. */
.monimoo-dashboard {
    margin: 0;
    padding: 0;
    background: transparent;
    min-height: auto;
    border-radius: 0;
}

/* MoniMoo: host group drag-to-reorder */
.host-group-list { display: flex; flex-direction: column; gap: 8px; }
.host-group-row {
    display: grid; grid-template-columns: 28px 1fr auto auto;
    gap: 14px; align-items: center;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 10px 14px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.host-group-row:hover { background: rgba(255,255,255,.06); }
.host-group-row.sortable-ghost { opacity: .35; }
.host-group-row.sortable-chosen { box-shadow: 0 6px 18px rgba(0,0,0,.25); border-color: rgba(124,140,255,.5); }
.host-group-row.is-saving { box-shadow: 0 0 0 2px rgba(101,163,13,.4); }
.host-group-row .drag-handle {
    cursor: grab; color: var(--text-muted); user-select: none;
    text-align: center; font-family: ui-monospace, monospace; font-size: 1rem;
    line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.host-group-row .drag-handle:hover { color: var(--text-primary); background: rgba(255,255,255,.05); }
.host-group-row .drag-handle:active { cursor: grabbing; }
.host-group-row .gname { font-weight: 500; color: var(--text-primary); }
.host-group-row .gmeta { color: var(--text-muted); font-size: .82rem; font-family: ui-monospace, monospace; }
.host-group-row form, .host-group-row .row-actions { display: inline-flex; gap: 6px; align-items: center; }
.host-group-row input[type="text"] { flex: 1; min-width: 160px; }
.host-groups-hint {
    margin-bottom: 10px; padding: 8px 12px; border-radius: 8px;
    background: rgba(124,140,255,.06); border: 1px solid rgba(124,140,255,.18);
    color: var(--text-secondary); font-size: .82rem;
}

/* MoniMoo: dashboard search */
.monimoo-dashboard .md-search { position: relative; margin-bottom: 18px; }
.monimoo-dashboard .md-search input {
    width: 100%; padding: 13px 18px 13px 46px;
    background: var(--bg-input); border: 1px solid var(--border-color);
    border-radius: 12px; color: var(--text-primary);
    font: inherit; font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
}
.monimoo-dashboard .md-search input::placeholder { color: var(--text-muted); }
.monimoo-dashboard .md-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(101,163,13,.18);
}
.monimoo-dashboard .md-search::before {
    content: '🔍'; position: absolute; top: 50%; left: 16px;
    transform: translateY(-50%); font-size: 1rem; pointer-events: none; opacity: .65;
}

.monimoo-dashboard .md-search-results {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 14px; overflow: hidden; margin-bottom: 22px;
}
.monimoo-dashboard .md-search-result {
    display: grid; grid-template-columns: 32px 1fr 110px;
    gap: 14px; align-items: center; padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer; text-decoration: none; color: inherit;
    transition: background .15s ease;
}
.monimoo-dashboard .md-search-result:hover { background: rgba(255,255,255,.05); }
.monimoo-dashboard .md-search-result:last-child { border-bottom: 0; }
.monimoo-dashboard .md-search-result .icon { font-size: 1.1rem; text-align: center; line-height: 1; }
.monimoo-dashboard .md-search-result .icon.ok       { color: var(--color-success); }
.monimoo-dashboard .md-search-result .icon.warning  { color: var(--color-warning); }
.monimoo-dashboard .md-search-result .icon.critical { color: var(--color-danger); }
.monimoo-dashboard .md-search-result .icon.unknown  { color: var(--text-muted); }
.monimoo-dashboard .md-search-result .info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.monimoo-dashboard .md-search-result .sname { font-size: .95rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.monimoo-dashboard .md-search-result .smeta { font-size: .72rem; color: var(--text-muted); font-family: ui-monospace, monospace; letter-spacing: .04em; }
.monimoo-dashboard .md-search-result .smsg  { font-size: .78rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.monimoo-dashboard .md-search-result .stime { font-size: .76rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.monimoo-dashboard .md-search-empty { padding: 36px 20px; text-align: center; color: var(--text-secondary); font-size: .92rem; }

/* Group-pick rows look almost like sensor rows but with a neutral icon and a
   subtle hover so the user can tell they're navigation, not a status entry. */
.monimoo-dashboard .md-search-result.is-group .icon.group-icon { color: var(--text-secondary); font-size: 1.05rem; }
.monimoo-dashboard .md-search-result.is-group:hover { background: rgba(124,140,255,.08); }
.monimoo-dashboard .md-search-result.is-group .stime { color: var(--text-secondary); font-size: 1rem; }

/* Active host-group filter chip shown above the dashboard cards. */
.monimoo-dashboard .md-active-group {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 12px; margin: 0 0 14px;
    background: rgba(124,140,255,.10);
    border: 1px solid rgba(124,140,255,.28);
    border-radius: 999px;
    font-size: .85rem; color: var(--md-text);
}
.monimoo-dashboard .md-active-group .icon { font-size: 1rem; }
.monimoo-dashboard .md-active-group .md-active-group-label { color: var(--md-text-mute); }
.monimoo-dashboard .md-active-group .md-active-group-name { font-weight: 600; }
.monimoo-dashboard .md-active-group-clear {
    background: transparent; border: 0; cursor: pointer;
    color: var(--md-text-mute); font-size: 1.1rem; line-height: 1;
    padding: 2px 8px; border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
.monimoo-dashboard .md-active-group-clear:hover { background: rgba(248,113,113,.16); color: var(--md-bad); }

@media (max-width: 600px) {
    .monimoo-dashboard .md-search-result { grid-template-columns: 32px 1fr; gap: 10px; }
    .monimoo-dashboard .md-search-result .stime { display: none; }
}

/* MoniMoo: dashboard status filters */
.monimoo-dashboard .md-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 14px;
}
.monimoo-dashboard .md-filter-btn {
    padding: 7px 13px; border-radius: 999px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-secondary); font: inherit; font-size: .82rem; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    transition: all .15s ease;
}
.monimoo-dashboard .md-filter-btn:hover { background: rgba(255,255,255,.07); color: var(--text-primary); }
.monimoo-dashboard .md-filter-btn .count {
    display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: rgba(255,255,255,.08); color: var(--text-secondary);
    font-size: .72rem; font-weight: 600; font-family: ui-monospace, monospace;
    text-align: center; line-height: 1.4;
}
.monimoo-dashboard .md-filter-btn .dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--text-muted);
}
.monimoo-dashboard .md-filter-btn[data-filter="ok"] .dot       { background: var(--color-success); }
.monimoo-dashboard .md-filter-btn[data-filter="warning"] .dot  { background: var(--color-warning); }
.monimoo-dashboard .md-filter-btn[data-filter="critical"] .dot { background: var(--color-danger); }
.monimoo-dashboard .md-filter-btn[data-filter="unknown"] .dot  { background: var(--text-muted); }
.monimoo-dashboard .md-filter-btn[data-filter="stale"] .dot    { background: var(--color-warning); }
.monimoo-dashboard .md-filter-btn[data-filter="updates"] .dot  { background: #fbbf24; }

.monimoo-dashboard .md-filter-btn.is-active {
    background: linear-gradient(135deg, rgba(101,163,13,.18), rgba(124,140,255,.14));
    border-color: rgba(101,163,13,.4);
    color: var(--text-primary);
}
.monimoo-dashboard .md-filter-btn.is-active[data-filter="warning"] {
    background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.4); color: var(--color-warning);
}
.monimoo-dashboard .md-filter-btn.is-active[data-filter="critical"] {
    background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.4); color: var(--color-danger);
}
.monimoo-dashboard .md-filter-btn.is-active[data-filter="unknown"],
.monimoo-dashboard .md-filter-btn.is-active[data-filter="stale"] {
    background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.25); color: var(--text-primary);
}

/* ── Tab navigation (generic, no parent scope) ─────────────────────────
   Used wherever a page wants pill-style sub-tabs without pulling in the
   whole monimoo-dashboard wrapper. Mirrors .md-toolbar/.md-seg visually
   so the look stays consistent. */
.tabnav {
    display: inline-flex; gap: 4px; padding: 5px;
    background: var(--card-bg, rgba(255,255,255,.04));
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 12px; margin-bottom: 14px;
}
.tabnav-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 8px;
    color: var(--text-secondary, #9ca3af); text-decoration: none;
    font-size: .85rem; font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.tabnav-item:hover {
    color: var(--text-primary, #fff);
    background: rgba(255,255,255,.05);
}
.tabnav-item.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary, #6366f1), #a78bfa);
    box-shadow: 0 4px 12px rgba(124,140,255,.25);
}
.tabnav-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px;
    border-radius: 999px; font-size: .72rem; font-weight: 600;
    background: rgba(255,255,255,.08); color: var(--text-secondary, #9ca3af);
    line-height: 1;
}
.tabnav-item.is-active .tabnav-count {
    background: rgba(255,255,255,.22); color: #fff;
}

/* ── Remote-Admin two-column layout with sticky side-navigation ─────────
   Replaces the previous tab switcher. All three sections (Direkt-Befehl,
   Zeitpläne, Verlauf) live on one long page; the sidenav anchors jump
   directly to them. */
.ra-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 8px;
}
.ra-sidenav {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: var(--card-bg, rgba(255,255,255,.03));
    border: 1px solid var(--border-color, rgba(255,255,255,.06));
    border-radius: 12px;
}
.ra-sidenav-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-secondary, #9ca3af);
    text-decoration: none;
    font-size: .9rem; font-weight: 500;
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}
.ra-sidenav-item:hover {
    background: rgba(255,255,255,.05);
    color: var(--text-primary, #fff);
}
.ra-sidenav-item.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary, #6366f1), #a78bfa);
    box-shadow: 0 4px 12px rgba(124,140,255,.25);
}
.ra-sidenav-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px;
    border-radius: 999px; font-size: .72rem; font-weight: 600;
    background: rgba(255,255,255,.08); color: var(--text-secondary, #9ca3af);
    line-height: 1;
}
.ra-sidenav-item.is-active .ra-sidenav-count {
    background: rgba(255,255,255,.22); color: #fff;
}
/* Anchor scroll offset so section titles aren't hidden under the sticky
   app-bar at the top. */
.ra-section { scroll-margin-top: 24px; }
.ra-section + .ra-section { margin-top: 28px; }
.ra-section-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 600;
    margin: 0 0 12px; color: var(--text-primary, #fff);
}

@media (max-width: 800px) {
    .ra-layout { grid-template-columns: 1fr; }
    .ra-sidenav {
        position: sticky; top: 0; z-index: 5;
        flex-direction: row; overflow-x: auto;
    }
    .ra-sidenav-item { white-space: nowrap; }
}

html { scroll-behavior: smooth; }

/* Icon-Buttons mit zusaetzlichem Text-Label, das nur auf nicht-Touch-grossen
   Viewports erscheint. Auf Touch-Geraeten greifen title-Tooltips nicht, also
   muss das Verb sichtbar sein — auf Desktop bleibt der Knopf trotzdem
   kompakt, weil dort das Icon allein schon mit Hover-Title ausreicht. */
.btn-label-md { display: none; }
@media (min-width: 768px) {
    .btn-label-md { display: inline; margin-left: 4px; }
}

/* Globale Sensor-Status-Pills in der Topbar. Spiegeln die Dashboard-Filter
   (critical/warning/unknown) als kompakte, ueberall sichtbare Quick-Links.
   Klick fuehrt zu /dashboard#filter=<status>. Nur sichtbar wenn count > 0,
   damit die Topbar bei gesundem Zustand neutral bleibt. */
.topbar-status-pills {
    display: flex; gap: 6px; align-items: center;
    margin-right: 12px;
}
.topbar-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 700;
    text-decoration: none; line-height: 1;
    border: 1px solid transparent;
    transition: opacity .12s ease, transform .12s ease;
}
.topbar-pill:hover { opacity: .85; transform: translateY(-1px); }
.topbar-pill .dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
}
.topbar-pill-crit    { background: rgba(220,38,38,.14);  color: #dc2626; border-color: rgba(220,38,38,.28); }
.topbar-pill-crit .dot    { background: #dc2626; }
.topbar-pill-warn    { background: rgba(217,119,6,.14);  color: #d97706; border-color: rgba(217,119,6,.28); }
.topbar-pill-warn .dot    { background: #d97706; }
.topbar-pill-unknown { background: rgba(156,163,175,.14); color: #6b7280; border-color: rgba(156,163,175,.28); }
.topbar-pill-unknown .dot { background: #9ca3af; }
.topbar-pill-ok      { background: rgba(22,163,74,.12);   color: #16a34a; border-color: rgba(22,163,74,.26); }
.topbar-pill-ok .dot      { background: #16a34a; }
/* Pill mit Count = 0 wird gedimmt dargestellt -- die Farbe bleibt erhalten,
   damit der Operator den Status-Typ erkennt, der visuelle Lautstaerke wird
   aber zurueckgenommen damit das Auge auf die Pills mit echtem Count
   gezogen wird. Klick funktioniert weiter (Filter zeigt halt eine leere
   Liste, was als positives "nichts zu tun"-Signal in Ordnung ist). */
.topbar-pill.is-empty {
    opacity: .42;
    background: transparent;
}

/* Globale Topbar-Suche. Sitzt zwischen menue-btn und topbar-spacer; das
   Dropdown ist absolut positioniert und ueberdeckt die Hauptflaeche, damit
   es keinen Layout-Shift verursacht wenn Treffer auftauchen. Daten kommen
   ueber /api/dashboard (lazy beim ersten Tipp), die Suche selbst laeuft
   dann clientseitig. */
.topbar-search {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    flex: 1 1 220px; max-width: 360px;
    padding: 0 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    height: 34px;
}
.topbar-search:focus-within {
    border-color: rgba(124,140,255,.5);
    background: rgba(255,255,255,.08);
}
.topbar-search-icon { color: var(--text-secondary); flex-shrink: 0; }
.topbar-search input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    color: var(--text-primary);
    font: inherit; font-size: .88rem;
    padding: 0;
}
.topbar-search input::placeholder { color: var(--text-secondary); opacity: .7; }
/* Hotkey-Hint im Suchfeld. Wird ausgeblendet, sobald der Input fokussiert
   ist — sonst belegt er Platz, den der User beim Tippen für den Cursor
   braucht. Auf engen Viewports (<560 px) komplett aus, damit das Eingabefeld
   nicht zu klein wird. */
.topbar-search-kbd {
    flex-shrink: 0;
    padding: 2px 6px;
    font: 600 .72rem ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    border: 1px solid var(--border-color, rgba(255,255,255,.15));
    border-radius: 5px;
    color: var(--text-secondary);
    background: rgba(255,255,255,.04);
    line-height: 1.2;
    letter-spacing: .02em;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}
.topbar-search:focus-within .topbar-search-kbd { display: none; }
@media (max-width: 560px) {
    .topbar-search-kbd { display: none; }
}
.topbar-search-results {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    max-height: 70vh; overflow-y: auto;
    /* Solider Fallback-Hintergrund analog .user-dropdown -- damit das
       Dropdown nicht durch die topbar-blur-Surface durchscheint, was den
       Inhalt unleserlich macht. !important hier weil die theme-spezifischen
       --bg-card-Werte zwar opaque sein sollten, aber dark-mode Overrides
       in app.css teilweise mit eigener !important-Spezifizitaet kollidieren. */
    background: #161c33 !important;
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    padding: 6px;
    z-index: 100;
}
.topbar-search-result {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: .88rem;
}
.topbar-search-result:hover,
.topbar-search-result.is-active {
    background: rgba(255,255,255,.08);
}
.topbar-search-result .icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0;
    font-size: .7rem; font-weight: 700;
}
.topbar-search-result .icon.ok       { background: rgba(22,163,74,.18);  color: #16a34a; }
.topbar-search-result .icon.warning  { background: rgba(217,119,6,.18);  color: #d97706; }
.topbar-search-result .icon.critical { background: rgba(220,38,38,.18);  color: #dc2626; }
.topbar-search-result .icon.unknown,
.topbar-search-result .icon.host     { background: rgba(156,163,175,.18); color: #9ca3af; }
.topbar-search-result .info { flex: 1; min-width: 0; }
.topbar-search-result .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search-result .meta { color: var(--text-secondary); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search-empty {
    padding: 14px; text-align: center;
    color: var(--text-secondary); font-size: .85rem;
}
.topbar-search-section-h {
    padding: 6px 10px 4px;
    color: var(--text-secondary);
    font-size: .7rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    /* Auf schmalen Viewports nimmt die Suche zu viel Platz weg -- schrumpfen
       lassen, Pills+Profil bleiben sichtbar. */
    .topbar-search { max-width: 180px; }
    .topbar-search input::placeholder { content: ''; }
}
@media (max-width: 480px) {
    /* Auf Phone: Suche komplett ausblenden -- Operator nutzt eh die
       eigentliche Liste/Dashboard direkt. */
    .topbar-search { display: none; }
}
@media (max-width: 640px) {
    /* Auf sehr schmalen Viewports nimmt die Topbar wenig Platz weg --
       Pills bleiben trotzdem sichtbar, nur ohne separaten Punkt. */
    .topbar-pill .dot { display: none; }
    .topbar-pill { padding: 4px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile-Touchups (Mai 2026)
   ───────────────────────────────────────────────────────────────────
   Auf Smartphones war u.a. der Task-Verlauf (/remote-admin#section-history)
   nicht bedienbar: `.card { overflow: hidden }` clippt die data-table, sobald
   ihre Spalten breiter als der Viewport werden -- und damit war die
   Aktions-Spalte ganz rechts ("Verlauf anzeigen") nicht mehr erreichbar.
   Dieser Block aktiviert horizontales Scrollen auf table-Card-Bodies und
   raeumt ein paar weitere Touch-Stoerstellen auf. Desktop bleibt
   unveraendert. */

/* Horizontale Scroll-Container fuer Tabellen-tragende Card-Bodies. Greift
   universell (auch Desktop wenn Sidebar offen + schmaler Bildschirm) und
   loest das "Card clippt zu breite Tabelle"-Problem -- die Aktions-Spalte
   ganz rechts wird wieder erreichbar, indem User seitlich scrollt. Wirkt
   per :has() nur dort wo wirklich eine Tabelle drin steckt, damit Card-
   Bodies mit anderem Inhalt nicht ungewollt ein Scrollverhalten bekommen.
   Momentum-Scroll auf iOS via -webkit-overflow-scrolling. */
.card-body.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-body:has(> .data-table),
.card-body:has(> table.data-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
    /* Kompakteres Layout -- mehr Inhaltsbreite, weniger Aussenrand */
    .main-content { padding: 14px 12px; }
    .card-body { padding: 12px; }
    .card-header { padding: 10px 12px; gap: 8px; }

    /* Tabellen: Spalten ihre natuerliche Breite behalten lassen +
       horizontal scrollen. Inline-style `width:100%` wird mit !important
       ueberschrieben, damit lange Zeilen nicht auf 360px gestaucht werden
       (in dem Fall werden Spalten unleserlich). Header-Texte nicht mehr
       umbrechen lassen, sonst werden Tabellen-Header doppelzeilig. */
    .card-body.p-0 .data-table,
    table.data-table { width: auto !important; min-width: 100%; }
    .data-table th { white-space: nowrap; }
    .data-table td { padding: 10px 12px; font-size: .82rem; }

    /* Page-Header: Titel und Aktionen sollen in zwei Reihen statt eng
       gequetscht nebeneinander stehen. page-header-left bleibt fluessig,
       page-header-actions klappt darunter um. */
    .page-header { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
    .page-header-actions { width: 100%; }
    .page-title { font-size: 1.2rem; }

    /* Touch-Hit-Targets: btn-xs / btn-sm sind auf Maus ausreichend, auf
       dem Finger zu klein. Mind. 32px Tap-Flaeche ist Apple-/Google-
       Empfehlung. white-space:nowrap bleibt damit Icon-Knoepfe nicht
       umbrechen. */
    .btn-xs { padding: 6px 10px; min-height: 32px; font-size: .78rem; }
    .btn-sm { padding: 7px 12px; min-height: 36px; }

    /* iOS zoomt automatisch in jedes Input < 16px beim Fokus -- das
       fuehrt zu einem stoerenden Viewport-Sprung. 16px = 1rem stoppt das. */
    .form-input, .form-select, .form-textarea,
    input[type=text], input[type=email], input[type=password],
    input[type=number], input[type=search], input[type=url],
    input[type=tel], textarea, select { font-size: 16px; }

    /* Topbar-Search-Input ist hier auch noch sichtbar (480px erst
       blendet sie aus) und sollte ebenfalls nicht zoomen. */
    .topbar-search input { font-size: 16px; }

    /* Topbar etwas kompakter -- 12px gap waere auf 360px schon Drittel
       der Breite zwischen Hamburger und User-Avatar weg. */
    .topbar { gap: 8px; padding: 0 12px; }
    .topbar-status-pills { margin-right: 4px; }
}

@media (max-width: 480px) {
    /* Sehr schmale Viewports: Topbar reduziert auf das Noetigste */
    .main-content { padding: 10px 10px; }
    .page-title { font-size: 1.05rem; }
    .ra-section-title { font-size: 1rem; }

    /* Status-Pills knapper -- nur die Zahl, Punkt ist eh schon weg */
    .topbar-status-pills { gap: 4px; margin-right: 4px; }
    .topbar-pill { font-size: .72rem; padding: 3px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * INDIGO-THEME (Light, inspiriert von mailvo.de — intern als "Indigo" registriert)
 * ───────────────────────────────────────────────────────────────────
 * Hellsystemiges Theme mit hellem Content-Hintergrund (slate-50), weißen
 * Cards und dunkler Sidebar+Topbar (Marineblau). Akzent in Indigo
 * (#6366f1 / #4f46e5). Schrift: Inter.
 *
 * SPEZIFIZITÄT: `html[data-theme="indigo"]` schlägt den Force-Override-
 * Block bei Zeile ~2610 (Selektor `:root, [data-theme="..."]`) — der hat
 * nur 0,1,0 (eine Klasse/Attribut), wir haben 0,1,1 (ein Element + ein
 * Attribut). Damit greifen unsere Vars trotz späteren Cascade-Position.
 *
 * Wer das Theme entfernen will: gesamten Block löschen — der Theme-
 * Picker in views/settings/profile.php fängt unbekannte Werte ab und
 * fällt sicher auf "monimoo" zurück.
 */
html[data-theme="indigo"] {
    /* Marken/Akzent */
    --color-primary:        #4f46e5;   /* Indigo-600 — Hover/aktiv */
    --color-primary-dark:   #4338ca;   /* Indigo-700 */
    --color-primary-light:  #eef2ff;   /* Indigo-50 — sehr helle Tints */
    --color-secondary:      #22d3ee;   /* Cyan-400 — Logo-Gradient Endfarbe */
    --color-success:        #16a34a;
    --color-warning:        #d97706;
    --color-danger:         #b91c1c;
    --color-info:           #6366f1;

    /* Flächen */
    --bg-base:        #f8fafc;          /* slate-50 — Body */
    --bg-page:        #f8fafc;
    --bg-card:        #ffffff;          /* Cards weiß mit Schatten */
    --bg-card-strong: #ffffff;
    --bg-sidebar:     #0b1020;          /* Hybrid: dunkle Sidebar */
    --bg-topbar:      rgba(11,16,32,.92);
    --bg-input:       #ffffff;
    --bg-hover:       #f1f5f9;          /* slate-100 */
    --bg-table-head:  #f8fafc;
    --bg-secondary:   #f1f5f9;

    /* Text */
    --text-primary:        #0f172a;     /* slate-900 */
    --text-secondary:      #475569;     /* slate-600 */
    --text-muted:          #64748b;     /* slate-500 */
    --text-tertiary:       #64748b;
    --text-sidebar:        #cbd5e1;     /* slate-300 — Text in dunkler Sidebar */
    --text-sidebar-active: #ffffff;

    --border-color:    #e2e8f0;         /* slate-200 */
    --border-strong:   #cbd5e1;         /* slate-300 */
    --shadow-card:     0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    color-scheme: light;
}

/* Body-Hintergrund + Gradient à la Mailvo. Body-Reset überschreibt den
   Default-Dark-Gradient des Override-Blocks. !important nötig, weil dort
   ebenfalls als `html, body { background: ... }` gesetzt. */
html[data-theme="indigo"],
html[data-theme="indigo"] body {
    background: #f8fafc !important;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Sidebar (dunkles Marineblau wie Mailvo-Nav-Look). */
html[data-theme="indigo"] .sidebar {
    background: linear-gradient(180deg, #0b1020 0%, #111733 100%) !important;
    border-right: 1px solid rgba(255,255,255,.06);
    color: var(--text-sidebar);
}
html[data-theme="indigo"] .sidebar-logo,
html[data-theme="indigo"] .sidebar-logo-text,
html[data-theme="indigo"] .sidebar-user-name { color: #ffffff; }
html[data-theme="indigo"] .sidebar-nav .nav-item { color: var(--text-sidebar); }
html[data-theme="indigo"] .sidebar-nav .nav-item:hover,
html[data-theme="indigo"] .sidebar-nav .nav-item.active {
    background: rgba(99,102,241,.18);
    color: #ffffff;
}
html[data-theme="indigo"] .sidebar-nav .nav-label,
html[data-theme="indigo"] .sidebar-user-role { color: #94a3b8; }
html[data-theme="indigo"] .sidebar-nav .nav-separator,
html[data-theme="indigo"] .sidebar-user { border-color: rgba(255,255,255,.08); }

/* Topbar (dezenter Glasfilter über dunkler Fläche). */
html[data-theme="indigo"] .topbar {
    background: rgba(11,16,32,.92) !important;
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #ffffff;
}
html[data-theme="indigo"] .topbar-search {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #cbd5e1;
}
html[data-theme="indigo"] .topbar-search input { color: #ffffff; }
html[data-theme="indigo"] .topbar-search input::placeholder { color: #94a3b8; }
html[data-theme="indigo"] .topbar-search-kbd {
    color: #cbd5e1; border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
}
html[data-theme="indigo"] .topbar-menu-btn,
html[data-theme="indigo"] .user-menu-btn,
html[data-theme="indigo"] .icon-btn { color: #cbd5e1; }
html[data-theme="indigo"] .topbar-menu-btn:hover,
html[data-theme="indigo"] .user-menu-btn:hover,
html[data-theme="indigo"] .icon-btn:hover { background: rgba(255,255,255,.08); color: #ffffff; }
html[data-theme="indigo"] .user-dropdown,
html[data-theme="indigo"] .notif-dropdown {
    background: #ffffff !important;
    color: var(--text-primary);
    border-color: var(--border-color) !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.12);
}
html[data-theme="indigo"] .dropdown-item { color: var(--text-primary); }
html[data-theme="indigo"] .dropdown-item:hover { background: var(--bg-hover); }

/* Cards/Forms — Light-Look. */
html[data-theme="indigo"] .card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
}
html[data-theme="indigo"] .card-header { border-bottom-color: var(--border-color); }
html[data-theme="indigo"] .card-title { color: var(--text-primary); }
html[data-theme="indigo"] .form-input,
html[data-theme="indigo"] .form-select,
html[data-theme="indigo"] .form-textarea {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 10px;
}
html[data-theme="indigo"] .form-input:focus,
html[data-theme="indigo"] .form-select:focus,
html[data-theme="indigo"] .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
html[data-theme="indigo"] .form-label,
html[data-theme="indigo"] .form-hint { color: var(--text-secondary); }

/* Tabellen */
html[data-theme="indigo"] .data-table { background: #ffffff; }
html[data-theme="indigo"] .data-table th {
    background: var(--bg-table-head);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
html[data-theme="indigo"] .data-table td { border-bottom-color: var(--border-color); color: var(--text-primary); }
html[data-theme="indigo"] .data-table tr:hover { background: var(--bg-hover); }

/* Buttons */
html[data-theme="indigo"] .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
html[data-theme="indigo"] .btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 6px 18px rgba(99,102,241,.35);
    transform: translateY(-1px);
}
html[data-theme="indigo"] .btn-ghost,
html[data-theme="indigo"] .btn-secondary {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
html[data-theme="indigo"] .btn-ghost:hover,
html[data-theme="indigo"] .btn-secondary:hover { background: var(--bg-hover); }

/* Alerts — heller Touch, dünner Akzentstrich links. */
html[data-theme="indigo"] .alert {
    border-radius: 12px;
    border-left-width: 3px;
    border-left-style: solid;
}
html[data-theme="indigo"] .alert-success { background:#ecfdf5; color:#065f46; border-color:#10b981; }
html[data-theme="indigo"] .alert-error   { background:#fef2f2; color:#991b1b; border-color:#ef4444; }
html[data-theme="indigo"] .alert-info    { background:#eef2ff; color:#3730a3; border-color:#6366f1; }

/* Badges */
html[data-theme="indigo"] .badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
html[data-theme="indigo"] .badge-success { background: #dcfce7; color: #15803d; }
html[data-theme="indigo"] .badge-warning { background: #fef3c7; color: #92400e; }
html[data-theme="indigo"] .badge-danger  { background: #fee2e2; color: #991b1b; }
html[data-theme="indigo"] .badge-info    { background: #dbeafe; color: #1e40af; }

/* Status-Pills in der Topbar — gleicher dunkler Hintergrund wie Topbar */
html[data-theme="indigo"] .topbar-pill {
    background: rgba(255,255,255,.08);
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,.12);
}
html[data-theme="indigo"] .topbar-pill-crit { color: #fca5a5; }
html[data-theme="indigo"] .topbar-pill-warn { color: #fcd34d; }
html[data-theme="indigo"] .topbar-pill-ok   { color: #86efac; }

/* Links auf hellem Hintergrund */
html[data-theme="indigo"] .main-content a:not(.btn):not(.nav-item):not(.dropdown-item):not(.sidebar-logo) {
    color: var(--color-primary);
}

/* Logo-Mark im Mailvo-Stil: Indigo→Cyan-Gradient. Wirkt nur auf den
   <rect> innerhalb des Sidebar-Logos (Hauptfarbe) — die weißen Details
   (Kopf, Hörner) bleiben. */
html[data-theme="indigo"] .sidebar-logo svg rect[fill="#65a30d"] { fill: url(#indigo-logo-grad); }